Add the ability to create pages for an md file

config-overrides.js

@@ -22,12 +22,8 @@ module.exports = function override(config) {
                     to: 'pdf.worker.js.map',
                 },
                 {
-                    from: 'src/static/ABOUT.md',
-                    to: 'ABOUT.md',
-                },
-                {
-                    from: 'src/static/PRIVACY_POLICY.md',
-                    to: 'PRIVACY_POLICY.md',
+                    from: 'src/static',
+                    to: './',
                 },
             ],
         })

src/common/components/AppPages.js

@@ -19,8 +19,13 @@ export default {
             return `/jobs/${id}/result-details`;
         },
     },
-    ABOUT: '/about',
-    PRIVACY_POLICY: '/privacy-policy',
+    MARKED: {
+        // [fileName]: pathName
+        ABOUT: '/about',
+        PRIVACY_POLICY: '/privacy-policy',
+        'wiki_WCAG2.2_human': '/wcag-2-2-human',
+        'wiki_WCAG2.2_machine': '/wcag-2-2-machine',
+    },
     LOADING: '/loading',
     NOT_FOUND: '/404',
 };

src/common/components/AppRouter.js

@@ -2,8 +2,7 @@ import React from 'react';
 import { Redirect, Route, Switch } from 'react-router-dom';
 
 import Upload from './layouts/pages/upload/Upload';
-import About from './layouts/pages/about/About';
-import PrivacyPolicy from './layouts/pages/privacyPolicy/PrivacyPolicy';
+import MarkdownPage from './layouts/pages/markdownPage/MarkdownPage';
 import Settings from './layouts/pages/settings/Settings';
 import JobStatus from './layouts/pages/status/JobStatus';
 import Results from './layouts/pages/results/Results';
@@ -18,8 +17,11 @@ function AppRouter() {
             <Route exact path={AppPages.SETTINGS} component={Settings} />
             <Route path={AppPages.STATUS.route} component={JobStatus} />
             <Route path={AppPages.RESULTS.route} component={Results} />
-            <Route exact path={AppPages.ABOUT} component={About} />
-            <Route exact path={AppPages.PRIVACY_POLICY} component={PrivacyPolicy} />
+            {Object.keys(AppPages.MARKED).map(page => (
+                <Route key={page} exact path={AppPages.MARKED[page]}>
+                    <MarkdownPage fileName={page} />
+                </Route>
+            ))}
             <Route exact path={AppPages.NOT_FOUND} component={NotFound} />
             <Route exact path={AppPages.INSPECT.route} component={Inspect} />
             <Redirect to={AppPages.UPLOAD} />

src/common/components/layouts/header/Header.js

@@ -22,11 +22,10 @@ function Header() {
             </section>
             <section className="app-header__right">
                 <Link
-                    to={AppPages.ABOUT}
+                    to={AppPages.MARKED.ABOUT}
                     target="_blank"
                     className={classNames('app-link', 'about-link', {
-                        'app-link_hidden':
-                            location.pathname === AppPages.ABOUT || location.pathname === AppPages.PRIVACY_POLICY,
+                        'app-link_hidden': Object.values(AppPages.MARKED).includes(location.pathname),
                     })}
                 >
                     <HelpOutline />

src/common/components/layouts/pages/about/About.js → src/common/components/layouts/pages/markdownPage/MarkdownPage.js

@@ -1,23 +1,23 @@
 import React, { useEffect, useState } from 'react';
 import { marked } from 'marked';
 
-import './About.scss';
+import './MarkdownPage.scss';
 
-function About() {
+function MarkdownPage({ fileName }) {
     const [content, setContent] = useState('');
     useEffect(() => {
         const fetchFile = async () => {
-            const file = await fetch(process.env.PUBLIC_URL + '/ABOUT.md');
+            const file = await fetch(process.env.PUBLIC_URL + `/${fileName}.md`);
             const content = await file.text();
             setContent(marked(content));
         };
         fetchFile().catch(console.error);
-    }, []);
+    }, [fileName]);
     return (
-        <section className="about">
+        <section className="markdown">
             <div dangerouslySetInnerHTML={{ __html: content }} />
         </section>
     );
 }
 
-export default About;
+export default MarkdownPage;

src/common/components/layouts/pages/about/About.scss → src/common/components/layouts/pages/markdownPage/MarkdownPage.scss

@@ -1,4 +1,4 @@
-.about {
+.markdown {
   padding: 0 20px;
 
   a {

src/common/services/fileService.js

@@ -5,7 +5,8 @@ import AppPages from '../components/AppPages';
 
 const { REACT_APP_API_ROOT, PUBLIC_URL } = process.env;
 
-const STATIC_PAGES = ['', AppPages.UPLOAD, AppPages.ABOUT, AppPages.PRIVACY_POLICY, AppPages.NOT_FOUND].map(
+const STATIC_MARKED_PAGES = Object.values(AppPages.MARKED);
+const STATIC_PAGES = ['', AppPages.UPLOAD, AppPages.NOT_FOUND, ...STATIC_MARKED_PAGES].map(
     pageURL => `${PUBLIC_URL}${pageURL}`
 );