@docsector/docsector-reader 2.0.7 → 2.2.0

package/README.md

@@ -54,7 +54,7 @@ Transform Markdown content into beautiful, navigable documentation sites — wit
 - 📚 **Book Tabs with Per-State Colors** — Define `*.book.js` tabs with icons, order, and `color.active` / `color.inactive`
 - 🔀 **Internal Shortcut Pages** — Route entries can redirect with `config.link.to`, keeping localized titles while inheriting icon/status from the destination page
 - 📐 **Responsive Subpage Toolbar** — Subpage actions align with the content column on desktop and dock to the bottom on mobile
-- 🏷️ **Status Badges** — Mark pages as `done`, `draft`, or `empty` with visual indicators
+- 🏷️ **Status Badges** — Mark pages as `done`, `draft`, `empty`, or `new` with visual indicators
 - ✏️ **Edit on GitHub** — Direct links to edit pages on your repository
 - 🧭 **Robust Edit Link Mapping** — Normalizes route paths (including trailing slashes) into `page.subpage.locale.md` source files for reliable GitHub edit URLs
 - 📅 **Last Updated Date** — Automatic per-page "last updated" date from git commit history, locale-formatted
@@ -68,6 +68,8 @@ Transform Markdown content into beautiful, navigable documentation sites — wit
 - 🧬 **Scaffolded Homepage Override Wiring** — New consumer projects automatically wire `virtual:docsector-homepage-override` into i18n message building
 - 🧭 **Quick Links Custom Element** — Use `<d-quick-links>` and `<d-quick-link>` in Markdown to render rich home navigation cards
 - 🗂️ **API Catalog Well-Known** — Auto-generates `/.well-known/api-catalog` as Linkset JSON for machine-readable API discovery
+- 🗃️ **Multi-Version History** — Archive older major versions under `src/pages/.old/<version>/` and expose them at prefixed routes (e.g. `/v0.x/guide/...`) while keeping the current docs at unprefixed routes
+- 🏷️ **Version Selector Badges** — Every version in the sidebar selector displays a color-coded badge: green for released, orange for draft, red for deprecated; fully customizable via `badge: { label, color, textColor }`
 - ⚙️ **Single Config File** — Customize branding, links, and languages via `docsector.config.js`
 
 ---
@@ -675,7 +677,10 @@ export default {
     logo: '/images/logo/my-logo.png',
     name: 'My Project',
     version: 'v1.0.0',
-    versions: ['v1.0.0', 'v0.9.0']
+    versions: [
+      { id: 'v1.0.0', current: true, released: false },
+      { id: 'v0.9.0', released: true, status: 'deprecated' }
+    ]
   },
 
   links: {
@@ -754,6 +759,10 @@ export default {
 }
 ```
 
+The current version keeps the normal unprefixed routes such as `/guide/getting-started/overview/`. Archived major versions can be placed under `src/pages/.old/<version>/` with the same book/index/Markdown layout, and are exposed with a URL prefix such as `/v0.x/guide/getting-started/overview/`.
+
+Every version shows a release badge in the selector. Released versions default to `released`; versions with `released: false` or `status: 'draft'` default to `draft`; versions with `status: 'deprecated'` or `deprecated: true` default to `deprecated` in red. Use `badge: { label, color, textColor }` when you need custom badge copy or colors.
+
 ### MCP (optional)
 
 ```javascript
@@ -777,15 +786,17 @@ import { buildMessages } from '@docsector/docsector-reader/i18n'
 import homePageOverride from 'virtual:docsector-homepage-override'
 
 const langModules = import.meta.glob('./languages/*.hjson', { eager: true })
-const mdModules = import.meta.glob('../pages/**/*.md', { eager: true, query: '?raw', import: 'default' })
+const currentMdModules = import.meta.glob('../pages/**/*.md', { eager: true, query: '?raw', import: 'default' })
+const oldMdModules = import.meta.glob('../pages/.old/**/*.md', { eager: true, query: '?raw', import: 'default' })
+const mdModules = { ...currentMdModules, ...oldMdModules }
 
 import boot from 'pages/boot'
-import { books } from 'virtual:docsector-books'
+import { books, pageEntries } from 'virtual:docsector-books'
 
-export default buildMessages({ langModules, mdModules, books, boot, homePageOverride })
+export default buildMessages({ langModules, mdModules, books, pageEntries, boot, homePageOverride })
 ```
 
-> `books` is the preferred source because it preserves per-book registries and avoids path collisions when two books reuse the same route key.
+> `pageEntries` is the preferred source because it preserves per-book and per-version registries and avoids path collisions when books or archived versions reuse the same route key.
 
 ### Language files
 
@@ -892,7 +903,8 @@ export default {
   '/my-section/my-page': definePage({
     config: {
       icon: 'description',
-      status: 'done',        // 'done' | 'draft' | 'empty'
+      status: 'new',         // 'done' | 'draft' | 'empty' | 'new'
+      version: 'v2.1.0',     // Optional: shown as "New in" / "Novo em"
       menu: {
         header: { label: '.my-section', icon: 'category' }
       },

package/bin/docsector.js

@@ -23,7 +23,7 @@ const packageRoot = resolve(__dirname, '..')
 const args = process.argv.slice(2)
 const command = args[0]
 
-const VERSION = '2.0.7'
+const VERSION = '2.2.0'
 
 const HELP = `
   Docsector Reader v${VERSION}
@@ -105,7 +105,10 @@ export default {
   branding: {
     logo: '/images/logo.png',
     name: 'My Documentation',
-    version: 'v0.1.0'
+    version: 'v0.1.0',
+    versions: [
+      { id: 'v0.1.0', current: true, released: false }
+    ]
   },
 
   // @ Links
@@ -269,13 +272,15 @@ import homePageOverride from 'virtual:docsector-homepage-override'
 // @ Import language HJSON files (Vite-compatible eager import)
 const langModules = import.meta.glob('./languages/*.hjson', { eager: true })
 // @ Import markdown files (Vite-compatible eager import as raw strings)
-const mdModules = import.meta.glob('../pages/**/*.md', { eager: true, query: '?raw', import: 'default' })
+const currentMdModules = import.meta.glob('../pages/**/*.md', { eager: true, query: '?raw', import: 'default' })
+const oldMdModules = import.meta.glob('../pages/.old/**/*.md', { eager: true, query: '?raw', import: 'default' })
+const mdModules = { ...currentMdModules, ...oldMdModules }
 
 // @ Import pages
 import boot from 'pages/boot'
-import { allPages as pages } from 'virtual:docsector-books'
+import { books, pageEntries } from 'virtual:docsector-books'
 
-export default buildMessages({ langModules, mdModules, pages, boot, homePageOverride })
+export default buildMessages({ langModules, mdModules, books, pageEntries, boot, homePageOverride })
 `
 
 const TEMPLATE_I18N_HJSON = `\
@@ -310,6 +315,7 @@ const TEMPLATE_I18N_HJSON = `\
       prev: 'Previous page'
       next: 'Next page'
     }
+    newVersion: 'New in'
   }
 
   // @ Menu
@@ -331,6 +337,19 @@ const TEMPLATE_I18N_HJSON = `\
         _: 'draft'
         tooltip: 'This page is under construction.'
       }
+      new: {
+        _: 'new'
+        tooltip: 'This page is new.'
+        tooltipVersion: 'New in {version}'
+      }
+    }
+
+    version: {
+      status: {
+        released: 'released'
+        draft: 'draft'
+        deprecated: 'deprecated'
+      }
     }
 
     settings: 'Settings'
@@ -401,7 +420,8 @@ const TEMPLATE_PAGES_INDEX = `\
  * and each value configures the page's book, icon, status, and titles.
  *
  * config.book: top-level route prefix — 'guide', 'manual', etc.
- * config.status: 'done' | 'draft' | 'empty'
+ * config.status: 'done' | 'draft' | 'empty' | 'new'
+ * config.version: optional version where this page was introduced (e.g. 'v2.1.0')
  * 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)
@@ -414,7 +434,8 @@ export default {
   '/getting-started': {
     config: {
       icon: 'flag',
-      status: 'done',
+      status: 'new',
+      version: 'v0.1.0',
       meta: {
         description: {
           'en-US': 'Get started quickly with setup and project structure.'

package/docsector.config.js

@@ -15,7 +15,19 @@ export default {
     // Project name displayed in the sidebar
     name: 'Docsector Reader',
     // Version label displayed next to the name
-    version: 'v' + pkg.version
+    version: 'v' + pkg.version,
+    versions: [
+      {
+        id: 'v' + pkg.version,
+        current: true,
+        released: false
+      },
+      {
+        id: 'v0.x',
+        released: true,
+        status: 'deprecated'
+      }
+    ]
   },
 
   // @ Links

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docsector/docsector-reader",
-  "version": "2.0.7",
+  "version": "2.2.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/components/DMenu.vue

@@ -7,7 +7,7 @@ import { useI18n } from 'vue-i18n'
 import tags from '@docsector/tags'
 import DMenuItem from './DMenuItem.vue'
 import docsectorConfig from 'docsector.config.js'
-import { allBooks } from 'virtual:docsector-books'
+import { allBooks, booksByVersion, versions } from 'virtual:docsector-books'
 import { namespacedLabelI18nPath, routeSubpageSourceI18nPath } from '../i18n/path'
 
 const $q = useQuasar()
@@ -20,19 +20,110 @@ const links = docsectorConfig.links || {}
 
 const term = ref(null)
 const founds = ref(false)
-const version = ref(branding.version || 'v0.x')
-const versions = ref(branding.versions || ['v0.x'])
 const items = ref([])
 const scrolling = ref(null)
 
 const subpage = computed(() => {
   const parent = $route.matched[0]?.path
   const child = $route.matched[1]?.path
+  if (!parent || !child) return '/overview'
   return child.substring(parent.length)
 })
 
+const activeVersionId = computed(() => {
+  return $route.matched?.[0]?.meta?.version ?? versions?.[0]?.id ?? ''
+})
+
+const activeBooks = computed(() => {
+  if (activeVersionId.value && booksByVersion?.[activeVersionId.value]?.allBooks) {
+    return booksByVersion[activeVersionId.value].allBooks
+  }
+
+  return allBooks || []
+})
+
+const draftReleaseStatuses = new Set(['draft', 'unreleased', 'preview', 'next'])
+
+const versionStatusLabel = (label, releaseStatus) => {
+  const normalizedStatus = String(releaseStatus || '').toLowerCase()
+  const normalizedLabel = String(label || normalizedStatus).toLowerCase()
+  const statusKey = normalizedStatus ? `menu.version.status.${normalizedStatus}` : null
+  const labelKey = normalizedLabel ? `menu.version.status.${normalizedLabel}` : null
+
+  if (statusKey && (!label || normalizedLabel === normalizedStatus) && te(statusKey)) {
+    return t(statusKey)
+  }
+
+  if (labelKey && te(labelKey)) {
+    return t(labelKey)
+  }
+
+  return label || releaseStatus
+}
+
+const normalizeVersionBadge = (item) => {
+  const configuredStatus = item.deprecated === true
+    ? 'deprecated'
+    : (item.releaseStatus || item.status)
+  const explicitlyReleased = item.released !== undefined ? item.released !== false : null
+  const released = configuredStatus === 'deprecated'
+    ? true
+    : (explicitlyReleased ?? !draftReleaseStatuses.has(String(configuredStatus || '').toLowerCase()))
+  const releaseStatus = configuredStatus || (released ? 'released' : 'draft')
+  const rawBadge = item.badge ?? item.releaseBadge
+  const deprecated = releaseStatus === 'deprecated'
+  const defaultColor = deprecated ? 'negative' : (released ? 'positive' : 'warning')
+  const defaultTextColor = (deprecated || released) ? 'white' : 'dark'
+
+  if (rawBadge === false || rawBadge === null) {
+    return { label: versionStatusLabel(releaseStatus, releaseStatus), color: defaultColor, textColor: defaultTextColor }
+  }
+
+  if (typeof rawBadge === 'string') {
+    return { label: versionStatusLabel(rawBadge, releaseStatus), color: defaultColor, textColor: defaultTextColor }
+  }
+
+  if (typeof rawBadge === 'object' && rawBadge !== null) {
+    const label = rawBadge.label || rawBadge.text || releaseStatus
+    if (!label) {
+      return null
+    }
+
+    return {
+      ...rawBadge,
+      label: versionStatusLabel(label, releaseStatus),
+      color: rawBadge.color || defaultColor,
+      textColor: rawBadge.textColor || defaultTextColor
+    }
+  }
+
+  return { label: versionStatusLabel(releaseStatus, releaseStatus), color: defaultColor, textColor: defaultTextColor }
+}
+
+const versionOptions = computed(() => {
+  return (versions || [])
+    .filter(item => item && item.id)
+    .map(item => ({
+      label: item.label || item.id,
+      value: item.id,
+      badge: normalizeVersionBadge(item),
+      released: item.released !== false,
+      deprecated: item.deprecated === true || item.releaseStatus === 'deprecated' || item.status === 'deprecated',
+      releaseStatus: item.releaseStatus || item.status || (item.released === false ? 'draft' : 'released')
+    }))
+})
+
+const activeVersionOption = computed(() => {
+  return versionOptions.value.find(item => item.value === activeVersionId.value) || null
+})
+
+const version = computed({
+  get: () => activeVersionId.value,
+  set: (versionId) => onVersionChange(versionId)
+})
+
 const defaultBookId = computed(() => {
-  const sortedBooks = [...(allBooks || [])]
+  const sortedBooks = [...activeBooks.value]
     .filter(book => book && typeof book.id === 'string' && book.id.length > 0)
     .sort((a, b) => {
       const orderA = Number.isFinite(a.order) ? a.order : Number.MAX_SAFE_INTEGER
@@ -52,13 +143,97 @@ const currentBookId = computed(() => {
   return defaultBookId.value
 })
 
+const normalizeRoutePath = (path) => {
+  const normalized = String(path || '').trim()
+  if (normalized === '' || normalized === '/') {
+    return '/'
+  }
+
+  const sanitized = normalized.replace(/\/+$/, '')
+  return sanitized === '' ? '/' : sanitized
+}
+
+const getTopRoutes = () => {
+  return ($router.options.routes || []).slice(0, -2)
+}
+
+const routeHasSubpage = (route, subpageName) => {
+  return (route.children || []).some(child => child.path === subpageName)
+}
+
+const routeToSubpagePath = (route, subpageName) => {
+  return `${route.path.replace(/\/$/, '')}/${subpageName}/`
+}
+
+const getCurrentSubpageName = () => {
+  return String(subpage.value || '/overview').replace(/^\/+|\/+$/g, '') || 'overview'
+}
+
+const getFirstRoutePathByVersion = (versionId, preferredBook = null) => {
+  const routes = getTopRoutes()
+
+  for (const preferBook of [preferredBook, null]) {
+    for (const route of routes) {
+      if (route?.meta?.version !== versionId) continue
+      if (preferBook && (route.meta?.book ?? route.meta?.type) !== preferBook) continue
+      if (!routeHasSubpage(route, 'overview')) continue
+
+      const hasInternalLink = typeof route.meta?.link?.to === 'string' && route.meta.link.to.trim().length > 0
+      if (hasInternalLink) continue
+
+      return routeToSubpagePath(route, 'overview')
+    }
+  }
+
+  return '/'
+}
+
+const getEquivalentRoutePath = (versionId) => {
+  const routeMeta = $route.matched?.[0]?.meta || {}
+  const book = routeMeta.book ?? routeMeta.type ?? currentBookId.value
+  const pagePath = routeMeta.pagePath
+  const subpageName = getCurrentSubpageName()
+
+  if (book && typeof pagePath === 'string') {
+    const equivalentRoute = getTopRoutes().find(route => {
+      return route?.meta?.version === versionId &&
+        (route.meta?.book ?? route.meta?.type) === book &&
+        route.meta?.pagePath === pagePath &&
+        routeHasSubpage(route, subpageName)
+    })
+
+    if (equivalentRoute) {
+      return routeToSubpagePath(equivalentRoute, subpageName)
+    }
+  }
+
+  return getFirstRoutePathByVersion(versionId, book)
+}
+
+function onVersionChange (versionId) {
+  if (!versionId || versionId === activeVersionId.value) return
+
+  const targetVersion = (versions || []).find(item => item.id === versionId)
+  if (!targetVersion) return
+
+  if (typeof targetVersion.url === 'string' && targetVersion.url.trim().length > 0) {
+    openURL(targetVersion.url)
+    return
+  }
+
+  const targetPath = getEquivalentRoutePath(versionId)
+  if (normalizeRoutePath($route.path) !== normalizeRoutePath(targetPath)) {
+    $router.push(targetPath)
+  }
+}
+
 const searchTerm = (term) => {
   if (term.length > 1) {
     term = term.toLowerCase()
     const locale = $q.localStorage.getItem('setting.language')
     founds.value = []
 
-    for (const [index, group] of items.value.entries()) {
+    for (const group of items.value) {
       searchTermIterate(group, term, locale)
     }
   } else {
@@ -74,13 +249,14 @@ const searchTermIterate = (items, term, locale) => {
   } else if (typeof items === 'object') {
     const item = items
     const path = item.path
+    const tagPath = item.meta?.unversionedPath || path
     founds.value[path] = false
 
     // @ search in i18n/tags.hjson
     if (tags[locale] && Object.keys(tags[locale]).length > 0) {
-      founds.value[path] = tags[locale][path]?.indexOf(term) !== -1
+      founds.value[path] = tags[locale][tagPath]?.indexOf(term) !== -1
       if (founds.value[path] === false && locale !== 'en-US') {
-        founds.value[path] = tags['en-US'][path]?.indexOf(term) !== -1
+        founds.value[path] = tags['en-US'][tagPath]?.indexOf(term) !== -1
       }
     }
 
@@ -181,11 +357,13 @@ onBeforeUnmount(() => {
 })
 
 const buildMenuItems = () => {
-  const routes = ($router.options.routes || []).slice(0, -2) // Delete last 2 routes
+  const routes = getTopRoutes()
   const activeBook = currentBookId.value
+  const activeVersion = activeVersionId.value
 
   const filteredRoutes = routes.filter(route => {
     const routeBook = route?.meta?.book ?? route?.meta?.type
+    if (activeVersion && route?.meta?.version !== activeVersion) return false
     if (!activeBook) return true
     return routeBook === activeBook
   })
@@ -201,7 +379,7 @@ const buildMenuItems = () => {
     })
 
     // # Route
-    const basepath = route.path.split('/')[2]
+  const basepath = route.meta?.menuGroupPath || route.path.split('/')[2]
     const header = route.meta?.menu?.header
 
     if (header !== undefined && basepath !== nodeBasepath) {
@@ -227,7 +405,7 @@ const rebuildItems = () => {
 }
 
 rebuildItems()
-watch(currentBookId, rebuildItems)
+watch([currentBookId, activeVersionId], rebuildItems)
 </script>
 
 <template>
@@ -254,10 +432,44 @@ watch(currentBookId, rebuildItems)
       <div class="text-weight-medium">{{ branding.name || 'Docsector' }}</div>
       <div class="text-caption q-pt-xs">{{ t('system.documentation') }}</div>
       <q-select class="q-mr-md"
-        v-model="version" :options="versions"
+        v-model="version" :options="versionOptions"
+        emit-value map-options
         dense options-dense
         behavior="menu"
-      />
+      >
+        <template v-slot:selected>
+          <div v-if="activeVersionOption" class="version-select-option">
+            <span class="version-select-label">{{ activeVersionOption.label }}</span>
+            <q-badge
+              v-if="activeVersionOption.badge"
+              class="version-select-badge"
+              :color="activeVersionOption.badge.color || 'warning'"
+              :text-color="activeVersionOption.badge.textColor || 'dark'"
+              :outline="activeVersionOption.badge.outline === true"
+            >
+              {{ activeVersionOption.badge.label }}
+            </q-badge>
+          </div>
+        </template>
+        <template v-slot:option="scope">
+          <q-item v-bind="scope.itemProps">
+            <q-item-section>
+              <div class="version-select-option">
+                <span class="version-select-label">{{ scope.opt.label }}</span>
+                <q-badge
+                  v-if="scope.opt.badge"
+                  class="version-select-badge"
+                  :color="scope.opt.badge.color || 'warning'"
+                  :text-color="scope.opt.badge.textColor || 'dark'"
+                  :outline="scope.opt.badge.outline === true"
+                >
+                  {{ scope.opt.badge.label }}
+                </q-badge>
+              </div>
+            </q-item-section>
+          </q-item>
+        </template>
+      </q-select>
     </div>
   </div>
 
@@ -470,6 +682,23 @@ body.body--light
       width: 30px
       height: 3px
 
+.version-select-option
+  display: flex
+  align-items: center
+  gap: 6px
+  min-width: 0
+  max-width: 100%
+
+.version-select-label
+  overflow: hidden
+  text-overflow: ellipsis
+  white-space: nowrap
+
+.version-select-badge
+  flex: 0 0 auto
+  font-size: 10px
+  line-height: 1
+
 // Search
 label[for="search"]
   z-index: 2

package/src/components/DMenuItem.vue

@@ -53,6 +53,10 @@ const getMenuItemSubheader = (meta = {}) => {
 }
 
 const getPageStatusText = (status) => {
+  if (status === 'new') {
+    return t('menu.status.new._')
+  }
+
   if (status === 'draft') {
     return t('menu.status.draft._')
   } else {
@@ -61,6 +65,10 @@ const getPageStatusText = (status) => {
 }
 
 const getPageStatusTextColor = (status) => {
+  if (status === 'new') {
+    return null
+  }
+
   if (status === 'draft') {
     return 'dark'
   } else {
@@ -68,7 +76,15 @@ const getPageStatusTextColor = (status) => {
   }
 }
 
+const getPageStatusStyle = (status) => {
+  return status === 'new' ? { color: '#151515' } : null
+}
+
 const getPageStatusColor = (status) => {
+  if (status === 'new') {
+    return 'positive'
+  }
+
   if (status === 'draft') {
     return 'orange'
   } else {
@@ -76,7 +92,13 @@ const getPageStatusColor = (status) => {
   }
 }
 
-const getPageStatusTooltip = (status) => {
+const getPageStatusTooltip = (status, pageVersion) => {
+  if (status === 'new') {
+    return pageVersion
+      ? t('menu.status.new.tooltipVersion', { version: pageVersion })
+      : t('menu.status.new.tooltip')
+  }
+
   if (status === 'draft') {
     return t('menu.status.draft.tooltip')
   } else {
@@ -148,8 +170,9 @@ const onMenuItemClick = (event, path, currentSubpage) => {
       :text-color="getPageStatusTextColor(subitem.meta.status)"
       :color="getPageStatusColor(subitem.meta.status)"
       :label="getPageStatusText(subitem.meta.status)"
+      :style="getPageStatusStyle(subitem.meta.status)"
     />
-    <q-tooltip :hide-delay="3">{{ getPageStatusTooltip(subitem.meta.status) }}</q-tooltip>
+    <q-tooltip :hide-delay="3">{{ getPageStatusTooltip(subitem.meta.status, subitem.meta.pageVersion) }}</q-tooltip>
   </q-item-section>
 </q-item>
 

package/src/components/DPageBar.vue

@@ -37,6 +37,11 @@ const subpage = computed(() => {
 })
 
 const fileKey = computed(() => {
+  const sourcePathBase = route.matched?.[0]?.meta?.sourcePathBase
+  if (typeof sourcePathBase === 'string' && sourcePathBase.length > 0) {
+    return `${sourcePathBase}.${subpage.value}.${locale.value}.md`
+  }
+
   const base = store.state.page.base
   if (!base) return ''
   return `${base}.${subpage.value}.${locale.value}.md`
@@ -56,6 +61,11 @@ const formattedDate = computed(() => {
   }).format(date)
 })
 
+const pageVersion = computed(() => {
+  const value = route.meta?.pageVersion
+  return typeof value === 'string' ? value.trim() : ''
+})
+
 const rawMarkdown = computed(() => {
   const absolute = store.state.i18n.absolute
   if (!absolute) return ''
@@ -187,10 +197,14 @@ const copyPage = () => {
 
 <template>
 <div class="d-page-bar">
-  <span v-if="formattedDate" class="d-page-bar__date">
-    {{ t('page.lastUpdated') }}: <br class="d-page-bar__date-break"> {{ formattedDate }}
-  </span>
-  <span v-else class="d-page-bar__date"></span>
+  <div class="d-page-bar__meta">
+    <span v-if="formattedDate" class="d-page-bar__date">
+      {{ t('page.lastUpdated') }}: <br class="d-page-bar__date-break"> {{ formattedDate }}
+    </span>
+    <span v-if="pageVersion" class="d-page-bar__new-in">
+      {{ t('page.newVersion') }}: {{ pageVersion }}
+    </span>
+  </div>
 
   <q-btn-dropdown
     class="d-page-bar__actions"
@@ -338,6 +352,18 @@ const copyPage = () => {
     font-size: 0.8rem
     opacity: 0.6
 
+  &__meta
+    display: flex
+    flex-direction: column
+    min-height: 1.5rem
+
+  &__new-in
+    font-size: 0.8rem
+    opacity: 0.6
+    margin-top: 8px
+    padding-top: 8px
+    border-top: 1px solid rgba(0, 0, 0, 0.12)
+
   &__date-break
     display: none
 
@@ -345,9 +371,13 @@ const copyPage = () => {
     font-size: 0.75rem
 
 body.body--dark
-  .d-page-bar__date
+  .d-page-bar__date,
+  .d-page-bar__new-in
     color: rgba(255, 255, 255, 0.7)
 
+  .d-page-bar__new-in
+    border-top-color: rgba(255, 255, 255, 0.18)
+
 @media (max-width: 376px)
   .d-page-bar__date-break
     display: block