build: remove deprecated package frontmatter-markdown-loader (#831)

client/config/webpack.config.dev.js

@@ -59,8 +59,7 @@ module.exports = {
       },
       {
         test: /\.md$/,
-        loader: 'frontmatter-markdown-loader',
+        loader: 'raw-loader',
-        options: {mode: ['react-component']},
       },
       {
         test: [/\.woff2$/],

client/config/webpack.config.prod.js

@@ -79,8 +79,7 @@ module.exports = {
       },
       {
         test: /\.md$/,
-        loader: 'frontmatter-markdown-loader',
+        loader: 'raw-loader',
-        options: {mode: ['react-component']},
       },
       {
         test: [/\.woff2$/],

client/src/javascript/components/modals/settings-modal/AboutTab.tsx

@@ -1,34 +1,25 @@
-import {ComponentType, FC, lazy, Suspense} from 'react';
+import {FC, Suspense} from 'react';
+
+import Markdown from 'react-markdown';
 
 import packageJSON from '../../../../../../package.json';
 
-const AboutMarkdown = lazy<ComponentType<{FloodVersion: unknown; CommitBadge: unknown}>>(() =>
+import AboutMarkdown from '../../../../ABOUT.md';
-  import(/* webpackChunkName: 'about' */ '../../../../ABOUT.md').then((module) => ({default: module.react})),
-);
 
 const FLOOD_PROJECT_URL = 'https://github.com/jesec/flood';
 
+const versioned = AboutMarkdown.replaceAll('<FloodVersion />', packageJSON.version).replaceAll(
+  '<CommitBadge />',
+  packageJSON.version.length > 8
+    ? // If user is on a rolling build, display latest version of rolling build.
+      `![${FLOOD_PROJECT_URL}]("https://img.shields.io/npm/v/@jesec/flood?label=HEAD" "Latest version of rolling build")`
+    : // If user is on a released build, display commits to project made since user's version.
+      `![${FLOOD_PROJECT_URL}](https://img.shields.io/github/commits-since/jesec/flood/v${packageJSON.version} "Commits since user's version")`,
+);
+
 const AboutTab: FC = () => (
   <Suspense fallback={null}>
-    <AboutMarkdown
+    <Markdown>{versioned}</Markdown>
-      FloodVersion={() => packageJSON.version}
-      CommitBadge={() =>
-        packageJSON.version.length > 8 ? (
-          // If user is on a rolling build, display latest version of rolling build.
-          <a href={FLOOD_PROJECT_URL}>
-            <img alt="Latest version of rolling build" src="https://img.shields.io/npm/v/@jesec/flood?label=HEAD" />
-          </a>
-        ) : (
-          // If user is on a released build, display commits to project made since user's version.
-          <a href={FLOOD_PROJECT_URL}>
-            <img
-              alt="Commits since user's version"
-              src={`https://img.shields.io/github/commits-since/jesec/flood/v${packageJSON.version}`}
-            />
-          </a>
-        )
-      }
-    />
   </Suspense>
 );
 

client/src/javascript/typings.d.ts

@@ -1,6 +1,5 @@
 declare module '*.md' {
-  export const react: any;
+  const value: string;
-  const value: any;
   export default value;
 }
 

package.json

@@ -156,7 +156,6 @@
     "feedsub": "^0.7.8",
     "file-loader": "^6.2.0",
     "form-data": "^4.0.0",
-    "frontmatter-markdown-loader": "^3.7.0",
     "fs-extra": "^10.1.0",
     "get-user-locale": "^1.5.1",
     "hash-wasm": "^4.9.0",
@@ -183,10 +182,12 @@
     "postcss": "^8.4.24",
     "postcss-loader": "^7.3.3",
     "prettier": "^2.8.8",
+    "raw-loader": "^4.0.2",
     "react": "^18.2.0",
     "react-dev-utils": "^12.0.1",
     "react-dom": "^18.2.0",
     "react-dropzone": "^14.2.3",
+    "react-markdown": "^9.0.1",
     "react-measure": "^2.5.2",
     "react-refresh": "^0.14.0",
     "react-router": "^6.26.0",