diff --git a/src/.vuepress/config/head.js b/src/.vuepress/config/head.js index 3080dad0..7597d61c 100644 --- a/src/.vuepress/config/head.js +++ b/src/.vuepress/config/head.js @@ -62,7 +62,7 @@ module.exports = [ ['link', { rel: 'preconnect', href: 'https://fonts.googleapis.com/' }], ['link', { rel: 'preconnect', href: 'https://c.disquscdn.com/' }], ['link', { rel: 'preconnect', href: 'https://disqus.com/' }], - ['link', { rel: 'preconnect', href: 'http://vue-a11y-test.disqus.com' }], + ['link', { rel: 'preconnect', href: 'https://vue-a11y.disqus.com' }], ['link', { rel: 'preconnect', href: 'https://c.disquscdn.com/next/' }], ['link', { rel: 'preconnect', href: 'https://links.services.disqus.com/api/' }], ['link', { rel: 'preconnect', href: 'https://www.google-analytics.com/' }], diff --git a/src/.vuepress/theme/components/PageEdit.vue b/src/.vuepress/theme/components/PageEdit.vue index d3e9d399..a3dcb385 100644 --- a/src/.vuepress/theme/components/PageEdit.vue +++ b/src/.vuepress/theme/components/PageEdit.vue @@ -10,7 +10,7 @@ class="mb-4 border-b-2 border-accent-primary" />
@@ -35,7 +35,7 @@ export default { setup (_, { root }) { const editLink = computed(() => `https://github.com/${root.$themeConfig.repo}/edit/${root.$themeConfig.docsBranch || 'master'}/${root.$themeConfig.docsDir || 'docs'}/${root.$page.relativePath}`) - const datetime = new Date(root.$page.lastUpdated).toISOString() + const datetime = root.$page.lastUpdated && new Date(root.$page.lastUpdated).toISOString() return { datetime, diff --git a/src/.vuepress/theme/layouts/Post.vue b/src/.vuepress/theme/layouts/Post.vue index ebd91488..969130bb 100644 --- a/src/.vuepress/theme/layouts/Post.vue +++ b/src/.vuepress/theme/layouts/Post.vue @@ -162,7 +162,7 @@ export default { })) const disqus = { - shortname: 'vue-a11y-test', + shortname: 'vue-a11y', lazyConfig: { root: null, rootMargin: '1000px', diff --git a/src/.vuepress/theme/styles/_custom-blocks.scss b/src/.vuepress/theme/styles/_custom-blocks.scss index b63cd343..16db3643 100644 --- a/src/.vuepress/theme/styles/_custom-blocks.scss +++ b/src/.vuepress/theme/styles/_custom-blocks.scss @@ -20,7 +20,7 @@ &:before { @apply absolute text-accent-primary border-none; content: '“'; - top: 20px; + top: -67px; left: -20px; font-size: 150px; font-family: "Helvetica"; diff --git a/src/project/how-to-contribute.md b/src/project/how-to-contribute.md index ed87acd4..a4826243 100644 --- a/src/project/how-to-contribute.md +++ b/src/project/how-to-contribute.md @@ -7,8 +7,6 @@ description: Find out how to contribute to Vue Accessibility project First of all, happy that you are here on this page and thinking about contributing to the project. -**The Vue.js community thanks you.** - ## Development 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 Our intention is to reward the creator for each content published on the site, we will soon achieve this feat. +::: alert warning +We created a guide with tips for creating posts, recipes, or tips. [Posts guide](/project/posts-guide.html#posts-guide) +::: + ## Answering questions 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. diff --git a/src/project/posts-guide.md b/src/project/posts-guide.md new file mode 100644 index 00000000..4bf5cda3 --- /dev/null +++ b/src/project/posts-guide.md @@ -0,0 +1,214 @@ +--- +description: Guidelines for creating content for Vue.js A11y (posts, recipes and tips). +--- +# Posts guide + +## 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](https://github.com/vue-a11y/vue-a11y.com/issues/14) 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](https://github.com/vue-a11y/vue-a11y.com/issues/new?labels=Post&template=new-post.md&title=Post%2FArticle%3A+%5BYour+title%5D) +- [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) +- [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) + +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. + +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; + +::: alert warning +Follow the structure `2020-05-12-my-post.md` +::: + +After completing, create a PR and request review from members for the latest adjustments and merge your post. + +## Frontmatter + +### Blog posts + +::: headerCode +2020-05-12-my-post.md +::: +```yaml +--- +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) +--- +``` + +::: alert warning +Available categories: `[news, aria, wcag, tools, packages, spa, html]`. +::: + +::: alert warning +The tags have no limitations, you can create as many tags as you want `[screen-reader, form, ...]`. +::: + +::: alert tip +Add your author information `src/config/authors.json`, soon we will have a page dedicated to the authors of the site. +::: + +## Best pratices + +- 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](https://axesslab.com/accessibility-according-to-pwd/#wall-of-text); +- Use lazy-load for iframes (IntersectObserver Component) + +## Using custom blocks + +### Figure + Blockquote + Figcaption + +::: headerCode +::: +``` +:::: 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/) +::: +:::: +``` + +:::: 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 + +::: headerCode +::: +``` +::: alert tip +This is a tip +::: + +::: alert note +This is a note +::: + +::: alert warning +This is a warning +::: + +::: alert danger +This is a 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 +::: + +### 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 +::: +:::: +``` + +:::: 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) +`` +``` + +::: headerCode +main.js +::: +```js +import Vue from 'vue' +import VueAnnouncer from '@vue-a11y/announcer' + +Vue.use(VueAnnouncer) +``` + +## Vue in markdown + +### IntersectionObserver component + +Use this component for lazy-load of iframes, images, among other media. + +```vue + + + +``` \ No newline at end of file diff --git a/src/pt/projeto/como-contribuir.md b/src/pt/projeto/como-contribuir.md index 1e55a11e..8b0df3d7 100644 --- a/src/pt/projeto/como-contribuir.md +++ b/src/pt/projeto/como-contribuir.md @@ -33,6 +33,10 @@ Nós também temos uma [issue](https://github.com/vue-a11y/vue-a11y.com/issues/1 Nossa intenção é recompensar o criador por cada conteúdo publicado no site, em breve iremos conseguir esse feito. +::: alert warning +Criamos um guia com dicas para criar postagens, receitas ou dicas. [Guia de postagens](/pt/projeto/guia.html#posts-guide). +::: + ## Respondendo perguntas 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. diff --git a/src/pt/projeto/guia-de-postagens.md b/src/pt/projeto/guia-de-postagens.md new file mode 100644 index 00000000..084473bf --- /dev/null +++ b/src/pt/projeto/guia-de-postagens.md @@ -0,0 +1,215 @@ +--- +description: Diretrizes para criação de conteúdo para o Vue.js A11y (posts, receitas e dicas). +--- + +# Guia de postagens + +## Como iniciar + +Em primeiro lugar, faça uma breve pesquisa para ver se a sua ideia de postagem ainda não existe no site. + +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. + +Depois de verificar, reserve sua postagem abrindo uma issue usando alguns de nossos modelos: + +- [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) +- [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) +- [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) + +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. + +Crie um arquivo markdown no diretório de tipo de postagem específico e no idioma em que a postagem será escrita. + +Por exemplo, conteúdo em português: + +- `src/pt/posts`: Para postagens do blog; +- `src/pt/recipes/widgets`: Para postar widgets; +- `src/pt/recipes/tips`: Para postar dicas rápidas; + +::: alert warning +Siga a estrutura `2020-05-12-meu-post.md` +::: + +Depois de concluir, crie um PR e solicite a revisão dos membros para os ajustes mais recentes e mescle sua postagem. + +## Frontmatter + +### Blog posts + +::: headerCode +2020-05-12-my-post.md +::: +```yaml +--- +title: Título do post # (Obrigatório) - entre 50-65 caracteres +description: Descrição do post # (Obrigatório) - no máximo até 155 caracteres +summary: Resumo do post ou tl;dr # (Opcional) +categories: Array de categorias que combinam com a postagem # (Obrigatório) +tag: Array de tags que correspondem à postagem # (Opcional) +author: Nickname do autor # (Opcional) +date: YYYY/MM/DD HH:ii:ss # (Obrigatório) +--- +``` + +::: alert warning +Categorias disponíveis: `[news, aria, wcag, tools, packages, spa, html]`. +::: + +::: alert warning +As tags não têm limitações, você pode criar quantas tags quiser `[screen-reader, form, ...]`. +::: + +::: alert tip +Adicione suas informações de autor `src/config/authors.json`, em breve teremos uma página dedicada aos autores do site. +::: + +## Boas práticas + +- Use uma hierarquia correta de títulos; +- Adicione a linguagem aos blocos de código (highlight code); +- Texto alternativo em imagens; +- Escreva de forma simples e compreensível; +- [Evite parede de texto](https://axesslab.com/accessibility-according-to-pwd/#wall-of-text); +- Use lazy-load para iframes (Componente IntersectObserver) + +## Usando custom-blocks + +### Figure + Blockquote + Figcaption + +::: headerCode +::: +``` +:::: 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/) +::: +:::: +``` + +:::: 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 + +::: headerCode +::: +``` +::: alert tip +This is a tip +::: + +::: alert note +This is a note +::: + +::: alert warning +This is a warning +::: + +::: alert danger +This is a 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 +::: + +### 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 +::: +:::: +``` + +:::: 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) +`` +``` + +::: headerCode +main.js +::: +```js +import Vue from 'vue' +import VueAnnouncer from '@vue-a11y/announcer' + +Vue.use(VueAnnouncer) +``` + +## Vue in markdown + +### Componente IntersectionObserver + +Use este component para lazy load de iframes, images, dentre outras medias. + +```vue + + + +``` \ No newline at end of file