refactor: implement about component

packages/concordia-app/package.json

@@ -38,13 +38,14 @@
     "react": "~16.13.1",
     "react-dom": "~16.13.1",
     "react-i18next": "^11.7.3",
+    "react-markdown": "^5.0.3",
     "react-particles-js": "^3.4.0",
     "react-redux": "~7.2.1",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "~3.4.3",
-    "redux-saga": "~1.1.3",
     "react-timeago": "~5.2.0",
+    "redux-saga": "~1.1.3",
     "semantic-ui-css": "~2.4.1",
     "semantic-ui-react": "~1.2.1",
     "web3": "1.3.0"

packages/concordia-app/src/assets/About.md

@@ -0,0 +1,27 @@
+# About Concordia
+
+## What
+
+Concordia is a forum platform (remember forums? 🤩) that focuses on user privacy and direct democratic voting. It is a
+FOSS distributed via its Gitlab [repository][concordia-repository] and Docker [repository][concordia-docker-hub] under
+the [MIT][concordia-license] license.
+
+## Why
+
+Values of privacy and freedom are diminishing in modern software. Even more so in social media software. Users are now
+called to decide between being the product of companies that sell their personal information for gain and being shut out
+of the modern, digital society.
+
+Concordia, much like other projects of this kind, provides an alternative to this predicament.
+
+## How
+
+TODO
+
+## Who
+
+TODO
+
+[concordia-repository]: https://gitlab.com/ecentrics/apella
+[concordia-docker-hub]: https://hub.docker.com/repository/docker/ecentrics/apella-app
+[concordia-license]: https://gitlab.com/ecentrics/apella/-/blob/master/LICENSE.md

packages/concordia-app/src/layouts/MainLayout/MainLayoutMenu/index.jsx

@@ -76,7 +76,6 @@ const MainLayoutMenu = () => {
                   <Dropdown key="overflow" item direction="left">
                       <Dropdown.Menu>
                           <Dropdown.Item
-                            link
                             name="clear-databases"
                             key="clear-databases"
                             onClick={handleClearDatabasesClick}
@@ -84,7 +83,6 @@ const MainLayoutMenu = () => {
                               {t('topbar.button.clear.databases')}
                           </Dropdown.Item>
                           <Dropdown.Item
-                            link
                             name="about"
                             key="about"
                             onClick={() => { history.push('/about'); }}

packages/concordia-app/src/views/About/index.jsx

@@ -1,12 +1,38 @@
 import React, {
-  memo, useMemo,
+  memo, useEffect, useState,
 } from 'react';
+import ReactMarkdown from 'react-markdown';
 import { Container } from 'semantic-ui-react';
+import AboutMd from '../../assets/About.md';
 
-const About = () => useMemo(() => (
+const targetBlank = () => ({ href, children }) => (
-    <Container id="about-container" textAlign="center">
+    <a href={href} target="_blank" rel="noopener noreferrer">
-        TODO
+        {children}
-    </Container>
+    </a>
-), []);
+);
+
+const About = () => {
+  const [aboutMd, setAboutMd] = useState('');
+
+  useEffect(() => {
+    fetch(AboutMd)
+      .then((response) => response.text())
+      .then((text) => {
+        setAboutMd(text);
+      });
+  }, []);
+
+  return (
+      <Container id="about-container">
+          <ReactMarkdown
+            source={aboutMd}
+            renderers={{
+              link: targetBlank(),
+              linkReference: targetBlank(),
+            }}
+          />
+      </Container>
+  );
+};
 
 export default memo(About);