Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

versioning, picker component #178

Merged
merged 14 commits into from
Nov 16, 2024
3 changes: 1 addition & 2 deletions docs/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
"devDependencies": {
"markdown-it": "^14.1.0",
"markdown-it-mathjax3": "^4.3.2",
"vitepress": "^1.1.4",
"vitepress": "^1.5.0",
"vitepress-plugin-tabs": "^0.5.0"
},
"scripts": {
Expand All @@ -11,7 +11,6 @@
"docs:preview": "vitepress preview build/.documenter"
},
"dependencies": {
"@shikijs/transformers": "^1.1.7",
"markdown-it-footnote": "^4.0.0"
}
}
32 changes: 27 additions & 5 deletions docs/src/.vitepress/config.mts
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,27 @@ import { defineConfig } from 'vitepress'
import { tabsMarkdownPlugin } from 'vitepress-plugin-tabs'
import mathjax3 from "markdown-it-mathjax3";
import footnote from "markdown-it-footnote";
import { transformerMetaWordHighlight } from '@shikijs/transformers';

function getBaseRepository(base: string): string {
if (!base || base === '/') return '/';
const parts = base.split('/').filter(Boolean);
return parts.length > 0 ? `/${parts[0]}/` : '/';
}

const baseTemp = {
base: 'REPLACE_ME_DOCUMENTER_VITEPRESS',// TODO: replace this in makedocs!
Copy link
Contributor

@jkrumbiegel jkrumbiegel Sep 20, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@asinghvi17 by the way, the way these strings are replaced makes the code unnecessarily ugly. Couldn't you give every bit its own name like REPLACE_ME_DOCUMENTER_VITEPRESS_FAVICON? Then one could it splice in directly wherever needed without relying on the base: thing being present.

Copy link
Collaborator

@asinghvi17 asinghvi17 Sep 20, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We could, it's not super complicated to do either. Will look into it today.

}

const navTemp = {
nav: 'REPLACE_ME_DOCUMENTER_VITEPRESS',
}

const nav = [
...navTemp.nav,
{
component: 'VersionPicker'
}
]
// https://vitepress.dev/reference/site-config
export default defineConfig({
base: 'REPLACE_ME_DOCUMENTER_VITEPRESS', // TODO: replace this in makedocs!
Expand All @@ -12,7 +31,12 @@ export default defineConfig({
lastUpdated: true,
cleanUrls: true,
outDir: 'REPLACE_ME_DOCUMENTER_VITEPRESS', // This is required for MarkdownVitepress to work correctly...
head: [['link', { rel: 'icon', href: '/DocumenterVitepress.jl/dev/favicon.ico' }]],
head: [
['link', { rel: 'icon', href: 'REPLACE_ME_DOCUMENTER_VITEPRESS_FAVICON' }],
['script', {src: `${getBaseRepository(baseTemp.base)}versions.js`}],
// ['script', {src: '/versions.js'], for custom domains, I guess if deploy_url is available.
['script', {src: `${baseTemp.base}siteinfo.js`}]
],
vite: {
build: {
assetsInlineLimit: 0, // so we can tell whether we have created inlined images or not, we don't let vite inline them
Expand All @@ -30,8 +54,6 @@ export default defineConfig({
light: "github-light",
dark: "github-dark"
},
codeTransformers: [ transformerMetaWordHighlight(), ],

},
themeConfig: {
outline: 'deep',
Expand All @@ -43,7 +65,7 @@ export default defineConfig({
detailedView: true
}
},
nav: 'REPLACE_ME_DOCUMENTER_VITEPRESS',
nav,
sidebar: 'REPLACE_ME_DOCUMENTER_VITEPRESS',
editLink: 'REPLACE_ME_DOCUMENTER_VITEPRESS',
socialLinks: [
Expand Down
4 changes: 3 additions & 1 deletion docs/src/.vitepress/theme/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { h } from 'vue'
import type { Theme } from 'vitepress'
import DefaultTheme from 'vitepress/theme'
import AsideTrustees from '../../components/AsideTrustees.vue'
import VersionPicker from "../../components/VersionPicker.vue"

import { enhanceAppWithTabs } from 'vitepress-plugin-tabs/client'
import './style.css'
Expand All @@ -16,6 +17,7 @@ export default {
})
},
enhanceApp({ app, router, siteData }) {
enhanceAppWithTabs(app)
enhanceAppWithTabs(app);
app.component('VersionPicker', VersionPicker);
}
} satisfies Theme
142 changes: 142 additions & 0 deletions docs/src/components/VersionPicker.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,142 @@
<!-- Adapted from https://github.com/MakieOrg/Makie.jl/blob/master/docs/src/.vitepress/theme/VersionPicker.vue -->

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import { useData } from 'vitepress'
import VPNavBarMenuGroup from 'vitepress/dist/client/theme-default/components/VPNavBarMenuGroup.vue'
import VPNavScreenMenuGroup from 'vitepress/dist/client/theme-default/components/VPNavScreenMenuGroup.vue'

// Extend the global Window interface to include DOC_VERSIONS and DOCUMENTER_CURRENT_VERSION
declare global {
interface Window {
DOC_VERSIONS?: string[];
DOCUMENTER_CURRENT_VERSION?: string;
}
}

const props = defineProps<{
screenMenu?: boolean
}>()

const versions = ref<Array<{ text: string, link: string }>>([]);
const currentVersion = ref('Versions');
const isClient = ref(false);
const { site } = useData()

const isLocalBuild = () => {
return typeof window !== 'undefined' && (window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1');
}

const getBaseRepository = () => {
if (typeof window === 'undefined') return ''; // Handle server-side rendering (SSR)
const { origin, pathname } = window.location;
// Check if it's a GitHub Pages (or similar) setup
if (origin.includes('github.io')) {
// Extract the first part of the path as the repository name
const pathParts = pathname.split('/').filter(Boolean);
const baseRepo = pathParts.length > 0 ? `/${pathParts[0]}` : '';
return `${origin}${baseRepo}`;
} else {
// For custom domains, use just the origin (e.g., https://docs.makie.org)
return origin;
}
};

const waitForScriptsToLoad = () => {
return new Promise<boolean>((resolve) => {
if (isLocalBuild()) {
resolve(false);
return;
}
const checkInterval = setInterval(() => {
if (window.DOC_VERSIONS && window.DOCUMENTER_CURRENT_VERSION) {
clearInterval(checkInterval);
resolve(true);
}
}, 100);
// Timeout after 5 seconds
setTimeout(() => {
clearInterval(checkInterval);
resolve(false);
}, 5000);
});
};

const loadVersions = async () => {
if (typeof window === 'undefined') return; // Guard for SSR

try {
if (isLocalBuild()) {
// Handle the local build scenario directly
const fallbackVersions = ['dev'];
versions.value = fallbackVersions.map(v => ({
text: v,
link: '/'
}));
currentVersion.value = 'dev';
} else {
// For non-local builds, wait for scripts to load
const scriptsLoaded = await waitForScriptsToLoad();
const getBaseRepositoryPath = computed(() => {
return getBaseRepository();
});

if (scriptsLoaded && window.DOC_VERSIONS && window.DOCUMENTER_CURRENT_VERSION) {
versions.value = window.DOC_VERSIONS.map((v: string) => ({
text: v,
link: `${getBaseRepositoryPath.value}/${v}/`
}));
currentVersion.value = window.DOCUMENTER_CURRENT_VERSION;
} else {
// Fallback logic if scripts fail to load or are not available
const fallbackVersions = ['dev'];
versions.value = fallbackVersions.map(v => ({
text: v,
link: `${getBaseRepositoryPath.value}/${v}/`
}));
currentVersion.value = 'dev';
}
}
} catch (error) {
console.warn('Error loading versions:', error);
// Use fallback logic in case of an error
const fallbackVersions = ['dev'];
const getBaseRepositoryPath = computed(() => {
return getBaseRepository();
});
versions.value = fallbackVersions.map(v => ({
text: v,
link: `${getBaseRepositoryPath.value}/${v}/`
}));
currentVersion.value = 'dev';
}
isClient.value = true;
};

onMounted(loadVersions);
</script>

<template>
<template v-if="isClient">
<VPNavBarMenuGroup
v-if="!screenMenu && versions.length > 0"
:item="{ text: currentVersion, items: versions }"
class="VPVersionPicker"
/>
<VPNavScreenMenuGroup
v-else-if="screenMenu && versions.length > 0"
:text="currentVersion"
:items="versions"
class="VPVersionPicker"
/>
</template>
</template>

<style scoped>
.VPVersionPicker :deep(button .text) {
color: var(--vp-c-text-1) !important;
}
.VPVersionPicker:hover :deep(button .text) {
color: var(--vp-c-text-2) !important;
}
</style>
2 changes: 1 addition & 1 deletion template/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
"markdown-it": "^14.1.0",
"markdown-it-footnote": "^4.0.0",
"markdown-it-mathjax3": "^4.3.2",
"vitepress": "^1.1.4",
"vitepress": "^1.5.0",
"vitepress-plugin-tabs": "^0.5.0"
}
}
30 changes: 28 additions & 2 deletions template/src/.vitepress/config.mts
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,27 @@ import { tabsMarkdownPlugin } from 'vitepress-plugin-tabs'
import mathjax3 from "markdown-it-mathjax3";
import footnote from "markdown-it-footnote";

function getBaseRepository(base: string): string {
if (!base || base === '/') return '/';
const parts = base.split('/').filter(Boolean);
return parts.length > 0 ? `/${parts[0]}/` : '/';
}

const baseTemp = {
base: 'REPLACE_ME_DOCUMENTER_VITEPRESS',// TODO: replace this in makedocs!
}

const navTemp = {
nav: 'REPLACE_ME_DOCUMENTER_VITEPRESS',
}

const nav = [
...navTemp.nav,
{
component: 'VersionPicker'
}
]

// https://vitepress.dev/reference/site-config
export default defineConfig({
base: 'REPLACE_ME_DOCUMENTER_VITEPRESS',// TODO: replace this in makedocs!
Expand All @@ -11,7 +32,12 @@ export default defineConfig({
lastUpdated: true,
cleanUrls: true,
outDir: 'REPLACE_ME_DOCUMENTER_VITEPRESS', // This is required for MarkdownVitepress to work correctly...
head: [['link', { rel: 'icon', href: 'REPLACE_ME_DOCUMENTER_VITEPRESS_FAVICON' }]],
head: [
['link', { rel: 'icon', href: 'REPLACE_ME_DOCUMENTER_VITEPRESS_FAVICON' }],
['script', {src: `${getBaseRepository(baseTemp.base)}versions.js`}],
// ['script', {src: '/versions.js'], for custom domains, I guess if deploy_url is available.
['script', {src: `${baseTemp.base}siteinfo.js`}]
],
ignoreDeadLinks: true,

markdown: {
Expand All @@ -34,7 +60,7 @@ export default defineConfig({
detailedView: true
}
},
nav: 'REPLACE_ME_DOCUMENTER_VITEPRESS',
nav,
sidebar: 'REPLACE_ME_DOCUMENTER_VITEPRESS',
editLink: 'REPLACE_ME_DOCUMENTER_VITEPRESS',
socialLinks: [
Expand Down
4 changes: 3 additions & 1 deletion template/src/.vitepress/theme/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
import { h } from 'vue'
import type { Theme } from 'vitepress'
import DefaultTheme from 'vitepress/theme'
import VersionPicker from "../../components/VersionPicker.vue"

import { enhanceAppWithTabs } from 'vitepress-plugin-tabs/client'
import './style.css'
Expand All @@ -14,6 +15,7 @@ export default {
})
},
enhanceApp({ app, router, siteData }) {
enhanceAppWithTabs(app)
enhanceAppWithTabs(app);
app.component('VersionPicker', VersionPicker);
}
} satisfies Theme
Loading
Loading