From 9ef002e8b88a2e061605fe4dff11fc2b84e4444e Mon Sep 17 00:00:00 2001
From: YunYouJun <me@yunyoujun.cn>
Date: Sat, 7 Oct 2023 00:19:27 +0800
Subject: [PATCH] fix(theme-yun): code diff styles, close #275

---
 docs/pages/guide/i18n.md                      | 18 +++++++-
 .../components/PressDocFooter.vue             |  2 +-
 .../components/PressDocFooterLastUpdated.vue  |  2 +-
 .../valaxy-theme-press/styles/markdown.scss   | 13 ++++++
 .../styles/common/markdown.scss               | 24 ++++++++++
 .../valaxy/client/styles/common/code.scss     | 35 ++++++++++++++
 .../styles/components/custom-block.scss       |  1 -
 packages/valaxy/package.json                  |  2 +-
 pnpm-lock.yaml                                | 46 +++++++++----------
 9 files changed, 114 insertions(+), 29 deletions(-)

diff --git a/docs/pages/guide/i18n.md b/docs/pages/guide/i18n.md
index 9fe768f8..b6acce39 100644
--- a/docs/pages/guide/i18n.md
+++ b/docs/pages/guide/i18n.md
@@ -7,14 +7,28 @@ categories:
 
 ::: tip
 
+<div lang="zh-CN">
+
 Valaxy **提出**了一种基于 CSS 面向博客的 i18n 解决方案。
 
 你可以在同一个页面中快速编写中英文博客。
 
-:::
-
 > 如果你想了解实现原理，可参考 [i18n](/posts/i18n)。
 
+</div>
+
+<div lang="en">
+
+Valaxy **proposed** a CSS-based i18n solution for blog.
+
+You can quickly write English and Chinese blogs from the same page.
+
+> If you want to know how this works, see [i18n](/posts/i18n).
+
+</div>
+
+:::
+
 ::: zh-CN
 **效果如下**（点击按钮切换）：
 :::
diff --git a/packages/valaxy-theme-press/components/PressDocFooter.vue b/packages/valaxy-theme-press/components/PressDocFooter.vue
index 2fb7cf77..0e4d0e44 100644
--- a/packages/valaxy-theme-press/components/PressDocFooter.vue
+++ b/packages/valaxy-theme-press/components/PressDocFooter.vue
@@ -9,7 +9,7 @@ const { t } = useI18n()
 
 <template>
   <div flex justify="between" text="sm">
-    <a flex items="center" :href="editLink.url" target="_blank">
+    <a flex items="center" class="decoration-none!" :href="editLink.url" target="_blank">
       <div i-ri-external-link-line />
       <span ml-1>{{ editLink.text || t('tooltip.edit_this_page') }}</span>
     </a>
diff --git a/packages/valaxy-theme-press/components/PressDocFooterLastUpdated.vue b/packages/valaxy-theme-press/components/PressDocFooterLastUpdated.vue
index c9b01a03..e0cf1a32 100644
--- a/packages/valaxy-theme-press/components/PressDocFooterLastUpdated.vue
+++ b/packages/valaxy-theme-press/components/PressDocFooterLastUpdated.vue
@@ -21,7 +21,7 @@ const { t } = useI18n()
 </script>
 
 <template>
-  <p class="press-lastUpdated">
+  <p class="press-lastUpdated text-right">
     {{ t('tooltip.last_updated') }}:
     <time :datetime="isoDatetime">{{ datetime }}</time>
   </p>
diff --git a/packages/valaxy-theme-press/styles/markdown.scss b/packages/valaxy-theme-press/styles/markdown.scss
index 2550f175..59b448b9 100644
--- a/packages/valaxy-theme-press/styles/markdown.scss
+++ b/packages/valaxy-theme-press/styles/markdown.scss
@@ -44,3 +44,16 @@
     margin-bottom: 0.25em;
   }
 }
+
+.vp-doc {
+  .markdown-body {
+    a {
+      text-decoration: inherit;
+      transition: all 0.4s;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+}
diff --git a/packages/valaxy-theme-yun/styles/common/markdown.scss b/packages/valaxy-theme-yun/styles/common/markdown.scss
index 174aa074..58132f8f 100644
--- a/packages/valaxy-theme-yun/styles/common/markdown.scss
+++ b/packages/valaxy-theme-yun/styles/common/markdown.scss
@@ -93,3 +93,27 @@
       color 0.5s;
   }
 }
+
+.markdown-body {
+  .table-container {
+    table {
+      thead {
+        th {
+          text-align: left;
+          border: 1px solid rgba(var(--va-c-primary-rgb), 0.3);
+          background-color: rgba(var(--va-c-primary-rgb), 0.1);
+        }
+      }
+
+      td {
+        border: 1px solid rgba(var(--va-c-primary-rgb), 0.3);
+      }
+
+      tr {
+        &:hover {
+          background-color: rgba(var(--va-c-primary-rgb), 0.05);
+        }
+      }
+    }
+  }
+}
diff --git a/packages/valaxy/client/styles/common/code.scss b/packages/valaxy/client/styles/common/code.scss
index d8094d4b..05ab8c9b 100644
--- a/packages/valaxy/client/styles/common/code.scss
+++ b/packages/valaxy/client/styles/common/code.scss
@@ -190,3 +190,38 @@ html:not(.dark) .vp-code-dark {
     opacity: 0;
   }
 }
+
+// diff
+.markdown-body {
+  [class*='language-'] code .diff {
+    transition: background-color 0.5s;
+    margin: 0 -24px;
+    padding: 0 24px;
+    width: calc(100% + 2 * 24px);
+    display: inline-block;
+  }
+
+  [class*='language-'] code .diff::before {
+    position: absolute;
+    left: 10px;
+  }
+
+  [class*='language-'] code .diff.remove {
+    background-color: var(--va-code-line-diff-remove-color);
+    opacity: 0.7;
+  }
+
+  [class*='language-'] code .diff.remove::before {
+    content: '-';
+    color: var(--va-code-line-diff-remove-symbol-color);
+  }
+
+  [class*='language-'] code .diff.add {
+    background-color: var(--va-code-line-diff-add-color);
+  }
+
+  [class*='language-'] code .diff.add::before {
+    content: '+';
+    color: var(--va-code-line-diff-add-symbol-color);
+  }
+}
diff --git a/packages/valaxy/client/styles/components/custom-block.scss b/packages/valaxy/client/styles/components/custom-block.scss
index 628e7121..eabc7fe4 100644
--- a/packages/valaxy/client/styles/components/custom-block.scss
+++ b/packages/valaxy/client/styles/components/custom-block.scss
@@ -170,7 +170,6 @@
 .custom-block a {
   color: inherit;
   font-weight: 600;
-  // text-decoration: underline;
   text-underline-offset: 2px;
   transition: opacity 0.25s;
 }
diff --git a/packages/valaxy/package.json b/packages/valaxy/package.json
index f97457a0..01aa4c6d 100644
--- a/packages/valaxy/package.json
+++ b/packages/valaxy/package.json
@@ -104,7 +104,7 @@
     "pascalcase": "^2.0.0",
     "pinia": "^2.1.6",
     "qrcode": "^1.5.3",
-    "sass": "^1.68.0",
+    "sass": "^1.69.0",
     "shiki": "^0.14.4",
     "star-markdown-css": "^0.4.2",
     "unconfig": "^0.3.11",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0049fdd7..15e7bab1 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -174,7 +174,7 @@ importers:
         version: 3.0.1
       vite:
         specifier: ^4.4.11
-        version: 4.4.11(@types/node@20.8.2)(sass@1.68.0)
+        version: 4.4.11(@types/node@20.8.2)(sass@1.69.0)
       vitepress:
         specifier: 1.0.0-rc.20
         version: 1.0.0-rc.20(@types/node@20.8.2)(search-insights@2.8.1)
@@ -338,8 +338,8 @@ importers:
         specifier: ^1.5.3
         version: 1.5.3
       sass:
-        specifier: ^1.68.0
-        version: 1.68.0
+        specifier: ^1.69.0
+        version: 1.69.0
       shiki:
         specifier: ^0.14.4
         version: 0.14.4
@@ -360,7 +360,7 @@ importers:
         version: 17.8.4
       vite:
         specifier: ^4.4.11
-        version: 4.4.11(@types/node@20.8.2)(sass@1.68.0)
+        version: 4.4.11(@types/node@20.8.2)(sass@1.69.0)
       vite-plugin-pages:
         specifier: ^0.31.0
         version: 0.31.0(vite@4.4.11)
@@ -3410,7 +3410,7 @@ packages:
       '@unocss/core': 0.56.5
       '@unocss/reset': 0.56.5
       '@unocss/vite': 0.56.5(rollup@3.29.0)(vite@4.4.11)
-      vite: 4.4.11(@types/node@20.8.2)(sass@1.68.0)
+      vite: 4.4.11(@types/node@20.8.2)(sass@1.69.0)
     transitivePeerDependencies:
       - rollup
     dev: false
@@ -3601,7 +3601,7 @@ packages:
       chokidar: 3.5.3
       fast-glob: 3.3.1
       magic-string: 0.30.3
-      vite: 4.4.11(@types/node@20.8.2)(sass@1.68.0)
+      vite: 4.4.11(@types/node@20.8.2)(sass@1.69.0)
     transitivePeerDependencies:
       - rollup
     dev: false
@@ -3613,7 +3613,7 @@ packages:
       vite: ^4.0.0
       vue: ^3.2.25
     dependencies:
-      vite: 4.4.11(@types/node@20.8.2)(sass@1.68.0)
+      vite: 4.4.11(@types/node@20.8.2)(sass@1.69.0)
       vue: 3.3.4
     dev: false
 
@@ -5352,7 +5352,7 @@ packages:
   /eslint-import-resolver-node@0.3.9:
     resolution: {integrity: sha512-WFj2isz22JahUv+B788TlO3N6zL3nNJGU8CcZbPZvVEkBPaJdCV4vy5wyghty5ROFbCRnm132v8BScu5/1BQ8g==}
     dependencies:
-      debug: 3.2.7(supports-color@5.5.0)
+      debug: 3.2.7(supports-color@8.1.1)
       is-core-module: 2.13.0
       resolve: 1.22.4
     transitivePeerDependencies:
@@ -5381,7 +5381,7 @@ packages:
         optional: true
     dependencies:
       '@typescript-eslint/parser': 6.7.4(eslint@8.50.0)(typescript@5.2.2)
-      debug: 3.2.7(supports-color@5.5.0)
+      debug: 3.2.7(supports-color@8.1.1)
       eslint: 8.50.0
       eslint-import-resolver-node: 0.3.9
     transitivePeerDependencies:
@@ -5435,7 +5435,7 @@ packages:
     peerDependencies:
       eslint: ^7.2.0 || ^8
     dependencies:
-      debug: 3.2.7(supports-color@5.5.0)
+      debug: 3.2.7(supports-color@8.1.1)
       doctrine: 2.1.0
       eslint: 8.50.0
       eslint-import-resolver-node: 0.3.9
@@ -8551,8 +8551,8 @@ packages:
   /safer-buffer@2.1.2:
     resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
 
-  /sass@1.68.0:
-    resolution: {integrity: sha512-Lmj9lM/fef0nQswm1J2HJcEsBUba4wgNx2fea6yJHODREoMFnwRpZydBnX/RjyXw2REIwdkbqE4hrTo4qfDBUA==}
+  /sass@1.69.0:
+    resolution: {integrity: sha512-l3bbFpfTOGgQZCLU/gvm1lbsQ5mC/WnLz3djL2v4WCJBDrWm58PO+jgngcGRNnKUh6wSsdm50YaovTqskZ0xDQ==}
     engines: {node: '>=14.0.0'}
     hasBin: true
     dependencies:
@@ -9538,7 +9538,7 @@ packages:
       '@unocss/transformer-directives': 0.56.5
       '@unocss/transformer-variant-group': 0.56.5
       '@unocss/vite': 0.56.5(rollup@3.29.0)(vite@4.4.11)
-      vite: 4.4.11(@types/node@20.8.2)(sass@1.68.0)
+      vite: 4.4.11(@types/node@20.8.2)(sass@1.69.0)
     transitivePeerDependencies:
       - postcss
       - rollup
@@ -9707,7 +9707,7 @@ packages:
       mlly: 1.4.2
       pathe: 1.1.1
       picocolors: 1.0.0
-      vite: 4.4.11(@types/node@20.8.2)(sass@1.68.0)
+      vite: 4.4.11(@types/node@20.8.2)(sass@1.69.0)
     transitivePeerDependencies:
       - '@types/node'
       - less
@@ -9737,7 +9737,7 @@ packages:
       open: 9.1.0
       picocolors: 1.0.0
       sirv: 2.0.3
-      vite: 4.4.11(@types/node@20.8.2)(sass@1.68.0)
+      vite: 4.4.11(@types/node@20.8.2)(sass@1.69.0)
     transitivePeerDependencies:
       - rollup
       - supports-color
@@ -9760,7 +9760,7 @@ packages:
       json5: 2.2.3
       local-pkg: 0.4.3
       picocolors: 1.0.0
-      vite: 4.4.11(@types/node@20.8.2)(sass@1.68.0)
+      vite: 4.4.11(@types/node@20.8.2)(sass@1.69.0)
       yaml: 2.3.1
     transitivePeerDependencies:
       - supports-color
@@ -9777,7 +9777,7 @@ packages:
       debug: 4.3.4(supports-color@8.1.1)
       fast-glob: 3.3.1
       pretty-bytes: 6.1.1
-      vite: 4.4.11(@types/node@20.8.2)(sass@1.68.0)
+      vite: 4.4.11(@types/node@20.8.2)(sass@1.69.0)
       workbox-build: 7.0.0
       workbox-window: 7.0.0
     transitivePeerDependencies:
@@ -9794,7 +9794,7 @@ packages:
       '@vue/compiler-sfc': 3.3.4
       debug: 4.3.4(supports-color@8.1.1)
       fast-glob: 3.3.1
-      vite: 4.4.11(@types/node@20.8.2)(sass@1.68.0)
+      vite: 4.4.11(@types/node@20.8.2)(sass@1.69.0)
       vue: 3.3.4
       vue-router: 4.2.5(vue@3.3.4)
     transitivePeerDependencies:
@@ -9829,7 +9829,7 @@ packages:
       jsdom: 22.1.0
       kolorist: 1.8.0
       prettier: 3.0.3
-      vite: 4.4.11(@types/node@20.8.2)(sass@1.68.0)
+      vite: 4.4.11(@types/node@20.8.2)(sass@1.69.0)
       vue: 3.3.4
       vue-router: 4.2.5(vue@3.3.4)
       yargs: 17.7.2
@@ -9840,7 +9840,7 @@ packages:
       - utf-8-validate
     dev: false
 
-  /vite@4.4.11(@types/node@20.8.2)(sass@1.68.0):
+  /vite@4.4.11(@types/node@20.8.2)(sass@1.69.0):
     resolution: {integrity: sha512-ksNZJlkcU9b0lBwAGZGGaZHCMqHsc8OpgtoYhsQ4/I2v5cnpmmmqe5pM4nv/4Hn6G/2GhTdj0DhZh2e+Er1q5A==}
     engines: {node: ^14.18.0 || >=16.0.0}
     hasBin: true
@@ -9872,7 +9872,7 @@ packages:
       esbuild: 0.18.20
       postcss: 8.4.31
       rollup: 3.29.0
-      sass: 1.68.0
+      sass: 1.69.0
     optionalDependencies:
       fsevents: 2.3.3
 
@@ -9898,7 +9898,7 @@ packages:
       mark.js: 8.11.1
       minisearch: 6.1.0
       shiki: 0.14.4
-      vite: 4.4.11(@types/node@20.8.2)(sass@1.68.0)
+      vite: 4.4.11(@types/node@20.8.2)(sass@1.69.0)
       vue: 3.3.4
     transitivePeerDependencies:
       - '@algolia/client-search'
@@ -9979,7 +9979,7 @@ packages:
       strip-literal: 1.3.0
       tinybench: 2.5.0
       tinypool: 0.7.0
-      vite: 4.4.11(@types/node@20.8.2)(sass@1.68.0)
+      vite: 4.4.11(@types/node@20.8.2)(sass@1.69.0)
       vite-node: 0.34.6(@types/node@20.8.2)
       why-is-node-running: 2.2.2
     transitivePeerDependencies: