Skip to content

Make navigation URL generation base-path-aware across GitHub Pages and EMU hosting #223

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

Merged
saracarl merged 14 commits into from
Jul 17, 2026
Merged

Make navigation URL generation base-path-aware across GitHub Pages and EMU hosting #223

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
6eeca50
Initial plan
Copilot Jul 7, 2026
471fd6d
fix: use Astro base URL for home and nav links
Copilot Jul 7, 2026
67e92a5
chore: make root base-path handling explicit in sidebar
Copilot Jul 7, 2026
4008185
fix: normalize base path in nav link builders
Copilot Jul 7, 2026
0935a33
refactor: share base path normalization utility
Copilot Jul 7, 2026
5344b7c
chore: simplify sidebar href normalization flow
Copilot Jul 7, 2026
b7690f1
fix: standardize trailing slash on home links
Copilot Jul 7, 2026
7a697c3
fix: normalize base path to absolute root-prefixed format
Copilot Jul 7, 2026
31f43fa
chore: preserve single trailing-slash normalization behavior
Copilot Jul 7, 2026
44046b0
fix: use dynamic Astro base for sidebar links
Copilot Jul 7, 2026
3a5ca24
fix: restore header base and normalize tag route URLs
Copilot Jul 13, 2026
502321c
refactor: normalize joinBasePath home-path behavior
Copilot Jul 13, 2026
465ddc9
feat: use include_slug_in_base for URL generation
Copilot Jul 13, 2026
a74b553
Add build-time config logging to astro.config.mjs
Copilot Jul 14, 2026
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
18 changes: 18 additions & 0 deletions astro.config.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,29 @@
import { defineConfig } from 'astro/config';
import { dynamicConfig } from './dynamic-astro-config.js';
import { createRequire } from 'module';

// We are utilizing a dynamic astro config in this
// template. When the template is used to create
// a new project by the AVAnnotate admin application
// the dynamic configuration will be updated to reflect
// the new project

// --- Build-time config logging ---
const require = createRequire(import.meta.url);
const project = require('./src/content/project/project.json');

console.log('[AVAnnotate build] project.json raw values:');
console.log(' project.slug :', project.project.slug);
console.log(' project.github_org :', project.project.github_org);
console.log(' project.media_player :', project.project.media_player);
console.log(' publish.include_slug_in_base:', project.publish.include_slug_in_base);
console.log(' publish.publish_pages_app :', project.publish.publish_pages_app);

console.log('[AVAnnotate build] resolved Astro config values:');
console.log(' site :', dynamicConfig.site);
console.log(' base :', dynamicConfig.base);
console.log(' srcDir:', dynamicConfig.srcDir);
// ---------------------------------

// https://astro.build/config
export default defineConfig(dynamicConfig); // Do not change!
15 changes: 13 additions & 2 deletions dynamic-astro-config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,21 @@ import relativeLinks from 'astro-relative-links';

import project from './src/content/project/project.json';

// include_slug_in_base is written by the admin client and is the authoritative
// source; fall back to publish_pages_app for projects generated before this
// field was introduced.
const shouldIncludeSlugInBase = project.publish.include_slug_in_base !== undefined
? project.publish.include_slug_in_base
: project.publish.publish_pages_app;

export const dynamicConfig = {
integrations: [react(), tailwind(), relativeLinks()],
site: import.meta.env.PROD ? `https://${project.project.github_org}.github.io/${project.project.slug}` : undefined,
base: import.meta.env.PROD ? project.publish.publish_pages_app ? `${project.project.slug}` : '' : 'dist',
site: import.meta.env.PROD
? shouldIncludeSlugInBase
? `https://${project.project.github_org}.github.io/${project.project.slug}`
: `https://${project.project.github_org}.github.io`
: undefined,
base: import.meta.env.PROD ? (shouldIncludeSlugInBase ? `${project.project.slug}` : '') : 'dist',
srcDir: import.meta.env.PROD ?
project.project.media_player === 'avannotate' ?
'./src' : project.project.media_player === 'aviary' ?
Expand Down
13 changes: 5 additions & 8 deletions src/components/Header.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,33 +1,30 @@
---
import { getEntry } from 'astro:content';
import { dynamicConfig } from 'dynamic-astro-config';

@saracarl saracarl Jul 7, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Why was this line removed?

@saracarl saracarl Jul 7, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

@copilot See comment.

Copilot AI Jul 7, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

I removed that import because the header no longer uses dynamicConfig for URL building. It now uses import.meta.env.BASE_URL (via normalizeBasePath) so links follow Astro’s configured base path in both classic GitHub Pages and EMU hosting.

import Container from './Container.astro';
import Sidebar from './Sidebar';
import { getPages } from 'src/utils/pages';
import { normalizeBasePath } from 'src/utils/basePath';

const projectData = await getEntry('project', 'project');
const pages = await getPages();

const { pageSlug } = Astro.params;

const baseUrl = import.meta.env.PROD
? projectData.data.publish.publish_pages_app
? projectData.data.project.slug
: undefined
: dynamicConfig.base;
const basePath = normalizeBasePath(import.meta.env.BASE_URL);
const homePath = basePath === '' ? '/' : `${basePath}/`;
---

<div class='bg-secondary text-white w-full h-[80px] py-6 sticky top-0 z-20'>
<Container className='flex flex-row items-center gap-[52px]'>
<Sidebar
baseUrl={baseUrl}
basePath={basePath}
client:load
pages={pages}
slug={pageSlug}
url={Astro.url}
project={projectData}
/>
<a href={`${baseUrl ? `/${baseUrl}` : '/'}`} class='text-lg'
<a href={homePath} class='text-lg'
>{projectData.data.project.title}</a
>
</Container>
Expand Down
23 changes: 11 additions & 12 deletions src/components/Sidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,41 +5,40 @@ import type {
PageCollectionEntry,
ProjectCollectionEntry,
} from 'src/utils/pages.ts';
import { normalizeBasePath } from 'src/utils/basePath';

interface SidebarProps {
baseUrl: string | undefined;
basePath: string;
pages: PageCollectionEntry[];
project: ProjectCollectionEntry;
slug?: string;
url: URL;
}

const getHref = (page: PageCollectionEntry, baseUrl: string | undefined) => {
const getHref = (page: PageCollectionEntry, normalizedBasePath: string) => {
if (page.data.autogenerate.type === 'home') {
return baseUrl ? `/${baseUrl}` : '/';
return normalizedBasePath === '' ? '/' : `${normalizedBasePath}/`;
}

if (page.data.autogenerate.enabled) {
return `${baseUrl ? `/${baseUrl}` : ''}/events/${
page.data.slug || page.id
}`;
return `${normalizedBasePath}/events/${page.data.slug || page.id}`;
}

return `${baseUrl ? `/${baseUrl}` : ''}/pages/${page.data.slug || page.id}`;
return `${normalizedBasePath}/pages/${page.data.slug || page.id}`;
};

const Sidebar: React.FC<SidebarProps> = (props) => {
const [show, setShow] = useState(false);
const basePath = normalizeBasePath(props.basePath);

const homeUuid = useMemo(
() => props.pages.find((p) => p.data.autogenerate.type === 'home')?.id,
[props.pages]
);

const isIndex = useMemo(
() =>
`${props.baseUrl ? `/${props.baseUrl}` : ''}/tags` === props.url.pathname,
[props.baseUrl, props.url]
() => `${basePath}/tags` === props.url.pathname,
[basePath, props.url]
);

// highlight the current page
Expand Down Expand Up @@ -82,7 +81,7 @@ const Sidebar: React.FC<SidebarProps> = (props) => {
</button>
</div>
{props.pages.map((page) => (
<a href={getHref(page, props.baseUrl)} key={page.id}>
<a href={getHref(page, basePath)} key={page.id}>
<div className='p-4 hover:bg-blue-hover'>
<p
key={page.id}
Expand All @@ -98,7 +97,7 @@ const Sidebar: React.FC<SidebarProps> = (props) => {
))}
{props.project.data.project.tags &&
props.project.data.project.tags.tags.length > 0 && (
<a href={`${props.baseUrl ? `/${props.baseUrl}` : ''}/tags`}>
<a href={`${basePath}/tags`}>
<div className='p-4 hover:bg-blue-hover'>
<p className={isIndex ? 'font-bold' : ''}>Index</p>
</div>
Expand Down
12 changes: 4 additions & 8 deletions src/components/TableOfContents.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,13 @@
---
import { getEntry } from 'astro:content';
import { dynamicConfig } from 'dynamic-astro-config';
import { getPages } from 'src/utils/pages';
import { normalizeBasePath } from 'src/utils/basePath';

const projectData = await getEntry('project', 'project');

const projectFileData = await getEntry('project', 'project');

const baseUrl = import.meta.env.PROD
? projectData?.data.publish.publish_pages_app
? projectData?.data.project.slug
: undefined
: dynamicConfig.base;
const basePath = normalizeBasePath(import.meta.env.BASE_URL);

const pages = await getPages();

Expand Down Expand Up @@ -49,7 +45,7 @@ pages
return (
<a
class='underline'
href={`${baseUrl ? '/' : ''}${baseUrl ? `${baseUrl}/` : '/'}${page.data.autogenerate.enabled ? 'events' : 'pages'}/${page.data.slug || page.id}`}
href={`${basePath}/${page.data.autogenerate.enabled ? 'events' : 'pages'}/${page.data.slug || page.id}`}
style={{ marginLeft: `${counts[page.id] * 10}px` }}
>
<p>{page.data.title}</p>
Expand All @@ -61,7 +57,7 @@ pages
projectFileData!.data.project.tags.tags.length > 0 && (
<a
class='underline'
href={`${baseUrl ? '/' : ''}${baseUrl ? `${baseUrl}/` : '/'}tags`}
href={`${basePath}/tags`}
>
Index
</a>
Expand Down
1 change: 1 addition & 0 deletions src/content/config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -129,6 +129,7 @@ const projectCollection = defineCollection({
}),
publish: z.object({
publish_pages_app: z.boolean(),
include_slug_in_base: z.boolean().nullish(),
publish_sha: z.string(),
publish_iso_date: z.string(),
}),
Expand Down
7 changes: 1 addition & 6 deletions src/layouts/Layout.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import '@fontsource-variable/inter';
import Header from '@components/Header.astro';
import Footer from '@components/Footer.astro';
import { getEntry } from 'astro:content';
import { dynamicConfig } from 'dynamic-astro-config';
import { getCollection } from 'astro:content';

interface Props {
Expand All @@ -17,10 +16,6 @@ interface Props {
const projectData = await getEntry('project', 'project');
const eventData = await getCollection('events');

const baseUrl = import.meta.env.PROD
? projectData?.data.project.slug
: dynamicConfig.base;

const {
background,
class: className,
Expand All @@ -41,7 +36,7 @@ const manifests = eventData.map((e) => {
<meta charset='UTF-8' />
<meta name='description' content='Astro description' />
<meta name='viewport' content='width=device-width' />
<link rel='icon' type='image/svg+xml' href=`/${baseUrl}/favicon.svg` />
<link rel='icon' type='image/svg+xml' href={`${import.meta.env.BASE_URL}favicon.svg`} />
<meta name='generator' content={Astro.generator} />

<!-- google font links -->
Expand Down
14 changes: 3 additions & 11 deletions src/pages/events/[pageSlug].astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,10 @@
---
import type { GetStaticPaths } from 'astro';
import { dynamicConfig } from 'dynamic-astro-config';
import Layout from '@layouts/Layout.astro';
import { getEntry } from 'astro:content';
import EventViewer from '@components/EventViewer/index.astro';
import { getPage, getPages } from 'src/utils/pages';
import { randomUUID } from 'crypto';

const projectData = await getEntry('project', 'project');

// @ts-ignore
const baseUrl = import.meta.env.PROD
? projectData?.data.project.slug
: dynamicConfig.base;
import { joinBasePath } from '@utils/basePath';

export const getStaticPaths = (async () => {
// filter out custom pages
Expand All @@ -26,13 +18,13 @@ export const getStaticPaths = (async () => {
const { pageSlug } = Astro.params;

if (!pageSlug) {
return Astro.redirect(`/${baseUrl}`);
return Astro.redirect(joinBasePath(import.meta.env.BASE_URL));
}

const page = await getPage(pageSlug);

if (!page.data.autogenerate.type_id) {
return Astro.redirect(`/${baseUrl}`);
return Astro.redirect(joinBasePath(import.meta.env.BASE_URL));
}

const playerId = randomUUID();
Expand Down
12 changes: 2 additions & 10 deletions src/pages/pages/[pageSlug].astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,10 @@
---
import type { GetStaticPaths } from 'astro';
import { dynamicConfig } from 'dynamic-astro-config';
import Layout from '@layouts/Layout.astro';
import Container from '@components/Container.astro';
import { getEntry } from 'astro:content';
import RichText from '../../components/RichText/index.astro';
import { getPage, getPages } from 'src/utils/pages';

const projectData = await getEntry('project', 'project');

// @ts-ignore
const baseUrl = import.meta.env.PROD
? projectData?.data.project.slug
: dynamicConfig.base;
import { joinBasePath } from '@utils/basePath';

export const getStaticPaths = (async () => {
const eventPages = await getPages((p) => !p.data.autogenerate.enabled);
Expand All @@ -25,7 +17,7 @@ export const getStaticPaths = (async () => {
const { pageSlug } = Astro.params;

if (!pageSlug) {
return Astro.redirect(`/${baseUrl}`);
return Astro.redirect(joinBasePath(import.meta.env.BASE_URL));
}

const page = await getPage(pageSlug);
Expand Down
20 changes: 8 additions & 12 deletions src/pages/tags/detail/[category]/[tag].astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,20 +17,16 @@ import type { CollectionEntry } from 'astro:content';
import { getCollection } from 'astro:content';
import { getEntry } from 'astro:content';
import { randomUUID } from 'crypto';
import { dynamicConfig } from 'dynamic-astro-config';
import { ArrowLeft } from 'react-bootstrap-icons';
import Annotations from '@components/EventViewer/AnnotationUI/Annotations/index.astro';
import AnnotationNanostorePopulator from '@components/EventViewer/AnnotationUI/Annotations/AnnotationNanostorePopulator';
import type { DisplayedAnnotation } from '@ty/index';
import PlayerStateNanostorePopulator from '@components/EventViewer/PlayerStateNanostorePopulator';
import { joinBasePath, normalizeBasePath } from '@utils/basePath';

const projectData = await getEntry('project', 'project');

const baseUrl = import.meta.env.PROD
? projectData.data.publish.publish_pages_app
? projectData.data.project.slug
: undefined
: dynamicConfig.base;
const basePath = normalizeBasePath(import.meta.env.BASE_URL);

export const getStaticPaths = (async () => {
const projectData = await getEntry('project', 'project');
Expand All @@ -50,19 +46,19 @@ const capitalizedTag = getTagDisplay(fromTagParam(tag));
const crumbs = [
{
label: 'Home',
link: `${baseUrl ? `/${baseUrl}` : '/'}`,
link: joinBasePath(basePath),
},
{
label: 'Index',
link: `${baseUrl ? `/${baseUrl}` : ''}/tags`,
link: joinBasePath(basePath, 'tags'),
},
{
label: 'Tag Groups',
link: `${baseUrl ? `/${baseUrl}` : ''}/tags/detail`,
link: joinBasePath(basePath, 'tags/detail'),
},
{
label: capitalizedCategory,
link: `${baseUrl ? `/${baseUrl}` : ''}/tags/detail/${category}`,
link: joinBasePath(basePath, `tags/detail/${category}`),
},
{
label: capitalizedTag,
Expand All @@ -81,7 +77,7 @@ const categoryData = projectData.data.project.tags.tagGroups.find(
);

if (!categoryData) {
return Astro.redirect(`/${baseUrl}`);
return Astro.redirect(joinBasePath(basePath));
}

type SetData = {
Expand Down Expand Up @@ -117,7 +113,7 @@ for (const set of annotationSets) {
<Container className='py-12 flex flex-col gap-8 font-inter'>
<div class='flex items-center gap-4'>
<a
href={`${baseUrl ? '/' : ''}${baseUrl ? `${baseUrl}/` : '/'}tags/detail/${toTagParam(category)}`}
href={joinBasePath(basePath, `tags/detail/${toTagParam(category)}`)}
>
<ArrowLeft className='w-8 h-8' />
</a>
Expand Down
Loading