@docsector/docsector-reader 2.1.0 → 2.3.0

package/public/material-icons/icons/yarn.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="#0288d1" d="M27.575 23.967a9.9 9.9 0 0 0-3.751 1.726 22.6 22.6 0 0 1-5.537 2.504 1.55 1.55 0 0 1-.931.52 59 59 0 0 1-6.11.548c-1.102.008-1.777-.282-1.965-.735a1.49 1.49 0 0 1 .82-1.965 3.6 3.6 0 0 1-.486-.359c-.163-.162-.334-.487-.385-.367-.213.52-.324 1.794-.897 2.366-.786.795-2.273.53-3.153.069-.965-.513.069-1.718.069-1.718a.69.69 0 0 1-.94-.324 4.6 4.6 0 0 1-.632-2.794 5.2 5.2 0 0 1 1.674-2.76 8.84 8.84 0 0 1 .624-4.17 9.9 9.9 0 0 1 3-3.469S7.136 11.015 7.82 9.177c.444-1.196.623-1.187.769-1.239a3.44 3.44 0 0 0 1.375-.811 4.99 4.99 0 0 1 4.178-1.607s1.094-3.357 2.12-2.7a17.4 17.4 0 0 1 1.452 2.735s1.213-.71 1.35-.445a10.74 10.74 0 0 1 .495 5.81 13.3 13.3 0 0 1-2.46 5.127c-.129.214 1.47.889 2.477 3.683.932 2.554.103 4.699.248 4.938.026.043.034.06.034.06s1.068.085 3.213-1.24a8.05 8.05 0 0 1 4.05-1.52 1.026 1.026 0 0 1 .453 2Z"/></svg>

package/public/material-icons/icons/zeabur.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="#cfd8dc" d="m14 20 4 4-4 4H2v-8h8l10-8-6-4 6-4h10v8Z"/><path fill="#651fff" d="M20 4H2v8h18Z"/><path fill="#ff3d00" d="M30 20H14v8h16Z"/></svg>

package/public/material-icons/icons/zeabur_light.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="#263238" d="m14 20 4 4-4 4H2v-8h8l10-8-6-4 6-4h10v8Z"/><path fill="#651fff" d="M20 4H2v8h18Z"/><path fill="#ff3d00" d="M30 20H14v8h16Z"/></svg>

package/public/material-icons/icons/zig.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="#f9a825" d="M2 8h6v4H2zm8 0h12v4H10zm0 12h12v4H10zm14 0h2v4h-2zM8 20l-3 4H2V12h4v8zm14-8h-6l-6 8h6z"/><path fill="#f9a825" d="M16 20h-6l-6 8m12-16h6l6-8m2 4v16h-4V12h-2l3-4z"/></svg>

package/public/material-icons/icons/zip.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#afb42b" d="M14 17h-2v-2h-2v-2h2v2h2m0-6h-2v2h2v2h-2v-2h-2V9h2V7h-2V5h2v2h2m5-4H5c-1.11 0-2 .89-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2"/></svg>

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/components/DPageSection.vue

@@ -16,7 +16,7 @@ import DPageBlockquote from './DPageBlockquote.vue'
 import DQuickLinks from './DQuickLinks.vue'
 import { pageValueI18nPath } from '../i18n/path'
 
-const props = defineProps({
+defineProps({
   id: {
     type: Number,
     required: true
@@ -116,6 +116,120 @@ const extractQuickLinksBlocks = (source = '') => {
   }
 }
 
+const parseFenceAttributes = (raw = '') => {
+  const parsed = {}
+  const pattern = /([\w-]+)\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s;]+))/g
+
+  let match = pattern.exec(String(raw))
+  while (match !== null) {
+    const key = match[1]
+    const value = match[2] || match[3] || match[4] || ''
+    parsed[key] = value
+    match = pattern.exec(String(raw))
+  }
+
+  return parsed
+}
+
+const parseTokenAttributes = (element) => {
+  const parsed = {}
+
+  ;(element.attrs || []).forEach(([key, value]) => {
+    parsed[key] = value || ''
+  })
+
+  return parsed
+}
+
+const parseFenceLanguage = (raw = '') => {
+  const cleaned = String(raw)
+    .replace(/:[^;]*;/g, ' ')
+    .replace(/[\w-]+\s*=\s*(?:"[^"]*"|'[^']*'|[^\s;]+)/g, ' ')
+    .replace(/[;:]/g, ' ')
+    .trim()
+
+  return cleaned.split(/\s+/)[0] || ''
+}
+
+const parseFenceMeta = (element) => {
+  const rawInfo = String(element.info || '')
+  const meta = {
+    ...parseFenceAttributes(rawInfo),
+    ...parseTokenAttributes(element)
+  }
+
+  return {
+    ...meta,
+    language: parseFenceLanguage(rawInfo) || meta.language || 'html'
+  }
+}
+
+const parseBreadcrumb = (raw = '') => {
+  const value = String(raw).trim()
+
+  if (!value) {
+    return []
+  }
+
+  const separator = value.includes('>') ? '>' : '/'
+
+  return value
+    .split(separator)
+    .map((segment) => segment.trim())
+    .filter(Boolean)
+}
+
+const createSourceCodeTab = (element, meta) => ({
+  label: meta.tab || meta.filename || meta.language || 'Code',
+  language: meta.language || 'html',
+  text: element.content,
+  filename: meta.filename || '',
+  breadcrumbs: parseBreadcrumb(meta.breadcrumb)
+})
+
+const pushSourceCodeToken = (tokens, element) => {
+  const meta = parseFenceMeta(element)
+
+  if (meta.language === 'mermaid') {
+    tokens.push({
+      tag: 'mermaid',
+      content: element.content
+    })
+    return
+  }
+
+  const tab = createSourceCodeTab(element, meta)
+
+  if (meta.group) {
+    const previous = tokens[tokens.length - 1]
+
+    if (previous?.tag === 'code' && previous.group === meta.group && Array.isArray(previous.tabs)) {
+      previous.tabs.push(tab)
+      return
+    }
+
+    tokens.push({
+      tag: 'code',
+      group: meta.group,
+      content: tab.text,
+      info: tab.language,
+      filename: tab.filename,
+      breadcrumbs: tab.breadcrumbs,
+      tabs: [tab]
+    })
+    return
+  }
+
+  tokens.push({
+    tag: 'code',
+    content: tab.text,
+    info: tab.language,
+    filename: tab.filename,
+    breadcrumbs: tab.breadcrumbs,
+    tabs: []
+  })
+}
+
 const tokenized = computed(() => {
   const absolute = store.state.i18n.absolute
 
@@ -138,7 +252,7 @@ const tokenized = computed(() => {
   Markdown.use(attrs, {
     leftDelimiter: ':',
     rightDelimiter: ';',
-    allowedAttributes: ['filename']
+    allowedAttributes: ['filename', 'group', 'tab', 'breadcrumb']
   })
 
   // Keep inline rendering aligned with block parsing so raw HTML inline
@@ -238,8 +352,7 @@ const tokenized = computed(() => {
       }
 
       if (element.type === 'fence') {
-        const info = String(element.info || '').split(' ')
-        const language = info[0] || ''
+        const language = parseFenceLanguage(element.info)
         const escaped = String(element.content)
           .replace(/&/g, '&')
           .replace(/</g, '&lt;')
@@ -308,25 +421,7 @@ const tokenized = computed(() => {
 
           break
         case 'fence': {
-          const info = element.info.split(' ')
-          const language = info[0]
-
-          if (language === 'mermaid') {
-            tokens.push({
-              tag: 'mermaid',
-              content: element.content
-            })
-            break
-          }
-
-          const filename = info[1] ? info[1].replace('filename=', '').replace(/"/g, '') : ''
-
-          tokens.push({
-            tag: element.tag,
-            content: element.content,
-            info: language,
-            filename: filename
-          })
+          pushSourceCodeToken(tokens, element)
           break
         }
         case 'html_block':
@@ -489,6 +584,8 @@ const tokenized = computed(() => {
       :text="token.content"
       :language="token.info"
       :filename="token.filename"
+      :breadcrumbs="token.breadcrumbs"
+      :tabs="token.tabs"
     />
 
     <d-mermaid-diagram