Skip to content

Commit 1a5bf5d

Browse files
ktquezktquez
committed
docs(pt): Add posts guide
1 parent 1a81388 commit 1a5bf5d

File tree

5 files changed

+233
-7
lines changed

5 files changed

+233
-7
lines changed

‎src/.vuepress/theme/styles/_custom-blocks.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
&:before {
2121
@apply absolute text-accent-primary border-none;
2222
content: '“';
23-
top: 20px;
23+
top: -67px;
2424
left: -20px;
2525
font-size: 150px;
2626
font-family: "Helvetica";

‎src/project/how-to-contribute.md

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,6 @@ description: Find out how to contribute to Vue Accessibility project
77

88
First of all, happy that you are here on this page and thinking about contributing to the project.
99

10-
**The Vue.js community thanks you.**
11-
1210
## Development
1311

1412
To contribute to the development of the site, you can initially open an issue on Github and report an error or propose a new feature.
@@ -35,6 +33,10 @@ We also have an [issue](https://github.com/vue-a11y/vue-a11y.com/issues/14) with
3533

3634
Our intention is to reward the creator for each content published on the site, we will soon achieve this feat.
3735

36+
::: alert warning
37+
We created a guide with tips for creating posts, recipes, or tips. [Posts guide](/project/posts-guide.html#posts-guide)
38+
:::
39+
3840
## Answering questions
3941

4042
In our [GitHub Problem Tracker](https://github.com/vue-a11y/vue-a11y.com/issues), we are open to answering questions from people of all levels of knowledge.

‎src/project/posts-guide.md

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
---
2+
description: Guidelines for creating content for Vue.js A11y (posts, recipes and tips).
3+
---
14
# Posts guide
25

36
## How to begin
@@ -37,8 +40,8 @@ After completing, create a PR and request review from members for the latest adj
3740
:::
3841
```yaml
3942
---
40-
title: Post title # (Required)
41-
description: Description of the post # (Required)
43+
title: Post title # (Required) - between 50-65 characters
44+
description: Description of the post # (Required) - up to 155 characters
4245
summary: Summary of the post or tl;dr # (Optional)
4346
categories: Array of categories that match the post # (Required)
4447
tag: Array of tags that match the post # (Optional)
@@ -62,8 +65,10 @@ Add your author information `src/config/authors.json`, soon we will have a page
6265
## Best pratices
6366

6467
- Use a correct hierarchy of headings;
65-
- Add the lang to the code blocks;
66-
- Alternative text in images
68+
- Add the lang to the code blocks (highlight code);
69+
- Alternative text in images;
70+
- Write simply and understandably;
71+
- [Avoid wall of text](https://axesslab.com/accessibility-according-to-pwd/#wall-of-text);
6772
- Use lazy-load for iframes (IntersectObserver Component)
6873

6974
## Using custom blocks

‎src/pt/projeto/como-contribuir.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,10 @@ Nós também temos uma [issue](https://github.com/vue-a11y/vue-a11y.com/issues/1
3333

3434
Nossa intenção é recompensar o criador por cada conteúdo publicado no site, em breve iremos conseguir esse feito.
3535

36+
::: alert warning
37+
Criamos um guia com dicas para criar postagens, receitas ou dicas. [Guia de postagens](/pt/projeto/guia.html#posts-guide).
38+
:::
39+
3640
## Respondendo perguntas
3741

3842
Em nosso [Rastreador de problemas do GitHub](https://github.com/vue-a11y/vue-a11y.com/issues) estamos abertos a responder perguntas de pessoas de todos os níveis de conhecimento.

‎src/pt/projeto/guia-de-postagens.md

Lines changed: 215 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,215 @@
1+
---
2+
description: Diretrizes para criação de conteúdo para o Vue.js A11y (posts, receitas e dicas).
3+
---
4+
5+
# Guia de postagens
6+
7+
## Como iniciar
8+
9+
Em primeiro lugar, faça uma breve pesquisa para ver se a sua ideia de postagem ainda não existe no site.
10+
11+
Se você está procurando por ideias, temos uma [issue](https://github.com/vue-a11y/vue-a11y.com/issues/14) com várias ideias de postagem, fique à vontade para reservar um assunto.
12+
13+
Depois de verificar, reserve sua postagem abrindo uma issue usando alguns de nossos modelos:
14+
15+
- [New Post/Article](https://github.com/vue-a11y/vue-a11y.com/issues/new?labels=Post&template=new-post.md&title=Post%2FArticle%3A+%5BYour+title%5D)
16+
- [New Widget (Recipe)](https://github.com/vue-a11y/vue-a11y.com/issues/new?labels=Recipe,Widget&template=new-widget.md&title=Recipe%28widget%29%3A+%5BYour+title%5D)
17+
- [New Tip (Recipe)](https://github.com/vue-a11y/vue-a11y.com/issues/new?labels=Recipe,Tip&template=new-tip.md&title=Recipe%28Tip%29%3A+%5BYour+title%5D)
18+
19+
Após reservar um assunto, fork o repositório, siga as etapas em nosso [README](https://github.com/vue-a11y/vue-a11y.com/blob/master/README.md) para instalação.
20+
21+
Crie um arquivo markdown no diretório de tipo de postagem específico e no idioma em que a postagem será escrita.
22+
23+
Por exemplo, conteúdo em português:
24+
25+
- `src/pt/posts`: Para postagens do blog;
26+
- `src/pt/recipes/widgets`: Para postar widgets;
27+
- `src/pt/recipes/tips`: Para postar dicas rápidas;
28+
29+
::: alert warning
30+
Siga a estrutura `2020-05-12-meu-post.md`
31+
:::
32+
33+
Depois de concluir, crie um PR e solicite a revisão dos membros para os ajustes mais recentes e mescle sua postagem.
34+
35+
## Frontmatter
36+
37+
### Blog posts
38+
39+
::: headerCode
40+
2020-05-12-my-post.md
41+
:::
42+
```yaml
43+
---
44+
title: Título do post # (Obrigatório) - entre 50-65 caracteres
45+
description: Descrição do post # (Obrigatório) - no máximo até 155 caracteres
46+
summary: Resumo do post ou tl;dr # (Opcional)
47+
categories: Array de categorias que combinam com a postagem # (Obrigatório)
48+
tag: Array de tags que correspondem à postagem # (Opcional)
49+
author: Nickname do autor # (Opcional)
50+
date: YYYY/MM/DD HH:ii:ss # (Obrigatório)
51+
---
52+
```
53+
54+
::: alert warning
55+
Categorias disponíveis: `[news, aria, wcag, tools, packages, spa, html]`.
56+
:::
57+
58+
::: alert warning
59+
As tags não têm limitações, você pode criar quantas tags quiser `[screen-reader, form, ...]`.
60+
:::
61+
62+
::: alert tip
63+
Adicione suas informações de autor `src/config/authors.json`, em breve teremos uma página dedicada aos autores do site.
64+
:::
65+
66+
## Boas práticas
67+
68+
- Use uma hierarquia correta de títulos;
69+
- Adicione a linguagem aos blocos de código (highlight code);
70+
- Texto alternativo em imagens;
71+
- Escreva de forma simples e compreensível;
72+
- [Evite parede de texto](https://axesslab.com/accessibility-according-to-pwd/#wall-of-text);
73+
- Use lazy-load para iframes (Componente IntersectObserver)
74+
75+
## Usando custom-blocks
76+
77+
### Figure + Blockquote + Figcaption
78+
79+
::: headerCode
80+
:::
81+
```
82+
:::: fig bq
83+
::: bq
84+
VuePress is composed of two parts: a minimalistic static site generator with a Vue-powered theming system and Plugin API, and a default theme optimized for writing technical documentation.
85+
:::
86+
::: figcap
87+
[Vuepress documentation](https://vuepress.vuejs.org/)
88+
:::
89+
::::
90+
```
91+
92+
:::: fig bq
93+
::: bq
94+
VuePress is composed of two parts: a minimalistic static site generator with a Vue-powered theming system and Plugin API, and a default theme optimized for writing technical documentation.
95+
:::
96+
::: figcap
97+
[Vuepress documentation](https://vuepress.vuejs.org/)
98+
:::
99+
::::
100+
101+
### Tip, Note, Warning, Danger
102+
103+
::: headerCode
104+
:::
105+
```
106+
::: alert tip
107+
This is a tip
108+
:::
109+
110+
::: alert note
111+
This is a note
112+
:::
113+
114+
::: alert warning
115+
This is a warning
116+
:::
117+
118+
::: alert danger
119+
This is a danger
120+
:::
121+
```
122+
123+
::: alert tip
124+
This is a tip
125+
:::
126+
127+
::: alert note
128+
This is a note
129+
:::
130+
131+
::: alert warning
132+
This is a warning
133+
:::
134+
135+
::: alert danger
136+
This is a danger
137+
:::
138+
139+
### Figure + HeaderCode + Code block + Figcaption
140+
141+
```
142+
:::: fig code
143+
::: headerCode
144+
main.js
145+
:::
146+
``js
147+
import Vue from 'vue'
148+
import VueAnnouncer from '@vue-a11y/announcer'
149+
150+
Vue.use(VueAnnouncer)
151+
``
152+
::: figcap
153+
Basic usage of Vue announcer
154+
:::
155+
::::
156+
```
157+
158+
:::: fig code
159+
::: headerCode
160+
main.js
161+
:::
162+
```js
163+
import Vue from 'vue'
164+
import VueAnnouncer from '@vue-a11y/announcer'
165+
166+
Vue.use(VueAnnouncer)
167+
```
168+
::: figcap
169+
Basic usage of Vue announcer
170+
:::
171+
::::
172+
173+
### headerCode + Code block
174+
175+
```
176+
::: headerCode
177+
main.js
178+
:::
179+
``js
180+
import Vue from 'vue'
181+
import VueAnnouncer from '@vue-a11y/announcer'
182+
183+
Vue.use(VueAnnouncer)
184+
``
185+
```
186+
187+
::: headerCode
188+
main.js
189+
:::
190+
```js
191+
import Vue from 'vue'
192+
import VueAnnouncer from '@vue-a11y/announcer'
193+
194+
Vue.use(VueAnnouncer)
195+
```
196+
197+
## Vue in markdown
198+
199+
### Componente IntersectionObserver
200+
201+
Use este component para lazy load de iframes, images, dentre outras medias.
202+
203+
```vue
204+
<intersection-observer>
205+
<template v-slot="data">
206+
<iframe
207+
v-if="data.show"
208+
src="https://caniuse.bitsofco.de/embed/index.html?feat=hidden&periods=future_1,current,past_1,past_2"
209+
height="420"
210+
allowfullscreen="true"
211+
style="width: 100%">
212+
</iframe>
213+
</template>
214+
</intersection-observer>
215+
```

0 commit comments

Comments
 (0)