Dynamically fetch versions in docs

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

@@ -1,19 +0,0 @@
-#!/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-init.js

@@ -1,126 +1,226 @@
+let clink = null;
+
 if (window.DOCSIFY_ROUTER_MODE === "history") {
-  var clink = document.createElement("link")
-  clink.rel = "canonical"
-  document.getElementsByTagName("head")[0].appendChild(clink)
+  clink = Docsify.dom.create("link");
+  clink.rel = "canonical";
+  Docsify.dom.appendTo(Docsify.dom.head, clink);
 }
 
-var documentTitleBase = document.title;
+const documentTitleBase = document.title;
 
-var linksMenu = '<div class="links-menu">' +
+const linksMenu = '<div class="links-menu">' +
   '<a href="https://imgproxy.net" target="_blank" title="Website"><img src="/assets/website.svg" /></a>' +
   '<a href="https://github/imgproxy" target="_blank" title="GitHub"><img src="/assets/github.svg" /></a>' +
   '<a href="https://twitter.com/imgproxy_net" target="_blank" title="Twitter"><img src="/assets/twitter.svg" /></a>' +
   '<a href="https://discord.gg/5GgpXgtC9u" target="_blank" title="Discord"><img src="/assets/discord.svg" /></a>' +
   '</div>';
 
-var docEditBase = 'https://github.com/imgproxy/imgproxy/edit/master/docs/';
+const 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")
+const proBadge = Docsify.dom.create("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>';
+const proBadgeRegex = /\!\[pro\]\((\S+)\)/g;
+const proLink = `<a class="badge" href="https://imgproxy.net/#pro" target="_blank">${proBadge.outerHTML}</a>`;
 
-var oldProBadge = "<i class='badge badge-pro'></i>";
+const 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>' +
-    linksMenu +
-    versionSelect,
-  nameLink: false,
-  loadSidebar: true,
-  relativePath: true,
-  subMaxLevel: 3,
-  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)
-        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") })
-      })
+const defaultVersions = [["latest", "latest"]];
+
+const configureDocsify = (additionalVersions, latestVersion, latestTag) => {
+  const versions = defaultVersions.concat(additionalVersions);
+
+  const versionAliases = {};
+
+  const versionSelect = ['<select id="version-selector" name="version" class="sidebar-version-select">'];
+  versions.forEach(([version, tag]) => {
+    const value = version == latestVersion ? "" : version;
+    versionSelect.push(`<option value="${value}">${version}</value>`);
+
+    if (version !== "latest") {
+      versionAliases[`/${version}/(.*)`] =
+        `https://raw.githubusercontent.com/imgproxy/imgproxy/${tag}/docs/$1`;
+      versionAliases[`/${version}/`] =
+        `https://raw.githubusercontent.com/imgproxy/imgproxy/${tag}/docs/README.md`;
     }
-  ]
+  });
+  versionSelect.push('</select>');
+
+  if (latestTag === "latest") latestTag = "master";
+
+  window.$docsify = {
+    name: '<a id="home-link" class="app-name-link" href="/"><img src="/assets/logo.svg"></a>' +
+      linksMenu +
+      versionSelect.join(""),
+    nameLink: false,
+    loadSidebar: true,
+    relativePath: true,
+    subMaxLevel: 3,
+    auto2top: true,
+    routerMode: window.DOCSIFY_ROUTER_MODE || "hash",
+    noEmoji: true,
+    alias: Object.assign(versionAliases, {
+      '/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/${latestTag}/docs/$1`,
+      '/': `https://raw.githubusercontent.com/imgproxy/imgproxy/${latestTag}/docs/README.md`,
+    }),
+    search: {
+      namespace: 'docs-imgproxy',
+      depth: 6,
+      // pathNamespaces: versions.map(v => "/" + v[0]),
+      pathNamespaces: /^(\/(latest|([0-9]+\.[0-9]+)))?/,
+    },
+    namespaces: [
+      {
+        id: "version",
+        values: versions.map(v => v[0]),
+        optional: true,
+        selector: "#version-selector",
+      }
+    ],
+    plugins: window.$docsify.plugins.concat([
+      (hook, vm) => {
+        window.DocsifyVM = vm;
+
+        hook.beforeEach(() => {
+          if (clink)
+            clink.href = "https://docs.imgproxy.net" + vm.route.path;
+        });
+
+        hook.doneEach(() => {
+          const appNameLink = Docsify.dom.find("#home-link");
+
+          if (!appNameLink) return;
+
+          appNameLink.href = vm.config.currentNamespace;
+        });
+
+        hook.doneEach(() => {
+          if (document.title != documentTitleBase)
+            document.title += " | " + documentTitleBase;
+        });
+
+
+        hook.afterEach(html => {
+          const docName = vm.route.file.replace(
+            /https\:\/\/raw.githubusercontent\.com\/(.*)\/docs\//, ''
+          );
+
+          if (!docName) return html;
+
+          const 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((content, next) => {
+          content = content.replaceAll(proBadgeRegex, proLink);
+          content = content.replaceAll(oldProBadge, proLink);
+          next(content);
+        })
+
+        hook.doneEach(() => {
+          const badges = Docsify.dom.findAll(".sidebar .badge-pro");
+          badges.forEach(b => { b.replaceWith(proBadge.cloneNode()) });
+
+          // Docsify cuts off "target" sometimes
+          const links = Docsify.dom.findAll("a.badge");
+          links.forEach(l => { l.setAttribute("target", "_blank") });
+        })
+      }
+    ])
+  }
+}
+
+const initDocsify = (versions, latestVersion, latestTag) => {
+  configureDocsify(versions, latestVersion, latestTag);
+  window.runDocsify();
+};
+
+const VERSIONS_KEY = "imgproxy.versions";
+const VERSIONS_ETAG_KEY = "imgproxy.versions.etag";
+
+let latestVersion = "latest";
+let latestTag = "latest";
+
+let storedVersions = [];
+let storedVersionsJson = localStorage.getItem(VERSIONS_KEY);
+let storedVersionsEtag = localStorage.getItem(VERSIONS_ETAG_KEY);
+
+if (storedVersionsJson) {
+  try {
+    storedVersions = JSON.parse(storedVersionsJson);
+  } catch {
+    storedVersions = [];
+  }
+}
+
+if (storedVersions?.length)
+  [latestVersion, latestTag] = storedVersions[0];
+else {
+  // Just in case storedVersions is not an array
+  storedVersions = [];
+  storedVersionsEtag = null;
 }
+
+fetch(
+  "https://api.github.com/repos/imgproxy/imgproxy/releases",
+  {
+    headers: {
+      "Accept": "application/json",
+      "If-None-Match": storedVersionsEtag,
+    },
+  },
+).then((resp) => {
+  if (resp.status === 304) {
+    initDocsify(storedVersions, latestVersion, latestTag);
+    return;
+  }
+
+  if (resp.status != 200)
+    throw new Error(`Can't fetch imgproxy versions: ${resp.statusText}`);
+
+  resp.json().then((data) => {
+    const uniq = {};
+    const fetchedVersions = [];
+
+    data.forEach((release) => {
+      if (release.draft || release.prerelease) return;
+
+      var tag = release.tag_name;
+      var matches = tag?.match(/^v([0-9]+\.[0-9]+)/);
+
+      if (!matches?.length) return;
+
+      var version = matches[1];
+
+      if (uniq[version]) return;
+
+      fetchedVersions.push([version, tag]);
+      uniq[version] = true;
+    });
+
+    if (fetchedVersions.length)
+      [latestVersion, latestTag] = fetchedVersions[0];
+
+    localStorage.setItem(VERSIONS_KEY, JSON.stringify(fetchedVersions));
+    localStorage.setItem(VERSIONS_ETAG_KEY, resp.headers.get("Etag"));
+
+    initDocsify(fetchedVersions, latestVersion, latestTag);
+
+  }).catch((e) => {
+    initDocsify(storedVersions, latestVersion, latestTag);
+    throw e;
+  });
+}).catch((e) => {
+  initDocsify(storedVersions, latestVersion, latestTag);
+  throw e;
+});

docs/assets/versions.js

@@ -1,20 +0,0 @@
-window.IMGPROXY_VERSIONS = [
-  "3.17",
-  "3.16",
-  "3.15",
-  "3.14",
-  "3.13",
-  "3.12",
-  "3.11",
-  "3.10",
-  "3.9",
-  "3.8",
-  "3.7",
-  "3.6",
-  "3.5",
-  "3.4",
-  "3.3",
-  "3.2",
-  "3.1",
-  "3.0"
-];

docs/index.html

@@ -41,16 +41,23 @@
     </div>
   </div>
 
-  <script src="/assets/versions.js"></script>
-  <script src="/assets/docsify-init.js"></script>
+  <script type="application/javascript">
+    window.DOCSIFY_DEFER = true;
+    window.$docsify = { plugins: [] };
+  </script>
 
-  <script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
+  <!-- <script src="//unpkg.com/docsify/lib/docsify.min.js"></script> -->
+  <script src="/assets/docsify.min.20230513.js"></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/lib/plugins/search.min.js"></script> -->
+  <script src="/assets/docsify.search.min.20230513.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="//unpkg.com/docsify-copy-code@2"></script>
   <script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-bash.min.js"></script>
+
+  <script src="/assets/docsify-init.js"></script>
+
   <link
     href="https://fonts.googleapis.com/css2?family=Martian+Mono:wght@300&family=Roboto+Condensed:wght@700&family=Roboto:wght@400;700&display=swap"
     rel="stylesheet">

lefthook.yml

@@ -7,8 +7,6 @@ pre-push:
   scripts:
     test:
       tags: test
-    check-docs-versions:
-      tags: docs
   commands:
     check-links:
       tags: docs