Fix markdown parsing after update

Titles weren't displayed anymore
Get rid of vertical bar in front of release titles to simplify

components/markdown.tsx

@@ -1,3 +1,4 @@
+import { slug } from 'github-slugger';
 import { Children, FunctionComponent } from 'react';
 import ReactMarkdown from 'react-markdown';
 import rehypeExternalLinks from 'rehype-external-links';
@@ -16,70 +17,39 @@ const flatten = (text, child) => {
 };
 
 const heading = (props) => {
-  const levelsSpacing = {
-    '1': '', //h1 are not used in md as they are usually in the hero component
-    '2': 'mt-8',
-    '3': 'mt-6',
-    '4': 'mt-6',
-    '5': 'mt-4',
-    '6': 'mt-4'
-  };
-  const children = Children.toArray(props.children);
-  let text = children.reduce(flatten, '');
-  const slug = text
-    .toLowerCase()
-    .trim()
-    .replace(/\W/g, '-')
-    .replace('--', '-')
-    .replace(/^\-|\-$/g, '');
+  let linkSlug = '';
 
-  let hasVertBar = false;
+  const textChildren = Children.toArray(props.children);
+  let text = textChildren.reduce(flatten, '');
 
-  if (typeof children[0] === 'string' && children[0].includes('|')) {
-    hasVertBar = true;
-    children[0] = (children[0] as string).replace('|', '');
-  }
+  linkSlug = slug(text);
 
   // add anchor link
-
   const container = (children: React.ReactNode): JSX.Element => (
     <>
-      {hasVertBar && <span className='text-primary pe-2'>|</span>}
       {children}
       <a
-        id={slug}
-        href={`#${slug}`}
+        id={linkSlug}
+        href={`#${linkSlug}`}
         className='ms-2 fs-3 fw-bold text-muted text-decoration-none'
       >
         <small>#</small>
       </a>
     </>
   );
-  switch (props.level) {
-    case 1:
-      return (
-        <h1 className={levelsSpacing[props.level]}>{container(children)}</h1>
-      );
-    case 2:
-      return (
-        <h2 className={levelsSpacing[props.level]}>{container(children)}</h2>
-      );
-    case 3:
-      return (
-        <h3 className={levelsSpacing[props.level]}>{container(children)}</h3>
-      );
-    case 4:
-      return (
-        <h4 className={levelsSpacing[props.level]}>{container(children)}</h4>
-      );
-    case 5:
-      return (
-        <h5 className={levelsSpacing[props.level]}>{container(children)}</h5>
-      );
-    case 6:
-      return (
-        <h6 className={levelsSpacing[props.level]}>{container(children)}</h6>
-      );
+  switch (props.node.tagName) {
+    case 'h1':
+      return <h1>{container(props.children)}</h1>;
+    case 'h2':
+      return <h2 className='mt-8'>{container(props.children)}</h2>;
+    case 'h3':
+      return <h3 className='mt-6'>{container(props.children)}</h3>;
+    case 'h4':
+      return <h4 className='mt-6'>{container(props.children)}</h4>;
+    case 'h5':
+      return <h5 className='mt-4'>{container(props.children)}</h5>;
+    case 'h6':
+      return <h6 className='mt-4'>{container(props.children)}</h6>;
   }
 };
 
@@ -91,12 +61,15 @@ const Markdown: FunctionComponent<{
   return (
     <ReactMarkdown
       children={props.body}
-      rehypePlugins={[rehypeRaw, [rehypeExternalLinks,{rel: 'noopener',target: '_blank'}]]}
+      rehypePlugins={[
+        rehypeRaw,
+        [rehypeExternalLinks, { rel: 'noopener', target: '_blank' }]
+      ]}
       remarkPlugins={[remarkGfm]}
       components={{
         code: ({ node, className, children, ...props }) => {
           const match = /language-(\w+)/.exec(className || '');
-          return /* !inline &&  */match ? (
+          return /* !inline &&  */ match ? (
             <CodeBlock
               code={String(children).replace(/\n$/, '')}
               dark
@@ -146,11 +119,11 @@ const Markdown: FunctionComponent<{
         table: ({ children }) => {
           // check if 'NOSTYLE' is present in the header first cell
           let noStyle = false;
-          let firstCell = (children[0] as any)?.props?.children[0]?.props
-            ?.children[0]?.props?.children;
+
+          let firstCell =
+            children[0]?.props?.children?.props?.children?.[0]?.props?.children;
           if (firstCell && firstCell.includes('NOSTYLE')) {
             noStyle = true;
-            firstCell[0] = '';
           }
 
           return (
@@ -160,7 +133,9 @@ const Markdown: FunctionComponent<{
               }`}
             >
               <div className='table-responsive'>
-                <table className='table'>{children}</table>
+                <table className={`table ${noStyle ? 'table-borderless' : ''}`}>
+                  {noStyle ? children[1] : children}
+                </table>
               </div>
             </div>
           );

content/releases/3.0.0.md

@@ -34,13 +34,13 @@ In practical terms, these changes mean that the desktop application will now fol
 - We dropped support for Node.js v14. The CLI and the serverless package now require at least Node.js 16.
 - The Docker image is now built using `node:18-alpine`.
 
-## | Desktop application
+## Desktop application
 
 - **Breaking change**: We updated the application to the latest version of Electron. Thus, it is no longer compatible with Windows 7 and 8. (Issue [#977](https://github.com/mockoon/mockoon/issues/977))
 - The custom URL scheme (`mockoon://`) was temporarily deactivated on Linux due to a bug causing association of HTML files with Mockoon. (Issue [#997](https://github.com/mockoon/mockoon/issues/997))
 - We fixed a bug were the next route wasn't made active when the first one was deleted. (Issue [#1014](https://github.com/mockoon/mockoon/issues/1014))
 
-## | CLI
+## CLI
 
 - **Breaking change**: The CLI's Docker image is now using `node:18-alpine`. (Issue [#959](https://github.com/mockoon/mockoon/issues/959))
 - **Breaking change**: We dropped support for Node.js v14. The CLI now requires Node.js 16 at least. (Issue [#959](https://github.com/mockoon/mockoon/issues/959))
@@ -49,13 +49,13 @@ In practical terms, these changes mean that the desktop application will now fol
 - Curl was added to the Docker image to enable health checks. (Issue [#945](https://github.com/mockoon/mockoon/issues/945))
 - We migrated the Oclif dependency for the CLI to the latest versions. The message stating that "cli-ux" is deprecated is not present anymore. (Issue [#997](https://github.com/mockoon/mockoon/issues/997))
 
-## | Serverless package
+## Serverless package
 
 - **Breaking change**: We dropped support for Node.js v14. The package is now requiring Node.js 16 at least. (Issue [#959](https://github.com/mockoon/mockoon/issues/959))
 
 ---
 
-## | Common changes
+## Common changes
 
 ### New templating helpers
 

content/releases/3.1.0.md

@@ -34,7 +34,7 @@ Subscribing to the Pro plan is also a good way to **support this open-source pro
 
 We will add more features to the Pro plan in the future. You can subscribe to our newsletter on the Pro plan page to be notified when they are available.
 
-## | Desktop application
+## Desktop application
 
 ### New recording mode in the logs view
 
@@ -62,11 +62,11 @@ You can now zoom in and out using the `Ctrl + +` and `Ctrl + -` shortcuts. The z
 
 - The default data folder for Snap installations is now `~/snap/mockoon/common/.mockoon` instead of the current Snap version folder. This will prevent losing data during application updates. (Issue [#1026](https://github.com/mockoon/mockoon/issues/1026))
 
-## | CLI
+## CLI
 
 - `tzdata` was added to the Docker image to enable timezone configuration. (Issue [#865](https://github.com/mockoon/mockoon/issues/865))
 
-## | Serverless package
+## Serverless package
 
 - The package and its [documentation](https://github.com/mockoon/mockoon/blob/main/packages/serverless/README.md) was updated to help you deploy your mock API to Netlify's serverless functions. (Issue [#1060](https://github.com/mockoon/mockoon/pull/1060))
 

content/releases/4.0.0.md

@@ -30,7 +30,7 @@ We introduced two breaking changes in this major release:
 
 ---
 
-## | Logs standardization and credentials filtering
+## Logs standardization and credentials filtering
 
 Logging has been standardized across all Mockoon applications and packages. This means that the logs will now be formatted the same way in the [desktop application log file](https://mockoon.com/docs/latest/logging-and-recording/requests-logging/#file-logging), the [CLI's console and log file](https://github.com/mockoon/mockoon/blob/main/packages/cli/README.md#logs), and the [serverless package's console logging](https://github.com/mockoon/mockoon/blob/main/packages/serverless/README.md#logging). This will make it easier to read and parse the logs.
 As part of this change, we also added a new setting to enable full transaction logging to both the desktop application and the serverless package. It is the equivalent of the CLI's `--log-transaction` flag.
@@ -99,7 +99,7 @@ Some events' logging formats changed. If you are using the logs in your scripts,
 
 Finally, the new logging format automatically filters out credentials from the logs. It means that if you are using the `--log-transaction` flag or the full transaction logging settings, the authentication keys present in the `Authorization` or `Proxy-Authorization` headers are anonymized. (Issue [#688](https://github.com/mockoon/mockoon/issues/688))
 
-## | Desktop application
+## Desktop application
 
 - The logs are now formatted the same way as the CLI and the serverless package (JSON). See [logs standardization](#logs-standardization) section above for more details. (Issue [#1063](https://github.com/mockoon/mockoon/issues/1063))
 
@@ -117,7 +117,7 @@ Finally, the new logging format automatically filters out credentials from the l
 
 - You can now search for routes in collapsed folders. (Issue [#960](https://github.com/mockoon/mockoon/issues/960))
 
-## | OpenAPI
+## OpenAPI
 
 - A bug was fixed where OpenAPI export was crashing due to an incompatibility with CRUD routes. (Issue [#1066](https://github.com/mockoon/mockoon/issues/1066))
 - When exporting to OpenAPI format, inline bodies are now used to populate the `example` property (Issue [#352](https://github.com/mockoon/mockoon/issues/352)):
@@ -143,13 +143,13 @@ Finally, the new logging format automatically filters out credentials from the l
 }
 ```
 
-## | Changes to templating helpers
+## Changes to templating helpers
 
 - The [`data` and `dataRaw` helpers](https://mockoon.com/docs/latest/templating/mockoon-helpers/#data) are now compatible with values coming from other helpers like `queryParam`. (Issues [#1069](https://github.com/mockoon/mockoon/issues/1069))
 - We added a new boolean parameter to the [`oneOf` helper](https://mockoon.com/docs/latest/templating/mockoon-helpers/#oneof) to allow the user to stringify the result of the helper. (Issues [#1074](https://github.com/mockoon/mockoon/issues/1074))
 - The [`faker` helper](https://mockoon.com/docs/latest/templating/fakerjs-helpers/) is now compatible with Faker.js methods containing a number (`internet.ipv4` and `internet.ipv6`). (Issues [#1078](https://github.com/mockoon/mockoon/issues/1078))
 
-## | CLI
+## CLI
 
 - The logs format changed to match the desktop application and the serverless package. See [logs standardization](#logs-standardization) section above for more details. (Issue [#1063](https://github.com/mockoon/mockoon/issues/1063))
 - We refactored the CLI to remove the dependency to PM2, which was subject to some security vulnerabilities. Another reason for this refactoring, was that, having multiple other ways to manage running CLI instances (i.e. containers), embedding a process manager felt a bit outdated and overkill. The CLI is now easier to maintain and more lightweight. As a consequence, the following changes were made:
@@ -160,7 +160,7 @@ Finally, the new logging format automatically filters out credentials from the l
 
   (Issue [#1081](https://github.com/mockoon/mockoon/issues/1081))
 
-## | Serverless package
+## Serverless package
 
 - The package now logs all events and transactions to stdout (console) in the same logging format used by the desktop application and the CLI. (Issues [#1063](https://github.com/mockoon/mockoon/issues/1063) and [#978](https://github.com/mockoon/mockoon/issues/978))
 - A [new option is available](https://github.com/mockoon/mockoon/blob/main/packages/serverless/README.md#transaction-logging) to enable full transaction logging. (Issue [#1063](https://github.com/mockoon/mockoon/issues/1063))

content/releases/4.1.0.md

@@ -21,27 +21,27 @@ Mockoon is an open-source project built by volunteer maintainers. If you like ou
 
 ---
 
-## | New response fallback mode
+## New response fallback mode
 
 A new response mode has been added. It allows you to fallback to the next route and ultimately the proxied server when no response rules match instead of serving the default response. Visit the [documentation](https://mockoon.com/docs/latest/route-responses/multiple-responses/#fallback-mode) to learn more. (Issues [#363](https://github.com/mockoon/mockoon/issues/363))
 
 ![enable fallback mode{979x174}](/images/releases/4.1.0/enable-response-fallback-mode.png)
 
-## | Dynamic rules with templating
+## Dynamic rules with templating
 
 The templating helpers are now supported in the rule values letting you create dynamic rules. (Issue [#988](https://github.com/mockoon/mockoon/issues/988))
 
 ![screenshot showing a response rule with a template helper in the value field{1303x234}](/images/releases/4.1.0/template-helper-response-rule-value.png)
 
-## | Changes to templating helpers
+## Changes to templating helpers
 
 - Two new templating helpers have been added to allow [array filtering](https://mockoon.com/docs/latest/templating/mockoon-helpers/#filter) and [object creation](https://mockoon.com/docs/latest/templating/mockoon-helpers/#object). (Issues [#1103](https://github.com/mockoon/mockoon/issues/1103))
 
 - Properties with dots are now supported in the `queryParam` and `queryParamRaw` templating helpers. Escape the dots when you want to reach values contained in a property with dots. See the examples in our [documentation](https://mockoon.com/docs/latest/templating/mockoon-request-helpers/#queryparam). (Issue [#1115](https://github.com/mockoon/mockoon/issues/1115))
 
 - The [`eq` templating helper](https://mockoon.com/docs/latest/templating/mockoon-helpers/#eq) is now compatible with strings. (Issue [#1114](https://github.com/mockoon/mockoon/issues/1114))
 
-## | Other changes
+## Other changes
 
 - Templating helpers in Handlebars files with `.hbs` or `.handlebars` are now correctly parsed. (Issue [#1120](https://github.com/mockoon/mockoon/issues/1120))
 

content/releases/5.0.0.md

@@ -30,7 +30,7 @@ We introduced two breaking changes in this major release:
 
 ---
 
-## | JSONPath support
+## JSONPath support
 
 Mockoon now supports [JSONPath](https://www.npmjs.com/package/jsonpath-plus) alongside [object-path](https://www.npmjs.com/package/object-path) everywhere a path to an object property can be provided:
 
@@ -41,13 +41,13 @@ We are using the [JSONPath Plus](https://www.npmjs.com/package/jsonpath-plus) li
 
 (Issue [#995](https://github.com/mockoon/mockoon/issues/995))
 
-## | Routes targeting all HTTP methods
+## Routes targeting all HTTP methods
 
 It is now possible to create routes that will match any HTTP method. You can now select "All methods" in the routes method dropdown:
 
 ![wildcard route on all methods{562x207}](/images/releases/5.0.0/route-select-all-methods.png)
 
-## | Global routes with rules
+## Global routes with rules
 
 Thanks to the [response fallback mode](https://mockoon.com/docs/latest/route-responses/multiple-responses/#fallback-mode) introduced in v4.1.0, it was already possible to create wildcard routes containing "global" rules, like validating the presence of an `Authorization` header, or verifying that the request body contains a specific property.
 The only missing piece was the ability to create a global route that would match any HTTP method, which is now possible with the new feature above.
@@ -58,25 +58,25 @@ We also updated the desktop application's demo environment to showcase this new
 
 (Issue [#221](https://github.com/mockoon/mockoon/issues/221))
 
-## | Desktop application
+## Desktop application
 
 - **Breaking change**: Support was dropped for [legacy data files](https://mockoon.com/docs/latest/mockoon-data-files/data-storage-location/#old-system-pre-v1-16-0) (pre v1.16.0). The desktop application will no longer automatically migrate your environments from the old system. If you are updating from v1.15.0, please first update to any version between v1.16.0 and v4.1.0, then to v5.0.0. (Issue [#1138](https://github.com/mockoon/mockoon/issues/1138))
 
 - We added a link in the footer update notification to let you easily check the new version's changelog (will be visible for updates >v5.0.0):
 
 ![footer update notification{788x149}](/images/releases/5.0.0/footer-update-notification.png)
 
-## | CLI
+## CLI
 
 - **Breaking change**: We dropped support for Node.js v16. The CLI now requires Node.js 18 at least. (Issue [#1119](https://github.com/mockoon/mockoon/issues/1119))
 - **Breaking change**: Support was dropped for opening [legacy data files](https://mockoon.com/docs/latest/mockoon-data-files/data-storage-location/#old-system-pre-v1-16-0) (pre v1.16.0). (Issue [#1138](https://github.com/mockoon/mockoon/issues/1138))
 - The Docker image is now tagged with its major version. Starting with version 5, all v5.x.x will be tagged `5` and so on. (Issue [#1132](https://github.com/mockoon/mockoon/issues/1132))
 
-## | Serverless package
+## Serverless package
 
 - **Breaking change**: We dropped support for Node.js v16. The package is now requiring Node.js 18 at least. (Issue [#1119](https://github.com/mockoon/mockoon/issues/1119))
 
-## | Chores
+## Chores
 
 - We updated most of the application dependencies to their latest version in order to fix recent security vulnerabilities.