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.

Sign up for GitHub

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

be explicit about the menu version #216

Merged
merged 7 commits into from
Feb 18, 2025
Merged

be explicit about the menu version #216

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
b5187db
first update npm dependecies
lazarusA Feb 18, 2025
4d6f20c
be explicit that is a version
lazarusA Feb 18, 2025
504d1ad
window version
lazarusA Feb 18, 2025
7f8d1b3
test class
lazarusA Feb 18, 2025
e2fd9b3
be explicit
lazarusA Feb 18, 2025
4ef1c0c
to template
lazarusA Feb 18, 2025
04b1450
be reactive
lazarusA Feb 18, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions docs/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
{
"devDependencies": {
"@nolebase/vitepress-plugin-enhanced-readabilities": "^2.12.1",
"@nolebase/vitepress-plugin-enhanced-readabilities": "^2.14.0",
"@types/d3-format": "^3.0.4",
"@types/node": "^22.10.9",
"@types/node": "^22.13.4",
"markdown-it": "^14.1.0",
"markdown-it-mathjax3": "^4.3.2",
"vitepress": "^1.6.3",
"vitepress-plugin-tabs": "^0.5.0"
"vitepress-plugin-tabs": "^0.6.0"
},
"scripts": {
"docs:dev": "vitepress dev build/.documenter",
Expand Down
98 changes: 46 additions & 52 deletions docs/src/components/VersionPicker.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,50 +1,41 @@
<!-- 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 { 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 props = defineProps<{ screenMenu?: boolean }>();
const versions = ref<Array<{ text: string, link: string, class?: string }>>([]);
const currentVersion = ref('Versions');
const isClient = ref(false);
const { site } = useData()
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)
if (typeof window === 'undefined') return '';
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;
return `${origin}/${pathParts[0] ?? ''}`;
}
return origin;
};

const waitForScriptsToLoad = () => {
return new Promise<boolean>((resolve) => {
if (isLocalBuild()) {
if (isLocalBuild() || typeof window === 'undefined') {
resolve(false);
return;
}
Expand All @@ -54,7 +45,6 @@ const waitForScriptsToLoad = () => {
resolve(true);
}
}, 100);
// Timeout after 5 seconds
setTimeout(() => {
clearInterval(checkInterval);
resolve(false);
Expand All @@ -63,70 +53,65 @@ const waitForScriptsToLoad = () => {
};

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

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

if (scriptsLoaded && window.DOC_VERSIONS && window.DOCUMENTER_CURRENT_VERSION) {
versions.value = window.DOC_VERSIONS.map((v: string) => ({
const allVersions = new Set([...window.DOC_VERSIONS, window.DOCUMENTER_CURRENT_VERSION]);
versions.value = Array.from(allVersions).map(v => ({
text: v,
link: `${getBaseRepositoryPath.value}/${v}/`
link: `${baseRepoPath}/${v}/`,
class: v === window.DOCUMENTER_CURRENT_VERSION ? 'version-current' : ''
}));
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}/`
}));
versions.value = [{ text: 'dev', link: `${baseRepoPath}/dev/`, class: 'version-current' }];
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}/`
}));
const baseRepoPath = getBaseRepository();
versions.value = [{ text: 'dev', link: `${baseRepoPath}/dev/`, class: 'version-current' }];
currentVersion.value = 'dev';
}
isClient.value = true;
};

onMounted(loadVersions);
const versionItems = computed(() =>
versions.value.map((v) => ({
text: v.text,
link: v.link,
class: v.text === currentVersion.value ? 'version-current' : ''
}))
);

onMounted(() => {
if (typeof window !== 'undefined') {
currentVersion.value = window.DOCUMENTER_CURRENT_VERSION ?? 'Versions';
loadVersions();
}
});
</script>

<template>
<template v-if="isClient">
<VPNavBarMenuGroup
v-if="!screenMenu && versions.length > 0"
:item="{ text: currentVersion, items: versions }"
:item="{ text: 'Version', items: versionItems }"
class="VPVersionPicker"
/>
<VPNavScreenMenuGroup
v-else-if="screenMenu && versions.length > 0"
:text="currentVersion"
:items="versions"
:text="'Version'"
:items="versionItems"
class="VPVersionPicker"
/>
</template>
Expand All @@ -139,4 +124,13 @@ onMounted(loadVersions);
.VPVersionPicker:hover :deep(button .text) {
color: var(--vp-c-text-2) !important;
}
</style>
.VPVersionPicker :deep(.version-current),
.VPVersionPicker :deep(.version-current .text) {
font-weight: bold !important;
color: var(--vp-c-brand-1) !important;
}
.VPVersionPicker:hover :deep(.version-current),
.VPVersionPicker:hover :deep(.version-current .text) {
color: var(--vp-c-brand-1) !important;
}
</style>
5 changes: 2 additions & 3 deletions template/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,11 @@
"docs:preview": "vitepress preview build/.documenter"
},
"dependencies": {
"@nolebase/vitepress-plugin-enhanced-readabilities": "^2.12.1",
"@shikijs/transformers": "^2.0.3",
"@nolebase/vitepress-plugin-enhanced-readabilities": "^2.14.0",
"markdown-it": "^14.1.0",
"markdown-it-footnote": "^4.0.0",
"markdown-it-mathjax3": "^4.3.2",
"vitepress": "^1.6.3",
"vitepress-plugin-tabs": "^0.5.0"
"vitepress-plugin-tabs": "^0.6.0"
}
}
98 changes: 46 additions & 52 deletions template/src/components/VersionPicker.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,50 +1,41 @@
<!-- 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 { 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 props = defineProps<{ screenMenu?: boolean }>();
const versions = ref<Array<{ text: string, link: string, class?: string }>>([]);
const currentVersion = ref('Versions');
const isClient = ref(false);
const { site } = useData()
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)
if (typeof window === 'undefined') return '';
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;
return `${origin}/${pathParts[0] ?? ''}`;
}
return origin;
};

const waitForScriptsToLoad = () => {
return new Promise<boolean>((resolve) => {
if (isLocalBuild()) {
if (isLocalBuild() || typeof window === 'undefined') {
resolve(false);
return;
}
Expand All @@ -54,7 +45,6 @@ const waitForScriptsToLoad = () => {
resolve(true);
}
}, 100);
// Timeout after 5 seconds
setTimeout(() => {
clearInterval(checkInterval);
resolve(false);
Expand All @@ -63,70 +53,65 @@ const waitForScriptsToLoad = () => {
};

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

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

if (scriptsLoaded && window.DOC_VERSIONS && window.DOCUMENTER_CURRENT_VERSION) {
versions.value = window.DOC_VERSIONS.map((v: string) => ({
const allVersions = new Set([...window.DOC_VERSIONS, window.DOCUMENTER_CURRENT_VERSION]);
versions.value = Array.from(allVersions).map(v => ({
text: v,
link: `${getBaseRepositoryPath.value}/${v}/`
link: `${baseRepoPath}/${v}/`,
class: v === window.DOCUMENTER_CURRENT_VERSION ? 'version-current' : ''
}));
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}/`
}));
versions.value = [{ text: 'dev', link: `${baseRepoPath}/dev/`, class: 'version-current' }];
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}/`
}));
const baseRepoPath = getBaseRepository();
versions.value = [{ text: 'dev', link: `${baseRepoPath}/dev/`, class: 'version-current' }];
currentVersion.value = 'dev';
}
isClient.value = true;
};

onMounted(loadVersions);
const versionItems = computed(() =>
versions.value.map((v) => ({
text: v.text,
link: v.link,
class: v.text === currentVersion.value ? 'version-current' : ''
}))
);

onMounted(() => {
if (typeof window !== 'undefined') {
currentVersion.value = window.DOCUMENTER_CURRENT_VERSION ?? 'Versions';
loadVersions();
}
});
</script>

<template>
<template v-if="isClient">
<VPNavBarMenuGroup
v-if="!screenMenu && versions.length > 0"
:item="{ text: currentVersion, items: versions }"
:item="{ text: 'Version', items: versionItems }"
class="VPVersionPicker"
/>
<VPNavScreenMenuGroup
v-else-if="screenMenu && versions.length > 0"
:text="currentVersion"
:items="versions"
:text="'Version'"
:items="versionItems"
class="VPVersionPicker"
/>
</template>
Expand All @@ -139,4 +124,13 @@ onMounted(loadVersions);
.VPVersionPicker:hover :deep(button .text) {
color: var(--vp-c-text-2) !important;
}
</style>
.VPVersionPicker :deep(.version-current),
.VPVersionPicker :deep(.version-current .text) {
font-weight: bold !important;
color: var(--vp-c-brand-1) !important;
}
.VPVersionPicker:hover :deep(.version-current),
.VPVersionPicker:hover :deep(.version-current .text) {
color: var(--vp-c-brand-1) !important;
}
</style>
Loading