astro ink

Astro Ink é um tema mínimo criado para atender às necessidades minimalistas de blogs baseados em descontos. Ele vem com quase todos os componentes básicos do Astro que você pode precisar ao criar blogs pessoais leves e de alto desempenho, que se concentram em enviar menos Javascript por padrão.

É extremamente inspirado no tema Hugo's Ink e se esforça para permanecer leve, ao mesmo tempo que fornece a base para um blog bonito e minimalista.

Características

• Minimal, Crisp, Markdown-Blog Ready sempre atualizado para o mais recente do Astro (atualmente versão 2.x ) nos bastidores.
• Svelte Ready - Em seu esforço para permanecer leve, com bom desempenho e mais acessível no ponto de vista do Astro, Svelte é usado para componentes interativos, como o alternador de tema
• Modular - A estrutura é altamente modular, com componentes realizando apenas uma tarefa, e uma função bem executada.
• Astro 2.0 Content Collection + Dynamic Pages - Está pronto com Next.js como páginas dinâmicas, para suportar um sistema de classificação baseado em tags com resultados paginados, todos configuráveis
• Modo escuro e códigos de cores - Suporta modo escuro e mais de 6 modos de cores selecionados usando tailwind.config.js . Você pode passar THEME_KEY com o script/comandos dev ou build ex: THEME_KEY=purpleheart astro build/dev para alterar a cor do tema que está sendo usado. Todos os temas disponíveis podem ser encontrados em tailwind.theme.config.js. Para personalizar a seção do blog, adicione qualquer uma das classes prose-{color} da Tailwind Typography conforme referido aqui
• Netlify CMS - Adicione/edite/atualize todas as postagens no diretório /blog visitando your-site.netlify.com/admin ex: astro-ink.netlify.app/admin com suas credenciais do Netlify. Ele precisa do Netlify Identity (https://app.netlify.com/sites/your-site/settings/identity#registration) e do Git Gateway (https://app.netlify.com/sites/your-site/settings/identity #serviços) ativado.
• Postagens futuras (com ações do Github) - Crie postagens no diretório /src/drafts com uma date futura no formato YYYY-MM-DD e deixe uma ação do Github especialmente criada cuidar da publicação automática na data especificada. Você pode configurar o intervalo de verificação no Github Action.
• Pesquisa do lado do cliente - Permita que seus usuários acessem as postagens do seu blog rapidamente com o recurso de pesquisa do lado do cliente. Lunr.js
• Veja o contra-feat. Redis/Upstash Redis - Configure seu host Redis, coloque sua URL de conexão no console do seu provedor de hospedagem (Vercel, Netlify, etc.) ou em um arquivo .env (desenvolvimento local), remova o comentário do código de conexão aqui e implante. Seu site conta com um contador de visualizações dinâmico. Consulte .env.example para entender os diferentes valores de ambiente que você precisa configurar.
• Página de mídia com suporte para canal YT - Mostre facilmente o conteúdo do seu canal YT na página de mídia apenas colocando o ID do seu canal na constante ytChannelId do arquivo de configuração. Opcionalmente, desative as miniaturas de imagens da lista de vídeos do seu canal do YT definindo USE_MEDIA_THUMBNAIL como false .
• Cartões de autor - Adicione facilmente cartões de autor baseados em postagens ou em todo o site, que incluem um botão para seguir no Twitter, definindo USE_AUTHOR_CARD como true dentro do arquivo de configuração.
• Sobreposição de imagem temática - Opcionalmente, você pode ativar sobreposições, que podem adicionar um belo gradiente temático sobre suas imagens de postagem, definindo USE_POST_IMG_OVERLAY como true dentro do arquivo de configuração.

Como começar?

Basta clonar este modelo e começar a trabalhar a partir do seu clone. Você tem todos os comandos NPM comuns à sua disposição, como dev , build , etc. Consulte package.json para ver uma lista de todos os comandos disponíveis.

Nota: Use npx degit one-aalam/astro-ink para clonar o modelo sem nenhum histórico do git

Nota: Este modelo gera saída de server (pronto para SSR) por padrão. Se você quiser compilações static

• altere output para static do server em astro.config.js
• remover adapter: vercel()
• remova a API do contador de visualizações
• defina USE_VIEW_STATS como false dentro de config.ts

Nota: Antes de executar npm run dev pela primeira vez -

• crie um arquivo .env executando mv .env.example .env (se você estiver em uma distribuição Linux ou Mac)
• defina a variável SITE_URI como SITE_URI=http://localhost:4321 ( onde 4321 é a porta na qual seu projeto está sendo executado )

Construído com tinta Astro

• jamesperkins.dev - Site pessoal do desenvolvedor e instrutor do YouTube James R Perkins
• highlandcows.github.io Blog pessoal de Nick Jacob

conhece um site construído com Astro Ink? Deixe-me saber no Twitter

Quer aprender Astro enquanto constrói o Ink?

Este tema foi inicialmente construído primeiro com uma versão alfa e depois com uma versão beta do Astro Framework. Se você está apenas começando com Astro , você pode realmente aprender Astro enquanto constrói esse mesmo tema seguindo uma série de blogs que escrevi que ensinam Astro desde o início!

Acesse aalam.in/blog e saiba

• Como configurar o Astro e colocá-lo em funcionamento com padrões essenciais para estilo, prototipagem e implantações incrementais
• Gerenciando componentes de apresentação e criando páginas Astro
• Alimentando dados locais e remotos para as páginas Astro
• Colocando interatividade onde você absolutamente não pode viver sem ela no Astro
• Criação de páginas dinâmicas e baseadas em dados e resultados paginados no Astro
• Crie o conteúdo do seu site Astro com CMSs baseados em Git