Skip to content

tuliocll/blog-svelte

Repository files navigation

Blog Frontend Sveltekit | Netlify Status

TypeScript Svelte Ghost Firebase Netlify

Frontend do blog https://tuliocalil.com.br desenvolvido em Svelte. Veja o post do blog com a explicação completa do projeto.

Features

  • Sveltekit
  • Listagem de postagens com paginação (isso é uma feature ?).
  • Layout responsivo (isso é uma feature ?).
  • Comentarios e contador de comentarios nas postagens.
  • Tempo de leitura do post.
  • Google Analytics.
  • Google Performance Monitor.
  • Image Lazy load e placeholder.
  • Pagina de erro customizada.
  • Code highlight.
  • Image zoom.
  • Reações nas postagens.
  • SEO otimizado.
  • Preview ao compartilhar links.
  • Botoes de compartilhamento nas postagens.
  • Carrousel de ofertas (Amazon).
  • Sitemap gerado automaticamente.
  • Filtro por categorias

Roadmap

  • Atualizar Sveltekit.
  • Criar pagina de sobre.
  • Implementar tags nos posts.
  • Listar tags na sidebar.
  • Adicionar shimmer na sidebar.
  • Configurar newsletter.
  • Adicionar botão de compartilhar.
  • Implementar minutos de leitura nas postagens.
  • Usar/refatorar writable stores para infos basicas do blog (nome, descricao, etc).
  • Refatorar para typescript
  • Melhorar acessibilidade
  • Melhorar SEO
  • Criar feature toggle
  • Adicionar Social meta tags
  • Adicionar barra de busca
  • Criar widget para Github e Spotify

Como rodar

Clone o projeto:

git clone [email protected]:tuliocll/blog-svelte.git

Instale as dependencias:

yarn install

Configure o .env.

cp .env.example .env

Serviços de terceiro:

  • Crie uma conta no Cusdis para usar os comentarios.

  • Crie uma conta no Google Analytics e pegue o codigo do GA para usar.

  • Crie uma conta no Firebase e configure as Envs.

  • Para rodar em modo de desenvolvimento:

yarn dev

Deploy

yarn build

Made with 💙 in Bahia, Brasil.