example.11ty.cjs 1.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243
  1. const page = require('./page.11ty.cjs');
  2. const relative = require('./relative-path.cjs');
  3. /**
  4. * This template extends the page template and adds an examples list.
  5. */
  6. module.exports = function (data) {
  7. return page({
  8. ...data,
  9. content: renderExample(data),
  10. });
  11. };
  12. const renderExample = ({name, content, collections, page}) => {
  13. return `
  14. <h1>Example: ${name}</h1>
  15. <section class="examples">
  16. <nav class="collection">
  17. <ul>
  18. ${
  19. collections.example === undefined
  20. ? ''
  21. : collections.example
  22. .map(
  23. (post) => `
  24. <li class=${post.url === page.url ? 'selected' : ''}>
  25. <a href="${relative(
  26. page.url,
  27. post.url
  28. )}">${post.data.description.replace('<', '&lt;')}</a>
  29. </li>
  30. `
  31. )
  32. .join('')
  33. }
  34. </ul>
  35. </nav>
  36. <div>
  37. ${content}
  38. </div>
  39. </section>
  40. `;
  41. };