diff --git a/src/mocks/resolvers/api-directory.js b/src/mocks/resolvers/api-directory.js
index 610852f4e..6d1b06346 100644
--- a/src/mocks/resolvers/api-directory.js
+++ b/src/mocks/resolvers/api-directory.js
@@ -1,4 +1,77 @@
+import YAML from 'js-yaml';
+
+const markdown = YAML.load(`
+notes: |
+ Here is some markdown.
+ # Heading 1
+ ## Heading 2
+ ### Heading 3
+ #### Heading 4
+ Then I will do **bold**, _italics_ and ~~strikethrough~~.
+
+ #### Heading 4
+
+ And some text.
+
+ How about a table?
+ | Col1 | Col2 |
+ | ---- | ---- |
+ | Val1 | Val2 |
+
+ How about a new line.
+
+ And another line.
+
+ Try a list:
+ - one
+ - two
+ - three
+
+ Or an ordered list:
+ 1. one
+ 1. two
+ 1. three
+
+ Then there are images
+
+ ![image](http://localhost:3000/images/bc_logo_header.svg)
+
+ And links [my docs](https://github.com).
+
+ Here are some block quotes
+
+ > A block quote about something.
+
+ What about a bit of code - \`alert("hi")\`.
+
+ Code block?
+ \`\`\`
+ function (a) {
+ // comment
+ }
+ \`\`\`
+
+`);
+
const directories = [
+ {
+ id: 'api1',
+ name: 'markdown-test',
+ title: 'Testing Markdown on Dataset',
+ notes: markdown.notes,
+ sector: 'Natural Resources',
+ license_title: 'Access Only',
+ view_audience: 'Named users',
+ security_class: 'LOW-PUBLIC',
+ record_publish_date: '2020-04-28',
+ tags: '["API","CDOGS","Document","Document Generation"]',
+ organization: {
+ title: 'Ministry of Environment and Climate Change Strategy',
+ },
+ organizationUnit: {
+ title: 'Information Innovation and Technology',
+ },
+ },
{
id: 'api1',
name: 'common-service-api',
diff --git a/src/nextapp/pages/devportal/api-directory/[id].tsx b/src/nextapp/pages/devportal/api-directory/[id].tsx
index 9a8475efb..a1a752859 100644
--- a/src/nextapp/pages/devportal/api-directory/[id].tsx
+++ b/src/nextapp/pages/devportal/api-directory/[id].tsx
@@ -26,6 +26,7 @@ import ReactMarkdownWithHtml from 'react-markdown/with-html';
import gfm from 'remark-gfm';
import { uid } from 'react-uid';
import { useAuth } from '@/shared/services/auth';
+import style from '@/shared/styles/markdown.module.css';
const renderers = {
link: InternalLink,
@@ -144,20 +145,28 @@ const ApiPage: React.FC<
About This Dataset
-
+
{data?.notes}
- {data?.products?.sort((a,b) => (a.name > b.name) ? 1 : ((b.name > a.name) ? -1 : 0)).map((p) => (
-
- ))}
+ {data?.products
+ ?.sort((a, b) =>
+ a.name > b.name ? 1 : b.name > a.name ? -1 : 0
+ )
+ .map((p) => (
+
+ ))}
diff --git a/src/nextapp/shared/styles/markdown.module.css b/src/nextapp/shared/styles/markdown.module.css
new file mode 100644
index 000000000..a6e77eb52
--- /dev/null
+++ b/src/nextapp/shared/styles/markdown.module.css
@@ -0,0 +1,72 @@
+.markdown {
+}
+
+.markdown h1 {
+ margin-bottom: 1em;
+}
+
+.markdown h2 {
+ margin-bottom: 1em;
+}
+
+.markdown h3 {
+ margin-bottom: 1em;
+}
+
+.markdown h4 {
+ margin-bottom: 1em;
+}
+
+.markdown ul {
+ margin-top: 1em;
+ margin-bottom: 1em;
+ list-style: disc outside none;
+}
+
+.markdown ul li {
+ margin-left: 2em;
+ display: list-item;
+ text-align: -webkit-match-parent;
+}
+
+.markdown ol {
+ margin-top: 1em;
+ margin-bottom: 1em;
+}
+
+.markdown ol li {
+ margin-left: 2em;
+ display: list-item;
+ text-align: -webkit-match-parent;
+}
+
+.markdown img {
+ display: none;
+}
+
+.markdown table {
+ margin-top: 1em;
+ margin-bottom: 1em;
+ width: 100%;
+ border-collapse: collapse;
+}
+
+.markdown td {
+ padding: 8px;
+ border: 1px solid #cccccc;
+}
+
+.markdown th {
+ padding: 8px;
+ text-align: left;
+ border: 1px solid #cccccc;
+}
+
+.markdown blockquote {
+ margin-top: 1em;
+ margin-bottom: 1em;
+ padding-top: 5px;
+ padding-bottom: 5px;
+ padding-left: 5px;
+ border-left: 10px solid #cccccc;
+}
diff --git a/src/package.json b/src/package.json
index 5ab4e899e..d3bf15ed6 100644
--- a/src/package.json
+++ b/src/package.json
@@ -33,6 +33,7 @@
"copy-keystone-admin-assets": "ts-node tools/copyKeystoneAdminAssets",
"x-prestart": "npm run build",
"x-dev": "nodemon",
+ "nextapp-dev": "cross-env NEXT_PUBLIC_MOCKS=on NODE_ENV=development NODE_OPTIONS='--openssl-legacy-provider --no-experimental-fetch --dns-result-order=ipv4first' next dev ./nextapp",
"batch": "cross-env NODE_ENV=development node dist/server-batch.js",
"intg-build": "cross-env NODE_ENV=development npm-run-all delete-assets copy-assets ts-build",
"dev": "cross-env NODE_ENV=development NODE_OPTIONS='--openssl-legacy-provider --no-experimental-fetch --dns-result-order=ipv4first' npm-run-all delete-assets copy-assets tsoa-gen-types tsoa-build-v1 tsoa-build-v2 ts-build ks-dev",