@docsector/docsector-reader 3.1.0 → 3.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +13 -2
- package/bin/docsector.js +1 -1
- package/package.json +10 -7
- package/src/components/DH2.vue +1 -1
- package/src/components/DH3.vue +1 -1
- package/src/components/DH4.vue +1 -1
- package/src/components/DH5.vue +1 -1
- package/src/components/DH6.vue +1 -1
- package/src/components/DMenu.vue +1 -1
- package/src/components/DPage.vue +26 -6
- package/src/components/DPageAnchor.vue +3 -9
- package/src/components/DPageMeta.vue +1 -0
- package/src/components/DPageTokens.vue +5 -5
- package/src/components/page-section-tokens.js +59 -6
- package/src/composables/useNavigator.js +45 -15
- package/src/css/app.sass +12 -0
- package/src/pages/404Page.vue +2 -2
- package/src/pages/Homepage.en-US.md +3 -3
- package/src/pages/Homepage.pt-BR.md +3 -3
- package/src/pages/guide/i18n-and-markdown.overview.en-US.md +26 -4
- package/src/pages/guide/i18n-and-markdown.overview.pt-BR.md +23 -1
- package/src/pages/guide/pages-and-routing.overview.en-US.md +11 -9
- package/src/pages/guide/pages-and-routing.overview.pt-BR.md +11 -9
- package/src/pages/guide.index.js +0 -28
- package/src/pages/manual/basic/branding.overview.en-US.md +27 -0
- package/src/pages/manual/basic/branding.overview.pt-BR.md +27 -0
- package/src/pages/manual/{components → basic}/d-menu.overview.en-US.md +11 -3
- package/src/pages/manual/{components → basic}/d-menu.overview.pt-BR.md +11 -3
- package/src/pages/manual/{components → basic}/d-page-anchor.overview.en-US.md +5 -3
- package/src/pages/manual/{components → basic}/d-page-anchor.overview.pt-BR.md +5 -3
- package/src/pages/manual/{components → basic}/d-page-meta.overview.en-US.md +10 -2
- package/src/pages/manual/{components → basic}/d-page-meta.overview.pt-BR.md +10 -2
- package/src/pages/manual/basic/edit-on-github.overview.en-US.md +26 -0
- package/src/pages/manual/basic/edit-on-github.overview.pt-BR.md +26 -0
- package/src/pages/manual/basic/previous-and-next.overview.en-US.md +17 -0
- package/src/pages/manual/basic/previous-and-next.overview.pt-BR.md +17 -0
- package/src/pages/manual/basic/search.overview.en-US.md +24 -0
- package/src/pages/manual/basic/search.overview.pt-BR.md +24 -0
- package/src/pages/manual/basic/translation-progress.overview.en-US.md +19 -0
- package/src/pages/manual/basic/translation-progress.overview.pt-BR.md +19 -0
- package/src/pages/manual/basic/version-switcher.overview.en-US.md +28 -0
- package/src/pages/manual/basic/version-switcher.overview.pt-BR.md +28 -0
- package/src/pages/manual/components/d-subpage.overview.en-US.md +2 -2
- package/src/pages/manual/components/d-subpage.overview.pt-BR.md +2 -2
- package/src/pages/manual/content/blocks/code-blocks.overview.en-US.md +55 -0
- package/src/pages/manual/content/blocks/code-blocks.overview.pt-BR.md +55 -0
- package/src/pages/manual/{components/d-page-source-code.showcase.en-US.md → content/blocks/code-blocks.showcase.en-US.md} +14 -12
- package/src/pages/manual/{components/d-page-source-code.showcase.pt-BR.md → content/blocks/code-blocks.showcase.pt-BR.md} +28 -26
- package/src/pages/manual/{components/d-page-expandable.overview.en-US.md → content/blocks/expandable.overview.en-US.md} +3 -12
- package/src/pages/manual/{components/d-page-expandable.overview.pt-BR.md → content/blocks/expandable.overview.pt-BR.md} +3 -12
- package/src/pages/manual/content/blocks/headings.overview.en-US.md +45 -0
- package/src/pages/manual/content/blocks/headings.overview.pt-BR.md +45 -0
- package/src/pages/manual/{components/d-headings.showcase.en-US.md → content/blocks/headings.showcase.en-US.md} +1 -1
- package/src/pages/manual/{components/d-headings.showcase.pt-BR.md → content/blocks/headings.showcase.pt-BR.md} +1 -1
- package/src/pages/manual/content/blocks/hints.overview.en-US.md +30 -0
- package/src/pages/manual/content/blocks/hints.overview.pt-BR.md +30 -0
- package/src/pages/manual/content/blocks/hints.showcase.en-US.md +30 -0
- package/src/pages/manual/content/blocks/hints.showcase.pt-BR.md +30 -0
- package/src/pages/manual/content/blocks/images.overview.en-US.md +16 -0
- package/src/pages/manual/content/blocks/images.overview.pt-BR.md +16 -0
- package/src/pages/manual/content/blocks/images.showcase.en-US.md +11 -0
- package/src/pages/manual/content/blocks/images.showcase.pt-BR.md +11 -0
- package/src/pages/manual/content/blocks/math-and-tex.overview.en-US.md +27 -0
- package/src/pages/manual/content/blocks/math-and-tex.overview.pt-BR.md +27 -0
- package/src/pages/manual/content/blocks/math-and-tex.showcase.en-US.md +14 -0
- package/src/pages/manual/content/blocks/math-and-tex.showcase.pt-BR.md +14 -0
- package/src/pages/manual/content/blocks/mermaid-diagrams.overview.en-US.md +22 -0
- package/src/pages/manual/content/blocks/mermaid-diagrams.overview.pt-BR.md +22 -0
- package/src/pages/manual/content/blocks/ordered-lists.overview.en-US.md +19 -0
- package/src/pages/manual/content/blocks/ordered-lists.overview.pt-BR.md +19 -0
- package/src/pages/manual/content/blocks/ordered-lists.showcase.en-US.md +21 -0
- package/src/pages/manual/content/blocks/ordered-lists.showcase.pt-BR.md +21 -0
- package/src/pages/manual/content/blocks/paragraphs.overview.en-US.md +19 -0
- package/src/pages/manual/content/blocks/paragraphs.overview.pt-BR.md +19 -0
- package/src/pages/manual/content/blocks/paragraphs.showcase.en-US.md +9 -0
- package/src/pages/manual/content/blocks/paragraphs.showcase.pt-BR.md +9 -0
- package/src/pages/manual/content/blocks/quick-links.overview.en-US.md +28 -0
- package/src/pages/manual/content/blocks/quick-links.overview.pt-BR.md +28 -0
- package/src/pages/manual/content/blocks/quick-links.showcase.en-US.md +34 -0
- package/src/pages/manual/content/blocks/quick-links.showcase.pt-BR.md +34 -0
- package/src/pages/manual/content/blocks/quotes.overview.en-US.md +24 -0
- package/src/pages/manual/content/blocks/quotes.overview.pt-BR.md +24 -0
- package/src/pages/manual/content/blocks/quotes.showcase.en-US.md +17 -0
- package/src/pages/manual/content/blocks/quotes.showcase.pt-BR.md +17 -0
- package/src/pages/manual/content/blocks/raw-html.overview.en-US.md +19 -0
- package/src/pages/manual/content/blocks/raw-html.overview.pt-BR.md +19 -0
- package/src/pages/manual/content/blocks/raw-html.showcase.en-US.md +12 -0
- package/src/pages/manual/content/blocks/raw-html.showcase.pt-BR.md +12 -0
- package/src/pages/manual/content/blocks/tables.overview.en-US.md +19 -0
- package/src/pages/manual/content/blocks/tables.overview.pt-BR.md +19 -0
- package/src/pages/manual/content/blocks/tables.showcase.en-US.md +17 -0
- package/src/pages/manual/content/blocks/tables.showcase.pt-BR.md +17 -0
- package/src/pages/manual/content/blocks/unordered-lists.overview.en-US.md +21 -0
- package/src/pages/manual/content/blocks/unordered-lists.overview.pt-BR.md +21 -0
- package/src/pages/manual/content/blocks/unordered-lists.showcase.en-US.md +24 -0
- package/src/pages/manual/content/blocks/unordered-lists.showcase.pt-BR.md +24 -0
- package/src/pages/manual/content/structures/books.overview.en-US.md +36 -0
- package/src/pages/manual/content/structures/books.overview.pt-BR.md +36 -0
- package/src/pages/manual/content/structures/page.overview.en-US.md +61 -0
- package/src/pages/manual/content/structures/page.overview.pt-BR.md +61 -0
- package/src/pages/manual/content/structures/subpage.overview.en-US.md +62 -0
- package/src/pages/manual/content/structures/subpage.overview.pt-BR.md +62 -0
- package/src/pages/manual.index.js +487 -153
- package/src/router/routes.js +1 -1
- package/src/pages/guide/alerts-and-blockquotes.overview.en-US.md +0 -65
- package/src/pages/guide/alerts-and-blockquotes.overview.pt-BR.md +0 -65
- package/src/pages/manual/components/d-headings.overview.en-US.md +0 -54
- package/src/pages/manual/components/d-headings.overview.pt-BR.md +0 -54
- package/src/pages/manual/components/d-mermaid-diagram.overview.en-US.md +0 -31
- package/src/pages/manual/components/d-mermaid-diagram.overview.pt-BR.md +0 -29
- package/src/pages/manual/components/d-page-blockquote.overview.en-US.md +0 -66
- package/src/pages/manual/components/d-page-blockquote.overview.pt-BR.md +0 -66
- package/src/pages/manual/components/d-page-blockquote.showcase.en-US.md +0 -34
- package/src/pages/manual/components/d-page-blockquote.showcase.pt-BR.md +0 -34
- package/src/pages/manual/components/d-page-section.overview.en-US.md +0 -57
- package/src/pages/manual/components/d-page-section.overview.pt-BR.md +0 -57
- package/src/pages/manual/components/d-page-section.showcase.en-US.md +0 -43
- package/src/pages/manual/components/d-page-section.showcase.pt-BR.md +0 -43
- package/src/pages/manual/components/d-page-source-code.overview.en-US.md +0 -68
- package/src/pages/manual/components/d-page-source-code.overview.pt-BR.md +0 -68
- package/src/pages/manual/components/d-page.overview.en-US.md +0 -59
- package/src/pages/manual/components/d-page.overview.pt-BR.md +0 -59
- package/src/pages/manual/components/d-page.showcase.en-US.md +0 -35
- package/src/pages/manual/components/d-page.showcase.pt-BR.md +0 -35
- package/src/pages/manual/components/q-zoom.overview.en-US.md +0 -71
- package/src/pages/manual/components/q-zoom.overview.pt-BR.md +0 -71
- package/src/pages/manual/composables/use-navigator.overview.en-US.md +0 -89
- package/src/pages/manual/composables/use-navigator.overview.pt-BR.md +0 -89
- package/src/pages/manual/store/modules.overview.en-US.md +0 -96
- package/src/pages/manual/store/modules.overview.pt-BR.md +0 -96
- /package/src/pages/manual/{components/d-page-expandable.showcase.en-US.md → content/blocks/expandable.showcase.en-US.md} +0 -0
- /package/src/pages/manual/{components/d-page-expandable.showcase.pt-BR.md → content/blocks/expandable.showcase.pt-BR.md} +0 -0
- /package/src/pages/manual/{components/d-mermaid-diagram.showcase.en-US.md → content/blocks/mermaid-diagrams.showcase.en-US.md} +0 -0
- /package/src/pages/manual/{components/d-mermaid-diagram.showcase.pt-BR.md → content/blocks/mermaid-diagrams.showcase.pt-BR.md} +0 -0
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
## Visão Geral
|
|
2
|
+
|
|
3
|
+
Use listas não ordenadas quando a sequência dos itens não importa.
|
|
4
|
+
|
|
5
|
+
Elas funcionam bem para conjuntos de recursos, requisitos, notas agrupadas e coleções curtas de pontos relacionados.
|
|
6
|
+
|
|
7
|
+
## Sintaxe em Markdown
|
|
8
|
+
|
|
9
|
+
```markdown
|
|
10
|
+
- Primeiro item
|
|
11
|
+
- Segundo item
|
|
12
|
+
- Item aninhado
|
|
13
|
+
- Outro item aninhado
|
|
14
|
+
- Terceiro item
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
## Observações
|
|
18
|
+
|
|
19
|
+
- `-`, `*` e `+` são marcadores válidos.
|
|
20
|
+
- Indente itens aninhados para criar sublistas.
|
|
21
|
+
- Use listas não ordenadas para coleções, não para procedimentos passo a passo.
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
## Showcase
|
|
2
|
+
|
|
3
|
+
### Simple Bullets
|
|
4
|
+
|
|
5
|
+
- Install dependencies
|
|
6
|
+
- Start the development server
|
|
7
|
+
- Open the project in the browser
|
|
8
|
+
|
|
9
|
+
### Nested Bullets
|
|
10
|
+
|
|
11
|
+
- Documentation workflow
|
|
12
|
+
- Write the overview page
|
|
13
|
+
- Add the showcase page
|
|
14
|
+
- Review links and wording
|
|
15
|
+
- Release workflow
|
|
16
|
+
- Run tests
|
|
17
|
+
- Build the site
|
|
18
|
+
- Publish the update
|
|
19
|
+
|
|
20
|
+
### Mixed Content
|
|
21
|
+
|
|
22
|
+
- **Important:** keep each item focused on one action.
|
|
23
|
+
- `npm run build` works well as a literal command inside a list.
|
|
24
|
+
- Lists are useful when order does not matter as much as scanability.
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
## Demonstração
|
|
2
|
+
|
|
3
|
+
### Marcadores Simples
|
|
4
|
+
|
|
5
|
+
- Instale as dependências
|
|
6
|
+
- Inicie o servidor de desenvolvimento
|
|
7
|
+
- Abra o projeto no navegador
|
|
8
|
+
|
|
9
|
+
### Marcadores Aninhados
|
|
10
|
+
|
|
11
|
+
- Fluxo de documentação
|
|
12
|
+
- Escreva a página de overview
|
|
13
|
+
- Adicione a página de showcase
|
|
14
|
+
- Revise links e texto
|
|
15
|
+
- Fluxo de release
|
|
16
|
+
- Rode os testes
|
|
17
|
+
- Gere o build do site
|
|
18
|
+
- Publique a atualização
|
|
19
|
+
|
|
20
|
+
### Conteúdo Misto
|
|
21
|
+
|
|
22
|
+
- **Importante:** mantenha cada item focado em uma ação.
|
|
23
|
+
- `npm run build` funciona bem como comando literal dentro de uma lista.
|
|
24
|
+
- Listas são úteis quando a ordem importa menos do que a facilidade de leitura.
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
## Overview
|
|
2
|
+
|
|
3
|
+
Books define the top-level documentation sections that appear as primary tabs, such as Manual and Guide.
|
|
4
|
+
|
|
5
|
+
A book is configured in a `*.book.js` file. It is not a Vue component and it does not render page content by itself.
|
|
6
|
+
|
|
7
|
+
## Example
|
|
8
|
+
|
|
9
|
+
```javascript
|
|
10
|
+
import { defineBook } from '../index.js'
|
|
11
|
+
|
|
12
|
+
export default defineBook({
|
|
13
|
+
id: 'manual',
|
|
14
|
+
label: 'Manual',
|
|
15
|
+
icon: 'menu_book',
|
|
16
|
+
order: 1,
|
|
17
|
+
color: {
|
|
18
|
+
active: 'white',
|
|
19
|
+
inactive: 'white'
|
|
20
|
+
}
|
|
21
|
+
})
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
## What a Book Controls
|
|
25
|
+
|
|
26
|
+
- The tab label shown in the main navigation
|
|
27
|
+
- The icon used for that tab
|
|
28
|
+
- The order of the top-level sections
|
|
29
|
+
- Active and inactive tab colors
|
|
30
|
+
- The stable id referenced by page registries
|
|
31
|
+
|
|
32
|
+
## Notes
|
|
33
|
+
|
|
34
|
+
- Use one `*.book.js` file per top-level section.
|
|
35
|
+
- Page registries such as `manual.index.js` and `guide.index.js` attach entries to a book with the `book` field.
|
|
36
|
+
- A book groups pages under a common tab and route prefix.
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
## Visão Geral
|
|
2
|
+
|
|
3
|
+
Books definem as seções principais da documentação exibidas como abas de primeiro nível, como Manual e Guide.
|
|
4
|
+
|
|
5
|
+
Um book é configurado em um arquivo `*.book.js`. Ele não é um componente Vue e não renderiza conteúdo de página por conta própria.
|
|
6
|
+
|
|
7
|
+
## Exemplo
|
|
8
|
+
|
|
9
|
+
```javascript
|
|
10
|
+
import { defineBook } from '../index.js'
|
|
11
|
+
|
|
12
|
+
export default defineBook({
|
|
13
|
+
id: 'manual',
|
|
14
|
+
label: 'Manual',
|
|
15
|
+
icon: 'menu_book',
|
|
16
|
+
order: 1,
|
|
17
|
+
color: {
|
|
18
|
+
active: 'white',
|
|
19
|
+
inactive: 'white'
|
|
20
|
+
}
|
|
21
|
+
})
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
## O Que um Book Controla
|
|
25
|
+
|
|
26
|
+
- O rótulo da aba exibida na navegação principal
|
|
27
|
+
- O ícone usado nessa aba
|
|
28
|
+
- A ordem das seções de primeiro nível
|
|
29
|
+
- As cores ativa e inativa da aba
|
|
30
|
+
- O id estável referenciado pelos registries de páginas
|
|
31
|
+
|
|
32
|
+
## Observações
|
|
33
|
+
|
|
34
|
+
- Use um arquivo `*.book.js` para cada seção de primeiro nível.
|
|
35
|
+
- Registries como `manual.index.js` e `guide.index.js` associam entradas a um book com o campo `book`.
|
|
36
|
+
- Um book agrupa páginas sob a mesma aba e o mesmo prefixo de rota.
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
## Overview
|
|
2
|
+
|
|
3
|
+
Page is the main documentation screen container.
|
|
4
|
+
|
|
5
|
+
It provides the scroll area, the subpage toolbar, the right-side table of contents drawer, and the footer navigation area. Under the hood, this is powered by `DPage`.
|
|
6
|
+
|
|
7
|
+
This manual entry intentionally stays overview-only because the container behavior is easier to explain than to demonstrate in isolation.
|
|
8
|
+
|
|
9
|
+
## Props
|
|
10
|
+
|
|
11
|
+
| Prop | Type | Default | Description |
|
|
12
|
+
|------|------|---------|-------------|
|
|
13
|
+
| `disableNav` | `Boolean` | `false` | Hides the DPageMeta navigation footer |
|
|
14
|
+
| `showBackToTopControl` | `Boolean` | `false` | Enables the floating back-to-top control with circular reading progress |
|
|
15
|
+
|
|
16
|
+
## Layout Structure
|
|
17
|
+
|
|
18
|
+
A page provides the following layout pieces:
|
|
19
|
+
|
|
20
|
+
- **QPageContainer** — Quasar page container
|
|
21
|
+
- **QToolbar** (submenu) — Tab navigation: Overview, Showcase, Vs
|
|
22
|
+
- **QPage** with **QScrollArea** — Scrollable content area with slot
|
|
23
|
+
- **QDrawer** (right) — Anchor/ToC navigation tree
|
|
24
|
+
|
|
25
|
+
## Content Slot
|
|
26
|
+
|
|
27
|
+
The default slot receives the page content. In routed documentation, a Subpage typically places the title and rendered sections inside this slot:
|
|
28
|
+
|
|
29
|
+
```html
|
|
30
|
+
<d-page>
|
|
31
|
+
<header>
|
|
32
|
+
<d-h1 :id="0" />
|
|
33
|
+
</header>
|
|
34
|
+
<main>
|
|
35
|
+
<d-page-section :id="sectionId" />
|
|
36
|
+
</main>
|
|
37
|
+
</d-page>
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
## Subpage Tabs
|
|
41
|
+
|
|
42
|
+
The page container reads the route's `meta.subpages` configuration to determine which tabs to display:
|
|
43
|
+
|
|
44
|
+
- **Overview** — Always shown when other tabs exist
|
|
45
|
+
- **Showcase** — Shown when `subpages.showcase: true`
|
|
46
|
+
- **Vs** — Shown when `subpages.vs: true`
|
|
47
|
+
|
|
48
|
+
## Scroll Behavior
|
|
49
|
+
|
|
50
|
+
The page container resets scroll position on route changes via `router.beforeEach`. The scroll observer monitors vertical position and updates the selected anchor via the `useNavigator` composable.
|
|
51
|
+
|
|
52
|
+
When `showBackToTopControl` is enabled, the page also derives reading progress from the same scroll container. The floating control stays hidden at the top, appears after a small amount of scroll, shows circular progress, and returns to anchor `0` when clicked.
|
|
53
|
+
|
|
54
|
+
## Store Integration
|
|
55
|
+
|
|
56
|
+
The implementation reads from and writes to several Vuex store modules:
|
|
57
|
+
|
|
58
|
+
- `layout/meta` — Controls the right-side anchor drawer visibility
|
|
59
|
+
- `page/base` — Current page base path
|
|
60
|
+
- `page/relative` — Current subpage path (`/overview`, `/showcase`, `/vs`)
|
|
61
|
+
- `page/anchor` — Resets anchors on navigation
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
## Visão Geral
|
|
2
|
+
|
|
3
|
+
Page é o container principal da tela de documentação.
|
|
4
|
+
|
|
5
|
+
Ele fornece a área de scroll, a barra de subpáginas, o drawer lateral de índice e a área de navegação do rodapé. Na implementação, isso é sustentado por `DPage`.
|
|
6
|
+
|
|
7
|
+
Esta entrada do manual fica intencionalmente só com overview, porque o comportamento do container é mais fácil de explicar do que de demonstrar isoladamente.
|
|
8
|
+
|
|
9
|
+
## Props
|
|
10
|
+
|
|
11
|
+
| Prop | Tipo | Padrão | Descrição |
|
|
12
|
+
|------|------|--------|-----------|
|
|
13
|
+
| `disableNav` | `Boolean` | `false` | Oculta o rodapé de navegação DPageMeta |
|
|
14
|
+
| `showBackToTopControl` | `Boolean` | `false` | Habilita o controle flutuante de voltar ao topo com progresso circular de leitura |
|
|
15
|
+
|
|
16
|
+
## Estrutura do Layout
|
|
17
|
+
|
|
18
|
+
Uma page fornece as seguintes partes de layout:
|
|
19
|
+
|
|
20
|
+
- **QPageContainer** — Container de página Quasar
|
|
21
|
+
- **QToolbar** (submenu) — Navegação por abas: Overview, Showcase, Vs
|
|
22
|
+
- **QPage** com **QScrollArea** — Área de conteúdo com scroll e slot
|
|
23
|
+
- **QDrawer** (direita) — Árvore de navegação por âncoras/ToC
|
|
24
|
+
|
|
25
|
+
## Slot de Conteúdo
|
|
26
|
+
|
|
27
|
+
O slot padrão recebe o conteúdo da página. Na documentação roteada, uma subpage normalmente coloca o título e as seções renderizadas dentro desse slot:
|
|
28
|
+
|
|
29
|
+
```html
|
|
30
|
+
<d-page>
|
|
31
|
+
<header>
|
|
32
|
+
<d-h1 :id="0" />
|
|
33
|
+
</header>
|
|
34
|
+
<main>
|
|
35
|
+
<d-page-section :id="sectionId" />
|
|
36
|
+
</main>
|
|
37
|
+
</d-page>
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
## Abas de Subpágina
|
|
41
|
+
|
|
42
|
+
O container de page lê a configuração `meta.subpages` da rota para determinar quais abas exibir:
|
|
43
|
+
|
|
44
|
+
- **Overview** — Sempre exibida quando outras abas existem
|
|
45
|
+
- **Showcase** — Exibida quando `subpages.showcase: true`
|
|
46
|
+
- **Vs** — Exibida quando `subpages.vs: true`
|
|
47
|
+
|
|
48
|
+
## Comportamento de Scroll
|
|
49
|
+
|
|
50
|
+
O container de page reseta a posição de scroll nas mudanças de rota via `router.beforeEach`. O observador de scroll monitora a posição vertical e atualiza a seleção de âncora via composable `useNavigator`.
|
|
51
|
+
|
|
52
|
+
Quando `showBackToTopControl` está habilitada, a page também deriva o progresso de leitura a partir da mesma área de scroll. O controle flutuante fica oculto no topo, aparece após uma pequena rolagem, exibe progresso circular e retorna para a âncora `0` ao ser clicado.
|
|
53
|
+
|
|
54
|
+
## Integração com Store
|
|
55
|
+
|
|
56
|
+
A implementação lê e escreve em vários módulos da Vuex store:
|
|
57
|
+
|
|
58
|
+
- `layout/meta` — Controla a visibilidade do drawer de âncoras
|
|
59
|
+
- `page/base` — Caminho base da página atual
|
|
60
|
+
- `page/relative` — Caminho da sub-página (`/overview`, `/showcase`, `/vs`)
|
|
61
|
+
- `page/anchor` — Reseta âncoras na navegação
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
## Overview
|
|
2
|
+
|
|
3
|
+
Subpage is the standard routed documentation screen that composes a page container, the page title, and the rendered sections.
|
|
4
|
+
|
|
5
|
+
Under the hood, routed documentation uses `DSubpage` for this composition.
|
|
6
|
+
|
|
7
|
+
## How It Works
|
|
8
|
+
|
|
9
|
+
The implementation generates a deterministic numeric ID from the current route path using a hash function. This ID is passed to `DPageSection` to keep per-page renderer indexes stable across page navigations.
|
|
10
|
+
|
|
11
|
+
## Template
|
|
12
|
+
|
|
13
|
+
```html
|
|
14
|
+
<d-page show-back-to-top-control>
|
|
15
|
+
<header>
|
|
16
|
+
<d-h1 :id="0" />
|
|
17
|
+
</header>
|
|
18
|
+
<main>
|
|
19
|
+
<d-page-section :id="id" />
|
|
20
|
+
</main>
|
|
21
|
+
</d-page>
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
## ID Generation
|
|
25
|
+
|
|
26
|
+
The `id` computed property creates a consistent hash from the route path:
|
|
27
|
+
|
|
28
|
+
```javascript
|
|
29
|
+
const id = computed(() => {
|
|
30
|
+
const path = route.path
|
|
31
|
+
let hash = 5381
|
|
32
|
+
for (let i = 0; i < path.length; i++) {
|
|
33
|
+
hash = (hash * 33) ^ path.charCodeAt(i)
|
|
34
|
+
}
|
|
35
|
+
return hash >>> 0
|
|
36
|
+
})
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
This keeps per-page renderer state isolated when switching between pages. Markdown section headings themselves use GitHub-compatible slugs derived from the heading text, so README-style Table of Contents links keep working.
|
|
40
|
+
|
|
41
|
+
## When to Use
|
|
42
|
+
|
|
43
|
+
Subpage is automatically used by the router for standard documentation routes. You usually do not need to wire it manually unless creating a custom layout.
|
|
44
|
+
|
|
45
|
+
```javascript
|
|
46
|
+
// In routes.js - this happens automatically
|
|
47
|
+
{
|
|
48
|
+
path: 'overview',
|
|
49
|
+
component: () => import('components/DSubpage.vue'),
|
|
50
|
+
meta: { status: config.status }
|
|
51
|
+
}
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
## Relationship with Page
|
|
55
|
+
|
|
56
|
+
- Subpage uses the Page container as its layout shell
|
|
57
|
+
- Page handles scroll, toolbar, and drawer behavior
|
|
58
|
+
- Subpage handles title and section composition
|
|
59
|
+
|
|
60
|
+
## Built-in Back to Top Control
|
|
61
|
+
|
|
62
|
+
Routed documentation subpages enable the floating back-to-top control automatically. The control is only shown when the content actually overflows, becomes visible after the reader scrolls a little, and visualizes the current reading progress with a circular indicator.
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
## Visão Geral
|
|
2
|
+
|
|
3
|
+
Subpage é a tela roteada padrão da documentação que compõe o container de page, o título da página e as seções renderizadas.
|
|
4
|
+
|
|
5
|
+
Na implementação, a documentação roteada usa `DSubpage` para essa composição.
|
|
6
|
+
|
|
7
|
+
## Como Funciona
|
|
8
|
+
|
|
9
|
+
A implementação gera um ID numérico determinístico a partir do caminho da rota atual usando uma função hash. Esse ID é passado ao `DPageSection` para manter estáveis os índices internos do renderer em cada página.
|
|
10
|
+
|
|
11
|
+
## Template
|
|
12
|
+
|
|
13
|
+
```html
|
|
14
|
+
<d-page show-back-to-top-control>
|
|
15
|
+
<header>
|
|
16
|
+
<d-h1 :id="0" />
|
|
17
|
+
</header>
|
|
18
|
+
<main>
|
|
19
|
+
<d-page-section :id="id" />
|
|
20
|
+
</main>
|
|
21
|
+
</d-page>
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
## Geração de ID
|
|
25
|
+
|
|
26
|
+
A propriedade computada `id` cria um hash consistente a partir do caminho da rota:
|
|
27
|
+
|
|
28
|
+
```javascript
|
|
29
|
+
const id = computed(() => {
|
|
30
|
+
const path = route.path
|
|
31
|
+
let hash = 5381
|
|
32
|
+
for (let i = 0; i < path.length; i++) {
|
|
33
|
+
hash = (hash * 33) ^ path.charCodeAt(i)
|
|
34
|
+
}
|
|
35
|
+
return hash >>> 0
|
|
36
|
+
})
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
Isso mantém o estado interno do renderer isolado ao navegar entre páginas. Os headings Markdown em si usam slugs compatíveis com GitHub derivados do texto do título, então links de Table of Contents no estilo README continuam funcionando.
|
|
40
|
+
|
|
41
|
+
## Quando Usar
|
|
42
|
+
|
|
43
|
+
Subpage é usada automaticamente pelo roteador nas rotas padrão de documentação. Você normalmente não precisa montá-la manualmente, a menos que esteja criando um layout customizado.
|
|
44
|
+
|
|
45
|
+
```javascript
|
|
46
|
+
// Em routes.js - isso acontece automaticamente
|
|
47
|
+
{
|
|
48
|
+
path: 'overview',
|
|
49
|
+
component: () => import('components/DSubpage.vue'),
|
|
50
|
+
meta: { status: config.status }
|
|
51
|
+
}
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
## Relação com Page
|
|
55
|
+
|
|
56
|
+
- Subpage usa o container de page como casca de layout
|
|
57
|
+
- Page cuida do comportamento de scroll, toolbar e drawer
|
|
58
|
+
- Subpage cuida da composição de título e seções
|
|
59
|
+
|
|
60
|
+
## Controle Integrado de Voltar ao Topo
|
|
61
|
+
|
|
62
|
+
As subpáginas roteadas habilitam automaticamente o controle flutuante de voltar ao topo. O controle só é exibido quando o conteúdo realmente tem overflow, fica visível após uma pequena rolagem do leitor e mostra o progresso atual de leitura com um indicador circular.
|