Rework rehype plugin and clean up changes
This commit is contained in:
parent
2c43fb2512
commit
018a45e2d4
8 changed files with 36 additions and 33 deletions
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue