Merge branch 'main' of github.com:ubugeeei/reading-vuejs-core-vapor i…

…nto book/v-if
ubugeeei · Oct 2, 2024 · e8b3696 · e8b3696
2 parents 042f276 + 600b642
commit e8b3696
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 16 deletions.
diff --git a/.vitepress/config/shared.mts b/.vitepress/config/shared.mts
@@ -3,7 +3,7 @@ import { previewGitHubSource } from "../plugins/markdown-it/github";
 
 export default (): UserConfig<DefaultTheme.Config> => ({
   srcDir: "src",
-  appearance: "force-dark",
+  appearance: "dark",
   themeConfig: {
     i18nRouting: true,
     logo: "/logo.png",

diff --git a/.vitepress/plugins/markdown-it/github/styles.css b/.vitepress/plugins/markdown-it/github/styles.css
@@ -1,13 +1,13 @@
 .github-source {
   border: 1px solid var(--vp-c-divider);
   border-radius: 8px;
-  background-color: #242529;
+  background-color: var(--vp-code-block-bg);
   box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
 
   .meta {
     border-radius: 8px;
     padding: 0.5em 1em;
-    background-color: var(--vp-c-black);
+    background-color: var(--vp-code-block-bg);
     border-bottom: 1px solid var(--vp-c-divider);
     font-size: 0.8em;
     color: #666 !important;
@@ -18,7 +18,7 @@
   }
 
   .at {
-    color: #f8f8f8;
+    color: var(--vp-c-text-1);
   }
 
   .code {

diff --git a/.vitepress/theme/styles/theme.css b/.vitepress/theme/styles/theme.css
@@ -6,6 +6,11 @@
   --vp-c-white: #e1e1e1;
   --vp-c-black: #222127;
 
+  --vp-c-neutral: var(--vp-c-black);
+  --vp-c-neutral-inverse: var(--vp-c-white);
+}
+
+.dark {
   --vp-c-neutral: var(--vp-c-white);
   --vp-c-neutral-inverse: var(--vp-c-black);
 }
@@ -39,6 +44,36 @@
  * -------------------------------------------------------------------------- */
 
 :root {
+  --vp-c-gray-1: #dddde3;
+  --vp-c-gray-2: #e4e4e9;
+  --vp-c-gray-3: #ebebef;
+  --vp-c-gray-soft: rgba(142, 150, 170, 0.14);
+  --vp-c-indigo-1: #3451b2;
+  --vp-c-indigo-2: #3a5ccc;
+  --vp-c-indigo-3: #5672cd;
+  --vp-c-indigo-soft: rgba(100, 108, 255, 0.14);
+  --vp-c-purple-1: #6f42c1;
+  --vp-c-purple-2: #7e4cc9;
+  --vp-c-purple-3: #8e5cd9;
+  --vp-c-purple-soft: rgba(159, 122, 234, 0.14);
+  --vp-c-green-1: #18794e;
+  --vp-c-green-2: #299764;
+  --vp-c-green-3: #30a46c;
+  --vp-c-green-soft: rgba(16, 185, 129, 0.14);
+  --vp-c-yellow-1: #915930;
+  --vp-c-yellow-2: #946300;
+  --vp-c-yellow-3: #9f6a00;
+  --vp-c-yellow-soft: rgba(234, 179, 8, 0.14);
+  --vp-c-red-1: #b8272c;
+  --vp-c-red-2: #d5393e;
+  --vp-c-red-3: #e0575b;
+  --vp-c-red-soft: rgba(244, 63, 94, 0.14);
+  --vp-c-sponsor: #db2777;
+  --vp-c-foot-print-1: #cc6600;
+  --vp-c-foot-print-2: #964b00;
+}
+
+.dark {
   --vp-c-gray-1: #515c67;
   --vp-c-gray-2: #414853;
   --vp-c-gray-3: #32363f;
@@ -68,6 +103,8 @@
   --vp-c-red-2: #f14158;
   --vp-c-red-3: #b62a3c;
   --vp-c-red-soft: rgba(244, 63, 94, 0.16);
+  --vp-c-foot-print-1: #ffbb5e;
+  --vp-c-foot-print-2: #ffd08f;
 }
 
 /**
@@ -85,6 +122,13 @@
  *   the page. Used for things like "carbon ads" or "table".
  * -------------------------------------------------------------------------- */
 :root {
+  --vp-c-bg: #ffffff;
+  --vp-c-bg-alt: #f6f6f7;
+  --vp-c-bg-elv: #ffffff;
+  --vp-c-bg-soft: #f6f6f7;
+}
+
+.dark {
   --vp-c-bg: #222127;
   --vp-c-bg-alt: #222127;
   --vp-c-bg-elv: #222127;
@@ -105,6 +149,12 @@
  * -------------------------------------------------------------------------- */
 
 :root {
+  --vp-c-border: #c2c2c4;
+  --vp-c-divider: #e2e2e3;
+  --vp-c-gutter: #e2e2e3;
+}
+
+.dark {
   --vp-c-border: #3c3f44;
   --vp-c-divider: #3c3f44;
   --vp-c-gutter: var(--vp-c-divider);
@@ -121,6 +171,12 @@
  * -------------------------------------------------------------------------- */
 
 :root {
+  --vp-c-text-1: rgba(60, 60, 67);
+  --vp-c-text-2: rgba(60, 60, 67, 0.78);
+  --vp-c-text-3: rgba(60, 60, 67, 0.56);
+}
+
+.dark {
   --vp-c-text-1: #B6B7B8;
   --vp-c-text-2: #B6B7B8;
   --vp-c-text-3: rgba(235, 235, 245, 0.38);
@@ -153,8 +209,8 @@
   --vp-c-default-3: var(--vp-c-gray-3);
   --vp-c-default-soft: var(--vp-c-gray-soft);
 
-  --vp-c-brand-1: #FFBB5E;
-  --vp-c-brand-2: var(--vp-c-indigo-2);
+  --vp-c-brand-1: var(--vp-c-foot-print-1);
+  --vp-c-brand-2: var(--vp-c-foot-print-2);
   --vp-c-brand-3: var(--vp-c-indigo-3);
   --vp-c-brand-soft: var(--vp-c-indigo-soft);
 
@@ -514,12 +570,4 @@
 
 .vp-adaptive-theme {
   box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
-}
-
-.appearance {
-  display: none !important;
-}
-
-.social-links:before {
-  margin-left: 0 !important;
 }
diff --git a/src/ja/v-html.md b/src/ja/v-html.md
@@ -1,4 +1,4 @@
-# v-show ディレクティブ
+# v-html ディレクティブ
 
 以下のようなコンポーネントを考えます．
 

diff --git a/src/v-html.md b/src/v-html.md
@@ -1,4 +1,4 @@
-# The v-show Directive
+# The v-html Directive
 
 Consider a component like the following.