migrate to vitepress (#151)

.editorconfig

@@ -3,10 +3,10 @@ root = true
 [*]
 charset = utf-8
 indent_style = space
-indent_size = 2
+indent_size = 4
 end_of_line = lf
 insert_final_newline = true
 trim_trailing_whitespace = true
 
-[*.{php,xml,lock,css}]
-indent_size = 4
+[*.{yml}]
+indent_size = 2

.gitignore

@@ -1,36 +1,13 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+.vitepress/cache
+.vitepress/.temp
 
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-
-# testing
-/coverage
-
-# next.js
-/.next/
-/out/
-
-# production
 /build
 /dist/
+/node_modules
 
 # misc
 .DS_Store
 *.pem
 .idea
-package-lock.json
-/public/sitemap.xml
-
-# debug
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-.pnpm-debug.log*
-
-# local env files
 .env*.local
-
-# vercel
-.vercel
+yarn-*.log*

.prettierrc.json

@@ -0,0 +1,14 @@
+{
+    "tabWidth": 4,
+    "printWidth": 100,
+    "singleQuote": true,
+    "trailingComma": "es5",
+    "overrides": [
+        {
+            "files": ["**/*.md", "**/*.yml"],
+            "options": {
+                "tabWidth": 2
+            }
+        }
+    ]
+}

.vitepress/config.js

@@ -0,0 +1,76 @@
+import { defineConfig } from 'vitepress';
+import Nav from './nav.json';
+import Sidebar from './sidebar';
+
+// https://vitepress.dev/reference/site-config
+export default defineConfig({
+    title: 'ZOOlanders',
+    description: 'Guides and Documentation for Essential Addons.',
+    srcDir: 'src',
+    outDir: 'dist',
+    srcExclude: ['**/_partials/*.md'],
+    head: [['link', { rel: 'icon', href: '/favicon.png' }]],
+    sitemap: {
+        hostname: 'https://zoolanders.com',
+    },
+    themeConfig: {
+        logo: '/zoolanders.svg',
+        siteTitle: false,
+        editLink: {
+            pattern: 'https://github.com/zoolanders/documentation/edit/main/src/:path',
+        },
+        search: {
+            provider: 'local',
+        },
+        nav: Nav,
+        sidebar: Sidebar,
+        socialLinks: [
+            {
+                icon: 'github',
+                link: 'https://github.com/zoolanders/documentation',
+            },
+            {
+                icon: 'twitter',
+                link: 'https://twitter.com/jzoolanders',
+            },
+            {
+                icon: 'discord',
+                link: 'https://discord.gg/3BT5nHauWr',
+            },
+        ],
+
+        footer: {
+            message: 'Essentials for YOOtheme Pro and ZOO',
+            copyright: 'Copyright © <a href="https://zoolanders.com">ZOOlanders</a>',
+        },
+    },
+    transformHead({ assets }) {
+        const myFontFile = assets.find(() => /varela-round\.\w+\.woff2/);
+
+        if (myFontFile) {
+            return [
+                [
+                    'link',
+                    {
+                        rel: 'preload',
+                        href: myFontFile,
+                        as: 'font',
+                        type: 'font/woff2',
+                        crossorigin: '',
+                    },
+                ],
+            ];
+        }
+    },
+    async transformPageData(pageData) {
+        const filePath = pageData.filePath;
+
+        if (filePath.startsWith('essentials-for-yootheme-pro/')) {
+            pageData.titleTemplate = ':title | Essentials YOOtheme Pro Documentation | ZOOlanders';
+        }
+
+        if (filePath.startsWith('essentials-for-zoo/')) {
+            pageData.titleTemplate = ':title | Essentials ZOO Documentation | ZOOlanders';
+        }
+    },
+});

.vitepress/nav.json

@@ -0,0 +1,12 @@
+[
+    {
+        "text": "YOOtheme Pro Essentials",
+        "link": "/essentials-for-yootheme-pro/",
+        "activeMatch": "/essentials-for-yootheme-pro/"
+    },
+    {
+        "text": "ZOO Essentials",
+        "link": "/essentials-for-zoo/",
+        "activeMatch": "/essentials-for-zoo/"
+    }
+]

.vitepress/sidebar.js

@@ -0,0 +1,7 @@
+import ZooEssentialsSidebar from '../src/essentials-for-zoo/sidebar.json';
+import YOOthemeProEssentialsSidebar from '../src/essentials-for-yootheme-pro/sidebar.json';
+
+export default {
+    '/essentials-for-zoo/': ZooEssentialsSidebar,
+    '/essentials-for-yootheme-pro/': YOOthemeProEssentialsSidebar,
+};

.vitepress/theme/components/MyLayout.vue

@@ -0,0 +1,48 @@
+<script setup>
+import { watch, nextTick } from 'vue';
+import { useData, useRoute } from 'vitepress';
+import DefaultTheme from 'vitepress/theme';
+
+const route = useRoute();
+const { isDark } = useData();
+const { Layout } = DefaultTheme;
+
+function toggleResourceIconsColor(isDark) {
+    if (typeof document === 'undefined') {
+        return;
+    }
+
+    nextTick(() => {
+        const svgElements = document.querySelectorAll('.tm-resource-icon svg > *');
+
+        svgElements.forEach((el) => {
+            if (el.getAttribute('fill') !== 'none') {
+                el.setAttribute('fill', isDark ? '#fffff5db' : '#444');
+            }
+            if (el.getAttribute('stroke') !== 'none') {
+                el.setAttribute('stroke', isDark ? '#fffff5db' : '#444');
+            }
+        });
+    });
+}
+
+watch(() => isDark.value, toggleResourceIconsColor, {
+    immediate: true,
+});
+
+watch(
+    () => route.path,
+    () => {
+        toggleResourceIconsColor(isDark.value);
+    },
+    {
+        immediate: true,
+    }
+);
+</script>
+
+<template>
+    <Layout>
+        <template #sidebar-nav-before></template>
+    </Layout>
+</template>

.vitepress/theme/components/TmIndex.vue

@@ -0,0 +1,91 @@
+<script setup>
+import { computed } from 'vue';
+import TmIndexItem from './TmIndexItem.vue';
+
+const props = defineProps({ items: { type: Array, required: true } });
+
+const grid = computed(() => {
+    const length = props.items.length;
+
+    if (length === 2) {
+        return 'grid-2';
+    } else if (length === 3) {
+        return 'grid-3';
+    } else if (length % 3 === 0) {
+        return 'grid-6';
+    } else if (length > 3) {
+        return 'grid-4';
+    }
+
+    return '';
+});
+</script>
+
+<template>
+    <div v-if="items" class="TmIndexItems">
+        <div class="container">
+            <div class="items">
+                <div v-for="item in items" :key="item.title" class="item" :class="[grid]">
+                    <TmIndexItem
+                        :icon="item.icon"
+                        :title="item.title"
+                        :details="item.details"
+                        :link="item.link"
+                        :link-text="item.linkText"
+                        :rel="item.rel"
+                        :target="item.target"
+                    />
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.TmIndexItems {
+    position: relative;
+    padding: 25px 0;
+}
+
+.container {
+    margin: 0 auto;
+    max-width: 1152px;
+}
+
+.items {
+    display: flex;
+    flex-wrap: wrap;
+    margin: -8px;
+}
+
+.item {
+    padding: 8px;
+    width: 100%;
+}
+
+@media (min-width: 640px) {
+    .item.grid-2,
+    .item.grid-4,
+    .item.grid-6 {
+        width: calc(100% / 2);
+    }
+}
+/*
+@media (min-width: 768px) {
+  .item.grid-2,
+  .item.grid-4 {
+    width: calc(100% / 3);
+  }
+
+  .item.grid-3,
+  .item.grid-6 {
+    width: calc(100% / 3);
+  }
+}
+
+@media (min-width: 960px) {
+  .item.grid-4 {
+    width: calc(100% / 4);
+  }
+} */
+</style>