Fix PWA icons and mobile reading overflow

Generate PNG icons from favicon.svg at build time so manifest icons resolve, replace legacy font tags with div wrappers, and tighten mobile layout so long text wraps instead of clipping.

Co-authored-by: Cursor <cursoragent@cursor.com>

.vitepress/config.mts

@@ -9,7 +9,7 @@ import { generateSidebar } from './sidebar.mts'
 const root = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..')
 
 export default defineConfig({
-  title: 'DAO DE JING',
+  title: '道德经',
   description: '传统文化典籍资料库',
   lang: 'zh-CN',
   srcDir: '.',

.vitepress/pwa.mts

@@ -27,6 +27,12 @@ export function createPwaPlugin() {
       start_url: '/',
       categories: ['books', 'education'],
       icons: [
+        {
+          src: '/apple-touch-icon.png',
+          sizes: '180x180',
+          type: 'image/png',
+          purpose: 'any',
+        },
         {
           src: '/icon-192.png',
           sizes: '192x192',

.vitepress/theme/custom.css

@@ -3,15 +3,25 @@
     'Noto Sans SC', 'Source Han Sans SC', sans-serif;
 }
 
+html {
+  overflow-x: clip;
+}
+
 /* 旧版 markdown 里的 <font size="4"> 在手机上过大 */
-.vp-doc font {
+.vp-doc font,
+.vp-md-font {
+  display: block;
+  max-width: 100%;
   font-size: inherit !important;
+  overflow-wrap: anywhere;
 }
 
 .vp-doc {
   line-height: 1.85;
   letter-spacing: 0.02em;
   word-break: break-word;
+  overflow-wrap: anywhere;
+  max-width: 100%;
 }
 
 .vp-doc h1 {
@@ -32,13 +42,20 @@
 
 .vp-doc p {
   margin: 1em 0;
+  overflow-wrap: anywhere;
 }
 
 /* 道德经等用缩进写的“伪代码块”，改成正文排版 */
-.vp-doc pre {
-  white-space: pre-wrap;
+.vp-doc pre,
+.vp-doc pre code {
+  white-space: pre-wrap !important;
   word-break: break-word;
+  overflow-wrap: anywhere;
+}
+
+.vp-doc pre {
   overflow-x: auto;
+  max-width: 100%;
   font-family: var(--vp-font-family-base);
   font-size: 1rem;
   line-height: 1.9;
@@ -51,11 +68,13 @@
 .vp-doc :not(pre) > code {
   font-size: 0.92em;
   word-break: break-word;
+  overflow-wrap: anywhere;
 }
 
 .vp-doc img {
   display: block;
   max-width: 100% !important;
+  width: auto !important;
   height: auto !important;
   margin: 1em auto;
   border-radius: 8px;
@@ -66,6 +85,7 @@
   overflow-x: auto;
   -webkit-overflow-scrolling: touch;
   font-size: 0.92rem;
+  max-width: 100%;
 }
 
 .vp-doc blockquote {
@@ -91,6 +111,16 @@
     padding-top: 0;
   }
 
+  .VPDoc .container,
+  .VPDoc .content,
+  .VPDoc .content-container,
+  .vp-doc,
+  .vp-md-font {
+    min-width: 0;
+    max-width: 100%;
+    box-sizing: border-box;
+  }
+
   .VPDoc .container {
     padding: 0 14px;
   }
@@ -100,7 +130,7 @@
   }
 
   .vp-doc {
-    padding: 12px 0 88px;
+    padding: 8px 0 88px;
     font-size: 17px;
   }
 
@@ -109,8 +139,9 @@
   }
 
   /* 手机隐藏右侧大纲，避免挤压正文 */
-  .VPDoc .aside {
-    display: none;
+  .VPDoc .aside,
+  .VPDoc .aside-container {
+    display: none !important;
   }
 
   .VPDoc.has-aside .content-container {

.vitepress/theme/index.ts

@@ -1,5 +1,5 @@
 import DefaultTheme from 'vitepress/theme'
-import { h } from 'vue'
+import { h, defineComponent } from 'vue'
 import InstallApp from './InstallApp.vue'
 import './custom.css'
 
@@ -9,8 +9,19 @@ if (typeof window !== 'undefined') {
   })
 }
 
+/** 旧 markdown 的 <font> 标签改为 div，避免手机端布局溢出 */
+const MdFont = defineComponent({
+  name: 'MdFont',
+  setup(_, { slots }) {
+    return () => h('div', { class: 'vp-md-font' }, slots.default?.())
+  },
+})
+
 export default {
   extends: DefaultTheme,
+  enhanceApp({ app }) {
+    app.component('font', MdFont)
+  },
   Layout: () => {
     return h(DefaultTheme.Layout, null, {
       'layout-bottom': () => h(InstallApp),