How to begin
First of all, do a brief search to see if your post idea does not yet exist on the site.
If you are looking for ideas, we have an issue (opens new window) with several post ideas, feel free to reserve a subject.
After checking, reserve your post by opening an issue using some of our templates:
- New Post/Article (opens new window)
- New Widget (Recipe) (opens new window)
- New Tip (Recipe) (opens new window)
After booking a subject, fork the repository, follow the steps in our README (opens new window) for installation.
Create a markdown file in the specific post type directory and in the language in which the post will be written.
For example in the English language:
src/posts: For blog posts;
src/recipes/widgets: For posting widgets;
src/recipes/tips: For quick tip posts;
Follow the structure
After completing, create a PR and request review from members for the latest adjustments and merge your post.
--- title: Post title # (Required) - between 50-65 characters description: Description of the post # (Required) - up to 155 characters summary: Summary of the post or tl;dr # (Optional) categories: Array of categories that match the post # (Required) tag: Array of tags that match the post # (Optional) author: author's nickname # (Optional) date: YYYY/MM/DD HH:ii:ss # (Required) ---
[news, aria, wcag, tools, packages, spa, html].
The tags have no limitations, you can create as many tags as you want
[screen-reader, form, ...].
Add your author information
src/config/authors.json, soon we will have a page dedicated to the authors of the site.
- Use a correct hierarchy of headings;
- Add the lang to the code blocks (highlight code);
- Alternative text in images;
- Write simply and understandably;
- Avoid wall of text (opens new window);
- Use lazy-load for iframes (IntersectObserver Component)
Using custom blocks
Figure + Blockquote + Figcaption
:::: fig bq ::: bq 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. ::: ::: figcap [Vuepress documentation](https://vuepress.vuejs.org/) ::: ::::
Tip, Note, Warning, Danger
::: alert tip This is a tip ::: ::: alert note This is a note ::: ::: alert warning This is a warning ::: ::: alert danger This is a danger :::
This is a tip
This is a note
This is a warning
This is a danger
Figure + HeaderCode + Code block + Figcaption
:::: fig code ::: headerCode main.js ::: ``js import Vue from 'vue' import VueAnnouncer from '@vue-a11y/announcer' Vue.use(VueAnnouncer) `` ::: figcap Basic usage of Vue announcer ::: ::::
headerCode + Code block
::: headerCode main.js ```js import Vue from 'vue' import VueAnnouncer from '@vue-a11y/announcer' Vue.use(VueAnnouncer) `` :::
import Vue from 'vue' import VueAnnouncer from '@vue-a11y/announcer' Vue.use(VueAnnouncer)
Vue in markdown
Use this component for lazy-load of iframes, images, among other media.
<intersection-observer> <template v-slot="data"> <iframe v-if="data.show" src="https://caniuse.bitsofco.de/embed/index.html?feat=hidden&periods=future_1,current,past_1,past_2" height="420" allowfullscreen="true" style="width: 100%"> </iframe> </template> </intersection-observer>