0e16f98c27
Updates the online tutorial experience - Adds a landing page at [/tutorials](https://nx-dev-git-docs-tutorial-landing-page-nrwl.vercel.app/tutorials) - Terminal code blocks get a "run in terminal" button - Code blocks get an "Apply file changes" button - The apply file changes button currently only works for code blocks that are showing the new file results (not showing the old file with lines marked for deletion). There is nothing technical blocking this, just time. - Previous and next buttons do not go between tutorials - The preview panel can be completely minimized - Git is stubbed out
37 lines
1.3 KiB
TypeScript
37 lines
1.3 KiB
TypeScript
import { PluginTexts, type ExpressiveCodePlugin } from '@expressive-code/core';
|
|
import { pluginCodeBlockButton } from './base-plugin';
|
|
|
|
const svg = [
|
|
`<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='2 2 20 20' stroke-width='1.5' stroke='currentColor' class='size-6'>`,
|
|
`<path stroke-linecap='round' stroke-linejoin='round' d='M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.347a1.125 1.125 0 0 1 0 1.972l-11.54 6.347a1.125 1.125 0 0 1-1.667-.986V5.653Z' />`,
|
|
`</svg>`,
|
|
].join('');
|
|
|
|
export const runInTerminalTexts = new PluginTexts({
|
|
buttonTooltip: 'Run in terminal',
|
|
buttonExecuted: 'Command executing...',
|
|
});
|
|
|
|
export function runInTerminalPlugin(): ExpressiveCodePlugin {
|
|
return pluginCodeBlockButton(
|
|
'runInTerminal',
|
|
svg,
|
|
runInTerminalTexts,
|
|
(_, isTerminal) => isTerminal,
|
|
(codeBlock, _) => {
|
|
// remove comment lines starting with `#` from terminal frames
|
|
let code = codeBlock.code.replace(/(?<=^|\n)\s*#.*($|\n+)/g, '').trim();
|
|
|
|
/**
|
|
* Replace all line breaks with a special character
|
|
* because HAST does not encode them in attribute values
|
|
* (which seems to work, but looks ugly in the HTML source)
|
|
*/
|
|
code = code.replace(/\n/g, '\u007f');
|
|
return {
|
|
'data-code': code,
|
|
};
|
|
}
|
|
);
|
|
}
|