format some code

Author: fwqaaq

src/plugins/core.js

@@ -12,7 +12,7 @@ export class Core {
     }
   }
 
-  use(/**@type {Plugin}*/ plugin) {
+  use(/**@type {import("../util/type.js").Plugin}*/ plugin) {
     if (this.plugins.has(plugin.name)) {
       throw new Error(`Plugin ${plugin.name} already exists`)
     }

src/posts/css_animation.md

@@ -98,3 +98,39 @@ document.startViewTransition(
   ['--end-radius', `${endRadius}px`]
 ].forEach(([v, c]) => document.documentElement.style.setProperty(v, c))
 ```
+
+### 过渡动画
+
+在过渡动画中，经常可以看到在 AJAX 请求中，有一个圆圈过渡的动画，这个实现也是非常简单。
+
+1. 圆圈动画的实现，实际上就是少了一个 border 的圆圈在不停的旋转：
+
+    ```css
+    .loading::after {
+      content: "";
+      display: block;
+      position: absolute;
+      top: 50vh;
+      left: 50%;
+      width: 60px;
+      height: 60px;
+      margin: -30px 0 0 -30px;
+      border-radius: 50%;
+      border-style: solid;
+      border-color: var(--theme-color) var(--theme-color) var(--theme-color) transparent;
+      animation: spin 1s ease-in-out infinite;
+      z-index: 1;
+    }
+    
+    @keyframes spin {
+      0% {
+        transform: rotate(0deg);
+      }
+    
+      100% {
+        transform: rotate(360deg)
+      }
+    }
+    ```
+
+2. 在 AJAX 请求中，要选择对时机，在请求开始的时候添加 `.loading` 类，请求结束的时候移除 `.loading` 类。参见：<https://github.com/fwqaaq/fwqaaq.github.io/blob/13aab4ed811fa89898321e470382479ab053e5d8/public/JavaScript/index.js#L196-L204>

src/posts/gitLFS.md renamed to src/posts/git_lfs.md

@@ -9,7 +9,7 @@ summary: 使用 GIT LFS 进行大文件的版本控制
 
 [TOC]
 
-## [GIT LEF](https://git-lfs.com)
+## [GIT LFS](https://git-lfs.com)
 
 > Git LFS 是对例如音频、视频、图形等大文件的一种扩展，它可以将大文件存储在 Git 仓库之外，从而加快 Git 的速度，同时也可以避免 Git 仓库过大。
 

src/util/remark/remark-list.js

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

src/util/remark/remark-toc.js

@@ -12,44 +12,52 @@ const remarkToc = (options = {}) => {
   return (tree) => {
     /** @type {{type: string, depth: number, children: []}[]}*/
     const headings = []
-    visit(tree, "heading", (/**@type {import("type-mdast").Node} */ node, _index) => {
-      /**@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
-      }
-      /**@type {number} */
-      const depth = node.depth
-      const children = [{ type: "text", value: title }]
-      headings.push({ type: "heading", depth, children })
-    })
+    visit(
+      tree,
+      'heading',
+      (/**@type {import("type-mdast").Node} */ node, _index) => {
+        /**@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
+        }
+        /**@type {number} */
+        const depth = node.depth
+        const children = [{ type: 'text', value: title }]
+        headings.push({ type: 'heading', depth, children })
+      },
+    )
 
-    visit(tree, "paragraph", (/**@type {import("type-mdast").Node} */ node, _index) => {
-      if (node.children?.[0]?.value !== flag) return
-      const table = toc({ type: "root", children: headings })
-      // update toc node
-      table.map.data = {
-        hProperties: {
-          class: "remark-toc",
-        },
-      }
-      node.data = {
-        hName: "details",
-        hProperties: {
-          class: "remark-toc-details",
-        },
-      }
-      node.children = [
-        {
-          type: "html",
-          value: "<summary class='remark-toc-summary'>目录</summary>",
-        },
-        table.map
-      ]
-    })
+    visit(
+      tree,
+      'paragraph',
+      (/**@type {import("type-mdast").Node} */ node, _index) => {
+        if (node.children?.[0]?.value !== flag) return
+        const table = toc({ type: 'root', children: headings })
+        // update toc node
+        table.map.data = {
+          hProperties: {
+            class: 'remark-toc',
+          },
+        }
+        node.data = {
+          hName: 'details',
+          hProperties: {
+            class: 'remark-toc-details',
+          },
+        }
+        node.children = [
+          {
+            type: 'html',
+            value: "<summary class='remark-toc-summary'>目录</summary>",
+          },
+          table.map,
+        ]
+      },
+    )
     return tree
   }
 }
 
-export default remarkToc
+export default remarkToc

src/util/utils.js

@@ -114,13 +114,15 @@ export async function generatePage(
       (acc, { date, summary }) => {
         const place = `/./posts/${handleUTC(date)}/index.html`
         return acc +
-          `<p class="archive-p-line"><a class="archive-time-line" href=${place} target="_blank"> <span>${summary}</span> <span>${convertToUSA(date)
+          `<p class="archive-p-line"><a class="archive-time-line" href=${place} target="_blank"> <span>${summary}</span> <span>${
+            convertToUSA(date)
           }</span></a></p>`
       },
       '',
     )
-    const itemBody = `${itemHead}${header}${templateArticle({ title: key, content: p })
-      }${footer}`
+    const itemBody = `${itemHead}${header}${
+      templateArticle({ title: key, content: p })
+    }${footer}`
     await Deno.writeTextFile(itemUrl, itemBody)
   }
 }