v3.0.0

v3.0.0

.env

@@ -5,3 +5,5 @@ REACT_APP_PROXY=http://localhost
 REACT_APP_API_TIMEOUT=180000
 REACT_APP_TAG_EDITORIAL=editorial
 REACT_APP_ENABLE_AUTH_0=false
+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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "jdh",
-  "version": "2.2.9",
+  "version": "3.0.0",
   "private": true,
   "dependencies": {
     "@auth0/auth0-react": "^1.1.0",
@@ -32,7 +32,7 @@
     "lodash.findindex": "^4.6.0",
     "lodash.groupby": "^4.6.0",
     "lodash.intersection": "^4.4.0",
-    "markdown-it": "^12.0.0",
+    "markdown-it": "^12.3.2",
     "markdown-it-mathjax3": "^3.0.0-0",
     "markdown-it-replace-link": "^1.1.0",
     "mathjax": "^3.2.0",

src/App.js

@@ -67,6 +67,11 @@ const Guidelines = lazy(() => import('./pages/Guidelines'))
 const NotFound = lazy(() => import('./pages/NotFound'))
 const ArticleViewer = lazy(() => import('./pages/ArticleViewer'))
 const Fingerprint = lazy(() => import('./pages/Fingerprint'))
+const FingerprintViewer = lazy(() => import('./pages/FingerprintViewer'))
+const FingerprintExplained = lazy(() => import ('./pages/FingerprintExplained'))
+const ReleaseNotes = lazy(() => import ('./pages/ReleaseNotes'))
+const Faq = lazy(() => import ('./pages/Faq'))
+
 const { startLangShort, lang } = getStartLang()
 console.info('start language:', lang, startLangShort)
 i18n
@@ -123,6 +128,10 @@ function LangRoutes() {
       <Route path={`${path}/notebook-viewer-form`}>
         <NotebookViewerForm />
       </Route>
+      <Route path={`${path}/fingerprint-viewer`} component={FingerprintViewer} />
+      <Route path={`${path}/fingerprint-explained`} component={FingerprintExplained} />
+      <Route path={`${path}/release-notes`} component={ReleaseNotes} />
+      <Route path={`${path}/faq`} component={Faq} />
       <Route path={`${path}/notebook-viewer/:encodedUrl`}
         component={NotebookViewer}
       />
@@ -206,7 +215,7 @@ export default function App() {
             <AppRoutes />
           </Suspense>
         </main>
-        <Footer ></Footer>
+        <Footer hideOnRoutes={['/article/', '/notebook-viewer/']}/>
         <ScrollToTop />
       </Auth0ProviderWithHistory>
       </QueryParamProvider>

src/components/Article/ArticleBibliography.js

@@ -1,15 +1,24 @@
 import React from 'react'
-import {Container, Col, Row} from 'react-bootstrap'
+import { Container, Col, Row } from 'react-bootstrap'
 import { useTranslation } from 'react-i18next'
+import { BootstrapColumLayout } from '../../constants'
 
-const ArticleBilbiography = ({ articleTree }) => {
+
+const ArticleBilbiography = ({
+  articleTree,
+  noAnchor=false,
+  className='mt-5'
+}) => {
   const { t } = useTranslation()
 
   return (
-    <Container  className="ArticleBilbiography mt-5">
+    <Container className={`ArticleBilbiography ${className}`}>
       <Row>
-        <Col md={{ span: 7, offset: 2 }}>
-          <div id="bibliography" className="anchor" />
+        <Col {...BootstrapColumLayout}>
+          {noAnchor
+            ? null
+            : <div id="bibliography" className="anchor" />
+          }
           <h2 >{t('bibliography')}</h2>
           <div dangerouslySetInnerHTML={{
             __html: articleTree

src/components/Article/ArticleCell.js

@@ -1,6 +1,6 @@
 import React, { lazy } from 'react';
 import { Container, Row, Col} from 'react-bootstrap'
-import ArticleCellOutput from './ArticleCellOutput'
+import ArticleCellOutputs from './ArticleCellOutputs'
 import ArticleCellContent from './ArticleCellContent'
 import ArticleCellSourceCode from './ArticleCellSourceCode'
 import ArticleCellFigure from './ArticleCellFigure'
@@ -25,6 +25,8 @@ const ArticleCell = ({
   isNarrativeStep,
   figure, // ArticleFigure instance
   headingLevel=0, // if isHeading, set this to its ArticleHeading.level value
+  isJavascriptTrusted = false,
+  onNumClick,
 }) => {
   let cellBootstrapColumnLayout = metadata.jdh?.text?.bootstrapColumLayout || BootstrapColumLayout;
   // we override or set the former layout if it appears in narrative-step
@@ -71,7 +73,14 @@ const ArticleCell = ({
       <Container >
         <Row>
           <Col className="ArticleCellQuote" {...BootstrapQuoteColumLayout}>
-            <ArticleCellContent layer={layer} content={content} idx={idx} num={num} hideNum={hideNum} />
+            <ArticleCellContent
+              onNumClick={onNumClick}
+              layer={layer}
+              content={content}
+              idx={idx}
+              num={num}
+              hideNum={hideNum}
+            />
           </Col>
         </Row>
       </Container>
@@ -85,17 +94,32 @@ const ArticleCell = ({
           metadata={metadata}
           figure={figure}
           figureColumnLayout={cellObjectBootstrapColumnLayout}
+          isJavascriptTrusted={isJavascriptTrusted}
           isNarrativeStep={isNarrativeStep}
         >
-          <ArticleCellContent hideNum={!!figure} layer={layer} content={content} idx={idx} num={num} />
+          <ArticleCellContent
+            onNumClick={onNumClick}
+            layer={layer}
+            content={content}
+            idx={idx}
+            num={num}
+          />
         </ArticleCellFigure>
       )
     }
     return (
       <Container>
         <Row>
           <Col {... cellBootstrapColumnLayout}>
-            <ArticleCellContent headingLevel={headingLevel} hideNum={hideNum} layer={layer} content={content} idx={idx} num={num} />
+            <ArticleCellContent
+              headingLevel={headingLevel}
+              onNumClick={onNumClick}
+              hideNum={hideNum}
+              layer={layer}
+              content={content}
+              idx={idx}
+              num={num}
+            />
           </Col>
         </Row>
       </Container>
@@ -110,21 +134,24 @@ const ArticleCell = ({
           figure={figure}
           isNarrativeStep={isNarrativeStep}
           figureColumnLayout={cellObjectBootstrapColumnLayout}
+          isJavascriptTrusted={isJavascriptTrusted}
           sourceCode={<ArticleCellSourceCode toggleVisibility content={content} language="python"/>}
         ></ArticleCellFigure>
       )
     }
+
     return (
       <Container>
         <Row>
           <Col {... cellBootstrapColumnLayout}>
             <div className="ArticleCellContent">
               <div className="ArticleCellContent_num"></div>
               <ArticleCellSourceCode visible content={content} language="python" />
-              {outputs.length
-                ? outputs.map((output,i) => <ArticleCellOutput output={output} key={i} />)
-                : <div className="ArticleCellSourceCode_no_output">no output</div>
-              }
+              <ArticleCellOutputs
+                isJavascriptTrusted={false}
+                cellIdx={idx}
+                outputs={outputs}
+              />
             </div>
           </Col>
         </Row>

src/components/Article/ArticleCellContent.js

@@ -1,11 +1,34 @@
 import React from 'react'
 
 
-const ArticleCellContent = ({ idx, className='', content, num, hideNum=false, hideIdx=true, headingLevel=0}) => {
+const ArticleCellContent = ({
+  idx, className='',
+  content,
+  num,
+  layer,
+  hideNum=false,
+  hideIdx=true,
+  headingLevel=0,
+  onNumClick,
+}) => {
+  const numClassNames = [
+    headingLevel > 0 ? `level_H${headingLevel}`: '',
+    typeof onNumClick === 'function'? 'selectable': ''
+  ].join(' ')
+  const onClickHandler = (e) => {
+    if (typeof onNumClick === 'function') {
+      onNumClick(e, { idx, layer })
+    }
+  }
   return (
     <div className={`ArticleCellContent ${className}`}>
       {!hideIdx && (<div className="ArticleCellContent_idx">{idx}</div>)}
-      {!hideNum && (<div className={`ArticleCellContent_num ${headingLevel > 0? `level_H${headingLevel}`:''}`}>{num}</div>)}
+      {!hideNum && (
+        <div className={`ArticleCellContent_num ${numClassNames}`} onClick={onClickHandler}
+        >
+          {num}
+        </div>
+      )}
       <div dangerouslySetInnerHTML={{__html: content}}></div>
     </div>
   )

src/components/Article/ArticleCellFigure.js

@@ -1,14 +1,18 @@
 import React from 'react'
-import ArticleCellOutput from './ArticleCellOutput'
+import ArticleCellOutputs from './ArticleCellOutputs'
 import ArticleFigure from './ArticleFigure'
 import { markdownParser } from '../../logic/ipynb'
 import {BootstrapColumLayout} from '../../constants'
 import { Container, Row, Col} from 'react-bootstrap'
 
-const ArticleCellFigure = ({ figure, metadata={}, outputs=[], sourceCode, figureColumnLayout, children }) => {
+const ArticleCellFigure = ({
+  figure, metadata={}, outputs=[], sourceCode,
+  isJavascriptTrusted,
+  figureColumnLayout,
+  children
+}) => {
   const isFluidContainer = figure.isCover || (metadata.tags && metadata.tags.includes('full-width'))
   const captions = outputs.reduce((acc, output) => {
-
     if (output.metadata && Array.isArray(output.metadata?.jdh?.object?.source)) {
       acc.push(markdownParser.render(output.metadata.jdh.object.source.join('\n')))
     }
@@ -29,20 +33,21 @@ const ArticleCellFigure = ({ figure, metadata={}, outputs=[], sourceCode, figure
   if (metadata.jdh?.object?.bootstrapColumLayout) {
     figureColumnLayout = { ...figureColumnLayout, ...metadata.jdh?.object?.bootstrapColumLayout }
   }
+
+
   return (
-    <div className="ArticleCellFigure">
+    <div className="ArticleCellFigure" >
     <Container fluid={isFluidContainer}>
       <Row>
         <Col {...columnLayout}>
-          <div >
+          <div>
             <div className="anchor" id={figure.ref} />
-          {!outputs.length ? (
-            <div className="ArticleCellFigure_no_output">
-            </div>
-          ): null}
-          {outputs.map((output,i) => (
-            <ArticleCellOutput hideLabel output={output} key={i} />
-          ))}
+            <ArticleCellOutputs
+              hideLabel
+              isJavascriptTrusted={isJavascriptTrusted}
+              cellIdx={figure.idx}
+              outputs={outputs}
+            />
           </div>
           {children}
         </Col>

src/components/Article/ArticleCellOutput.js

@@ -1,16 +1,17 @@
 import React from 'react'
 import { useTranslation } from 'react-i18next'
 import {markdownParser} from '../../logic/ipynb'
+import ArticleCellOutputPlugin from './ArticleCellOutputPlugin'
+
 const getOutput = (output) => {
   return Array.isArray(output)
     ? output.join(' ')
     : output
 }
 
-const ArticleCellOutput = ({ output, height, width, hideLabel=false }) => {
+const ArticleCellOutput = ({ output, height, width, hideLabel=false, isJavascriptTrusted=false, cellIdx=-1 }) => {
   const outputTypeClassName= `ArticleCellOutput_${output.output_type}`
   const { t } = useTranslation()
-
   const style = !isNaN(width) && !isNaN(height) ? {
     // constrain output to this size. used for images.
     width,
@@ -25,9 +26,22 @@ const ArticleCellOutput = ({ output, height, width, hideLabel=false }) => {
     )
   }
   if (['execute_result', 'display_data'].includes(output.output_type) && output.data['text/html']) {
-    return (<div className={`ArticleCellOutput withHTML mb-3 ${outputTypeClassName}`} style={style} dangerouslySetInnerHTML={{
-      __html: getOutput(output.data['text/html'])
-    }} />)
+    if (isJavascriptTrusted) { // use DOM directly to handle this
+      return (
+        <ArticleCellOutputPlugin
+          cellIdx={cellIdx}
+          trustedInnerHTML={getOutput(output.data['text/html'])}
+        />
+      )
+    }
+    return (
+      <div className={`ArticleCellOutput withHTML mb-3 ${outputTypeClassName}`}
+        style={style}
+        dangerouslySetInnerHTML={{
+        __html: getOutput(output.data['text/html'])
+        }}
+      />
+    )
   }
 
   return (

src/components/Article/ArticleCellOutputPlugin.js

@@ -0,0 +1,26 @@
+import React from 'react'
+
+class ArticleCellOutputPlugin extends React.Component {
+  constructor(props) {
+    super(props)
+    console.info('ArticleCellOutputPlugin created for cell idx:', props.cellIdx)
+  }
+
+  componentDidMount() {
+    console.info('ArticleCellOutputPlugin @componentDidMount for cell idx:', this.props.cellIdx)
+    this.el.innerHTML = this.props.trustedInnerHTML
+  }
+
+  componentDidUpdate(prevProps) {
+    console.info('ArticleCellOutputPlugin @componentDidUpdate for cell idx:', this.props.cellIdx)
+    if (prevProps.trustedInnerHTML !== this.props.trustedInnerHTML) {
+      console.info('ArticleCellOutputPlugin changed.', prevProps.trustedInnerHTML)
+    }
+  }
+
+  render() {
+    return <div className="ArticleCellOutputPlugin" ref={el => this.el = el} />;
+  }
+}
+
+export default ArticleCellOutputPlugin