update

.nvmrc

@@ -1 +0,0 @@
-24.12.0

.vscode/settings.json

@@ -23,5 +23,8 @@
   "dependi.npm.lockFileEnabled": false,
   "[vue]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[yaml]": {
+    "editor.defaultFormatter": "redhat.vscode-yaml"
   }
 }

app/app.vue

@@ -26,23 +26,25 @@ const bgStyle = computed(() =>
 </script>
 
 <template>
-  <!-- <link
+  <UApp>
+    <!-- <link
     rel="stylesheet"
     href="https://chinese-fonts-cdn.deno.dev/packages/maple-mono-cn/dist/MapleMono-CN-Regular/result.css" /> -->
-  <meta name="color-scheme" content="light dark" />
-  <div class="relative">
-    <div
-      v-if="currentBg"
-      class="fixed inset-0 -z-20 bg-cover bg-center pointer-events-none"
-      :style="bgStyle" />
+    <meta name="color-scheme" content="light dark" />
+    <div class="relative">
+      <div
+        v-if="currentBg"
+        class="fixed inset-0 -z-20 bg-cover bg-center pointer-events-none"
+        :style="bgStyle" />
 
-    <div class="dark:text-zinc-300">
-      <NuxtLoadingIndicator />
-      <NuxtLayout>
-        <NuxtPage />
-      </NuxtLayout>
+      <div class="dark:text-zinc-300">
+        <NuxtLoadingIndicator />
+        <NuxtLayout>
+          <NuxtPage />
+        </NuxtLayout>
+      </div>
     </div>
-  </div>
+  </UApp>
 </template>
 
 <style>

app/assets/css/main.css

@@ -2,6 +2,7 @@
 @import url("https://fontsapi.zeoseven.com/521/main/result.css");
 /* @import url("https://fontsapi.zeoseven.com/292/main/result.css"); */
 @import "tailwindcss";
+@import "@nuxt/ui";
 @plugin "@tailwindcss/typography";
 @plugin "@tailwindcss/forms";
 /* @import "@chinese-fonts/maple-mono-cn/dist/MapleMono-CN-Regular/results.css"; */

nuxt.config.ts

@@ -23,6 +23,7 @@ export default defineNuxtConfig({
     "@nuxtjs/color-mode",
     // "@nuxtjs/tailwindcss",
     "@formkit/auto-animate",
+    "@nuxt/ui",
     // '@stefanobartoletti/nuxt-social-share',
   ],
 
@@ -88,7 +89,7 @@ export default defineNuxtConfig({
             dark: "github-dark",
             light: "github-light",
           },
-          langs: ["c"],
+          langs: ["bash", "c"],
         },
         remarkPlugins: {
           "remark-gfm": {},

package.json

@@ -28,6 +28,7 @@
     "@nuxt/fonts": "0.12.1",
     "@nuxt/icon": "2.1.1",
     "@nuxt/image": "2.0.0",
+    "@nuxt/ui": "^4.3.0",
     "@nuxtjs/color-mode": "4.0.0",
     "@nuxtjs/robots": "5.6.7",
     "@nuxtjs/sitemap": "7.5.0",
@@ -47,6 +48,7 @@
     "@iconify-json/noto": "1.2.7",
     "@iconify-json/simple-icons": "1.2.63",
     "@iconify-json/svg-spinners": "1.2.4",
+    "@nuxt-themes/typography": "^1.0.1",
     "@nuxt/eslint": "1.12.1",
     "@tailwindcss/forms": "0.5.11",
     "@tailwindcss/postcss": "4.1.18",

tokens.config.ts

@@ -0,0 +1,11 @@
+import { defineTheme } from "pinceau";
+
+export default defineTheme({
+  typography: {
+    // This will change the general line-break size
+    letterSpacings: {
+      tight: "-0.035em",
+      wide: "0.035em",
+    },
+  },
+});