62 lines
1.9 KiB
JavaScript
62 lines
1.9 KiB
JavaScript
|
|
||
|
|
/**
|
||
|
|
* @summary Adds anchors to each heading in the post
|
||
|
|
* so that users can link directly to them.
|
||
|
|
*/
|
||
|
|
export function addAnchors() {
|
||
|
|
const selectors = [
|
||
|
|
'.markdown-body h2',
|
||
|
|
'.markdown-body h3',
|
||
|
|
'.markdown-body h4',
|
||
|
|
'.markdown-body h5',
|
||
|
|
'.markdown-body h6'
|
||
|
|
];
|
||
|
|
|
||
|
|
// relies on AnchorJS library
|
||
|
|
// being loaded in Post.razor
|
||
|
|
anchors.add(selectors.join(','));
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* @summary Adds a button to each code block that
|
||
|
|
* allows users to copy the code to their clipboard.
|
||
|
|
*/
|
||
|
|
export function addClipboard() {
|
||
|
|
const codeBlocks = document.querySelectorAll('pre');
|
||
|
|
|
||
|
|
codeBlocks.forEach((block) => {
|
||
|
|
const button = document.createElement('button');
|
||
|
|
button.className = 'copy-button';
|
||
|
|
button.type = 'button';
|
||
|
|
button.innerHTML = `
|
||
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill="currentColor">
|
||
|
|
<path d="M384 336H192c-8.8 0-16-7.2-16-16V64c0-8.8 7.2-16 16-16l140.1 0L400 115.9V320c0 8.8-7.2 16-16 16zM192 384H384c35.3 0 64-28.7 64-64V115.9c0-12.7-5.1-24.9-14.1-33.9L366.1 14.1c-9-9-21.2-14.1-33.9-14.1H192c-35.3 0-64 28.7-64 64V320c0 35.3 28.7 64 64 64zM64 128c-35.3 0-64 28.7-64 64V448c0 35.3 28.7 64 64 64H256c35.3 0 64-28.7 64-64V416H272v32c0 8.8-7.2 16-16 16H64c-8.8 0-16-7.2-16-16V192c0-8.8 7.2-16 16-16H96V128H64z"/>
|
||
|
|
</svg>
|
||
|
|
`
|
||
|
|
button.onclick = () => {
|
||
|
|
button.style.color = 'green';
|
||
|
|
setTimeout(() => {
|
||
|
|
button.style.color = '';
|
||
|
|
}, 1000);
|
||
|
|
};
|
||
|
|
|
||
|
|
const buttonText = document.createElement('span');
|
||
|
|
buttonText.className = 'sr-only';
|
||
|
|
buttonText.textContent = 'Copy';
|
||
|
|
|
||
|
|
button.appendChild(buttonText);
|
||
|
|
block.appendChild(button);
|
||
|
|
});
|
||
|
|
|
||
|
|
// relies on ClipboardJS library
|
||
|
|
// being loaded in Post.razor
|
||
|
|
var clipboard = new ClipboardJS('.copy-button', {
|
||
|
|
target: (trigger) => {
|
||
|
|
return trigger.previousElementSibling;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
clipboard.on('success', function(e) {
|
||
|
|
e.clearSelection();
|
||
|
|
});
|
||
|
|
}
|