https://github.com/tuliocll/blog-svelte

Blog, feito em SvelteKit, Open Source!
https://github.com/tuliocll/blog-svelte

blog firebase ghost-cms strapi svelte

Last synced: about 12 hours ago
JSON representation

Blog, feito em SvelteKit, Open Source!

• Host: GitHub
• URL: https://github.com/tuliocll/blog-svelte
• Owner: tuliocll
• Created: 2022-04-28T14:41:39.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2023-06-03T20:25:15.000Z (over 1 year ago)
• Last Synced: 2024-04-13T14:34:12.864Z (9 months ago)
• Topics: blog, firebase, ghost-cms, strapi, svelte
• Language: Svelte
• Homepage: https://tuliocalil.com.br
• Size: 5.97 MB
• Stars: 5
• Watchers: 2
• Forks: 0
• Open Issues: 4
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Blog Frontend Sveltekit | [![Netlify Status](https://api.netlify.com/api/v1/badges/011cef53-0979-4be3-98f9-9a273958bf5a/deploy-status)](https://app.netlify.com/sites/tuliocalil/deploys)



![](preview.gif)

![TypeScript](https://img.shields.io/badge/typescript-%23007ACC.svg?style=for-the-badge&logo=typescript&logoColor=white)

![Svelte](https://img.shields.io/badge/svelte-%23f1413d.svg?style=for-the-badge&logo=svelte&logoColor=white)

![Ghost](https://img.shields.io/badge/ghost-000?style=for-the-badge&logo=ghost&logoColor=%23F7DF1E)

![Firebase](https://img.shields.io/badge/Firebase-039BE5?style=for-the-badge&logo=Firebase&logoColor=white)

![Netlify](https://img.shields.io/badge/netlify-%23000000.svg?style=for-the-badge&logo=netlify&logoColor=#00C7B7)



Frontend do blog https://tuliocalil.com.br desenvolvido em Svelte.

Veja o [post do blog](https://www.tuliocalil.com.br/post/fiz-meu-blog-com-svelte) 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.

- [x] Criar pagina de sobre.

- [ ] Implementar tags nos posts.

- [x] Listar tags na sidebar.

- [ ] Adicionar shimmer na sidebar.

- [ ] Configurar newsletter.

- [x] Adicionar botão de compartilhar.

- [x] Implementar minutos de leitura nas postagens.

- [x] Usar/refatorar writable stores para infos basicas do blog (nome, descricao, etc).

- [x] Refatorar para typescript

- [x] Melhorar acessibilidade

- [x] Melhorar SEO

- [x] Criar feature toggle

- [x] Adicionar Social meta tags

- [ ] Adicionar barra de busca

- [ ] Criar widget para Github e Spotify

## Como rodar

Clone o projeto:

```bash

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

```

Instale as dependencias:

```bash

yarn install

```

Configure o .env.

```bash

cp .env.example .env

```

> Serviços de terceiro:

- Crie uma conta no [Cusdis](https://cusdis.com/) para usar os comentarios.

- Crie uma conta no Google Analytics e [pegue o codigo do GA para usar.](https://developers.google.com/analytics/devguides/reporting/core/v4?hl=pt_br)

- Crie uma conta no Firebase e configure as Envs.

- Para rodar em modo de desenvolvimento:

```

yarn dev

```

## Deploy

```bash

yarn build

```



### Made with 💙 in Bahia, Brasil.