fix: major fix and added docs

Plugin-contrib · Feb 11, 2020 · af58522 · af58522
1 parent affdd32
commit af58522
Show file tree

Hide file tree

Showing 4 changed files with 107 additions and 6 deletions.
diff --git a/docs/.nojekyll b/docs/.nojekyll
diff --git a/docs/README.md b/docs/README.md
@@ -0,0 +1,69 @@
+# docsify-changelog-plugin
+This is a docsify plugin to render changelog from given path
+
+[![JavaScript Style Guide](https://cdn.rawgit.com/standard/standard/master/badge.svg)](https://github.com/standard/standard)
+[![](https://data.jsdelivr.com/v1/package/npm/docsify-changelog-plugin/badge)](https://www.jsdelivr.com/package/npm/docsify-changelog-plugin)
+
+## Installation
+
+Add the following stylesheet along with your other stylesheets
+
+```html
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/[email protected]/dist/style.css"/>
+<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>
+``` 
+
+And add the following script 
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/index.js"></script>
+```
+
+## Configure
+
+In your docsify config object add the following 
+
+```js
+window.$docsify = {
+...
+changelog : 'CHANGELOG.md' // path of your changelog, it can be remote as well
+...
+}
+```
+
+### Thanks it, Now enjoy :tada: your changelog integration with docsify 
+
+## Screen Shot
+
+<p align="center">
+
+<img alt="ss" src="https://imgur.com/JAr22Ik.png" width="400px" />
+<br/>
+<img alt="ss" src="https://imgur.com/FGljyYR.png" width="400px" />
+
+</p>
+
+
+## Contribution Guide
+
+- Clone the repo
+- start editing on `src/index.js` and `src/style.styl`
+- The build step using
+  - the `styl -> css` using `styl` CLI
+  - Optimize the generated style using `cssnano` and `postcss`
+  - Build the javascript using `rollup`
+  - optimize it using `rollup-plugin-terser` 
+  - styling rule using `standard`
+
+
+## Faq
+
+**Is it responsive?**
+Not yet! soon, I will add the styles to make it responsive
+
+**Will it break `mergeNavbar` options?**
+May be 
+
+**Can I change the style of the button and the panel?**
+Not yet !, but soon it will be possible using css variable
+
diff --git a/docs/index.html b/docs/index.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>docsify-changelog-plugin</title>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+    <meta name="description" content="Description" />
+    <meta
+      name="viewport"
+      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
+    />
+    <link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css" />
+    <link
+      rel="stylesheet"
+      href="//cdn.jsdelivr.net/npm/docsify-changelog-plugin@latest/dist/style.css"
+    />
+    <link
+      rel="stylesheet"
+      href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"
+    />
+  </head>
+  <body>
+    <div id="app"></div>
+    <script>
+      window.$docsify = {
+        name: 'docsify-changelog-plugin',
+        repo: ''
+      }
+    </script>
+    <script src="https://cdn.jsdelivr.net/npm/docsify-changelog-plugin@latest/dist/index.js"></script>
+    <script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
+  </body>
+</html>
diff --git a/src/index.js b/src/index.js
@@ -1,5 +1,5 @@
 const plugin = (hook, vm) => {
-  window.changelogDisplayHandler = function () {
+  window.changelogDisplayHandler = function() {
     const element = document.getElementById('CHANGELOG_RENDERER')
     element.classList.toggle('show')
   }
@@ -9,14 +9,14 @@ const plugin = (hook, vm) => {
   }
   const initiaNavlEl = navEl.outerHTML.split('\n')
 
-  hook.ready(function () {
+  hook.ready(function() {
     // Called when the script starts running, only trigger once, no arguments,
     if (vm.config.changelog !== undefined) {
       loadDoc()
     }
   })
 
-  function renderChangelog (md) {
+  function renderChangelog(md) {
     const html = `<a href="#/" onClick="window.changelogDisplayHandler(); return false;" id="CHANGELOG">CHANGELOG</a>
                 <div id="CHANGELOG_RENDERER">
                   <div class="CL_content">
@@ -39,9 +39,9 @@ const plugin = (hook, vm) => {
     changelogPlaceHolder.innerHTML = changelogContentHTML
   }
 
-  function loadDoc () {
+  function loadDoc() {
     const xhttp = new XMLHttpRequest()
-    xhttp.onreadystatechange = function () {
+    xhttp.onreadystatechange = function() {
       const md = ` ${this.responseText} \n # {docsify-ignore-all} `
       renderChangelog(md)
     }
@@ -51,4 +51,3 @@ const plugin = (hook, vm) => {
 }
 
 window.$docsify.plugins = [].concat(plugin, window.$docsify.plugins)
-module.exports = plugin