diff --git a/.vitepress/config.mjs b/.vitepress/config.mjs index baaea73..3892b8c 100644 --- a/.vitepress/config.mjs +++ b/.vitepress/config.mjs @@ -1,6 +1,6 @@ -import fs, { link } from 'fs' -import path from 'path' -import tailwindcss from '@tailwindcss/vite' +import fs, { link } from "fs"; +import path from "path"; +import tailwindcss from "@tailwindcss/vite"; export default { ignoreDeadLinks: true, @@ -8,320 +8,394 @@ export default { plugins: [tailwindcss()], resolve: { alias: { - '@components': path.resolve(__dirname, './theme/components') - } - } - /* Use only in development - server: { - proxy: { - '/api': { - target: 'https://api.paymenter.org', - changeOrigin: true, - rewrite: (path) => path.replace(/^\/api/, ''), - }, + "@components": path.resolve(__dirname, "./theme/components"), }, }, - */ }, - title: 'Paymenter', + title: "Paymenter", - description: 'Paymenter is an open source payment gateway for your hosting.', + description: "Paymenter is an open source payment gateway for your hosting.", cleanUrls: true, + sitemap: { + hostname: "https://paymenter.org", + }, + versioning: { - latestVersion: '1.0.0' + latestVersion: "1.0.0", + }, + + transformPageData(pageData) { + if (pageData.params && pageData.params.name) { + pageData.title = pageData.params.name; + pageData.frontmatter.title = pageData.params.name; + pageData.description = pageData.params.description; + pageData.frontmatter.description = pageData.params.description; + } }, transformHead: ({ pageData }) => { - const head = [] + const head = []; - head.push(['meta', { property: 'og:title', content: pageData.frontmatter.title && pageData.frontmatter.title !== 'Paymenter' ? pageData.frontmatter.title + " | Paymenter" : 'Paymenter' }]) - head.push(['meta', { property: 'og:description', content: pageData.frontmatter.description ? pageData.frontmatter.description : 'Paymenter is an open source payment gateway for your hosting.' }]) + head.push([ + "meta", + { + property: "og:title", + content: + pageData.frontmatter.title && + pageData.frontmatter.title !== "Paymenter" + ? pageData.frontmatter.title + " | Paymenter" + : "Paymenter", + }, + ]); + head.push([ + "meta", + { + property: "og:description", + content: pageData.frontmatter.description + ? pageData.frontmatter.description + : "Paymenter is an open source payment gateway for your hosting.", + }, + ]); // If path is / use textlogo, else use generated image - if (pageData.relativePath && pageData.relativePath !== 'index.md') { - head.push(['meta', { property: 'image:title', content: pageData.frontmatter.title ? pageData.frontmatter.title : 'Paymenter' }]) - head.push(['meta', { property: 'image:description', content: pageData.frontmatter.description ? pageData.frontmatter.description : 'Paymenter is an open source payment gateway for your hosting.' }]) + if ( + pageData.relativePath && + pageData.relativePath !== "index.md" && + pageData.filePath !== 'marketplace/[id].md' + ) { + head.push([ + "meta", + { + property: "image:title", + content: pageData.frontmatter.title + ? pageData.frontmatter.title + : "Paymenter", + }, + ]); + head.push([ + "meta", + { + property: "image:description", + content: pageData.frontmatter.description + ? pageData.frontmatter.description + : "Paymenter is an open source payment gateway for your hosting.", + }, + ]); - head.push(['meta', { property: 'og:image', content: `/${pageData.relativePath.replace('.md', '')}/og-image.png` }]) - head.push(['meta', { property: 'twitter:image', content: `/${pageData.relativePath.replace('.md', '')}/og-image.png` }]) + head.push([ + "meta", + { + property: "og:image", + content: `/${pageData.relativePath.replace(".md", "")}/og-image.png`, + }, + ]); + head.push([ + "meta", + { + property: "twitter:image", + content: `/${pageData.relativePath.replace(".md", "")}/og-image.png`, + }, + ]); + } else if ( + pageData.filePath === 'marketplace/[id].md' + ) { + if (pageData.params.image) { + head.push([ + "meta", + { property: "og:image", content: pageData.params.image }, + ]); + head.push([ + "meta", + { property: "twitter:image", content: pageData.params.image }, + ]); + } + } else { - head.push(['meta', { property: 'og:image', content: '/textlogo.png' }]) - head.push(['meta', { property: 'twitter:image', content: '/textlogo.png' }]) + head.push(["meta", { property: "og:image", content: "/textlogo.png" }]); + head.push([ + "meta", + { property: "twitter:image", content: "/textlogo.png" }, + ]); } - return head + return head; }, themeConfig: { search: { - provider: 'local' + provider: "local", }, returnToTop: true, // Mobile only - appearance: 'dark', + appearance: "dark", nav: [ - { text: 'Home', link: '/' }, - { text: 'Docs', link: '/docs/installation/install' }, - { text: 'Releases', link: '/release/v1.4-release' }, - { text: 'Development', link: '/development/extensions/index.md' }, - { text: 'Marketplace', link: '/marketplace' } + { text: "Home", link: "/" }, + { text: "Docs", link: "/docs/installation/install" }, + { text: "Development", link: "/development/extensions/index.md" }, + { text: "Marketplace", link: "/marketplace" }, + { + text: "About", + activeMatch: `^/about/`, + items: [ + { text: "Releases", link: "/releases" }, + { text: "Brand", link: "/brand" }, + { text: "Team", link: "/team" }, + ], + }, ], logo: { - light: '/logo-light.svg', - dark: '/logo-dark.svg', - alt: 'Paymenter Logo' + light: "/logo-light.svg", + dark: "/logo-dark.svg", + alt: "Paymenter Logo", }, siteTitle: false, sidebar: { - '/docs/': [ + "/docs/": [ { - text: 'Getting Started', + text: "Getting Started", items: [ - { text: 'Introduction', link: '/docs/getting-started/introduction' } - ] + { + text: "Introduction", + link: "/docs/getting-started/introduction", + }, + ], }, { - text: 'Setting Up', + text: "Setting Up", items: [ { - text: 'Installation', - link: '/docs/installation/install', + text: "Installation", + link: "/docs/installation/install", collapsed: true, items: [ - { text: 'Using Docker', link: '/docs/installation/docker' } - ] + { text: "Using Docker", link: "/docs/installation/docker" }, + ], }, { - text: 'Webserver Setup', - link: '/docs/installation/webserver', + text: "Webserver Setup", + link: "/docs/installation/webserver", collapsed: true, items: [ { - text: 'Creating SSL Certificates', - link: '/docs/installation/ssl' - } - ] + text: "Creating SSL Certificates", + link: "/docs/installation/ssl", + }, + ], }, - { text: 'Updating', link: '/docs/installation/updating' } - ] + { text: "Updating", link: "/docs/installation/updating" }, + ], }, { - text: 'Guides', + text: "Guides", items: [ { - text: 'Products', - link: '/docs/guides/products/', + text: "Products", + link: "/docs/guides/products/", collapsed: true, items: [ { - text: 'Config Options', - link: '/docs/guides/products/config-options' - } - ] + text: "Config Options", + link: "/docs/guides/products/config-options", + }, + ], }, { - text: 'Servers', - link: '/docs/guides/servers/', + text: "Servers", + link: "/docs/guides/servers/", collapsed: false, items: [ - { text: 'CPanel', link: '/docs/extensions/cpanel' }, - { text: 'Convoy', link: '/docs/extensions/convoy' }, - { text: 'DirectAdmin', link: '/docs/extensions/directadmin' }, - { text: 'Enhance', link: '/docs/extensions/enhance' }, - { text: 'Plesk', link: '/docs/extensions/plesk' }, - { text: 'Proxmox', link: '/docs/extensions/proxmox' }, - { text: 'Pterodactyl', link: '/docs/extensions/pterodactyl' }, - { text: 'VirtFusion', link: '/docs/extensions/virtfusion' }, - { text: 'Virtualizor', link: '/docs/extensions/virtualizor' } - ] + { text: "CPanel", link: "/docs/extensions/cpanel" }, + { text: "Convoy", link: "/docs/extensions/convoy" }, + { text: "DirectAdmin", link: "/docs/extensions/directadmin" }, + { text: "Enhance", link: "/docs/extensions/enhance" }, + { text: "Plesk", link: "/docs/extensions/plesk" }, + { text: "Proxmox", link: "/docs/extensions/proxmox" }, + { text: "Pterodactyl", link: "/docs/extensions/pterodactyl" }, + { text: "VirtFusion", link: "/docs/extensions/virtfusion" }, + { text: "Virtualizor", link: "/docs/extensions/virtualizor" }, + ], }, { - text: 'Gateways', - link: '/docs/guides/gateways/', + text: "Gateways", + link: "/docs/guides/gateways/", collapsed: false, items: [ - { text: 'Mollie', link: '/docs/extensions/mollie' }, - { text: 'PayPal', link: '/docs/extensions/paypal' }, - { text: 'Stripe', link: '/docs/extensions/stripe' } - ] + { text: "Mollie", link: "/docs/extensions/mollie" }, + { text: "PayPal", link: "/docs/extensions/paypal" }, + { text: "Stripe", link: "/docs/extensions/stripe" }, + ], }, { - text: 'Tickets', - link: '/docs/guides/tickets/' + text: "Tickets", + link: "/docs/guides/tickets/", }, - { text: 'Single Sign On', link: '/docs/guides/OAuth.md' }, - { text: 'WHMCS Importer', link: '/docs/guides/whmcs-importer' }, - { text: 'Migrate Paymenter', link: '/docs/guides/migrate' }, - { text: 'CLI', link: '/docs/guides/cli' }, - { text: 'FAQ', link: '/docs/guides/FAQ.md' } - ] + { text: "Single Sign On", link: "/docs/guides/OAuth.md" }, + { text: "WHMCS Importer", link: "/docs/guides/whmcs-importer" }, + { text: "Migrate Paymenter", link: "/docs/guides/migrate" }, + { text: "CLI", link: "/docs/guides/cli" }, + { text: "FAQ", link: "/docs/guides/FAQ.md" }, + ], }, { - text: 'Contribute', + text: "Contribute", items: [ { - text: 'Help Build Paymenter', - link: '/docs/contribute/how-to-help' + text: "Help Build Paymenter", + link: "/docs/contribute/how-to-help", }, { - text: 'Docs and Translation', - link: '/docs/contribute/docs-translations' - } - ] - } + text: "Docs and Translation", + link: "/docs/contribute/docs-translations", + }, + ], + }, ], - '/release/': [ + "/releases/": [ { - text: 'Index', + text: "Index", items: [ - { text: 'V1.4 Release', link: '/release/v1.4-release' }, - { text: 'V1.3 Release', link: '/release/v1.3-release' }, - { text: 'V1.2 Release', link: '/release/v1.2-release' }, - { text: 'V1.1 Release', link: '/release/v1.1-release' }, - { text: 'V1 Release', link: '/release/v1-release' } - ] - } + { text: "V1.4 Release", link: "/releases/v1.4-release" }, + { text: "V1.3 Release", link: "/releases/v1.3-release" }, + { text: "V1.2 Release", link: "/releases/v1.2-release" }, + { text: "V1.1 Release", link: "/releases/v1.1-release" }, + { text: "V1 Release", link: "/releases/v1-release" }, + ], + }, ], - '/api/': [ + "/api/": [ { - text: 'API Reference', - link: '/api/' - } + text: "API Reference", + link: "/api/", + }, ], - '/development/': [ + "/development/": [ { - text: 'Extensions', + text: "Extensions", items: [ - { text: 'Extensions', link: '/development/extensions/index.md' }, + { text: "Extensions", link: "/development/extensions/index.md" }, { - text: 'Configuration', - link: '/development/extensions/configuration.md' + text: "Configuration", + link: "/development/extensions/configuration.md", }, - { text: 'Event list', link: '/development/event-list.md' } - ] + { text: "Event list", link: "/development/event-list.md" }, + ], }, { - text: 'Types of Extensions', + text: "Types of Extensions", items: [ { - text: 'Server Extension', - link: '/development/extensions/server.md' + text: "Server Extension", + link: "/development/extensions/server.md", }, { - text: 'Gateway Extension', - link: '/development/extensions/gateway.md' - } - ] + text: "Gateway Extension", + link: "/development/extensions/gateway.md", + }, + ], }, { - text: 'Themes', + text: "Themes", items: [ - { text: 'Create a Theme', link: '/development/theme/index.md' }, - { text: 'Building assets', link: '/development/theme/assets.md' } - ] + { text: "Create a Theme", link: "/development/theme/index.md" }, + { text: "Building assets", link: "/development/theme/assets.md" }, + ], }, { - text: 'OAuth', - items: [{ text: 'OAuth', link: '/development/OAuth.md' }] + text: "OAuth", + items: [{ text: "OAuth", link: "/development/OAuth.md" }], }, { - text: 'API Reference', - link: '/api/', - } - ] + text: "API Reference", + link: "/api/", + }, + ], }, markdown: { image: { - lazyLoading: false - } - }, - - footer: { - message: - 'Released under the MIT License.', - copyright: 'Copyright © 2026 Paymenter. All Rights Reserved.' + lazyLoading: false, + }, }, socialLinks: [ { - icon: 'discord', - link: 'https://discord.gg/paymenter-882318291014651924' + icon: "discord", + link: "https://discord.gg/paymenter-882318291014651924", }, - { icon: 'github', link: 'https://github.com/Paymenter' } - ] + { icon: "github", link: "https://github.com/Paymenter" }, + ], }, head: [ [ - 'link', + "link", { - rel: 'alternate', - type: 'application/json+oembed', - href: 'https://paymenter.org/home.json' - } + rel: "alternate", + type: "application/json+oembed", + href: "https://paymenter.org/home.json", + }, ], [ - 'link', + "link", { - rel: 'icon', - href: '/favicon.ico' - } + rel: "icon", + href: "/favicon.ico", + }, ], [ - 'link', + "link", { - rel: 'apple-touch-icon', - sizes: '180x180', - href: '/apple-touch-icon.png' - } + rel: "apple-touch-icon", + sizes: "180x180", + href: "/apple-touch-icon.png", + }, ], [ - 'link', + "link", { - rel: 'icon', - type: 'image/png', - sizes: '32x32', - href: '/favicon-32x32.png' - } + rel: "icon", + type: "image/png", + sizes: "32x32", + href: "/favicon-32x32.png", + }, ], [ - 'link', + "link", { - rel: 'icon', - type: 'image/png', - sizes: '16x16', - href: '/favicon-16x16.png' - } + rel: "icon", + type: "image/png", + sizes: "16x16", + href: "/favicon-16x16.png", + }, ], [ - 'link', + "link", { - rel: 'manifest', - href: '/manifest.json' - } + rel: "manifest", + href: "/manifest.json", + }, ], [ - 'meta', + "meta", { - property: 'twitter:card', - content: 'summary_large_image' - } + property: "twitter:card", + content: "summary_large_image", + }, ], [ - 'meta', + "meta", // theme color { - name: 'theme-color', - content: '#4060ff' - } - ] - ] -} + name: "theme-color", + content: "#4060ff", + }, + ], + ], +}; diff --git a/.vitepress/theme/Layout.vue b/.vitepress/theme/Layout.vue new file mode 100644 index 0000000..43b2a51 --- /dev/null +++ b/.vitepress/theme/Layout.vue @@ -0,0 +1,21 @@ + + + diff --git a/.vitepress/theme/components/Anniversary.vue b/.vitepress/theme/components/Anniversary.vue index dc3769c..8edb2bd 100644 --- a/.vitepress/theme/components/Anniversary.vue +++ b/.vitepress/theme/components/Anniversary.vue @@ -1,662 +1,1099 @@ diff --git a/.vitepress/theme/components/Brand.vue b/.vitepress/theme/components/Brand.vue new file mode 100644 index 0000000..980a307 --- /dev/null +++ b/.vitepress/theme/components/Brand.vue @@ -0,0 +1,420 @@ + + + diff --git a/.vitepress/theme/components/Breadcrumb.vue b/.vitepress/theme/components/Breadcrumb.vue new file mode 100644 index 0000000..162980c --- /dev/null +++ b/.vitepress/theme/components/Breadcrumb.vue @@ -0,0 +1,49 @@ + + + + + diff --git a/.vitepress/theme/components/CustomFooter.vue b/.vitepress/theme/components/CustomFooter.vue deleted file mode 100644 index b97f58a..0000000 --- a/.vitepress/theme/components/CustomFooter.vue +++ /dev/null @@ -1,101 +0,0 @@ - \ No newline at end of file diff --git a/.vitepress/theme/components/LayoutFooter.vue b/.vitepress/theme/components/LayoutFooter.vue new file mode 100644 index 0000000..07b62a7 --- /dev/null +++ b/.vitepress/theme/components/LayoutFooter.vue @@ -0,0 +1,218 @@ + + + diff --git a/.vitepress/theme/components/Marketplace.vue b/.vitepress/theme/components/Marketplace.vue index 698e7d5..af3e7ec 100644 --- a/.vitepress/theme/components/Marketplace.vue +++ b/.vitepress/theme/components/Marketplace.vue @@ -1,312 +1,442 @@ \ No newline at end of file + diff --git a/.vitepress/theme/components/MarketplaceDetail.vue b/.vitepress/theme/components/MarketplaceDetail.vue new file mode 100644 index 0000000..5ca5ad1 --- /dev/null +++ b/.vitepress/theme/components/MarketplaceDetail.vue @@ -0,0 +1,252 @@ + + + diff --git a/.vitepress/theme/components/MarketplaceSidebar.vue b/.vitepress/theme/components/MarketplaceSidebar.vue new file mode 100644 index 0000000..d9622e6 --- /dev/null +++ b/.vitepress/theme/components/MarketplaceSidebar.vue @@ -0,0 +1,130 @@ + + + diff --git a/.vitepress/theme/components/ReleaseList.vue b/.vitepress/theme/components/ReleaseList.vue new file mode 100644 index 0000000..45ef0c3 --- /dev/null +++ b/.vitepress/theme/components/ReleaseList.vue @@ -0,0 +1,114 @@ + + + diff --git a/.vitepress/theme/components/icons/account-circle-fill.vue b/.vitepress/theme/components/icons/account-circle-fill.vue new file mode 100644 index 0000000..1e9f836 --- /dev/null +++ b/.vitepress/theme/components/icons/account-circle-fill.vue @@ -0,0 +1,11 @@ + diff --git a/.vitepress/theme/components/icons/arrow-left-fill.vue b/.vitepress/theme/components/icons/arrow-left-fill.vue new file mode 100644 index 0000000..c6d1de4 --- /dev/null +++ b/.vitepress/theme/components/icons/arrow-left-fill.vue @@ -0,0 +1,9 @@ + diff --git a/.vitepress/theme/components/icons/blesta-icon.vue b/.vitepress/theme/components/icons/blesta-icon.vue new file mode 100644 index 0000000..762888d --- /dev/null +++ b/.vitepress/theme/components/icons/blesta-icon.vue @@ -0,0 +1,16 @@ + diff --git a/.vitepress/theme/components/icons/builtbybit.vue b/.vitepress/theme/components/icons/builtbybit.vue new file mode 100644 index 0000000..2630b82 --- /dev/null +++ b/.vitepress/theme/components/icons/builtbybit.vue @@ -0,0 +1,22 @@ + diff --git a/.vitepress/theme/components/icons/check-fill.vue b/.vitepress/theme/components/icons/check-fill.vue new file mode 100644 index 0000000..eebb80f --- /dev/null +++ b/.vitepress/theme/components/icons/check-fill.vue @@ -0,0 +1,11 @@ + diff --git a/.vitepress/theme/components/icons/checkbox-circle-fill.vue b/.vitepress/theme/components/icons/checkbox-circle-fill.vue new file mode 100644 index 0000000..15b1c01 --- /dev/null +++ b/.vitepress/theme/components/icons/checkbox-circle-fill.vue @@ -0,0 +1,11 @@ + diff --git a/.vitepress/theme/components/icons/code-fill.vue b/.vitepress/theme/components/icons/code-fill.vue new file mode 100644 index 0000000..cc57d17 --- /dev/null +++ b/.vitepress/theme/components/icons/code-fill.vue @@ -0,0 +1,11 @@ + diff --git a/.vitepress/theme/components/icons/link-m.vue b/.vitepress/theme/components/icons/link-m.vue new file mode 100644 index 0000000..68e1da0 --- /dev/null +++ b/.vitepress/theme/components/icons/link-m.vue @@ -0,0 +1,11 @@ + diff --git a/.vitepress/theme/components/icons/paymenter-icon.vue b/.vitepress/theme/components/icons/paymenter-icon.vue new file mode 100644 index 0000000..f617fab --- /dev/null +++ b/.vitepress/theme/components/icons/paymenter-icon.vue @@ -0,0 +1,47 @@ + diff --git a/.vitepress/theme/components/icons/price-tag-3-fill.vue b/.vitepress/theme/components/icons/price-tag-3-fill.vue new file mode 100644 index 0000000..4503fce --- /dev/null +++ b/.vitepress/theme/components/icons/price-tag-3-fill.vue @@ -0,0 +1,11 @@ + diff --git a/.vitepress/theme/components/icons/share-2-fill.vue b/.vitepress/theme/components/icons/share-2-fill.vue new file mode 100644 index 0000000..1c29133 --- /dev/null +++ b/.vitepress/theme/components/icons/share-2-fill.vue @@ -0,0 +1,11 @@ + diff --git a/.vitepress/theme/components/icons/star-half-fill.vue b/.vitepress/theme/components/icons/star-half-fill.vue new file mode 100644 index 0000000..8e6ffb0 --- /dev/null +++ b/.vitepress/theme/components/icons/star-half-fill.vue @@ -0,0 +1,11 @@ + diff --git a/.vitepress/theme/components/icons/whmcs-icon.vue b/.vitepress/theme/components/icons/whmcs-icon.vue new file mode 100644 index 0000000..42f879b --- /dev/null +++ b/.vitepress/theme/components/icons/whmcs-icon.vue @@ -0,0 +1,12 @@ + diff --git a/.vitepress/theme/components/landing/FeatureItem.vue b/.vitepress/theme/components/landing/FeatureItem.vue index ae1393e..61a4f16 100644 --- a/.vitepress/theme/components/landing/FeatureItem.vue +++ b/.vitepress/theme/components/landing/FeatureItem.vue @@ -1,30 +1,32 @@ diff --git a/.vitepress/theme/components/landing/Features.vue b/.vitepress/theme/components/landing/Features.vue index 4582a75..240c2d6 100644 --- a/.vitepress/theme/components/landing/Features.vue +++ b/.vitepress/theme/components/landing/Features.vue @@ -1,290 +1,470 @@ - diff --git a/.vitepress/theme/components/landing/Hero.vue b/.vitepress/theme/components/landing/Hero.vue index 8c94f9b..8b1b3c7 100644 --- a/.vitepress/theme/components/landing/Hero.vue +++ b/.vitepress/theme/components/landing/Hero.vue @@ -1,71 +1,96 @@ diff --git a/.vitepress/theme/components/landing/SectionBlock.vue b/.vitepress/theme/components/landing/SectionBlock.vue index 953549d..ca8a2dd 100644 --- a/.vitepress/theme/components/landing/SectionBlock.vue +++ b/.vitepress/theme/components/landing/SectionBlock.vue @@ -1,8 +1,14 @@ \ No newline at end of file + diff --git a/.vitepress/theme/components/landing/Slider.vue b/.vitepress/theme/components/landing/Slider.vue index 53e3b02..9f6776a 100644 --- a/.vitepress/theme/components/landing/Slider.vue +++ b/.vitepress/theme/components/landing/Slider.vue @@ -4,108 +4,135 @@ import KeenSlider from "keen-slider"; import "keen-slider/keen-slider.min.css"; export default { - setup() { - const lightModeImages = [ - "/landing/screenshots/light/dashboard.webp", - "/landing/screenshots/light/admin-1.webp", - "/landing/screenshots/light/admin-2.webp", - "/landing/screenshots/light/admin-3.webp", - ]; - const darkModeImages = [ - "/landing/screenshots/dark/dashboard.webp", - "/landing/screenshots/dark/admin-1.webp", - "/landing/screenshots/dark/admin-2.webp", - "/landing/screenshots/dark/admin-3.webp", - ]; - const placeholder = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII="; - const loaded = ref([]); - const isDarkMode = ref(false); - const currentImages = computed(() => isDarkMode.value ? darkModeImages : lightModeImages); - - let sliderInstance = null; - let observer = null; + setup() { + const lightModeImages = [ + "/landing/screenshots/light/dashboard.webp", + "/landing/screenshots/light/admin-1.webp", + "/landing/screenshots/light/admin-2.webp", + "/landing/screenshots/light/admin-3.webp", + ]; + const darkModeImages = [ + "/landing/screenshots/dark/dashboard.webp", + "/landing/screenshots/dark/admin-1.webp", + "/landing/screenshots/dark/admin-2.webp", + "/landing/screenshots/dark/admin-3.webp", + ]; + const placeholder = + "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII="; + const loaded = ref([]); + const isDarkMode = ref(false); + const currentImages = computed(() => + isDarkMode.value ? darkModeImages : lightModeImages, + ); - onMounted(() => { - isDarkMode.value = document.documentElement.classList.contains("dark"); - - sliderInstance = new KeenSlider(".keen-slider", { - loop: true, - initial: 0, - created: (s) => { - loaded.value[s.track.details.rel] = true; - loaded.value[s.track.details.rel + 1] = true; - loaded.value[s.track.details.slides.length - 1] = true; - }, - animationEnded: (s) => { - const idx = s.track.details.rel; - const slidesLength = s.track.details.slides.length; + let sliderInstance = null; + let observer = null; - loaded.value[idx] = true; - loaded.value[(idx + 1) % slidesLength] = true; - loaded.value[(idx - 1 + slidesLength) % slidesLength] = true; - }, - }); + onMounted(() => { + isDarkMode.value = + document.documentElement.classList.contains("dark"); - observer = new MutationObserver(() => { - isDarkMode.value = document.documentElement.classList.contains("dark"); - }); + sliderInstance = new KeenSlider(".keen-slider", { + loop: true, + initial: 0, + created: (s) => { + loaded.value[s.track.details.rel] = true; + loaded.value[s.track.details.rel + 1] = true; + loaded.value[s.track.details.slides.length - 1] = true; + }, + animationEnded: (s) => { + const idx = s.track.details.rel; + const slidesLength = s.track.details.slides.length; - observer.observe(document.documentElement, { - attributes: true, - attributeFilter: ["class"], - }); - }); + loaded.value[idx] = true; + loaded.value[(idx + 1) % slidesLength] = true; + loaded.value[(idx - 1 + slidesLength) % slidesLength] = + true; + }, + }); - onUnmounted(() => { - if (observer) observer.disconnect(); - if (sliderInstance) sliderInstance.destroy(); - }); + observer = new MutationObserver(() => { + isDarkMode.value = + document.documentElement.classList.contains("dark"); + }); - function nextSlide() { - if (sliderInstance) sliderInstance.next(); - } + observer.observe(document.documentElement, { + attributes: true, + attributeFilter: ["class"], + }); + }); - function prevSlide() { - if (sliderInstance) sliderInstance.prev(); - } + onUnmounted(() => { + if (observer) observer.disconnect(); + if (sliderInstance) sliderInstance.destroy(); + }); - return { currentImages, loaded, nextSlide, prevSlide, placeholder }; - }, + function nextSlide() { + if (sliderInstance) sliderInstance.next(); + } + + function prevSlide() { + if (sliderInstance) sliderInstance.prev(); + } + + return { currentImages, loaded, nextSlide, prevSlide, placeholder }; + }, }; diff --git a/.vitepress/theme/components/landing/SupportBanner.vue b/.vitepress/theme/components/landing/SupportBanner.vue index 1d30d0d..b02bfd5 100644 --- a/.vitepress/theme/components/landing/SupportBanner.vue +++ b/.vitepress/theme/components/landing/SupportBanner.vue @@ -1,18 +1,27 @@