Update style

Upgrade Unocss preset Typography

package.json

@@ -15,6 +15,7 @@
     "up": "taze major -I"
   },
   "dependencies": {
+    "@unocss/preset-typography": "^0.53.1",
     "@unocss/reset": "^0.48.4",
     "@vueuse/core": "^9.11.0",
     "@vueuse/head": "^1.0.22",

pnpm-lock.yaml

@@ -1,6 +1,13 @@
 lockfileVersion: '6.0'
 
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
+
 dependencies:
+  '@unocss/preset-typography':
+    specifier: ^0.53.1
+    version: 0.53.1
   '@unocss/reset':
     specifier: ^0.48.4
     version: 0.48.4
@@ -1818,8 +1825,8 @@ packages:
       vue-i18n:
         optional: true
     dependencies:
-      '@intlify/message-compiler': 9.3.0-beta.17
+      '@intlify/message-compiler': 9.3.0-beta.19
-      '@intlify/shared': 9.3.0-beta.17
+      '@intlify/shared': 9.3.0-beta.19
       jsonc-eslint-parser: 1.4.1
       source-map: 0.6.1
       vue-i18n: 9.2.2(vue@3.2.45)
@@ -1848,11 +1855,11 @@ packages:
       '@intlify/shared': 9.2.2
       source-map: 0.6.1
 
-  /@intlify/message-compiler@9.3.0-beta.17:
+  /@intlify/message-compiler@9.3.0-beta.19:
-    resolution: {integrity: sha512-i7hvVIRk1Ax2uKa9xLRJCT57to08OhFMhFXXjWN07rmx5pWQYQ23MfX1xgggv9drnWTNhqEiD+u4EJeHoS5+Ww==}
+    resolution: {integrity: sha512-5RBn5tMOsWh5FqM65IfEJvfpRS8R0lHEUVNDa2rNc9Y7oGEI7swezlbFqU9Kc5FyHy5Kx2jHtdgFIipDwnIYFQ==}
-    engines: {node: '>= 14'}
+    engines: {node: '>= 16'}
     dependencies:
-      '@intlify/shared': 9.3.0-beta.17
+      '@intlify/shared': 9.3.0-beta.19
       source-map: 0.6.1
     dev: true
 
@@ -1860,9 +1867,9 @@ packages:
     resolution: {integrity: sha512-wRwTpsslgZS5HNyM7uDQYZtxnbI12aGiBZURX3BTR9RFIKKRWpllTsgzHWvj3HKm3Y2Sh5LPC1r0PDCKEhVn9Q==}
     engines: {node: '>= 14'}
 
-  /@intlify/shared@9.3.0-beta.17:
+  /@intlify/shared@9.3.0-beta.19:
-    resolution: {integrity: sha512-mscf7RQsUTOil35jTij4KGW1RC9SWQjYScwLxP53Ns6g24iEd5HN7ksbt9O6FvTmlQuX77u+MXpBdfJsGqizLQ==}
+    resolution: {integrity: sha512-+lhQggrLvlQ/O5OmIYAc9gadcYXMoaDi0Doef+X/f6TLZFr9PTMjOpBWmpwNNHi026e54jckntUn6GzqDtIN4w==}
-    engines: {node: '>= 14'}
+    engines: {node: '>= 16'}
     dev: true
 
   /@intlify/unplugin-vue-i18n@0.8.1(vue-i18n@9.2.2):
@@ -1881,7 +1888,7 @@ packages:
         optional: true
     dependencies:
       '@intlify/bundle-utils': 3.4.0(vue-i18n@9.2.2)
-      '@intlify/shared': 9.3.0-beta.17
+      '@intlify/shared': 9.3.0-beta.19
       '@rollup/pluginutils': 4.2.1
       '@vue/compiler-sfc': 3.2.45
       debug: 4.3.4(supports-color@8.1.1)
@@ -2540,6 +2547,16 @@ packages:
     resolution: {integrity: sha512-ecoTzblwEIQGD4QhMo1U36rVwvTR9XW+gtJRhCnVyjy7L23AbGJu2xkRZSsH3k/v0gs0gx/SHNfyOqA52BNfoA==}
     dev: true
 
+  /@unocss/core@0.53.1:
+    resolution: {integrity: sha512-6CUaOMeQyoPIgMuSboX9yGywiCumhoYTPk6uMFhgD3vZmIRCZMwN9RFDLB+s2+NOlnBU6aQsJLONcUapZb/49g==}
+    dev: false
+
+  /@unocss/extractor-arbitrary-variants@0.53.1:
+    resolution: {integrity: sha512-8/+R8ctMwIpUQk5NMDgxCJInWqn7LjzmvgnT2x+LFkCA3F+etU9FNDMV5eg3feNdsHSWsJlKnPlS+cjGseSLiA==}
+    dependencies:
+      '@unocss/core': 0.53.1
+    dev: false
+
   /@unocss/inspector@0.48.4:
     resolution: {integrity: sha512-YcPJoMUbOhldMxMLg9bGNMgReNIcYmIomI2NY77aiPcihv47LLPlN/ur3/syz5SxxihRgIIdFXmGhpj6HDa9vg==}
     dependencies:
@@ -2569,6 +2586,13 @@ packages:
       '@unocss/core': 0.48.4
     dev: true
 
+  /@unocss/preset-mini@0.53.1:
+    resolution: {integrity: sha512-tHfsAXmu82/0BMktgqaq6WLOU5FdLdK/iJvS38eQLZqZlQ2VtCtNybf+bqlNNr0cr8J4ju2iwp7n61pqIvcmOw==}
+    dependencies:
+      '@unocss/core': 0.53.1
+      '@unocss/extractor-arbitrary-variants': 0.53.1
+    dev: false
+
   /@unocss/preset-tagify@0.48.4:
     resolution: {integrity: sha512-M8Vr7JbDAXb/c83oCnIOlSEuCWSujiia7Fp5kgmKrXp25Bqb7rd9d6sD0uLcHsknc9hUkkBFGyPfuMmRo1VovA==}
     dependencies:
@@ -2581,6 +2605,13 @@ packages:
       '@unocss/core': 0.48.4
     dev: true
 
+  /@unocss/preset-typography@0.53.1:
+    resolution: {integrity: sha512-s3D+MakVSouEoYFTrQiuk+fG1lrKdosSgH+xaWFtME6hor1/28IXEIDFjOOx2FOvKEtkGAJg9hj4QSfBGLu26w==}
+    dependencies:
+      '@unocss/core': 0.53.1
+      '@unocss/preset-mini': 0.53.1
+    dev: false
+
   /@unocss/preset-uno@0.48.4:
     resolution: {integrity: sha512-T7l5kFzb52b3NI02pnamPxPLDp7M4+V/sid+Z4LqkJoqsgER1Ekp0WYnQyCWauj9PcMIxoSq4aUf9p7MD3GrUA==}
     dependencies:

src/layouts/default.vue

@@ -11,7 +11,9 @@ export default {
 <template>
   <v-layout class="text-gray-700 dark:text-gray-200 min-h-screen flex flex-col">
     <Nav />
+    <div class="prose m-auto text-left">
       <RouterView />
+    </div>
     <Footer />
   </v-layout>
 </template>

src/pages/index.md

@@ -1 +1 @@
-<h1 class="text-9 text-center c-coolgray-700">属于19预科2班的故事还未完结</h1>
+<h1 class="text-12 text-center c-coolgray-700 not-prose">属于19预科2班的故事还未完结</h1>

src/styles/main.css

@@ -1,5 +1,5 @@
 @import "./markdown.css";
-@import url('https://cdn.bootcdn.net/ajax/libs/lxgw-wenkai-webfont/1.7.0/style.min.css');
+@import url("https://cdn.bootcdn.net/ajax/libs/lxgw-wenkai-webfont/1.7.0/style.min.css");
 
 html,
 body,

unocss.config.ts

@@ -10,8 +10,14 @@ import {
 
 export default defineConfig({
   shortcuts: [
-    ['btn', 'px-4 py-1 rounded inline-block bg-teal-700 text-white cursor-pointer hover:bg-teal-800 disabled:cursor-default disabled:bg-gray-600 disabled:opacity-50'],
+    [
-    ['icon-btn', 'inline-block cursor-pointer select-none opacity-75 transition duration-200 ease-in-out hover:opacity-100 hover:text-teal-600'],
+      'btn',
+      'px-4 py-1 rounded inline-block bg-teal-700 text-white cursor-pointer hover:bg-teal-800 disabled:cursor-default disabled:bg-gray-600 disabled:opacity-50',
+    ],
+    [
+      'icon-btn',
+      'inline-block cursor-pointer select-none opacity-75 transition duration-200 ease-in-out hover:opacity-100 hover:text-teal-600',
+    ],
   ],
   presets: [
     presetUno(),
@@ -22,9 +28,5 @@ export default defineConfig({
     }),
     presetTypography(),
   ],
-  transformers: [
+  transformers: [transformerDirectives(), transformerVariantGroup()],
-    transformerDirectives(),
-    transformerVariantGroup(),
-  ],
-  safelist: 'prose prose-sm m-auto text-left'.split(' '),
 })

vite.config.ts

@@ -62,9 +62,7 @@ export default defineConfig({
         '@vueuse/core',
       ],
       dts: 'src/auto-imports.d.ts',
-      dirs: [
+      dirs: ['src/composables'],
-        'src/composables',
-      ],
       vueTemplate: true,
       resolvers: [ElementPlusResolver()],
     }),
@@ -86,7 +84,7 @@ export default defineConfig({
     // https://github.com/antfu/vite-plugin-vue-markdown
     // Don't need this? Try vitesse-lite: https://github.com/antfu/vitesse-lite
     Markdown({
-      wrapperClasses: 'prose prose-sm m-auto text-left',
+      // wrapperClasses: 'prose m-auto text-left',
       headEnabled: true,
       markdownItSetup(md) {
         // https://prismjs.com/
@@ -168,7 +166,9 @@ export default defineConfig({
   ssgOptions: {
     script: 'async',
     formatting: 'minify',
-    onFinished() { generateSitemap() },
+    onFinished() {
+      generateSitemap()
+    },
   },
 
   ssr: {