Merge pull request #205 from LuxDL/la/enhance_readability

enhance readabilities

docs/make.jl

@@ -41,13 +41,12 @@ makedocs(;
     source = "src",
     build = "build",
     pages = [
-        "Home" => "index.md",
-        "Getting started" => "getting_started.md",
-        "Examples" => [
+        "Manual" => [
+            "Get Started" => "get_started.md",
+            "Updating to DocumenterVitepress" => "documenter_to_vitepress_docs_example.md",
             "Code" => "code_example.md",
             "Markdown" => "markdown-examples.md",
             "MIME output" => "mime_examples.md",
-            "Updating to DocumenterVitepress" => "documenter_to_vitepress_docs_example.md",
             "DocumenterCitations integration" => "citations.md",
             "CSS Styling" => "style_css.md",
             "Authors' badge" => "author_badge.md",

docs/package.json

@@ -1,10 +1,11 @@
 {
   "devDependencies": {
+    "@nolebase/vitepress-plugin-enhanced-readabilities": "^2.12.1",
     "@types/d3-format": "^3.0.4",
-    "@types/node": "^22.10.5",
+    "@types/node": "^22.10.9",
     "markdown-it": "^14.1.0",
     "markdown-it-mathjax3": "^4.3.2",
-    "vitepress": "^1.5.0",
+    "vitepress": "^1.6.3",
     "vitepress-plugin-tabs": "^0.5.0"
   },
   "scripts": {

docs/src/.vitepress/config.mts

@@ -40,7 +40,21 @@ export default defineConfig({
   vite: {
     build: {
       assetsInlineLimit: 0, // so we can tell whether we have created inlined images or not, we don't let vite inline them
-    }
+    },
+    optimizeDeps: {
+      exclude: [ 
+        '@nolebase/vitepress-plugin-enhanced-readabilities/client',
+        'vitepress',
+        '@nolebase/ui',
+      ], 
+    }, 
+    ssr: { 
+      noExternal: [ 
+        // If there are other packages that need to be processed by Vite, you can add them here.
+        '@nolebase/vitepress-plugin-enhanced-readabilities',
+        '@nolebase/ui',
+      ], 
+    },
   },
 
   markdown: {

docs/src/.vitepress/theme/index.ts

@@ -1,21 +1,34 @@
 // .vitepress/theme/index.ts
 import { h } from 'vue'
-import type { Theme } from 'vitepress'
 import DefaultTheme from 'vitepress/theme'
+import type { Theme as ThemeConfig } from 'vitepress'
+
+import { 
+  NolebaseEnhancedReadabilitiesMenu, 
+  NolebaseEnhancedReadabilitiesScreenMenu, 
+} from '@nolebase/vitepress-plugin-enhanced-readabilities/client'
+
 import AsideTrustees from '../../components/AsideTrustees.vue'
 import VersionPicker from "../../components/VersionPicker.vue"
 import StarUs from '../../components/StarUs.vue'
 import AuthorBadge from '../../components/AuthorBadge.vue'
 import Authors from '../../components/Authors.vue'
 import { enhanceAppWithTabs } from 'vitepress-plugin-tabs/client'
+
+import '@nolebase/vitepress-plugin-enhanced-readabilities/client/style.css'
 import './style.css'
 
-export default {
+export const Theme: ThemeConfig = {
   extends: DefaultTheme,
   Layout() {
     return h(DefaultTheme.Layout, null, {
       'aside-ads-before': () => h(AsideTrustees),
-      'nav-bar-content-after': () => h(StarUs),
+      'nav-bar-content-after': () => [
+        h(StarUs),
+        h(NolebaseEnhancedReadabilitiesMenu), // Enhanced Readabilities menu
+      ],
+      // A enhanced readabilities menu for narrower screens (usually smaller than iPad Mini)
+      'nav-screen-content-after': () => h(NolebaseEnhancedReadabilitiesScreenMenu),
     })
   },
   enhanceApp({ app, router, siteData }) {
@@ -24,4 +37,5 @@ export default {
     app.component('AuthorBadge', AuthorBadge)
     app.component('Authors', Authors)
   }
-} satisfies Theme
+}
+export default Theme

docs/src/getting_started.md → docs/src/get_started.md

@@ -1,4 +1,4 @@
-# Getting started
+# Get Started
 
 ## Simple method
 

docs/src/index.md

@@ -12,8 +12,8 @@ hero:
     alt: DocumenterVitepress
   actions:
     - theme: brand
-      text: Getting Started
-      link: /getting_started
+      text: Get Started
+      link: /get_started
     - theme: alt
       text: View on Github
       link: https://github.com/LuxDL/DocumenterVitepress.jl

template/package.json

@@ -5,11 +5,12 @@
     "docs:preview": "vitepress preview build/.documenter"
   },
   "dependencies": {
-    "@shikijs/transformers": "^1.1.7",
+    "@nolebase/vitepress-plugin-enhanced-readabilities": "^2.12.1",
+    "@shikijs/transformers": "^2.0.3",
     "markdown-it": "^14.1.0",
     "markdown-it-footnote": "^4.0.0",
     "markdown-it-mathjax3": "^4.3.2",
-    "vitepress": "^1.5.0",
+    "vitepress": "^1.6.3",
     "vitepress-plugin-tabs": "^0.5.0"
   }
 }

template/src/.vitepress/config.mts

@@ -39,7 +39,22 @@ export default defineConfig({
     ['script', {src: `${baseTemp.base}siteinfo.js`}]
   ],
   ignoreDeadLinks: true,
-
+  vite: {
+    optimizeDeps: {
+      exclude: [ 
+        '@nolebase/vitepress-plugin-enhanced-readabilities/client',
+        'vitepress',
+        '@nolebase/ui',
+      ], 
+    }, 
+    ssr: { 
+      noExternal: [ 
+        // If there are other packages that need to be processed by Vite, you can add them here.
+        '@nolebase/vitepress-plugin-enhanced-readabilities',
+        '@nolebase/ui',
+      ], 
+    },
+  },
   markdown: {
     math: true,
     config(md) {

template/src/.vitepress/theme/index.ts

@@ -1,19 +1,31 @@
 // .vitepress/theme/index.ts
 import { h } from 'vue'
-import type { Theme } from 'vitepress'
 import DefaultTheme from 'vitepress/theme'
+import type { Theme as ThemeConfig } from 'vitepress'
+
+import { 
+  NolebaseEnhancedReadabilitiesMenu, 
+  NolebaseEnhancedReadabilitiesScreenMenu, 
+} from '@nolebase/vitepress-plugin-enhanced-readabilities/client'
+
 import VersionPicker from "../../components/VersionPicker.vue"
 import AuthorBadge from '../../components/AuthorBadge.vue'
 import Authors from '../../components/Authors.vue'
 
 import { enhanceAppWithTabs } from 'vitepress-plugin-tabs/client'
+
+import '@nolebase/vitepress-plugin-enhanced-readabilities/client/style.css'
 import './style.css'
 
-export default {
+export const Theme: ThemeConfig = {
   extends: DefaultTheme,
   Layout() {
     return h(DefaultTheme.Layout, null, {
-      // https://vitepress.dev/guide/extending-default-theme#layout-slots
+      'nav-bar-content-after': () => [
+        h(NolebaseEnhancedReadabilitiesMenu), // Enhanced Readabilities menu
+      ],
+      // A enhanced readabilities menu for narrower screens (usually smaller than iPad Mini)
+      'nav-screen-content-after': () => h(NolebaseEnhancedReadabilitiesScreenMenu),
     })
   },
   enhanceApp({ app, router, siteData }) {
@@ -22,4 +34,5 @@ export default {
     app.component('AuthorBadge', AuthorBadge)
     app.component('Authors', Authors)
   }
-} satisfies Theme
+}
+export default Theme