@docsector/docsector-reader 0.4.1 → 0.5.0

package/index.html

@@ -9,6 +9,18 @@
     <meta name="msapplication-tap-highlight" content="no">
     <meta name="viewport" content="user-scalable=yes, initial-scale=1, maximum-scale=5, minimum-scale=1, width=device-width<% if (ctx.mode.cordova || ctx.mode.capacitor) { %>, viewport-fit=cover<% } %>">
 
+    <!-- Open Graph -->
+    <meta property="og:title" content="<%= productName %>">
+    <meta property="og:description" content="<%= productDescription %>">
+    <meta property="og:type" content="website">
+    <meta property="og:image" content="">
+
+    <!-- Twitter Card -->
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:title" content="<%= productName %>">
+    <meta name="twitter:description" content="<%= productDescription %>">
+    <meta name="twitter:image" content="">
+
     <link rel="icon" type="image/png" sizes="128x128" href="images/icons/favicon-128.png">
     <link rel="icon" type="image/png" sizes="32x32" href="images/icons/favicon-32.png">
     <link rel="icon" type="image/png" sizes="16x16" href="images/icons/favicon-16.png">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docsector/docsector-reader",
-  "version": "0.4.1",
+  "version": "0.5.0",
   "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/layouts/DefaultLayout.vue

@@ -32,6 +32,7 @@ import { ref, computed } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useStore } from 'vuex'
 import { useI18n } from 'vue-i18n'
+import { useMeta } from 'quasar'
 
 import DMenu from '../components/DMenu.vue'
 import docsectorConfig from 'docsector.config.js'
@@ -43,7 +44,7 @@ const branding = docsectorConfig.branding || {}
 const route = useRoute()
 const router = useRouter()
 const store = useStore()
-const { t } = useI18n()
+const { t, locale } = useI18n()
 
 const layout = ref({
   menu: false
@@ -61,6 +62,34 @@ const headerTitleText = computed(() => {
   }
 })
 
+// @ 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 || ''
+  }
+  return ''
+})
+
+useMeta(() => {
+  const title = pageTitle.value
+    ? `${pageTitle.value} — ${branding.name || ''}`
+    : branding.name || ''
+
+  const image = branding.logo || ''
+
+  return {
+    title,
+    meta: {
+      ogTitle: { property: 'og:title', content: title },
+      ogType: { property: 'og:type', content: 'article' },
+      ogImage: { property: 'og:image', content: image },
+      twitterImage: { name: 'twitter:image', content: image }
+    }
+  }
+})
+
 function toogleMenu () {
   layout.value.menu = !layout.value.menu
 }

package/src/quasar.factory.js

@@ -23,9 +23,10 @@
  * @param {Function} [options.extendViteConf] - Additional Vite config extension
  */
 
-import { readFileSync, existsSync, rmSync } from 'fs'
+import { readFileSync, existsSync, rmSync, mkdirSync, writeFileSync } from 'fs'
 import { createHash } from 'crypto'
 import { resolve } from 'path'
+import { pathToFileURL } from 'url'
 import HJSON from 'hjson'
 
 /**
@@ -116,6 +117,95 @@ function createHjsonPlugin () {
   }
 }
 
+/**
+ * Create a Vite plugin that pre-renders route-specific index.html files at build
+ * time with correct <title> and Open Graph / Twitter Card meta tags.
+ *
+ * Why: SPA builds produce a single index.html with a generic title. Search engine
+ * crawlers and social media link previews read the static HTML without executing
+ * JavaScript, so they always see the same generic meta tags regardless of the URL.
+ *
+ * How: After Vite writes the bundle (closeBundle hook), the plugin dynamically
+ * imports the consumer's pages registry and docsector config, then for each route
+ * creates a directory with an index.html copy whose <title> and meta tags reflect
+ * the page's actual title. Cloudflare Pages (and any static host) serves these
+ * route-specific files automatically.
+ *
+ * Zero external dependencies — no Puppeteer or headless browser required.
+ */
+function createPrerenderMetaPlugin (projectRoot) {
+  return {
+    name: 'docsector-prerender-meta',
+    apply: 'build',
+    async closeBundle () {
+      const distDir = resolve(projectRoot, 'dist', 'spa')
+      const baseHtmlPath = resolve(distDir, 'index.html')
+
+      if (!existsSync(baseHtmlPath)) return
+
+      const baseHtml = readFileSync(baseHtmlPath, 'utf-8')
+
+      // Dynamic import pages registry and docsector config
+      const pagesUrl = pathToFileURL(resolve(projectRoot, 'src', 'pages', 'index.js')).href
+      const configUrl = pathToFileURL(resolve(projectRoot, 'docsector.config.js')).href
+
+      const { default: pages } = await import(pagesUrl)
+      const { default: config } = await import(configUrl)
+
+      const brandingName = config.branding?.name || ''
+      const brandingLogo = config.branding?.logo || ''
+      const defaultLang = config.defaultLanguage || config.languages?.[0]?.value || 'en-US'
+
+      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 fullTitle = title
+          ? `${title} — ${brandingName}`
+          : brandingName
+
+        // Each page can have sub-routes: overview, showcase, vs
+        const subpages = ['overview']
+        if (page.config.subpages?.showcase) subpages.push('showcase')
+        if (page.config.subpages?.vs) subpages.push('vs')
+
+        for (const subpage of subpages) {
+          const routePath = `${type}${pagePath}/${subpage}`
+
+          const html = baseHtml
+            .replace(/<title>[^<]*<\/title>/, () => `<title>${fullTitle}</title>`)
+            .replace(
+              /(<meta\s+property="?og:title"?\s+content=")[^"]*"/,
+              (_, p1) => `${p1}${fullTitle}"`
+            )
+            .replace(
+              /(<meta\s+property="?og:image"?\s+content=")[^"]*"/,
+              (_, p1) => `${p1}${brandingLogo}"`
+            )
+            .replace(
+              /(<meta\s+name="?twitter:title"?\s+content=")[^"]*"/,
+              (_, p1) => `${p1}${fullTitle}"`
+            )
+            .replace(
+              /(<meta\s+name="?twitter:image"?\s+content=")[^"]*"/,
+              (_, p1) => `${p1}${brandingLogo}"`
+            )
+
+          const dir = resolve(distDir, routePath)
+          mkdirSync(dir, { recursive: true })
+          writeFileSync(resolve(dir, 'index.html'), html)
+          count++
+        }
+      }
+
+      console.log(`\x1b[36m[docsector]\x1b[0m Pre-rendered meta tags for ${count} routes`)
+    }
+  }
+}
+
 /**
  * Create a complete Quasar configuration for a docsector-reader consumer project.
  *
@@ -187,6 +277,7 @@ export function createQuasarConfig (options = {}) {
       vitePlugins: [
         createHjsonPlugin(),
         createPagesWatchPlugin(projectRoot),
+        createPrerenderMetaPlugin(projectRoot),
         ...vitePlugins
       ],
 
@@ -327,7 +418,7 @@ export function createQuasarConfig (options = {}) {
       config: {},
       lang: 'en-US',
       plugins: [
-        'LocalStorage', 'SessionStorage'
+        'Meta', 'LocalStorage', 'SessionStorage'
       ]
     },
 

package/src/router/routes.js

@@ -48,6 +48,7 @@ for (const [path, page] of Object.entries(pages)) {
     component: () => import('layouts/DefaultLayout.vue'),
     meta: {
       ...config,
+      data: page.data,
       type: topPage
     },
     children