ci: add lint (#208)

yeonjuan · Aug 3, 2024 · 6b933b3 · 6b933b3
1 parent 0f20cd9
commit 6b933b3
Show file tree

Hide file tree

Showing 9 changed files with 121 additions and 47 deletions.
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -19,6 +19,8 @@ jobs:
         run: yarn install --immutable
       - name: Build
         run: yarn build
+      - name: Lint
+        run: yarn lint
       - name: Unit Tests
         run: yarn test
       - name: Check Spells

diff --git a/packages/website/.eslintignore b/packages/website/.eslintignore
@@ -2,3 +2,4 @@ dist
 .turbo
 src/out
 node_modules
+src/docs
diff --git a/packages/website/src/components/footer.html b/packages/website/src/components/footer.html
@@ -4,14 +4,23 @@
         <div class="flex flex-col">
             <ul>
                 <li>
-                    <a href="https://github.com/yeonjuan/html-eslint/issues" target="_blank noreferrer" class="text-slate-600">Report issue</a>
+                    <a
+                        href="https://github.com/yeonjuan/html-eslint/issues"
+                        target="_blank noreferrer"
+                        class="text-slate-600"
+                    >Report issue</a>
                 </li>
             </ul>
             <span class="text-black-500">Copyright © 2023 html-eslint</span>
         </div>
         <div class="ml-auto">
             <a href="https://github.com/yeonjuan/html-eslint">
-                <img src="~/src/assets/github.svg" alt="github" width="19px" height="19px">
+                <img
+                    src="~/src/assets/github.svg"
+                    alt="github"
+                    width="19px"
+                    height="19px"
+                >
             </a>
         </div>
     </section>

diff --git a/packages/website/src/components/header/header.html b/packages/website/src/components/header/header.html
@@ -23,13 +23,28 @@
 </style>
 <header class="flex fixed top-0 bg-white w-full z-50 flex-row items-center h-[66px] px-[20px] drop-shadow-[0_1px_#E8EBEF]">
     <a class="flex flex-row items-center md:py-0 no-underline text-black text-base text-[20px] font-[800]" href="/">
-        <img src="~/src/assets/logo.svg" alt="" class="inline w-[21px] mr-[11px]" width="21" height="24">html-eslint
+        <img
+            src="~/src/assets/logo.svg"
+            alt=""
+            class="inline w-[21px] mr-[11px]"
+            width="21"
+            height="24"
+        >html-eslint
     </a>
     <span class="body8 inline-block bg-gray-200 text-black-500 rounded-[12px] px-[8px] py-[5px] mx-[8px]">
         v{{ version }}
     </span>
-    <input id="menu" type="checkbox" class="menuInput peer sr-only hidden" aria-hidden="true">
-    <label for="menu" aria-label="menu button" class="burger flex flex-col justify-between ml-auto h-[21px] w-[21px] px-[1px] py-[3px] [&>div]:h-[2px] [&>div]:w-[18px] [&>div]:bg-black-900 md:hidden hover:cursor-pointer">
+    <input
+        id="menu"
+        type="checkbox"
+        class="menuInput peer sr-only hidden"
+        aria-hidden="true"
+    >
+    <label
+        for="menu"
+        aria-label="menu button"
+        class="burger flex flex-col justify-between ml-auto h-[21px] w-[21px] px-[1px] py-[3px] [&>div]:h-[2px] [&>div]:w-[18px] [&>div]:bg-black-900 md:hidden hover:cursor-pointer"
+    >
         <div></div>
         <div></div>
         <div></div>

diff --git a/packages/website/src/components/header/nav.html b/packages/website/src/components/header/nav.html
@@ -1,16 +1,30 @@
 <nav class="fixed transition-[max-height] duration-200 overflow-hidden max-h-0 top-[67px] left-[0px] peer-checked:max-h-[200px] bg-white w-full md:ml-auto md:flex md:top-auto md:max-h-max md:relative md:w-auto md:peer-checked:translate-y-0">
     <ul class="body2 flex flex-col text-black-500 p-[12px] [&>li>a]:px-[16px] [&>li>a]:py-[12px] [&>li]:rounded-[10px] md:[&>li>a]:px-0 md:[&>li>a]:py-0  md:title5 md:gap-[24px] md:flex-row md:p-0">
-        <li class="hover:text-black-900 hover:bg-gray-200 md:hover:bg-white" data-nav="/docs" data-nav-active="text-black-900">
+        <li
+            class="hover:text-black-900 hover:bg-gray-200 md:hover:bg-white"
+            data-nav="/docs"
+            data-nav-active="text-black-900"
+        >
             <a href="~/src/docs/getting-started.html" class="w-full h-full flex justify-center flex-col">
                 <span>Docs</span>
             </a>
         </li>
-        <li class="hover:text-black-900 hover:bg-gray-200 md:hover:bg-white" data-nav="/playground" data-nav-active="text-black-900">
+        <li
+            class="hover:text-black-900 hover:bg-gray-200 md:hover:bg-white"
+            data-nav="/playground"
+            data-nav-active="text-black-900"
+        >
             <a href="~/src/playground.html" class="w-full h-full flex justify-center flex-col">Playground</a>
         </li>
         <li class="hover:text-black-900 hover:bg-gray-200 md:hover:bg-white">
             <a href="https://github.com/yeonjuan/html-eslint" class="w-full h-full flex justify-center flex-col">
-                <img src="~/src/assets/github.svg" width="26" height="26" alt="github" class="hidden md:block">
+                <img
+                    src="~/src/assets/github.svg"
+                    width="26"
+                    height="26"
+                    alt="github"
+                    class="hidden md:block"
+                >
                 <span class="md:hidden">Github</span>
             </a>
         </li>

diff --git a/packages/website/src/components/home.html b/packages/website/src/components/home.html
@@ -34,7 +34,13 @@ <h2>
 
             </li>
         </ul>
-        <img src="~/src/assets/example.png" alt="" class="border-[1px] border-gray-300 rounded-[12px] md:rounded-[28px] p-[4px] md:max-w-[1028px] mt-[36px] md:mt-[60px]" width="1028" height="260">
+        <img
+            src="~/src/assets/example.png"
+            alt=""
+            class="border-[1px] border-gray-300 rounded-[12px] md:rounded-[28px] p-[4px] md:max-w-[1028px] mt-[36px] md:mt-[60px]"
+            width="1028"
+            height="260"
+        >
         <div class="py-4">
             <h2 class="py-4 text-[20px]">FAQ</h2>
             <ul class="my-2 max-w-[600px] text-left">

diff --git a/packages/website/src/components/layout.html b/packages/website/src/components/layout.html
@@ -12,27 +12,22 @@
         </block>
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <meta
-            name="description"
-            content="ESLint plugin for linting HTML. Find and fix problems in your HTML code"
-        >
+        <meta name="description" content="ESLint plugin for linting HTML. Find and fix problems in your HTML code">
         <meta property="og:title" content="ESLint plugin for linting HTML.">
-        <meta
-            property="og:description"
-            content="Find and fix problems in your HTML code"
-        >
+        <meta property="og:description" content="Find and fix problems in your HTML code">
         <meta property="og:image" content="~/src/assets/logo.png">
         <meta name="twitter:title" content="ESLint plugin for linting HTML.">
-        <meta
-            name="twitter:description"
-            content="Find and fix problems in your HTML code"
-        >
+        <meta name="twitter:description" content="Find and fix problems in your HTML code">
         <link rel="icon" href="~/src/assets/logo.svg">
         <link href="~/src/common.css" rel="stylesheet">
         <block name="head"></block>
         <link rel="stylesheet" href="~/src/highlight.scss">
         <link rel="preconnect" href="https://fonts.googleapis.com">
-        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+        <link
+            rel="preconnect"
+            href="https://fonts.gstatic.com"
+            crossorigin
+        >
         <link href="https://fonts.googleapis.com/css2?family=DM+Mono:wght@500&family=DM+Sans:opsz,[email protected],600;9..40,700&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
     </head>
     <body class="text-base relative">

diff --git a/packages/website/src/components/nav-list.html b/packages/website/src/components/nav-list.html
@@ -2,12 +2,21 @@
 <div>
     <label class="nav-list-title flex">
         <content></content>
-        <img class="mx-2 hidden" src="~/src/assets/icon-down-arrow.svg" alt="" width="14">
+        <img
+            class="mx-2 hidden"
+            src="~/src/assets/icon-down-arrow.svg"
+            alt=""
+            width="14"
+        >
     </label>
     <ul class="pl-1 [&>li]:pl-3 [&>li]:py-[4px] [&>li]:border-l [&>li]:border-slate-300 body4 md:body5">
         <each loop="item, index in list">
             <!-- eslint-disable-next-line @html-eslint/require-li-container -->
-            <li class="hover:border-slate-800 cursor-pointer text-black-500 hover:text-black-900" data-nav="/docs/rules/{{item[0]}}" data-nav-active="!border-slate-800 !text-slate-900">
+            <li
+                class="hover:border-slate-800 cursor-pointer text-black-500 hover:text-black-900"
+                data-nav="/docs/rules/{{item[0]}}"
+                data-nav-active="!border-slate-800 !text-slate-900"
+            >
                 <a href="{{item[1]}}" class="w-full no-underline inline-block">
                     {{item[0]}}
                 </a>

diff --git a/packages/website/src/components/nav.html b/packages/website/src/components/nav.html
@@ -8,69 +8,92 @@
   }
 </script>
 <div class="font-black md:pl-[280px] w-full md:w-[200px]">
-    <button id="nav-button" type="button" class="mt-[17px] flex md:hidden body4 text-black-700 w-full px-[16px] py-[12px] border-gray-300 border rounded-[6px]">
+    <button
+        id="nav-button"
+        type="button"
+        class="mt-[17px] flex md:hidden body4 text-black-700 w-full px-[16px] py-[12px] border-gray-300 border rounded-[6px]"
+    >
         Menu
-        <img src="~/src/assets/icon-chevron-right.svg" class="rotate-90 ml-auto" alt="">
+        <img
+            src="~/src/assets/icon-chevron-right.svg"
+            class="rotate-90 ml-auto"
+            alt=""
+        >
     </button>
-    <aside
-        id="nav"
-        class="hidden w-full border border-gray-300 border-t-0 bg-white md:h-[calc(100vh-66px)] md:overflow-y-auto md:block md:w-[280px] md:top-0 md:mt-[66px] md:fixed md:left-0 md:pb-[60px]"
-    >
+    <aside id="nav" class="hidden w-full border border-gray-300 border-t-0 bg-white md:h-[calc(100vh-66px)] md:overflow-y-auto md:block md:w-[280px] md:top-0 md:mt-[66px] md:fixed md:left-0 md:pb-[60px]">
         <div class="flex flex-col justify-center pr-4 pt-4 md:hidden">
-            <button type="button" id="nav-close-btn" class="hidden ml-auto w-[24px] h-[24px]">
+            <button
+                type="button"
+                id="nav-close-btn"
+                class="hidden ml-auto w-[24px] h-[24px]"
+            >
                 <img src="~/src/assets/icon-close.svg" alt="">
             </button>
         </div>
         <ul class="mt-[22px] px-[12px] [&>li]:px-[12px] [&>li]:mb-[12px]">
             <li>
                 <a href="~/src/docs/getting-started.html" class="w-full flex items-center">
                     <div class="w-[28px] h-[28px] rounded-[6px] p-[6px] border-[1px] border-gray-300 drop-shadow-[4px_0_2px_#E8EBEF] mr-[12px]">
-                        <img src="~/src/assets/icon-flag.svg" alt="" width="14" height="14">
+                        <img
+                            src="~/src/assets/icon-flag.svg"
+                            alt=""
+                            width="14"
+                            height="14"
+                        >
                     </div>
                     <span class="title5">Getting Started</span>
-                    <img src="~/src/assets/icon-chevron-right.svg" alt="" class="ml-auto" width="20" height="20">
+                    <img
+                        src="~/src/assets/icon-chevron-right.svg"
+                        alt=""
+                        class="ml-auto"
+                        width="20"
+                        height="20"
+                    >
                 </a>
             </li>
             <li>
                 <a href="~/src/docs/rules.html" class="w-full flex items-center">
                     <div class="w-[28px] h-[28px] rounded-[6px] p-[6px] border-[1px] border-gray-300 drop-shadow-[4px_0_2px_#E8EBEF] mr-[12px]">
-                        <img src="~/src/assets/icon-docs.svg" alt="" width="14" height="14">
+                        <img
+                            src="~/src/assets/icon-docs.svg"
+                            alt=""
+                            width="14"
+                            height="14"
+                        >
                     </div>
                     <span class="title5">Rules</span>
-                    <img src="~/src/assets/icon-chevron-right.svg" alt="" class="ml-auto" width="20" height="20">
+                    <img
+                        src="~/src/assets/icon-chevron-right.svg"
+                        alt=""
+                        class="ml-auto"
+                        width="20"
+                        height="20"
+                    >
                 </a>
             </li>
             <li>
-                <module
-                    href="/components/nav-list.html"
-                    locals='{ "id": "best-practice-nav", "list": {{bestPracticeNavs}} }'>
+                <module href="/components/nav-list.html" locals='{ "id": "best-practice-nav", "list": {{bestPracticeNavs}} }'>
                     <span class="title5">
                         Best Practice
                     </span>
                 </module>
             </li>
             <li>
-                <module
-                    href="/components/nav-list.html"
-                    locals='{ "id": "seo-nav", "list": {{seoNavs}} }'>
+                <module href="/components/nav-list.html" locals='{ "id": "seo-nav", "list": {{seoNavs}} }'>
                     <span class="title5">
                         SEO
                     </span>
                 </module>
             </li>
             <li>
-                <module
-                    href="/components/nav-list.html"
-                    locals='{ "id": "accessibility-nav", "list": {{accessibilityNavs}} }'>
+                <module href="/components/nav-list.html" locals='{ "id": "accessibility-nav", "list": {{accessibilityNavs}} }'>
                     <span class="title5">
                         Accessibility
                     </span>
                 </module>
             </li>
             <li>
-                <module
-                    href="/components/nav-list.html"
-                    locals='{ "id": "style-nav", "list": {{styleNavs}} }'>
+                <module href="/components/nav-list.html" locals='{ "id": "style-nav", "list": {{styleNavs}} }'>
                     <span class="title5">
                         Style
                     </span>
-Original file line number
+Diff line change
@@ Expand Up / @@ -2,3 +2,4 @@ dist @@
     .turbo
     src/out
     node_modules
+    src/docs