v5.0.0

C2DH · Oct 22, 2024 · 5faa1a0 · 5faa1a0
2 parents 9dbeb85 + dcb6fdd
commit 5faa1a0
Show file tree

Hide file tree

Showing 83 changed files with 3,714 additions and 491 deletions.
diff --git a/.env b/.env
@@ -14,6 +14,9 @@ REACT_APP_THEBE_BINDER_URL=https://mybinder.org
 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_ENABLE_CODE_EXPLAINER=false
+REACT_APP_ENABLE_CODE_EXPLAINER_PROXY=http://localhost:5000
+
 REACT_APP_GITHUB_WIKI_FAQ=/proxy-githubusercontent/wiki/c2dh/journal-of-digital-history/FAQ.md
 
 REACT_APP_WIKI_ROOT=/proxy-githubusercontent/wiki/c2dh/journal-of-digital-history

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "jdh",
-  "version": "4.6.3",
+  "version": "5.0.0",
   "private": true,
   "dependencies": {
     "@auth0/auth0-react": "^1.1.0",
@@ -36,7 +36,7 @@
     "i18next": "^19.8.4",
     "i18next-browser-languagedetector": "^7.0.1",
     "i18next-http-backend": "^2.1.1",
-    "iconoir-react": "^6.11.0",
+    "iconoir-react": "^7.7.0",
     "jsonschema": "^1.3.0",
     "lodash.find": "^4.6.0",
     "lodash.findindex": "^4.6.0",

diff --git a/public/_redirects b/public/_redirects
@@ -1,3 +1,4 @@
 /proxy-githubusercontent/*  https://raw.githubusercontent.com/:splat  200
+/api/explain  https://journal-of-digital-history-code-explainer.fly.dev/explain 200
 /api/*  https://journalofdigitalhistory.org/api/:splat  200
 /*  /index.html  200
diff --git a/public/img/issues/social-media/jdh004-jdh005.png b/public/img/issues/social-media/jdh004-jdh005.png
diff --git a/public/index.html b/public/index.html
@@ -1,23 +1,21 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <link rel="schema.DCTERMS" href="https://purl.org/dc/terms/" />
-    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta
-      data-react-helmet="true"
-      name="description"
-      content="Write (Digital) History! The Journal of Digital History is an international, academic, peer-reviewed and open access journal with multi-layered articles"
-    />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
+
+<head>
+  <meta charset="utf-8" />
+  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+  <link rel="schema.DCTERMS" href="https://purl.org/dc/terms/" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
+  <meta name="theme-color" content="#000000" />
+  <meta data-react-helmet="true" name="description"
+    content="Write (Digital) History! The Journal of Digital History is an international, academic, peer-reviewed and open access journal with multi-layered articles" />
+  <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+  <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
+  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+  <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
       Only files inside the `public` folder can be referenced from the HTML.
@@ -26,51 +24,35 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title data-react-helmet="true">Journal of Digital History</title>
-    <meta property="og:title" content="Journal of Digital History" data-react-helmet="true" />
-    <meta
-      property="og:description"
-      content="The Journal of Digital History (JDH) is an international, academic, peer-reviewed and open-access journal. JDH will set new standards in history publishing based on the principle of multi-layered articles."
-      data-react-helmet="true"
-    />
-    <meta property="og:site_name" content="Journal of Digital History" data-react-helmet="true" />
-    <meta property="og:type" content="website" data-react-helmet="true" />
-    <meta
-      property="og:image"
-      content="https://journalofdigitalhistory.org/img/issues/social-media/jdh003.png"
-      data-react-helmet="true"
-    />
-    <meta property="og:url" content="%REACT_APP_BASEURL%" data-react-helmet="true" />
-    <meta name="twitter:card" content="summary" data-react-helmet="true" />
-    <meta name="twitter:site" content="@Journal_DigHist" data-react-helmet="true" />
-    <meta name="twitter:title" content="Journal of Digital History" data-react-helmet="true" />
-    <meta
-      name="twitter:description"
-      content="The Journal of Digital History (JDH) is an international, academic, peer-reviewed and open-access journal. JDH will set new standards in history publishing based on the principle of multi-layered articles."
-      data-react-helmet="true"
-    />
-    <meta
-      name="twitter:image"
-      content="https://journalofdigitalhistory.org/img/issues/social-media/jdh003.png"
-      data-react-helmet="true"
-    />
-    <link
-      rel="stylesheet"
-      type="text/css"
-      charset="UTF-8"
-      href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css"
-    />
-    <link
-      rel="stylesheet"
-      type="text/css"
-      href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css"
-    />
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.10/require.min.js"></script>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-    <!--
+  <title data-react-helmet="true">Journal of Digital History</title>
+  <meta property="og:title" content="Journal of Digital History" data-react-helmet="true" />
+  <meta property="og:description"
+    content="The Journal of Digital History (JDH) is an international, academic, peer-reviewed and open-access journal. JDH will set new standards in history publishing based on the principle of multi-layered articles."
+    data-react-helmet="true" />
+  <meta property="og:site_name" content="Journal of Digital History" data-react-helmet="true" />
+  <meta property="og:type" content="website" data-react-helmet="true" />
+  <meta property="og:image" content="https://journalofdigitalhistory.org/img/issues/social-media/jdh004-jdh005.png"
+    data-react-helmet="true" />
+  <meta property="og:url" content="%REACT_APP_BASEURL%" data-react-helmet="true" />
+  <meta name="twitter:card" content="summary" data-react-helmet="true" />
+  <meta name="twitter:site" content="@Journal_DigHist" data-react-helmet="true" />
+  <meta name="twitter:title" content="Journal of Digital History" data-react-helmet="true" />
+  <meta name="twitter:description"
+    content="The Journal of Digital History (JDH) is an international, academic, peer-reviewed and open-access journal. JDH will set new standards in history publishing based on the principle of multi-layered articles."
+    data-react-helmet="true" />
+  <meta name="twitter:image" content="https://journalofdigitalhistory.org/img/issues/social-media/jdh004-jdh005.png"
+    data-react-helmet="true" />
+  <link rel="stylesheet" type="text/css" charset="UTF-8"
+    href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" />
+  <link rel="stylesheet" type="text/css"
+    href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css" />
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.10/require.min.js"></script>
+</head>
+
+<body>
+  <noscript>You need to enable JavaScript to run this app.</noscript>
+  <div id="root"></div>
+  <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
 
@@ -80,5 +62,6 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
-  </body>
-</html>
+</body>
+
+</html>
diff --git a/src/components/Article/ArticleCellJavascriptOutputs.js b/src/components/Article/ArticleCellJavascriptOutputs.js
@@ -20,13 +20,14 @@ const ArticleCellJavascriptOutputs = ({
           } else if (typeof output.data['application/javascript'] === 'string') {
             // sometimes output.data['application/javascript'] is not an array...
             return acc.concat([output.data['application/javascript']])
-          } else if (Array.isArray(output.data['text/html'])) {
+          } else if (Array.isArray(output.data['text/html']) || typeof output.data['text/html'] === 'string') {
             // view if there are any candidate
-
-            if (output.data['text/html'].some((d) => d.indexOf('/script>') !== -1)) {
+            const outputData = Array.isArray(output.data['text/html']) ? output.data['text/html']
+              : output.data['text/html'].split('\n'); 
+            if (outputData.some((d) => d.indexOf('/script>') !== -1)) {
               // we should alert somehow.
               // eslint-disable-next-line
-              const htmlScript = output.data['text/html']
+              const htmlScript = outputData
                 .join('')
                 .match(/\x3Cscript[^>]*>([\s\S]*?)\x3C\/script>/m)
               if (htmlScript) {

diff --git a/src/components/Article/ArticleFigureCaption.js b/src/components/Article/ArticleFigureCaption.js
@@ -9,8 +9,8 @@ const ArticleFigureCaption = ({ figure, className = '', children }) => {
   const [, set] = useQueryParam(DisplayLayerCellIdxQueryParam, NumberParam)
   // figure number, for translation label.
   return (
-    <figcaption className={`ArticleFigure position-relative ${className}`}>
-      <div className="ArticleFigure__figcaption_num">
+    <figcaption className={`ArticleFigureCaption position-relative ${className}`}>
+      <div className="ArticleFigureCaption__figcaption_num">
         {figure.ref ? (
           <button onClick={() => set(figure.idx)} className="btn btn-link mr-2">
             {t(figure.tNLabel, { n: figure.tNum })}

diff --git a/src/components/Article/ArticleFigureCaption.scss b/src/components/Article/ArticleFigureCaption.scss
@@ -1,19 +1,20 @@
-.ArticleFigure {
+.ArticleFigureCaption {
   min-height: 50px;
-  margin-top: var(--spacer-3);
+  padding: var(--spacer-2);
+  margin: 0;
 }
 
-.ArticleFigure__figcaption_num {
+.ArticleFigureCaption__figcaption_num {
   position: absolute;
   left: -140px;
   width: 140px;
   text-align: right;
-  padding-right: var(--spacer-3);
+  padding-right: var(--spacer-4);
   font-family: var(--font-family-monospace);
   font-weight: bold;
 }
 
-.ArticleFigure button.btn-link {
+.ArticleFigureCaption button.btn-link {
   color: #000;
   border-radius: 0;
   font-size: inherit;

diff --git a/src/components/ArticleV3/Article.css b/src/components/ArticleV3/Article.css
@@ -0,0 +1,12 @@
+.Article .ArticleCell .data {
+  background: transparent;
+}
+
+.ArticleV3 .ArticleStream_paragraph {
+  margin: 0;
+}
+
+.ArticleV3 .Article_paragraphWrapper .ArticleCell .container .row > * {
+  padding-top: var(--spacer-2);
+  padding-bottom: var(--spacer-2);
+}