feat(engine): menus now support special characters in markdown headings

Author: daKmoR

.changeset/silly-islands-sparkle.md

@@ -0,0 +1,13 @@
+---
+'@rocket/engine': patch
+---
+
+Menus now support special characters in markdown headings.
+
+Examples:
+
+```md
+# Fun Errors & Feedback
+
+# <some-button>
+```

packages/engine/src/web-menu/getHtmlMetaData.js

@@ -82,15 +82,19 @@ export function getHtmlMetaData(htmlFilePath) {
  if (isHeadline(data)) {
  const id = getAttribute(data, 'id');
  const linkText = getAttribute(data, 'link-text');
- const text = linkText || capturedHeadlineText || '';
+ const processedCapturedHeadlineText = capturedHeadlineText
+ ?.replace(/</g, '<')
+ .replace(/&/g, '&')
+ .trim();
+ const text = linkText || processedCapturedHeadlineText || '';
  if (data.name === 'h1') {
  metaData.h1 = text;
  }
  if (id && text) {
  if (!metaData.headlinesWithId) {
  metaData.headlinesWithId = [];
  }
- const rawTextObj = linkText ? { rawText: capturedHeadlineText } : {};
+ const rawTextObj = linkText ? { rawText: processedCapturedHeadlineText } : {};
  metaData.headlinesWithId.push({
  text,
  id,

packages/engine/test-node/05z-menu.test.js

@@ -851,4 +851,46 @@ describe('Engine menus', () => {
  level: 0,
  });
  });
+
+ it('15: markdown special characters', async () => {
+ const { build, readSource } = await setupTestEngine(
+ 'fixtures/05-menu/15-md-special-characters/docs',
+ );
+ await build();
+
+ expect(JSON.parse(readSource('pageTreeData.rocketGenerated.json'))).to.deep.equal({
+ children: [
+ {
+ h1: '<some-button>',
+ headlinesWithId: [
+ {
+ id: 'some-button',
+ level: 1,
+ text: '<some-button>',
+ },
+ ],
+ level: 1,
+ menuLinkText: '<some-button>',
+ name: '<some-button>',
+ outputRelativeFilePath: 'component/index.html',
+ sourceRelativeFilePath: 'component.rocket.md',
+ url: '/component/',
+ },
+ ],
+ h1: 'Fun Errors & Feedback',
+ headlinesWithId: [
+ {
+ id: 'fun-errors--feedback',
+ level: 1,
+ text: 'Fun Errors & Feedback',
+ },
+ ],
+ level: 0,
+ menuLinkText: 'Fun Errors & Feedback',
+ name: 'Fun Errors & Feedback',
+ outputRelativeFilePath: 'index.html',
+ sourceRelativeFilePath: 'index.rocket.md',
+ url: '/',
+ });
+ });
 });

packages/engine/test-node/fixtures/04-layouts/01-function/docs/pageTreeData.rocketGenerated.json

@@ -1,15 +1,15 @@
 {
  "title": "Fixed Title",
- "h1": "\n Welcome Members:\n ",
+ "h1": "Welcome Members:",
  "headlinesWithId": [
  {
- "text": "\n Welcome Members:\n ",
+ "text": "Welcome Members:",
  "id": "welcome-members",
  "level": 1
  }
  ],
  "name": "Fixed Title",
- "menuLinkText": "\n Welcome Members:\n ",
+ "menuLinkText": "Welcome Members:",
  "url": "/",
  "outputRelativeFilePath": "index.html",
  "sourceRelativeFilePath": "index.rocket.js",

packages/engine/test-node/fixtures/05-menu/15-md-special-characters/docs/component.rocket.md

@@ -0,0 +1,9 @@
+```js server
+/* START - Rocket auto generated - do not touch */
+export const sourceRelativeFilePath = 'component.rocket.md';
+import { layout, html } from './recursive.data.js';
+export { layout, html };
+/* END - Rocket auto generated - do not touch */
+```
+
+# <some-button>

packages/engine/test-node/fixtures/05-menu/15-md-special-characters/docs/index.rocket.md

@@ -0,0 +1,9 @@
+```js server
+/* START - Rocket auto generated - do not touch */
+export const sourceRelativeFilePath = 'index.rocket.md';
+import { layout, html } from './recursive.data.js';
+export { layout, html };
+/* END - Rocket auto generated - do not touch */
+```
+
+# Fun Errors & Feedback

packages/engine/test-node/fixtures/05-menu/15-md-special-characters/docs/pageTreeData.rocketGenerated.json

@@ -0,0 +1,34 @@
+{
+ "h1": "Fun Errors & Feedback",
+ "headlinesWithId": [
+ {
+ "text": "Fun Errors & Feedback",
+ "id": "fun-errors--feedback",
+ "level": 1
+ }
+ ],
+ "name": "Fun Errors & Feedback",
+ "menuLinkText": "Fun Errors & Feedback",
+ "url": "/",
+ "outputRelativeFilePath": "index.html",
+ "sourceRelativeFilePath": "index.rocket.md",
+ "level": 0,
+ "children": [
+ {
+ "h1": "<some-button>",
+ "headlinesWithId": [
+ {
+ "text": "<some-button>",
+ "id": "some-button",
+ "level": 1
+ }
+ ],
+ "name": "<some-button>",
+ "menuLinkText": "<some-button>",
+ "url": "/component/",
+ "outputRelativeFilePath": "component/index.html",
+ "sourceRelativeFilePath": "component.rocket.md",
+ "level": 1
+ }
+ ]
+}

packages/engine/test-node/fixtures/05-menu/15-md-special-characters/docs/recursive.data.js

@@ -0,0 +1,18 @@
+import { PageTree, SiteMenu } from '@rocket/engine';
+import { html } from 'lit';
+
+const pageTree = new PageTree({
+ inputDir: new URL('./', import.meta.url),
+ outputDir: new URL('../__output', import.meta.url),
+});
+
+await pageTree.restore();
+
+export const layout = data => {
+ return html`
+ ${pageTree.renderMenu(new SiteMenu(), data.sourceRelativeFilePath)}
+ <main>${data.content()}</main>
+ `;
+};
+
+export { html };