2024-04-17 11:20:27 -04:00
|
|
|
import { parse } from 'node-html-parser';
|
|
|
|
|
import { v4 as uuid } from 'uuid';
|
2025-05-27 16:33:18 -04:00
|
|
|
import { markdown } from '../_utils/markdown.js';
|
2024-04-17 11:20:27 -04:00
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Eleventy plugin to turn `<code class="example">` blocks into live examples.
|
|
|
|
|
*/
|
2025-05-23 06:21:09 -04:00
|
|
|
export function codeExamplesPlugin(options = {}) {
|
|
|
|
|
options = {
|
2024-04-17 11:20:27 -04:00
|
|
|
container: 'body',
|
2025-05-23 06:21:09 -04:00
|
|
|
...options,
|
2024-12-09 13:44:14 -05:00
|
|
|
};
|
|
|
|
|
|
2025-05-23 06:21:09 -04:00
|
|
|
return function (eleventyConfig) {
|
|
|
|
|
eleventyConfig.addTransform('code-examples', content => {
|
|
|
|
|
const doc = parse(content, { blockTextElements: { code: true } });
|
|
|
|
|
const container = doc.querySelector(options.container);
|
2024-12-09 13:44:14 -05:00
|
|
|
|
2025-05-23 06:21:09 -04:00
|
|
|
if (!container) {
|
|
|
|
|
return content;
|
2024-12-09 21:41:54 -05:00
|
|
|
}
|
|
|
|
|
|
2025-05-23 06:21:09 -04:00
|
|
|
// Look for external links
|
|
|
|
|
container.querySelectorAll('code.example').forEach(code => {
|
|
|
|
|
const pre = code.closest('pre');
|
|
|
|
|
const hasButtons = !code.classList.contains('no-buttons');
|
|
|
|
|
const isOpen = code.classList.contains('open') || !hasButtons;
|
2025-05-27 16:33:18 -04:00
|
|
|
const isViewportDemo = code.classList.contains('viewport');
|
2025-05-23 06:21:09 -04:00
|
|
|
const noEdit = code.classList.contains('no-edit');
|
|
|
|
|
const id = `code-example-${uuid().slice(-12)}`;
|
|
|
|
|
let preview = pre.textContent;
|
|
|
|
|
|
|
|
|
|
// Run preview scripts as modules to prevent collisions
|
|
|
|
|
const root = parse(preview, { blockTextElements: { script: true } });
|
|
|
|
|
root.querySelectorAll('script').forEach(script => script.setAttribute('type', 'module'));
|
|
|
|
|
preview = root.toString();
|
|
|
|
|
|
2025-05-27 16:33:18 -04:00
|
|
|
const escapedHtml = markdown.utils.escapeHtml(`
|
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
<title>Web Awesome Demo</title>
|
|
|
|
|
<link rel="stylesheet" href="https://early.webawesome.com/webawesome@[version]/dist/styles/themes/default.css" />
|
|
|
|
|
<link rel="stylesheet" href="https://early.webawesome.com/webawesome@[version]/dist/styles/webawesome.css" />
|
|
|
|
|
<script type="module" src="https://early.webawesome.com/webawesome@[version]/dist/webawesome.loader.js"></script>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
${preview}
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
|
|
|
|
`);
|
|
|
|
|
|
2025-05-23 06:21:09 -04:00
|
|
|
const codeExample = parse(`
|
2025-05-27 16:33:18 -04:00
|
|
|
<div class="code-example ${isOpen ? 'open' : ''} ${isViewportDemo ? 'is-viewport-demo' : ''}">
|
2025-05-23 06:21:09 -04:00
|
|
|
<div class="code-example-preview">
|
2025-05-27 16:33:18 -04:00
|
|
|
|
|
|
|
|
${isViewportDemo ? ` <wa-viewport-demo><iframe srcdoc="${escapedHtml}"></iframe></wa-viewport-demo>` : preview}
|
|
|
|
|
|
2025-05-23 06:21:09 -04:00
|
|
|
<div class="code-example-resizer" aria-hidden="true">
|
|
|
|
|
<wa-icon name="grip-lines-vertical"></wa-icon>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="code-example-source" id="${id}">
|
|
|
|
|
${pre.outerHTML}
|
|
|
|
|
</div>
|
|
|
|
|
${
|
|
|
|
|
hasButtons
|
|
|
|
|
? `
|
|
|
|
|
<div class="code-example-buttons">
|
|
|
|
|
<button
|
|
|
|
|
class="code-example-toggle"
|
|
|
|
|
type="button"
|
|
|
|
|
aria-expanded="${isOpen ? 'true' : 'false'}"
|
|
|
|
|
aria-controls="${id}"
|
|
|
|
|
>
|
|
|
|
|
Code
|
|
|
|
|
<wa-icon name="chevron-down"></wa-icon>
|
|
|
|
|
</button>
|
|
|
|
|
|
|
|
|
|
${
|
|
|
|
|
noEdit
|
|
|
|
|
? ''
|
|
|
|
|
: `
|
|
|
|
|
<button class="code-example-pen" type="button">
|
|
|
|
|
<wa-icon name="pen-to-square"></wa-icon>
|
|
|
|
|
Edit
|
|
|
|
|
</button>
|
|
|
|
|
`
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
`
|
|
|
|
|
: ''
|
|
|
|
|
}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
`);
|
|
|
|
|
|
|
|
|
|
pre.replaceWith(codeExample);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
return doc.toString();
|
2024-04-17 11:20:27 -04:00
|
|
|
});
|
2025-05-23 06:21:09 -04:00
|
|
|
};
|
2024-04-17 11:20:27 -04:00
|
|
|
}
|
