From 0c347576cc2e42452a87092c47139ead389602b2 Mon Sep 17 00:00:00 2001
From: Yufan Sheng <syhily@gmail.com>
Date: Mon, 9 Dec 2024 16:37:09 +0800
Subject: [PATCH] feat: change the web font.

---
 .vscode/settings.json         |  2 ++
 astro.config.ts               | 14 +++++++++
 package-lock.json             | 59 +++++++++++++++++++++--------------
 package.json                  |  1 +
 src/assets/styles/globals.css |  5 +++
 src/assets/styles/reset.css   |  8 ++++-
 src/layouts/BaseLayout.astro  |  2 +-
 7 files changed, 65 insertions(+), 26 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 2cc98f8..ad1a78f 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -89,6 +89,7 @@
     "loveness",
     "luoli",
     "luxon",
+    "lxgw",
     "mboker",
     "metas",
     "microflash",
@@ -128,6 +129,7 @@
     "sauvignon",
     "sheng",
     "shiki",
+    "shikijs",
     "shinmun",
     "shmily",
     "skrs",
diff --git a/astro.config.ts b/astro.config.ts
index 9df74d5..630a14d 100644
--- a/astro.config.ts
+++ b/astro.config.ts
@@ -1,5 +1,12 @@
 import mdx from '@astrojs/mdx';
 import node from '@astrojs/node';
+import {
+  transformerNotationDiff,
+  transformerNotationErrorLevel,
+  transformerNotationFocus,
+  transformerNotationHighlight,
+  transformerNotationWordHighlight,
+} from '@shikijs/transformers';
 import { uploader } from 'astro-uploader';
 import { defineConfig, envField } from 'astro/config';
 import rehypeAutolinkHeadings from 'rehype-autolink-headings';
@@ -72,6 +79,13 @@ export default defineConfig({
     shikiConfig: {
       theme: 'solarized-light',
       wrap: false,
+      transformers: [
+        transformerNotationDiff(),
+        transformerNotationHighlight(),
+        transformerNotationWordHighlight(),
+        transformerNotationFocus(),
+        transformerNotationErrorLevel(),
+      ],
     },
   },
   server: {
diff --git a/package-lock.json b/package-lock.json
index 7fa2869..0895a61 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -29,6 +29,7 @@
         "@astrojs/check": "^0.9.4",
         "@biomejs/biome": "^1.9.4",
         "@napi-rs/canvas": "^0.1.65",
+        "@shikijs/transformers": "^1.24.1",
         "@types/lodash": "^4.17.13",
         "@types/luxon": "^3.4.2",
         "@types/node": "^22.10.1",
@@ -2013,44 +2014,54 @@
       ]
     },
     "node_modules/@shikijs/core": {
-      "version": "1.24.0",
-      "resolved": "https://registry.npmjs.org/@shikijs/core/-/core-1.24.0.tgz",
-      "integrity": "sha512-6pvdH0KoahMzr6689yh0QJ3rCgF4j1XsXRHNEeEN6M4xJTfQ6QPWrmHzIddotg+xPJUPEPzYzYCKzpYyhTI6Gw==",
+      "version": "1.24.1",
+      "resolved": "https://registry.npmjs.org/@shikijs/core/-/core-1.24.1.tgz",
+      "integrity": "sha512-3q/9oarMVcLqJ+NQOdKL40dJVq/UKCsiWXz3QRQPBglHqa8dDJ0p6TuMuk2gHphy5FZcvFtg4UHBgpW0JtZ8+A==",
       "license": "MIT",
       "dependencies": {
-        "@shikijs/engine-javascript": "1.24.0",
-        "@shikijs/engine-oniguruma": "1.24.0",
-        "@shikijs/types": "1.24.0",
+        "@shikijs/engine-javascript": "1.24.1",
+        "@shikijs/engine-oniguruma": "1.24.1",
+        "@shikijs/types": "1.24.1",
         "@shikijs/vscode-textmate": "^9.3.0",
         "@types/hast": "^3.0.4",
         "hast-util-to-html": "^9.0.3"
       }
     },
     "node_modules/@shikijs/engine-javascript": {
-      "version": "1.24.0",
-      "resolved": "https://registry.npmjs.org/@shikijs/engine-javascript/-/engine-javascript-1.24.0.tgz",
-      "integrity": "sha512-ZA6sCeSsF3Mnlxxr+4wGEJ9Tto4RHmfIS7ox8KIAbH0MTVUkw3roHPHZN+LlJMOHJJOVupe6tvuAzRpN8qK1vA==",
+      "version": "1.24.1",
+      "resolved": "https://registry.npmjs.org/@shikijs/engine-javascript/-/engine-javascript-1.24.1.tgz",
+      "integrity": "sha512-lNgUSHYDYaQ6daj4lJJqcY2Ru9LgHwpFoposJkRVRPh21Yg4kaPFRhzaWoSg3PliwcDOpDuMy3xsmQaJp201Fg==",
       "license": "MIT",
       "dependencies": {
-        "@shikijs/types": "1.24.0",
+        "@shikijs/types": "1.24.1",
         "@shikijs/vscode-textmate": "^9.3.0",
         "oniguruma-to-es": "0.7.0"
       }
     },
     "node_modules/@shikijs/engine-oniguruma": {
-      "version": "1.24.0",
-      "resolved": "https://registry.npmjs.org/@shikijs/engine-oniguruma/-/engine-oniguruma-1.24.0.tgz",
-      "integrity": "sha512-Eua0qNOL73Y82lGA4GF5P+G2+VXX9XnuUxkiUuwcxQPH4wom+tE39kZpBFXfUuwNYxHSkrSxpB1p4kyRW0moSg==",
+      "version": "1.24.1",
+      "resolved": "https://registry.npmjs.org/@shikijs/engine-oniguruma/-/engine-oniguruma-1.24.1.tgz",
+      "integrity": "sha512-KdrTIBIONWd+Xs61eh8HdIpfigtrseat9dpARvaOe2x0g/FNTbwbkGr3y92VSOVD1XotzEskh3v/nCzyWjkf7g==",
       "license": "MIT",
       "dependencies": {
-        "@shikijs/types": "1.24.0",
+        "@shikijs/types": "1.24.1",
         "@shikijs/vscode-textmate": "^9.3.0"
       }
     },
+    "node_modules/@shikijs/transformers": {
+      "version": "1.24.1",
+      "resolved": "https://registry.npmjs.org/@shikijs/transformers/-/transformers-1.24.1.tgz",
+      "integrity": "sha512-IQmk8o0RNlaQ3Ig0Urx4bfen/zvS5St6as7o0q+bTDfbuFjqUMNjoMMKMN1Lu66mAh83seURwPLi2EjjLTD6+w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "shiki": "1.24.1"
+      }
+    },
     "node_modules/@shikijs/types": {
-      "version": "1.24.0",
-      "resolved": "https://registry.npmjs.org/@shikijs/types/-/types-1.24.0.tgz",
-      "integrity": "sha512-aptbEuq1Pk88DMlCe+FzXNnBZ17LCiLIGWAeCWhoFDzia5Q5Krx3DgnULLiouSdd6+LUM39XwXGppqYE0Ghtug==",
+      "version": "1.24.1",
+      "resolved": "https://registry.npmjs.org/@shikijs/types/-/types-1.24.1.tgz",
+      "integrity": "sha512-ZwZFbShFY/APfKNt3s9Gv8rhTm29GodSKsOW66X6N+HGsZuaHalE1VUEX4fv93UXHTZTLjb3uxn63F96RhGfXw==",
       "license": "MIT",
       "dependencies": {
         "@shikijs/vscode-textmate": "^9.3.0",
@@ -6987,15 +6998,15 @@
       }
     },
     "node_modules/shiki": {
-      "version": "1.24.0",
-      "resolved": "https://registry.npmjs.org/shiki/-/shiki-1.24.0.tgz",
-      "integrity": "sha512-qIneep7QRwxRd5oiHb8jaRzH15V/S8F3saCXOdjwRLgozZJr5x2yeBhQtqkO3FSzQDwYEFAYuifg4oHjpDghrg==",
+      "version": "1.24.1",
+      "resolved": "https://registry.npmjs.org/shiki/-/shiki-1.24.1.tgz",
+      "integrity": "sha512-/qByWMg05+POb63c/OvnrU17FcCUa34WU4F6FCrd/mjDPEDPl8YUNRkRMbo8l3iYMLydfCgxi1r37JFoSw8A4A==",
       "license": "MIT",
       "dependencies": {
-        "@shikijs/core": "1.24.0",
-        "@shikijs/engine-javascript": "1.24.0",
-        "@shikijs/engine-oniguruma": "1.24.0",
-        "@shikijs/types": "1.24.0",
+        "@shikijs/core": "1.24.1",
+        "@shikijs/engine-javascript": "1.24.1",
+        "@shikijs/engine-oniguruma": "1.24.1",
+        "@shikijs/types": "1.24.1",
         "@shikijs/vscode-textmate": "^9.3.0",
         "@types/hast": "^3.0.4"
       }
diff --git a/package.json b/package.json
index 3463d0a..61a8f3c 100644
--- a/package.json
+++ b/package.json
@@ -62,6 +62,7 @@
     "@astrojs/check": "^0.9.4",
     "@biomejs/biome": "^1.9.4",
     "@napi-rs/canvas": "^0.1.65",
+    "@shikijs/transformers": "^1.24.1",
     "@types/lodash": "^4.17.13",
     "@types/luxon": "^3.4.2",
     "@types/node": "^22.10.1",
diff --git a/src/assets/styles/globals.css b/src/assets/styles/globals.css
index b9e0ce4..ef504ca 100644
--- a/src/assets/styles/globals.css
+++ b/src/assets/styles/globals.css
@@ -1561,6 +1561,11 @@ a.list-title:hover {
   color: #fff;
 }
 
+.list-nice-overlay .list-title:hover {
+  color: var(--color-light);
+  text-shadow: var(--border-primary) 1px 0 4px;
+}
+
 .list-nice-overlay .text-muted:not(i) {
   color: #eaecf3 !important;
 }
diff --git a/src/assets/styles/reset.css b/src/assets/styles/reset.css
index f0bfb70..9e239d4 100644
--- a/src/assets/styles/reset.css
+++ b/src/assets/styles/reset.css
@@ -139,6 +139,11 @@ td {
 
 /* code -------------------------- */
 
+pre,
+code {
+  font-family: 'LXGW WenKai Mono', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+}
+
 code {
   font-size: 90%;
   color: inherit;
@@ -149,7 +154,7 @@ code {
   counter-increment: step 0;
 }
 
-code .line::before {
+code .line:not(:last-child)::before {
   content: counter(step);
   counter-increment: step;
   width: 1rem;
@@ -198,6 +203,7 @@ table caption {
 
 body {
   font-family:
+    'LXGW WenKai',
     OPPOSans,
     OPPOSans2,
     OPlusSans3,
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index 5e7a16e..0330a9e 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -7,7 +7,6 @@ import '@/assets/styles/globals.css';
 import 'aplayer/dist/APlayer.min.css';
 import 'photoswipe/style.css';
 import 'photoswipe-dynamic-caption-plugin/photoswipe-dynamic-caption-plugin.css';
-import '@/assets/styles/opposans/opposans.css';
 
 import Footer from '@/components/footer/Footer.astro';
 import Header from '@/components/header/Header.astro';
@@ -45,6 +44,7 @@ const showFooter = Astro.props.footer !== undefined ? Astro.props.footer : true;
       <PageMeta {title} {description} />
     </slot>
     <meta name="robots" content="index, follow" />
+    <link rel="stylesheet" type="text/css" href="https://npm.elemecdn.com/lxgw-wenkai-webfont/style.css" />
     <meta name="googlebot" content="index, follow, max-video-preview:-1, max-image-preview:large, max-snippet:-1" />
     <link rel="alternate" type="application/rss+xml" title="且听书吟" href="/feed" />
     <link rel="icon" href="/favicon.ico" sizes="32x32" />