package updates, refactor remark usage

jest/jest.config.js

@@ -1,3 +1,29 @@
+const esModules = [
+  'unified',
+  'vfile',
+  'vfile-.+',
+  'unist-.+',
+  'bail',
+  'is-plain-obj',
+  'trough',
+  'mdast-util-.+',
+  'micromark',
+  'micromark-.+',
+  'parse-entities',
+  'character-entities',
+  'property-information',
+  'comma-separated-tokens',
+  'hast-.+',
+  'remark-.+',
+  'rehype-.+',
+  'space-separated-tokens',
+  'decode-named-character-reference',
+  'ccount',
+  'escape-string-regexp',
+  'markdown-table',
+  'web-namespaces'
+].join('|')
+
 module.exports = {
   rootDir: '../',
   transform: {
@@ -12,7 +38,7 @@ module.exports = {
     '^gatsby-page-utils/(.*)$': `gatsby-page-utils/dist/$1` // Workaround for https://github.com/facebook/jest/issues/9771
   },
   testPathIgnorePatterns: ['node_modules', '.cache', 'public', 'coverage'],
-  transformIgnorePatterns: ['node_modules/(?!(gatsby)/)'],
+  transformIgnorePatterns: [`node_modules/(?!(gatsby|${esModules})/)`],
   globals: {
     __PATH_PREFIX__: ''
   },

package.json

@@ -28,7 +28,7 @@
     "not op_mini all"
   ],
   "dependencies": {
-    "@ethersproject/providers": "^5.6.2",
+    "@ethersproject/providers": "^5.6.4",
     "@ethersproject/units": "^5.6.0",
     "@loadable/component": "^5.15.2",
     "@web3-react/core": "^6.1.9",
@@ -41,30 +41,30 @@
     "fast-exif": "^1.0.1",
     "feather-icons": "^4.29.0",
     "fraction.js": "^4.2.0",
-    "gatsby": "^4.11.2",
+    "gatsby": "^4.12.1",
-    "gatsby-plugin-catch-links": "^4.11.0",
+    "gatsby-plugin-catch-links": "^4.12.1",
-    "gatsby-plugin-feed": "^4.11.1",
+    "gatsby-plugin-feed": "^4.12.1",
-    "gatsby-plugin-image": "^2.11.1",
+    "gatsby-plugin-image": "^2.12.1",
     "gatsby-plugin-lunr": "^1.5.2",
-    "gatsby-plugin-manifest": "^4.11.1",
+    "gatsby-plugin-manifest": "^4.12.1",
     "gatsby-plugin-matomo": "^0.13.0",
     "gatsby-plugin-meta-redirect": "^1.1.1",
-    "gatsby-plugin-offline": "^5.11.1",
+    "gatsby-plugin-offline": "^5.12.1",
-    "gatsby-plugin-react-helmet": "^5.11.0",
+    "gatsby-plugin-react-helmet": "^5.12.1",
-    "gatsby-plugin-sharp": "^4.11.1",
+    "gatsby-plugin-sharp": "^4.12.1",
-    "gatsby-plugin-sitemap": "^5.11.1",
+    "gatsby-plugin-sitemap": "^5.12.1",
     "gatsby-plugin-svgr": "^3.0.0-beta.0",
     "gatsby-redirect-from": "^0.5.0",
-    "gatsby-remark-autolink-headers": "^5.11.1",
+    "gatsby-remark-autolink-headers": "^5.12.1",
-    "gatsby-remark-copy-linked-files": "^5.11.0",
+    "gatsby-remark-copy-linked-files": "^5.12.1",
-    "gatsby-remark-images": "^6.11.1",
+    "gatsby-remark-images": "^6.12.1",
     "gatsby-remark-images-medium-zoom": "^1.7.0",
-    "gatsby-remark-smartypants": "^5.11.0",
+    "gatsby-remark-smartypants": "^5.12.1",
     "gatsby-remark-vscode": "^3.3.1",
-    "gatsby-source-filesystem": "^4.11.1",
+    "gatsby-source-filesystem": "^4.12.1",
-    "gatsby-source-graphql": "^4.11.1",
+    "gatsby-source-graphql": "^4.12.1",
-    "gatsby-transformer-remark": "^5.11.1",
+    "gatsby-transformer-remark": "^5.12.1",
-    "gatsby-transformer-sharp": "^4.11.0",
+    "gatsby-transformer-sharp": "^4.12.1",
     "nord-visual-studio-code": "github:arcticicestudio/nord-visual-studio-code",
     "pigeon-maps": "^0.21.0",
     "pigeon-marker": "^0.3.4",
@@ -75,46 +75,48 @@
     "react-helmet": "^6.1.0",
     "react-qr-svg": "^2.4.0",
     "react-transition-group": "^4.4.2",
-    "remark": "^13.0.0",
+    "rehype-react": "^7.1.1",
-    "remark-react": "^8.0.0",
+    "remark-parse": "^10.0.1",
-    "slugify": "^1.6.5"
+    "remark-rehype": "^10.1.0",
+    "slugify": "^1.6.5",
+    "unified": "^10.1.2"
   },
   "devDependencies": {
     "@svgr/webpack": "^5.5.0",
     "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/react": "^13.0.0",
+    "@testing-library/react": "^13.1.1",
     "@types/fs-extra": "^9.0.13",
     "@types/jest": "^27.4.1",
     "@types/loadable__component": "^5.13.4",
     "@types/lunr": "^2.3.4",
-    "@types/node": "^17.0.23",
+    "@types/node": "^17.0.25",
-    "@types/react": "^18.0.1",
+    "@types/react": "^18.0.5",
-    "@types/react-dom": "^18.0.0",
+    "@types/react-dom": "^18.0.1",
     "@types/react-helmet": "^6.1.5",
     "@types/react-transition-group": "^4.4.4",
     "@types/shortid": "^0.0.29",
-    "@typescript-eslint/eslint-plugin": "^5.18.0",
+    "@typescript-eslint/eslint-plugin": "^5.20.0",
-    "@typescript-eslint/parser": "^5.18.0",
+    "@typescript-eslint/parser": "^5.20.0",
     "@welldone-software/why-did-you-render": "^7.0.1",
-    "babel-preset-gatsby": "^2.11.1",
+    "babel-preset-gatsby": "^2.12.1",
     "eslint": "^8.13.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-graphql": "^4.0.0",
     "eslint-plugin-jsx-a11y": "^6.5.1",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-react": "^7.29.4",
-    "eslint-plugin-testing-library": "^5.2.1",
+    "eslint-plugin-testing-library": "^5.3.1",
-    "fs-extra": "^10.0.1",
+    "fs-extra": "^10.1.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^27.5.1",
     "markdownlint-cli": "^0.31.1",
     "node-iptc": "^1.0.5",
     "npm-run-all": "^4.1.5",
-    "ora": "^5.4.1",
+    "ora": "^6.1.0",
     "postcss": "^8.4.12",
     "prettier": "^2.6.2",
     "shortid": "^2.2.16",
-    "stylelint": "^14.6.1",
+    "stylelint": "^14.7.1",
     "stylelint-config-css-modules": "^4.1.0",
     "stylelint-config-prettier": "^9.0.3",
     "stylelint-config-standard": "^25.0.0",

src/components/atoms/Changelog.module.css

@@ -1,10 +1,4 @@
-.title {
-  margin-top: calc(var(--spacer) * 3);
-  margin-bottom: 0;
-}
-
 .content {
-  padding-top: var(--spacer);
   padding-left: calc(var(--spacer) / 2);
   margin-left: calc(var(--spacer) / 2);
   border-left: var(--stroke-width) solid var(--border-color);

src/components/atoms/Changelog.tsx

@@ -1,8 +1,16 @@
-import React, { ReactElement } from 'react'
+import React, {
+  ReactElement,
+  useEffect,
+  useState,
+  createElement,
+  Fragment
+} from 'react'
 import { graphql, useStaticQuery } from 'gatsby'
-import remark from 'remark'
+import { unified } from 'unified'
-import remarkReact from 'remark-react'
+import remarkParse from 'remark-parse'
-import { title, content, source } from './Changelog.module.css'
+import remarkRehype from 'remark-rehype'
+import rehypeReact from 'rehype-react'
+import { content, source } from './Changelog.module.css'
 import { GitHub, GitHubRepo } from '../../@types/GitHub'
 
 export function PureChangelog({
@@ -12,6 +20,8 @@ export function PureChangelog({
   repo: string
   repos: [{ node: GitHubRepo }]
 }): ReactElement {
+  const [changelogHtml, setChangelogHtml] = useState()
+
   const repoFilteredArray = repos
     .map(({ node }: { node: GitHubRepo }) => {
       if (node.name === repo) return node
@@ -19,32 +29,33 @@ export function PureChangelog({
     .filter((n: any) => n)
 
   const repoMatch = repoFilteredArray[0]
-  if (!repoMatch) return null
 
-  const { object, url, owner } = repoMatch
+  useEffect(() => {
+    if (!repoMatch?.object?.text) return
 
-  const changelogHtml =
+    async function init() {
-    object && remark().use(remarkReact).processSync(object.text).result
+      const changelogHtml = await unified()
+        .use(remarkParse)
+        .use(remarkRehype)
+        .use(rehypeReact, { createElement, Fragment })
+        .processSync(repoMatch.object.text).result
 
-  const filePathUrl = `${url}/tree/main/CHANGELOG.md`
+      setChangelogHtml(changelogHtml)
-  const filePathDisplay = `${owner.login}/${repo}:CHANGELOG.md`
+    }
+    init()
+  }, [repoMatch?.object?.text])
 
-  return (
+  return repoMatch ? (
-    <>
+    <div className={content} id="changelog">
-      <h2 className={title} id="changelog">
+      {changelogHtml}
-        Changelog
+      <p className={source}>
-      </h2>
+        sourced from{' '}
-      <div className={content}>
+        <a href={`${repoMatch?.url}/tree/main/CHANGELOG.md`}>
-        {changelogHtml}
+          <code>{`${repoMatch?.owner.login}/${repo}:CHANGELOG.md`}</code>
-        <p className={source}>
+        </a>
-          sourced from{' '}
+      </p>
-          <a href={filePathUrl}>
+    </div>
-            <code>{filePathDisplay}</code>
+  ) : null
-          </a>
-        </p>
-      </div>
-    </>
-  )
 }
 
 const queryGithub = graphql`