From ac37285be62ff9883e42e1b8ed4b3f38e5ee93e7 Mon Sep 17 00:00:00 2001
From: Taloth Saldono <Taloth@users.noreply.github.com>
Date: Sun, 3 May 2020 11:48:11 +0200
Subject: [PATCH] Inline markdown-style link for PackageAuthor

---
 .../src/Components/Markdown/InlineMarkdown.js | 44 +++++++++++++++++++
 frontend/src/System/Status/About/About.js     |  3 +-
 2 files changed, 46 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/Components/Markdown/InlineMarkdown.js

diff --git a/frontend/src/Components/Markdown/InlineMarkdown.js b/frontend/src/Components/Markdown/InlineMarkdown.js
new file mode 100644
index 000000000..2d7df776f
--- /dev/null
+++ b/frontend/src/Components/Markdown/InlineMarkdown.js
@@ -0,0 +1,44 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import Link from 'Components/Link/Link';
+
+class InlineMarkdown extends Component {
+
+  //
+  // Render
+
+  render() {
+    const {
+      className,
+      data
+    } = this.props;
+
+    // For now only replace links
+    const markdownBlocks = [];
+    if (data) {
+      const matches = data.matchAll(/\[(.+?)\]\((.+?)\)/g);
+      let endIndex = 0;
+
+      for (const match of matches) {
+        if (match.index > endIndex) {
+          markdownBlocks.push(data.substr(endIndex, match.index - endIndex));
+        }
+        markdownBlocks.push(<Link key={match.index} to={match[2]}>{match[1]}</Link>);
+        endIndex = match.index + match[0].length;
+      }
+
+      if (endIndex !== data.length) {
+        markdownBlocks.push(data.substr(endIndex, data.length - endIndex));
+      }
+    }
+
+    return <span className={className}>{markdownBlocks}</span>;
+  }
+}
+
+InlineMarkdown.propTypes = {
+  className: PropTypes.string,
+  data: PropTypes.string
+};
+
+export default InlineMarkdown;
diff --git a/frontend/src/System/Status/About/About.js b/frontend/src/System/Status/About/About.js
index d04e8b99e..7403a6cc8 100644
--- a/frontend/src/System/Status/About/About.js
+++ b/frontend/src/System/Status/About/About.js
@@ -2,6 +2,7 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import titleCase from 'Utilities/String/titleCase';
 import FieldSet from 'Components/FieldSet';
+import InlineMarkdown from 'Components/Markdown/InlineMarkdown';
 import DescriptionList from 'Components/DescriptionList/DescriptionList';
 import DescriptionListItem from 'Components/DescriptionList/DescriptionListItem';
 import StartTime from './StartTime';
@@ -42,7 +43,7 @@ class About extends Component {
             packageVersion &&
               <DescriptionListItem
                 title="Package Version"
-                data={(packageAuthor ? `${packageVersion} by ${packageAuthor}` : packageVersion)}
+                data={(packageAuthor ? <span> {packageVersion} {' by '} <InlineMarkdown data={packageAuthor} /> </span> : packageVersion)}
               />
           }