olá-astro
Hello Astro é um tema inicial multiuso do Astro completo escrito em Typescript e TailwindCSS. Ele suporta páginas e postagens de blog baseadas em Markdown e MDX.
Hello Astro pode ser usado para qualquer um/todos os seguintes:
- site corporativo/de marketing
- blog
- site de documentação
- site de portfólio que suporta galerias de fotos
Usa as seguintes integrações:
- @astrojs/mdx
- @astrojs/markdoc
- @astrojs/mapa do site
- @astrojs/rss
- @astrojs/tailwind
- @astrojs/alpinejs
- astro-ícone
- astro-seo
- astro-robôs-txt
Além disso, ilustrações SVG e PNG provenientes do Undraw
Este projeto começou inicialmente como uma versão básica do hello-gatsby-starter, mas agora contém mais recursos (modos claro/escuro, páginas de categoria, pesquisa, diagramas, matemática e muito mais!)
Características
- Blog completo com frontmatter (título, descrição, autor, data, imagem, tags)
- Alto desempenho e baixa sobrecarga com Javascript mínimo (AlpineJS)
- Pesquisa de páginas de blog baseada em cliente de texto completo via lunrjs (índice de pesquisa carregado apenas na primeira invocação de pesquisa em uma página)
- Página de índice e páginas individuais para autores, categorias e tags, incluindo paginação
- Suporte para feed RSS, mapa do site e robots.txt
- Design SVG (unDraw, Hero Patterns, Iconify)
- Suporte para destaque de sintaxe de código
- Suporte completo de SEO, incluindo Open Graph, Twitter Cards e Schema.org via JSON-LD
- Suporte total para modos de UI claro e escuro, bem como seguir as preferências do sistema, de acordo com a recomendação TailwindCSS
- Página de erro 404 personalizada
- Exibir equações matemáticas usando KaTeX via remark-math/rehype-katex (entre
$ ... $ ou $$ ... $$ ) - Exibir diagramas Mermaid, Markmap, PlantUML (criados como um bloco de código com linguagem
mermaid , markmap e plantuml ) - Exibir mapa em coordenadas geográficas e nível de zoom usando o componente
Map (também precisa incluir extra: ['map'] é o frontmatter para carregar ativos CSS/JS para a página) - Calcula e mostra o tempo de leitura das postagens do blog
- Ativos CSS/JS de bibliotecas externas carregados somente quando necessário por página e por pacote - sem inchaço desnecessário
- Galeria de fotos e lightbox usando PhotoSwipe (incluindo exibição de tags EXIF)
- Componente carrossel usando Swiper
- Páginas de documentação (modeladas a partir do astro docs starter, mas usando Tailwind)
Pacotes Externos
O início usa os seguintes pacotes externos:
- Astro
- Texto datilografado
- TailwindCSS e TailwindUI
- Iconificar
- Padrões de herói
- unDraw para ilustrações
- MDX e Markdown
- Schema.org e JSON para vinculação de dados, tipo verificado usando esquema-dts
- Gráfico aberto usado pelo Facebook
- Cartões do Twitter
- Alpine JS
- Pesquisa local de texto completo usando Lunr
- Equações matemáticas usando KaTeX via remark-math e rehype-katex
- Diagramas usando Mermaid, Markmap e PlantUML
- Abra o mapa de ruas usando o Leaflet
- tempo de leitura
- FotoSwipe
- exifr
- Deslizante
- Observação Emoji
Ele segue a arquitetura JAMstack construindo automaticamente uma versão estática do repositório Git. A demonstração é implantada nas páginas do Github.
Estrutura do Projeto
Dentro deste starter, você verá as seguintes pastas e arquivos:
/
├── public/
│ └── favicon.ico
├── src/
│ ├── assets/
│ │ ├── image.png
│ │ └── gallery/
│ │ └── gallery-name/
│ │ └── image.jpg
│ ├── components/
│ │ └── header.astro
│ ├── content/
│ │ ├── blog/
│ │ | └── 2022-08-01-post.md
│ │ ├── doc/
│ │ | └── documentation-page.md
| │ └── config.ts
│ ├── layouts/
│ │ ├── base.astro
│ │ ├── blog.astro
│ │ └── doc.astro
│ ├── pages/
│ │ ├── index.astro
│ │ └── contact.astro
│ └── config.ts
└── package.json
Astro procura arquivos .astro , .md ou .mdx no diretório src/pages/ . Cada página é exposta como uma rota com base no nome do arquivo.
src/components/ é onde colocamos quaisquer componentes Astro e da mesma forma src/layouts/ para layouts.
As imagens podem ser colocadas em src/assets/ .
O conteúdo do blog e da documentação é criado como coleções de arquivos Markdown ou MDX em src/content .
Quaisquer ativos estáticos, por exemplo. imagens, podem ser colocadas no diretório public/ .
? Comandos
Todos os comandos são executados na raiz do projeto, em um terminal:
| Comando | Ação |
|---|
pnpm install | Instala dependências |
pnpm dev | Inicia o servidor de desenvolvimento local em localhost:3000 |
pnpm build | Crie seu site de produção para ./dist/ |
pnpm preview | Visualize seu build localmente, antes de implantar |
pnpm lint | Imprima bem o código-fonte |
pnpm check | Verifique se há erros no código-fonte |
pnpm astro ... | Execute comandos CLI como astro add , astro preview |
pnpm astro --help | Obtenha ajuda usando o Astro CLI |
Histórico de lançamento
- 1.0.0: Lançamento Inicial
- 1.0.1: Imagens sociais movidas para src, processamento de coverImage aprimorado
- 1.0.2: Atualizar pacotes para o mais recente
- 1.1.0: Atualização para astro v2.x, agora funciona com os nós 18 e 19
- 2.0.0: Nova versão com suporte às coleções Astro! Esclareceu também que este é um tema polivalente. A pesquisa agora pode incluir páginas Markdown e MDX!
- 2.0.1: Capturas de tela atualizadas e página de destino aprimorada.
- 2.1.0: atualizado para os pacotes mais recentes, links de desenvolvimento fixos, recursos de backport do blog pessoal, incluindo links Próximo/Anterior, suporte para galeria de fotos em Markdown e controle de paginação aprimorado.
- 2.2.0: Corrigidos erros de lint, mapa reimplementado, lightbox e carrossel para usar pacotes de folheto, photoswipe e swiper em vez de depender de CDN externo.
- 2.2.1: Atualização para astro 2.0.10, problema fixo de carregamento de ativos com base
- 2.3.0: Layout removido do conteúdo do blog e do documento
- 2.4.0:
@astrojs/images agora suporta svg , então não há necessidade de tratamento especial - 2.4.1: Use frontmatter renderizado para postagens de blogs e documentos, corrige problemas com diagramas que não são renderizados.
- 2.4.2: Pacotes atualizados
- 3.0.0: Atualização principal:
- Use o novo suporte de ativos otimizado para Astro
- novo logotipo do Astro
- filtragem otimizada de pós-rascunho
- galeria limpa
- corrigiu erros de SEO
- limpou erros de lint
- migrou autores e categorias para coleções e utiliza integridade referencial baseada no Astro 2.5.0
- converteu links sociais em uma coleta de dados (requer Astro >2.5.0)
- metadados de favicon e cabeçalho atualizados
- melhorar a pesquisa para incluir documentação
- 3.1.0: Atualização de aprimoramento:
- Gerenciador de pacotes migrado de yarn para pnpm
- Base de referência para links principais
- Adicionado eslint e mais bonito com plugins
- Corrigido erro de atributos de imagem no componente SEO
- Tsconfig atualizado para corresponder ao astro strict
- Atualizar link CSS do Katex
- Corrigido o autor que não aparecia no cartão do blog
- Adicionado suporte Markdoc
- 3.1.1: Pequena atualização:
- Imagens de carregamento lento
- Apoie o emoji do Github via emoji de observação
- 3.1.2: Pequenas correções:
- Verifique se há categorias nulas
- Página de contato ligeiramente melhorada
- Processamento seguinte/anterior aprimorado
- Pacotes atualizados
- Reduza o tamanho do botão de pesquisa para acomodar a largura mínima
- Opção de imagem alterada para páginas de object-contain para object-cover
- Site.webmanifest corrigido
- 3.1.3: Pequenas correções:
- Atualize para
@astrojs/markdoc 0.4.x e astro mais recente - Declaração de adereços corrigida em [slug].astro
- arquivo de amostra Markdoc desativado devido a este problema: withastro/astro#7520
- 3.1.4: Melhoria menor:
- Processamento unificado de imagens para SVG e bitmaps
- Transições de visualização habilitadas
- 3.1.5: Pequenas melhorias:
- Atualize para a versão mais recente dos pacotes
- Corrigido pequeno erro de verificação astrológica
- 3.2.0: Grande melhoria:
- Atualizado para Astro 3.x
- Implementar política permissiva de segurança de conteúdo
- 3.2.1: Melhoria menor:
- Pacotes atualizados, erros de verificação astro resolvidos
- 3.2.2: Pequenas melhorias:
- Pacotes atualizados
- Tipo de retorno json.ts corrigido para pesquisa
- 3.2.3: Manutenção:
- Corrigida a sereia v9 que não funcionava mais ao atualizar para a versão mais recente do sereia
- Pacotes de atualização
- 3.2.4: Pequenas melhorias:
- 3.2.5: Pequenas melhorias:
- Pacotes de atualização
- Remover sereia.initialize()
- 3.2.6: Manutenção:
- Desative ViewTransition porque não funciona com sereia
- 3.3.0: Manutenção:
- Atualizado para os pacotes mais recentes e astro-icon 1.x
- 3.3.1: Manutenção:
- Atualizado para os pacotes mais recentes e corrigidos erros de verificação astrológica
- 3.3.2: Manutenção:
- Atualizado para os pacotes mais recentes
- Corrigida a pesquisa que não funcionava devido a uma verificação alpina mais rigorosa
- Migrado para astro tsconfig.json padrão
- Corrigidos erros de verificação astrológica
- 3.4.0: Pequenas alterações:
- Pacotes atualizados
- Heroicons substituídos para v2
- RSS aprimorado e índices de pesquisa para incluir nome do autor e e-mail
- Faça o BlogHero aceitar postagens como acessórios em vez de frontmatter
- Páginas Markdown movidas para coleção de conteúdo
- Tipo Frontmatter eliminado
- 4.0.0: Principais mudanças:
- Pacotes atualizados
- Removido @types/photoswipe e photoswipe tsconfig
- Movido para o esquema RSS
- função getPosts()
- tags de esquema
- links da barra lateral gerados automaticamente
- RSS aprimorado e metadados de pesquisa
