danog/sass-site
1
0
Fork 0
mirror of https://github.com/danog/sass-site.git synced 2024-11-30 04:29:17 +01:00
Code Issues Packages Projects Releases Wiki Activity

review

Browse Source
This commit is contained in:
Jonny Gerig Meyer 2023-05-01 14:01:28 -04:00
parent 42d88f9589
commit fa63a7cba0
No known key found for this signature in database
2 changed files with 20 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
source/helpers/components/anchors.ts
View File

@ -1,38 +1,46 @@
import Token from 'markdown-it/lib/token';
import type anchor from 'markdown-it-anchor';
// Custom permalink function, inspired by and modification of linkInsideHeader
// More context on custom permalink fns: https://github.com/valeriangalliat/markdown-it-anchor#custom-permalink
// linkInsideHeader function: https://github.com/valeriangalliat/markdown-it-anchor/blob/649582d58185b00cfb2ceee9b6b4cd6aafc645b7/permalink.js#L76
/**
* Custom permalink function, inspired by `linkInsideHeader`,
* modified to include title text in permalink a11y text.
* @see https://github.com/valeriangalliat/markdown-it-anchor#custom-permalink
* @see https://github.com/valeriangalliat/markdown-it-anchor/blob/649582d58185b00cfb2ceee9b6b4cd6aafc645b7/permalink.js#L76
*/
export const renderPermalink: anchor.PermalinkGenerator = (
slug,
opts: anchor.LinkInsideHeaderPermalinkOptions,
state,
idx,
) => {
opts.ariaHidden = false;
const title = state?.tokens[idx + 1].children
// https://github.com/valeriangalliat/markdown-it-anchor/blob/649582d58185b00cfb2ceee9b6b4cd6aafc645b7/permalink.js#L148-L151
const title = state.tokens[idx + 1]?.children
?.filter(
(token: Token) => token.type === 'text' || token.type === 'code_inline',
)
.reduce((acc, t) => acc + t.content, '');
opts.class = 'anchor';
opts.ariaHidden = false;
opts.symbol = `<span class="visuallyhidden">${
title || 'section'
} permalink</span>`;
// https://github.com/valeriangalliat/markdown-it-anchor/blob/649582d58185b00cfb2ceee9b6b4cd6aafc645b7/permalink.js#L77-L97
const linkTokens = [
Object.assign(new state.Token('link_open', 'a', 1), {
attrs: [
['class', 'anchor'],
...(opts.class ? [['class', opts.class]] : []),
['href', `#${slug}`],
...(opts.ariaHidden ? [['aria-hidden', 'true']] : []),
],
}),
Object.assign(new state.Token('html_inline', '', 0), {
content: `<span class="visuallyhidden">${
title ? title : 'section'
} permalink'</span>`,
content: opts.symbol,
meta: { isPermalinkSymbol: true },
}),
new state.Token('link_close', 'a', -1),
];
state?.tokens[idx + 1]?.children?.push(...linkTokens);
state.tokens[idx + 1]?.children?.push(...linkTokens);
};

1
source/helpers/engines.ts
View File

@ -21,6 +21,7 @@ export const markdownEngine = markdown({
.use(markdownDefList)
.use(markdownItAttrs)
.use(markdownAnchor, {
level: [2],
permalink: renderPermalink,
});