@docsector/docsector-reader 0.5.9 → 0.7.0

package/README.md

@@ -22,6 +22,9 @@ Transform Markdown content into beautiful, navigable documentation sites — wit
 
 - 📝 **Markdown Rendering** — Write docs in Markdown, rendered with syntax highlighting (Prism.js)
 - 🧩 **Mermaid Diagrams** — Native support for fenced ` ```mermaid ` blocks, with automatic dark/light theme switching
+- 🚨 **GitHub-Style Alerts** — Native support for `[!NOTE]`, `[!TIP]`, `[!IMPORTANT]`, `[!WARNING]`, and `[!CAUTION]`
+- 🤖 **AI-Friendly** — "Copy page" button copies raw Markdown for LLMs; "View as Markdown" opens any page as plain text via `.md` URL suffix
+- 📅 **Last Updated Date** — Automatic per-page "last updated" date from git commit history, locale-formatted
 - 🌍 **Internationalization (i18n)** — Multi-language support with HJSON locale files and per-page translations
 - 🌗 **Dark/Light Mode** — Automatic theme switching with Quasar Dark Plugin
 - 🔗 **Anchor Navigation** — Right-side Table of Contents tree with scroll tracking
@@ -284,6 +287,20 @@ src/pages/manual/my-section/my-page.overview.en-US.md
 src/pages/manual/my-section/my-page.overview.pt-BR.md
 ```
 
+### GitHub-Style Alert Example
+
+```markdown
+> [!CAUTION]
+> NOTICE OF BREAKING CHANGE.
+>
+> As of 7.0.0, multiple breaking changes were introduced into the library.
+>
+> Please review the migration guide before updating.
+```
+
+Supported alert types: `NOTE`, `TIP`, `IMPORTANT`, `WARNING`, `CAUTION`.
+Regular blockquotes without `[!TYPE]` continue to work normally.
+
 ---
 
 ## 🖥️ CLI Commands

package/bin/docsector.js

@@ -23,7 +23,7 @@ const packageRoot = resolve(__dirname, '..')
 const args = process.argv.slice(2)
 const command = args[0]
 
-const VERSION = '0.5.9'
+const VERSION = '0.6.0'
 
 const HELP = `
   Docsector Reader v${VERSION}
@@ -71,7 +71,7 @@ function getTemplatePackageJson (name) {
       serve: 'docsector serve'
     },
     dependencies: {
-      '@docsector/docsector-reader': '^0.5.9',
+      '@docsector/docsector-reader': '^0.6.0',
       '@quasar/extras': '^1.16.12',
       'quasar': '^2.16.6',
       'vue': '^3.5.13',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docsector/docsector-reader",
-  "version": "0.5.9",
+  "version": "0.7.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/DPageBar.vue

@@ -0,0 +1,135 @@
+<script setup>
+import { ref, computed } from 'vue'
+import { useRoute } from 'vue-router'
+import { useStore } from 'vuex'
+import { useI18n } from 'vue-i18n'
+import { copyToClipboard, openURL } from 'quasar'
+
+import gitDates from 'virtual:docsector-git-dates'
+
+const store = useStore()
+const route = useRoute()
+const { t, locale } = useI18n()
+
+const copied = ref(false)
+
+const subpage = computed(() => {
+  const rel = store.state.page.relative
+  return rel ? rel.replace(/^\//, '') : 'overview'
+})
+
+const fileKey = computed(() => {
+  const base = store.state.page.base
+  if (!base) return ''
+  return `${base}.${subpage.value}.${locale.value}.md`
+})
+
+const formattedDate = computed(() => {
+  const iso = gitDates[fileKey.value]
+  if (!iso) return ''
+
+  const date = new Date(iso)
+  if (isNaN(date.getTime())) return ''
+
+  return new Intl.DateTimeFormat(locale.value, {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric'
+  }).format(date)
+})
+
+const rawMarkdown = computed(() => {
+  const absolute = store.state.i18n.absolute
+  if (!absolute) return ''
+
+  const source = t(`_.${absolute}.source`)
+  if (!source) return ''
+
+  return String(source)
+    .replace(/&#123;/g, '{')
+    .replace(/&#125;/g, '}')
+    .replace(/\{'([^']+)'\}/g, '$1')
+    .replace(/&amp;/g, '&')
+})
+
+const markdownURL = computed(() => {
+  return `${route.path}.md`
+})
+
+const copyPage = () => {
+  if (!rawMarkdown.value) return
+
+  copyToClipboard(rawMarkdown.value).then(() => {
+    copied.value = true
+    setTimeout(() => { copied.value = false }, 2000)
+  })
+}
+
+const viewAsMarkdown = () => {
+  openURL(markdownURL.value)
+}
+</script>
+
+<template>
+<div class="d-page-bar">
+  <span v-if="formattedDate" class="d-page-bar__date">
+    {{ t('page.lastUpdated') }}: {{ formattedDate }}
+  </span>
+  <span v-else class="d-page-bar__date"></span>
+
+  <q-btn-dropdown
+    class="d-page-bar__actions"
+    split
+    no-caps
+    :icon="copied ? 'check' : 'content_copy'"
+    :label="copied ? t('page.copied') : t('page.copyPage')"
+    :color="copied ? 'positive' : 'grey-7'"
+    size="sm"
+    @click="copyPage"
+  >
+    <q-list style="min-width: 240px">
+      <q-item clickable v-close-popup @click="copyPage" class="q-py-sm">
+        <q-item-section avatar>
+          <q-icon name="content_copy" />
+        </q-item-section>
+        <q-item-section>
+          <q-item-label>{{ t('page.copyPage') }}</q-item-label>
+          <q-item-label caption>{{ t('page.copyPageCaption') }}</q-item-label>
+        </q-item-section>
+      </q-item>
+
+      <q-item clickable v-close-popup @click="viewAsMarkdown" class="q-py-sm">
+        <q-item-section avatar>
+          <q-icon name="description" />
+        </q-item-section>
+        <q-item-section>
+          <q-item-label>{{ t('page.viewAsMarkdown') }}</q-item-label>
+          <q-item-label caption>{{ t('page.viewAsMarkdownCaption') }}</q-item-label>
+        </q-item-section>
+        <q-item-section side>
+          <q-icon name="open_in_new" size="xs" />
+        </q-item-section>
+      </q-item>
+    </q-list>
+  </q-btn-dropdown>
+</div>
+</template>
+
+<style lang="sass">
+.d-page-bar
+  display: flex
+  justify-content: space-between
+  align-items: center
+  margin-bottom: 4px
+
+  &__date
+    font-size: 0.8rem
+    opacity: 0.6
+
+  &__actions
+    font-size: 0.75rem
+
+body.body--dark
+  .d-page-bar__date
+    color: rgba(255, 255, 255, 0.7)
+</style>

package/src/components/DPageBlockquote.vue

@@ -1,5 +1,6 @@
 <script setup>
 // defineProps is a compiler macro in <script setup>, no import needed
+import { computed } from 'vue'
 
 const props = defineProps({
   message: {
@@ -7,13 +8,54 @@ const props = defineProps({
     default: ''
   }
 })
+
+const alertTypes = {
+  note: {
+    label: 'Note',
+    icon: 'info'
+  },
+  tip: {
+    label: 'Tip',
+    icon: 'lightbulb'
+  },
+  important: {
+    label: 'Important',
+    icon: 'priority_high'
+  },
+  warning: {
+    label: 'Warning',
+    icon: 'warning'
+  },
+  caution: {
+    label: 'Caution',
+    icon: 'error'
+  }
+}
+
+const normalizedMessage = computed(() => {
+  const value = String(props.message || '').toLowerCase()
+  return alertTypes[value] ? value : ''
+})
+
+const alertLabel = computed(() => {
+  return normalizedMessage.value
+    ? alertTypes[normalizedMessage.value].label
+    : ''
+})
+
+const alertIcon = computed(() => {
+  return normalizedMessage.value
+    ? alertTypes[normalizedMessage.value].icon
+    : ''
+})
 </script>
 
 <template>
-<blockquote>
-  <strong v-if="message === 'important'">Important</strong>
-  <strong v-else-if="message === 'warning'">Warning</strong>
-  <strong v-else-if="message === 'note'">Note</strong>
+<blockquote :class="['d-page-blockquote', normalizedMessage ? `d-page-blockquote--${normalizedMessage}` : null]">
+  <p v-if="alertLabel" class="d-page-blockquote__heading">
+    <q-icon :name="alertIcon" size="18px" />
+    <strong>{{ alertLabel }}</strong>
+  </p>
   <slot />
 </blockquote>
 </template>

package/src/components/DPageSection.vue

@@ -12,6 +12,7 @@ import DH5 from './DH5.vue'
 import DH6 from './DH6.vue'
 import DPageSourceCode from './DPageSourceCode.vue'
 import DMermaidDiagram from './DMermaidDiagram.vue'
+import DPageBlockquote from './DPageBlockquote.vue'
 
 const props = defineProps({
   id: {
@@ -23,6 +24,31 @@ const props = defineProps({
 const store = useStore()
 const { t } = useI18n()
 
+const ALERT_MESSAGE_TYPES = new Set([
+  'note',
+  'tip',
+  'important',
+  'warning',
+  'caution'
+])
+
+const parseAlertMarker = (rawContent = '') => {
+  const match = String(rawContent).trim().match(/^\[!\s*([A-Za-z]+)\s*\]\s*(.*)$/s)
+  if (!match) {
+    return null
+  }
+
+  const type = match[1].toLowerCase()
+  if (!ALERT_MESSAGE_TYPES.has(type)) {
+    return null
+  }
+
+  return {
+    type,
+    content: (match[2] || '').trim()
+  }
+}
+
 const tokenized = computed(() => {
   const absolute = store.state.i18n.absolute
 
@@ -43,14 +69,126 @@ const tokenized = computed(() => {
     allowedAttributes: ['filename']
   })
 
-  const parsed = Markdown.parse(normalizedSource)
+  // Use a plain inline renderer to avoid markdown-it-attrs edge cases
+  // when rendering isolated inline fragments.
+  const MarkdownInline = new MarkdownIt()
+
+  const markdownEnv = {}
+
+  const parsed = Markdown.parse(normalizedSource, markdownEnv)
 
   // @ map
   const tokens = []
   let level = 0
   let tag = ''
   const children = []
+
+  const blockquote = {
+    depth: 0,
+    content: '',
+    alertType: '',
+    firstInline: true
+  }
+
+  const resetBlockquote = () => {
+    blockquote.content = ''
+    blockquote.alertType = ''
+    blockquote.firstInline = true
+  }
+
+  const flushBlockquote = () => {
+    const content = blockquote.content
+      .replace(/<p>\s*<\/p>/g, '')
+      .trim()
+
+    tokens.push({
+      tag: 'blockquote',
+      content,
+      alertType: blockquote.alertType
+    })
+
+    resetBlockquote()
+  }
+
+  const appendBlockquoteTag = (element, open) => {
+    if (!element.tag || element.tag === 'blockquote') {
+      return
+    }
+
+    blockquote.content += open
+      ? `<${element.tag}>`
+      : `</${element.tag}>`
+  }
+
   parsed.forEach((element) => {
+    if (element.type === 'blockquote_open') {
+      if (blockquote.depth === 0) {
+        resetBlockquote()
+      }
+
+      blockquote.depth++
+      return
+    }
+
+    if (element.type === 'blockquote_close' && blockquote.depth > 0) {
+      blockquote.depth--
+
+      if (blockquote.depth === 0) {
+        flushBlockquote()
+      }
+
+      return
+    }
+
+    if (blockquote.depth > 0) {
+      if (element.type === 'inline') {
+        const rawInline = element.content
+
+        if (blockquote.firstInline) {
+          blockquote.firstInline = false
+
+          const alert = parseAlertMarker(rawInline)
+          if (alert !== null) {
+            blockquote.alertType = alert.type
+
+            if (alert.content !== '') {
+              blockquote.content += MarkdownInline.renderInline(alert.content, markdownEnv)
+            }
+
+            return
+          }
+        }
+
+        blockquote.content += MarkdownInline.renderInline(rawInline, markdownEnv)
+        return
+      }
+
+      if (element.type === 'fence') {
+        const info = String(element.info || '').split(' ')
+        const language = info[0] || ''
+        const escaped = String(element.content)
+          .replace(/&/g, '&amp;')
+          .replace(/</g, '&lt;')
+          .replace(/>/g, '&gt;')
+
+        const languageClass = language ? ` class="language-${language}"` : ''
+        blockquote.content += `<pre><code${languageClass}>${escaped}</code></pre>`
+        return
+      }
+
+      if (element.type.endsWith('_open')) {
+        appendBlockquoteTag(element, true)
+        return
+      }
+
+      if (element.type.endsWith('_close')) {
+        appendBlockquoteTag(element, false)
+        return
+      }
+
+      return
+    }
+
     switch (element.type) {
       case 'bullet_list_open':
       case 'ordered_list_open':
@@ -60,7 +198,7 @@ const tokenized = computed(() => {
 
     // Render
     if (element.type === 'inline') {
-      element.content = Markdown.renderInline(element.content)
+      element.content = MarkdownInline.renderInline(element.content, markdownEnv)
     }
 
     if (level === 0) {
@@ -236,6 +374,13 @@ const tokenized = computed(() => {
       v-html="token.content"
     ></p>
 
+    <d-page-blockquote
+      v-else-if="token.tag === 'blockquote'"
+      :message="token.alertType"
+    >
+      <div v-html="token.content"></div>
+    </d-page-blockquote>
+
     <d-page-source-code
       v-else-if="token.tag === 'code'"
       :index="id + index"

package/src/components/DSubpage.vue

@@ -3,6 +3,7 @@ import { computed } from 'vue'
 import { useRoute } from 'vue-router'
 // components
 import DPage from "./DPage.vue";
+import DPageBar from "./DPageBar.vue";
 import DH1 from "./DH1.vue";
 import DPageSection from "./DPageSection.vue";
 
@@ -23,6 +24,8 @@ const id = computed(() => {
 <template>
 <d-page>
   <header>
+    <d-page-bar />
+    <hr />
     <d-h1 :id="0" />
   </header>
 

package/src/css/app.sass

@@ -81,7 +81,48 @@ body.body--dark
         color: #3da6f3
         border-bottom: 1px dotted #1b4a6c
 
-    &.overview
+    &.overview,
+    &.showcase
+      blockquote
+        border-left-color: #3d444d
+        background-color: #161b22 !important
+
+      .d-page-blockquote
+        &--note
+          border-left-color: #58a6ff
+          background-color: rgba(56, 139, 253, 0.18) !important
+
+          .d-page-blockquote__heading
+            color: #58a6ff
+
+        &--tip
+          border-left-color: #3fb950
+          background-color: rgba(63, 185, 80, 0.18) !important
+
+          .d-page-blockquote__heading
+            color: #3fb950
+
+        &--important
+          border-left-color: #bc8cff
+          background-color: rgba(188, 140, 255, 0.2) !important
+
+          .d-page-blockquote__heading
+            color: #bc8cff
+
+        &--warning
+          border-left-color: #d29922
+          background-color: rgba(210, 153, 34, 0.2) !important
+
+          .d-page-blockquote__heading
+            color: #d29922
+
+        &--caution
+          border-left-color: #ff7b72
+          background-color: rgba(248, 81, 73, 0.2) !important
+
+          .d-page-blockquote__heading
+            color: #ff7b72
+
       table
         border-color: #3f3f3f
         box-shadow: 1px 2px 2px 1px rgba(0, 0, 0, 0.45)
@@ -154,14 +195,68 @@ body.body--dark
       padding: 0 2px
       transition: all 0.3s ease
 
-  &.overview
+  &.overview,
+  &.showcase
     blockquote
-      margin: 2.5em 0
-      padding: 0
+      margin: 1.5em 0
+      padding: 0.85em 1.1em
+      border-left: 4px solid #d0d7de
+      border-radius: 0 6px 6px 0
+      background-color: #f6f8fa !important
       p
-        padding: 0.5em 1em
-        background-color: #fafafa !important
-        letter-spacing: 0.5px
+        margin: 0.65em 0
+        letter-spacing: normal
+
+      p:first-child
+        margin-top: 0
+
+      p:last-child
+        margin-bottom: 0
+
+    .d-page-blockquote
+      &__heading
+        display: flex
+        align-items: center
+        gap: 0.35rem
+        margin: 0 0 0.6rem 0
+
+        strong
+          font-weight: 700
+
+      &--note
+        border-left-color: #0969da
+        background-color: rgba(9, 105, 218, 0.12) !important
+
+        .d-page-blockquote__heading
+          color: #0969da
+
+      &--tip
+        border-left-color: #1a7f37
+        background-color: rgba(26, 127, 55, 0.12) !important
+
+        .d-page-blockquote__heading
+          color: #1a7f37
+
+      &--important
+        border-left-color: #8250df
+        background-color: rgba(130, 80, 223, 0.12) !important
+
+        .d-page-blockquote__heading
+          color: #8250df
+
+      &--warning
+        border-left-color: #9a6700
+        background-color: rgba(154, 103, 0, 0.14) !important
+
+        .d-page-blockquote__heading
+          color: #9a6700
+
+      &--caution
+        border-left-color: #cf222e
+        background-color: rgba(207, 34, 46, 0.14) !important
+
+        .d-page-blockquote__heading
+          color: #cf222e
     img
       border: 0
       max-width: 100%

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

@@ -30,7 +30,13 @@
     nav: {
       prev: 'Previous page',
       next: 'Next page'
-    }
+    },
+    lastUpdated: 'Last updated',
+    copyPage: 'Copy page',
+    copyPageCaption: 'Copy page as Markdown for LLMs',
+    copied: 'Copied!',
+    viewAsMarkdown: 'View as Markdown',
+    viewAsMarkdownCaption: 'View this page as plain text'
   },
 
   menu: {

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

@@ -29,7 +29,13 @@
     nav: {
       prev: 'Página anterior',
       next: 'Próxima página'
-    }
+    },
+    lastUpdated: 'Última atualização',
+    copyPage: 'Copiar página',
+    copyPageCaption: 'Copiar página como Markdown para LLMs',
+    copied: 'Copiado!',
+    viewAsMarkdown: 'Ver como Markdown',
+    viewAsMarkdownCaption: 'Ver esta página como texto simples'
   },
 
   menu: {

package/src/i18n/tags.hjson

@@ -4,6 +4,7 @@
     "/guide/configuration": "config branding logo name version language links github docsector.config.js",
     "/guide/pages-and-routing": "pages routes routing registry menu navigation path type status subpages",
     "/guide/i18n-and-markdown": "i18n internationalization language locale hjson markdown content translation",
+    "/guide/alerts-and-blockquotes": "alerts blockquotes github note tip important warning caution markdown quote admonition",
     "/guide/theming": "theme dark light mode color css sass variables styling",
     "/guide/deployment": "deploy hosting production build static nginx netlify vercel github pages",
     "/guide/plugins": "plugins extensions addons customize",
@@ -25,6 +26,7 @@
     "/guide/configuration": "config branding logo nome versão idioma links github docsector.config.js",
     "/guide/pages-and-routing": "páginas rotas roteamento registro menu navegação caminho tipo status subpages",
     "/guide/i18n-and-markdown": "i18n internacionalização idioma locale hjson markdown conteúdo tradução",
+    "/guide/alerts-and-blockquotes": "alertas blockquotes github note tip important warning caution markdown citação admonition",
     "/guide/theming": "tema escuro claro modo cor css sass variáveis estilização",
     "/guide/deployment": "deploy hospedagem produção build estático nginx netlify vercel github pages",
     "/guide/plugins": "plugins extensões complementos customizar",

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

@@ -0,0 +1,65 @@
+# Alerts and Blockquotes
+
+Docsector supports GitHub-style alert blockquotes and regular blockquotes.
+
+## GitHub alert syntax
+
+Use this syntax in Markdown:
+
+```markdown
+> [!CAUTION]
+> NOTICE OF BREAKING CHANGE.
+>
+> As of 7.0.0, multiple breaking changes were introduced.
+```
+
+Supported alert types:
+
+- `NOTE`
+- `TIP`
+- `IMPORTANT`
+- `WARNING`
+- `CAUTION`
+
+## Alert examples
+
+### Note
+
+> [!NOTE]
+> This is extra context that helps readers understand the current section.
+
+### Tip
+
+> [!TIP]
+> You can keep your examples short and focused to improve readability.
+
+### Important
+
+> [!IMPORTANT]
+> This migration changes defaults and must be reviewed before deployment.
+
+### Warning
+
+> [!WARNING]
+> This action may interrupt running workers in production.
+
+### Caution
+
+> [!CAUTION]
+> Back up your environment before applying this update.
+>
+> See `docs/migration.md` for the complete checklist.
+
+## Regular blockquote
+
+If no `[!TYPE]` marker is present, blockquotes render as regular notes:
+
+> This is a regular blockquote.
+>
+> It still supports **bold text**, [links](https://github.com/docsector/docsector-reader), and `inline code`.
+
+## Notes
+
+- Alert markers are case-insensitive (`[!note]` also works).
+- Unknown markers are treated as regular blockquotes.
+- Alert and regular blockquotes both work in light and dark mode.

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

@@ -0,0 +1,65 @@
+# Alertas e Blockquotes
+
+O Docsector suporta blockquotes no estilo de alertas do GitHub e blockquotes comuns.
+
+## Sintaxe de alerta do GitHub
+
+Use esta sintaxe no Markdown:
+
+```markdown
+> [!CAUTION]
+> AVISO DE MUDANCA QUEBRANDO COMPATIBILIDADE.
+>
+> A partir da versao 7.0.0, varias breaking changes foram introduzidas.
+```
+
+Tipos de alerta suportados:
+
+- `NOTE`
+- `TIP`
+- `IMPORTANT`
+- `WARNING`
+- `CAUTION`
+
+## Exemplos de alerta
+
+### Note
+
+> [!NOTE]
+> Este e um contexto adicional que ajuda o leitor a entender a secao atual.
+
+### Tip
+
+> [!TIP]
+> Voce pode manter os exemplos curtos e focados para melhorar a legibilidade.
+
+### Important
+
+> [!IMPORTANT]
+> Esta migracao altera defaults e deve ser revisada antes do deploy.
+
+### Warning
+
+> [!WARNING]
+> Esta acao pode interromper workers em execucao em producao.
+
+### Caution
+
+> [!CAUTION]
+> Faça backup do ambiente antes de aplicar esta atualizacao.
+>
+> Veja `docs/migration.md` para o checklist completo.
+
+## Blockquote comum
+
+Se nao houver marcador `[!TYPE]`, o blockquote sera renderizado como blockquote comum:
+
+> Este e um blockquote comum.
+>
+> Ele continua suportando **texto em negrito**, [links](https://github.com/docsector/docsector-reader) e `inline code`.
+
+## Observacoes
+
+- Marcadores de alerta sao case-insensitive (`[!note]` tambem funciona).
+- Marcadores desconhecidos sao tratados como blockquote comum.
+- Alertas e blockquotes comuns funcionam no modo claro e escuro.

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

@@ -61,6 +61,20 @@ You can render Mermaid diagrams using fenced blocks with the `mermaid` language
 ```
 ```mermaid
 flowchart TD
+
+### GitHub Alerts
+
+Docsector also supports GitHub-style alert blockquotes:
+
+```markdown
+> [!IMPORTANT]
+> The original repository was archived.
+>
+> Continue development in the maintained repository.
+```
+
+Supported types are `NOTE`, `TIP`, `IMPORTANT`, `WARNING`, and `CAUTION`.
+Regular blockquotes (without `[!TYPE]`) continue to work as normal.
   A[Start] --> B[End]
 ```
 ```

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

@@ -65,6 +65,20 @@ flowchart TD
 ```
 ```
 
+### Alertas do GitHub
+
+O Docsector tambem suporta blockquotes de alerta no estilo do GitHub:
+
+```markdown
+> [!IMPORTANT]
+> O repositorio original foi arquivado.
+>
+> Continue o desenvolvimento no repositorio mantido.
+```
+
+Os tipos suportados sao `NOTE`, `TIP`, `IMPORTANT`, `WARNING` e `CAUTION`.
+Blockquotes comuns (sem `[!TYPE]`) continuam funcionando normalmente.
+
 ### Atributos Customizados
 
 O plugin `markdown-it-attrs` permite atributos customizados usando sintaxe `:attr;`:

package/src/pages/index.js

@@ -114,6 +114,28 @@ export default {
     }
   },
 
+  '/alerts-and-blockquotes': {
+    config: {
+      icon: 'notification_important',
+      status: 'done',
+      meta: {
+        description: {
+          'en-US': 'Alerts & Blockquotes — Documentation of Docsector Reader',
+          'pt-BR': 'Alertas & Blockquotes — Documentacao do Docsector Reader'
+        }
+      },
+      type: 'guide',
+      menu: {},
+      subpages: {
+        showcase: false
+      }
+    },
+    data: {
+      'en-US': { title: 'Alerts & Blockquotes' },
+      'pt-BR': { title: 'Alertas & Blockquotes' }
+    }
+  },
+
   '/theming': {
     config: {
       icon: 'palette',

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

@@ -1,12 +1,15 @@
 ## Overview
 
-`DPageBlockquote` renders **styled blockquotes** with semantic categorization. It supports three message types: important, warning, and note — each with a distinct visual label.
+`DPageBlockquote` renders **styled blockquotes** with semantic categorization. It now powers both:
+
+- GitHub-style alert blockquotes from Markdown (`> [!TYPE]`)
+- Regular blockquotes (`> ...`) without an alert marker
 
 ## Props
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `message` | `String` | `''` | Type of blockquote: `'important'`, `'warning'`, or `'note'` |
+| `message` | `String` | `''` | Type of alert: `'note'`, `'tip'`, `'important'`, `'warning'`, or `'caution'` |
 
 ## Slot
 
@@ -16,29 +19,48 @@ The default slot receives the blockquote content.
 
 | Type | Label | Purpose |
 |------|-------|---------|
+| `note` | **Note** | Additional context and references |
+| `tip` | **Tip** | Practical recommendation or best practice |
 | `important` | **Important** | Critical information the reader must know |
 | `warning` | **Warning** | Potential pitfalls or breaking changes |
-| `note` | **Note** | Additional context or tips |
+| `caution` | **Caution** | High-risk action that deserves extra care |
 | (empty) | *(none)* | Generic blockquote with no label |
 
 ## Usage
 
-DPageBlockquote is not currently auto-rendered by DPageSection from Markdown blockquotes. To use it, you would include it directly in a custom component:
+GitHub alert syntax in Markdown:
+
+```markdown
+> [!WARNING]
+> This operation may interrupt workers.
+```
+
+Regular blockquote syntax in Markdown:
+
+```markdown
+> This is a regular blockquote.
+```
+
+You can also use the component directly:
 
 ```html
-<d-page-blockquote message="important">
-  <p>This is critically important information.</p>
+<d-page-blockquote message="note">
+  <p>This is additional context.</p>
+</d-page-blockquote>
+
+<d-page-blockquote message="tip">
+  <p>This is a practical recommendation.</p>
 </d-page-blockquote>
 
 <d-page-blockquote message="warning">
   <p>Be careful with this operation!</p>
 </d-page-blockquote>
 
-<d-page-blockquote message="note">
-  <p>This is an optional tip for advanced users.</p>
+<d-page-blockquote message="caution">
+  <p>This is a high-risk warning.</p>
 </d-page-blockquote>
 ```
 
 ## Styling
 
-The component renders a standard `<blockquote>` element. The `<strong>` label is conditionally shown based on the `message` prop. Customize the appearance in your global `app.sass` or by targeting `blockquote` in your CSS.
+The component renders a standard `<blockquote>` element with alert-specific classes when a `message` is provided. Appearance is controlled in global `app.sass`, including dark/light mode variants for each alert type.

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

@@ -1,12 +1,15 @@
 ## Visão Geral
 
-`DPageBlockquote` renderiza **blockquotes estilizados** com categorização semântica. Suporta três tipos de mensagem: important, warning e note — cada um com um label visual distinto.
+`DPageBlockquote` renderiza **blockquotes estilizados** com categorização semântica. Agora ele atende tanto:
+
+- Alertas no estilo GitHub vindos do Markdown (`> [!TYPE]`)
+- Blockquotes comuns (`> ...`) sem marcador de alerta
 
 ## Props
 
 | Prop | Tipo | Padrão | Descrição |
 |------|------|--------|-----------|
-| `message` | `String` | `''` | Tipo de blockquote: `'important'`, `'warning'` ou `'note'` |
+| `message` | `String` | `''` | Tipo de alerta: `'note'`, `'tip'`, `'important'`, `'warning'` ou `'caution'` |
 
 ## Slot
 
@@ -16,29 +19,48 @@ O slot padrão recebe o conteúdo do blockquote.
 
 | Tipo | Label | Propósito |
 |------|-------|-----------|
+| `note` | **Note** | Contexto adicional e referências |
+| `tip` | **Tip** | Recomendação prática ou boa prática |
 | `important` | **Important** | Informação crítica que o leitor precisa saber |
 | `warning` | **Warning** | Armadilhas potenciais ou breaking changes |
-| `note` | **Note** | Contexto adicional ou dicas |
+| `caution` | **Caution** | Ação de alto risco que exige cuidado extra |
 | (vazio) | *(nenhum)* | Blockquote genérico sem label |
 
 ## Uso
 
-DPageBlockquote não é atualmente auto-renderizado pelo DPageSection a partir de blockquotes Markdown. Para usá-lo, inclua-o diretamente em um componente customizado:
+Sintaxe de alerta GitHub no Markdown:
+
+```markdown
+> [!WARNING]
+> Esta operação pode interromper workers.
+```
+
+Sintaxe de blockquote comum no Markdown:
+
+```markdown
+> Este é um blockquote comum.
+```
+
+Você também pode usar o componente diretamente:
 
 ```html
-<d-page-blockquote message="important">
-  <p>Esta é uma informação criticamente importante.</p>
+<d-page-blockquote message="note">
+  <p>Este é um contexto adicional.</p>
+</d-page-blockquote>
+
+<d-page-blockquote message="tip">
+  <p>Esta é uma recomendação prática.</p>
 </d-page-blockquote>
 
 <d-page-blockquote message="warning">
   <p>Tenha cuidado com esta operação!</p>
 </d-page-blockquote>
 
-<d-page-blockquote message="note">
-  <p>Esta é uma dica opcional para usuários avançados.</p>
+<d-page-blockquote message="caution">
+  <p>Este é um aviso de alto risco.</p>
 </d-page-blockquote>
 ```
 
 ## Estilização
 
-O componente renderiza um elemento `<blockquote>` padrão. O label `<strong>` é exibido condicionalmente baseado na prop `message`. Customize a aparência no seu `app.sass` global ou direcionando `blockquote` no seu CSS.
+O componente renderiza um elemento `<blockquote>` padrão com classes específicas quando `message` é informado. A aparência é controlada no `app.sass` global, incluindo variações para modo claro/escuro por tipo de alerta.

package/src/pages/manual/components/d-page-blockquote.showcase.en-US.md

@@ -1,27 +1,34 @@
 ## Showcase
 
-Here are the three blockquote types rendered:
+Examples using GitHub alert syntax:
 
-## Important
+## Note
 
-Used for critical information:
+> [!NOTE]
+> You can provide additional context and references in this block.
 
-> **Important**: This setting cannot be reverted once applied. Make sure you have a backup before proceeding.
+## Tip
 
-## Warning
+> [!TIP]
+> Keep examples short and focused so readers can execute them quickly.
 
-Used for potential issues:
+## Important
 
-> **Warning**: This API is deprecated and will be removed in the next major version. Migrate to the new endpoint as soon as possible.
+> [!IMPORTANT]
+> This migration changes defaults and should be validated before deploy.
 
-## Note
+## Warning
+
+> [!WARNING]
+> This action can interrupt running workers.
 
-Used for tips and additional context:
+## Caution
 
-> **Note**: You can override the default configuration by creating a `docsector.config.js` file in your project root. This is optional — sensible defaults are provided.
+> [!CAUTION]
+> Back up your environment before changing low-level server settings.
 
 ## Generic
 
-A blockquote without a message type:
+Regular blockquote without alert marker:
 
-> This is a standard blockquote with no special label or styling. It renders as a plain HTML blockquote element.
+> This is a standard blockquote with no alert marker.

package/src/pages/manual/components/d-page-blockquote.showcase.pt-BR.md

@@ -1,27 +1,34 @@
 ## Demonstração
 
-Aqui estão os três tipos de blockquote renderizados:
+Exemplos usando sintaxe de alerta do GitHub:
 
-## Important
+## Note
 
-Usado para informações críticas:
+> [!NOTE]
+> Voce pode adicionar contexto adicional e referencias neste bloco.
 
-> **Important**: Esta configuração não pode ser revertida uma vez aplicada. Certifique-se de ter um backup antes de prosseguir.
+## Tip
 
-## Warning
+> [!TIP]
+> Mantenha exemplos curtos e focados para facilitar a execucao.
 
-Usado para problemas potenciais:
+## Important
 
-> **Warning**: Esta API está depreciada e será removida na próxima versão major. Migre para o novo endpoint o mais rápido possível.
+> [!IMPORTANT]
+> Esta migracao altera defaults e deve ser validada antes do deploy.
 
-## Note
+## Warning
+
+> [!WARNING]
+> Esta acao pode interromper workers em execucao.
 
-Usado para dicas e contexto adicional:
+## Caution
 
-> **Note**: Você pode sobrescrever a configuração padrão criando um arquivo `docsector.config.js` na raiz do seu projeto. Isso é opcional — valores padrão sensatos são fornecidos.
+> [!CAUTION]
+> Faça backup do ambiente antes de alterar configuracoes de baixo nivel do servidor.
 
 ## Genérico
 
-Um blockquote sem tipo de mensagem:
+Blockquote comum sem marcador de alerta:
 
-> Este é um blockquote padrão sem label ou estilização especial. Ele renderiza como um elemento blockquote HTML simples.
+> Este e um blockquote padrao sem marcador de alerta.

package/src/quasar.factory.js

@@ -23,7 +23,8 @@
  * @param {Function} [options.extendViteConf] - Additional Vite config extension
  */
 
-import { readFileSync, existsSync, rmSync, mkdirSync, writeFileSync } from 'fs'
+import { readFileSync, existsSync, rmSync, mkdirSync, writeFileSync, readdirSync } from 'fs'
+import { execSync } from 'child_process'
 import { createHash } from 'crypto'
 import { resolve } from 'path'
 import { pathToFileURL } from 'url'
@@ -231,6 +232,193 @@ function createPrerenderMetaPlugin (projectRoot) {
   }
 }
 
+/**
+ * Create a Vite plugin that collects git last-commit dates for all Markdown
+ * files under src/pages/ and exposes them as a virtual module.
+ *
+ * Consuming components can `import gitDates from 'virtual:docsector-git-dates'`
+ * to get an object mapping relative page keys to ISO date strings.
+ *
+ * Keys use the pattern: `<type>/<path>.<subpage>.<locale>.md`
+ * e.g. `manual/Bootgly/about/what.overview.en-US.md`
+ */
+function createGitDatesPlugin (projectRoot) {
+  const virtualId = 'virtual:docsector-git-dates'
+  const resolvedId = '\0' + virtualId
+  let dates = {}
+
+  function collectDates () {
+    dates = {}
+    const pagesDir = resolve(projectRoot, 'src', 'pages')
+    if (!existsSync(pagesDir)) return
+
+    const walkDir = (dir) => {
+      const entries = readdirSync(dir, { withFileTypes: true })
+      for (const entry of entries) {
+        const fullPath = resolve(dir, entry.name)
+        if (entry.isDirectory()) {
+          walkDir(fullPath)
+        } else if (entry.name.endsWith('.md')) {
+          try {
+            const date = execSync(
+              `git log -1 --format=%cI -- "${fullPath}"`,
+              { cwd: projectRoot, encoding: 'utf-8', stdio: ['pipe', 'pipe', 'pipe'] }
+            ).trim()
+            if (date) {
+              // Key relative to src/pages/, e.g. "manual/Bootgly/about/what.overview.en-US.md"
+              const relKey = fullPath.slice(pagesDir.length + 1)
+              dates[relKey] = date
+            }
+          } catch {
+            // git not available or file untracked — skip
+          }
+        }
+      }
+    }
+
+    walkDir(pagesDir)
+  }
+
+  return {
+    name: 'docsector-git-dates',
+    buildStart () {
+      collectDates()
+    },
+    resolveId (id) {
+      if (id === virtualId) return resolvedId
+    },
+    load (id) {
+      if (id === resolvedId) {
+        return `export default ${JSON.stringify(dates)}`
+      }
+    }
+  }
+}
+
+/**
+ * Create a Vite plugin that serves raw Markdown content for `.md` suffixed URLs.
+ *
+ * In **dev mode**, intercepts requests like `/manual/Bootgly/about/what/overview.md`
+ * and serves the corresponding `src/pages/manual/Bootgly/about/what.overview.<lang>.md`
+ * file as `text/plain; charset=utf-8`.
+ *
+ * In **production build** (`closeBundle`), generates static `.md` files in `dist/spa/`
+ * for each page/subpage so that the `.md` URLs resolve to actual files on any static host.
+ *
+ * The language served is determined by the `?lang=` query parameter, falling back to the
+ * `defaultLanguage` from `docsector.config.js`.
+ */
+function createMarkdownEndpointPlugin (projectRoot) {
+  const pagesDir = resolve(projectRoot, 'src', 'pages')
+
+  function resolveMarkdownFile (urlPath, lang) {
+    // URL: /manual/Bootgly/about/what/overview.md
+    // Strip leading slash and trailing .md
+    const clean = urlPath.replace(/^\//, '').replace(/\.md$/, '')
+    // Split into segments: ['manual', 'Bootgly', 'about', 'what', 'overview']
+    const segments = clean.split('/')
+    if (segments.length < 2) return null
+
+    // Last segment is the subpage (overview, showcase, vs)
+    const subpage = segments.pop()
+    // Remaining segments form the type + path: 'manual/Bootgly/about/what'
+    const basePath = segments.join('/')
+
+    // File: src/pages/manual/Bootgly/about/what.overview.en-US.md
+    const filePath = resolve(pagesDir, `${basePath}.${subpage}.${lang}.md`)
+    if (existsSync(filePath)) return filePath
+
+    return null
+  }
+
+  return {
+    name: 'docsector-markdown-endpoint',
+
+    configureServer (server) {
+      // Read default language from config
+      let defaultLang = 'en-US'
+      try {
+        const configPath = resolve(projectRoot, 'docsector.config.js')
+        if (existsSync(configPath)) {
+          // Dynamic import in dev — we read it synchronously via a simple approach
+          const configContent = readFileSync(configPath, 'utf-8')
+          const match = configContent.match(/defaultLanguage\s*:\s*['"]([^'"]+)['"]/)
+          if (match) defaultLang = match[1]
+        }
+      } catch { /* use fallback */ }
+
+      server.middlewares.use((req, res, next) => {
+        const url = new URL(req.url, 'http://localhost')
+        if (!url.pathname.endsWith('.md')) return next()
+
+        const lang = url.searchParams.get('lang') || defaultLang
+        const file = resolveMarkdownFile(url.pathname, lang)
+        if (!file) return next()
+
+        const content = readFileSync(file, 'utf-8')
+        res.setHeader('Content-Type', 'text/plain; charset=utf-8')
+        res.end(content)
+      })
+    },
+
+    apply: 'serve'
+  }
+}
+
+/**
+ * Create a Vite plugin that generates static `.md` files at build time.
+ *
+ * Runs in the `closeBundle` hook alongside the prerender-meta plugin.
+ * For each page/subpage, copies the raw Markdown source into
+ * `dist/spa/<routePath>.md` so that `.md` URLs work on static hosts.
+ */
+function createMarkdownBuildPlugin (projectRoot) {
+  return {
+    name: 'docsector-markdown-build',
+    apply: 'build',
+    async closeBundle () {
+      const distDir = resolve(projectRoot, 'dist', 'spa')
+      if (!existsSync(distDir)) return
+
+      const pagesDir = resolve(projectRoot, 'src', 'pages')
+      const configUrl = pathToFileURL(resolve(projectRoot, 'docsector.config.js')).href
+      const pagesUrl = pathToFileURL(resolve(projectRoot, 'src', 'pages', 'index.js')).href
+
+      const { default: config } = await import(configUrl)
+      const { default: pages } = await import(pagesUrl)
+
+      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
+        if (page.config.status === 'empty') continue
+
+        const type = page.config.type ?? 'manual'
+
+        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 srcFile = resolve(pagesDir, `${type}${pagePath}.${subpage}.${defaultLang}.md`)
+          if (!existsSync(srcFile)) continue
+
+          const routePath = `${type}${pagePath}/${subpage}`
+          const destFile = resolve(distDir, `${routePath}.md`)
+          const destDir = resolve(destFile, '..')
+
+          mkdirSync(destDir, { recursive: true })
+          writeFileSync(destFile, readFileSync(srcFile, 'utf-8'))
+          count++
+        }
+      }
+
+      console.log(`\x1b[36m[docsector]\x1b[0m Generated ${count} static .md files`)
+    }
+  }
+}
+
 /**
  * Create a complete Quasar configuration for a docsector-reader consumer project.
  *
@@ -301,6 +489,9 @@ export function createQuasarConfig (options = {}) {
 
       vitePlugins: [
         createHjsonPlugin(),
+        createGitDatesPlugin(projectRoot),
+        createMarkdownEndpointPlugin(projectRoot),
+        createMarkdownBuildPlugin(projectRoot),
         createPagesWatchPlugin(projectRoot),
         createPrerenderMetaPlugin(projectRoot),
         ...vitePlugins