themekit-js 1.1.1 → 1.1.2

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2024 Seedunk
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2019-present, Yuxi (Evan) You
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,2 +1 @@
-# ThemeKit
-## seedunk
+#  ThemeKit

package/dist/client/app/components/ClientOnly.js

@@ -0,0 +1,10 @@
+import { defineComponent, ref, onMounted } from 'vue';
+export const ClientOnly = defineComponent({
+    setup(_, { slots }) {
+        const show = ref(false);
+        onMounted(() => {
+            show.value = true;
+        });
+        return () => (show.value && slots.default ? slots.default() : null);
+    }
+});

package/dist/client/app/components/Content.js

@@ -0,0 +1,23 @@
+import { defineComponent, h } from 'vue';
+import { useData, useRoute } from 'themekit-js';
+import { contentUpdatedCallbacks } from '../utils';
+const runCbs = () => contentUpdatedCallbacks.forEach((fn) => fn());
+export const Content = defineComponent({
+    name: 'VitePressContent',
+    props: {
+        as: { type: [Object, String], default: 'div' }
+    },
+    setup(props) {
+        const route = useRoute();
+        const { site } = useData();
+        return () => h(props.as, site.value.contentProps ?? { style: { position: 'relative' } }, [
+            route.component
+                ? h(route.component, {
+                    onVnodeMounted: runCbs,
+                    onVnodeUpdated: runCbs,
+                    onVnodeUnmounted: runCbs
+                })
+                : '404 Page Not Found'
+        ]);
+    }
+});

package/dist/client/app/composables/codeGroups.js

@@ -0,0 +1,40 @@
+import { inBrowser, onContentUpdated } from 'themekit-js';
+export function useCodeGroups() {
+    if (import.meta.env.DEV) {
+        onContentUpdated(() => {
+            document.querySelectorAll('.vp-code-group > .blocks').forEach((el) => {
+                Array.from(el.children).forEach((child) => {
+                    child.classList.remove('active');
+                });
+                el.children[0].classList.add('active');
+            });
+        });
+    }
+    if (inBrowser) {
+        window.addEventListener('click', (e) => {
+            const el = e.target;
+            if (el.matches('.vp-code-group input')) {
+                // input <- .tabs <- .vp-code-group
+                const group = el.parentElement?.parentElement;
+                if (!group)
+                    return;
+                const i = Array.from(group.querySelectorAll('input')).indexOf(el);
+                if (i < 0)
+                    return;
+                const blocks = group.querySelector('.blocks');
+                if (!blocks)
+                    return;
+                const current = Array.from(blocks.children).find((child) => child.classList.contains('active'));
+                if (!current)
+                    return;
+                const next = blocks.children[i];
+                if (!next || current === next)
+                    return;
+                current.classList.remove('active');
+                next.classList.add('active');
+                const label = group?.querySelector(`label[for="${el.id}"]`);
+                label?.scrollIntoView({ block: 'nearest' });
+            }
+        });
+    }
+}

package/dist/client/app/composables/copyCode.js

@@ -0,0 +1,73 @@
+import { inBrowser } from 'themekit-js';
+export function useCopyCode() {
+    if (inBrowser) {
+        const timeoutIdMap = new WeakMap();
+        window.addEventListener('click', (e) => {
+            const el = e.target;
+            if (el.matches('div[class*="language-"] > button.copy')) {
+                const parent = el.parentElement;
+                const sibling = el.nextElementSibling?.nextElementSibling;
+                if (!parent || !sibling) {
+                    return;
+                }
+                const isShell = /language-(shellscript|shell|bash|sh|zsh)/.test(parent.className);
+                const ignoredNodes = ['.vp-copy-ignore', '.diff.remove'];
+                // Clone the node and remove the ignored nodes
+                const clone = sibling.cloneNode(true);
+                clone
+                    .querySelectorAll(ignoredNodes.join(','))
+                    .forEach((node) => node.remove());
+                let text = clone.textContent || '';
+                if (isShell) {
+                    text = text.replace(/^ *(\$|>) /gm, '').trim();
+                }
+                copyToClipboard(text).then(() => {
+                    el.classList.add('copied');
+                    clearTimeout(timeoutIdMap.get(el));
+                    const timeoutId = setTimeout(() => {
+                        el.classList.remove('copied');
+                        el.blur();
+                        timeoutIdMap.delete(el);
+                    }, 2000);
+                    timeoutIdMap.set(el, timeoutId);
+                });
+            }
+        });
+    }
+}
+async function copyToClipboard(text) {
+    try {
+        return navigator.clipboard.writeText(text);
+    }
+    catch {
+        const element = document.createElement('textarea');
+        const previouslyFocusedElement = document.activeElement;
+        element.value = text;
+        // Prevent keyboard from showing on mobile
+        element.setAttribute('readonly', '');
+        element.style.contain = 'strict';
+        element.style.position = 'absolute';
+        element.style.left = '-9999px';
+        element.style.fontSize = '12pt'; // Prevent zooming on iOS
+        const selection = document.getSelection();
+        const originalRange = selection
+            ? selection.rangeCount > 0 && selection.getRangeAt(0)
+            : null;
+        document.body.appendChild(element);
+        element.select();
+        // Explicit selection workaround for iOS
+        element.selectionStart = 0;
+        element.selectionEnd = text.length;
+        document.execCommand('copy');
+        document.body.removeChild(element);
+        if (originalRange) {
+            selection.removeAllRanges(); // originalRange can't be truthy when selection is falsy
+            selection.addRange(originalRange);
+        }
+        // Get the focus back on the previously focused element, if any
+        if (previouslyFocusedElement) {
+            ;
+            previouslyFocusedElement.focus();
+        }
+    }
+}

package/dist/client/app/composables/head.js

@@ -0,0 +1,81 @@
+import { watchEffect } from 'vue';
+import { createTitle, mergeHead } from '../../shared';
+export function useUpdateHead(route, siteDataByRouteRef) {
+    let isFirstUpdate = true;
+    let managedHeadElements = [];
+    const updateHeadTags = (newTags) => {
+        if (import.meta.env.PROD && isFirstUpdate) {
+            // in production, the initial meta tags are already pre-rendered so we
+            // skip the first update.
+            isFirstUpdate = false;
+            newTags.forEach((tag) => {
+                const headEl = createHeadElement(tag);
+                for (const el of document.head.children) {
+                    if (el.isEqualNode(headEl)) {
+                        managedHeadElements.push(el);
+                        return;
+                    }
+                }
+            });
+            return;
+        }
+        const newElements = newTags.map(createHeadElement);
+        managedHeadElements.forEach((oldEl, oldIndex) => {
+            const matchedIndex = newElements.findIndex((newEl) => newEl?.isEqualNode(oldEl ?? null));
+            if (matchedIndex !== -1) {
+                delete newElements[matchedIndex];
+            }
+            else {
+                oldEl?.remove();
+                delete managedHeadElements[oldIndex];
+            }
+        });
+        newElements.forEach((el) => el && document.head.appendChild(el));
+        managedHeadElements = [...managedHeadElements, ...newElements].filter(Boolean);
+    };
+    watchEffect(() => {
+        const pageData = route.data;
+        const siteData = siteDataByRouteRef.value;
+        const pageDescription = pageData && pageData.description;
+        const frontmatterHead = (pageData && pageData.frontmatter.head) || [];
+        // update title and description
+        const title = createTitle(siteData, pageData);
+        if (title !== document.title) {
+            document.title = title;
+        }
+        const description = pageDescription || siteData.description;
+        let metaDescriptionElement = document.querySelector(`meta[name=description]`);
+        if (metaDescriptionElement) {
+            if (metaDescriptionElement.getAttribute('content') !== description) {
+                metaDescriptionElement.setAttribute('content', description);
+            }
+        }
+        else {
+            createHeadElement(['meta', { name: 'description', content: description }]);
+        }
+        updateHeadTags(mergeHead(siteData.head, filterOutHeadDescription(frontmatterHead)));
+    });
+}
+function createHeadElement([tag, attrs, innerHTML]) {
+    const el = document.createElement(tag);
+    for (const key in attrs) {
+        el.setAttribute(key, attrs[key]);
+    }
+    if (innerHTML) {
+        el.innerHTML = innerHTML;
+    }
+    if (tag === 'script' && !attrs.async) {
+        // async is true by default for dynamically created scripts
+        ;
+        el.async = false;
+    }
+    return el;
+}
+function isMetaDescription(headConfig) {
+    return (headConfig[0] === 'meta' &&
+        headConfig[1] &&
+        headConfig[1].name === 'description');
+}
+function filterOutHeadDescription(head) {
+    return head.filter((h) => !isMetaDescription(h));
+}

package/dist/client/app/composables/preFetch.js

@@ -0,0 +1,99 @@
+// Customized pre-fetch for page chunks based on
+// https://github.com/GoogleChromeLabs/quicklink
+import { useRoute } from '../router';
+import { onMounted, onUnmounted, watch } from 'vue';
+import { inBrowser, pathToFile } from '../utils';
+const hasFetched = new Set();
+const createLink = () => document.createElement('link');
+const viaDOM = (url) => {
+    const link = createLink();
+    link.rel = `prefetch`;
+    link.href = url;
+    document.head.appendChild(link);
+};
+const viaXHR = (url) => {
+    const req = new XMLHttpRequest();
+    req.open('GET', url, (req.withCredentials = true));
+    req.send();
+};
+let link;
+const doFetch = inBrowser &&
+    (link = createLink()) &&
+    link.relList &&
+    link.relList.supports &&
+    link.relList.supports('prefetch')
+    ? viaDOM
+    : viaXHR;
+export function usePrefetch() {
+    if (!inBrowser) {
+        return;
+    }
+    if (!window.IntersectionObserver) {
+        return;
+    }
+    let conn;
+    if ((conn = navigator.connection) &&
+        (conn.saveData || /2g/.test(conn.effectiveType))) {
+        // Don't prefetch if using 2G or if Save-Data is enabled.
+        return;
+    }
+    const rIC = window.requestIdleCallback || setTimeout;
+    let observer = null;
+    const observeLinks = () => {
+        if (observer) {
+            observer.disconnect();
+        }
+        observer = new IntersectionObserver((entries) => {
+            entries.forEach((entry) => {
+                if (entry.isIntersecting) {
+                    const link = entry.target;
+                    observer.unobserve(link);
+                    const { pathname } = link;
+                    if (!hasFetched.has(pathname)) {
+                        hasFetched.add(pathname);
+                        const pageChunkPath = pathToFile(pathname);
+                        if (pageChunkPath)
+                            doFetch(pageChunkPath);
+                    }
+                }
+            });
+        });
+        rIC(() => {
+            document
+                .querySelectorAll('#app a')
+                .forEach((link) => {
+                const { hostname, pathname } = new URL(link.href instanceof SVGAnimatedString
+                    ? link.href.animVal
+                    : link.href, link.baseURI);
+                const extMatch = pathname.match(/\.\w+$/);
+                if (extMatch && extMatch[0] !== '.html') {
+                    return;
+                }
+                if (
+                // only prefetch same tab navigation, since a new tab will load
+                // the lean js chunk instead.
+                link.target !== '_blank' &&
+                    // only prefetch inbound links
+                    hostname === location.hostname) {
+                    if (pathname !== location.pathname) {
+                        observer.observe(link);
+                    }
+                    else {
+                        // No need to prefetch chunk for the current page, but also mark
+                        // it as already fetched. This is because the initial page uses its
+                        // lean chunk, and if we don't mark it, navigation to another page
+                        // with a link back to the first page will fetch its full chunk
+                        // which isn't needed.
+                        hasFetched.add(pathname);
+                    }
+                }
+            });
+        });
+    };
+    onMounted(observeLinks);
+    const route = useRoute();
+    watch(() => route.path, observeLinks);
+    onUnmounted(() => {
+        observer && observer.disconnect();
+    });
+}

package/dist/client/app/data.js

@@ -0,0 +1,59 @@
+import siteData from '@siteData';
+import { useDark } from '@vueuse/core';
+import { computed, inject, readonly, ref, shallowRef, watch } from 'vue';
+import { APPEARANCE_KEY, createTitle, inBrowser, resolveSiteDataByRoute } from '../shared';
+export const dataSymbol = Symbol();
+// site data is a singleton
+export const siteDataRef = shallowRef((import.meta.env.PROD ? siteData : readonly(siteData)));
+// hmr
+if (import.meta.hot) {
+    import.meta.hot.accept('/@siteData', (m) => {
+        if (m) {
+            siteDataRef.value = m.default;
+        }
+    });
+}
+// per-app data
+export function initData(route) {
+    const site = computed(() => resolveSiteDataByRoute(siteDataRef.value, route.data.relativePath));
+    const appearance = site.value.appearance; // fine with reactivity being lost here, config change triggers a restart
+    const isDark = appearance === 'force-dark'
+        ? ref(true)
+        : appearance
+            ? useDark({
+                storageKey: APPEARANCE_KEY,
+                initialValue: () => typeof appearance === 'string' ? appearance : 'auto',
+                ...(typeof appearance === 'object' ? appearance : {})
+            })
+            : ref(false);
+    const hashRef = ref(inBrowser ? location.hash : '');
+    if (inBrowser) {
+        window.addEventListener('hashchange', () => {
+            hashRef.value = location.hash;
+        });
+    }
+    watch(() => route.data, () => {
+        hashRef.value = inBrowser ? location.hash : '';
+    });
+    return {
+        site,
+        theme: computed(() => site.value.themeConfig),
+        page: computed(() => route.data),
+        frontmatter: computed(() => route.data.frontmatter),
+        params: computed(() => route.data.params),
+        lang: computed(() => site.value.lang),
+        dir: computed(() => route.data.frontmatter.dir || site.value.dir),
+        localeIndex: computed(() => site.value.localeIndex || 'root'),
+        title: computed(() => createTitle(site.value, route.data)),
+        description: computed(() => route.data.description || site.value.description),
+        isDark,
+        hash: computed(() => hashRef.value)
+    };
+}
+export function useData() {
+    const data = inject(dataSymbol);
+    if (!data) {
+        throw new Error('vitepress data not properly injected in app');
+    }
+    return data;
+}

package/dist/client/app/devtools.js

@@ -0,0 +1,29 @@
+import { setupDevToolsPlugin } from '@vue/devtools-api';
+const COMPONENT_STATE_TYPE = 'VitePress';
+export const setupDevtools = (app, router, data) => {
+    setupDevToolsPlugin({
+        // fix recursive reference
+        app: app,
+        id: 'com.seedunk.themekit-js',
+        label: 'ThemeKit JS',
+        packageName: 'themekit-js',
+        homepage: 'https://seedunk.com/@themekit-js',
+        componentStateTypes: [COMPONENT_STATE_TYPE]
+    }, (api) => {
+        // TODO: remove any
+        api.on.inspectComponent((payload) => {
+            payload.instanceData.state.push({
+                type: COMPONENT_STATE_TYPE,
+                key: 'route',
+                value: router.route,
+                editable: false
+            });
+            payload.instanceData.state.push({
+                type: COMPONENT_STATE_TYPE,
+                key: 'data',
+                value: data,
+                editable: false
+            });
+        });
+    });
+};

package/dist/client/app/index.js

@@ -0,0 +1,140 @@
+import RawTheme from '@theme/index';
+import { createApp as createClientApp, createSSRApp, defineComponent, h, onMounted, watchEffect } from 'vue';
+import { ClientOnly } from './components/ClientOnly';
+import { Content } from './components/Content';
+import { useCodeGroups } from './composables/codeGroups';
+import { useCopyCode } from './composables/copyCode';
+import { useUpdateHead } from './composables/head';
+import { usePrefetch } from './composables/preFetch';
+import { dataSymbol, initData, siteDataRef, useData } from './data';
+import { RouterSymbol, createRouter, scrollTo } from './router';
+import { inBrowser, pathToFile } from './utils';
+function resolveThemeExtends(theme) {
+    if (theme.extends) {
+        const base = resolveThemeExtends(theme.extends);
+        return {
+            ...base,
+            ...theme,
+            async enhanceApp(ctx) {
+                if (base.enhanceApp)
+                    await base.enhanceApp(ctx);
+                if (theme.enhanceApp)
+                    await theme.enhanceApp(ctx);
+            }
+        };
+    }
+    return theme;
+}
+const Theme = resolveThemeExtends(RawTheme);
+const VitePressApp = defineComponent({
+    name: 'VitePressApp',
+    setup() {
+        const { site, lang, dir } = useData();
+        // change the language on the HTML element based on the current lang
+        onMounted(() => {
+            watchEffect(() => {
+                document.documentElement.lang = lang.value;
+                document.documentElement.dir = dir.value;
+            });
+        });
+        if (import.meta.env.PROD && site.value.router.prefetchLinks) {
+            // in prod mode, enable intersectionObserver based pre-fetch
+            usePrefetch();
+        }
+        // setup global copy code handler
+        useCopyCode();
+        // setup global code groups handler
+        useCodeGroups();
+        if (Theme.setup)
+            Theme.setup();
+        return () => h(Theme.Layout);
+    }
+});
+export async function createApp() {
+    ;
+    globalThis.__VITEPRESS__ = true;
+    const router = newRouter();
+    const app = newApp();
+    app.provide(RouterSymbol, router);
+    const data = initData(router.route);
+    app.provide(dataSymbol, data);
+    // install global components
+    app.component('Content', Content);
+    app.component('ClientOnly', ClientOnly);
+    // expose $frontmatter & $params
+    Object.defineProperties(app.config.globalProperties, {
+        $frontmatter: {
+            get() {
+                return data.frontmatter.value;
+            }
+        },
+        $params: {
+            get() {
+                return data.page.value.params;
+            }
+        }
+    });
+    if (Theme.enhanceApp) {
+        await Theme.enhanceApp({
+            app,
+            router,
+            siteData: siteDataRef
+        });
+    }
+    // setup devtools in dev mode
+    if (import.meta.env.DEV || __VUE_PROD_DEVTOOLS__) {
+        import('./devtools.js').then(({ setupDevtools }) => setupDevtools(app, router, data));
+    }
+    return { app, router, data };
+}
+function newApp() {
+    return import.meta.env.PROD
+        ? createSSRApp(VitePressApp)
+        : createClientApp(VitePressApp);
+}
+function newRouter() {
+    let isInitialPageLoad = inBrowser;
+    let initialPath;
+    return createRouter((path) => {
+        let pageFilePath = pathToFile(path);
+        let pageModule = null;
+        if (pageFilePath) {
+            if (isInitialPageLoad) {
+                initialPath = pageFilePath;
+            }
+            // use lean build if this is the initial page load or navigating back
+            // to the initial loaded path (the static vnodes already adopted the
+            // static content on that load so no need to re-fetch the page)
+            if (isInitialPageLoad || initialPath === pageFilePath) {
+                pageFilePath = pageFilePath.replace(/\.js$/, '.lean.js');
+            }
+            if (import.meta.env.SSR) {
+                pageModule = import(/*@vite-ignore*/ pageFilePath + '?t=' + Date.now());
+            }
+            else {
+                pageModule = import(/*@vite-ignore*/ pageFilePath);
+            }
+        }
+        if (inBrowser) {
+            isInitialPageLoad = false;
+        }
+        return pageModule;
+    }, Theme.NotFound);
+}
+if (inBrowser) {
+    createApp().then(({ app, router, data }) => {
+        // wait until page component is fetched before mounting
+        router.go().then(() => {
+            // dynamically update head tags
+            useUpdateHead(router.route, data.site);
+            app.mount('#app');
+            // scroll to hash on new tab during dev
+            if (import.meta.env.DEV && location.hash) {
+                const target = document.getElementById(decodeURIComponent(location.hash).slice(1));
+                if (target) {
+                    scrollTo(target, location.hash);
+                }
+            }
+        });
+    });
+}