feat

laoergege · Sep 4, 2024 · 757536b · 757536b
1 parent 0527659
commit 757536b
Show file tree

Hide file tree

Showing 12 changed files with 471 additions and 454 deletions.
diff --git a/README.md b/README.md
@@ -19,15 +19,12 @@ Thanks for the help of the following projects.
   - [x] 目录导航
 - [x] giscus 评论功能
 - [x] 夜间模式
+- [x] algolia docsearch 文档搜索
+- [x] 图片优化
 - 部署
-  - [ ] 
+  - [x] cloudflare page
 - [x] 工具栏
   - [ ] 图标标亮
   - [ ] 侧边栏
-- [x] 图片优化
-- [x] 通过 GithubActions 自动化部署到 GithubPage
-  - [x] 自定义域名
 - [ ] PWA 安装
-  - [ ] SW 缓存
-- [ ] 全文搜索
-- [ ] 用户订阅
+  - [ ] SW 缓存
diff --git a/assets/index.css b/assets/index.css
@@ -1,6 +1,6 @@
 .main-container {
   display: grid;
-  grid-template-columns: 1fr [main-start] minmax(0, 768px) [main-end] 1fr;
+  grid-template-columns: 1fr [main-start] minmax(0, 900px) [main-end] 1fr;
 
   .place-main {
     grid-column: main;

diff --git a/components/Side.vue b/components/Side.vue
@@ -47,7 +47,6 @@ const SideComponent = defineComponent({
     return {
       checked,
       getComp() {
-        console.log("side comp: ", comp);
         return comp;
       },
       from(c: Component) {

diff --git a/components/Toc.vue b/components/Toc.vue
@@ -2,22 +2,28 @@
 import { useSubscription } from "@vueuse/rxjs";
 import { fromEvent, from, startWith } from "~/node_modules/rxjs";
 import {
-  debounceTime, switchMap, filter, tap, throttleTime
+  debounceTime,
+  switchMap,
+  filter,
+  tap,
+  throttleTime,
 } from "~/node_modules/rxjs/operators";
 import { ref } from "vue";
 import { articleMounted$ } from "~/pages/[...slug].vue";
 
 export default defineComponent({
   setup() {
     const archors = computed<HTMLElement[]>(() => {
-      return Array.from(articleMounted$.value?.querySelectorAll("h1, h2, h3") ?? [])
-    })
-    const itemsRef = ref<HTMLElement[]>([])
+      return Array.from(
+        articleMounted$.value?.querySelectorAll("h1, h2, h3") ?? []
+      );
+    });
+    const itemsRef = ref<HTMLElement[]>([]);
 
     // #region 滚动自动目录定位
-    if (process.client) {
+    if (import.meta.browser) {
       onMounted(() => {
-        const archorsOffsetTop = archors.value.map(e => e.offsetTop)
+        const archorsOffsetTop = archors.value.map((e) => e.offsetTop);
 
         useSubscription(
           fromEvent(document, "scroll")
@@ -29,47 +35,59 @@ export default defineComponent({
                 itemsRef.value[+idx]?.classList.remove("active");
               }),
               filter(([idx, offsetTop]) => {
-                let d = window.scrollY
-                return d + 2 <= (offsetTop) // 2 误差调整
+                let d = window.scrollY;
+                return d + 2 <= offsetTop; // 2 误差调整
               }),
               throttleTime(10),
               tap(([idx, offsetTop]) => {
                 itemsRef.value[+idx - 1]?.classList.add("active");
-              }),
-            ).subscribe()
-        )
-      })
+              })
+            )
+            .subscribe()
+        );
+      });
     }
     // #endregion
 
-    let i = 0
+    let i = 0;
     const tree = (list: any[]) => {
       return (
         <ul class="whitespace-normal">
-          {list.map(item => {
+          {list.map((item) => {
             return (
               <li>
-                <a href={`#${archors.value[i++]?.id}`} ref={itemsRef} ref_for={true}>{item.text} </a>
+                <a
+                  href={`#${archors.value[i++]?.id}`}
+                  ref={itemsRef}
+                  ref_for={true}>
+                  {item.text}{" "}
+                </a>
                 {Array.isArray(item.children) && tree(item.children)}
               </li>
-            )
+            );
           })}
         </ul>
-      )
-    }
+      );
+    };
     const { toc, page } = useContent();
 
     return () => {
-      i = 0
+      i = 0;
       return archors.value.length ? (
         <ul class="menu menu-md whitespace-normal">
           <li>
-            <a class="menu-title" ref={itemsRef} ref_for={true} href={`#${archors.value[i++]?.id}`}>{page.value.title}</a>
+            <a
+              class="menu-title"
+              ref={itemsRef}
+              ref_for={true}
+              href={`#${archors.value[i++]?.id}`}>
+              {page.value.title}
+            </a>
             {tree(toc.value.links)}
           </li>
-        </ul >
-      ) : null
-    }
-  }
-})
-</script>
+        </ul>
+      ) : null;
+    };
+  },
+});
+</script>
diff --git a/components/content/ProseImg.vue b/components/content/ProseImg.vue
@@ -1,33 +1,20 @@
 <template>
-  <!-- <NuxtImg :src="src" class="w-auto max-h-[90vh] mx-auto bg-white p-2" ref="elRef" data-zoomable="1"
-    :loading="isLazy ? 'lazy' : 'eager'" :preload="!isLazy" :width="width" :height="height" quality="80" densities="x1">
-  </NuxtImg> -->
+  <NuxtImg
+    :src="src"
+    class="w-auto max-h-[90vh] mx-auto bg-white p-2"
+    ref="elRef"
+    data-zoomable="1"
+    :loading="isLazy() ? 'lazy' : 'eager'"
+    :preload="!isLazy()"
+    :width="width"
+    :height="height"
+    quality="80"
+    densities="x1">
+  </NuxtImg>
 </template>
 
 <script lang="ts">
 import { defineComponent } from "vue";
-import { useRoute } from "vue-router";
-
-// #region 指定前几张图像预加载、其后的懒加载
-let i = 0;
-let key = "";
-const flag = 1;
-const useImgLoading = () => {
-  const path = useRoute().path;
-  if (key !== path) {
-    i = 0;
-    key = path;
-  } else {
-    i++;
-  }
-
-  return {
-    get isLazy() {
-      return i > flag;
-    },
-  };
-};
-// #endregion
 
 export default defineComponent({
   props: {
@@ -49,7 +36,8 @@ export default defineComponent({
     },
   },
   async setup({ src }) {
-    const { isLazy } = useImgLoading();
+    let i = inject("imgFlag", 0);
+    const isLazy = () => i++ > 1;
 
     // FIX: nuxt-content 和 ipx 会重复对 link 编码
     const _src = decodeURIComponent(src);

diff --git a/components/content/ProseUl.vue b/components/content/ProseUl.vue
@@ -0,0 +1,39 @@
+<template>
+  <ul>
+    <slot />
+  </ul>
+</template>
+
+<style>
+article {
+  li ul::before {
+    content: "";
+    position: absolute;
+    height: calc(100% - 16px);
+    width: 1px;
+    background-color: oklch(var(--b3));
+    left: -1em;
+    top: 1.2em;
+  }
+
+  ul {
+    list-style: none;
+    padding-left: 18px;
+
+    li {
+      position: relative;
+      margin: 12px 0 !important;
+      display: list-item;
+
+      &::before {
+        content: "-";
+        font-size: 1.3em;
+        position: absolute;
+        left: -1em;
+        color: oklch(var(--nc));
+        top: -0.25em;
+      }
+    }
+  }
+}
+</style>
diff --git a/content/前端框架及工程化/vue 的响应式渲染机制.md b/content/前端框架及工程化/vue 的响应式渲染机制.md
@@ -659,7 +659,7 @@ queueJob 中 `isFlushing && job.allowRecurse ? flushIndex + 1 : flushIndex` 里
 
 > 这里有个 [issue](https://github.com/vuejs/vue-next/issues/1801) 上面的示例可以去调试看看。
 
-## [ReactiveEffect.allowRecurse](#Effect.allowRecurse)
+## ReactiveEffect.allowRecurse
 
 ReactiveEffect.allowRecurse 并没有过多的注释，但我们可以从 `packages/runtime-core/src/scheduler.ts` 中发现相关注释，其实 Render ReactiveEffect 就是 SchedulerJob。
 

diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -3,7 +3,6 @@ import type { } from "@vite-pwa/nuxt";
 import type { } from "@nuxtjs/tailwindcss";
 import type { } from "@nuxt/content";
 import config from "./app.config";
-import { resolve } from "node:path";
 
 // https://v3.nuxtjs.org/api/configuration/nuxt.config
 export default defineNuxtConfig({
@@ -13,7 +12,7 @@ export default defineNuxtConfig({
   modules: [
     "@nuxt/content",
     '@nuxtjs/tailwindcss',
-    // "@nuxt/image",
+    "@nuxt/image",
     "nuxt-icon",
     "@nuxtjs/color-mode",
     // "@vite-pwa/nuxt",
@@ -28,23 +27,10 @@ export default defineNuxtConfig({
     }
   },
 
-  hooks: {
-    "prerender:routes"(ctx) {
-      console.log(ctx.routes.values())
-    },
-    "build:error"(error) {
-      console.log(error)
-    }
-  },
-
   nitro: {
     prerender: {
       failOnError: false,
       ignore: [
-        // (path) => {
-        //   console.log(path)
-        //   return true
-        // }
         /^http/
       ]
     }

diff --git a/package.json b/package.json
@@ -38,7 +38,7 @@
   "devDependencies": {
     "@nuxt-themes/typography": "^1.0.1",
     "@nuxt/content": "^2.13.2",
-    "@nuxt/image": "^1.7.0",
+    "@nuxt/image": "^1.8.0",
     "@nuxtjs/color-mode": "^3.4.1",
     "@nuxtjs/tailwindcss": "^6.12.1",
     "@vite-pwa/nuxt": "^0.6.0",
@@ -72,7 +72,7 @@
     "medium-zoom": "^1.0.8",
     "pinia": "^2.2.2",
     "rxjs": "^7.8.1",
-    "vue": "^3.4.27",
+    "vue": "^3.5.0",
     "vue-router": "^4.3.2"
   }
 }
diff --git a/pages/[...slug].vue b/pages/[...slug].vue
@@ -68,6 +68,8 @@ export default defineComponent({
     const { surround } = useContent();
     const [pre, next] = surround.value;
 
+    provide("imgFlag", 0);
+
     return {
       elRef,
       pre,