@docsector/docsector-reader 0.5.1 → 0.5.3

package/bin/docsector.js

@@ -23,7 +23,7 @@ const packageRoot = resolve(__dirname, '..')
 const args = process.argv.slice(2)
 const command = args[0]
 
-const VERSION = '0.5.1'
+const VERSION = '0.5.2'
 
 const HELP = `
   Docsector Reader v${VERSION}
@@ -71,7 +71,7 @@ function getTemplatePackageJson (name) {
       serve: 'docsector serve'
     },
     dependencies: {
-      '@docsector/docsector-reader': '^0.5.1',
+      '@docsector/docsector-reader': '^0.5.2',
       '@quasar/extras': '^1.16.12',
       'quasar': '^2.16.6',
       'vue': '^3.5.13',
@@ -276,6 +276,7 @@ const TEMPLATE_PAGES_INDEX = `\
  *
  * config.type: top-level route prefix — 'manual', 'guide', etc.
  * config.status: 'done' | 'draft' | 'empty'
+ * config.meta.description: string or localized object for SEO/social description
  * config.icon: Material Design icon name
  * config.menu: menu display options (header, subheader, separator)
  * config.subpages: { showcase: bool, vs: bool }
@@ -288,6 +289,11 @@ export default {
     config: {
       icon: 'flag',
       status: 'done',
+      meta: {
+        description: {
+          'en-US': 'Get started quickly with setup and project structure.'
+        }
+      },
       type: 'guide',
       menu: {
         header: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docsector/docsector-reader",
-  "version": "0.5.1",
+  "version": "0.5.3",
   "description": "A documentation rendering engine built with Vue 3, Quasar v2 and Vite. Transform Markdown into beautiful, navigable documentation sites.",
   "productName": "Docsector Reader",
   "author": "Rodrigo de Araujo Vieira",

package/src/components/DMermaidDiagram.vue

@@ -26,7 +26,8 @@ async function render () {
 
     mermaid.initialize({
       startOnLoad: false,
-      theme: $q.dark.isActive ? 'dark' : 'default'
+      theme: $q.dark.isActive ? 'dark' : 'default',
+      fontSize: 20
     })
 
     const decoded = props.content

package/src/layouts/DefaultLayout.vue

@@ -62,13 +62,34 @@ const headerTitleText = computed(() => {
   }
 })
 
+const resolveLocalizedValue = (source) => {
+  if (!source) return ''
+  if (typeof source === 'string') return source
+  if (typeof source === 'object') {
+    return source[locale.value] || source['*'] || source['en-US'] || Object.values(source)[0] || ''
+  }
+  return ''
+}
+
 // @ Dynamic page title & meta tags
 const pageTitle = computed(() => {
   const data = route.matched[0]?.meta?.data
-  if (data) {
-    const langData = data[locale.value] || data['en-US'] || Object.values(data)[0]
-    return langData?.title || ''
+  const langData = data?.[locale.value] || data?.['*'] || data?.['en-US'] || Object.values(data || {})[0]
+  return langData?.title || ''
+})
+
+const pageDescription = computed(() => {
+  const description = resolveLocalizedValue(route.matched[0]?.meta?.meta?.description)
+  if (description) return description
+
+  if (pageTitle.value && branding.name) {
+    return `${pageTitle.value} — Documentation of ${branding.name}`
   }
+
+  if (branding.name) {
+    return `Documentation of ${branding.name}`
+  }
+
   return ''
 })
 
@@ -77,14 +98,20 @@ useMeta(() => {
     ? `${pageTitle.value} — ${branding.name || ''}`
     : branding.name || ''
 
+  const description = pageDescription.value
   const image = branding.logo || ''
 
   return {
     title,
     meta: {
+      description: { name: 'description', content: description },
       ogTitle: { property: 'og:title', content: title },
+      ogDescription: { property: 'og:description', content: description },
       ogType: { property: 'og:type', content: 'article' },
       ogImage: { property: 'og:image', content: image },
+      twitterCard: { name: 'twitter:card', content: 'summary_large_image' },
+      twitterTitle: { name: 'twitter:title', content: title },
+      twitterDescription: { name: 'twitter:description', content: description },
       twitterImage: { name: 'twitter:image', content: image }
     }
   }

package/src/pages/index.js

@@ -6,6 +6,7 @@
  *
  * config.type: determines the top-level route prefix (e.g., 'manual', 'guide', 'API')
  * config.status: 'done' | 'draft' | 'empty'
+ * config.meta.description: string or localized object for SEO/social description
  * config.icon: Material Design icon name
  * config.menu: menu display options (header, subheader, separator)
  * config.subpages: { showcase: bool, vs: bool }
@@ -22,6 +23,12 @@ export default {
     config: {
       icon: 'flag',
       status: 'done',
+      meta: {
+        description: {
+          'en-US': 'Getting Started — Documentation of Docsector Reader',
+          'pt-BR': 'Começando — Documentacao do Docsector Reader'
+        }
+      },
       type: 'guide',
       menu: {
         header: {
@@ -43,6 +50,12 @@ export default {
     config: {
       icon: 'tune',
       status: 'done',
+      meta: {
+        description: {
+          'en-US': 'Configuration — Documentation of Docsector Reader',
+          'pt-BR': 'Configuração — Documentacao do Docsector Reader'
+        }
+      },
       type: 'guide',
       menu: {
         separator: ' page'
@@ -61,6 +74,12 @@ export default {
     config: {
       icon: 'route',
       status: 'done',
+      meta: {
+        description: {
+          'en-US': 'Pages & Routing — Documentation of Docsector Reader',
+          'pt-BR': 'Páginas & Rotas — Documentacao do Docsector Reader'
+        }
+      },
       type: 'guide',
       menu: {},
       subpages: {
@@ -77,6 +96,12 @@ export default {
     config: {
       icon: 'translate',
       status: 'done',
+      meta: {
+        description: {
+          'en-US': 'i18n & Markdown — Documentation of Docsector Reader',
+          'pt-BR': 'i18n & Markdown — Documentacao do Docsector Reader'
+        }
+      },
       type: 'guide',
       menu: {},
       subpages: {
@@ -93,6 +118,12 @@ export default {
     config: {
       icon: 'palette',
       status: 'done',
+      meta: {
+        description: {
+          'en-US': 'Theming — Documentation of Docsector Reader',
+          'pt-BR': 'Temas — Documentacao do Docsector Reader'
+        }
+      },
       type: 'guide',
       menu: {},
       subpages: {
@@ -109,6 +140,12 @@ export default {
     config: {
       icon: 'cloud_upload',
       status: 'draft',
+      meta: {
+        description: {
+          'en-US': 'Deployment — Documentation of Docsector Reader',
+          'pt-BR': 'Deploy — Documentacao do Docsector Reader'
+        }
+      },
       type: 'guide',
       menu: {},
       subpages: {
@@ -125,6 +162,12 @@ export default {
     config: {
       icon: 'extension',
       status: 'empty',
+      meta: {
+        description: {
+          'en-US': 'Plugins — Documentation of Docsector Reader',
+          'pt-BR': 'Plugins — Documentacao do Docsector Reader'
+        }
+      },
       type: 'guide',
       menu: {},
       subpages: {
@@ -152,6 +195,12 @@ export default {
     config: {
       icon: 'web',
       status: 'done',
+      meta: {
+        description: {
+          'en-US': 'DPage — Documentation of Docsector Reader',
+          'pt-BR': 'DPage — Documentacao do Docsector Reader'
+        }
+      },
       type: 'manual',
       menu: {
         header: {
@@ -174,6 +223,12 @@ export default {
     config: {
       icon: 'layers',
       status: 'done',
+      meta: {
+        description: {
+          'en-US': 'DSubpage — Documentation of Docsector Reader',
+          'pt-BR': 'DSubpage — Documentacao do Docsector Reader'
+        }
+      },
       type: 'manual',
       menu: {},
       subpages: {
@@ -190,6 +245,12 @@ export default {
     config: {
       icon: 'article',
       status: 'done',
+      meta: {
+        description: {
+          'en-US': 'DPageSection — Documentation of Docsector Reader',
+          'pt-BR': 'DPageSection — Documentacao do Docsector Reader'
+        }
+      },
       type: 'manual',
       menu: {
         separator: ' page'
@@ -211,6 +272,12 @@ export default {
     config: {
       icon: 'title',
       status: 'done',
+      meta: {
+        description: {
+          'en-US': 'DH1 – DH6 (Headings) — Documentation of Docsector Reader',
+          'pt-BR': 'DH1 – DH6 (Títulos) — Documentacao do Docsector Reader'
+        }
+      },
       type: 'manual',
       menu: {},
       subpages: {
@@ -227,6 +294,12 @@ export default {
     config: {
       icon: 'code',
       status: 'done',
+      meta: {
+        description: {
+          'en-US': 'DPageSourceCode — Documentation of Docsector Reader',
+          'pt-BR': 'DPageSourceCode — Documentacao do Docsector Reader'
+        }
+      },
       type: 'manual',
       menu: {},
       subpages: {
@@ -243,6 +316,12 @@ export default {
     config: {
       icon: 'account_tree',
       status: 'done',
+      meta: {
+        description: {
+          'en-US': 'DMermaidDiagram — Documentation of Docsector Reader',
+          'pt-BR': 'DMermaidDiagram — Documentacao do Docsector Reader'
+        }
+      },
       type: 'manual',
       menu: {},
       subpages: {
@@ -259,6 +338,12 @@ export default {
     config: {
       icon: 'format_quote',
       status: 'done',
+      meta: {
+        description: {
+          'en-US': 'DPageBlockquote — Documentation of Docsector Reader',
+          'pt-BR': 'DPageBlockquote — Documentacao do Docsector Reader'
+        }
+      },
       type: 'manual',
       menu: {
         separator: ' page'
@@ -280,6 +365,12 @@ export default {
     config: {
       icon: 'menu_open',
       status: 'done',
+      meta: {
+        description: {
+          'en-US': 'DMenu — Documentation of Docsector Reader',
+          'pt-BR': 'DMenu — Documentacao do Docsector Reader'
+        }
+      },
       type: 'manual',
       menu: {},
       subpages: {
@@ -296,6 +387,12 @@ export default {
     config: {
       icon: 'account_tree',
       status: 'done',
+      meta: {
+        description: {
+          'en-US': 'DPageAnchor — Documentation of Docsector Reader',
+          'pt-BR': 'DPageAnchor — Documentacao do Docsector Reader'
+        }
+      },
       type: 'manual',
       menu: {},
       subpages: {
@@ -312,6 +409,12 @@ export default {
     config: {
       icon: 'info',
       status: 'done',
+      meta: {
+        description: {
+          'en-US': 'DPageMeta — Documentation of Docsector Reader',
+          'pt-BR': 'DPageMeta — Documentacao do Docsector Reader'
+        }
+      },
       type: 'manual',
       menu: {},
       subpages: {
@@ -331,6 +434,12 @@ export default {
     config: {
       icon: 'zoom_in',
       status: 'done',
+      meta: {
+        description: {
+          'en-US': 'QZoom — Documentation of Docsector Reader',
+          'pt-BR': 'QZoom — Documentacao do Docsector Reader'
+        }
+      },
       type: 'manual',
       menu: {
         separator: ' page'
@@ -360,6 +469,12 @@ export default {
     config: {
       icon: 'navigation',
       status: 'done',
+      meta: {
+        description: {
+          'en-US': 'useNavigator — Documentation of Docsector Reader',
+          'pt-BR': 'useNavigator — Documentacao do Docsector Reader'
+        }
+      },
       type: 'manual',
       menu: {},
       subpages: {
@@ -387,6 +502,12 @@ export default {
     config: {
       icon: 'storage',
       status: 'done',
+      meta: {
+        description: {
+          'en-US': 'Vuex Modules — Documentation of Docsector Reader',
+          'pt-BR': 'Módulos Vuex — Documentacao do Docsector Reader'
+        }
+      },
       type: 'manual',
       menu: {},
       subpages: {

package/src/quasar.factory.js

@@ -156,16 +156,29 @@ function createPrerenderMetaPlugin (projectRoot) {
       const brandingLogo = config.branding?.logo || ''
       const defaultLang = config.defaultLanguage || config.languages?.[0]?.value || 'en-US'
 
+      const resolveLocalizedValue = (source) => {
+        if (!source) return ''
+        if (typeof source === 'string') return source
+        if (typeof source === 'object') {
+          return source[defaultLang] || source['*'] || source['en-US'] || Object.values(source)[0] || ''
+        }
+        return ''
+      }
+
       let count = 0
 
       for (const [pagePath, page] of Object.entries(pages)) {
         if (page.config === null) continue
 
         const type = page.config.type ?? 'manual'
-        const title = page.data?.[defaultLang]?.title || ''
+        const titleData = page.data?.[defaultLang] || page.data?.['*'] || page.data?.['en-US'] || Object.values(page.data || {})[0]
+        const title = titleData?.title || ''
         const fullTitle = title
           ? `${title} — ${brandingName}`
           : brandingName
+        const pageDescription = resolveLocalizedValue(page.config?.meta?.description)
+        const fullDescription = pageDescription
+          || (title && brandingName ? `${title} — Documentation of ${brandingName}` : `Documentation of ${brandingName}`)
 
         // Each page can have sub-routes: overview, showcase, vs
         const subpages = ['overview']
@@ -177,10 +190,18 @@ function createPrerenderMetaPlugin (projectRoot) {
 
           const html = baseHtml
             .replace(/<title>[^<]*<\/title>/, () => `<title>${fullTitle}</title>`)
+            .replace(
+              /(<meta\s+name="?description"?\s+content=")[^"]*"/,
+              (_, p1) => `${p1}${fullDescription}"`
+            )
             .replace(
               /(<meta\s+property="?og:title"?\s+content=")[^"]*"/,
               (_, p1) => `${p1}${fullTitle}"`
             )
+            .replace(
+              /(<meta\s+property="?og:description"?\s+content=")[^"]*"/,
+              (_, p1) => `${p1}${fullDescription}"`
+            )
             .replace(
               /(<meta\s+property="?og:image"?\s+content=")[^"]*"/,
               (_, p1) => `${p1}${brandingLogo}"`
@@ -189,6 +210,10 @@ function createPrerenderMetaPlugin (projectRoot) {
               /(<meta\s+name="?twitter:title"?\s+content=")[^"]*"/,
               (_, p1) => `${p1}${fullTitle}"`
             )
+            .replace(
+              /(<meta\s+name="?twitter:description"?\s+content=")[^"]*"/,
+              (_, p1) => `${p1}${fullDescription}"`
+            )
             .replace(
               /(<meta\s+name="?twitter:image"?\s+content=")[^"]*"/,
               (_, p1) => `${p1}${brandingLogo}"`