Merge pull request #1068 from daniel-ac-martin/add-mdx-test

First class support for Markdown and MDX

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;

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();
+  });
+});

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();
+  });
+});

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;

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
+```

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>

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);
 };
 

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;