Skip to content

Commit bba5adb

Browse files
andrepgandrepg
committed
fix article and post single
1 parent a36ac95 commit bba5adb

3 files changed

Lines changed: 87 additions & 71 deletions

File tree

‎blog/2024/create-vuejs-and-markdown-blog.md‎

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -108,7 +108,6 @@ E para renderizar os botões, utilizamos o seguinte código na [HomeView.vue](ht
108108

109109
Com isto conseguimos a estrutura de gerar botões e adicionar quantos necessários, sem a que seja preciso modificar o código a cada novo link. Estas modificações são feitas no arquivo `homepageLinks.js`.
110110

111-
---
112111
# 📝 A estrutura de blog,
113112

114113
Uma vez com extensões instaladas, configurações feitas e uma página inicial capaz de ler um conteúdo básico, partimos para a estrutura do blog e outras criações para possibilitar isto.
@@ -117,7 +116,7 @@ No início comentei que parecia trabalho demais instalar o VitePress. Isso porqu
117116

118117
Copiando estruturas básicas de outros sistemas de blog, a decisão foi feita em prol de uma pasta `blogs`, contendo os artigos agrupados por ano. Assim, seria possível organizar melhor o repositório (já que a frequência de postagens não é, assim, tão grande). A estrutura de pastas ficaria:
119118

120-
```
119+
```text
121120
blogs
122121
|
123122
\_[ 2024 ]
@@ -181,7 +180,7 @@ Note duas funções diferentes: a `fetchPosts` e a `processPosts`. Isso porque `
181180

182181
Ao final, o valor de `sitemap` atribuído a `posts.value` conterá o mapa completo do site, conforme gerado pela automatização. Este arquivo é público aqui no site, e qualquer um pode [consultá-lo aqui](https://github.com/andrepg/andrepg.github.io/blob/main/src/sitemap.js). Na renderização, qualquer layout é possível, baseando uma iteração sobre cada post obtido.
183182

184-
Assim, uma listagem de artigos é possível com poucas linhas de código e um componente extra recebendo informações da postagem, como o [`PostListElement`](https://github.com/andrepg/andrepg.github.io/blob/main/src/components/PostListElement.vue) e sua aplicação no [índice de artigos](https://github.com/andrepg/andrepg.github.io/blob/db998354a4bcd5cc123bd10aaf9c954494f1db97/src/views/PostIndex.vue#L44-L48).
183+
Assim, uma listagem de artigos é possível com poucas linhas de código e um componente extra recebendo informações da postagem, como o [`PostSingleFeature`](https://github.com/andrepg/andrepg.github.io/blob/main/src/components/PostSingleFeature.vue) e sua aplicação no [índice de artigos](https://github.com/andrepg/andrepg.github.io/blob/db998354a4bcd5cc123bd10aaf9c954494f1db97/src/views/PostIndex.vue#L44-L48).
185184

186185
## Post Single
187186
🌐 https://github.com/andrepg/andrepg.github.io/blob/main/src/views/PostSingle.vue
@@ -275,10 +274,10 @@ Elas estão listadas abaixo, e serão atualizadas à medida que forem concluída
275274

276275
Ainda falta para chegar onde quero. Melhorias para implementar e correções a serem feitas. Minha lista e este artigos serão atualizados com o tempo. Estes problemas serão rastreados através do painel de *issues* do repositório também.
277276

278-
- [ ] O rodapé não aparece na página `404`, tirando-a do padrão do website
279-
- [ ] O redirecionamento `404 meta-refresh` para qualquer outra página causa uma piscadela durante o carregamento (em parte pelo rodapé não existente e a falta de um *loading*)
280-
- [ ] Uma transição entre as páginas seria bem-vinda
281-
- [ ] Um carregamento antecipado da imagem de perfil pode acelerar a página
282-
- [ ] Busca com Algolia ou outro mecanismo Javascript local
283-
- [ ] Postagens mais recentes na página inicial do site
284-
- [ ] Adaptar os cartões da página inicial para modo escuro
277+
1. [x] O rodapé não aparece na página `404`, tirando-a do padrão do website
278+
2. [ ] O redirecionamento `404 meta-refresh` para qualquer outra página causa uma piscadela durante o carregamento m parte pelo rodapé não existente e a falta de um *loading*)
279+
3. [ ] Uma transição entre as páginas seria bem-vinda
280+
4. [ ] Um carregamento antecipado da imagem de perfil pode acelerar a página
281+
5. [ ] Busca com Algolia ou outro mecanismo Javascript local
282+
6. [ ] Postagens mais recentes na página inicial do site
283+
7. [ ] Adaptar os cartões da página inicial para modo escuro

‎src/assets/blog.css‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,16 +19,15 @@ h4 {
1919
}
2020

2121
#article-body {
22-
@apply flex flex-col;
22+
@apply flex flex-col max-w-11/12 lg:max-w-8/12 mx-auto;
2323

2424
h1 {
25-
@apply border-b border-base-content/50;
2625
}
2726

2827
h1,
2928
h2,
3029
h3 {
31-
@apply font-serif tracking-wide;
30+
@apply font-serif tracking-wide mt-7 mb-3;
3231
}
3332

3433
/**
@@ -66,7 +65,7 @@ h4 {
6665
* Code styles
6766
*/
6867
.code-toolbar {
69-
@apply text-xs md:text-base lg:text-lg my-8 shadow-lg;
68+
@apply text-xs tracking-wide;
7069

7170
pre {
7271
@apply rounded-xl py-3;

‎src/views/PostSingle.vue‎

Lines changed: 75 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script setup>
2-
import { nextTick, onMounted, ref } from 'vue';
2+
import { nextTick, onBeforeMount, onMounted, ref, watch } from 'vue';
33
import { useRoute } from 'vue-router';
44
import Prism from 'prismjs'
55
@@ -42,73 +42,91 @@ onMounted(async () => {
4242
4343
displayPost.value = true;
4444
45-
nextTick(() => {
46-
Prism.highlightAll()
47-
})
45+
nextTick(() => setTimeout(() => Prism.highlightAll(), 750))
4846
})
4947
</script>
5048
5149
<style scoped src="@/assets/blog.css" />
5250
5351
<template>
54-
<div class="w-full pt-16 pb-10 px-4 md:px-10">
55-
<div :class="[
56-
'mx-auto',
57-
'py-12',
58-
'flex',
59-
'flex-col',
60-
'items-center',
61-
'gap-2',
62-
'justify-center',
63-
]">
64-
<span class="loading loading-dots"></span>
65-
<p>Carregando conteúdo...</p>
66-
</div>
67-
68-
<section :class="[
69-
'card',
70-
'bg-primary/50',
71-
'transition-all',
72-
'duration-300',
73-
'ease-in-out',
74-
'delay-100',
75-
postMetadata.title ? 'opacity-100' : 'opacity-0',
76-
]">
77-
<div class="card-body">
78-
<div class="breadcrumbs">
79-
<ul>
80-
<li><a href="/blog">Blog</a></li>
81-
<li v-if="postMetadata.category"><a href="#">{{ postMetadata.category }}</a></li>
52+
<div class="w-full pt-20 pb-10 px-4 md:px-10">
53+
<Transition name="fade" mode="out-in" :duration="{ enter: 100, leave: 500 }">
54+
<div v-if="!displayPost" key="loading" :class="[
55+
'mx-auto',
56+
'py-12',
57+
'flex',
58+
'flex-col',
59+
'items-center',
60+
'gap-2',
61+
'justify-center',
62+
]">
63+
<span class="loading loading-dots"></span>
64+
<p>Carregando conteúdo...</p>
65+
</div>
66+
67+
<section v-else="displayPost" :class="[
68+
'card',
69+
'bg-primary/50',
70+
'transition-all',
71+
]">
72+
<div class="card-body">
73+
<div class="breadcrumbs">
74+
<ul>
75+
<li><a href="/blog">Blog</a></li>
76+
<li v-if="postMetadata.category"><a href="#">{{ postMetadata.category }}</a></li>
77+
</ul>
78+
</div>
79+
80+
<h1 class="leading-none">{{ postMetadata.title }}</h1>
81+
82+
<hr class="opacity-20 my-1 text-base-content" />
83+
84+
<small :class="[
85+
'text-base',
86+
'leading-tight',
87+
'md:max-w-9/12',
88+
'font-light'
89+
]">
90+
{{ postMetadata.excerpt }}
91+
</small>
92+
93+
<ul class="join join-horizontal flex-wrap gap-1 items-center my-2">
94+
<li v-for="tag in postMetadata.tags" :key="tag">
95+
<BadgeElement class="badge-sm badge-soft shadow-lg">
96+
{{ tag }}
97+
</BadgeElement>
98+
</li>
8299
</ul>
83100
</div>
101+
</section>
102+
</Transition>
84103
85-
<h1 class="leading-none">{{ postMetadata.title }}</h1>
86-
87-
<hr class="opacity-20 my-1 text-base-content" />
88-
89-
<small :class="[
90-
'text-base',
91-
'leading-tight',
92-
'md:max-w-9/12',
93-
'font-light'
94-
]">
95-
{{ postMetadata.excerpt }}
96-
</small>
97-
98-
<ul class="join join-horizontal flex-wrap gap-1 items-center my-2">
99-
<li v-for="tag in postMetadata.tags" :key="tag">
100-
<BadgeElement class="badge-sm badge-soft shadow-lg">
101-
{{ tag }}
102-
</BadgeElement>
103-
</li>
104-
</ul>
105-
</div>
106-
</section>
107-
108-
<article id="article-body" :class="[
104+
<article key="article" id="article-body" :class="[
109105
'text-base',
110106
'line-numbers',
111107
'break-all!',
108+
'opacity-0',
109+
'transition-all',
110+
'ease-in',
111+
!displayPost && 'opacity-0 delay-0 duration-200',
112+
displayPost && 'opacity-100 delay-1000 duration-1000',
112113
]" v-html="postContent.html"></article>
113114
</div>
114-
</template>
115+
</template>
116+
117+
<style scoped>
118+
.fade-enter-active,
119+
.fade-leave-active {
120+
transition: all 0.5s ease;
121+
}
122+
123+
.fade-enter-from {
124+
opacity: 0;
125+
transform: translateY(10px);
126+
}
127+
128+
.fade-leave-to {
129+
opacity: 0;
130+
transform: translateY(-10px);
131+
}
132+
</style>

0 commit comments

Comments
 (0)