@docsector/docsector-reader 2.1.0 → 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
@@ -903,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.1.0'
+const VERSION = '2.2.0'
 
 const HELP = `
   Docsector Reader v${VERSION}
@@ -315,6 +315,7 @@ const TEMPLATE_I18N_HJSON = `\
       prev: 'Previous page'
       next: 'Next page'
     }
+    newVersion: 'New in'
   }
 
   // @ Menu
@@ -336,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'
@@ -406,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)
@@ -419,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docsector/docsector-reader",
-  "version": "2.1.0",
+  "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

@@ -44,6 +44,23 @@ const activeBooks = computed(() => {
 
 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'
@@ -59,11 +76,11 @@ const normalizeVersionBadge = (item) => {
   const defaultTextColor = (deprecated || released) ? 'white' : 'dark'
 
   if (rawBadge === false || rawBadge === null) {
-    return { label: releaseStatus, color: defaultColor, textColor: defaultTextColor }
+    return { label: versionStatusLabel(releaseStatus, releaseStatus), color: defaultColor, textColor: defaultTextColor }
   }
 
   if (typeof rawBadge === 'string') {
-    return { label: rawBadge, color: defaultColor, textColor: defaultTextColor }
+    return { label: versionStatusLabel(rawBadge, releaseStatus), color: defaultColor, textColor: defaultTextColor }
   }
 
   if (typeof rawBadge === 'object' && rawBadge !== null) {
@@ -74,13 +91,13 @@ const normalizeVersionBadge = (item) => {
 
     return {
       ...rawBadge,
-      label,
+      label: versionStatusLabel(label, releaseStatus),
       color: rawBadge.color || defaultColor,
       textColor: rawBadge.textColor || defaultTextColor
     }
   }
 
-  return { label: releaseStatus, color: defaultColor, textColor: defaultTextColor }
+  return { label: versionStatusLabel(releaseStatus, releaseStatus), color: defaultColor, textColor: defaultTextColor }
 }
 
 const versionOptions = computed(() => {

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

@@ -61,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 ''
@@ -192,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"
@@ -343,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
 
@@ -350,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

package/src/components/DPageMeta.vue

@@ -54,7 +54,7 @@ const URL = computed(() => {
   return `${base}${path}.${locale.value}.md`
 })
 const color = computed(() => {
-  if (status.value === 'done') {
+  if (status.value === 'done' || status.value === 'new') {
     return 'white'
   } else if (status.value === 'draft') {
     return 'warning'
@@ -63,7 +63,7 @@ const color = computed(() => {
   }
 })
 const icon = computed(() => {
-  if (status.value === 'done') {
+  if (status.value === 'done' || status.value === 'new') {
     return 'edit'
   } else if (status.value === 'draft') {
     return 'border_color'
@@ -194,7 +194,7 @@ const getRouteTitle = (path) => {
     <div id="d-page-edit" class="col">
       <q-btn dense no-caps text-color="black" :color="color" @click="openURL(URL)" aria-label="Edit page on Github">
         <q-icon class="q-mr-xs" name="fab fa-github" size="20px" />
-        <span class="hm" v-if="status === 'done'">{{ $t('page.edit.github.edit') }}</span>
+        <span class="hm" v-if="status === 'done' || status === 'new'">{{ $t('page.edit.github.edit') }}</span>
         <span class="hm" v-else-if="status === 'draft'">{{ $t('page.edit.github.complete') }}</span>
         <span class="hm" v-else-if="status === 'empty'">{{ $t('page.edit.github.start') }}</span>
       </q-btn>

package/src/i18n/helpers.js

@@ -25,6 +25,7 @@ const engineDefaults = {
   'en-US': {
     page: {
       lastUpdated: 'Last updated',
+      newVersion: 'New in',
       copyPage: 'Copy page',
       copyPageCaption: 'Copy page as Markdown for LLMs',
       copied: 'Copied!',
@@ -44,11 +45,36 @@ const engineDefaults = {
       connectClaudeCodeCaption: 'Use this MCP in Claude Code',
       connectCodex: 'Connect to Codex',
       connectCodexCaption: 'Use this MCP in Codex'
+    },
+    menu: {
+      status: {
+        empty: {
+          _: 'empty',
+          tooltip: 'This page is empty!'
+        },
+        draft: {
+          _: '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'
+        }
+      }
     }
   },
   'pt-BR': {
     page: {
       lastUpdated: 'Última atualização',
+      newVersion: 'Novo em',
       copyPage: 'Copiar página',
       copyPageCaption: 'Copiar página como Markdown para LLMs',
       copied: 'Copiado!',
@@ -68,6 +94,30 @@ const engineDefaults = {
       connectClaudeCodeCaption: 'Use este MCP no Claude Code',
       connectCodex: 'Conectar ao Codex',
       connectCodexCaption: 'Use este MCP no Codex'
+    },
+    menu: {
+      status: {
+        empty: {
+          _: 'vazia',
+          tooltip: 'Esta página está vazia!'
+        },
+        draft: {
+          _: 'rascunho',
+          tooltip: 'Esta página está em construção.'
+        },
+        new: {
+          _: 'novo',
+          tooltip: 'Esta página é nova.',
+          tooltipVersion: 'Novo na {version}'
+        }
+      },
+      version: {
+        status: {
+          released: 'publicada',
+          draft: 'rascunho',
+          deprecated: 'obsoleta'
+        }
+      }
     }
   }
 }

package/src/i18n/languages/en-US.hjson

@@ -32,6 +32,7 @@
       next: 'Next page'
     },
     lastUpdated: 'Last updated',
+    newVersion: 'New in',
     copyPage: 'Copy page',
     copyPageCaption: 'Copy page as Markdown for LLMs',
     copied: 'Copied!',
@@ -60,6 +61,19 @@
       draft: {
         _: 'draft',
         tooltip: 'This page is under constrution.'
+      },
+      new: {
+        _: 'new',
+        tooltip: 'This page is new.',
+        tooltipVersion: 'New in {version}'
+      }
+    },
+
+    version: {
+      status: {
+        released: 'released',
+        draft: 'draft',
+        deprecated: 'deprecated'
       }
     },
 

package/src/i18n/languages/pt-BR.hjson

@@ -31,6 +31,7 @@
       next: 'Próxima página'
     },
     lastUpdated: 'Última atualização',
+    newVersion: 'Novo em',
     copyPage: 'Copiar página',
     copyPageCaption: 'Copiar página como Markdown para LLMs',
     copied: 'Copiado!',
@@ -59,6 +60,19 @@
       draft: {
         _: 'rascunho',
         tooltip: 'Esta página está em construção.'
+      },
+      new: {
+        _: 'novo',
+        tooltip: 'Esta página é nova.',
+        tooltipVersion: 'Novo na {version}'
+      }
+    },
+
+    version: {
+      status: {
+        released: 'publicada',
+        draft: 'rascunho',
+        deprecated: 'obsoleta'
       }
     },
 

package/src/pages/guide/pages-and-routing.overview.en-US.md

@@ -8,7 +8,8 @@ Documentation pages are defined in split registries such as `src/pages/guide.ind
 '/my-page': {
   config: {
     icon: 'description',
-    status: 'done',
+    status: 'new',
+    version: 'v2.1.0',
     book: 'guide',
     menu: {},
     subpages: { showcase: false }
@@ -23,7 +24,8 @@ Documentation pages are defined in split registries such as `src/pages/guide.ind
 ## Config Properties
 
 - **book** — Route prefix: `'guide'`, `'manual'`, or `'API'` (legacy `type` is still supported)
-- **status** — Page status: `'done'`, `'draft'`, or `'empty'`
+- **status** — Page status: `'done'`, `'draft'`, `'empty'`, or `'new'`; `new` is shown in green
+- **version** — Optional version where the page was introduced, shown under the last updated date as `New in: ...` (for example, `'v2.1.0'`)
 - **icon** — Material Design icon name shown in the sidebar
 - **menu** — Object controlling menu display (header, subheader, separator)
 - **subpages** — Enable additional tabs: `showcase`, `vs`

package/src/pages/guide/pages-and-routing.overview.pt-BR.md

@@ -8,7 +8,8 @@ As páginas de documentação são definidas em registros separados, como `src/p
 '/minha-pagina': {
   config: {
     icon: 'description',
-    status: 'done',
+    status: 'new',
+    version: 'v2.1.0',
     book: 'guide',
     menu: {},
     subpages: { showcase: false }
@@ -23,7 +24,8 @@ As páginas de documentação são definidas em registros separados, como `src/p
 ## Propriedades do Config
 
 - **book** — Prefixo da rota: `'guide'`, `'manual'` ou `'API'` (compatível com `type` legado)
-- **status** — Status da página: `'done'`, `'draft'` ou `'empty'`
+- **status** — Status da página: `'done'`, `'draft'`, `'empty'` ou `'new'`; `new` é exibido em verde
+- **version** — Versão opcional em que a página foi introduzida, exibida abaixo da data de última atualização como `Novo em: ...` (por exemplo, `'v2.1.0'`)
 - **icon** — Nome do ícone Material Design exibido no menu lateral
 - **menu** — Objeto controlando exibição do menu (header, subheader, separator)
 - **subpages** — Ativar abas adicionais: `showcase`, `vs`

package/src/pages/guide.index.js

@@ -30,6 +30,7 @@ export default {
     config: {
       icon: 'tune',
       status: 'done',
+      version: 'v2.1.0',
       meta: {
         description: {
           'en-US': 'Configuration — Documentation of Docsector Reader',
@@ -53,7 +54,8 @@ export default {
   '/pages-and-routing': {
     config: {
       icon: 'route',
-      status: 'done',
+      status: 'new',
+      version: 'v2.1.0',
       meta: {
         description: {
           'en-US': 'Pages & Routing — Documentation of Docsector Reader',

package/src/pages/manual/components/d-page-meta.overview.en-US.md

@@ -17,6 +17,7 @@ The button label changes based on page status:
 | Status | Label | Color |
 |--------|-------|-------|
 | `done` | "Edit this page" | White |
+| `new` | "Edit this page" | White |
 | `draft` | "Complete this page" | Warning (orange) |
 | `empty` | "Start this page" | Red |
 

package/src/pages/manual/components/d-page-meta.overview.pt-BR.md

@@ -17,6 +17,7 @@ O label do botão muda baseado no status da página:
 | Status | Label | Cor |
 |--------|-------|-----|
 | `done` | "Edite esta página" | Branco |
+| `new` | "Edite esta página" | Branco |
 | `draft` | "Complete esta página" | Warning (laranja) |
 | `empty` | "Comece esta página" | Vermelho |
 

package/src/pages/manual.index.js

@@ -183,7 +183,8 @@ export default {
   '/components/d-menu': {
     config: {
       icon: 'menu_open',
-      status: 'done',
+      status: 'new',
+      version: 'v2.1.0',
       meta: {
         description: {
           'en-US': 'DMenu — Documentation of Docsector Reader',

package/src/router/routes.js

@@ -98,6 +98,7 @@ for (const entry of pageEntries || []) {
   const status = typeof config.status === 'string'
     ? config.status
     : (typeof linkedConfig?.status === 'string' ? linkedConfig.status : 'done')
+  const pageVersion = config.version ?? config.pageVersion ?? config.since ?? null
 
   // @ Construct children
   const children = hasInternalLink
@@ -152,6 +153,7 @@ for (const entry of pageEntries || []) {
       ...config,
       icon,
       status,
+      pageVersion,
       menu,
       subpages,
       data: page.data,