@docsector/docsector-reader 3.2.0 → 3.2.2

package/src/router/routes.js

@@ -220,7 +220,7 @@ const routes = [
   },
 
   {
-    path: '/(.*)*',
+    path: '/:catchAll(.*)*',
     component: () => import('layouts/SystemLayout.vue'),
     meta: {
       menu: {}

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

@@ -1,65 +0,0 @@
-# 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

@@ -1,65 +0,0 @@
-# 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/manual/components/d-headings.overview.en-US.md

@@ -1,54 +0,0 @@
-## Overview
-
-`DH1` through `DH6` are **heading components** that render section titles with anchor navigation support. Each heading level corresponds to a Markdown heading (`##` through `######`).
-
-## Component Hierarchy
-
-| Component | Markdown | HTML | Usage |
-|-----------|----------|------|-------|
-| `DH1` | `#` (implicit) | `<h1>` | Page title, auto-generated from i18n |
-| `DH2` | `##` | `<h2>` | Main sections |
-| `DH3` | `###` | `<h3>` | Sub-sections |
-| `DH4` | `####` | `<h4>` | Detail sections |
-| `DH5` | `#####` | `<h5>` | Minor sections |
-| `DH6` | `######` | `<h6>` | Micro sections |
-
-## DH1 — Page Title
-
-DH1 is special — it doesn't receive content via props. Instead, it reads the page title from the i18n store:
-
-```javascript
-const heading = computed(() => &#123;
-  const base = store.state.i18n.base
-  return t('_.' + base + '._')
-&#125;)
-```
-
-DH1 also **registers** itself as anchor `0` in the `useNavigator` composable, enabling the ToC tree to show the page title as the root node.
-
-## DH2–DH6 — Section Titles
-
-These components receive their content via the `value` prop (already rendered as HTML by `DPageSection`):
-
-## Props (DH2–DH6)
-
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `id` | `Number` | Yes | Anchor ID for navigation |
-| `value` | `String` | Yes | HTML content of the heading |
-
-## Anchor Navigation
-
-Clicking any heading triggers the `navigate(id)` function from `useNavigator`, which:
-
-1. Updates the URL hash to `#&#123;id&#125;`
-2. Scrolls the viewport to the heading element
-3. Highlights the heading in the ToC tree
-
-## Node Registration
-
-Each heading component (DH2+) calls `useNavigator().index(id)` on mount and update, which pushes a node into the `page/nodes` store, building the ToC tree dynamically as the page renders.
-
-## Styling
-
-Headings use standard HTML heading elements with `v-html` rendering. Custom styling can be applied through the global `app.sass` file or by targeting the heading tags directly.

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

@@ -1,54 +0,0 @@
-## Visão Geral
-
-`DH1` até `DH6` são **componentes de título** que renderizam títulos de seção com suporte a navegação por âncora. Cada nível de título corresponde a um heading Markdown (`##` até `######`).
-
-## Hierarquia de Componentes
-
-| Componente | Markdown | HTML | Uso |
-|------------|----------|------|-----|
-| `DH1` | `#` (implícito) | `<h1>` | Título da página, gerado automaticamente do i18n |
-| `DH2` | `##` | `<h2>` | Seções principais |
-| `DH3` | `###` | `<h3>` | Sub-seções |
-| `DH4` | `####` | `<h4>` | Seções de detalhe |
-| `DH5` | `#####` | `<h5>` | Seções menores |
-| `DH6` | `######` | `<h6>` | Micro seções |
-
-## DH1 — Título da Página
-
-DH1 é especial — não recebe conteúdo via props. Em vez disso, lê o título da página da store i18n:
-
-```javascript
-const heading = computed(() => &#123;
-  const base = store.state.i18n.base
-  return t('_.' + base + '._')
-&#125;)
-```
-
-DH1 também se **registra** como âncora `0` no composable `useNavigator`, permitindo que a árvore de ToC mostre o título da página como nó raiz.
-
-## DH2–DH6 — Títulos de Seção
-
-Esses componentes recebem seu conteúdo via prop `value` (já renderizado como HTML pelo `DPageSection`):
-
-## Props (DH2–DH6)
-
-| Prop | Tipo | Obrigatório | Descrição |
-|------|------|-------------|-----------|
-| `id` | `Number` | Sim | ID da âncora para navegação |
-| `value` | `String` | Sim | Conteúdo HTML do título |
-
-## Navegação por Âncora
-
-Clicar em qualquer título dispara a função `navigate(id)` do `useNavigator`, que:
-
-1. Atualiza o hash da URL para `#&#123;id&#125;`
-2. Faz scroll do viewport até o elemento do título
-3. Destaca o título na árvore de ToC
-
-## Registro de Nós
-
-Cada componente de título (DH2+) chama `useNavigator().index(id)` no mount e update, que insere um nó no store `page/nodes`, construindo a árvore de ToC dinamicamente conforme a página renderiza.
-
-## Estilização
-
-Os títulos usam elementos HTML de heading padrão com renderização `v-html`. Estilos customizados podem ser aplicados através do arquivo global `app.sass` ou direcionando as tags de heading diretamente.

package/src/pages/manual/components/d-mermaid-diagram.overview.en-US.md

@@ -1,31 +0,0 @@
-## Overview
-
-`DMermaidDiagram` is an internal component responsible for rendering **Mermaid** diagrams. It intercepts code blocks fenced with the `mermaid` language indicator and renders them as SVG visuals instead of formatted text.
-
-The component uses lazy-loading — the `mermaid` library is only fetched when a diagram is present on the page, keeping the initial bundle size small.
-
-## Props
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| `content` | `String` | Yes | — | The raw Mermaid definition syntax |
-
-## Features
-
-### Direct Rendering
-
-Diagrams are parsed and rendered directly into SVGs via the official `mermaid.render()` API. The SVGs are fully responsive.
-
-### Dark/Light Mode Aware
-
-The diagrams inherit their theme dynamically. When `$q.dark.isActive` toggles, `DMermaidDiagram` detects the change, re-initializes Mermaid with the new theme context, and entirely redraws the instance to match Docsector's overall appearance.
-
-### Error Handling
-
-If the provided syntax is invalid, the component gracefully catches the parsing error and displays a structured error block along with the raw source code.
-
-This guarantees the page will not break and aids during development.
-
-### HTML Entity Decoding
-
-Curly braces `{` and `}` are properly decoded before rendering, ensuring compatibility with Vue's i18n interpolation requirements while allowing Mermaid logic to function intact.

package/src/pages/manual/components/d-mermaid-diagram.overview.pt-BR.md

@@ -1,29 +0,0 @@
-## Visão geral
-
-O `DMermaidDiagram` é um componente interno responsável por renderizar diagramas **Mermaid**. Ele intercepta os blocos de código marcados com o indicador de linguagem `mermaid` e os renderiza como elementos SVG ao invés de texto puro.
-
-O componente utiliza _lazy-loading_ — a biblioteca `mermaid` apenas é baixada quando de fato existe um diagrama na página, mantendo o tamanho inicial do site otimizado.
-
-## Props
-
-| Prop | Tipo | Obrigatório | Valor padrão | Descrição |
-|------|------|----------|---------|-------------|
-| `content` | `String` | Sim | — | A sintaxe pura da definição do Mermaid |
-
-## Funcionalidades
-
-### Renderização Direta
-
-Os diagramas são lidos e renderizados diretamente em SVGs pela API oficial `mermaid.render()`. Os SVGs gerados são totalmente responsivos.
-
-### Adaptação aos Modos Claro/Escuro
-
-Os diagramas herdam a temática que você desejar. Quando o indicador `$q.dark.isActive` for alternado, O `DMermaidDiagram` rastreará tal mudança, re-inicializará um Mermaid com o novo contexto de tema e irá redesenhar toda a instância para espelhar a aparência visual geral do Docsector.
-
-### Tratamento de Falhas
-
-Se a sintaxe fornecida estiver incorreta, o componente elegantemente detecta a falha sem que a aplicação se quebre. Exibindo na tela, apenas para si, um bloco com erro e o código original abaixo com dicas do erro em desenvolvimento.
-
-### Decodificação de Entidades HTML
-
-Chaves numéricas de texto `{` e `}` tem seus devidos caracteres tratados antes do envio de renderização, garantindo harmonia entre os requisitos de visualização na extensão i18n padrão do Vue junto da estabilidade do código original desenhado para Mermaid em tempo-real.

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

@@ -1,66 +0,0 @@
-## Overview
-
-`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 alert: `'note'`, `'tip'`, `'important'`, `'warning'`, or `'caution'` |
-
-## Slot
-
-The default slot receives the blockquote content.
-
-## Message Types
-
-| 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 |
-| `caution` | **Caution** | High-risk action that deserves extra care |
-| (empty) | *(none)* | Generic blockquote with no label |
-
-## Usage
-
-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="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="caution">
-  <p>This is a high-risk warning.</p>
-</d-page-blockquote>
-```
-
-## Styling
-
-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,66 +0,0 @@
-## Visão Geral
-
-`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 alerta: `'note'`, `'tip'`, `'important'`, `'warning'` ou `'caution'` |
-
-## Slot
-
-O slot padrão recebe o conteúdo do blockquote.
-
-## Tipos de Mensagem
-
-| 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 |
-| `caution` | **Caution** | Ação de alto risco que exige cuidado extra |
-| (vazio) | *(nenhum)* | Blockquote genérico sem label |
-
-## Uso
-
-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="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="caution">
-  <p>Este é um aviso de alto risco.</p>
-</d-page-blockquote>
-```
-
-## Estilização
-
-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,34 +0,0 @@
-## Showcase
-
-Examples using GitHub alert syntax:
-
-## Note
-
-> [!NOTE]
-> You can provide additional context and references in this block.
-
-## Tip
-
-> [!TIP]
-> Keep examples short and focused so readers can execute them quickly.
-
-## Important
-
-> [!IMPORTANT]
-> This migration changes defaults and should be validated before deploy.
-
-## Warning
-
-> [!WARNING]
-> This action can interrupt running workers.
-
-## Caution
-
-> [!CAUTION]
-> Back up your environment before changing low-level server settings.
-
-## Generic
-
-Regular blockquote without alert marker:
-
-> This is a standard blockquote with no alert marker.

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

@@ -1,34 +0,0 @@
-## Demonstração
-
-Exemplos usando sintaxe de alerta do GitHub:
-
-## Note
-
-> [!NOTE]
-> Voce pode adicionar contexto adicional e referencias neste bloco.
-
-## Tip
-
-> [!TIP]
-> Mantenha exemplos curtos e focados para facilitar a execucao.
-
-## Important
-
-> [!IMPORTANT]
-> Esta migracao altera defaults e deve ser validada antes do deploy.
-
-## Warning
-
-> [!WARNING]
-> Esta acao pode interromper workers em execucao.
-
-## Caution
-
-> [!CAUTION]
-> Faça backup do ambiente antes de alterar configuracoes de baixo nivel do servidor.
-
-## Genérico
-
-Blockquote comum sem marcador de alerta:
-
-> Este e um blockquote padrao sem marcador de alerta.

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

@@ -1,57 +0,0 @@
-## Overview
-
-`DPageSection` is the **Markdown rendering engine** at the heart of Docsector Reader. It tokenizes Markdown source from the current i18n path and renders each token as the appropriate Vue component.
-
-## Props
-
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `id` | `Number` | Yes | Base ID used for anchor generation |
-
-## How It Works
-
-1. Reads the Markdown source from the i18n store path `_.{absolute}.source`
-2. Parses it with **markdown-it** + **markdown-it-attrs**
-3. Tokenizes the parsed AST into a flat array of renderable tokens
-4. Each token is rendered as the corresponding Docsector component
-
-## Token Types and Rendering
-
-| Markdown | Token Tag | Component |
-|----------|-----------|-----------|
-| `## Heading 2` | `h2` | `DH2` |
-| `### Heading 3` | `h3` | `DH3` |
-| `#### Heading 4` | `h4` | `DH4` |
-| `##### Heading 5` | `h5` | `DH5` |
-| `###### Heading 6` | `h6` | `DH6` |
-| Paragraph text | `p` | `<p v-html>` |
-| Unordered list | `ul` | `<ul v-html>` |
-| Ordered list | `ol` | `<ol v-html>` |
-| Table | `table` | `<table v-html>` |
-| Fenced code block | `code` | `DPageSourceCode` |
-
-## Nesting Support
-
-DPageSection handles one level of nesting for:
-
-- Bullet lists (`ul > li`)
-- Ordered lists (`ol > li`)
-- Tables (`table > thead/tbody > tr > th/td`)
-
-Nested content is accumulated into a single HTML string and rendered with `v-html`.
-
-## Custom Attributes
-
-The `markdown-it-attrs` plugin uses `:` and `;` as delimiters. Code fences support `filename`, `group`, `tab`, and `breadcrumb`:
-
-````markdown
-```php :group="server"; :tab="server.php"; :breadcrumb="src > server.php";
-echo "Server ready";
-```
-````
-
-`filename` is shown in the info bar for single blocks. Consecutive fences with the same `group` become tabs. `tab` sets the tab label, so filename-like labels receive file icons inside the tab. `breadcrumb` sets the breadcrumb segments above the code block, and the final filename-like segment receives the same icon.
-
-## Anchor IDs
-
-Each heading token receives an anchor ID calculated as `id + token.map[0]`, where `token.map[0]` is the source line number. This creates unique, deterministic anchors for the ToC tree.

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

@@ -1,57 +0,0 @@
-## Visão Geral
-
-`DPageSection` é o **motor de renderização Markdown** no coração do Docsector Reader. Ele tokeniza o source Markdown a partir do caminho i18n atual e renderiza cada token como o componente Vue apropriado.
-
-## Props
-
-| Prop | Tipo | Obrigatório | Descrição |
-|------|------|-------------|-----------|
-| `id` | `Number` | Sim | ID base usado para geração de âncoras |
-
-## Como Funciona
-
-1. Lê o source Markdown do caminho da store i18n `_.{absolute}.source`
-2. Faz o parse com **markdown-it** + **markdown-it-attrs**
-3. Tokeniza o AST parseado em um array flat de tokens renderizáveis
-4. Cada token é renderizado como o componente Docsector correspondente
-
-## Tipos de Token e Renderização
-
-| Markdown | Tag do Token | Componente |
-|----------|-------------|-----------|
-| `## Título 2` | `h2` | `DH2` |
-| `### Título 3` | `h3` | `DH3` |
-| `#### Título 4` | `h4` | `DH4` |
-| `##### Título 5` | `h5` | `DH5` |
-| `###### Título 6` | `h6` | `DH6` |
-| Texto de parágrafo | `p` | `<p v-html>` |
-| Lista não ordenada | `ul` | `<ul v-html>` |
-| Lista ordenada | `ol` | `<ol v-html>` |
-| Tabela | `table` | `<table v-html>` |
-| Bloco de código cercado | `code` | `DPageSourceCode` |
-
-## Suporte a Aninhamento
-
-DPageSection lida com um nível de aninhamento para:
-
-- Listas com marcadores (`ul > li`)
-- Listas ordenadas (`ol > li`)
-- Tabelas (`table > thead/tbody > tr > th/td`)
-
-Conteúdo aninhado é acumulado em uma única string HTML e renderizado com `v-html`.
-
-## Atributos Customizados
-
-O plugin `markdown-it-attrs` usa `:` e `;` como delimitadores. Blocos de código cercados suportam `filename`, `group`, `tab` e `breadcrumb`:
-
-````markdown
-```php :group="servidor"; :tab="servidor.php"; :breadcrumb="src > servidor.php";
-echo "Servidor pronto";
-```
-````
-
-`filename` aparece na barra de info em blocos simples. Fences consecutivos com o mesmo `group` viram abas. `tab` define o rótulo da aba, então labels que parecem arquivo recebem ícones dentro da aba. `breadcrumb` define os segmentos exibidos acima do bloco de código, e o segmento final que parece arquivo recebe o mesmo ícone.
-
-## IDs de Âncora
-
-Cada token de título recebe um ID de âncora calculado como `id + token.map[0]`, onde `token.map[0]` é o número da linha no source. Isso cria âncoras únicas e determinísticas para a árvore de ToC.

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

@@ -1,43 +0,0 @@
-## Showcase
-
-Here is the Markdown source that renders the content you see on the Overview tab:
-
-```
-## My Section Title
-
-Paragraph text with **bold** and *italic*.
-
-- Item one
-- Item two
-- Item three
-
-| Column A | Column B |
-|----------|----------|
-| Cell 1   | Cell 2   |
-
-### Sub-Section
-
-More content here.
-```
-
-Each element becomes a token in DPageSection's tokenizer. Headings create anchors in the right-side ToC tree.
-
-## Supported Markdown Elements
-
-DPageSection renders the following Markdown elements:
-
-- Headings (H2 through H6)
-- Paragraphs with inline formatting (bold, italic, links, code)
-- Unordered and ordered lists
-- Tables with headers
-- Fenced code blocks with syntax highlighting
-
-## Code Block with Filename
-
-Use the `:filename;` attribute to display a filename header:
-
-```php
-echo "Hello, Docsector!";
-```
-
-The filename appears in the info bar above the code block along with the language identifier.