@docsector/docsector-reader 0.1.0

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

@@ -0,0 +1,77 @@
+## Pipeline de Internacionalização
+
+O Docsector Reader usa **vue-i18n** com arquivos de locale **HJSON** e conteúdo **Markdown** embutido. O sistema i18n carrega e mescla traduções com o conteúdo das páginas automaticamente no build.
+
+## Arquivos de Idioma
+
+Os arquivos de idioma ficam em `src/i18n/languages/` como arquivos HJSON:
+
+- `en-US.hjson` — Traduções em inglês
+- `pt-BR.hjson` — Traduções em português
+
+Esses arquivos contêm strings de UI para o menu, configurações, navegação de página e outros labels do sistema.
+
+## Estrutura HJSON
+
+```javascript
+{
+  _: {
+    home: {
+      texts: ['Documentação oficial do ']
+    }
+    guide: {}
+    manual: {}
+    API: {}
+  }
+  menu: {
+    search: 'Pesquisar'
+    home: 'Página inicial'
+  }
+  page: {
+    edit: {
+      github: { edit: 'Edite esta página' }
+    }
+  }
+}
+```
+
+O objeto `_` é o namespace raiz para páginas. Títulos e conteúdo das páginas são **injetados automaticamente** pelo loader i18n a partir do registro de páginas e dos arquivos Markdown.
+
+## Conteúdo Markdown
+
+O conteúdo da documentação é escrito em Markdown padrão com algumas convenções:
+
+### Títulos
+
+Use `##` até `######` para títulos de seção. Cada título se torna uma âncora de navegação na árvore de ToC.
+
+### Blocos de Código
+
+Blocos de código cercados suportam syntax highlighting via Prism.js:
+
+- `php` — Código PHP
+- `bash` — Comandos Shell
+- `html` — Markup HTML
+- `javascript` — Código JavaScript
+
+### Atributos Customizados
+
+O plugin `markdown-it-attrs` permite atributos customizados usando sintaxe `:attr;`:
+
+```
+:filename="exemplo.php";
+```
+
+Isso é usado pelo `DPageSourceCode` para exibir nomes de arquivo acima dos blocos de código.
+
+## Adicionando um Novo Idioma
+
+1. Crie `src/i18n/languages/xx-XX.hjson` com todas as traduções de UI
+2. Adicione o idioma ao array languages em `docsector.config.js`
+3. Adicione o locale ao array langs em `src/i18n/index.js`
+4. Crie arquivos `.md` para cada página com o sufixo do novo locale
+5. Adicione uma imagem de bandeira em `public/images/flags/`
+
+## Plugin Vite para HJSON
+
+O Docsector inclui um plugin Vite customizado que transforma imports HJSON em JSON no build. Isso é configurado automaticamente em `quasar.config.js` — nenhuma configuração adicional necessária.

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

@@ -0,0 +1,85 @@
+## Page Registry
+
+All documentation pages are defined in `src/pages/index.js`. Each entry maps a URL path to its configuration, translatable data, and optional metadata.
+
+## Page Entry Structure
+
+```javascript
+'/my-page': {
+  config: {
+    icon: 'description',
+    status: 'done',
+    type: 'guide',
+    menu: {},
+    subpages: { showcase: false }
+  },
+  data: {
+    'en-US': { title: 'My Page' },
+    'pt-BR': { title: 'Minha Página' }
+  }
+}
+```
+
+## Config Properties
+
+- **type** — Route prefix: `'guide'`, `'manual'`, or `'API'`
+- **status** — Page status: `'done'`, `'draft'`, or `'empty'`
+- **icon** — Material Design icon name shown in the sidebar
+- **menu** — Object controlling menu display (header, subheader, separator)
+- **subpages** — Enable additional tabs: `showcase`, `vs`
+
+## Category Nodes
+
+Set `config: null` to create a non-navigable grouping node. This is useful for creating section titles in the sidebar menu:
+
+```javascript
+'/components': {
+  config: null,
+  data: {
+    'en-US': { title: 'Components' },
+    'pt-BR': { title: 'Componentes' }
+  }
+}
+```
+
+## Menu Grouping
+
+Pages are grouped in the sidebar by their **basepath** (second URL segment). The first page in a group can define a `menu.header`:
+
+```javascript
+menu: {
+  header: {
+    icon: 'widgets',
+    label: 'Components'
+  }
+}
+```
+
+## Subheaders and Separators
+
+```javascript
+menu: {
+  subheader: '.my-section',    // i18n path for subheader label
+  separator: ' page'           // CSS class suffix for separator
+}
+```
+
+## Markdown File Convention
+
+Each page requires Markdown files following this naming pattern:
+
+`src/pages/{type}/{path}.{subpage}.{lang}.md`
+
+For example, a page at `/components/d-page` with type `manual`:
+
+- `src/pages/manual/components/d-page.overview.en-US.md`
+- `src/pages/manual/components/d-page.overview.pt-BR.md`
+- `src/pages/manual/components/d-page.showcase.en-US.md` (if showcase enabled)
+
+## Route Generation
+
+Routes are automatically generated from the page registry. A page with path `/my-page` and type `guide` produces:
+
+- `/guide/my-page/overview` — Main content tab
+- `/guide/my-page/showcase` — Showcase tab (if enabled)
+- `/guide/my-page/vs` — Comparison tab (if enabled)

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

@@ -0,0 +1,85 @@
+## Registro de Páginas
+
+Todas as páginas de documentação são definidas em `src/pages/index.js`. Cada entrada mapeia um caminho URL para sua configuração, dados traduzíveis e metadata opcional.
+
+## Estrutura de uma Entrada
+
+```javascript
+'/minha-pagina': {
+  config: {
+    icon: 'description',
+    status: 'done',
+    type: 'guide',
+    menu: {},
+    subpages: { showcase: false }
+  },
+  data: {
+    'en-US': { title: 'My Page' },
+    'pt-BR': { title: 'Minha Página' }
+  }
+}
+```
+
+## Propriedades do Config
+
+- **type** — Prefixo da rota: `'guide'`, `'manual'` ou `'API'`
+- **status** — Status da página: `'done'`, `'draft'` ou `'empty'`
+- **icon** — Nome do ícone Material Design exibido no menu lateral
+- **menu** — Objeto controlando exibição do menu (header, subheader, separator)
+- **subpages** — Ativar abas adicionais: `showcase`, `vs`
+
+## Nós de Categoria
+
+Defina `config: null` para criar um nó de agrupamento não-navegável. Útil para criar títulos de seção no menu lateral:
+
+```javascript
+'/components': {
+  config: null,
+  data: {
+    'en-US': { title: 'Components' },
+    'pt-BR': { title: 'Componentes' }
+  }
+}
+```
+
+## Agrupamento no Menu
+
+Páginas são agrupadas no menu lateral pelo seu **basepath** (segundo segmento da URL). A primeira página de um grupo pode definir um `menu.header`:
+
+```javascript
+menu: {
+  header: {
+    icon: 'widgets',
+    label: 'Components'
+  }
+}
+```
+
+## Subheaders e Separadores
+
+```javascript
+menu: {
+  subheader: '.minha-secao',   // caminho i18n para label do subheader
+  separator: ' page'           // sufixo de classe CSS para separador
+}
+```
+
+## Convenção de Arquivos Markdown
+
+Cada página requer arquivos Markdown seguindo este padrão de nomenclatura:
+
+`src/pages/{type}/{path}.{subpage}.{lang}.md`
+
+Por exemplo, uma página em `/components/d-page` com type `manual`:
+
+- `src/pages/manual/components/d-page.overview.en-US.md`
+- `src/pages/manual/components/d-page.overview.pt-BR.md`
+- `src/pages/manual/components/d-page.showcase.en-US.md` (se showcase habilitado)
+
+## Geração de Rotas
+
+Rotas são geradas automaticamente a partir do registro de páginas. Uma página com path `/my-page` e type `guide` produz:
+
+- `/guide/my-page/overview` — Aba de conteúdo principal
+- `/guide/my-page/showcase` — Aba de demonstração (se habilitada)
+- `/guide/my-page/vs` — Aba de comparação (se habilitada)

package/src/pages/guide/plugins.overview.en-US.md

@@ -0,0 +1,3 @@
+# Plugins
+
+> This page is currently empty. Content will be added in a future release.

package/src/pages/guide/plugins.overview.pt-BR.md

@@ -0,0 +1,3 @@
+# Plugins
+
+> Esta página está vazia no momento. O conteúdo será adicionado em uma versão futura.

package/src/pages/guide/theming.overview.en-US.md

@@ -0,0 +1,55 @@
+## Dark Mode & Light Mode
+
+Docsector Reader supports automatic dark/light theme switching through the **Quasar Dark Plugin**. Users can toggle between modes in the Settings dialog.
+
+## Quasar Variables
+
+Theme colors are defined in `src/css/quasar.variables.scss`:
+
+```css
+$primary: #027BE3;
+$secondary: #26A69A;
+$accent: #9C27B0;
+$dark: #1D1D1D;
+$dark-page: #121212;
+$positive: #21BA45;
+$negative: #C10015;
+$info: #31CCEC;
+$warning: #F2C037;
+```
+
+Override these variables to customize the entire color scheme.
+
+## Global Styles
+
+Global styles live in `src/css/app.sass`. This file is loaded automatically by Quasar and applies to all pages.
+
+## Component-Level Styles
+
+Each Docsector component has its own scoped `style` block using SASS. Dark/light mode variants use the CSS selector pattern:
+
+```css
+body.body--dark
+  .my-element
+    color: white
+
+body.body--light
+  .my-element
+    color: black
+```
+
+## CSS Variables
+
+Components use CSS custom properties for theme-aware styling:
+
+- `--d-menu-subheader-txt-color` — Menu subheader text color
+- `--d-menu-expansion-bg-color` — Menu expansion panel background
+- `--d-menu-item-opacity` — Menu item hover opacity
+
+## Customizing Code Block Colors
+
+The `DPageSourceCode` component has separate color schemes for light and dark modes, using Prism.js token classes. Override `token.*` classes in the `.source-code` SASS block to customize syntax highlighting colors.
+
+## Font Families
+
+Code blocks use `"Fira Code Nerd Font"` with `"Consolas"` as fallback. To use a different monospace font, override the `.source-code` font-family declarations.

package/src/pages/guide/theming.overview.pt-BR.md

@@ -0,0 +1,55 @@
+## Modo Escuro e Modo Claro
+
+O Docsector Reader suporta alternância automática de tema escuro/claro através do **Quasar Dark Plugin**. Os usuários podem alternar entre os modos no diálogo de Configurações.
+
+## Variáveis Quasar
+
+As cores do tema são definidas em `src/css/quasar.variables.scss`:
+
+```css
+$primary: #027BE3;
+$secondary: #26A69A;
+$accent: #9C27B0;
+$dark: #1D1D1D;
+$dark-page: #121212;
+$positive: #21BA45;
+$negative: #C10015;
+$info: #31CCEC;
+$warning: #F2C037;
+```
+
+Sobrescreva essas variáveis para customizar todo o esquema de cores.
+
+## Estilos Globais
+
+Os estilos globais ficam em `src/css/app.sass`. Este arquivo é carregado automaticamente pelo Quasar e se aplica a todas as páginas.
+
+## Estilos a Nível de Componente
+
+Cada componente Docsector tem seu próprio bloco `style` com escopo usando SASS. Variantes de modo escuro/claro usam o padrão de seletor CSS:
+
+```css
+body.body--dark
+  .meu-elemento
+    color: white
+
+body.body--light
+  .meu-elemento
+    color: black
+```
+
+## Variáveis CSS
+
+Os componentes usam propriedades CSS customizadas para estilização consciente do tema:
+
+- `--d-menu-subheader-txt-color` — Cor do texto de subheader do menu
+- `--d-menu-expansion-bg-color` — Cor de fundo do painel de expansão do menu
+- `--d-menu-item-opacity` — Opacidade do hover de itens do menu
+
+## Customizando Cores dos Blocos de Código
+
+O componente `DPageSourceCode` tem esquemas de cores separados para modos claro e escuro, usando classes de token do Prism.js. Sobrescreva as classes `token.*` no bloco SASS `.source-code` para customizar as cores de syntax highlighting.
+
+## Famílias de Fontes
+
+Os blocos de código usam `"Fira Code Nerd Font"` com `"Consolas"` como fallback. Para usar uma fonte monospace diferente, sobrescreva as declarações font-family de `.source-code`.