new archive time line

Author: fwqaaq

deno.jsonc

@@ -23,6 +23,7 @@
     "fs": "https://deno.land/[email protected]/fs/mod.ts",
     "type-mdast": "https://cdn.jsdelivr.net/npm/@types/[email protected]/index.d.ts",
     "unified": "https://esm.sh/[email protected]",
+    "mdast-util-toc": "https://esm.sh/[email protected]",
     "unified/index.d.ts": "https://esm.sh/[email protected]/index.d.ts",
     "unist-util-visit": "https://esm.sh/[email protected]",
     "remark-parse": "https://esm.sh/[email protected]",

public/css/index.css

@@ -171,6 +171,86 @@ footer div.footer-icons-container {
   margin-block-end: 4rem;
 }
 
+main.about-main {
+  display: flex;
+  justify-content: center;
+}
+
+.about-container {
+  display: flex;
+  flex-direction: column;
+  width: 92%;
+  max-width: var(--max-about-width);
+
+  &>h2 {
+    text-align: center;
+  }
+}
+
+.about-row {
+  display: flex;
+
+  &:last-child {
+    margin-block-end: 1.6rem;
+  }
+
+  section.box {
+    width: auto;
+    padding: 1.8rem 2rem;
+    border-color: none;
+    color: var(--theme-color);
+  }
+}
+
+.about-card-8 {
+  flex: 8;
+}
+
+.about-card-4 {
+  flex: 4;
+}
+
+.about-card-3 {
+  flex: 3;
+}
+
+.about-section-color-one {
+  background: linear-gradient(120deg, rgba(34, 194, 255, .2392156863) 0%, rgba(255, 29, 206, .15) 100%);
+}
+
+.about-section-color-two {
+  background: linear-gradient(120deg, rgba(29, 255, 199, 0.15) 0%, rgba(255, 211, 34, 0.239) 100%);
+}
+
+.about-section-color-three {
+  background: linear-gradient(120deg, rgba(123, 255, 29, 0.15) 0%, rgba(255, 34, 34, 0.239) 100%);
+}
+
+.about-section-color-four {
+  background: linear-gradient(120deg, rgba(82, 255, 29, 0.15) 0%, rgba(255, 34, 211, 0.239) 100%);
+}
+
+.about-section-color-five {
+  background: linear-gradient(120deg, rgba(255, 29, 29, 0.15) 0%, rgba(152, 34, 255, 0.239) 100%);
+}
+
+.about-section-color-six {
+  background: linear-gradient(120deg, rgba(0, 117, 195, 0.15) 0%, rgba(0, 202, 165, 0.239) 100%);
+}
+
+.archive-time-line {
+  display: flex;
+  justify-content: space-between;
+}
+
+.archive-time-line {
+  padding-block: 0.16rem;
+
+  &:hover {
+    box-shadow: 0 0.2rem 0 var(--table-border-color);
+  }
+}
+
 /* Match Chrome for about showing */
 @media (min-width: 48rem) {
   main.blog-main :where(.box, article.blog-article) {
@@ -287,71 +367,4 @@ footer div.footer-icons-container {
     width: 90%;
     padding-inline: 1rem;
   }
-}
-
-main.about-main {
-  display: flex;
-  justify-content: center;
-}
-
-.about-container {
-  display: flex;
-  flex-direction: column;
-  width: 92%;
-  max-width: var(--max-about-width);
-
-  &>h2 {
-    text-align: center;
-  }
-}
-
-.about-row {
-  display: flex;
-
-  &:last-child {
-    margin-block-end: 1.6rem;
-  }
-
-  section.box {
-    width: auto;
-    padding: 1.8rem 2rem;
-    border-color: none;
-    color: var(--theme-color);
-  }
-}
-
-.about-card-8 {
-  flex: 8;
-}
-
-.about-card-4 {
-  flex: 4;
-}
-
-.about-card-3 {
-  flex: 3;
-}
-
-.about-section-color-one {
-  background: linear-gradient(120deg, rgba(34, 194, 255, .2392156863) 0%, rgba(255, 29, 206, .15) 100%);
-}
-
-.about-section-color-two {
-  background: linear-gradient(120deg, rgba(29, 255, 199, 0.15) 0%, rgba(255, 211, 34, 0.239) 100%);
-}
-
-.about-section-color-three {
-  background: linear-gradient(120deg, rgba(123, 255, 29, 0.15) 0%, rgba(255, 34, 34, 0.239) 100%);
-}
-
-.about-section-color-four {
-  background: linear-gradient(120deg, rgba(82, 255, 29, 0.15) 0%, rgba(255, 34, 211, 0.239) 100%);
-}
-
-.about-section-color-five {
-  background: linear-gradient(120deg, rgba(255, 29, 29, 0.15) 0%, rgba(152, 34, 255, 0.239) 100%);
-}
-
-.about-section-color-six {
-  background: linear-gradient(120deg, rgba(0, 117, 195, 0.15) 0%, rgba(0, 202, 165, 0.239) 100%);
 }

src/util/remark/remark-list.js

@@ -1,6 +1,6 @@
 import { visit } from 'unist-util-visit'
 
-/** @return {import('unified/index.d.ts').Plugin<[], import('type-mdast').Root>}*/
+/** @type {import('unified/index.d.ts').Plugin<[], import('type-mdast').Root>}*/
 const remarkList = () => {
   return (/**@type {import('type-mdast').Root}*/tree) => {
     visit(

src/util/remark/remark-toc.js

@@ -1,16 +1,21 @@
 import { visit } from 'unist-util-visit'
-import { toc } from 'https://esm.sh/mdast-util-toc@7'
+import { toc } from 'mdast-util-toc'
 
-/** @returns {import('unified/index.d.ts').Plugin<[], import('type-mdast').Root>}*/
-const remarkToc = () => {
-  return (tree) => {
+/**
+ * @typedef {Object} RemarkTocOptions
+ * @property {string} [flag='[TOC]'] - The flag to replace with the table of contents.
+ */
 
+/** @type {import('unified/index.d.ts').Plugin<[RemarkTocOptions], import('type-mdast').Root>}*/
+const remarkToc = (options = {}) => {
+  const { flag = '[TOC]' } = options
+  return (tree) => {
     /** @type {{type: string, depth: number, children: []}[]}*/
     const headings = []
     visit(tree, "heading", (/**@type {import("type-mdast").Node} */ node, _index) => {
-      // Using `type: "link"` when heading is not a text node
       /**@type {string} */
       let title = node.children[0].value
+      // Using others type when heading is not a text node
       if (node.children[0].type !== "text" && node.children[0].children[0]) {
         title = node.children[0].children[0].value
       }
@@ -21,7 +26,7 @@ const remarkToc = () => {
     })
 
     visit(tree, "paragraph", (/**@type {import("type-mdast").Node} */ node, _index) => {
-      if (node.children?.[0]?.value !== "[TOC]") return
+      if (node.children?.[0]?.value !== flag) return
       const table = toc({ type: "root", children: headings })
       // update toc node
       table.map.data = {

src/util/utils.js

@@ -114,8 +114,8 @@ export async function generatePage(
       (acc, { date, summary }) => {
         const place = `/./posts/${handleUTC(date)}/index.html`
         return acc +
-          `<p><a class="decoration-line" href=${place} target="_blank"> ${summary} ··· ${convertToUSA(date)
-          }</a></p>`
+          `<p class="archive-p-line"><a class="archive-time-line" href=${place} target="_blank"> <span>${summary}</span> <span>${convertToUSA(date)
+          }</span></a></p>`
       },
       '',
     )