fix(#460): #fragment links not working

This commit is contained in:
limes
2026-08-31 23:49:05 +02:00
parent 1cbced54e5
commit d1502533e3

View File

@@ -1,5 +1,7 @@
<script setup lang="ts">
const slug = (useRoute().params.slug as string[]).join('/');
const { path, params } = useRoute();
const slug = (params.slug as string[]).join('/');
const { data: doc } = await useAsyncData(`docs-${slug}`, () => {
return queryCollection('docs').path(`/docs/${slug}`).first();
});
@@ -7,6 +9,25 @@ const { data: doc } = await useAsyncData(`docs-${slug}`, () => {
if (!doc.value) {
throw createError({ statusCode: 404, statusMessage: 'Page Not Found' });
}
function fixFragmentLinks(e: MouseEvent) {
const targetEl = e.target as HTMLAnchorElement;
const to = targetEl?.getAttribute('href');
if (targetEl?.tagName !== 'A' || !to?.startsWith('#')) {
return;
}
// nuxt content just drops dashes at the start of the fragment, so we do the same
const sanitizedTo = to.replace(/^#-*/, '');
// a fragment cannot start with a number, so nuxt content prefixes it with an underscore.
const newPath = /^[0-9]/.test(sanitizedTo) ? `${path}#_${sanitizedTo}` : `${path}#${sanitizedTo}`;
e.preventDefault();
return navigateTo(newPath, { external: true });
}
customSeoMeta({
subsection: 'docs',
title: doc.value.title,
@@ -23,6 +44,7 @@ definePageMeta({
<ContentRenderer
v-if="doc"
:value="doc"
@click="fixFragmentLinks"
/>
</div>
</template>