@docsector/docsector-reader 3.6.0 → 4.0.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 +15 -15
- package/bin/docsector.js +1 -283
- package/package.json +1 -1
- package/src/components/{DPageBlockquote.vue → DBlockBlockquote.vue} +4 -0
- package/src/components/{DBlockCard.vue → DBlockCards.vue} +1 -1
- package/src/components/{DPageEmbeddedUrl.vue → DBlockEmbeddedUrl.vue} +1 -1
- package/src/components/{DPageExpandable.vue → DBlockExpandable.vue} +5 -0
- package/src/components/{DPageFile.vue → DBlockFile.vue} +1 -1
- package/src/components/{DPageImage.vue → DBlockImage.vue} +1 -1
- package/src/components/{DMermaidDiagram.vue → DBlockMermaidDiagram.vue} +4 -0
- package/src/components/{DQuickLinks.vue → DBlockQuickLinks.vue} +4 -0
- package/src/components/{DPageSourceCode.vue → DBlockSourceCode.vue} +6 -1
- package/src/components/DBlockStepper.vue +210 -0
- package/src/components/DBlockTimeline.vue +319 -0
- package/src/components/DPageSection.vue +5 -0
- package/src/components/DPageTokens.vue +56 -21
- package/src/components/DSubpage.vue +14 -2
- package/src/components/page-section-tokens.js +273 -10
- package/src/composables/useActiveAnchor.js +42 -0
- package/src/composables/useNavigator.js +24 -17
- package/src/home-page-mode.js +5 -0
- package/src/i18n/languages/en-US.hjson +5 -0
- package/src/i18n/languages/pt-BR.hjson +5 -0
- package/src/pages/guide/i18n-and-markdown.overview.en-US.md +6 -6
- package/src/pages/guide/i18n-and-markdown.overview.pt-BR.md +6 -6
- package/src/pages/guide/theming.overview.en-US.md +1 -1
- package/src/pages/guide/theming.overview.pt-BR.md +1 -1
- package/src/pages/manual/basic/d-page-anchor.overview.en-US.md +1 -1
- package/src/pages/manual/basic/d-page-anchor.overview.pt-BR.md +1 -1
- package/src/pages/manual/content/blocks/embedded-urls.overview.en-US.md +3 -3
- package/src/pages/manual/content/blocks/embedded-urls.overview.pt-BR.md +3 -3
- package/src/pages/manual/content/blocks/embedded-urls.showcase.en-US.md +8 -8
- package/src/pages/manual/content/blocks/embedded-urls.showcase.pt-BR.md +8 -8
- package/src/pages/manual/content/blocks/expandable.overview.en-US.md +8 -8
- package/src/pages/manual/content/blocks/expandable.overview.pt-BR.md +8 -8
- package/src/pages/manual/content/blocks/expandable.showcase.en-US.md +6 -6
- package/src/pages/manual/content/blocks/expandable.showcase.pt-BR.md +6 -6
- package/src/pages/manual/content/blocks/files.overview.en-US.md +3 -3
- package/src/pages/manual/content/blocks/files.overview.pt-BR.md +3 -3
- package/src/pages/manual/content/blocks/files.showcase.en-US.md +5 -5
- package/src/pages/manual/content/blocks/files.showcase.pt-BR.md +5 -5
- package/src/pages/manual/content/blocks/quick-links.overview.en-US.md +4 -4
- package/src/pages/manual/content/blocks/quick-links.overview.pt-BR.md +4 -4
- package/src/pages/manual/content/blocks/quick-links.showcase.en-US.md +9 -9
- package/src/pages/manual/content/blocks/quick-links.showcase.pt-BR.md +9 -9
- package/src/pages/manual/content/blocks/stepper.overview.en-US.md +59 -0
- package/src/pages/manual/content/blocks/stepper.overview.pt-BR.md +59 -0
- package/src/pages/manual/content/blocks/stepper.showcase.en-US.md +115 -0
- package/src/pages/manual/content/blocks/stepper.showcase.pt-BR.md +115 -0
- package/src/pages/manual/content/blocks/timeline.overview.en-US.md +47 -0
- package/src/pages/manual/content/blocks/timeline.overview.pt-BR.md +47 -0
- package/src/pages/manual/content/blocks/timeline.showcase.en-US.md +170 -0
- package/src/pages/manual/content/blocks/timeline.showcase.pt-BR.md +170 -0
- package/src/pages/manual.index.js +56 -0
- package/src/quasar.factory.js +13 -11
- package/src/store/Page.js +4 -2
|
@@ -7,15 +7,15 @@ This block is a higher-level alternative to raw iframe markup when the source is
|
|
|
7
7
|
## Markdown Syntax
|
|
8
8
|
|
|
9
9
|
```html
|
|
10
|
-
<d-embedded-url url="https://www.youtube.com/watch?v=M7lc1UVf-VE" title="YouTube player demo">
|
|
10
|
+
<d-block-embedded-url url="https://www.youtube.com/watch?v=M7lc1UVf-VE" title="YouTube player demo">
|
|
11
11
|
Optional caption rendered as inline Markdown.
|
|
12
|
-
</d-embedded-url>
|
|
12
|
+
</d-block-embedded-url>
|
|
13
13
|
```
|
|
14
14
|
|
|
15
15
|
You can also omit the caption body when the provider preview already gives enough context:
|
|
16
16
|
|
|
17
17
|
```html
|
|
18
|
-
<d-embedded-url url="https://open.spotify.com/track/7ouMYWpwJ422jRcDASZB7P" />
|
|
18
|
+
<d-block-embedded-url url="https://open.spotify.com/track/7ouMYWpwJ422jRcDASZB7P" />
|
|
19
19
|
```
|
|
20
20
|
|
|
21
21
|
## Supported Providers
|
|
@@ -7,15 +7,15 @@ Este block é uma alternativa de nível mais alto ao uso manual de iframe quando
|
|
|
7
7
|
## Sintaxe Markdown
|
|
8
8
|
|
|
9
9
|
```html
|
|
10
|
-
<d-embedded-url url="https://www.youtube.com/watch?v=M7lc1UVf-VE" title="Demo do player do YouTube">
|
|
10
|
+
<d-block-embedded-url url="https://www.youtube.com/watch?v=M7lc1UVf-VE" title="Demo do player do YouTube">
|
|
11
11
|
Legenda opcional renderizada como Markdown inline.
|
|
12
|
-
</d-embedded-url>
|
|
12
|
+
</d-block-embedded-url>
|
|
13
13
|
```
|
|
14
14
|
|
|
15
15
|
Você também pode omitir o corpo quando o preview do provider já entrega contexto suficiente:
|
|
16
16
|
|
|
17
17
|
```html
|
|
18
|
-
<d-embedded-url url="https://open.spotify.com/track/7ouMYWpwJ422jRcDASZB7P" />
|
|
18
|
+
<d-block-embedded-url url="https://open.spotify.com/track/7ouMYWpwJ422jRcDASZB7P" />
|
|
19
19
|
```
|
|
20
20
|
|
|
21
21
|
## Providers suportados
|
|
@@ -2,24 +2,24 @@
|
|
|
2
2
|
|
|
3
3
|
### YouTube Video
|
|
4
4
|
|
|
5
|
-
<d-embedded-url url="https://www.youtube.com/watch?v=M7lc1UVf-VE&autoplay=1&loop=1" title="YouTube player demo">
|
|
5
|
+
<d-block-embedded-url url="https://www.youtube.com/watch?v=M7lc1UVf-VE&autoplay=1&loop=1" title="YouTube player demo">
|
|
6
6
|
The original playback query parameters stay attached to the provider URL.
|
|
7
|
-
</d-embedded-url>
|
|
7
|
+
</d-block-embedded-url>
|
|
8
8
|
|
|
9
9
|
### Spotify Track
|
|
10
10
|
|
|
11
|
-
<d-embedded-url url="https://open.spotify.com/track/7ouMYWpwJ422jRcDASZB7P?si=1234">
|
|
11
|
+
<d-block-embedded-url url="https://open.spotify.com/track/7ouMYWpwJ422jRcDASZB7P?si=1234">
|
|
12
12
|
Spotify links render with the provider-specific compact player height.
|
|
13
|
-
</d-embedded-url>
|
|
13
|
+
</d-block-embedded-url>
|
|
14
14
|
|
|
15
15
|
### CodePen Demo
|
|
16
16
|
|
|
17
|
-
<d-embedded-url url="https://codepen.io/team/codepen/pen/PNaGbb?default-tab=result" title="Interactive demo">
|
|
17
|
+
<d-block-embedded-url url="https://codepen.io/team/codepen/pen/PNaGbb?default-tab=result" title="Interactive demo">
|
|
18
18
|
Use the same block for live front-end demos without dropping to raw HTML.
|
|
19
|
-
</d-embedded-url>
|
|
19
|
+
</d-block-embedded-url>
|
|
20
20
|
|
|
21
21
|
### Unsupported URL Fallback
|
|
22
22
|
|
|
23
|
-
<d-embedded-url url="https://example.com/docs/embed-me" title="External API docs">
|
|
23
|
+
<d-block-embedded-url url="https://example.com/docs/embed-me" title="External API docs">
|
|
24
24
|
Unsupported providers render a safe link card so the reading flow still keeps the URL visible and actionable.
|
|
25
|
-
</d-embedded-url>
|
|
25
|
+
</d-block-embedded-url>
|
|
@@ -2,24 +2,24 @@
|
|
|
2
2
|
|
|
3
3
|
### Vídeo do YouTube
|
|
4
4
|
|
|
5
|
-
<d-embedded-url url="https://www.youtube.com/watch?v=M7lc1UVf-VE&autoplay=1&loop=1" title="Demo do player do YouTube">
|
|
5
|
+
<d-block-embedded-url url="https://www.youtube.com/watch?v=M7lc1UVf-VE&autoplay=1&loop=1" title="Demo do player do YouTube">
|
|
6
6
|
Os parâmetros originais de reprodução continuam anexados à URL do provider.
|
|
7
|
-
</d-embedded-url>
|
|
7
|
+
</d-block-embedded-url>
|
|
8
8
|
|
|
9
9
|
### Faixa do Spotify
|
|
10
10
|
|
|
11
|
-
<d-embedded-url url="https://open.spotify.com/track/7ouMYWpwJ422jRcDASZB7P?si=1234">
|
|
11
|
+
<d-block-embedded-url url="https://open.spotify.com/track/7ouMYWpwJ422jRcDASZB7P?si=1234">
|
|
12
12
|
Links do Spotify renderizam com a altura compacta específica do provider.
|
|
13
|
-
</d-embedded-url>
|
|
13
|
+
</d-block-embedded-url>
|
|
14
14
|
|
|
15
15
|
### Demo no CodePen
|
|
16
16
|
|
|
17
|
-
<d-embedded-url url="https://codepen.io/team/codepen/pen/PNaGbb?default-tab=result" title="Demo interativa">
|
|
17
|
+
<d-block-embedded-url url="https://codepen.io/team/codepen/pen/PNaGbb?default-tab=result" title="Demo interativa">
|
|
18
18
|
Use o mesmo block para demos front-end ao vivo sem cair para HTML bruto.
|
|
19
|
-
</d-embedded-url>
|
|
19
|
+
</d-block-embedded-url>
|
|
20
20
|
|
|
21
21
|
### Fallback para URL não suportada
|
|
22
22
|
|
|
23
|
-
<d-embedded-url url="https://example.com/docs/embed-me" title="Documentação externa da API">
|
|
23
|
+
<d-block-embedded-url url="https://example.com/docs/embed-me" title="Documentação externa da API">
|
|
24
24
|
Providers não suportados renderizam um card seguro com link externo, mantendo a URL visível e acionável no fluxo de leitura.
|
|
25
|
-
</d-embedded-url>
|
|
25
|
+
</d-block-embedded-url>
|
|
@@ -4,32 +4,32 @@ Expandable blocks collapse secondary content behind a clickable title.
|
|
|
4
4
|
|
|
5
5
|
They are a good fit when the main section should stay short, but readers may still need optional details, checklists, appendix material, or longer examples.
|
|
6
6
|
|
|
7
|
-
The block is authored with the custom Markdown element `<d-expandable>`.
|
|
7
|
+
The block is authored with the custom Markdown element `<d-block-expandable>`.
|
|
8
8
|
|
|
9
9
|
## HTML Example
|
|
10
10
|
|
|
11
11
|
The custom element can be authored directly in page Markdown:
|
|
12
12
|
|
|
13
13
|
````html
|
|
14
|
-
<d-expandable title="Why hide this content?">
|
|
14
|
+
<d-block-expandable title="Why hide this content?">
|
|
15
15
|
|
|
16
16
|
Use expandable blocks when the main section should stay concise but readers may still need more detail.
|
|
17
17
|
|
|
18
|
-
</d-expandable>
|
|
18
|
+
</d-block-expandable>
|
|
19
19
|
|
|
20
20
|
### Open by Default
|
|
21
21
|
|
|
22
|
-
<d-expandable title="Release checklist" open="true">
|
|
22
|
+
<d-block-expandable title="Release checklist" open="true">
|
|
23
23
|
|
|
24
24
|
- Review breaking changes
|
|
25
25
|
- Update screenshots
|
|
26
26
|
- Run smoke tests
|
|
27
27
|
|
|
28
|
-
</d-expandable>
|
|
28
|
+
</d-block-expandable>
|
|
29
29
|
|
|
30
30
|
### Rich Content
|
|
31
31
|
|
|
32
|
-
<d-expandable title="Deployment appendix">
|
|
32
|
+
<d-block-expandable title="Deployment appendix">
|
|
33
33
|
|
|
34
34
|
> [!TIP]
|
|
35
35
|
> Keep the primary flow in the main section and move optional details here.
|
|
@@ -39,11 +39,11 @@ npm install
|
|
|
39
39
|
npm run build
|
|
40
40
|
```
|
|
41
41
|
|
|
42
|
-
</d-expandable>
|
|
42
|
+
</d-block-expandable>
|
|
43
43
|
````
|
|
44
44
|
|
|
45
45
|
## Notes
|
|
46
46
|
|
|
47
47
|
- Use `open="true"` when the section should start expanded.
|
|
48
48
|
- Keep page headings outside the expandable block. Headings inside the body are flattened to regular paragraphs so the page ToC stays stable.
|
|
49
|
-
- Avoid nesting one `<d-expandable>` inside another in this first version.
|
|
49
|
+
- Avoid nesting one `<d-block-expandable>` inside another in this first version.
|
|
@@ -4,32 +4,32 @@ Blocos expansíveis recolhem conteúdo secundário atrás de um título clicáve
|
|
|
4
4
|
|
|
5
5
|
Eles funcionam bem quando a seção principal precisa continuar curta, mas o leitor ainda pode precisar de detalhes opcionais, checklists, apêndices ou exemplos mais longos.
|
|
6
6
|
|
|
7
|
-
O bloco é escrito com o custom element Markdown `<d-expandable>`.
|
|
7
|
+
O bloco é escrito com o custom element Markdown `<d-block-expandable>`.
|
|
8
8
|
|
|
9
9
|
## Exemplo em HTML
|
|
10
10
|
|
|
11
11
|
O custom element pode ser escrito diretamente no Markdown da página:
|
|
12
12
|
|
|
13
13
|
````html
|
|
14
|
-
<d-expandable title="Por que esconder este conteúdo?">
|
|
14
|
+
<d-block-expandable title="Por que esconder este conteúdo?">
|
|
15
15
|
|
|
16
16
|
Use blocos expansíveis quando a seção principal deve continuar concisa, mas o leitor ainda pode precisar de mais detalhes.
|
|
17
17
|
|
|
18
|
-
</d-expandable>
|
|
18
|
+
</d-block-expandable>
|
|
19
19
|
|
|
20
20
|
### Aberto por Padrão
|
|
21
21
|
|
|
22
|
-
<d-expandable title="Checklist de release" open="true">
|
|
22
|
+
<d-block-expandable title="Checklist de release" open="true">
|
|
23
23
|
|
|
24
24
|
- Revisar breaking changes
|
|
25
25
|
- Atualizar screenshots
|
|
26
26
|
- Rodar smoke tests
|
|
27
27
|
|
|
28
|
-
</d-expandable>
|
|
28
|
+
</d-block-expandable>
|
|
29
29
|
|
|
30
30
|
### Conteúdo Rico
|
|
31
31
|
|
|
32
|
-
<d-expandable title="Apêndice de deploy">
|
|
32
|
+
<d-block-expandable title="Apêndice de deploy">
|
|
33
33
|
|
|
34
34
|
> [!TIP]
|
|
35
35
|
> Mantenha o fluxo principal na seção principal e mova detalhes opcionais para cá.
|
|
@@ -39,11 +39,11 @@ npm install
|
|
|
39
39
|
npm run build
|
|
40
40
|
```
|
|
41
41
|
|
|
42
|
-
</d-expandable>
|
|
42
|
+
</d-block-expandable>
|
|
43
43
|
````
|
|
44
44
|
|
|
45
45
|
## Observações
|
|
46
46
|
|
|
47
47
|
- Use `open="true"` quando a seção precisar começar aberta.
|
|
48
48
|
- Mantenha os títulos principais fora do bloco expansível. Títulos dentro do corpo viram parágrafos comuns para manter o ToC estável.
|
|
49
|
-
- Evite aninhar um `<d-expandable>` dentro de outro nesta primeira versão.
|
|
49
|
+
- Evite aninhar um `<d-block-expandable>` dentro de outro nesta primeira versão.
|
|
@@ -2,25 +2,25 @@
|
|
|
2
2
|
|
|
3
3
|
### Basic
|
|
4
4
|
|
|
5
|
-
<d-expandable title="Why hide this content?">
|
|
5
|
+
<d-block-expandable title="Why hide this content?">
|
|
6
6
|
|
|
7
7
|
Use expandable blocks when the main section should stay concise but readers may still need more detail.
|
|
8
8
|
|
|
9
|
-
</d-expandable>
|
|
9
|
+
</d-block-expandable>
|
|
10
10
|
|
|
11
11
|
### Open by Default
|
|
12
12
|
|
|
13
|
-
<d-expandable title="Release checklist" open="true">
|
|
13
|
+
<d-block-expandable title="Release checklist" open="true">
|
|
14
14
|
|
|
15
15
|
- Review breaking changes
|
|
16
16
|
- Update screenshots
|
|
17
17
|
- Run smoke tests
|
|
18
18
|
|
|
19
|
-
</d-expandable>
|
|
19
|
+
</d-block-expandable>
|
|
20
20
|
|
|
21
21
|
### Rich Content
|
|
22
22
|
|
|
23
|
-
<d-expandable title="Deployment appendix">
|
|
23
|
+
<d-block-expandable title="Deployment appendix">
|
|
24
24
|
|
|
25
25
|
> [!TIP]
|
|
26
26
|
> Keep the primary flow in the main section and move optional details here.
|
|
@@ -30,4 +30,4 @@ npm install
|
|
|
30
30
|
npm run build
|
|
31
31
|
```
|
|
32
32
|
|
|
33
|
-
</d-expandable>
|
|
33
|
+
</d-block-expandable>
|
|
@@ -2,25 +2,25 @@
|
|
|
2
2
|
|
|
3
3
|
### Básico
|
|
4
4
|
|
|
5
|
-
<d-expandable title="Por que esconder este conteúdo?">
|
|
5
|
+
<d-block-expandable title="Por que esconder este conteúdo?">
|
|
6
6
|
|
|
7
7
|
Use blocos expansíveis quando a seção principal deve continuar concisa, mas o leitor ainda pode precisar de mais detalhes.
|
|
8
8
|
|
|
9
|
-
</d-expandable>
|
|
9
|
+
</d-block-expandable>
|
|
10
10
|
|
|
11
11
|
### Aberto por Padrão
|
|
12
12
|
|
|
13
|
-
<d-expandable title="Checklist de release" open="true">
|
|
13
|
+
<d-block-expandable title="Checklist de release" open="true">
|
|
14
14
|
|
|
15
15
|
- Revisar breaking changes
|
|
16
16
|
- Atualizar screenshots
|
|
17
17
|
- Rodar smoke tests
|
|
18
18
|
|
|
19
|
-
</d-expandable>
|
|
19
|
+
</d-block-expandable>
|
|
20
20
|
|
|
21
21
|
### Conteúdo Rico
|
|
22
22
|
|
|
23
|
-
<d-expandable title="Apêndice de deploy">
|
|
23
|
+
<d-block-expandable title="Apêndice de deploy">
|
|
24
24
|
|
|
25
25
|
> [!TIP]
|
|
26
26
|
> Mantenha o fluxo principal na seção principal e mova detalhes opcionais para cá.
|
|
@@ -30,4 +30,4 @@ npm install
|
|
|
30
30
|
npm run build
|
|
31
31
|
```
|
|
32
32
|
|
|
33
|
-
</d-expandable>
|
|
33
|
+
</d-block-expandable>
|
|
@@ -7,15 +7,15 @@ They are useful for checklists, sample bundles, PDFs, release notes, and any oth
|
|
|
7
7
|
## Markdown Syntax
|
|
8
8
|
|
|
9
9
|
```html
|
|
10
|
-
<d-file src="/files/manual/release-checklist.txt" title="Release checklist" size="1 KB">
|
|
10
|
+
<d-block-file src="/files/manual/release-checklist.txt" title="Release checklist" size="1 KB">
|
|
11
11
|
Download the example attachment used in this manual.
|
|
12
|
-
</d-file>
|
|
12
|
+
</d-block-file>
|
|
13
13
|
```
|
|
14
14
|
|
|
15
15
|
You can also omit the caption body when the file name already provides enough context:
|
|
16
16
|
|
|
17
17
|
```html
|
|
18
|
-
<d-file src="/files/manual/release-checklist.txt" size="1 KB" />
|
|
18
|
+
<d-block-file src="/files/manual/release-checklist.txt" size="1 KB" />
|
|
19
19
|
```
|
|
20
20
|
|
|
21
21
|
## Notes
|
|
@@ -7,15 +7,15 @@ Eles são úteis para checklists, bundles de exemplo, PDFs, notas de release e q
|
|
|
7
7
|
## Sintaxe em Markdown
|
|
8
8
|
|
|
9
9
|
```html
|
|
10
|
-
<d-file src="/files/manual/release-checklist.txt" title="Checklist de release" size="1 KB">
|
|
10
|
+
<d-block-file src="/files/manual/release-checklist.txt" title="Checklist de release" size="1 KB">
|
|
11
11
|
Baixe o anexo de exemplo usado neste manual.
|
|
12
|
-
</d-file>
|
|
12
|
+
</d-block-file>
|
|
13
13
|
```
|
|
14
14
|
|
|
15
15
|
Você também pode omitir o corpo da legenda quando o nome do arquivo já fornece contexto suficiente:
|
|
16
16
|
|
|
17
17
|
```html
|
|
18
|
-
<d-file src="/files/manual/release-checklist.txt" size="1 KB" />
|
|
18
|
+
<d-block-file src="/files/manual/release-checklist.txt" size="1 KB" />
|
|
19
19
|
```
|
|
20
20
|
|
|
21
21
|
## Observações
|
|
@@ -2,16 +2,16 @@
|
|
|
2
2
|
|
|
3
3
|
### Local File with Caption
|
|
4
4
|
|
|
5
|
-
<d-file src="/files/manual/release-checklist.txt" title="Release checklist" size="1 KB">
|
|
5
|
+
<d-block-file src="/files/manual/release-checklist.txt" title="Release checklist" size="1 KB">
|
|
6
6
|
Download the example checklist published from `public/files/manual`.
|
|
7
|
-
</d-file>
|
|
7
|
+
</d-block-file>
|
|
8
8
|
|
|
9
9
|
### Local File with Automatic Size
|
|
10
10
|
|
|
11
|
-
<d-file src="/files/manual/release-checklist.txt" />
|
|
11
|
+
<d-block-file src="/files/manual/release-checklist.txt" />
|
|
12
12
|
|
|
13
13
|
### External File URL
|
|
14
14
|
|
|
15
|
-
<d-file src="https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf" title="Reference PDF" size="13 KB">
|
|
15
|
+
<d-block-file src="https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf" title="Reference PDF" size="13 KB">
|
|
16
16
|
The same block can point to a CDN or object storage URL without changing the page layout.
|
|
17
|
-
</d-file>
|
|
17
|
+
</d-block-file>
|
|
@@ -2,16 +2,16 @@
|
|
|
2
2
|
|
|
3
3
|
### Arquivo Local com Legenda
|
|
4
4
|
|
|
5
|
-
<d-file src="/files/manual/release-checklist.txt" title="Checklist de release" size="1 KB">
|
|
5
|
+
<d-block-file src="/files/manual/release-checklist.txt" title="Checklist de release" size="1 KB">
|
|
6
6
|
Baixe o checklist de exemplo publicado a partir de `public/files/manual`.
|
|
7
|
-
</d-file>
|
|
7
|
+
</d-block-file>
|
|
8
8
|
|
|
9
9
|
### Arquivo Local com Tamanho Automático
|
|
10
10
|
|
|
11
|
-
<d-file src="/files/manual/release-checklist.txt" />
|
|
11
|
+
<d-block-file src="/files/manual/release-checklist.txt" />
|
|
12
12
|
|
|
13
13
|
### URL Externa de Arquivo
|
|
14
14
|
|
|
15
|
-
<d-file src="https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf" title="PDF de referência" size="13 KB">
|
|
15
|
+
<d-block-file src="https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf" title="PDF de referência" size="13 KB">
|
|
16
16
|
O mesmo bloco pode apontar para um CDN ou URL de object storage sem mudar o layout da página.
|
|
17
|
-
</d-file>
|
|
17
|
+
</d-block-file>
|
|
@@ -7,18 +7,18 @@ They are useful for homepages, landing sections, and any page that should offer
|
|
|
7
7
|
## Markdown Syntax
|
|
8
8
|
|
|
9
9
|
```html
|
|
10
|
-
<d-quick-links title="Get started">
|
|
11
|
-
<d-quick-link
|
|
10
|
+
<d-block-quick-links title="Get started">
|
|
11
|
+
<d-block-quick-link
|
|
12
12
|
title="Install"
|
|
13
13
|
description="Set up the project"
|
|
14
14
|
to="/guide/getting-started"
|
|
15
15
|
/>
|
|
16
|
-
<d-quick-link
|
|
16
|
+
<d-block-quick-link
|
|
17
17
|
title="GitHub"
|
|
18
18
|
description="Open the repository"
|
|
19
19
|
href="https://github.com/docsector/docsector-reader"
|
|
20
20
|
/>
|
|
21
|
-
</d-quick-links>
|
|
21
|
+
</d-block-quick-links>
|
|
22
22
|
```
|
|
23
23
|
|
|
24
24
|
## Notes
|
|
@@ -7,18 +7,18 @@ Eles são úteis para homepages, seções de entrada e qualquer página que prec
|
|
|
7
7
|
## Sintaxe em Markdown
|
|
8
8
|
|
|
9
9
|
```html
|
|
10
|
-
<d-quick-links title="Comece aqui">
|
|
11
|
-
<d-quick-link
|
|
10
|
+
<d-block-quick-links title="Comece aqui">
|
|
11
|
+
<d-block-quick-link
|
|
12
12
|
title="Instalação"
|
|
13
13
|
description="Configure o projeto"
|
|
14
14
|
to="/guide/getting-started"
|
|
15
15
|
/>
|
|
16
|
-
<d-quick-link
|
|
16
|
+
<d-block-quick-link
|
|
17
17
|
title="GitHub"
|
|
18
18
|
description="Abra o repositório"
|
|
19
19
|
href="https://github.com/docsector/docsector-reader"
|
|
20
20
|
/>
|
|
21
|
-
</d-quick-links>
|
|
21
|
+
</d-block-quick-links>
|
|
22
22
|
```
|
|
23
23
|
|
|
24
24
|
## Observações
|
|
@@ -1,34 +1,34 @@
|
|
|
1
1
|
## Showcase
|
|
2
2
|
|
|
3
|
-
<d-quick-links title="Continue reading">
|
|
4
|
-
<d-quick-link
|
|
3
|
+
<d-block-quick-links title="Continue reading">
|
|
4
|
+
<d-block-quick-link
|
|
5
5
|
title="Getting Started"
|
|
6
6
|
description="Install and run the project"
|
|
7
7
|
to="/guide/getting-started"
|
|
8
8
|
/>
|
|
9
|
-
<d-quick-link
|
|
9
|
+
<d-block-quick-link
|
|
10
10
|
title="Headings"
|
|
11
11
|
description="Open a block example with showcase"
|
|
12
12
|
to="/manual/content/blocks/headings"
|
|
13
13
|
/>
|
|
14
|
-
<d-quick-link
|
|
14
|
+
<d-block-quick-link
|
|
15
15
|
title="GitHub"
|
|
16
16
|
description="Open the repository"
|
|
17
17
|
href="https://github.com/docsector/docsector-reader"
|
|
18
18
|
/>
|
|
19
|
-
</d-quick-links>
|
|
19
|
+
</d-block-quick-links>
|
|
20
20
|
|
|
21
21
|
## Smaller Group
|
|
22
22
|
|
|
23
|
-
<d-quick-links title="Next actions">
|
|
24
|
-
<d-quick-link
|
|
23
|
+
<d-block-quick-links title="Next actions">
|
|
24
|
+
<d-block-quick-link
|
|
25
25
|
title="Page structure"
|
|
26
26
|
description="Read the page container overview"
|
|
27
27
|
to="/manual/content/structures/page"
|
|
28
28
|
/>
|
|
29
|
-
<d-quick-link
|
|
29
|
+
<d-block-quick-link
|
|
30
30
|
title="Quick Links overview"
|
|
31
31
|
description="Return to the reference page"
|
|
32
32
|
to="/manual/content/blocks/quick-links"
|
|
33
33
|
/>
|
|
34
|
-
</d-quick-links>
|
|
34
|
+
</d-block-quick-links>
|
|
@@ -1,34 +1,34 @@
|
|
|
1
1
|
## Demonstração
|
|
2
2
|
|
|
3
|
-
<d-quick-links title="Continue lendo">
|
|
4
|
-
<d-quick-link
|
|
3
|
+
<d-block-quick-links title="Continue lendo">
|
|
4
|
+
<d-block-quick-link
|
|
5
5
|
title="Começando"
|
|
6
6
|
description="Instale e rode o projeto"
|
|
7
7
|
to="/guide/getting-started"
|
|
8
8
|
/>
|
|
9
|
-
<d-quick-link
|
|
9
|
+
<d-block-quick-link
|
|
10
10
|
title="Títulos"
|
|
11
11
|
description="Abra um exemplo de bloco com showcase"
|
|
12
12
|
to="/manual/content/blocks/headings"
|
|
13
13
|
/>
|
|
14
|
-
<d-quick-link
|
|
14
|
+
<d-block-quick-link
|
|
15
15
|
title="GitHub"
|
|
16
16
|
description="Abra o repositório"
|
|
17
17
|
href="https://github.com/docsector/docsector-reader"
|
|
18
18
|
/>
|
|
19
|
-
</d-quick-links>
|
|
19
|
+
</d-block-quick-links>
|
|
20
20
|
|
|
21
21
|
## Grupo Menor
|
|
22
22
|
|
|
23
|
-
<d-quick-links title="Próximas ações">
|
|
24
|
-
<d-quick-link
|
|
23
|
+
<d-block-quick-links title="Próximas ações">
|
|
24
|
+
<d-block-quick-link
|
|
25
25
|
title="Estrutura de página"
|
|
26
26
|
description="Leia o overview do container de page"
|
|
27
27
|
to="/manual/content/structures/page"
|
|
28
28
|
/>
|
|
29
|
-
<d-quick-link
|
|
29
|
+
<d-block-quick-link
|
|
30
30
|
title="Overview de Quick Links"
|
|
31
31
|
description="Volte para a página de referência"
|
|
32
32
|
to="/manual/content/blocks/quick-links"
|
|
33
33
|
/>
|
|
34
|
-
</d-quick-links>
|
|
34
|
+
</d-block-quick-links>
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
## Overview
|
|
2
|
+
|
|
3
|
+
Stepper blocks render a native Quasar vertical Stepper inside Markdown, combining numbered headers, built-in navigation, and rich step content.
|
|
4
|
+
|
|
5
|
+
They work well for onboarding flows, installation guides, release routines, and troubleshooting instructions where readers should move through a sequence in order.
|
|
6
|
+
|
|
7
|
+
The block is authored with the custom Markdown elements `<d-block-stepper>` and `<d-block-step>`.
|
|
8
|
+
|
|
9
|
+
## HTML Example
|
|
10
|
+
|
|
11
|
+
````html
|
|
12
|
+
<d-block-stepper>
|
|
13
|
+
<d-block-step title="Install dependencies">
|
|
14
|
+
|
|
15
|
+
Run `npm install` in the project root.
|
|
16
|
+
|
|
17
|
+
</d-block-step>
|
|
18
|
+
|
|
19
|
+
<d-block-step title="Start the development server">
|
|
20
|
+
|
|
21
|
+
Run `npm run dev` and open the local URL shown in the terminal.
|
|
22
|
+
|
|
23
|
+
</d-block-step>
|
|
24
|
+
|
|
25
|
+
<d-block-step title="Verify the result">
|
|
26
|
+
|
|
27
|
+
> [!TIP]
|
|
28
|
+
> Keep each step focused on one outcome.
|
|
29
|
+
|
|
30
|
+
```bash
|
|
31
|
+
npm run test
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
</d-block-step>
|
|
35
|
+
|
|
36
|
+
<d-block-step
|
|
37
|
+
title="Ship the release"
|
|
38
|
+
icon="rocket_launch"
|
|
39
|
+
active-icon="rocket_launch"
|
|
40
|
+
done-icon="task_alt"
|
|
41
|
+
>
|
|
42
|
+
|
|
43
|
+
Use icon attributes when a numbered prefix is not expressive enough for the step.
|
|
44
|
+
|
|
45
|
+
</d-block-step>
|
|
46
|
+
</d-block-stepper>
|
|
47
|
+
````
|
|
48
|
+
|
|
49
|
+
## Notes
|
|
50
|
+
|
|
51
|
+
- Every `<d-block-step>` must define a `title`.
|
|
52
|
+
- The block uses Quasar's native vertical Stepper, so readers can move through the sequence using the step headers or the built-in navigation buttons.
|
|
53
|
+
- Step bodies support regular Markdown content such as paragraphs, lists, alerts, code fences, images, tables, and math.
|
|
54
|
+
- Each step can override the header icon through `icon`, `active-icon`, `done-icon`, and `error-icon`.
|
|
55
|
+
- Intermediate steps show Continue and Back actions; the last step swaps the primary action to Finish.
|
|
56
|
+
- Readers can also jump to any step directly from the headers.
|
|
57
|
+
- Only the active step body is expanded at a time; previous and next steps stay visible in the header stack.
|
|
58
|
+
- Headings inside a step are flattened into paragraph output so the page table of contents stays stable.
|
|
59
|
+
- Treat nested Stepper blocks and other custom Docsector blocks inside a step as unsupported in this first version.
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
## Visão geral
|
|
2
|
+
|
|
3
|
+
Os blocos Stepper renderizam o Stepper vertical nativo do Quasar dentro do Markdown, combinando cabeçalhos numerados, navegação embutida e conteúdo rico em cada etapa.
|
|
4
|
+
|
|
5
|
+
Eles funcionam bem em onboarding, instalação, rotinas de release e instruções de troubleshooting nas quais a leitura deve seguir uma sequência.
|
|
6
|
+
|
|
7
|
+
O bloco é escrito com os custom elements Markdown `<d-block-stepper>` e `<d-block-step>`.
|
|
8
|
+
|
|
9
|
+
## Exemplo em HTML
|
|
10
|
+
|
|
11
|
+
````html
|
|
12
|
+
<d-block-stepper>
|
|
13
|
+
<d-block-step title="Instale as dependências">
|
|
14
|
+
|
|
15
|
+
Execute `npm install` na raiz do projeto.
|
|
16
|
+
|
|
17
|
+
</d-block-step>
|
|
18
|
+
|
|
19
|
+
<d-block-step title="Inicie o servidor de desenvolvimento">
|
|
20
|
+
|
|
21
|
+
Execute `npm run dev` e abra a URL local mostrada no terminal.
|
|
22
|
+
|
|
23
|
+
</d-block-step>
|
|
24
|
+
|
|
25
|
+
<d-block-step title="Valide o resultado">
|
|
26
|
+
|
|
27
|
+
> [!TIP]
|
|
28
|
+
> Mantenha cada etapa focada em um único resultado.
|
|
29
|
+
|
|
30
|
+
```bash
|
|
31
|
+
npm run test
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
</d-block-step>
|
|
35
|
+
|
|
36
|
+
<d-block-step
|
|
37
|
+
title="Publique a release"
|
|
38
|
+
icon="rocket_launch"
|
|
39
|
+
active-icon="rocket_launch"
|
|
40
|
+
done-icon="task_alt"
|
|
41
|
+
>
|
|
42
|
+
|
|
43
|
+
Use atributos de ícone quando a numeração sozinha não for expressiva o bastante para a etapa.
|
|
44
|
+
|
|
45
|
+
</d-block-step>
|
|
46
|
+
</d-block-stepper>
|
|
47
|
+
````
|
|
48
|
+
|
|
49
|
+
## Observações
|
|
50
|
+
|
|
51
|
+
- Todo `<d-block-step>` precisa definir `title`.
|
|
52
|
+
- O bloco usa o Stepper vertical nativo do Quasar, então a leitura pode avançar pelos cabeçalhos das etapas ou pelos botões de navegação embutidos.
|
|
53
|
+
- O corpo de cada etapa aceita Markdown comum, como parágrafos, listas, alertas, blocos de código, imagens, tabelas e matemática.
|
|
54
|
+
- Cada etapa pode sobrescrever o ícone do cabeçalho com `icon`, `active-icon`, `done-icon` e `error-icon`.
|
|
55
|
+
- As etapas intermediárias mostram Continuar e Voltar; na última etapa, a ação principal muda para Finalizar.
|
|
56
|
+
- A navegação também pode ser feita diretamente pelos cabeçalhos.
|
|
57
|
+
- Apenas o corpo da etapa ativa fica expandido por vez; as demais etapas continuam visíveis na pilha de cabeçalhos.
|
|
58
|
+
- Títulos dentro de uma etapa são achatados para parágrafos, mantendo a tabela de conteúdos da página estável.
|
|
59
|
+
- Nesta primeira versão, trate Stepper aninhado e outros custom blocks do Docsector dentro de uma etapa como conteúdo não suportado.
|