Rework rehype plugin and clean up changes

This commit is contained in:
Priere 2023-12-05 20:52:21 -05:00
parent 2c43fb2512
commit 018a45e2d4
8 changed files with 36 additions and 33 deletions

View file

@ -15,25 +15,34 @@ const site = `https://strudel.cc/`; // root url without a path
const base = '/'; // base path of the strudel site
const baseNoTrailing = base.endsWith('/') ? base.slice(0, -1) : base;
// this rehype plugin converts relative anchor links to absolute ones
// it wokrs by prepending the absolute page path to anchor links
// example: #gain -> /learn/effects/#gain
// this rehype plugin fixes relative links
// it works by prepending the base + page path to anchor links
// and by prepending the base path to all other relative links
// this is necessary when using a base href like <base href={base} />
// in this setup, relative anchor links will always link to base, instead of the current page
function absoluteAnchors() {
// examples with base as "mybase":
// #gain -> /mybase/learn/effects/#gain
// /some/page -> /mybase/some/page
function relativeURLFix() {
return (tree, file) => {
const chunks = file.history[0].split('/src/pages/'); // file.history[0] is the file path
const path = chunks[chunks.length - 1].slice(0, -4); // only path inside src/pages, without .mdx
return rehypeUrls((url) => {
if (url.href.startsWith('/')) {
const hrefWithTrailingSlash = url.href.endsWith('/') ? url.href : url.href + '/';
return baseNoTrailing + hrefWithTrailingSlash;
// NOTE: the base argument to the URL constructor is ignored if the input is already
// absolute and used if not, which facilitates the comparison below
// true if url is relative
if (new URL(site).origin === new URL(url.href, site).origin) {
let newHref = baseNoTrailing;
if (url.href.startsWith('#')) {
// special case: a relative anchor link to the current page
newHref += `/${path}/${url.href}`;
} else {
// any other relative link
// NOTE: this does strip off serialized queries and fragments
newHref += (url.pathname.endsWith('/') ? url.pathname : url.pathname + '/');
}
// console.log(url.href + ' -> ', newHref);
return newHref;
}
if (url.href.startsWith('#')) {
const absoluteUrl = `${baseNoTrailing}/${path}/${url.href}`;
return absoluteUrl;
}
// console.log(url.href + ' -> ', absoluteUrl);
return;
})(tree);
};
@ -44,7 +53,7 @@ const options = {
remarkToc,
// E.g. `remark-frontmatter`
],
rehypePlugins: [rehypeSlug, [rehypeAutolinkHeadings, { behavior: 'append' }], absoluteAnchors],
rehypePlugins: [rehypeSlug, [rehypeAutolinkHeadings, { behavior: 'append' }], relativeURLFix],
};
// https://astro.build/config