docs: improve website

yeonjuan · Dec 9, 2023 · a7d9713 · a7d9713
1 parent 56a3c77
commit a7d9713
Show file tree

Hide file tree

Showing 17 changed files with 124 additions and 66 deletions.
diff --git a/packages/website/firebase.json b/packages/website/firebase.json
@@ -3,6 +3,35 @@
     "public": "out",
     "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
     "cleanUrls": true,
-    "trailingSlash": false
+    "trailingSlash": false,
+    "headers": [
+      {
+        "source": "**/*.html",
+        "headers": [
+          {
+            "key": "Cache-Control",
+            "value": "max-age=0, no-cache"
+          }
+        ]
+      },
+      {
+        "source": "**/*.@(css|js)",
+        "headers": [
+          {
+            "key": "Cache-Control",
+            "value": "max-age=31536000"
+          }
+        ]
+      },
+      {
+        "source": "**/*.@(jpg|jpeg|gif|png)",
+        "headers": [
+          {
+            "key": "Cache-Control",
+            "value": "max-age=31536000"
+          }
+        ]
+      }
+    ]
   }
 }
diff --git a/packages/website/scripts/generates/convert-to-html.js b/packages/website/scripts/generates/convert-to-html.js
@@ -2,6 +2,7 @@
  * @typedef {import("marked").Marked} Marked
  */
 const fs = require("fs");
+const path = require("path");
 
 /**
  * @param {object} src
@@ -19,9 +20,18 @@ function convertToHTML(src, dist, marked, options) {
   const srcMarkdown = fs.readFileSync(src.markdownPath, "utf-8");
   const partialHtml = options.wrapper(marked.parse(srcMarkdown));
   fs.writeFileSync(dist.partialHtmlPath, partialHtml);
-
   const templateHtml = fs.readFileSync(src.templateHtmlPath, "utf-8");
-  const html = templateHtml.replace("{{path}}", options.includePath);
+  const meta = `<title>${
+    path.parse(src.markdownPath).name
+  } - html-eslint</title>
+  <link rel="canonical" href="${dist.htmlPath
+    .replace(path.join(process.cwd(), "src"), "https://html-eslint.org")
+    .replace(".html", "/")}">
+   `;
+
+  const html = templateHtml
+    .replace("{{path}}", options.includePath)
+    .replace("{{meta}}", meta);
   fs.writeFileSync(dist.htmlPath, html);
 }
 

diff --git a/packages/website/scripts/generates/html-factory.js b/packages/website/scripts/generates/html-factory.js
@@ -7,7 +7,7 @@ const fileIconMap = {
 const fileIcon = (name) => {
   const icon = fileIconMap[name];
   if (!icon) return "";
-  return `<img src="${icon}" alt="">`;
+  return `<img src="${icon}" alt="" width="20" height="20">`;
 };
 
 const fileName = (name) => {
@@ -32,7 +32,7 @@ const exampleCode = (type, code) => {
 };
 
 const exampleIcon = (type) => {
-  return `<img src="~/src/assets/icon-${type}.svg" class="inline mr-[9px] alt="">`;
+  return `<img src="~/src/assets/icon-${type}.svg" class="inline mr-[9px]" alt="">`;
 };
 
 module.exports = {

diff --git a/packages/website/scripts/generates/renderer.js b/packages/website/scripts/generates/renderer.js
@@ -16,7 +16,7 @@ module.exports = {
     return `
     <h${level} id="${id}" class="group md-heading${level}">
       ${text}
-      <a href="#${id}" ><img src="~/src/assets/link.svg" alt="" class="inline md:hidden md:group-hover:inline ${linkIconClass[level]}"></a>
+      <a href="#${id}" aria-label="${text}"><img src="~/src/assets/link.svg" alt="" class="inline md:hidden md:group-hover:inline ${linkIconClass[level]}"></a>
     </h${level}>`;
   },
   paragraph(text) {
@@ -57,7 +57,7 @@ module.exports = {
   },
   link(href, title, text) {
     if (href.indexOf("http") === 0) {
-      text += `<img class="inline" src="~/src/assets/icon-external-link.svg">`;
+      text += `<img class="inline" src="~/src/assets/icon-external-link.svg" alt="" width="20" height="20">`;
     }
     return `<a href="${href}" class="md-a" target="_blank" rel="noopener noreferrer">${text}</a>`;
   },

diff --git a/packages/website/src/common.css b/packages/website/src/common.css
@@ -112,7 +112,7 @@
     @apply w-full pb-6 max-w-[1200px] md:pl-[40px] md:pr-[40px];
   }
   .md-code-filename {
-    @apply flex bg-gray-300 text-black-500 code2 px-[20px] py-[12px] rounded-t-[8px];
+    @apply flex bg-gray-300 text-black-700 code2 px-[20px] py-[12px] rounded-t-[8px];
   }
   .md-code-incorrect {
     @apply !bg-gray-200 border-l-[#E94C6B] border-l-[3px] ml-[7px] rounded-r-[8px];

diff --git a/packages/website/src/components/footer.html b/packages/website/src/components/footer.html
@@ -1,19 +1,18 @@
 
-<footer class="pt-[32px] px-[20px] border-t h-[150px] shadow-[0_-1px_0_0_#E8EBEF] body5 {{class}}">
-    <section class="flex w-full">
+<footer class="border-t h-[150px] shadow-[0_-1px_0_0_#E8EBEF] body5 {{class}}">
+    <section class="m-auto flex w-full md:max-w-[1200px] pt-[32px] pb-[54px] px-[24px]">
         <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>
                 </li>
             </ul>
-            <span class="text-black-300">Copyright © 2023 html-eslint</span>
+            <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">
             </a>
-
         </div>
     </section>
 </footer>
diff --git a/packages/website/src/components/header/header.html b/packages/website/src/components/header/header.html
@@ -1,14 +1,35 @@
+<style>
+  .burger {
+  cursor: pointer;
+  justify-content: space-between;
+  flex-direction: column;
+}
+
+.burger > div {
+  height: 2px;
+  transition: 0.2s ease-out;
+  z-index: 999;
+}
+
+.menuInput:checked ~ .burger > div:nth-child(1) {
+  transform: translateY(6.5px) rotate(45deg);
+}
+.menuInput:checked ~ .burger > div:nth-child(2) {
+  opacity: 0;
+}
+.menuInput:checked ~ .burger > div:nth-child(3) {
+  transform: translateY(-6.5px) rotate(-45deg);
+}
+</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 font-medium" href="/">
-        <h2 class="text-base text-[20px] font-[800]">
-            <img src="~/src/assets/logo.svg" alt="" class="inline w-[21px] mr-[11px]" width="21" height="24">html-eslint
-        </h2>
+    <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
     </a>
-    <span class="body8 inline-block bg-gray-200 text-gray-600 rounded-[12px] px-[8px] py-[5px] mx-[8px]">
-        v0.21.0
+    <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="peer sr-only">
-    <label for="menu" aria-label="menu button" class="flex flex-col justify-between ml-auto h-[20px] w-[20px] 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
@@ -10,7 +10,7 @@
         </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" 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
@@ -1,27 +1,25 @@
-<div class="px-4 flex flex-col w-full text-left justify-center md:text-center">
-    <section class="py-4 md:py-8 flex flex-col items-center">
-        <h1 class="py-4 font-bold text-[40px] leading-[42px] md:text-[60px] md:leading-[68px]">
+<div class="flex flex-col w-full text-left justify-center md:text-center items-center">
+    <section class="pt-[24px] md:pt-[150px] pb-[100px] md:pb-[120px] md:max-w-[1200px] flex flex-col items-center">
+        <h1 class="display1 md:text-[60px] md:leading-[68px] md:font-bold">
             An <span class="text-accent">ESLint</span>
-            plugin to lint and fix <span class="text-accent">HTML code</span>.
+            <br class="md:hidden">
+            plugin<br>
+            to lint and fix <span class="text-accent">HTML code</span>.
         </h1>
-        <p>
-            ESLint is a popular linting tool, but it only supports JavaScript.
+        <p class="text-black-900 mb-[24px] md:mb-[60px] mt-[12px] md:mt-[20px]">
+            ESLint is a popular linting tool, but it only supports JavaScript.<br>
             This plugin allows you to lint your HTML code without having to install a separate linting tool or worry about editor support.
         </p>
-        <ul class="[&>li]:py-1 md:flex md:justify-center md:gap-5 [&>li]:my-[20px]">
+        <ul class="[&>li]:py-1 flex md:justify-center gap-[12px] md:gap-[20px]">
             <li>
                 <a href="~/src/docs/getting-started.html" class="bg-black-900 px-[20px] py-[10px] text-white rounded-[12px]">Getting Started</a>
             </li>
             <li>
                 <a href="~/src/playground.html" class="bg-white border border-gray-400 px-[20px] py-[10px] text-gray-900 rounded-[12px]">Playground</a>
             </li>
         </ul>
-        <img src="~/src/assets/example.png" alt="" class="md:max-w-[600px] border-[1px] border-gray-300" width="600" height="153">
-
-    </section>
-
-    <section class="py-8">
-        <p class="text-center">
+        <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">
+        <p class="text-center text-black-700 body3 mt-[36px] md:mt-[80px]">
             If you find this project useful, <br>
             Please support this project with a <a href="https://github.com/yeonjuan/html-eslint" target="_blank" rel="noreferrer noopener">Github Star!</a>
         </p>

diff --git a/packages/website/src/components/layout.html b/packages/website/src/components/layout.html
@@ -1,9 +1,9 @@
-<!-- eslint-disable @html-eslint/require-title -->
 <script locals>
   module.exports = {
     version: locals.version
   }
 </script>
+<!-- eslint-disable @html-eslint/require-title -->
 <!DOCTYPE html>
 <html lang="en" class="light">
     <head>
@@ -35,9 +35,9 @@
         <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="bg-white text-slate-950 text-base relative">
-        <module href="/components/header/header.html"></module>
-        <main class="relative pt-[83px] px-[20px] md:flex" role="main">
+    <body class="text-base relative">
+        <module href="/components/header/header.html" locals='{"version": "{{version}}"}'></module>
+        <main class="relative pt-[66px] px-[20px] md:flex" role="main">
             <block name="menu"></block>
             <block name="nav"></block>
             <block name="content"></block>

diff --git a/packages/website/src/components/nav-list.html b/packages/website/src/components/nav-list.html
@@ -7,7 +7,7 @@
     <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-slate-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
@@ -1,4 +1,3 @@
-
 <script locals>
   module.exports = {
     projectNavs: locals.navs.project,
@@ -9,11 +8,11 @@
   }
 </script>
 <div class="font-black md:pl-[280px] w-full md:w-[200px]">
-    <button id="nav-button" type="button" class="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="">
     </button>
-    <nav
+    <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]"
     >
@@ -26,57 +25,57 @@
             <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="">
+                        <img src="~/src/assets/icon-flag.svg" alt="" width="14" height="14">
                     </div>
-                    <h4 class="title5">Getting Started</h4>
-                    <img src="~/src/assets/icon-chevron-right.svg" alt="" class="ml-auto">
+                    <span class="title5">Getting Started</span>
+                    <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="">
+                        <img src="~/src/assets/icon-docs.svg" alt="" width="14" height="14">
                     </div>
-                    <h4 class="title5">Rules</h4>
-                    <img src="~/src/assets/icon-chevron-right.svg" alt="" class="ml-auto">
+                    <span class="title5">Rules</span>
+                    <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}} }'>
-                    <h4 class="title5">
+                    <span class="title5">
                         Best Practice
-                    </h4>
+                    </span>
                 </module>
             </li>
             <li>
                 <module
                     href="/components/nav-list.html"
                     locals='{ "id": "seo-nav", "list": {{seoNavs}} }'>
-                    <h4 class="title5">
+                    <span class="title5">
                         SEO
-                    </h4>
+                    </span>
                 </module>
             </li>
             <li>
                 <module
                     href="/components/nav-list.html"
                     locals='{ "id": "accesibility-nav", "list": {{accssibilityNavs}} }'>
-                    <h4 class="title5">
+                    <span class="title5">
                         Accesibility
-                    </h4>
+                    </span>
                 </module>
             </li>
             <li>
                 <module
                     href="/components/nav-list.html"
                     locals='{ "id": "style-nav", "list": {{styleNavs}} }'>
-                    <h4 class="title5">
+                    <span class="title5">
                         Style
-                    </h4>
+                    </span>
                 </module>
             </li>
         </ul>
-    </nav>
+    </aside>
 </div>
diff --git a/packages/website/src/components/playground.html b/packages/website/src/components/playground.html
@@ -1,4 +1,4 @@
-<div class="w-full p-4">
+<div class="w-full">
     <style>
       .CodeMirror {
           font-size: 14px;

diff --git a/packages/website/src/components/template.html b/packages/website/src/components/template.html
@@ -1,9 +1,7 @@
-<script locals>
-  module.exports = {
-    version: locals.version,
-  };
-</script>
-<extends src="components/layout.html" locals="{{version}}">
+<extends src="components/layout.html">
+    <block name="meta">
+        {{meta}}
+    </block>
     <block name="nav">
         <include src="components/nav.html"></include>
     </block>

diff --git a/packages/website/src/index.html b/packages/website/src/index.html
@@ -1,11 +1,14 @@
 <!doctype html>
 <extends src="components/layout.html">
+    <block name="meta">
+        <title>html-eslint</title>
+        <link rel="canonical" href="https://html-eslint.org/">
+    </block>
     <block name="nav"></block>
     <block name="content">
         <include src="components/home.html"></include>
     </block>
     <block name="footer">
         <module href="/components/footer.html" locals='{"class":""}'></module>
-
     </block>
 </extends>
diff --git a/packages/website/src/playground.html b/packages/website/src/playground.html
@@ -2,6 +2,7 @@
 <extends src="components/layout.html">
     <block name="meta">
         <title>Playground - html-eslint</title>
+        <link rel="canonical" href="https://html-eslint.org/playground/">
     </block>
     <block name="nav">
     </block>