2
0
mirror of https://github.com/tenrok/maska.git synced 2026-05-15 11:59:38 +03:00

docs: add version switcher

This commit is contained in:
Alexander Shabunevich
2024-06-06 22:50:02 +03:00
parent b3e8fa052f
commit e994aaa8e4
6 changed files with 28 additions and 34 deletions
+1 -1
View File
@@ -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 ☕️
+14
View File
@@ -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)
})()
+1 -5
View File
@@ -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
+6 -11
View File
@@ -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 {
display: none;
.sidebar select {
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,
versionSelectorLabel: 'Version',
versions: [
{ folder: 'v3', label: 'v3', default: true },
{ folder: 'v2', label: 'v2', default: false }
]
maxLevel: 2
}
</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>
-6
View File
@@ -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.
+6 -11
View File
@@ -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 {
display: none;
.sidebar select {
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,
versionSelectorLabel: 'Version',
versions: [
{ folder: 'v3', label: 'v3', default: true },
{ folder: 'v2', label: 'v2', default: false }
]
loadSidebar: true
}
</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>