Răsfoiți Sursa

Add "Edit on GitHub" button to docs

DarthSim 5 ani în urmă
părinte
comite
cf5673d3b6
3 a modificat fișierele cu 73 adăugiri și 1 ștergeri
  1. 43 0
      docs/assets/docsify-edit-link.js
  2. 25 0
      docs/assets/style.css
  3. 5 1
      docs/index.html

+ 43 - 0
docs/assets/docsify-edit-link.js

@@ -0,0 +1,43 @@
+; (function (win) {
+  win.EditOnGithubPlugin = {}
+
+  function create(docBase, docEditBase, title) {
+    title = title || 'Edit on github'
+    docEditBase = docEditBase || docBase.replace(/\/blob\//, '/edit/')
+
+    function editDoc(event, vm) {
+      var docName = vm.route.file
+
+      if (docName) {
+        var editLink = docEditBase + docName
+        window.open(editLink)
+        event.preventDefault()
+        return false
+      } else {
+        return true
+      }
+    }
+
+    win.EditOnGithubPlugin.editDoc = editDoc
+
+    return function (hook, vm) {
+      win.EditOnGithubPlugin.onClick = function (event) {
+        EditOnGithubPlugin.editDoc(event, vm)
+      }
+
+      var header = [
+        '<a class="github-edit-btn" title="Edit on GitHub" href="',
+        docBase,
+        '" target="_blank" onclick="EditOnGithubPlugin.onClick(event)">',
+        'Edit on <strong>GitHub</strong>',
+        '</a>'
+      ].join('')
+
+      hook.afterEach(function (html) {
+        return html + header
+      })
+    }
+  }
+
+  win.EditOnGithubPlugin.create = create
+})(window)

+ 25 - 0
docs/assets/style.css

@@ -78,3 +78,28 @@
   height: 1em;
   vertical-align: middle;
 }
+
+.github-edit-btn {
+  display: block;
+  position: fixed;
+  bottom: 0;
+  right: 10px;
+  border-radius: 10px 10px 0 0;
+  background-color: var(--link-color);
+  color: var(--base-color) !important;
+  text-decoration: none !important;
+  font-size: .8em;
+  padding: 0.2em 1em;
+  opacity: 0.75;
+  z-index: 999;
+}
+
+.github-edit-btn:hover {
+  opacity: 1;
+}
+
+@media (max-width: 768px) {
+  .github-edit-btn {
+      display: none;
+  }
+}

+ 5 - 1
docs/index.html

@@ -36,6 +36,7 @@
       <div class="loading__spinner"></div>
     </div>
   </div>
+  <script src="assets/docsify-edit-link.js"></script>
   <script>
     window.$docsify = {
       name: '<img style="width:90%" title="imgproxy logo" src="/assets/logo.svg" >',
@@ -46,7 +47,10 @@
       search: {
         namespace: 'docs-imgproxy',
         depth: 6
-      }
+      },
+      plugins: [
+        EditOnGithubPlugin.create('https://github.com/imgproxy/imgproxy/blob/master/docs/')
+      ]
     }
   </script>
   <script src="//unpkg.com/docsify/lib/docsify.min.js"></script>