Vuepress theme with styles to light and dark mode + announcer, skip-to and more

Author: ktquez

.eslintrc.js

@@ -0,0 +1,21 @@
+module.exports = {
+  root: true,
+  env: {
+    browser: true,
+    node: true
+  },
+  plugins: [
+    'vuejs-accessibility'
+  ],
+  extends: [
+    'plugin:vue/recommended',
+    '@vue/standard',
+    'plugin:vuejs-accessibility/recommended'
+  ],
+  parserOptions: {
+    parser: 'babel-eslint'
+  },
+  rules: {
+    'no-console': 'off'
+  }  
+}

.gitignore

@@ -0,0 +1,2 @@
+node_modules
+dist

README.md

@@ -0,0 +1,2 @@
+# vuepress-theme-default-vue-a11y
+Vuepress theme for vue-a11y documentation

config/plugins.js

@@ -0,0 +1,42 @@
+const md = require('markdown-it')()
+let caption = ''
+
+module.exports = [
+  [
+    'vuepress-plugin-code-copy',
+    {
+      staticIcon: true,
+      color: 'currentColor'
+    }
+  ],
+  [
+    'container',
+    {
+      type: 'figurecode',
+      defaultTitle: '',
+      render: (tokens, idx) => {
+        const m = tokens[idx].info.trim().match(/^figurecode\s+(.*)$/)
+        if (tokens[idx].nesting === 1) {
+          caption = m ? md.utils.escapeHtml(m[1]) : ''
+          // aria-label for macOS VoiceOver + Chrome
+          // see more: https://www.scottohara.me/blog/2019/01/21/how-do-you-figure.html
+          return `
+          <figure
+            aria-label="${caption}"
+            class="figurecode"
+          >
+            <div class="figurecode__content">
+        `
+        } else {
+          return `
+            </div>
+            <figcaption class="figurecode__caption">
+              ${caption}
+            </figcaption>
+          </figure>
+        `
+        }
+      }
+    }
+  ]
+]

docs/.vuepress/config.js

@@ -0,0 +1,39 @@
+module.exports = {
+  theme: require.resolve('../../'),
+  title: 'Vue A11y theme',
+  head: [
+    ['meta', { name: 'theme-color', content: '#fff' }],
+  ],
+  themeConfig: {
+    home: false,
+    repo: 'vue-a11y/vuepress-theme-vue-a11y-docs',
+    docsDir: 'docs',
+    docsBranch: 'master',
+    editLinks: true,
+    // TODO: Fazer o color mode seja totalmente flexível através daqui e dos locales
+    colorMode: {},
+    // TODO: Fazer o skip-to seja totalmente flexível através daqui e dos locales
+    skipTo: {},
+    locales: {
+      '/': {
+        editLinkText: 'Edit this page on GitHub',
+        nav: [
+          {
+            text: 'Guide',
+            link: '/guide/'
+          }
+        ],
+        sidebar: [
+          '/',
+          {
+            title: 'Guide',
+            collapsable: false,
+            children: [
+              '/guide/'
+            ]
+          }
+        ]
+      }
+    }
+  }
+}

docs/.vuepress/public/logo.png

@@ -0,0 +1,24 @@
+---
+home: true
+heroImage: /logo.png
+heroText: Vue A11y theme
+tagline: Vuepress theme for Vue A11y documentations
+actionText: Get Started →
+actionLink: /guide/
+footer: MIT Licensed | With 💖 and Vuepress
+---
+
+<div class="features">
+  <div class="feature">
+    <h2>Vue a11y packages</h2>
+    <p>Some text here.</p>
+  </div>
+  <div class="feature">
+    <h2>Some title here</h2>
+    <p>Some text here.</p>
+  </div>
+  <div class="feature">
+    <h2>Some title here</h2>
+    <p>Some text here.</p>
+  </div>
+</div>

docs/README.md

@@ -0,0 +1,69 @@
+# Test page
+
+::: figurecode my caption
+```html
+<button aria-label="close" aria-describedby="descriptionClose">X</button>
+<div id="descriptionClose" hidden>
+  Se você cancelar perderá as informações inseridas no campo XXX e será 
+  enviado para a página anterior.
+</div>
+```
+:::
+
+
+---
+
+``` js{4}
+export default {
+  data () {
+    return {
+      msg: 'Highlighted!'
+    }
+  }
+}
+```
+
+---
+
+::: tip
+This is a tip
+:::
+
+::: warning
+This is a warning
+:::
+
+::: danger
+This is a dangerous warning
+:::
+
+::: details
+This is a details block, which does not work in IE / Edge
+:::
+
+---
+
+| Tables        | Are           | Cool  |
+| ------------- |:-------------:| -----:|
+| col 3 is      | right-aligned | $1600 |
+| col 2 is      | centered      |   $12 |
+| zebra stripes | are neat      |    $1 |
+| col 3 is      | right-aligned | $1600 |
+| col 2 is      | centered      |   $12 |
+| zebra stripes | are neat      |    $1 |
+
+---
+
+:tada: :100:
+
+---
+
+::: danger STOP
+Danger zone, do not proceed
+:::
+
+::: details Click me to view the code
+```js
+console.log('Hello, VuePress!')
+```
+:::

docs/guide/README.md

@@ -0,0 +1,12 @@
+import VueAnnouncer from '@vue-a11y/announcer'
+import VueDarkMode from '@vue-a11y/dark-mode'
+import 'a11y-css-reset/combo.css'
+import VueSkipTo from 'vue-skip-to'
+
+export default ({ Vue, router, isServer }) => {
+  if (!isServer) {
+    Vue.use(VueSkipTo)
+    Vue.use(VueDarkMode)
+    Vue.use(VueAnnouncer, {}, router)
+  }
+}

enhanceApp.js

@@ -0,0 +1,6 @@
+const plugins = require('./config/plugins')
+
+module.exports = {
+  extend: '@vuepress/theme-default',
+  plugins
+}

index.js

@@ -0,0 +1,53 @@
+<template>
+  <div>
+    <VueSkipTo />
+    <ParentLayout>
+      <template #sidebar-top>
+        <VueDarkMode class="btn-color-mode">
+          <template v-slot="{ mode }">
+            Color mode: <span data-cy="color-mode">{{ mode }}</span>
+          </template>
+        </VueDarkMode>
+      </template>
+      <template #page-bottom>
+        <VueAnnouncer />
+      </template>
+    </ParentLayout>
+  </div>
+</template>
+
+<script>
+import ParentLayout from '@parent-theme/layouts/Layout.vue'
+
+export default {
+  components: {
+    ParentLayout
+  },
+
+  mounted () {
+    this.setMainId()
+  },
+
+  methods: {
+    setMainId () {
+      const main = document.getElementsByTagName('main')
+      if (main.length) main[0].setAttribute('id', 'main')
+    }
+  }
+}
+</script>
+
+<style lang="stylus" src="../styles/content.styl"></style>
+<style lang="stylus" src="../styles/override-components.styl"></style>
+<style lang="stylus">
+.btn-color-mode
+  margin-top: 1.5rem
+  margin-left: 1.5rem
+  &.vue-dark-mode
+    border: 2px solid #666
+    border-radius: 6px
+    padding: 8px 14px
+    font-weight: bold
+    span
+      text-transform: capitalize
+</style>