@docsector/docsector-reader 2.1.0 → 2.3.0

package/src/components/DPageSourceCode.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed, onMounted } from 'vue'
+import { ref, computed, watch } from 'vue'
 import { useQuasar } from 'quasar'
 import { useStore } from 'vuex'
 import Prism from 'prismjs'
@@ -9,6 +9,7 @@ import 'prismjs/components/prism-markup-templating' // dependency for prism-php
 import 'prismjs/components/prism-php'
 // Bash
 import 'prismjs/components/prism-bash'
+import { looksLikeFileName, resolveFileIconUrl } from '../composables/useFileIcon'
 
 const props = defineProps({
   index: {
@@ -21,11 +22,19 @@ const props = defineProps({
   },
   text: {
     type: String,
-    required: true
+    default: ''
   },
   filename: {
     type: String,
     default: ''
+  },
+  breadcrumbs: {
+    type: Array,
+    default: () => []
+  },
+  tabs: {
+    type: Array,
+    default: () => []
   }
 })
 
@@ -36,22 +45,72 @@ const copyBtnDisabled = ref(false)
 const copyBtnColor = ref(null)
 const copyBtnIcon = ref('content_copy')
 const codeRef = ref(null)
+const activeTab = ref(0)
 
 const href = computed(() => `${store.state.page.absolute}#${anchor.value}`)
 const coloring = computed(() => $q.dark.isActive ? 'dark' : 'white')
 const anchor = computed(() => printToLetter(props.index + 1))
+
+const fileIconUrl = (label) => {
+  if (!looksLikeFileName(label)) {
+    return ''
+  }
+
+  return resolveFileIconUrl(label, {
+    preferLight: !$q.dark.isActive
+  })
+}
+
+const fallbackCode = computed(() => ({
+  label: props.filename || props.language || 'Code',
+  language: props.language || 'html',
+  text: props.text || '',
+  filename: props.filename || '',
+  breadcrumbs: props.breadcrumbs || [],
+  iconUrl: fileIconUrl(props.filename || props.language || 'Code')
+}))
+const codeTabs = computed(() => {
+  if (!props.tabs.length) {
+    return [fallbackCode.value]
+  }
+
+  return props.tabs.map((tab, index) => ({
+    label: tab.label || tab.filename || tab.language || `Code ${index + 1}`,
+    language: tab.language || props.language || 'html',
+    text: tab.text || '',
+    filename: tab.filename || '',
+    breadcrumbs: Array.isArray(tab.breadcrumbs) ? tab.breadcrumbs : [],
+    iconUrl: fileIconUrl(tab.label || tab.filename || tab.language || `Code ${index + 1}`)
+  }))
+})
+const hasTabs = computed(() => codeTabs.value.length > 1)
+const activeCode = computed(() => codeTabs.value[activeTab.value] || codeTabs.value[0] || fallbackCode.value)
+const activeText = computed(() => activeCode.value.text || '')
+const activeLanguage = computed(() => activeCode.value.language || 'html')
+const activeFilename = computed(() => hasTabs.value ? '' : activeCode.value.filename || '')
+const activeBreadcrumbs = computed(() => activeCode.value.breadcrumbs || [])
+const activeBreadcrumbItems = computed(() => {
+  return activeBreadcrumbs.value.map((segment, index) => ({
+    label: segment,
+    icon: index === activeBreadcrumbs.value.length - 1 ? fileIconUrl(segment) : ''
+  }))
+})
+const activeBreadcrumbTitle = computed(() => activeBreadcrumbs.value.join(' > '))
+const hasBreadcrumbs = computed(() => activeBreadcrumbs.value.length > 0)
 const lines = computed(() => {
-  const splited = props.text.split(/\r\n|\n/)
+  const splited = activeText.value.split(/\r\n|\n/)
   return splited.length - 1
 })
+const showHeader = computed(() => hasTabs.value || hasBreadcrumbs.value || (lines.value && lines.value > 1))
+const codeLanguageClass = computed(() => `language-${activeLanguage.value}`)
 const highlighted = computed(() => {
-  if (!props.text) {
+  if (!activeText.value) {
     return ''
   }
 
-  const text = props.text.replace(/&#123;/g, '{').replace(/&#125;/g, '}').replace(/&amp;/g, '&')
+  const text = activeText.value.replace(/&#123;/g, '{').replace(/&#125;/g, '}').replace(/&amp;/g, '&')
 
-  const lang = props.language || 'markup'
+  const lang = activeLanguage.value || 'markup'
   const grammar = Prism.languages[lang]
 
   if (!grammar) {
@@ -65,6 +124,10 @@ const highlighted = computed(() => {
   return Prism.highlight(text, grammar, lang)
 })
 
+watch(() => props.tabs, () => {
+  activeTab.value = 0
+}, { deep: true })
+
 function copyCode() {
   const code = codeRef.value
 
@@ -83,7 +146,7 @@ function copyCode() {
       copyBtnColor.value = 'positive'
       copyBtnIcon.value = 'done'
 
-      setInterval(() => {
+      setTimeout(() => {
         copyBtnDisabled.value = false
         copyBtnColor.value = null
         copyBtnIcon.value = 'content_copy'
@@ -112,33 +175,90 @@ function printToLetter(number) {
 
 <template>
 <div class="source-code">
-  <div class="info" v-if="lines && lines > 1">
-    <div class="filename">{{ filename }}</div>
-    <div class="language">{{ language }}</div>
-    <div class="copy">
-      <q-btn
-        flat square dense size="xs"
-        :disable="copyBtnDisabled"
-        :color="copyBtnColor"
-        :icon="copyBtnIcon"
-        @click="copyCode"
-        aria-label="Copy code"
-      />
+  <div class="source-code-frame" :class="[coloring, { 'with-tabs': hasTabs, 'with-breadcrumbs': hasBreadcrumbs }]">
+    <div class="source-code-tabs-row" v-if="hasTabs">
+      <q-tabs
+        v-model="activeTab"
+        dense
+        align="left"
+        class="source-code-tabs"
+      >
+        <q-tab
+          v-for="(tab, index) in codeTabs"
+          :key="`${tab.label}-${index}`"
+          :name="index"
+          no-caps
+        >
+          <span class="source-code-tab-label">
+            <img
+              v-if="tab.iconUrl"
+              class="source-code-file-icon"
+              :src="tab.iconUrl"
+              alt=""
+              aria-hidden="true"
+              loading="lazy"
+            />
+            <span>{{ tab.label }}</span>
+          </span>
+        </q-tab>
+      </q-tabs>
     </div>
-  </div>
 
-  <div class="code" :class="coloring">
-    <div class="lines" v-if="lines && lines > 1">
-      <template v-for="(line, index) in lines" :key="index">
-        <a class="line" :href="href+line">
-          <i class="fa fa-link" aria-hidden="true" data-hidden="true"></i>
-          <span :id="`${anchor}${line}`">{{ line }}</span>
-        </a>
-      </template>
+    <div class="source-code-meta-row" v-if="showHeader">
+      <q-breadcrumbs
+        v-if="hasBreadcrumbs"
+        class="source-code-breadcrumbs"
+        separator=">"
+        :title="activeBreadcrumbTitle"
+      >
+        <q-breadcrumbs-el
+          v-for="(item, index) in activeBreadcrumbItems"
+          :key="`${item.label}-${index}`"
+          :class="{ 'is-file': item.icon }"
+        >
+          <span class="source-code-breadcrumb-label">
+            <img
+              v-if="item.icon"
+              class="source-code-file-icon"
+              :src="item.icon"
+              alt=""
+              aria-hidden="true"
+              loading="lazy"
+            />
+            <span>{{ item.label }}</span>
+          </span>
+        </q-breadcrumbs-el>
+      </q-breadcrumbs>
+
+      <div class="info">
+        <div class="filename" v-if="activeFilename">{{ activeFilename }}</div>
+        <div class="language">{{ activeLanguage }}</div>
+        <div class="copy">
+          <q-btn
+            flat square dense size="xs"
+            :disable="copyBtnDisabled"
+            :color="copyBtnColor"
+            :icon="copyBtnIcon"
+            @click="copyCode"
+            aria-label="Copy code"
+          />
+        </div>
+      </div>
+    </div>
+
+    <div class="code" :class="coloring">
+      <div class="lines" v-if="lines && lines > 1">
+        <template v-for="(line, index) in lines" :key="index">
+          <a class="line" :href="href+line">
+            <i class="fa fa-link" aria-hidden="true" data-hidden="true"></i>
+            <span :id="`${anchor}${line}`">{{ line }}</span>
+          </a>
+        </template>
+      </div>
+      <pre>
+        <code :class="codeLanguageClass" v-html="highlighted" ref="codeRef"></code>
+      </pre>
     </div>
-    <pre>
-      <code :class="`language-${language}`" v-html="highlighted" ref="code"></code>
-    </pre>
   </div>
 </div>
 </template>
@@ -149,38 +269,237 @@ function printToLetter(number) {
   max-width: calc(100vw - 40px)
   margin: 14px 0 16px
 
+  .source-code-frame
+    border: 1px solid #ddd
+    border-bottom-color: #ccc
+    border-radius: 3px
+
+    &.white
+      background-color: white
+
+      .source-code-meta-row,
+      .info .filename,
+      .info .language,
+      .info .copy
+        background-color: #fff
+
+      .source-code-meta-row
+        box-shadow: 0 2px 4px rgb(0 0 0 / 8%)
+
+      .source-code-tabs-row
+        background-color: #f6f6f6
+
+      .source-code-tabs
+        background-color: transparent
+
+        .q-tab
+          background-color: #e9e9e9
+          color: #555
+
+        .q-tab.q-tab--active
+          background-color: white
+          color: #222
+
+    &.dark
+      background-color: #000
+
+      .source-code-meta-row,
+      .info .filename,
+      .info .language,
+      .info .copy
+        background-color: #000
+
+      .source-code-meta-row
+        box-shadow: 0 3px 10px rgb(255 255 255 / 24%)
+
+      .source-code-tabs-row
+        background-color: #242424
+
+      .source-code-tabs
+        background-color: transparent
+
+        .q-tab
+          background-color: #333
+          border-right-color: #444
+          color: #d6d6d6
+
+        .q-tab.q-tab--active
+          background-color: #000
+          color: white
+
+  .source-code-tabs-row
+    min-width: 0
+    overflow-x: auto
+    width: 100%
+
+  .source-code-meta-row
+    align-items: center
+    display: flex
+    min-height: 26px
+    min-width: 0
+    position: sticky
+    top: 0
+    width: 100%
+    z-index: 2
+
+  .source-code-tabs
+    color: gray
+    flex: 0 1 auto
+    min-width: 0
+    overflow-x: auto
+    width: fit-content
+
+    .q-tab
+      border-right: 1px solid #ddd
+      min-height: 22px
+      padding: 0 10px
+
+      &:last-child
+        border-right: 0
+
+    .q-tab__content
+      min-width: 0
+
+    .source-code-tab-label
+      align-items: center
+      display: inline-flex
+      gap: 6px
+      min-width: 0
+
+      span
+        overflow: hidden
+        text-overflow: ellipsis
+        white-space: nowrap
+
+    .q-tab__label
+      font-size: 13px
+      overflow: hidden
+      text-overflow: ellipsis
+      white-space: nowrap
+
+    .q-tab__indicator
+      display: none
+
+  .source-code-breadcrumbs
+    align-items: center
+    color: gray
+    flex: 1 1 auto
+    flex-wrap: nowrap
+    font-size: 13px
+    height: 26px
+    line-height: 16px
+    margin: 0
+    min-width: 0
+    overflow: hidden
+    padding: 0 6px
+
+    > .flex
+      align-items: center
+      display: flex
+      flex-wrap: nowrap
+      height: 100%
+      margin: 0
+      min-width: 0
+      overflow: hidden
+      width: 100%
+
+      > *
+        margin-left: 0 !important
+        margin-top: 0 !important
+
+    .q-breadcrumbs__el,
+    .q-breadcrumbs__separator
+      color: gray
+      overflow: hidden
+      text-overflow: ellipsis
+      white-space: nowrap
+
+    .q-breadcrumbs__el
+      align-items: center
+      display: inline-flex
+      flex: 0 1 auto
+      max-width: 150px
+      min-width: 0
+
+      &.is-file
+        flex: 1 1 auto
+        max-width: 220px
+
+    .q-breadcrumbs__separator
+      align-items: center
+      align-self: center
+      display: inline-flex
+      flex: 0 0 auto
+      font-size: 17px
+      height: 16px
+      justify-content: center
+      line-height: 16px
+      margin: 0 4px 0 4px
+      margin-left: 4px !important
+      overflow: visible
+      padding: 0
+
+    .source-code-breadcrumb-label
+      align-items: center
+      display: inline-flex
+      gap: 6px
+      line-height: 16px
+      max-width: 100%
+      min-width: 0
+
+      span
+        display: inline-block
+        overflow: hidden
+        text-overflow: ellipsis
+        white-space: nowrap
+
+  .source-code-file-icon
+    flex: 0 0 auto
+    height: 16px
+    object-fit: contain
+    width: 16px
+
   .info
     display: flex
-    flex-direction: row-reverse
-    height: 22px
+    height: 26px
+    margin-left: auto
+    flex-shrink: 0
 
     .copy
-      border-color: #ddd
-      border-style: solid
-      border-width: 1px 0 0 1px
       color: gray
       padding: 0
       user-select: none
 
       button
-        padding: 4px 4px 3px
+        padding: 5px 8px 4px
         position: relative
-        top: -1px
+
+    .filename
+      font-size: 13px
+      color: gray
+      max-width: 220px
+      overflow: hidden
+      padding: 3px 6px 0
+      text-overflow: ellipsis
+      user-select: none
+      white-space: nowrap
+
     .language
       font-size: 13px
-      border-color: #ddd
-      border-style: solid
-      border-width: 1px 1px 0 1px
       color: gray
-      padding: 0 5px 0
+      padding: 3px 5px 0
       user-select: none
 
+  @media (max-width: 600px)
+    .source-code-tabs,
+    .source-code-breadcrumbs
+      max-width: 100%
+
   .code
     font-family: "Fira Code Nerd Font", "Consolas" !important
     position: relative
-    border: 1px solid #ddd
-    border-bottom: 1px solid #ccc
-    border-radius: 3px
+    border: 0
+    border-radius: 0
     margin: 0
     padding: 0
 

package/src/composables/useFileIcon.js

@@ -0,0 +1,90 @@
+import materialIcons from '../icon-themes/material-icons.json'
+
+const BASE_URL = import.meta.env.BASE_URL || '/'
+
+const normalizeLookupValue = (value = '') => {
+  return String(value)
+    .trim()
+    .split(/[\\/]/)
+    .filter(Boolean)
+    .pop()
+    ?.replace(/^['"]|['"]$/g, '')
+    .toLowerCase() || ''
+}
+
+const extensionCandidates = (fileName) => {
+  const parts = fileName.split('.').filter(Boolean)
+
+  if (parts.length === 0) {
+    return []
+  }
+
+  if (parts.length === 1 && fileName.startsWith('.')) {
+    return [parts[0]]
+  }
+
+  return parts
+    .slice(1)
+    .map((_, index) => parts.slice(index + 1).join('.'))
+    .filter(Boolean)
+}
+
+const iconUrl = (fileName) => {
+  return `${BASE_URL.replace(/\/$/, '')}/material-icons/icons/${fileName}`
+}
+
+const resolveFromMaps = (fileName, maps) => {
+  const fromName = maps.fileNames?.[fileName]
+
+  if (fromName) {
+    return fromName
+  }
+
+  const fromFullExtension = maps.fileExtensions?.[fileName]
+
+  if (fromFullExtension) {
+    return fromFullExtension
+  }
+
+  for (const extension of extensionCandidates(fileName)) {
+    const fromExtension = maps.fileExtensions?.[extension]
+
+    if (fromExtension) {
+      return fromExtension
+    }
+  }
+
+  return ''
+}
+
+export const looksLikeFileName = (value = '') => {
+  const fileName = normalizeLookupValue(value)
+
+  if (!fileName) {
+    return false
+  }
+
+  return /\.[^.\s]+$/.test(fileName) || Boolean(materialIcons.fileNames?.[fileName])
+}
+
+export const resolveFileIconUrl = (value = '', options = {}) => {
+  const fileName = normalizeLookupValue(value)
+
+  if (!fileName) {
+    return ''
+  }
+
+  const preferLight = Boolean(options.preferLight)
+  const fallback = options.fallback !== false
+  const primaryMaps = preferLight ? materialIcons.light : materialIcons
+  const secondaryMaps = preferLight ? materialIcons : materialIcons.light
+  const resolved = resolveFromMaps(fileName, primaryMaps || {}) || resolveFromMaps(fileName, secondaryMaps || {})
+
+  if (resolved) {
+    return iconUrl(resolved)
+  }
+
+  return fallback && looksLikeFileName(fileName)
+    ? iconUrl(materialIcons.defaultIcon || 'file.svg')
+    : ''
+}

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'
       }
     },