Feature/issue 617 add static pages (#618)

* get available links and their title from "Available Pages" wiki page
* create generic Page component that restrict pageId possibilities to links from the available pages and add special url /p/ using page id
* add WIKI_ROOT to .env file. We will adapt the other links later on, it is used only
* add delay and memoid from props in StaticPageLaoder and WikiStaticPage

.env

@@ -9,7 +9,12 @@ REACT_APP_TWITTER=Journal_DigHist
 REACT_APP_FACEBOOK=journalofdigitalhistory
 REACT_APP_GITHUB=https://github.com/C2DH/journal-of-digital-history
 REACT_APP_GITHUB_RELEASES_API_ENDPOINT=https://api.github.com/repos/c2dh/journal-of-digital-history/releases
+
 REACT_APP_GITHUB_WIKI_FAQ=https://raw.githubusercontent.com/wiki/c2dh/journal-of-digital-history/FAQ.md
+
+REACT_APP_WIKI_ROOT=https://raw.githubusercontent.com/wiki/c2dh/journal-of-digital-history
+REACT_APP_WIKI_AVAILABLE_PAGES=https://raw.githubusercontent.com/wiki/c2dh/journal-of-digital-history/Available-Pages.md
+
 REACT_APP_WIKI_VIDEO_RELEASES=https://raw.githubusercontent.com/wiki/c2dh/journal-of-digital-history/Video-Releases.md
 REACT_APP_WIKI_TERMS_OF_USE=https://raw.githubusercontent.com/wiki/c2dh/journal-of-digital-history/Terms-Of-Use.md
 REACT_APP_WIKI_HOMEPAGE=https://raw.githubusercontent.com/wiki/c2dh/journal-of-digital-history/Homepage.md

src/App.js

@@ -30,6 +30,7 @@ import { AcceptAnalyticsCookies, AcceptCookies } from './logic/tracking'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import Me from './components/Me'
 import WindowEvents from './components/WindowEvents'
+import Page from './pages/Page'
 
 console.info('\n   _   _ _   \n  | |_| | |_ \n  | | . |   |\n _| |___|_|_|\n|___|       \n\n')
 
@@ -173,6 +174,7 @@ function LangRoutes() {
       <Route exact path={`${path}/fingerprint`} component={Fingerprint} />
       <Route exact path={`${path}/guidelines/:notebook?`} component={Guidelines} />
       <Route exact path={`${path}/cfp/:permalink`} component={CallForPapers} />
+      <Route exact path={`${path}/p/:pageId`} component={Page} />
       <Route path={`${path}*`}>
         <NotFound path={path} />
       </Route>

src/logic/random.js

@@ -0,0 +1,11 @@
+export const randomFakeSentence = (num) => {
+  let t = '▤'
+  const characters = ' .!,◎,;▤▤ ▫▫◮◪ ◍◘◎▚▤'
+
+  const charactersLength = characters.length
+  for (let i = 0; i < num; i++) {
+    t += characters.charAt(Math.floor(Math.random() * charactersLength))
+  }
+
+  return t
+}

src/pages/Home.js

@@ -15,25 +15,14 @@ import {
 } from '../constants'
 import StaticPageLoader from './StaticPageLoader'
 import '../styles/pages/Home.scss'
+import { randomFakeSentence } from '../logic/random'
 
 const markdownParser = MarkdownIt({
   html: false,
   linkify: false,
   typographer: true,
 })
 
-const randomFakeSentence = (num) => {
-  let t = '▤'
-  const characters = ' .!,◎,;▤▤ ▫▫◮◪ ◍◘◎▚▤'
-
-  const charactersLength = characters.length
-  for (let i = 0; i < num; i++) {
-    t += characters.charAt(Math.floor(Math.random() * charactersLength))
-  }
-
-  return t
-}
-
 const Home = ({ data = '', status }) => {
   const { t } = useTranslation()
   console.debug('[Home] loaded: ', status)

src/pages/Page.css

@@ -0,0 +1,9 @@
+.Page h2:first-of-type {
+  margin-bottom: var(--spacer-5);
+}
+.Page h1 {
+  transition: opacity 0.5s ease-in-out;
+}
+.Page.loading h1 {
+  opacity: 0.5;
+}

src/pages/Page.js

@@ -0,0 +1,57 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { useGetRawContents } from '../logic/api/fetchData'
+import Loading from './Loading'
+import NotFound from './NotFound'
+import WikiStaticPage from './WikiStaticPage'
+import './Page.css'
+
+const Page = ({ match }) => {
+  const { status, data } = useGetRawContents({
+    url: process.env.REACT_APP_WIKI_AVAILABLE_PAGES,
+    delay: 500,
+  })
+
+  const { pageId } = match.params
+
+  if (status !== 'success') {
+    return <Loading />
+  }
+  const availablePages = data.split('\n').map((d) => {
+    // extract link from markdown text using a regexp
+    // [The Journal of Digital History switches to single‐blind peer review](https://github.com/C2DH/journal-of-digital-history/wiki/The-Journal-of-Digital-History-switches-to-single-blind-peer-review)
+    const title = d.match(/\[(.*?)\]/)
+    const url = d.match(/\((.*?)\)/)
+    if (!url || !title) {
+      return null
+    }
+    const wikiRawUrl = `${process.env.REACT_APP_WIKI_ROOT}/${pageId}.md`
+    return {
+      title: title[1],
+      url: url[1],
+      rawUrl: wikiRawUrl,
+      pageId: url[1].split('/').pop(),
+    }
+  })
+  console.debug('[Page]', pageId, availablePages)
+  const page = availablePages.find((d) => d.pageId === pageId)
+  if (!page) {
+    return <NotFound />
+  }
+  console.debug('[Page]', pageId, status, data)
+  return (
+    <WikiStaticPage delay={500} url={page.rawUrl} memoid={1} className="Page">
+      <h1 className="my-5">{page.title}</h1>
+    </WikiStaticPage>
+  )
+}
+
+Page.propTypes = {
+  match: PropTypes.shape({
+    params: PropTypes.shape({
+      pageId: PropTypes.string.isRequired,
+    }).isRequired,
+  }).isRequired,
+}
+
+export default Page

src/pages/StaticPageLoader.js

@@ -2,15 +2,25 @@ import React, { useEffect } from 'react'
 import { useGetJSON } from '../logic/api/fetchData'
 import { StatusSuccess, StatusFetching, StatusError } from '../constants'
 import ErrorViewer from './ErrorViewer'
+import PropTypes from 'prop-types'
 import { usePropsStore } from '../store'
 
-const StaticPageLoader = ({ url, delay = 0, Component, fakeData, raw = false, ...rest }) => {
+const StaticPageLoader = ({
+  url,
+  delay = 0,
+  Component,
+  fakeData,
+  raw = false,
+  memoid = '',
+  ...rest
+}) => {
   const setLoadingProgress = usePropsStore((state) => state.setLoadingProgress)
 
   const { data, error, status } = useGetJSON({
     url,
     delay,
     raw,
+    memoid,
     onDownloadProgress: (e) => {
       console.debug('[StaticPageLoader] onDownloadProgress url', url, e.total, e.loaded)
       if (!e.total && e.loaded > 0) {
@@ -49,4 +59,14 @@ const StaticPageLoader = ({ url, delay = 0, Component, fakeData, raw = false, ..
     </>
   )
 }
+
+StaticPageLoader.propTypes = {
+  url: PropTypes.string.isRequired,
+  delay: PropTypes.number,
+  Component: PropTypes.elementType.isRequired,
+  fakeData: PropTypes.any,
+  raw: PropTypes.bool,
+  memoid: PropTypes.string,
+}
+
 export default StaticPageLoader

src/pages/WikiStaticPage.js

@@ -12,14 +12,18 @@ const markdownParser = MarkdownIt({
   typographer: true,
 })
 
-const WikiStaticPage = ({ url = '', className = '', children }) => (
+const WikiStaticPage = ({ url = '', memoid = '', delay = 0, className = '', children }) => (
   <StaticPageLoader
     url={url}
+    memoid={memoid}
     raw
     fakeData=""
-    delay={0}
+    delay={delay}
     Component={({ data = '...', status }) => (
-      <Container className={`WikiStaticPage page ${className}`} style={{ minHeight: '100vh' }}>
+      <Container
+        className={`WikiStaticPage page ${className} ${status}`}
+        style={{ minHeight: '80vh' }}
+      >
         <Row>
           <Col {...BootstrapFullColumLayout}>{children}</Col>
         </Row>
@@ -38,6 +42,8 @@ const WikiStaticPage = ({ url = '', className = '', children }) => (
 
 WikiStaticPage.propTypes = {
   url: PropTypes.string.isRequired,
+  memoid: PropTypes.string,
+  delay: PropTypes.number,
   className: PropTypes.string,
   children: PropTypes.node,
 }