@docsector/docsector-reader 0.1.0

package/src/pages/@/BootPage.vue

@@ -0,0 +1,106 @@
+<template>
+<q-page-container>
+  <q-page class="content">
+    <div class="text-center q-pa-xs q-pt-md">
+      <h1>Docsector Reader</h1>
+
+      <p class="caption">
+        {{ $t('_.home.texts[0]') }}
+        <a :href="projectUrl" target="_blank">{{ projectName }}</a>!
+      </p>
+      <hr />
+    </div>
+
+    <div class="q-pa-md" style="max-width: 700px; margin: 0 auto;">
+      <h3 class="text-center q-mb-md">Quick Links</h3>
+
+      <q-list bordered separator class="rounded-borders">
+        <q-item clickable to="/guide/getting-started/overview">
+          <q-item-section avatar>
+            <q-icon name="flag" color="primary" />
+          </q-item-section>
+          <q-item-section>
+            <q-item-label>Getting Started</q-item-label>
+            <q-item-label caption>Installation, setup, and project structure</q-item-label>
+          </q-item-section>
+          <q-item-section side>
+            <q-icon name="chevron_right" />
+          </q-item-section>
+        </q-item>
+
+        <q-item clickable to="/guide/configuration/overview">
+          <q-item-section avatar>
+            <q-icon name="tune" color="primary" />
+          </q-item-section>
+          <q-item-section>
+            <q-item-label>Configuration</q-item-label>
+            <q-item-label caption>docsector.config.js reference</q-item-label>
+          </q-item-section>
+          <q-item-section side>
+            <q-icon name="chevron_right" />
+          </q-item-section>
+        </q-item>
+
+        <q-item clickable to="/guide/pages-and-routing/overview">
+          <q-item-section avatar>
+            <q-icon name="route" color="primary" />
+          </q-item-section>
+          <q-item-section>
+            <q-item-label>Pages &amp; Routing</q-item-label>
+            <q-item-label caption>Page registry and route generation</q-item-label>
+          </q-item-section>
+          <q-item-section side>
+            <q-icon name="chevron_right" />
+          </q-item-section>
+        </q-item>
+
+        <q-item clickable to="/manual/components/d-page/overview">
+          <q-item-section avatar>
+            <q-icon name="widgets" color="secondary" />
+          </q-item-section>
+          <q-item-section>
+            <q-item-label>Components</q-item-label>
+            <q-item-label caption>DPage, DPageSection, DH1–DH6, DMenu, and more</q-item-label>
+          </q-item-section>
+          <q-item-section side>
+            <q-icon name="chevron_right" />
+          </q-item-section>
+        </q-item>
+
+        <q-item clickable to="/manual/composables/use-navigator/overview">
+          <q-item-section avatar>
+            <q-icon name="navigation" color="accent" />
+          </q-item-section>
+          <q-item-section>
+            <q-item-label>Composables</q-item-label>
+            <q-item-label caption>useNavigator — anchor navigation and ToC</q-item-label>
+          </q-item-section>
+          <q-item-section side>
+            <q-icon name="chevron_right" />
+          </q-item-section>
+        </q-item>
+
+        <q-item clickable to="/manual/store/modules/overview">
+          <q-item-section avatar>
+            <q-icon name="storage" color="deep-orange" />
+          </q-item-section>
+          <q-item-section>
+            <q-item-label>Vuex Store</q-item-label>
+            <q-item-label caption>App, I18n, Page, Layout, Settings modules</q-item-label>
+          </q-item-section>
+          <q-item-section side>
+            <q-icon name="chevron_right" />
+          </q-item-section>
+        </q-item>
+      </q-list>
+    </div>
+  </q-page>
+</q-page-container>
+</template>
+
+<script setup>
+import docsectorConfig from 'docsector.config.js'
+
+const projectName = docsectorConfig.branding?.name || 'My Project'
+const projectUrl = docsectorConfig.links?.github || '#'
+</script>

package/src/pages/boot.js

@@ -0,0 +1,10 @@
+export default {
+  meta: {
+    'en-US': {
+      overview: {
+        _translations: null
+      }
+    },
+    'pt-BR': {}
+  }
+}

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

@@ -0,0 +1,107 @@
+## docsector.config.js
+
+The `docsector.config.js` file at the project root controls all project-specific settings. This is the **only file** you need to customize to brand your documentation site.
+
+## Branding
+
+```javascript
+branding: {
+  logo: '/images/logo.png',   // Path to logo in public/
+  name: 'My Project',         // Project name shown in sidebar
+  version: 'v1.0.0',          // Current version badge
+  versions: ['v1.0.0']        // Version dropdown options
+}
+```
+
+The `logo` path is relative to the `public/` folder. Recommended size: **85×85px**.
+
+## Links
+
+```javascript
+links: {
+  github: 'https://github.com/org/repo',
+  discussions: 'https://github.com/org/repo/discussions',
+  chat: 'https://discord.gg/your-invite',
+  email: 'docs@example.com',
+  changelog: '/changelog',
+  roadmap: '/roadmap',
+  sponsor: 'https://github.com/sponsors/org',
+  explore: [
+    { label: 'Website', url: 'https://example.com' },
+    { label: 'Blog', url: 'https://blog.example.com' }
+  ]
+}
+```
+
+Set any link to `null` to hide it from the sidebar menu.
+
+## GitHub Integration
+
+```javascript
+github: {
+  editBaseUrl: 'https://github.com/org/docs/edit/main/src/pages'
+}
+```
+
+This URL is used by the **DPageMeta** component to generate "Edit on GitHub" links. The page path and locale are automatically appended.
+
+## Languages
+
+```javascript
+languages: [
+  {
+    image: '/images/flags/united-states-of-america.png',
+    label: 'English (US)',
+    value: 'en-US'
+  },
+  {
+    image: '/images/flags/brazil.png',
+    label: 'Português (BR)',
+    value: 'pt-BR'
+  }
+]
+```
+
+Each language needs:
+
+- A **flag image** in `public/images/flags/`
+- A **HJSON locale file** in `src/i18n/languages/`
+- Corresponding **.md content files** for each page
+
+## Default Language
+
+```javascript
+defaultLanguage: 'en-US'
+```
+
+The language used when no preference is stored in the user's browser.
+
+## Full Example
+
+```javascript
+export default {
+  branding: {
+    logo: '/images/logo.png',
+    name: 'Acme Docs',
+    version: 'v2.1.0',
+    versions: ['v2.1.0', 'v2.0.0', 'v1.0.0']
+  },
+  links: {
+    github: 'https://github.com/acme/acme',
+    discussions: 'https://github.com/acme/acme/discussions',
+    chat: null,
+    email: 'hello@acme.dev',
+    changelog: null,
+    roadmap: null,
+    sponsor: null,
+    explore: null
+  },
+  github: {
+    editBaseUrl: 'https://github.com/acme/docs/edit/main/src/pages'
+  },
+  languages: [
+    { image: '/images/flags/united-states-of-america.png', label: 'English', value: 'en-US' }
+  ],
+  defaultLanguage: 'en-US'
+}
+```

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

@@ -0,0 +1,107 @@
+## docsector.config.js
+
+O arquivo `docsector.config.js` na raiz do projeto controla todas as configurações específicas. Este é o **único arquivo** que você precisa customizar para personalizar seu site de documentação.
+
+## Branding
+
+```javascript
+branding: {
+  logo: '/images/logo.png',   // Caminho do logo em public/
+  name: 'Meu Projeto',        // Nome exibido na sidebar
+  version: 'v1.0.0',          // Badge de versão atual
+  versions: ['v1.0.0']        // Opções do dropdown de versão
+}
+```
+
+O caminho do `logo` é relativo à pasta `public/`. Tamanho recomendado: **85×85px**.
+
+## Links
+
+```javascript
+links: {
+  github: 'https://github.com/org/repo',
+  discussions: 'https://github.com/org/repo/discussions',
+  chat: 'https://discord.gg/seu-convite',
+  email: 'docs@example.com',
+  changelog: '/changelog',
+  roadmap: '/roadmap',
+  sponsor: 'https://github.com/sponsors/org',
+  explore: [
+    { label: 'Website', url: 'https://example.com' },
+    { label: 'Blog', url: 'https://blog.example.com' }
+  ]
+}
+```
+
+Defina qualquer link como `null` para ocultá-lo do menu lateral.
+
+## Integração com GitHub
+
+```javascript
+github: {
+  editBaseUrl: 'https://github.com/org/docs/edit/main/src/pages'
+}
+```
+
+Esta URL é usada pelo componente **DPageMeta** para gerar links "Editar no GitHub". O caminho da página e o idioma são adicionados automaticamente.
+
+## Idiomas
+
+```javascript
+languages: [
+  {
+    image: '/images/flags/united-states-of-america.png',
+    label: 'English (US)',
+    value: 'en-US'
+  },
+  {
+    image: '/images/flags/brazil.png',
+    label: 'Português (BR)',
+    value: 'pt-BR'
+  }
+]
+```
+
+Cada idioma precisa de:
+
+- Uma **imagem de bandeira** em `public/images/flags/`
+- Um **arquivo HJSON de locale** em `src/i18n/languages/`
+- **Arquivos .md** correspondentes para cada página
+
+## Idioma Padrão
+
+```javascript
+defaultLanguage: 'en-US'
+```
+
+O idioma usado quando nenhuma preferência está armazenada no navegador do usuário.
+
+## Exemplo Completo
+
+```javascript
+export default {
+  branding: {
+    logo: '/images/logo.png',
+    name: 'Acme Docs',
+    version: 'v2.1.0',
+    versions: ['v2.1.0', 'v2.0.0', 'v1.0.0']
+  },
+  links: {
+    github: 'https://github.com/acme/acme',
+    discussions: 'https://github.com/acme/acme/discussions',
+    chat: null,
+    email: 'hello@acme.dev',
+    changelog: null,
+    roadmap: null,
+    sponsor: null,
+    explore: null
+  },
+  github: {
+    editBaseUrl: 'https://github.com/acme/docs/edit/main/src/pages'
+  },
+  languages: [
+    { image: '/images/flags/united-states-of-america.png', label: 'English', value: 'en-US' }
+  ],
+  defaultLanguage: 'en-US'
+}
+```

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

@@ -0,0 +1,49 @@
+# Deployment
+
+## Overview
+
+This guide covers how to deploy your Docsector Reader documentation site to production environments.
+
+## Build for Production
+
+Run the build command to generate optimized static files:
+
+```bash
+npx quasar build
+```
+
+The output will be placed in `dist/spa/`. This folder contains everything needed to serve your documentation.
+
+## Static Hosting
+
+Since Docsector Reader is a Single Page Application (SPA), you can host it on any static file server:
+
+- **GitHub Pages**
+- **Netlify**
+- **Vercel**
+- **AWS S3 + CloudFront**
+- **Any web server** (Nginx, Apache, etc.)
+
+## SPA Routing
+
+When using Vue Router in `history` mode, configure your server to redirect all requests to `index.html`:
+
+### Nginx
+
+```bash
+location / {
+  try_files $uri $uri/ /index.html;
+}
+```
+
+### Netlify
+
+Create a `_redirects` file in `public/`:
+
+```bash
+/*    /index.html   200
+```
+
+## Environment Variables
+
+> This section is still being written. Check back soon for details on configuring environment-specific settings.

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

@@ -0,0 +1,49 @@
+# Deploy
+
+## Visão Geral
+
+Este guia cobre como fazer o deploy do seu site de documentação Docsector Reader em ambientes de produção.
+
+## Build de Produção
+
+Execute o comando de build para gerar os arquivos estáticos otimizados:
+
+```bash
+npx quasar build
+```
+
+A saída será colocada em `dist/spa/`. Esta pasta contém tudo necessário para servir sua documentação.
+
+## Hospedagem Estática
+
+Como o Docsector Reader é uma Single Page Application (SPA), você pode hospedá-lo em qualquer servidor de arquivos estáticos:
+
+- **GitHub Pages**
+- **Netlify**
+- **Vercel**
+- **AWS S3 + CloudFront**
+- **Qualquer servidor web** (Nginx, Apache, etc.)
+
+## Roteamento SPA
+
+Ao usar o Vue Router em modo `history`, configure seu servidor para redirecionar todas as requisições para `index.html`:
+
+### Nginx
+
+```bash
+location / {
+  try_files $uri $uri/ /index.html;
+}
+```
+
+### Netlify
+
+Crie um arquivo `_redirects` em `public/`:
+
+```bash
+/*    /index.html   200
+```
+
+## Variáveis de Ambiente
+
+> Esta seção ainda está sendo escrita. Volte em breve para detalhes sobre configurações específicas por ambiente.

package/src/pages/guide/getting-started.overview.en-US.md

@@ -0,0 +1,59 @@
+## What is Docsector Reader?
+
+Docsector Reader is a **documentation rendering engine** built with Vue 3, Quasar v2, and Vite. It transforms Markdown content into a beautiful, navigable documentation site — complete with i18n, syntax highlighting, dark mode, and anchor navigation.
+
+## Requirements
+
+- **Node.js** 18+ (LTS recommended)
+- **npm** 9+ or **yarn** 1.22+
+- A terminal emulator
+
+## Installation
+
+```bash
+npx degit docsector/docsector-reader my-docs
+cd my-docs
+npm install
+```
+
+## Development Server
+
+Start the dev server with hot-reload:
+
+```bash
+npx quasar dev
+```
+
+The documentation site will be available at **http://localhost:8181**.
+
+## Production Build
+
+Build an optimized SPA for deployment:
+
+```bash
+npx quasar build
+```
+
+The output is placed in `dist/spa/` — ready to deploy to any static hosting.
+
+## Project Structure
+
+The project follows a standard Quasar v2 layout with documentation-specific conventions:
+
+- `docsector.config.js` — Branding, links, languages
+- `src/pages/index.js` — Page registry (routes and metadata)
+- `src/pages/guide/` — Guide-type pages (Markdown files)
+- `src/pages/manual/` — Manual-type pages (Markdown files)
+- `src/components/` — Docsector Vue components
+- `src/composables/` — Vue composables (useNavigator)
+- `src/store/` — Vuex 4 modules
+- `src/i18n/` — Language files (.hjson) and loader
+- `src/layouts/` — DefaultLayout and SystemLayout
+- `src/boot/` — Boot files (store, i18n, QZoom, axios)
+
+## Next Steps
+
+- Configure your project branding in **docsector.config.js**
+- Define your pages in **src/pages/index.js**
+- Write your documentation in **Markdown**
+- Customize themes and appearance

package/src/pages/guide/getting-started.overview.pt-BR.md

@@ -0,0 +1,59 @@
+## O que é o Docsector Reader?
+
+Docsector Reader é um **motor de renderização de documentação** construído com Vue 3, Quasar v2 e Vite. Ele transforma conteúdo Markdown em um site de documentação bonito e navegável — com i18n, syntax highlighting, modo escuro e navegação por âncoras.
+
+## Requisitos
+
+- **Node.js** 18+ (LTS recomendado)
+- **npm** 9+ ou **yarn** 1.22+
+- Um emulador de terminal
+
+## Instalação
+
+```bash
+npx degit docsector/docsector-reader my-docs
+cd my-docs
+npm install
+```
+
+## Servidor de Desenvolvimento
+
+Inicie o servidor dev com hot-reload:
+
+```bash
+npx quasar dev
+```
+
+O site de documentação estará disponível em **http://localhost:8181**.
+
+## Build de Produção
+
+Gere um SPA otimizado para deploy:
+
+```bash
+npx quasar build
+```
+
+O output fica em `dist/spa/` — pronto para deploy em qualquer hosting estático.
+
+## Estrutura do Projeto
+
+O projeto segue o layout padrão do Quasar v2 com convenções específicas para documentação:
+
+- `docsector.config.js` — Branding, links, idiomas
+- `src/pages/index.js` — Registro de páginas (rotas e metadata)
+- `src/pages/guide/` — Páginas tipo guia (arquivos Markdown)
+- `src/pages/manual/` — Páginas tipo manual (arquivos Markdown)
+- `src/components/` — Componentes Vue do Docsector
+- `src/composables/` — Composables Vue (useNavigator)
+- `src/store/` — Módulos Vuex 4
+- `src/i18n/` — Arquivos de idioma (.hjson) e loader
+- `src/layouts/` — DefaultLayout e SystemLayout
+- `src/boot/` — Boot files (store, i18n, QZoom, axios)
+
+## Próximos Passos
+
+- Configure o branding do seu projeto em **docsector.config.js**
+- Defina suas páginas em **src/pages/index.js**
+- Escreva sua documentação em **Markdown**
+- Personalize temas e aparência

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

@@ -0,0 +1,77 @@
+## Internationalization Pipeline
+
+Docsector Reader uses **vue-i18n** with **HJSON** locale files and embedded **Markdown** content. The i18n system automatically loads and merges translations with page content at build time.
+
+## Language Files
+
+Language files are located in `src/i18n/languages/` as HJSON files:
+
+- `en-US.hjson` — English translations
+- `pt-BR.hjson` — Portuguese translations
+
+These files contain UI strings for the menu, settings, page navigation, and other system labels.
+
+## HJSON Structure
+
+```javascript
+{
+  _: {
+    home: {
+      texts: ['The official documentation of ']
+    }
+    guide: {}
+    manual: {}
+    API: {}
+  }
+  menu: {
+    search: 'Search'
+    home: 'Home'
+  }
+  page: {
+    edit: {
+      github: { edit: 'Edit this page' }
+    }
+  }
+}
+```
+
+The `_` object is the root namespace for pages. Page titles and content are **automatically injected** by the i18n loader from the page registry and Markdown files.
+
+## Markdown Content
+
+Documentation content is written in standard Markdown with some conventions:
+
+### Headings
+
+Use `##` through `######` for section headings. Each heading becomes a navigation anchor in the ToC tree.
+
+### Code Blocks
+
+Fenced code blocks support syntax highlighting via Prism.js:
+
+- `php` — PHP code
+- `bash` — Shell commands
+- `html` — HTML markup
+- `javascript` — JavaScript code
+
+### Custom Attributes
+
+The `markdown-it-attrs` plugin enables custom attributes using `:attr;` syntax:
+
+```
+:filename="example.php";
+```
+
+This is used by `DPageSourceCode` to display filenames above code blocks.
+
+## Adding a New Language
+
+1. Create `src/i18n/languages/xx-XX.hjson` with all UI translations
+2. Add the language to `docsector.config.js` languages array
+3. Add the locale to `src/i18n/index.js` langs array
+4. Create `.md` files for each page with the new locale suffix
+5. Add a flag image to `public/images/flags/`
+
+## Vite HJSON Plugin
+
+Docsector includes a custom Vite plugin that transforms HJSON imports into JSON at build time. This is configured automatically in `quasar.config.js` — no additional setup needed.