update

2025-12-20 23:28:38 +08:00
parent e5cd753904
commit e857204140
8 changed files with 251 additions and 107 deletions
--- a/app/components/content/ProseCode.vue
+++ b/app/components/content/ProseCode.vue
@@ -1,75 +1,10 @@
 <script setup lang="ts">
-defineProps({
-  code: {
-    type: String,
-    default: "",
-  },
-  language: {
-    type: String,
-    default: null,
-  },
-  filename: {
-    type: String,
-    default: null,
-  },
-  highlights: {
-    type: Array as () => number[],
-    default: () => [],
-  },
-  meta: {
-    type: String,
-    default: null,
-  },
-});
+// 行内代码组件
 </script>

 <template>
-  <div
-    class="group relative my-6 overflow-hidden rounded-2xl border border-white/10 bg-slate-950 shadow-2xl">
-    <!-- 代码块头部 -->
-    <div
-      v-if="filename || language"
-      class="flex items-center justify-between px-4 py-2 bg-white/5 border-b border-white/5">
-      <div class="flex items-center gap-2">
-        <div class="flex gap-1.5">
-          <div class="w-3 h-3 rounded-full bg-red-500/80"></div>
-          <div class="w-3 h-3 rounded-full bg-amber-500/80"></div>
-          <div class="w-3 h-3 rounded-full bg-emerald-500/80"></div>
-        </div>
-        <span v-if="filename" class="ml-2 text-xs font-mono text-zinc-400">{{ filename }}</span>
-      </div>
-      <span v-if="language" class="text-[10px] font-bold uppercase tracking-widest text-zinc-500">{{
-        language
-      }}</span>
-    </div>
-
-    <!-- 代码内容 -->
-    <div class="relative">
-      <pre class="!m-0 !bg-transparent !p-4 overflow-x-auto custom-scrollbar"><slot /></pre>
-
-      <!-- 复制按钮 (可选实现) -->
-      <div class="absolute top-3 right-3 opacity-0 group-hover:opacity-100 transition-opacity">
-        <button
-          class="p-2 rounded-lg bg-white/5 hover:bg-white/10 border border-white/10 text-zinc-400 hover:text-white transition-colors">
-          <Icon name="heroicons:clipboard" class="w-4 h-4" />
-        </button>
-      </div>
-    </div>
-  </div>
+  <code
+    class="bg-violet-500/10 text-violet-600 dark:text-violet-400 px-1.5 py-0.5 rounded-md font-mono text-[0.9em]"
+    ><slot
+  /></code>
 </template>
-
-<style scoped>
-.custom-scrollbar::-webkit-scrollbar {
-  height: 8px;
-}
-.custom-scrollbar::-webkit-scrollbar-track {
-  background: transparent;
-}
-.custom-scrollbar::-webkit-scrollbar-thumb {
-  background: rgba(255, 255, 255, 0.1);
-  border-radius: 10px;
-}
-.custom-scrollbar::-webkit-scrollbar-thumb:hover {
-  background: rgba(255, 255, 255, 0.2);
-}
-</style>
--- a/app/components/content/ProsePre.vue
+++ b/app/components/content/ProsePre.vue
@@ -0,0 +1,119 @@
+<script setup lang="ts">
+const props = defineProps({
+  code: {
+    type: String,
+    default: "",
+  },
+  language: {
+    type: String,
+    default: null,
+  },
+  filename: {
+    type: String,
+    default: null,
+  },
+  highlights: {
+    type: Array as () => number[],
+    default: () => [],
+  },
+  meta: {
+    type: String,
+    default: null,
+  },
+});
+
+const { copy, copied } = useClipboard({ source: props.code });
+</script>
+
+<template>
+  <div
+    class="group relative my-6 overflow-hidden rounded-2xl border border-white/10 bg-[#282a36] shadow-2xl line-numbers">
+    <!-- 代码块头部 -->
+    <div
+      v-if="filename || language"
+      class="flex items-center justify-between px-4 py-2 bg-black/20 border-b border-white/5">
+      <div class="flex items-center gap-2">
+        <div class="flex gap-1.5">
+          <div class="w-3 h-3 rounded-full bg-[#ff5f56] shadow-[0_0_8px_rgba(255,95,86,0.2)]"></div>
+          <div
+            class="w-3 h-3 rounded-full bg-[#ffbd2e] shadow-[0_0_8px_rgba(255,189,46,0.2)]"></div>
+          <div class="w-3 h-3 rounded-full bg-[#27c93f] shadow-[0_0_8px_rgba(39,201,63,0.2)]"></div>
+        </div>
+        <span v-if="filename" class="ml-2 text-xs font-mono text-zinc-400 truncate max-w-[200px]">{{
+          filename
+        }}</span>
+      </div>
+      <div class="flex items-center gap-3">
+        <span
+          v-if="language"
+          class="text-[10px] font-bold uppercase tracking-widest text-zinc-500"
+          >{{ language }}</span
+        >
+        <!-- 复制按钮 -->
+        <button
+          class="p-1.5 rounded-md hover:bg-white/10 text-zinc-400 hover:text-white transition-all duration-200 active:scale-95"
+          :class="{ 'text-emerald-400': copied }"
+          @click="copy()">
+          <Icon :name="copied ? 'heroicons:check' : 'heroicons:clipboard'" class="w-3.5 h-3.5" />
+        </button>
+      </div>
+    </div>
+
+    <!-- 代码内容 -->
+    <div class="relative group/code">
+      <pre
+        class="!m-0 !bg-transparent !p-4 overflow-x-auto custom-scrollbar font-mono text-sm leading-relaxed selection:bg-violet-500/30"><slot /></pre>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.custom-scrollbar::-webkit-scrollbar {
+  height: 4px;
+}
+.custom-scrollbar::-webkit-scrollbar-track {
+  background: transparent;
+}
+.custom-scrollbar::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 10px;
+}
+.custom-scrollbar:hover::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.15);
+}
+
+/* 行号实现 */
+.line-numbers :deep(code) {
+  counter-reset: step;
+  counter-increment: step 0;
+  display: grid;
+  min-width: 100%;
+}
+
+.line-numbers :deep(.line) {
+  display: inline-flex;
+  min-height: 1.5rem;
+}
+
+.line-numbers :deep(.line::before) {
+  content: counter(step);
+  counter-increment: step;
+  width: 2rem;
+  margin-right: 1.5rem;
+  display: inline-block;
+  text-align: right;
+  color: rgba(255, 255, 255, 0.15);
+  user-select: none;
+  font-size: 0.75rem;
+  flex-shrink: 0;
+}
+
+/* 高亮行样式 */
+.line-numbers :deep(.line.highlight) {
+  background-color: rgba(139, 92, 246, 0.1);
+  margin: 0 -1rem;
+  padding: 0 1rem;
+  border-left: 2px solid #bd93f9;
+  width: calc(100% + 2rem);
+}
+</style>
--- a/app/components/footer/developer.vue
+++ b/app/components/footer/developer.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { footerData, socialLinks } from "~/data";
+import { footerData } from "~/data";
 </script>

 <template>
--- a/app/pages/blogs/[blog].vue
+++ b/app/pages/blogs/[blog].vue
@@ -62,24 +62,6 @@ useHead({
          </template>
        </ContentRenderer>
      </div>
-
-      <!-- 分享区域 -->
-      <div class="mt-16 pt-8 border-t border-white/10 dark:border-white/5">
-        <h3 class="text-lg font-bold text-zinc-800 dark:text-zinc-100 mb-6 flex items-center gap-2">
-          <Icon name="heroicons:share" class="w-5 h-5 text-violet-500" />
-          Share this post
-        </h3>
-        <div class="flex flex-wrap gap-3">
-          <SocialShare
-            v-for="network in ['facebook', 'twitter', 'linkedin', 'email']"
-            :key="network"
-            :network="network"
-            :styled="true"
-            :label="true"
-            class="!rounded-xl !bg-white/40 dark:!bg-slate-800/40 !backdrop-blur-md !border !border-white/20 dark:!border-white/5 !text-zinc-700 dark:!text-zinc-300 hover:!bg-violet-500/10 hover:!text-violet-600 transition-all duration-300"
-            aria-label="Share with {network}" />
-        </div>
-      </div>
    </div>

    <!-- 侧边目录 -->
--- a/connect-namecheap-to-vercel.md
+++ b/connect-namecheap-to-vercel.md
@@ -41,4 +41,57 @@ It may take some time for the DNS records to propagate, so be patient. Once the

 ### Conclusion

+`print("1")`
+
+```c
+int main() {
+    printf("1");
+}
+```
+
+Some references:
+
+* Commit: f8083175fe890cbf14f41d0a06e7aa35d4989587
+* Commit (fork): foo@f8083175fe890cbf14f41d0a06e7aa35d4989587
+* Commit (repo): remarkjs/remark@e1aa9f6c02de18b9459b7d269712bcb50183ce89
+* Issue or PR (`#`): #1
+* Issue or PR (`GH-`): GH-1
+* Issue or PR (fork): foo#1
+* Issue or PR (project): remarkjs/remark#1
+* Mention: @wooorm
+
+Some links:
+
+* Commit: <https://github.com/remarkjs/remark/commit/e1aa9f6c02de18b9459b7d269712bcb50183ce89>
+* Commit comment: <https://github.com/remarkjs/remark/commit/ac63bc3abacf14cf08ca5e2d8f1f8e88a7b9015c#commitcomment-16372693>
+* Issue or PR: <https://github.com/remarkjs/remark/issues/182>
+* Issue or PR comment: <https://github.com/remarkjs/remark-github/issues/3#issue-151160339>
+* Mention: <https://github.com/ben-eb>
+
+# GFM
+
+## Autolink literals
+
+<www.example.com>, <https://example.com>, and <contact@example.com>.
+
+## Footnote
+
+A note[^1]
+
+[^1]: Big note.
+
+## Strikethrough
+
+~one~ or ~~two~~ tildes.
+
+## Table
+
+| a | b  |  c |  d  |
+| - | :- | -: | :-: |
+
+## Tasklist
+
+* [ ] to do
+* [x] done
+
 Connecting your Namecheap domain to your Vercel app is a relatively simple process. By following the steps outlined in this blog, you'll be able to connect your custom domain in no time. Remember to be patient as it may take some time for the DNS records to propagate. If you run into any issues, don't hesitate to reach out to Vercel support for assistance.
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -61,9 +61,20 @@ export default defineNuxtConfig({
    experimental: { nativeSqlite: true },
    build: {
      markdown: {
+        toc: {
+          depth: 3,
+        },
        highlight: {
          theme: "dracula",
+          langs: ["c"],
        },
+        remarkPlugins: {
+          "remark-gfm": {},
+          "remark-rehype": {},
+        },
+        // rehypePlugins: {
+        //   "rehype-prism": {},
+        // },
      },
    },
  },
--- a/package.json
+++ b/package.json
@@ -43,6 +43,7 @@
    "nuxt-og-image": "^5.1.13",
    "prettier": "^3.7.4",
    "prettier-eslint": "^16.4.2",
+    "remark-github": "^12.0.0",
    "typescript": "^5.9.3",
    "unenv": "^1.10.0",
    "vue": "^3.5.26"
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -7,13 +7,6 @@ settings:
 importers:

  .:
-    dependencies:
-      better-sqlite3:
-        specifier: ^12.5.0
-        version: 12.5.0
-      vue:
-        specifier: ^3.5.26
-        version: 3.5.26(typescript@5.9.3)
    devDependencies:
      '@formkit/auto-animate':
        specifier: ^0.9.0
@@ -102,12 +95,18 @@ importers:
      prettier-eslint:
        specifier: ^16.4.2
        version: 16.4.2(typescript@5.9.3)
+      remark-github:
+        specifier: ^12.0.0
+        version: 12.0.0
      typescript:
        specifier: ^5.9.3
        version: 5.9.3
      unenv:
        specifier: ^1.10.0
        version: 1.10.0
+      vue:
+        specifier: ^3.5.26
+        version: 3.5.26(typescript@5.9.3)

 packages:

@@ -5067,6 +5066,9 @@ packages:
  remark-gfm@4.0.1:
    resolution: {integrity: sha512-1quofZ2RQ9EWdeN34S79+KExV1764+wCUGop5CPL1WGdD0ocPpu91lzPGbwWMECpEpd42kJGQwzRfyov9j4yNg==, tarball: https://registry.npmjs.org/remark-gfm/-/remark-gfm-4.0.1.tgz}

+  remark-github@12.0.0:
+    resolution: {integrity: sha512-ByefQKFN184LeiGRCabfl7zUJsdlMYWEhiLX1gpmQ11yFg6xSuOTW7LVCv0oc1x+YvUMJW23NU36sJX2RWGgvg==, tarball: https://registry.npmjs.org/remark-github/-/remark-github-12.0.0.tgz}
+
  remark-mdc@3.9.0:
    resolution: {integrity: sha512-hRbVWknG8V6HCfWz+YHUQaNey6AchYIi0jheYTUk9Y2XcMrc7ON5uVQOIhnBVQg2zKFm6bIlx4JoETUMM0Pq3g==, tarball: https://registry.npmjs.org/remark-mdc/-/remark-mdc-3.9.0.tgz}

@@ -5521,6 +5523,9 @@ packages:
    resolution: {integrity: sha512-41wJyvKep3yT2tyPqX/4blcfybknGB4D+oETKLs7Q76UiPqRpUJK3hr1nxelyYO0PHKVzJwlu0aCeEAsGI6rpw==, tarball: https://registry.npmjs.org/to-valid-identifier/-/to-valid-identifier-1.0.0.tgz}
    engines: {node: '>=20'}

+  to-vfile@8.0.0:
+    resolution: {integrity: sha512-IcmH1xB5576MJc9qcfEC/m/nQCFt3fzMHz45sSlgJyTWjRbKW1HAkJpuf3DgE57YzIlZcwcBZA5ENQbBo4aLkg==, tarball: https://registry.npmjs.org/to-vfile/-/to-vfile-8.0.0.tgz}
+
  toidentifier@1.0.1:
    resolution: {integrity: sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==, tarball: https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz}
    engines: {node: '>=0.6'}
@@ -8586,6 +8591,7 @@ snapshots:
    dependencies:
      bindings: 1.5.0
      prebuild-install: 7.1.3
+    optional: true

  binary-extensions@2.3.0: {}

@@ -8600,6 +8606,7 @@ snapshots:
      buffer: 5.7.1
      inherits: 2.0.4
      readable-stream: 3.6.2
+    optional: true

  boolbase@1.0.0: {}

@@ -8636,6 +8643,7 @@ snapshots:
    dependencies:
      base64-js: 1.5.1
      ieee754: 1.2.1
+    optional: true

  buffer@6.0.3:
    dependencies:
@@ -8751,7 +8759,8 @@ snapshots:
    dependencies:
      readdirp: 5.0.0

-  chownr@1.1.4: {}
+  chownr@1.1.4:
+    optional: true

  chownr@3.0.0: {}

@@ -9000,10 +9009,12 @@ snapshots:
  decompress-response@6.0.0:
    dependencies:
      mimic-response: 3.1.0
+    optional: true

  deep-equal@1.0.1: {}

-  deep-extend@0.6.0: {}
+  deep-extend@0.6.0:
+    optional: true

  deep-is@0.1.4: {}

@@ -9121,6 +9132,7 @@ snapshots:
  end-of-stream@1.4.5:
    dependencies:
      once: 1.4.0
+    optional: true

  engine.io-client@6.6.3:
    dependencies:
@@ -9484,7 +9496,8 @@ snapshots:
      strip-final-newline: 4.0.0
      yoctocolors: 2.1.2

-  expand-template@2.0.3: {}
+  expand-template@2.0.3:
+    optional: true

  exsolve@1.0.8: {}

@@ -9635,7 +9648,8 @@ snapshots:

  fresh@2.0.0: {}

-  fs-constants@1.0.0: {}
+  fs-constants@1.0.0:
+    optional: true

  fs-extra@9.1.0:
    dependencies:
@@ -9708,7 +9722,8 @@ snapshots:
    dependencies:
      git-up: 8.1.1

-  github-from-package@0.0.0: {}
+  github-from-package@0.0.0:
+    optional: true

  github-slugger@2.0.0: {}

@@ -10045,7 +10060,8 @@ snapshots:

  inherits@2.0.4: {}

-  ini@1.3.8: {}
+  ini@1.3.8:
+    optional: true

  ini@4.1.1: {}

@@ -10848,7 +10864,8 @@ snapshots:

  mimic-fn@4.0.0: {}

-  mimic-response@3.1.0: {}
+  mimic-response@3.1.0:
+    optional: true

  mini-svg-data-uri@1.4.4: {}

@@ -10884,7 +10901,8 @@ snapshots:

  mitt@3.0.1: {}

-  mkdirp-classic@0.5.3: {}
+  mkdirp-classic@0.5.3:
+    optional: true

  mlly@1.8.0:
    dependencies:
@@ -10915,7 +10933,8 @@ snapshots:

  nanotar@0.2.0: {}

-  napi-build-utils@2.0.0: {}
+  napi-build-utils@2.0.0:
+    optional: true

  napi-postinstall@0.3.4: {}

@@ -11028,6 +11047,7 @@ snapshots:
  node-abi@3.85.0:
    dependencies:
      semver: 7.7.3
+    optional: true

  node-addon-api@7.1.1: {}

@@ -11758,6 +11778,7 @@ snapshots:
      simple-get: 4.0.1
      tar-fs: 2.1.4
      tunnel-agent: 0.6.0
+    optional: true

  prelude-ls@1.2.1: {}

@@ -11814,6 +11835,7 @@ snapshots:
    dependencies:
      end-of-stream: 1.4.5
      once: 1.4.0
+    optional: true

  punycode@2.3.1: {}

@@ -11840,6 +11862,7 @@ snapshots:
      ini: 1.3.8
      minimist: 1.2.8
      strip-json-comments: 2.0.1
+    optional: true

  react-is@18.3.1: {}

@@ -11862,6 +11885,7 @@ snapshots:
      inherits: 2.0.4
      string_decoder: 1.3.0
      util-deprecate: 1.0.2
+    optional: true

  readable-stream@4.7.0:
    dependencies:
@@ -11980,6 +12004,15 @@ snapshots:
    transitivePeerDependencies:
      - supports-color

+  remark-github@12.0.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      mdast-util-find-and-replace: 3.0.2
+      mdast-util-to-string: 4.0.0
+      to-vfile: 8.0.0
+      unist-util-visit: 5.0.0
+      vfile: 6.0.3
+
  remark-mdc@3.9.0:
    dependencies:
      '@types/mdast': 4.0.4
@@ -12244,13 +12277,15 @@ snapshots:

  signal-exit@4.1.0: {}

-  simple-concat@1.0.1: {}
+  simple-concat@1.0.1:
+    optional: true

  simple-get@4.0.1:
    dependencies:
      decompress-response: 6.0.0
      once: 1.4.0
      simple-concat: 1.0.1
+    optional: true

  simple-git@3.30.0:
    dependencies:
@@ -12393,7 +12428,8 @@ snapshots:

  strip-indent@4.1.1: {}

-  strip-json-comments@2.0.1: {}
+  strip-json-comments@2.0.1:
+    optional: true

  strip-json-comments@3.1.1: {}

@@ -12501,6 +12537,7 @@ snapshots:
      mkdirp-classic: 0.5.3
      pump: 3.0.3
      tar-stream: 2.2.0
+    optional: true

  tar-stream@2.2.0:
    dependencies:
@@ -12509,6 +12546,7 @@ snapshots:
      fs-constants: 1.0.0
      inherits: 2.0.4
      readable-stream: 3.6.2
+    optional: true

  tar-stream@3.1.7:
    dependencies:
@@ -12570,6 +12608,10 @@ snapshots:
      '@sindresorhus/base62': 1.0.0
      reserved-identifiers: 1.2.0

+  to-vfile@8.0.0:
+    dependencies:
+      vfile: 6.0.3
+
  toidentifier@1.0.1: {}

  totalist@3.0.1: {}
@@ -12599,6 +12641,7 @@ snapshots:
  tunnel-agent@0.6.0:
    dependencies:
      safe-buffer: 5.2.1
+    optional: true

  type-check@0.4.0:
    dependencies: