Add Markdown renderer

apps/public/src/app/global.css

@@ -3,3 +3,7 @@ body {
   margin-block: 0;
   margin-inline: 0;
 }
+
+strong {
+  font-weight: 800;
+}

libs/markdown-to-html/.eslintignore

@@ -0,0 +1,2 @@
+# Ignore 3rd party files
+node_modules

libs/markdown-to-html/.eslintrc.json

@@ -0,0 +1,4 @@
+{
+  "extends": ["../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"]
+}

libs/markdown-to-html/README.md

@@ -0,0 +1,4 @@
+# Markdown to HTML
+
+Converts Markdown strings to HTML elements.
+It uses [Amsterdam Design System](https://designsystem.amsterdam/) components for the correct markup and styling.

libs/markdown-to-html/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "markdown-to-html",
+  "version": "0.1.0",
+  "description": "Converts Markdown strings to HTML elements",
+  "license": "EUPL-1.2",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "lint": "eslint . --ext .ts,.tsx",
+    "test": "vitest",
+    "test:watch": "vitest watch",
+    "typecheck": "tsc --project ./tsconfig.json --noEmit"
+  },
+  "dependencies": {
+    "react-markdown": "10.0.0"
+  }
+}

libs/markdown-to-html/src/MarkdownToHtml.test.tsx

@@ -0,0 +1,123 @@
+import { render, screen } from '@testing-library/react'
+
+import { MarkdownToHtml } from './MarkdownToHtml'
+
+describe('MarkdownToHtml', () => {
+  it('renders a link', () => {
+    render(<MarkdownToHtml>[Link](http://example.com)</MarkdownToHtml>)
+
+    const link = screen.getByRole('link', { name: 'Link' })
+
+    expect(link).toBeInTheDocument()
+    expect(link).toHaveAttribute('href', 'http://example.com')
+    expect(link).toHaveClass('ams-link ams-link--inline')
+  })
+
+  it('renders an external link', () => {
+    render(<MarkdownToHtml>[Link](http://example.com)</MarkdownToHtml>)
+
+    const link = screen.getByRole('link', { name: 'Link' })
+
+    expect(link).toHaveAttribute('rel', 'external')
+  })
+
+  it('renders an internal link', () => {
+    render(<MarkdownToHtml>[Link](mailto:[email protected])</MarkdownToHtml>)
+
+    const link = screen.getByRole('link', { name: 'Link' })
+
+    expect(link).not.toHaveAttribute('rel')
+  })
+
+  it('renders a link without href', () => {
+    render(<MarkdownToHtml>[Link]()</MarkdownToHtml>)
+
+    const link = screen.getByText('Link')
+
+    expect(link).not.toHaveAttribute('href')
+  })
+
+  it('renders a heading level 2', () => {
+    render(<MarkdownToHtml>## Heading 2</MarkdownToHtml>)
+
+    const heading = screen.getByRole('heading', { level: 2 })
+
+    expect(heading).toBeInTheDocument()
+    expect(heading).toHaveClass('ams-heading ams-heading--level-2')
+  })
+
+  it('renders a heading level 3', () => {
+    render(<MarkdownToHtml>### Heading 3</MarkdownToHtml>)
+
+    const heading = screen.getByRole('heading', { level: 3 })
+
+    expect(heading).toBeInTheDocument()
+    expect(heading).toHaveClass('ams-heading ams-heading--level-3')
+  })
+
+  it('renders a heading level 4', () => {
+    render(<MarkdownToHtml>#### Heading 4</MarkdownToHtml>)
+
+    const heading = screen.getByRole('heading', { level: 4 })
+
+    expect(heading).toBeInTheDocument()
+    expect(heading).toHaveClass('ams-heading ams-heading--level-4')
+  })
+
+  it('renders an ordered list', () => {
+    render(<MarkdownToHtml>{'1. Item 1\n2. Item 2'}</MarkdownToHtml>)
+
+    const list = screen.getByRole('list')
+
+    expect(list).toBeInTheDocument()
+    expect(list).toHaveClass('ams-ordered-list')
+
+    const items = screen.getAllByRole('listitem')
+
+    expect(items).toHaveLength(2)
+    expect(items[0]).toHaveClass('ams-ordered-list__item')
+  })
+
+  it('renders an unordered list', () => {
+    render(<MarkdownToHtml>{'- Item 1\n- Item 2'}</MarkdownToHtml>)
+
+    const list = screen.getByRole('list')
+
+    expect(list).toBeInTheDocument()
+    expect(list).toHaveClass('ams-unordered-list')
+
+    const items = screen.getAllByRole('listitem')
+
+    expect(items).toHaveLength(2)
+    expect(items[0]).toHaveClass('ams-unordered-list__item')
+  })
+
+  it('renders a paragraph', () => {
+    render(<MarkdownToHtml>This is a paragraph.</MarkdownToHtml>)
+
+    const paragraph = screen.getByText('This is a paragraph.')
+
+    expect(paragraph).toBeInTheDocument()
+    expect(paragraph).toHaveClass('ams-paragraph')
+  })
+
+  it('does not render disallowed elements', () => {
+    render(
+      <MarkdownToHtml>
+        {'# Heading 1\n> Blockquote\n`nano`\n___\n![Image](http://example.com/image.png)'}
+      </MarkdownToHtml>,
+    )
+
+    const blockquote = screen.queryByText('Blockquote')
+    const code = screen.queryByRole('code')
+    const heading = screen.queryByRole('heading', { level: 1 })
+    const separator = screen.queryByRole('separator')
+    const image = screen.queryByRole('img')
+
+    expect(blockquote).not.toBeInTheDocument()
+    expect(code).not.toBeInTheDocument()
+    expect(heading).not.toBeInTheDocument()
+    expect(separator).not.toBeInTheDocument()
+    expect(image).not.toBeInTheDocument()
+  })
+})

libs/markdown-to-html/src/MarkdownToHtml.tsx

@@ -0,0 +1,52 @@
+import { Column, Heading, Link, OrderedList, Paragraph, UnorderedList } from '@amsterdam/design-system-react'
+import { Children, isValidElement } from 'react'
+import type { PropsWithChildren } from 'react'
+import ReactMarkdown from 'react-markdown'
+
+const markdownToHtmlMap = {
+  a: ({ children, href }: PropsWithChildren<{ href?: string }>) => {
+    const isExternal = href?.startsWith('http')
+
+    return (
+      <Link {...(href ? { href } : {})} rel={isExternal ? 'external' : undefined} variant="inline">
+        {children}
+      </Link>
+    )
+  },
+  h2: ({ children }: PropsWithChildren) => <Heading level={2}>{children}</Heading>,
+  h3: ({ children }: PropsWithChildren) => <Heading level={3}>{children}</Heading>,
+  h4: ({ children }: PropsWithChildren) => <Heading level={4}>{children}</Heading>,
+  ol: ({ children }: PropsWithChildren) => {
+    const replacedChildren = Children.map(children, (child) => {
+      if (isValidElement(child) && child.type === 'li') {
+        return <OrderedList.Item {...child.props} />
+      }
+
+      return undefined
+    })
+
+    return <OrderedList>{replacedChildren}</OrderedList>
+  },
+  p: ({ children }: PropsWithChildren) => <Paragraph>{children}</Paragraph>,
+  ul: ({ children }: PropsWithChildren) => {
+    const replacedChildren = Children.map(children, (child) => {
+      if (isValidElement(child) && child.type === 'li') {
+        return <UnorderedList.Item {...child.props} />
+      }
+
+      return undefined
+    })
+
+    return <UnorderedList>{replacedChildren}</UnorderedList>
+  },
+}
+
+const disallowedElements = ['blockquote', 'code', 'h1', 'h5', 'h6', 'hr', 'img']
+
+export const MarkdownToHtml = ({ children }: { children: string }) => (
+  <Column>
+    <ReactMarkdown components={markdownToHtmlMap} disallowedElements={disallowedElements} skipHtml>
+      {children}
+    </ReactMarkdown>
+  </Column>
+)

libs/markdown-to-html/src/index.ts

@@ -0,0 +1 @@
+export * from './MarkdownToHtml'

libs/markdown-to-html/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "jsx": "react-jsx",
+    "resolveJsonModule": true,
+    "strict": true,
+    "types": ["../../typings/cssmodules.d.ts", "vitest/globals"]
+  }
+}

libs/markdown-to-html/vite.config.ts

@@ -0,0 +1,18 @@
+import tsconfigPaths from 'vite-tsconfig-paths'
+import { defineConfig } from 'vitest/config'
+
+export default defineConfig({
+  plugins: [tsconfigPaths()],
+  test: {
+    coverage: {
+      enabled: true,
+      include: ['src/**/*.{js,jsx,ts,tsx}'],
+      exclude: ['src/index.ts'],
+    },
+    globals: true,
+    environment: 'jsdom',
+    include: ['src/**/*.test.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
+    setupFiles: ['./vitest.setup.ts'],
+    watch: false,
+  },
+})

libs/markdown-to-html/vitest.setup.ts

@@ -0,0 +1,3 @@
+/// <reference types="@testing-library/jest-dom" />
+
+import '@testing-library/jest-dom/vitest'