@docsector/docsector-reader 3.5.0 → 4.0.0

package/src/components/page-section-tokens.js

@@ -13,7 +13,10 @@ const ALERT_MESSAGE_TYPES = new Set([
   'caution'
 ])
 
+const CARDS_MARKER_PREFIX = '@@DOCSECTOR_CARDS_'
 const QUICK_LINKS_MARKER_PREFIX = '@@DOCSECTOR_QUICK_LINKS_'
+const TIMELINE_MARKER_PREFIX = '@@DOCSECTOR_TIMELINE_'
+const STEPPER_MARKER_PREFIX = '@@DOCSECTOR_STEPPER_'
 const EXPANDABLE_MARKER_PREFIX = '@@DOCSECTOR_EXPANDABLE_'
 const FILE_MARKER_PREFIX = '@@DOCSECTOR_FILE_'
 const EMBEDDED_URL_MARKER_PREFIX = '@@DOCSECTOR_EMBEDDED_URL_'
@@ -146,11 +149,11 @@ const extractQuickLinksBlocks = (source = '') => {
   const map = new Map()
   let index = 0
 
-  const blockPattern = /<d-quick-links\b([^>]*)>([\s\S]*?)<\/d-quick-links>/gi
+  const blockPattern = /<d-block-quick-links\b([^>]*)>([\s\S]*?)<\/d-block-quick-links>/gi
   const replaced = String(source).replace(blockPattern, (_, blockAttrsRaw, inner) => {
     const blockAttrs = parseCustomTagAttributes(blockAttrsRaw)
     const items = []
-    const itemPattern = /<d-quick-link\b([^>]*)\/?\s*>/gi
+    const itemPattern = /<d-block-quick-link\b([^>]*)\/?\s*>/gi
 
     let itemMatch = itemPattern.exec(inner)
     while (itemMatch !== null) {
@@ -190,15 +193,219 @@ const extractQuickLinksBlocks = (source = '') => {
   }
 }
 
+const extractCardsBlocks = (source = '') => {
+  const map = new Map()
+  let index = 0
+
+  const blockPattern = /<d-block-cards\b([^>]*)>([\s\S]*?)<\/d-block-cards>/gi
+  const replaced = String(source).replace(blockPattern, (_, blockAttrsRaw, inner) => {
+    const blockAttrs = parseCustomTagAttributes(blockAttrsRaw)
+    const items = []
+    const itemPattern = /<d-block-card\b([^>]*)\/?\s*>/gi
+
+    let itemMatch = itemPattern.exec(inner)
+    while (itemMatch !== null) {
+      const itemAttrs = parseCustomTagAttributes(itemMatch[1])
+      const title = itemAttrs.title || ''
+      const description = itemAttrs.description || ''
+      const to = itemAttrs.to || ''
+      const href = itemAttrs.href || ''
+
+      if (title && description && (to || href)) {
+        items.push({
+          title,
+          description,
+          to,
+          href,
+          image: itemAttrs.image || '',
+          icon: itemAttrs.icon || ''
+        })
+      }
+
+      itemMatch = itemPattern.exec(inner)
+    }
+
+    const marker = `${CARDS_MARKER_PREFIX}${index}@@`
+    index++
+
+    map.set(marker, {
+      title: blockAttrs.title || '',
+      items
+    })
+
+    return `\n${marker}\n`
+  })
+
+  return {
+    source: replaced,
+    cardsMap: map
+  }
+}
+
 const parseExpandableOpenState = (raw = '') => {
   return ['1', 'true', 'yes', 'on'].includes(String(raw).trim().toLowerCase())
 }
 
+const parseTimelineTags = (raw = '') => {
+  return decodeHtmlEntities(raw)
+    .split(',')
+    .map((value) => value.trim())
+    .filter(Boolean)
+    .map((label) => ({
+      label,
+      color: '',
+      textColor: '',
+      icon: ''
+    }))
+}
+
+const parseTimelineTagLabel = (raw = '') => {
+  return decodeHtmlEntities(String(raw).replace(/<[^>]+>/g, ' '))
+    .replace(/\s+/g, ' ')
+    .trim()
+}
+
+const createTimelineTag = (rawAttrs = '', rawLabel = '') => {
+  const attrs = parseCustomTagAttributes(rawAttrs)
+  const label = parseTimelineTagLabel(attrs.label || rawLabel)
+
+  if (label === '') {
+    return null
+  }
+
+  return {
+    label,
+    color: decodeHtmlEntities(attrs.color || '').trim(),
+    textColor: decodeHtmlEntities(attrs['text-color'] || attrs.textColor || '').trim(),
+    icon: decodeHtmlEntities(attrs.icon || '').trim()
+  }
+}
+
+const extractTimelineItemTags = (source = '') => {
+  const tags = []
+
+  const replaceBlock = (match, rawAttrs, rawLabel = '') => {
+    const tag = createTimelineTag(rawAttrs, rawLabel)
+
+    if (tag !== null) {
+      tags.push(tag)
+      return '\n'
+    }
+
+    return match
+  }
+
+  const replaced = String(source).replace(
+    /<d-block-timeline-tag\b([^>]*?)(?:\/\s*>|>([\s\S]*?)<\/d-block-timeline-tag>)/gi,
+    replaceBlock
+  )
+
+  return {
+    content: replaced,
+    tags
+  }
+}
+
+const extractTimelineBlocks = (source = '') => {
+  const map = new Map()
+  let index = 0
+
+  const blockPattern = /<d-block-timeline\b([^>]*)>([\s\S]*?)<\/d-block-timeline>/gi
+  const replaced = String(source).replace(blockPattern, (match, _rawAttrs, inner) => {
+    const items = []
+    const itemPattern = /<d-block-timeline-item\b([^>]*)>([\s\S]*?)<\/d-block-timeline-item>/gi
+
+    let itemMatch = itemPattern.exec(inner)
+    while (itemMatch !== null) {
+      const attrs = parseCustomTagAttributes(itemMatch[1])
+      const date = decodeHtmlEntities(attrs.date || '').trim()
+      const { content: itemContent, tags } = extractTimelineItemTags(itemMatch[2])
+
+      if (date) {
+        items.push({
+          date,
+          tags: [...parseTimelineTags(attrs.tags || ''), ...tags],
+          anchor: decodeHtmlEntities(attrs.anchor || attrs.id || '').trim(),
+          content: itemContent
+        })
+      }
+
+      itemMatch = itemPattern.exec(inner)
+    }
+
+    if (items.length === 0) {
+      return match
+    }
+
+    const marker = `${TIMELINE_MARKER_PREFIX}${index}@@`
+    index++
+
+    map.set(marker, {
+      items
+    })
+
+    return `\n${marker}\n`
+  })
+
+  return {
+    source: replaced,
+    timelineMap: map
+  }
+}
+
+const extractStepperBlocks = (source = '') => {
+  const map = new Map()
+  let index = 0
+
+  const blockPattern = /<d-block-stepper\b([^>]*)>([\s\S]*?)<\/d-block-stepper>/gi
+  const replaced = String(source).replace(blockPattern, (match, _rawAttrs, inner) => {
+    const steps = []
+    const stepPattern = /<d-block-step\b([^>]*)>([\s\S]*?)<\/d-block-step>/gi
+
+    let stepMatch = stepPattern.exec(inner)
+    while (stepMatch !== null) {
+      const attrs = parseCustomTagAttributes(stepMatch[1])
+      const title = attrs.title || ''
+
+      if (title) {
+        steps.push({
+          title,
+          icon: attrs.icon || '',
+          activeIcon: attrs['active-icon'] || '',
+          doneIcon: attrs['done-icon'] || '',
+          errorIcon: attrs['error-icon'] || '',
+          content: stepMatch[2]
+        })
+      }
+
+      stepMatch = stepPattern.exec(inner)
+    }
+
+    if (steps.length === 0) {
+      return match
+    }
+
+    const marker = `${STEPPER_MARKER_PREFIX}${index}@@`
+    index++
+
+    map.set(marker, {
+      steps
+    })
+
+    return `\n${marker}\n`
+  })
+
+  return {
+    source: replaced,
+    stepperMap: map
+  }
+}
+
 const extractExpandableBlocks = (source = '') => {
   const map = new Map()
   let index = 0
 
-  const blockPattern = /<d-expandable\b([^>]*)>([\s\S]*?)<\/d-expandable>/gi
+  const blockPattern = /<d-block-expandable\b([^>]*)>([\s\S]*?)<\/d-block-expandable>/gi
   const replaced = String(source).replace(blockPattern, (_, rawAttrs, inner) => {
     const attrs = parseCustomTagAttributes(rawAttrs)
     const marker = `${EXPANDABLE_MARKER_PREFIX}${index}@@`
@@ -264,10 +471,10 @@ const extractFileBlocks = (source = '') => {
     return `\n${marker}\n`
   }
 
-  const replacedSelfClosing = String(source).replace(/<d-file\b([^>]*)\/\s*>/gi, (match, rawAttrs) => {
+  const replacedSelfClosing = String(source).replace(/<d-block-file\b([^>]*)\/\s*>/gi, (match, rawAttrs) => {
     return replaceBlock(match, rawAttrs)
   })
-  const replaced = replacedSelfClosing.replace(/<d-file\b([^>]*)>([\s\S]*?)<\/d-file>/gi, replaceBlock)
+  const replaced = replacedSelfClosing.replace(/<d-block-file\b([^>]*)>([\s\S]*?)<\/d-block-file>/gi, replaceBlock)
 
   return {
     source: replaced,
@@ -299,10 +506,10 @@ const extractEmbeddedUrlBlocks = (source = '') => {
     return `\n${marker}\n`
   }
 
-  const replacedSelfClosing = String(source).replace(/<d-embedded-url\b([^>]*)\/\s*>/gi, (match, rawAttrs) => {
+  const replacedSelfClosing = String(source).replace(/<d-block-embedded-url\b([^>]*)\/\s*>/gi, (match, rawAttrs) => {
     return replaceBlock(match, rawAttrs)
   })
-  const replaced = replacedSelfClosing.replace(/<d-embedded-url\b([^>]*)>([\s\S]*?)<\/d-embedded-url>/gi, replaceBlock)
+  const replaced = replacedSelfClosing.replace(/<d-block-embedded-url\b([^>]*)>([\s\S]*?)<\/d-block-embedded-url>/gi, replaceBlock)
 
   return {
     source: replaced,
@@ -353,6 +560,12 @@ const escapeHtml = (value = '') => {
     .replace(/'/g, '&#39;')
 }
 
+const stripHtmlTags = (value = '') => {
+  return decodeHtmlEntities(String(value).replace(/<[^>]+>/g, ' '))
+    .replace(/\s+/g, ' ')
+    .trim()
+}
+
 const extractTagAttributes = (html = '', tagName = '') => {
   const match = String(html).match(new RegExp(`<${tagName}\\b([^>]*)\\/?>(?![\\s\\S]*<${tagName}\\b)`, 'i'))
 
@@ -585,6 +798,35 @@ const getHeadingAnchorId = (markdown, currentTag, element, env, parserState) =>
   return parserState.headingSlugger.slug(headingText)
 }
 
+const getTimelineItemTitle = (tokens = []) => {
+  for (const token of tokens) {
+    if (typeof token?.content !== 'string') {
+      continue
+    }
+
+    const text = stripHtmlTags(token.content)
+    if (text !== '') {
+      return text
+    }
+  }
+
+  return ''
+}
+
+const getTimelineItemAnchorId = ({ item, itemTokens, itemIndex, parserState }) => {
+  const explicitAnchor = decodeHtmlEntities(item.anchor || '').trim()
+
+  if (explicitAnchor !== '') {
+    return parserState.headingSlugger.slug(explicitAnchor)
+  }
+
+  const title = getTimelineItemTitle(itemTokens)
+  const fallbackTitle = title || `item-${itemIndex + 1}`
+  const seed = [item.date, fallbackTitle].filter(Boolean).join(' ')
+
+  return parserState.headingSlugger.slug(seed)
+}
+
 export const tokenizePageSectionSource = (source = '', options = {}) => {
   const {
     allowHeadingTokens = true,
@@ -592,7 +834,31 @@ export const tokenizePageSectionSource = (source = '', options = {}) => {
   } = options
   const normalizedSource = normalizePageSectionSource(source)
   const { source: sourceWithShieldedCode, codeSegmentsMap } = shieldMarkdownCodeSegments(normalizedSource)
-  const { source: sourceWithExpandables, expandableMap } = extractExpandableBlocks(sourceWithShieldedCode)
+  const { source: sourceWithTimelines, timelineMap } = extractTimelineBlocks(sourceWithShieldedCode)
+
+  timelineMap.forEach((data, marker) => {
+    timelineMap.set(marker, {
+      ...data,
+      items: data.items.map((item) => ({
+        ...item,
+        content: restoreShieldedCodeSegments(item.content, codeSegmentsMap)
+      }))
+    })
+  })
+
+  const { source: sourceWithSteppers, stepperMap } = extractStepperBlocks(sourceWithTimelines)
+
+  stepperMap.forEach((data, marker) => {
+    stepperMap.set(marker, {
+      ...data,
+      steps: data.steps.map((step) => ({
+        ...step,
+        content: restoreShieldedCodeSegments(step.content, codeSegmentsMap)
+      }))
+    })
+  })
+
+  const { source: sourceWithExpandables, expandableMap } = extractExpandableBlocks(sourceWithSteppers)
 
   expandableMap.forEach((data, marker) => {
     expandableMap.set(marker, {
@@ -601,7 +867,8 @@ export const tokenizePageSectionSource = (source = '', options = {}) => {
     })
   })
 
-  const { source: sourceWithQuickLinks, quickLinksMap } = extractQuickLinksBlocks(sourceWithExpandables)
+  const { source: sourceWithCards, cardsMap } = extractCardsBlocks(sourceWithExpandables)
+  const { source: sourceWithQuickLinks, quickLinksMap } = extractQuickLinksBlocks(sourceWithCards)
   const { source: sourceWithFiles, fileMap } = extractFileBlocks(sourceWithQuickLinks)
   const { source: sourceWithEmbeddedUrls, embeddedUrlMap } = extractEmbeddedUrlBlocks(sourceWithFiles)
 
@@ -764,6 +1031,53 @@ export const tokenizePageSectionSource = (source = '', options = {}) => {
         case 'inline': {
           const anchorId = getHeadingAnchorId(markdown, tag, element, markdownEnv, parserState)
 
+          if (timelineMap.has(element.content.trim())) {
+            const data = timelineMap.get(element.content.trim())
+
+            tokens.push({
+              tag: 'timeline',
+              items: data.items.map((item, itemIndex) => {
+                const itemTokens = tokenizePageSectionSource(item.content, {
+                  allowHeadingTokens: false,
+                  parserState
+                })
+
+                return {
+                  date: item.date,
+                  tags: item.tags,
+                  anchorId: getTimelineItemAnchorId({
+                    item,
+                    itemTokens,
+                    itemIndex,
+                    parserState
+                  }),
+                  tokens: itemTokens
+                }
+              })
+            })
+            break
+          }
+
+          if (stepperMap.has(element.content.trim())) {
+            const data = stepperMap.get(element.content.trim())
+
+            tokens.push({
+              tag: 'stepper',
+              steps: data.steps.map((step) => ({
+                title: step.title,
+                icon: step.icon,
+                activeIcon: step.activeIcon,
+                doneIcon: step.doneIcon,
+                errorIcon: step.errorIcon,
+                tokens: tokenizePageSectionSource(step.content, {
+                  allowHeadingTokens: false,
+                  parserState
+                })
+              }))
+            })
+            break
+          }
+
           if (expandableMap.has(element.content.trim())) {
             const data = expandableMap.get(element.content.trim())
 
@@ -779,6 +1093,17 @@ export const tokenizePageSectionSource = (source = '', options = {}) => {
             break
           }
 
+          if (cardsMap.has(element.content.trim())) {
+            const data = cardsMap.get(element.content.trim())
+
+            tokens.push({
+              tag: 'cards',
+              title: data.title,
+              items: data.items
+            })
+            break
+          }
+
           if (quickLinksMap.has(element.content.trim())) {
             const data = quickLinksMap.get(element.content.trim())
 

package/src/i18n/languages/en-US.hjson

@@ -45,6 +45,11 @@
       download: 'Download',
       open: 'Open'
     },
+    stepper: {
+      continue: 'Continue',
+      back: 'Back',
+      finish: 'Finish'
+    },
     openInChatGPT: 'Open in ChatGPT',
     openInChatGPTCaption: 'Ask ChatGPT about this page',
     openInClaude: 'Open in Claude',

package/src/i18n/languages/pt-BR.hjson

@@ -44,6 +44,11 @@
       download: 'Baixar',
       open: 'Abrir'
     },
+    stepper: {
+      continue: 'Continuar',
+      back: 'Voltar',
+      finish: 'Finalizar'
+    },
     openInChatGPT: 'Abrir no ChatGPT',
     openInChatGPTCaption: 'Pergunte ao ChatGPT sobre esta página',
     openInClaude: 'Abrir no Claude',

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

@@ -118,14 +118,14 @@ echo "Example"
 
 ### Expandable Content
 
-Use `<d-expandable>` to hide secondary content without removing rich Markdown features from the page:
+Use `<d-block-expandable>` to hide secondary content without removing rich Markdown features from the page:
 
 ```markdown
-<d-expandable title="More details">
+<d-block-expandable title="More details">
 
 Optional explanations, operational notes, or longer examples.
 
-</d-expandable>
+</d-block-expandable>
 ```
 
 Set `open="true"` when the block should start expanded.
@@ -134,12 +134,12 @@ The expandable body supports paragraphs, lists, alerts, code blocks, Mermaid dia
 
 ### File Blocks
 
-Use `<d-file>` to publish downloadable attachments from repo-tracked files or external storage without leaving Markdown:
+Use `<d-block-file>` to publish downloadable attachments from repo-tracked files or external storage without leaving Markdown:
 
 ```html
-<d-file src="/files/manual/release-checklist.txt" title="Release checklist" size="1 KB">
+<d-block-file src="/files/manual/release-checklist.txt" title="Release checklist" size="1 KB">
 Download the example attachment used in this manual.
-</d-file>
+</d-block-file>
 ```
 
 Store repo-tracked files under `public/files/` and prefer absolute site paths such as `/files/...`.

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

@@ -118,14 +118,14 @@ echo "Exemplo"
 
 ### Conteúdo Expansível
 
-Use `<d-expandable>` para esconder conteúdo secundário sem perder os recursos ricos de Markdown da página:
+Use `<d-block-expandable>` para esconder conteúdo secundário sem perder os recursos ricos de Markdown da página:
 
 ```markdown
-<d-expandable title="Mais detalhes">
+<d-block-expandable title="Mais detalhes">
 
 Explicações opcionais, notas operacionais ou exemplos maiores.
 
-</d-expandable>
+</d-block-expandable>
 ```
 
 Defina `open="true"` quando o bloco precisar começar aberto.
@@ -134,12 +134,12 @@ O corpo do expansível suporta parágrafos, listas, alertas, blocos de código,
 
 ### Blocos de Arquivo
 
-Use `<d-file>` para publicar anexos baixáveis a partir de arquivos versionados no repositório ou de storage externo sem sair do Markdown:
+Use `<d-block-file>` para publicar anexos baixáveis a partir de arquivos versionados no repositório ou de storage externo sem sair do Markdown:
 
 ```html
-<d-file src="/files/manual/release-checklist.txt" title="Checklist de release" size="1 KB">
+<d-block-file src="/files/manual/release-checklist.txt" title="Checklist de release" size="1 KB">
 Baixe o anexo de exemplo usado neste manual.
-</d-file>
+</d-block-file>
 ```
 
 Guarde arquivos versionados no repositório em `public/files/` e prefira caminhos absolutos do site, como `/files/...`.

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

@@ -48,7 +48,7 @@ Components use CSS custom properties for theme-aware styling:
 
 ## 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.
+The `DBlockSourceCode` 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
 

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

@@ -48,7 +48,7 @@ Os componentes usam propriedades CSS customizadas para estilização consciente
 
 ## 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.
+O componente `DBlockSourceCode` 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
 

package/src/pages/manual/content/blocks/cards.overview.en-US.md

@@ -0,0 +1,32 @@
+## Overview
+
+Cards render a responsive grid of linked content blocks directly inside Markdown.
+
+They are useful for landing sections, curated resource lists, and any place where a plain list of links feels too flat.
+
+## Markdown Syntax
+
+```html
+<d-block-cards title="Explore more">
+  <d-block-card
+    title="Install"
+    description="Set up the project"
+    to="/guide/getting-started"
+    image="/images/cards/getting-started-cover.svg"
+  />
+  <d-block-card
+    title="GitHub"
+    description="Open the repository"
+    href="https://github.com/docsector/docsector-reader"
+    icon="launch"
+  />
+</d-block-cards>
+```
+
+## Notes
+
+- Use `to` for internal navigation and `href` for external URLs.
+- Add `image` when the card should feel more like a landing-page tile.
+- Add `icon` when the card has no image but still needs a stronger visual cue.
+- Short descriptions scan better than paragraph-sized copy.
+- Cover images look best in a wide format such as 16:9.

package/src/pages/manual/content/blocks/cards.overview.pt-BR.md

@@ -0,0 +1,32 @@
+## Visão geral
+
+Cards renderizam uma grade responsiva de blocos com link diretamente dentro do Markdown.
+
+Eles são úteis para seções de entrada, listas curadas de recursos e qualquer lugar em que uma lista simples de links fique visualmente pobre.
+
+## Sintaxe Markdown
+
+```html
+<d-block-cards title="Explore mais">
+  <d-block-card
+    title="Instalação"
+    description="Configure o projeto"
+    to="/guide/getting-started"
+    image="/images/cards/getting-started-cover.svg"
+  />
+  <d-block-card
+    title="GitHub"
+    description="Abra o repositório"
+    href="https://github.com/docsector/docsector-reader"
+    icon="launch"
+  />
+</d-block-cards>
+```
+
+## Notas
+
+- Use `to` para navegação interna e `href` para URLs externas.
+- Adicione `image` quando o card precisar se comportar mais como um bloco de landing page.
+- Adicione `icon` quando o card não tiver imagem, mas ainda precisar de uma pista visual mais forte.
+- Descrições curtas funcionam melhor do que textos longos.
+- Imagens de capa ficam melhores em formatos largos, como 16:9.

package/src/pages/manual/content/blocks/cards.showcase.en-US.md

@@ -0,0 +1,39 @@
+## Showcase
+
+<d-block-cards title="Start here">
+  <d-block-card
+    title="Getting Started"
+    description="Install and run the project"
+    to="/guide/getting-started"
+    image="/images/cards/getting-started-cover.svg"
+  />
+  <d-block-card
+    title="Quick Links"
+    description="Open another navigation-focused block"
+    to="/manual/content/blocks/quick-links"
+    image="/images/cards/quick-links-cover.svg"
+  />
+  <d-block-card
+    title="GitHub"
+    description="Open the repository"
+    href="https://github.com/docsector/docsector-reader"
+    icon="launch"
+  />
+</d-block-cards>
+
+## Without Cover Images
+
+<d-block-cards title="Continue reading">
+  <d-block-card
+    title="Expandable"
+    description="Read the collapsible content block overview"
+    to="/manual/content/blocks/expandable"
+    icon="unfold_more"
+  />
+  <d-block-card
+    title="Page structure"
+    description="Review the main page container structure"
+    to="/manual/content/structures/page"
+    icon="view_quilt"
+  />
+</d-block-cards>

package/src/pages/manual/content/blocks/cards.showcase.pt-BR.md

@@ -0,0 +1,39 @@
+## Showcase
+
+<d-block-cards title="Comece por aqui">
+  <d-block-card
+    title="Primeiros passos"
+    description="Instale e execute o projeto"
+    to="/guide/getting-started"
+    image="/images/cards/getting-started-cover.svg"
+  />
+  <d-block-card
+    title="Quick Links"
+    description="Abra outro block focado em navegação"
+    to="/manual/content/blocks/quick-links"
+    image="/images/cards/quick-links-cover.svg"
+  />
+  <d-block-card
+    title="GitHub"
+    description="Abra o repositório"
+    href="https://github.com/docsector/docsector-reader"
+    icon="launch"
+  />
+</d-block-cards>
+
+## Sem imagens de capa
+
+<d-block-cards title="Continue lendo">
+  <d-block-card
+    title="Expandable"
+    description="Leia a visão geral do block colapsável"
+    to="/manual/content/blocks/expandable"
+    icon="unfold_more"
+  />
+  <d-block-card
+    title="Estrutura de página"
+    description="Revise a estrutura principal do container de página"
+    to="/manual/content/structures/page"
+    icon="view_quilt"
+  />
+</d-block-cards>