Guia do Tema Astro Narrow

O Astro Narrow é uma versão nativa em Astro da experiência de leitura do Narrow. Ele usa coleções de conteúdo, configuração tipada, componentes Astro e transformações de Markdown em tempo de build, em vez de código de compatibilidade com Hugo.

Configurar o site.ts#

O arquivo src/config/site.ts controla a identidade do site, navegação, largura do layout, comentários, analytics, comportamento da galeria e configurações de posts.

export const siteConfig = {
  name: 'Astro Narrow',
  shortName: 'Narrow',
  description: 'Um tema Astro focado em conteúdo.',
  contentWidth: '56rem',
}

export const siteConfig = {
  nav: ['posts', 'projects', 'archives', 'tags'],
  footerNav: ['archives', 'tags'],
}

export const siteConfig = {
  nav: ['posts', { label: { 'en': 'GitHub', 'pt': 'GitHub' }, href: 'https://github.com/', icon: 'simple-icons:github' }],
}

Configurar Tipos de Conteúdo#

O arquivo src/config/content.ts define como cada tipo de conteúdo aparece na navegação, listas, cartões e seções da home.

export const contentTypes = {
  posts: {
    collection: 'posts',
    path: '/posts/',
    label: { 'en': 'Posts', 'pt': 'Publicações' },
    cardStyle: 'article',
    listLayout: 'stack',
    gridColumns: 1,
  },
}

Frontmatter#

Os posts usam os campos das coleções de conteúdo do Astro. Mantenha o frontmatter pequeno e previsível.

Entradas de projetos também suportam featured e links.

links:
  - label: Website
    url: https://example.com
    icon: lucide:external-link
  - label: GitHub
    url: https://github.com/example/repo
    icon: simple-icons:github
featured: true

Recursos de Markdown#

Note

Prefira escrever em Markdown puro. O Astro Narrow transforma padrões comuns com remark e rehype.

Código#

type ColorMode = 'light' | 'dark' | 'auto'

export function setMode(mode: ColorMode) {
  document.documentElement.classList.toggle('dark', mode === 'dark')
}

Galeria#

Matemática e Mermaid#

Matemática inline funciona como $E = mc^2$.