feat: Add documentation by Vuepress Vue a11y theme

demo/src/App.vue

@@ -3,6 +3,7 @@
     <div id="nav">
       <router-link to="/post/1">Post 1</router-link> |
       <router-link to="/post/2">Post 2</router-link> |
+      <router-link to="/post/2?fbclid=khbkhbkh">Post 2 with query</router-link> |
       <a href="/post/3">Post (testing the lazy load disqus)</a>
     </div>
     <router-view/>

demo/src/views/Post.vue

@@ -54,7 +54,12 @@
     <hr>
 
     <section>
-      <VueDisqus ref="disqus" shortname="ktquez" :lang="lang" @new-comment="newComment" />
+      <VueDisqus
+        ref="disqus"
+        shortname="ktquez"
+        :lang="lang"
+        @new-comment="newComment"
+      />
     </section>
   </article>
 </template>

docs/.vuepress/config.js

@@ -0,0 +1,46 @@
+module.exports = {
+  theme: 'default-vue-a11y',
+  title: 'Vue Disqus',
+  description: 'Vue component to integrate Disqus comments in your application, with support for SPA',
+  themeConfig: {
+    home: false,
+    repo: 'vue-a11y/eslint-plugin-vuejs-accessibility',
+    docsDir: 'docs',
+    docsBranch: 'master',
+    editLinks: true,
+    locales: {
+      '/': {
+        editLinkText: 'Edit this page on GitHub',
+        sidebar: [
+          {
+            title: 'Guide',
+            collapsable: false,
+            children: [
+              '/',
+              '/guide/',
+              '/guide/props.md',
+              '/guide/callbacks.md'
+            ]
+          },
+          {
+            title: 'Components',
+            collapsable: false,
+            children: [
+              '/components/disqus.md',
+              '/components/disqus-count.md'
+            ]
+          },
+          {
+            title: 'How to',
+            collapsable: false,
+            children: [
+              '/howto/cdn.md',
+              '/howto/nuxt.md',
+              '/howto/vuepress.md'
+            ]
+          }
+        ]
+      }
+    }
+  }
+};

docs/.vuepress/styles/palette.styl

@@ -0,0 +1,2 @@
+$contentMaxWidth = 960px
+$bgCode = #eee

docs/README.md

@@ -0,0 +1,44 @@
+# Introduction
+
+Vue component to integrate Disqus comments in your application, with support for SPA.
+
+## Features
+
+- Events for all disqus callbacks;
+- Lazy load (by IntersectionObserver);
+- Support a Page and SSO config with props validator;
+- Update disqus automatically when language changes occur;
+- Possibility to use the reset method (using ref);
+- DisqusCount component;
+
+## Contributing
+
+- Check the open issues or open a new issue to start a discussion around your feature idea or the bug you found;
+- Fork repository, make changes, add your name and link in the authors session CONTRIBUTING.md;
+- Send a pull request;
+
+### Donate
+
+<br> 
+
+<a href="https://www.buymeacoffee.com/ktquez" target="_blank" aria-label="Buy Me A Coffee">
+  <img src="https://cdn.buymeacoffee.com/buttons/lato-black.png" alt="Buy Me A Coffee" style="height: 51px !important;width: 217px !important;" >
+</a>
+
+<br> 
+
+<a href="https://ko-fi.com/O5O31PRAX" target="_blank" aria-label="Support me on Ko-fi">
+  <img src="https://www.ko-fi.com/img/githubbutton_sm.svg" alt="Support me on Ko-fi" style="height: 51px !important;width: 217px !important;" >
+</a>
+
+::: tip
+If you want a faster communication, find me on twitter [@ktquez](https://twitter.com/ktquez)
+:::
+
+## License
+
+VueDisqus is open-sourced package licensed under the [MIT](https://github.com/ktquez/vue-disqus/blob/master/LICENSE) license
+
+---
+
+**Thank you for using**

docs/components/disqus-count.md

@@ -0,0 +1,3 @@
+# DisqusCount
+
+You can import the `DisqusCount` component individually.

docs/components/disqus.md

@@ -0,0 +1,25 @@
+# Disqus
+
+You can import the `Disqus` component individually.
+
+```vue
+<template>
+  <div>
+    <!-- ommited -->
+    <div class='comments'>
+      <Disqus shortname='your_shortname_disqus' />
+    </div>
+  </div>
+</template>
+
+<script>
+import { Disqus } from 'vue-disqus'
+
+export default {
+  name: 'PostPage',
+  components: {
+    Disqus
+  }
+}
+</script>
+```

docs/guide/README.md

@@ -0,0 +1,47 @@
+# Getting Started
+
+## Installation
+
+```bash
+$ npm install -s vue-disqus
+# or
+$ yarn add vue-disqus
+```
+
+## Setup
+You can use it globally in your `main.js`
+
+```js
+import Vue from 'vue'
+import VueDisqus from 'vue-disqus'
+
+Vue.use(VueDisqus)
+```
+
+or you can import into your component:
+
+```vue
+<script>
+import { Disqus } from 'vue-disqus'
+
+export default {
+  name: 'PostPage',
+  components: {
+    Disqus
+  }
+  // ...
+}
+</script>
+```
+
+## Usage 
+
+Using the component in the template
+
+```vue
+<template>
+  <div class='comments'>
+    <Disqus shortname='your_shortname_disqus' />
+  </div>
+</template>
+```

docs/guide/callbacks.md

@@ -0,0 +1,40 @@
+# Callbacks
+
+`VueDisqus` registers events ($emit) for each callback available in the disqus API.
+
+## Events
+
+| Event name     | Description                                                                              | 
+| -------------- | ---------------------------------------------------------------------------------------- |
+| ready          | When Disqus is ready. <br> (*This can be used to show a placeholder or loading indicator*).      |
+| new-comment    | When a new comment is posted. <br> (*This can be used to track new comments and replies, for example via Google Analytics*).  |
+| before-comment | 
+| init           | 
+| identify       | 
+| paginate       | 
+| pre-init       | 
+| pre-data       | 
+| pre-reset      | 
+| after-render   | 
+
+```vue
+<template>
+  <div class='comments'>
+    <Disqus
+      shortname='your_shortname_disqus'
+      @new-comment="newComment"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  // ...
+  methods: {
+    newComment ({ id, text }) {
+      // your code
+    }
+  }
+}
+</script>
+```