Skip to content

Commit 1a81388

Browse files
ktquezktquez
committed
Add page posts guide
1 parent 493e2f6 commit 1a81388

File tree

1 file changed

+209
-0
lines changed

1 file changed

+209
-0
lines changed

‎src/project/posts-guide.md

Lines changed: 209 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,209 @@
1+
# Posts guide
2+
3+
## How to begin
4+
5+
First of all, do a brief search to see if your post idea does not yet exist on the site.
6+
7+
If you are looking for ideas, we have an [issue](https://github.com/vue-a11y/vue-a11y.com/issues/14) with several post ideas, feel free to reserve a subject.
8+
9+
After checking, reserve your post by opening an issue using some of our templates:
10+
11+
- [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)
12+
- [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)
13+
- [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)
14+
15+
After booking a subject, fork the repository, follow the steps in our [README](https://github.com/vue-a11y/vue-a11y.com/blob/master/README.md) for installation.
16+
17+
Create a markdown file in the specific post type directory and in the language in which the post will be written.
18+
19+
For example in the English language:
20+
21+
- `src/posts`: For blog posts;
22+
- `src/recipes/widgets`: For posting widgets;
23+
- `src/recipes/tips`: For quick tip posts;
24+
25+
::: alert warning
26+
Follow the structure `2020-05-12-my-post.md`
27+
:::
28+
29+
After completing, create a PR and request review from members for the latest adjustments and merge your post.
30+
31+
## Frontmatter
32+
33+
### Blog posts
34+
35+
::: headerCode
36+
2020-05-12-my-post.md
37+
:::
38+
```yaml
39+
---
40+
title: Post title # (Required)
41+
description: Description of the post # (Required)
42+
summary: Summary of the post or tl;dr # (Optional)
43+
categories: Array of categories that match the post # (Required)
44+
tag: Array of tags that match the post # (Optional)
45+
author: author's nickname # (Optional)
46+
date: YYYY/MM/DD HH:ii:ss # (Required)
47+
---
48+
```
49+
50+
::: alert warning
51+
Available categories: `[news, aria, wcag, tools, packages, spa, html]`.
52+
:::
53+
54+
::: alert warning
55+
The tags have no limitations, you can create as many tags as you want `[screen-reader, form, ...]`.
56+
:::
57+
58+
::: alert tip
59+
Add your author information `src/config/authors.json`, soon we will have a page dedicated to the authors of the site.
60+
:::
61+
62+
## Best pratices
63+
64+
- Use a correct hierarchy of headings;
65+
- Add the lang to the code blocks;
66+
- Alternative text in images
67+
- Use lazy-load for iframes (IntersectObserver Component)
68+
69+
## Using custom blocks
70+
71+
### Figure + Blockquote + Figcaption
72+
73+
::: headerCode
74+
:::
75+
```
76+
:::: fig bq
77+
::: bq
78+
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.
79+
:::
80+
::: figcap
81+
[Vuepress documentation](https://vuepress.vuejs.org/)
82+
:::
83+
::::
84+
```
85+
86+
:::: fig bq
87+
::: bq
88+
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.
89+
:::
90+
::: figcap
91+
[Vuepress documentation](https://vuepress.vuejs.org/)
92+
:::
93+
::::
94+
95+
### Tip, Note, Warning, Danger
96+
97+
::: headerCode
98+
:::
99+
```
100+
::: alert tip
101+
This is a tip
102+
:::
103+
104+
::: alert note
105+
This is a note
106+
:::
107+
108+
::: alert warning
109+
This is a warning
110+
:::
111+
112+
::: alert danger
113+
This is a danger
114+
:::
115+
```
116+
117+
::: alert tip
118+
This is a tip
119+
:::
120+
121+
::: alert note
122+
This is a note
123+
:::
124+
125+
::: alert warning
126+
This is a warning
127+
:::
128+
129+
::: alert danger
130+
This is a danger
131+
:::
132+
133+
### Figure + HeaderCode + Code block + Figcaption
134+
135+
```
136+
:::: fig code
137+
::: headerCode
138+
main.js
139+
:::
140+
``js
141+
import Vue from 'vue'
142+
import VueAnnouncer from '@vue-a11y/announcer'
143+
144+
Vue.use(VueAnnouncer)
145+
``
146+
::: figcap
147+
Basic usage of Vue announcer
148+
:::
149+
::::
150+
```
151+
152+
:::: fig code
153+
::: headerCode
154+
main.js
155+
:::
156+
```js
157+
import Vue from 'vue'
158+
import VueAnnouncer from '@vue-a11y/announcer'
159+
160+
Vue.use(VueAnnouncer)
161+
```
162+
::: figcap
163+
Basic usage of Vue announcer
164+
:::
165+
::::
166+
167+
### headerCode + Code block
168+
169+
```
170+
::: headerCode
171+
main.js
172+
:::
173+
``js
174+
import Vue from 'vue'
175+
import VueAnnouncer from '@vue-a11y/announcer'
176+
177+
Vue.use(VueAnnouncer)
178+
``
179+
```
180+
181+
::: headerCode
182+
main.js
183+
:::
184+
```js
185+
import Vue from 'vue'
186+
import VueAnnouncer from '@vue-a11y/announcer'
187+
188+
Vue.use(VueAnnouncer)
189+
```
190+
191+
## Vue in markdown
192+
193+
### IntersectionObserver component
194+
195+
Use this component for lazy-load of iframes, images, among other media.
196+
197+
```vue
198+
<intersection-observer>
199+
<template v-slot="data">
200+
<iframe
201+
v-if="data.show"
202+
src="https://caniuse.bitsofco.de/embed/index.html?feat=hidden&periods=future_1,current,past_1,past_2"
203+
height="420"
204+
allowfullscreen="true"
205+
style="width: 100%">
206+
</iframe>
207+
</template>
208+
</intersection-observer>
209+
```

0 commit comments

Comments
 (0)