Nesse humilde blog vou postar as coisas interessantes que eu aprendi ou fiz em engenharia de software, desenvolvimento de jogos, automação com programação e, quem sabe, na vida também.
Home Page: https://yudi-azvd.github.io/blog
Oi
Talvez seja interessante adotar a mesma convenção de posts. Se a tag começar com - ela não deve ir pra produção.
# Cria um novo arquivo .md de post em posts/drafts com o template
# básico de post
yarn post:new
# Publica um um post subindo-o para ambiente de produção ou stage,
# sei lá. Ainda move o post para a pasta de ano correto de acordo
# com a data atual de execução e o renomeia corretamente.
yarn post:publish <nome do post rascunho>Usar as issues do github pra guardar os comentários. A ideia seria que uma issue com o rótulo comment-section armazene os comentários de determinado post.
Usuários só poderiam comentar se tivessem conta no GitHub ou no GitLab(?).
Como fazer autenticação com esses apps?
Como relacionar o ID da issue com o ID do post?
E se eu usar Firebase?
Seria bom renderizar os comentários apenas na build de produção.
Em desenvolvimento, eu teria uns comentários fakes pra não ficar pesando na API do GitHub
Um comentário postado por um usuário deveria engatilhar uma nova build do blog. Parece uma porta de entrada pra usuários maliciosos.
^ Não necessariamente. A parte de comentários não precisa ser feita em build. Pode ser uma mistura de client rendered e "server" rendered. O server na verdade poderia ser o Firebase
## Um subtítulodeveria gerar um HTML mais ou menos assim
<h2>
<a href=".../blog/#um-subtítulo"> Um subtítulo </a>
</h2>Placeholder temporário: um círculo com Y maiúsculo. Logo em preto e branco.
class PostsRepository {
getAll(): Post[] // ordenado por data
getAllIds(): string[] // ordenado?
getOneById(): Post
// ...?
}Se for um script (se for desse jeito, tá relacionado ao #17):
yarn sh:update-yudi-azvd-readme # shell ou javascriptOu alguma coisa assim. Seria bom deixar na mensagem de commit o slug do post ou alguma coisa assim.
Riscado assim
Talvez remark-gfm resolva
FrontMatterParser tá fazendo por enquanto)Devo estudar a possibilidade executar esses passos fora do npm run dev.
A largura não toma todo o espaço da tela.
Erro impresso no terminal:
info - using build directory: /home/yudi/Documents/programming/projects/blog/.next
warn - rewrites, redirects, and headers are not applied when exporting your application, detected (rewrites). See more info here: https://nextjs.org/docs/messages/export-no-custom-routes
info - Copying "static build" directory
info - No "exportPathMap" found in "/home/yudi/Documents/programming/projects/blog/next.config.js". Generating map from "./pages"
Error: Image Optimization using Next.js' default loader is not compatible with `next export`.
Possible solutions:
- Use `next start` to run a server, which includes the Image Optimization API.
- Use any provider which supports Image Optimization (like Vercel).
- Configure a third-party loader in `next.config.js`.
- Use the `loader` prop for `next/image`.
Read more: https://nextjs.org/docs/messages/export-image-api
at /home/yudi/Documents/programming/projects/blog/node_modules/next/dist/export/index.js:256:23
at async Span.traceAsyncFn (/home/yudi/Documents/programming/projects/blog/node_modules/next/dist/trace/trace.js:74:20)
To sem paciência pra usar Image do Next, então vou usar img normal até entender como Image funciona. Mais sobre esse problema nos docs.
Por enquanto essa substituição foi necessária apenas em Header.
Na página de uma tag específica, o link para os post fica no "formato antigo"
posts/2020/2020-01-02-um-titulo-de-post
em vez de
posts/um-titulo-de-post
Provavelmente relacionado com #16.
Pode ser uma combinação do título e excerpt para o metatag description.
Além disso, talvez seja interessante adicionar uma imagem como "thumbnail" do blog
og:Tentar usar esse css como base. Outro jeito é olhar no inspecionador pra essa página do Markdown Cheatsheet.
Aparentemente vou ter que fazer na mão, estilizando as tags na componente MarkdownContent.
Como fazer pra não ficar repetindo esses estilos no MarkdownContent, no blog e o no restante do site?
Tomar cuidado com a função loadPost, ela internamente usa postsDirectory como base para
ler o conteúdo dos arquivos.
Algo assim:
Esse é o fim do conteúdo de um post. Até a próxima!
[Link para o post anterior] | [Link para o próximo post]
eu acho...
Navegação com os links
Como fazer?
Com a mensagem
Eita, não era pra você estar vendo isso.
Tente voltar para a [página inicial](link)
Ou algo parecido.
Dar uma olhada na documentação do Next
<Head>
<meta description content={post.excerpt}>
</Head>Mais informações:
yudi-azvd/yudi-azvd a com os links dos últimos três posts de acordo com o feed RSS?Tô usando muito
post.id.replace(/^.*\d{4}-\d{2}-\d{2}-/, '')Para obter o slug de um post. Melhor: post.slug().
Se algum leitor fizer esse percurso:
/blog/tags/bash => /blog/posts/Automação com Bash
e clicar no botão de voltar, o que vai acontecer, atualmente, é isso:
/blog/posts/
Mas o leitor pode estar esperando isso
/blog/tags/bash
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.