docs: add version switcher

README.md

@@ -19,7 +19,7 @@
 
 # Maska
 
-!> Maska v3 is currently in beta. If you encounter any issues, please [report them](https://github.com/beholdr/maska/issues).
+Maska v3 is currently in beta. If you encounter any issues, please [report them](https://github.com/beholdr/maska/issues).
 
 ## Support ☕️
 

docs/docsify-version-plugin.js

@@ -0,0 +1,14 @@
+;(function () {
+  function versionPlugin(hook) {
+    hook.mounted(function () {
+      document
+        .getElementById('version-selector')
+        .addEventListener('change', (e) => {
+          window.location.href = '../' + e.target.value + '/'
+        })
+    })
+  }
+
+  $docsify = $docsify || {}
+  $docsify.plugins = [].concat($docsify.plugins || [], versionPlugin)
+})()

docs/v2/README.md

@@ -1,10 +1,6 @@
-<object data="../maska.svg" type="image/svg+xml" style="max-width: 90%"></object>
-
----
-
 # Maska
 
-Do you like **Maska**? Please support me via [Boosty](https://boosty.to/beholdr).
+> ❤️ [Please support](https://boosty.to/beholdr) Maska development!
 
 # Live Demo
 

docs/v2/index.html

@@ -11,7 +11,6 @@
   <!-- Themes (light + dark) -->
   <link rel="stylesheet" media="(prefers-color-scheme: dark)" href="https://cdn.jsdelivr.net/npm/docsify-themeable@0/dist/css/theme-simple-dark.css">
   <link rel="stylesheet" media="(prefers-color-scheme: light)" href="https://cdn.jsdelivr.net/npm/docsify-themeable@0/dist/css/theme-simple.css">
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsify-versioned-plugin@0.0.1/styles.css">
 
   <style>
     :root {
@@ -21,8 +20,8 @@
       --heading-h3-font-size: var(--modular-scale-1);
     }
 
-    .sidebar > .app-name {
+    .sidebar select {
-      display: none;
+      font-size: 1rem;
     }
     .sidebar-nav li.active {
       background: #990bdb;
@@ -48,21 +47,17 @@
 
   <script>
   window.$docsify = {
-    name: 'maska',
+    name: '<img src="../maska.svg" style="width: 90%"><select id="version-selector"><option value="v3">v3</option><option value="v2" selected>v2</option></select>',
+    nameLink: false,
     repo: 'beholdr/maska',
-    maxLevel: 2,
+    maxLevel: 2
-    versionSelectorLabel: 'Version',
-    versions: [
-      { folder: 'v3', label: 'v3', default: true },
-      { folder: 'v2', label: 'v2', default: false }
-    ]
   }
   </script>
 
   <!-- Required -->
   <script src="https://cdn.jsdelivr.net/npm/docsify@4/lib/docsify.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/docsify-themeable@0/dist/js/docsify-themeable.min.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/docsify-versioned-plugin@0.0.1/index.js"></script>
+  <script src="../docsify-version-plugin.js"></script>
 
   <!-- Recommended -->
   <script src="https://cdn.jsdelivr.net/npm/docsify@4/lib/plugins/search.js"></script>

docs/v3/README.md

@@ -1,11 +1,5 @@
-<object data="../maska.svg" type="image/svg+xml" style="max-width: 90%"></object>
-
----
-
 !> Maska v3 is currently in beta. If you encounter any issues, please [report them](https://github.com/beholdr/maska/issues).
 
-?> Docs for Maska v2 [are here](https://beholdr.github.io/maska/v2/).
-
 **Maska** is a simple zero-dependency input mask library.
 
 You can use it with vanilla javascript or with your favorite framework. Out of the box there is integration with Vue 2/3, Svelte and Alpine.js, but you can integrate it into any framework.

docs/v3/index.html

@@ -11,7 +11,6 @@
   <!-- Themes (light + dark) -->
   <link rel="stylesheet" media="(prefers-color-scheme: dark)" href="https://cdn.jsdelivr.net/npm/docsify-themeable@0/dist/css/theme-simple-dark.css">
   <link rel="stylesheet" media="(prefers-color-scheme: light)" href="https://cdn.jsdelivr.net/npm/docsify-themeable@0/dist/css/theme-simple.css">
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsify-versioned-plugin@0.0.1/styles.css">
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mingchyuanko/docsify-plugin-page-toc/dist/toc.css">
 
   <style>
@@ -22,8 +21,8 @@
       --heading-h3-font-size: var(--modular-scale-1);
     }
 
-    .sidebar > .app-name {
+    .sidebar select {
-      display: none;
+      font-size: 1rem;
     }
     .sidebar-nav > ul > li:has(ul) {
       margin-top: 18px;
@@ -54,23 +53,19 @@
 
   <script>
   window.$docsify = {
-    name: 'maska',
+    name: '<img src="../maska.svg" style="width: 90%"><select id="version-selector"><option value="v3">v3</option><option value="v2">v2</option></select>',
+    nameLink: false,
     repo: 'beholdr/maska',
     maxLevel: 2,
     auto2top: true,
-    loadSidebar: true,
+    loadSidebar: true
-    versionSelectorLabel: 'Version',
-    versions: [
-      { folder: 'v3', label: 'v3', default: true },
-      { folder: 'v2', label: 'v2', default: false }
-    ]
   }
   </script>
 
   <!-- Required -->
   <script src="https://cdn.jsdelivr.net/npm/docsify@4/lib/docsify.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/docsify-themeable@0/dist/js/docsify-themeable.min.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/docsify-versioned-plugin@0.0.1/index.js"></script>
+  <script src="../docsify-version-plugin.js"></script>
 
   <!-- Recommended -->
   <script src="https://cdn.jsdelivr.net/npm/docsify@4/lib/plugins/search.js"></script>