Versioned docs

.lefthook/pre-push/check-docs-versions

@@ -0,0 +1,19 @@
+#!/bin/bash
+
+re="^v([3-9]\.[0-9]+)\.0$"
+
+versions=$(cat docs/assets/versions.js)
+
+exitcode=0
+
+while read -r tag; do
+  if [[ $tag =~ $re ]]; then
+    version=${BASH_REMATCH[1]};
+    if [[ $versions != *$version* ]]; then
+      echo "Add $version to docs versions" 1>&2;
+      exitcode=1
+    fi
+  fi
+done < <(git tag);
+
+exit $exitcode

docs/assets/docsify-edit-link.js

@@ -1,30 +0,0 @@
-; (function (win) {
-  win.EditOnGithubPlugin = {}
-
-  function create(docBase) {
-    var docEditBase = docBase.replace(/\/blob\//, '/edit/')
-
-    return function (hook, vm) {
-      hook.afterEach(function (html) {
-        var url = docBase
-        var docName = vm.route.file
-
-        if (docName) {
-          url = docEditBase + docName
-        }
-
-        var header = [
-          '<a class="github-edit-btn" title="Edit on GitHub" href="',
-          url,
-          '" target="_blank">',
-          'Edit on <strong>GitHub</strong>',
-          '</a>'
-        ].join('')
-
-        return html + header
-      })
-    }
-  }
-
-  win.EditOnGithubPlugin.create = create
-})(window)

docs/assets/docsify-gitter.js

@@ -1,29 +0,0 @@
-; (function (win) {
-  win.GitterPlugin = {}
-
-  function create(room, color) {
-    color = color || "blue";
-
-    var url = "https://gitter.im/" + room;
-    var badgeUrl = "https://img.shields.io/gitter/room/" +
-      room +
-      "?color=" + color +
-      "&style=for-the-badge" +
-      "&logo=gitter";
-    var html = "<a class=\"gitter-link\" href=\"" + url +"\" target=\"_blank\">" +
-      "<img alt=\"Chat on Gitter\" src=\"" + badgeUrl + "\">" +
-      "</a>";
-
-    return function (hook) {
-      hook.mounted(function () {
-        var el = Docsify.dom.create('div', html);
-        var appName = Docsify.dom.find('.app-name');
-
-        Docsify.dom.toggleClass(el, 'gitter');
-        Docsify.dom.appendTo(appName, el);
-      })
-    }
-  }
-
-  win.GitterPlugin.create = create
-})(window)

docs/assets/docsify-init.js

@@ -0,0 +1,128 @@
+if (window.DOCSIFY_ROUTER_MODE === "history") {
+  var clink = document.createElement("link")
+  clink.rel = "canonical"
+  document.getElementsByTagName("head")[0].appendChild(clink)
+}
+
+var documentTitleBase = document.title;
+
+var gitterURL = "https://gitter.im/imgproxy/imgproxy";
+var gitterBadgeURL = "https://img.shields.io/gitter/room/imgproxy/imgproxy" +
+  "?color=1775d3&style=for-the-badge&logo=gitter";
+var gitterBadge = '<div class="gitter">' +
+  '<a class="gitter-link" href="' + gitterURL + '" target="_blank">' +
+  '<img alt="Chat on Gitter" src="' + gitterBadgeURL + '">' +
+  '</div></a>';
+
+var docEditBase = 'https://github.com/imgproxy/imgproxy/edit/master/docs/';
+
+var proBadge = document.createElement("img")
+proBadge.setAttribute("src", "/assets/pro.svg")
+proBadge.setAttribute("title", "This feature is available in imgproxy Pro")
+
+var proBadgeRegex = /\!\[pro\]\((\S+)\)/g;
+var proLink = '<a class="badge" href="https://imgproxy.net/#pro" target="_blank">' +
+  proBadge.outerHTML + '</a>';
+
+var oldProBadge = "<i class='badge badge-pro'></i>";
+
+var versions = ["latest"].concat(window.IMGPROXY_VERSIONS);
+var latestVersion = window.IMGPROXY_VERSIONS[0];
+var versionSelect = '<select id="version-selector" name="version" class="sidebar-version-select">';
+versions.forEach(function (version) {
+  var value = version == latestVersion ? "" : version;
+  versionSelect = versionSelect + '<option value="' + value + '">' + version + '</value>';
+});
+versionSelect = versionSelect + '</select>';
+
+window.$docsify = {
+  name: '<a id="home-link" class="app-name-link" href="/"><img src="/assets/logo.svg"></a>' +
+    gitterBadge +
+    versionSelect,
+  nameLink: false,
+  repo: 'https://github.com/imgproxy',
+  loadSidebar: true,
+  subMaxLevel: 2,
+  auto2top: true,
+  routerMode: window.DOCSIFY_ROUTER_MODE || "hash",
+  noEmoji: true,
+  alias: {
+    '/latest/': 'README.md',
+    '/latest/(.*)': '$1',
+    '/([0-9]+\.[0-9]+)/(.*)': 'https://raw.githubusercontent.com/imgproxy/imgproxy/v$1.0/docs/$2',
+    '/([0-9]+\.[0-9]+)/': 'https://raw.githubusercontent.com/imgproxy/imgproxy/v$1.0/docs/README.md',
+    '/(.*)': 'https://raw.githubusercontent.com/imgproxy/imgproxy/v' + latestVersion + '.0/docs/$1',
+    '/': 'https://raw.githubusercontent.com/imgproxy/imgproxy/v' + latestVersion + '.0/docs/README.md',
+  },
+  search: {
+    namespace: 'docs-imgproxy',
+    depth: 6,
+    pathNamespaces: versions.map(function (v) { return "/" + v })
+  },
+  namespaces: [
+    {
+      id: "version",
+      values: versions,
+      optional: true,
+      selector: "#version-selector"
+    }
+  ],
+  plugins: [
+    function (hook, vm) {
+      window.DocsifyVM = vm
+      hook.beforeEach(function () {
+        if (clink) {
+          clink.href = "https://docs.imgproxy.net" + vm.route.path
+        }
+      });
+
+      hook.doneEach(function () {
+        var appNameLink = Docsify.dom.find("#home-link");
+
+        if (!appNameLink) return;
+
+        appNameLink.href = vm.config.currentNamespace;
+      });
+
+      hook.doneEach(function() {
+        if (document.title != documentTitleBase)
+          document.title += " | " + documentTitleBase;
+      });
+
+
+      hook.afterEach(function (html) {
+        var docName = vm.route.file.replace(
+          /https\:\/\/raw.githubusercontent\.com\/(.*)\/docs\//, ''
+        )
+
+        if (!docName) {
+          return html;
+        }
+
+        var editButton = '<a class="github-edit-btn" title="Edit on GitHub" href="' +
+          docEditBase + docName +
+          '" target="_blank">' +
+          'Edit on <strong>GitHub</strong>' +
+          '</a>';
+
+        return html + editButton
+      })
+
+      hook.beforeEach(function (content, next) {
+        content = content.replaceAll(proBadgeRegex, proLink)
+        content = content.replaceAll(oldProBadge, proLink)
+        console.log(content)
+        next(content)
+      })
+
+      hook.doneEach(function () {
+        var badges = Docsify.dom.findAll(".sidebar .badge-pro")
+        badges.forEach(function (b) { b.replaceWith(proBadge.cloneNode()) })
+
+        // Docsify cuts off "target" sometimes
+        var links = Docsify.dom.findAll("a.badge")
+        links.forEach(function(l){ l.setAttribute("target", "_blank") })
+      })
+    }
+  ]
+}

docs/assets/docsify-pro-badge.js

@@ -1,19 +0,0 @@
-; (function (win) {
-  win.ProBadgePlugin = {}
-
-  function create() {
-    var regex = /\!\[pro\]\((\S+)\)/g;
-    var proLink = '<a class="badge" href="https://imgproxy.net/#pro" target="_blank">' +
-      '<img src="$1" title="This feature is available in imgproxy Pro"/>' +
-    '</a>';
-
-    return function (hook) {
-      hook.beforeEach(function (content, next) {
-        content = content.replaceAll(regex, proLink)
-        next(content)
-      })
-    }
-  }
-
-  win.ProBadgePlugin.create = create
-})(window)

docs/assets/style.css

@@ -145,3 +145,8 @@ h1 .badge img, h3 .badge img, h3 .badge img, h4 .badge img, h5 .badge img {
   display: block;
   margin: 5px auto 0;
 }
+
+.sidebar-version-select {
+  width: 100%;
+  margin: var(--sidebar-nav-margin);
+}

docs/assets/versions.js

@@ -0,0 +1,9 @@
+window.IMGPROXY_VERSIONS = [
+  "3.6",
+  "3.5",
+  "3.4",
+  "3.3",
+  "3.2",
+  "3.1",
+  "3.0"
+];

docs/index.html

@@ -41,56 +41,16 @@
       <div class="loading__spinner"></div>
     </div>
   </div>
-  <script src="/assets/docsify-edit-link.js"></script>
-  <script src="/assets/docsify-gitter.js"></script>
-  <script src="/assets/docsify-pro-badge.js"></script>
-  <script>
-    if (window.DOCSIFY_ROUTER_MODE === "history") {
-      var clink = document.createElement("link")
-      clink.rel = "canonical"
-      document.getElementsByTagName("head")[0].appendChild(clink)
-    }
 
-    var documentTitleBase = document.title;
+  <script src="/assets/versions.js"></script>
+  <script src="/assets/docsify-init.js"></script>
 
-    window.$docsify = {
-      logo: '/assets/logo.svg',
-      name: 'imgproxy',
-      repo: 'https://github.com/imgproxy',
-      loadSidebar: true,
-      subMaxLevel: 2,
-      auto2top: true,
-      routerMode: window.DOCSIFY_ROUTER_MODE || "hash",
-      noEmoji: true,
-      search: {
-        namespace: 'docs-imgproxy',
-        depth: 6
-      },
-      plugins: [
-        EditOnGithubPlugin.create('https://github.com/imgproxy/imgproxy/blob/master/docs/'),
-        GitterPlugin.create("imgproxy/imgproxy", "1775d3"),
-        ProBadgePlugin.create(),
-        function (hook, vm) {
-          hook.beforeEach(function () {
-            if (clink) {
-              clink.href = "https://docs.imgproxy.net" + vm.route.path
-            }
-          });
-        },
-        function (hook, vm) {
-          hook.doneEach((content) => {
-            if (document.title != documentTitleBase)
-              document.title += " | " + documentTitleBase;
-          });
-        }
-      ]
-    }
-  </script>
   <script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/docsify-themeable@0"></script>
+  <script src="//cdn.jsdelivr.net/npm/docsify-themeable@0"></script>
   <script src="//unpkg.com/docsify/lib/plugins/search.min.js"></script>
+  <script src="//unpkg.com/docsify-namespaced@0.1.1/dist/docsify-namespaced.min.js"></script>
   <script src="//unpkg.com/docsify-pagination/dist/docsify-pagination.min.js"></script>
-  <script src="https://unpkg.com/docsify-copy-code@2"></script>
+  <script src="//unpkg.com/docsify-copy-code@2"></script>
   <script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-bash.min.js"></script>
   <link href="https://fonts.googleapis.com/css?family=Fira+Mono|Roboto:400,700&display=swap" rel="stylesheet">
 </body>

lefthook.yml

@@ -7,3 +7,5 @@ pre-push:
   scripts:
     test:
       tags: test
+    check-docs-versions:
+      tags: docs