From 0bcfb4f087f730c09697578fc6d1c843d5777720 Mon Sep 17 00:00:00 2001
From: "Daniel A.C. Martin" <github@daniel-martin.co.uk>
Date: Wed, 4 Sep 2024 17:25:20 +0100
Subject: [PATCH 1/2] First class support for Markdown and MDX

Enables support (in engine and the app generator) for Markdown pages.
This means that Markdown can be placed in the pages directory of an app
rather than imported into a TSX page.
---
 apps/govuk-docs/src/common/page-loader.ts        |  2 +-
 apps/govuk-template/src/common/page-loader.ts    |  2 +-
 lib/engine/src/lib/pages.ts                      | 11 ++++-------
 lib/plop-pack/skel/app/src/common/page-loader.ts |  2 +-
 4 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/apps/govuk-docs/src/common/page-loader.ts b/apps/govuk-docs/src/common/page-loader.ts
index dc2d10d2e..4b85c3280 100644
--- a/apps/govuk-docs/src/common/page-loader.ts
+++ b/apps/govuk-docs/src/common/page-loader.ts
@@ -1,2 +1,2 @@
-export const pageLoader = require.context('./pages', true, /\.([jt]sx?|html)$/i, 'sync');
+export const pageLoader = require.context('./pages', true, /\.([jt]sx?|mdx?|html)$/i, 'sync');
 export default pageLoader;
diff --git a/apps/govuk-template/src/common/page-loader.ts b/apps/govuk-template/src/common/page-loader.ts
index dc2d10d2e..4b85c3280 100644
--- a/apps/govuk-template/src/common/page-loader.ts
+++ b/apps/govuk-template/src/common/page-loader.ts
@@ -1,2 +1,2 @@
-export const pageLoader = require.context('./pages', true, /\.([jt]sx?|html)$/i, 'sync');
+export const pageLoader = require.context('./pages', true, /\.([jt]sx?|mdx?|html)$/i, 'sync');
 export default pageLoader;
diff --git a/lib/engine/src/lib/pages.ts b/lib/engine/src/lib/pages.ts
index 672aad12e..bc1e37a3e 100644
--- a/lib/engine/src/lib/pages.ts
+++ b/lib/engine/src/lib/pages.ts
@@ -4,7 +4,7 @@ import { PageModule, PageInfoSSR, PageLoader } from '@not-govuk/app-composer';
 import { Response } from '@not-govuk/server-renderer';
 import path from 'path';
 
-const pageExtensionPattern = /\.([jt]sx?|html)$/i
+const pageExtensionPattern = /\.([jt]sx?|mdx?|html)$/i
 
 const removePrecedingDotSlash = (s: string): string => (
   s.startsWith('./')
@@ -58,21 +58,18 @@ export const gatherPages = (pageLoader: PageLoader): Promise<PageInfoSSR[]> => P
     .keys()
     .map(async e => {
       const mod: PageModule = await pageLoader(e);
+      const title: string = mod.title || src2Title(e);
 
       return {
         Component: mod.default,
         href: src2Href(e),
         src: e,
-        title: (
-          typeof mod.default === 'string'
-            ? src2Title(e)
-            : mod.title
-        )
+        title
       };
     } )
 );
 
-const pageMiddleware = (title: string) => (req: Request, res: Response, next: Next) => {
+const pageMiddleware = (title: string) => (_req: Request, res: Response, next: Next) => {
   res.renderApp(200, title).finally(next);
 };
 
diff --git a/lib/plop-pack/skel/app/src/common/page-loader.ts b/lib/plop-pack/skel/app/src/common/page-loader.ts
index dc2d10d2e..4b85c3280 100644
--- a/lib/plop-pack/skel/app/src/common/page-loader.ts
+++ b/lib/plop-pack/skel/app/src/common/page-loader.ts
@@ -1,2 +1,2 @@
-export const pageLoader = require.context('./pages', true, /\.([jt]sx?|html)$/i, 'sync');
+export const pageLoader = require.context('./pages', true, /\.([jt]sx?|mdx?|html)$/i, 'sync');
 export default pageLoader;

From 5e5a2e7942ea287ded9fd1ccf669c89afcff4d91 Mon Sep 17 00:00:00 2001
From: "Daniel A.C. Martin" <github@daniel-martin.co.uk>
Date: Wed, 4 Sep 2024 17:33:06 +0100
Subject: [PATCH 2/2] template: Add tests for Markdown & MDX support

---
 apps/govuk-template/feat/md.spec.js          | 25 ++++++
 apps/govuk-template/feat/mdx.spec.js         | 26 +++++++
 apps/govuk-template/src/common/pages/md.md   | 37 +++++++++
 apps/govuk-template/src/common/pages/mdx.mdx | 80 ++++++++++++++++++++
 4 files changed, 168 insertions(+)
 create mode 100644 apps/govuk-template/feat/md.spec.js
 create mode 100644 apps/govuk-template/feat/mdx.spec.js
 create mode 100644 apps/govuk-template/src/common/pages/md.md
 create mode 100644 apps/govuk-template/src/common/pages/mdx.mdx

diff --git a/apps/govuk-template/feat/md.spec.js b/apps/govuk-template/feat/md.spec.js
new file mode 100644
index 000000000..5f72fc705
--- /dev/null
+++ b/apps/govuk-template/feat/md.spec.js
@@ -0,0 +1,25 @@
+const pageWorks = () => (
+  it('is the correct page', () => {
+    cy.contains('Markdown test').should('be.visible');
+    cy.contains('Hello world!').should('be.visible');
+  })
+);
+
+describe('Markdown', () => {
+  describe('when visiting the page directly', () => {
+    it('successfully loads', () => {
+      cy.visit('/md');
+    });
+
+    pageWorks();
+  });
+
+  describe('when visiting the page indirectly', () => {
+    before(() => {
+      cy.visit('/');
+      cy.contains('Md').click();
+    });
+
+    pageWorks();
+  });
+});
diff --git a/apps/govuk-template/feat/mdx.spec.js b/apps/govuk-template/feat/mdx.spec.js
new file mode 100644
index 000000000..9e7f9d764
--- /dev/null
+++ b/apps/govuk-template/feat/mdx.spec.js
@@ -0,0 +1,26 @@
+const pageWorks = () => (
+  it('is the correct page', () => {
+    cy.contains('MDX test').should('be.visible');
+    cy.contains('Hello world!').should('be.visible');
+    cy.contains('React supported').should('be.visible');
+  })
+);
+
+describe('Markdown', () => {
+  describe('when visiting the page directly', () => {
+    it('successfully loads', () => {
+      cy.visit('/mdx');
+    });
+
+    pageWorks();
+  });
+
+  describe('when visiting the page indirectly', () => {
+    before(() => {
+      cy.visit('/');
+      cy.contains('MDX').click();
+    });
+
+    pageWorks();
+  });
+});
diff --git a/apps/govuk-template/src/common/pages/md.md b/apps/govuk-template/src/common/pages/md.md
new file mode 100644
index 000000000..8b74cde48
--- /dev/null
+++ b/apps/govuk-template/src/common/pages/md.md
@@ -0,0 +1,37 @@
+Markdown test
+=============
+
+Hello world!
+
+[Markdown](/md) has support for basic typography such as **bold** and _italic_. You can even use them **_together_**.
+
+Ordered lists
+-------------
+
+### Reasons to be cheerful:
+
+1. One
+2. Two
+3. Three
+
+## Disordered lists
+
+- A
+- B
+- C
+
+## Block quotes
+
+> **My quote**
+>
+> > Embedded
+
+## Code
+
+We can provide `code inline`, or in a block:
+
+```
+MY CODE
+
+MORE CODE
+```
diff --git a/apps/govuk-template/src/common/pages/mdx.mdx b/apps/govuk-template/src/common/pages/mdx.mdx
new file mode 100644
index 000000000..268473c13
--- /dev/null
+++ b/apps/govuk-template/src/common/pages/mdx.mdx
@@ -0,0 +1,80 @@
+import { BackLink, NavigationMenu, Panel } from '@not-govuk/components';
+
+export const title = 'MDX';
+
+<div className="govuk-grid-row">
+  <div className="govuk-grid-column-one-quarter">
+    <NavigationMenu
+      items={[
+        {
+          href: "/",
+          text: "Home",
+        },
+        {
+          href: "/html",
+          text: "HTML",
+        },
+        {
+          href: "/md",
+          text: "Markdown",
+        },
+        {
+          href: "/mdx",
+          text: "MDX",
+        },
+      ]}
+    />
+  </div>
+  <div className="govuk-grid-column-three-quarters">
+    <BackLink />
+
+MDX test
+========
+
+Hello world!
+
+[Markdown](/md) has support for basic typography such as **bold** and _italic_. You can even use them **_together_**.
+
+Ordered lists
+-------------
+
+### Reasons to be cheerful:
+
+1. One
+2. Two
+3. Three
+
+## Disordered lists
+
+- A
+- B
+- C
+
+## Block quotes
+
+> **My quote**
+>
+> > Embedded
+
+## Code
+
+We can provide `code inline`, or in a block:
+
+```
+MY CODE
+
+MORE CODE
+```
+
+---
+
+## MDX
+
+  <Panel
+    classModifiers="confirmation"
+    title="React supported"
+  >
+    You can use React components in your MDX pages.
+  </Panel>
+  </div>
+</div>