@docsector/docsector-reader 0.5.8 → 0.6.0

package/README.md

@@ -22,6 +22,7 @@ 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]`
 - 🌍 **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 +285,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.8'
+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.8',
+      '@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.8",
+  "version": "0.6.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/DPage.vue

@@ -106,7 +106,7 @@ const isEditableTarget = (target) => {
 }
 
 const handleMainScrollKeys = (event) => {
-  const handledKeys = ['Home', 'End', 'PageUp', 'PageDown']
+  const handledKeys = ['Home', 'End', 'PageUp', 'PageDown', 'ArrowUp', 'ArrowDown']
 
   if (!handledKeys.includes(event.key)) {
     return
@@ -127,6 +127,7 @@ const handleMainScrollKeys = (event) => {
 
   const currentTop = container.scrollTop
   const maxTop = Math.max(0, container.scrollHeight - container.clientHeight)
+  const lineStep = Math.max(40, Math.floor(container.clientHeight * 0.08))
   const pageStep = Math.max(120, Math.floor(container.clientHeight * 0.9))
 
   let nextTop = currentTop
@@ -143,6 +144,12 @@ const handleMainScrollKeys = (event) => {
     case 'PageDown':
       nextTop = Math.min(maxTop, currentTop + pageStep)
       break
+    case 'ArrowUp':
+      nextTop = Math.max(0, currentTop - lineStep)
+      break
+    case 'ArrowDown':
+      nextTop = Math.min(maxTop, currentTop + lineStep)
+      break
   }
 
   event.preventDefault()

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/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/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.