Dataset formatting fix (#1016)

* add a nextapp-dev script

* improve the format of the dataset

* upd mock for dataset and upd css

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',

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<
               <Heading size="sm">About This Dataset</Heading>
             </Box>
             <Box mt={5} mb={9} sx={{ p: { marginBottom: 4 } }}>
-              <ReactMarkdownWithHtml renderers={renderers} plugins={[gfm]}>
+              <ReactMarkdownWithHtml
+                renderers={renderers}
+                plugins={[gfm]}
+                className={style.markdown}
+              >
                 {data?.notes}
               </ReactMarkdownWithHtml>
             </Box>
             <Card heading="Products">
               <Box bg="gray.100">
-                {data?.products?.sort((a,b) => (a.name > b.name) ? 1 : ((b.name > a.name) ? -1 : 0)).map((p) => (
-                  <ApiProductItem
-                    key={uid(p)}
-                    data={p}
-                    id={p.id}
-                    preview={preview}
-                  />
-                ))}
+                {data?.products
+                  ?.sort((a, b) =>
+                    a.name > b.name ? 1 : b.name > a.name ? -1 : 0
+                  )
+                  .map((p) => (
+                    <ApiProductItem
+                      key={uid(p)}
+                      data={p}
+                      id={p.id}
+                      preview={preview}
+                    />
+                  ))}
               </Box>
             </Card>
           </GridItem>

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

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",