refactor: changelog use markdown

package.json

@@ -26,6 +26,7 @@
     "embla-carousel-react": "8.1.3",
     "fast-blurhash": "^1.1.2",
     "image-conversion": "^2.1.1",
+    "markdown-to-jsx": "^7.4.7",
     "react": "^18.3.1",
     "react-best-gradient-color-picker": "^3.0.7",
     "react-clock": "5.0.0",
@@ -39,6 +40,7 @@
     "@commitlint/cli": "^19.3.0",
     "@commitlint/config-conventional": "^19.2.2",
     "@eartharoid/deep-merge": "^0.0.2",
+    "@tailwindcss/typography": "^0.5.13",
     "@vitejs/plugin-react-swc": "^3.6.0",
     "adm-zip": "^0.5.13",
     "autoprefixer": "^10.4.19",

pnpm-lock.yaml

@@ -53,6 +53,9 @@ importers:
       image-conversion:
         specifier: ^2.1.1
         version: 2.1.1
+      markdown-to-jsx:
+        specifier: ^7.4.7
+        version: 7.4.7(react@18.3.1)
       react:
         specifier: ^18.3.1
         version: 18.3.1
@@ -87,6 +90,9 @@ importers:
       '@eartharoid/deep-merge':
         specifier: ^0.0.2
         version: 0.0.2
+      '@tailwindcss/typography':
+        specifier: ^0.5.13
+        version: 0.5.13(tailwindcss@3.4.3)
       '@vitejs/plugin-react-swc':
         specifier: ^3.6.0
         version: 3.7.0(@swc/helpers@0.5.11)(vite@5.2.12(@types/node@20.12.13)(sass@1.77.4))
@@ -1580,6 +1586,11 @@ packages:
   '@swc/types@0.1.7':
     resolution: {integrity: sha512-scHWahbHF0eyj3JsxG9CFJgFdFNaVQCNAimBlT6PzS3n/HptxqREjsm4OH6AN3lYcffZYSPxXW8ua2BEHp0lJQ==}
 
+  '@tailwindcss/typography@0.5.13':
+    resolution: {integrity: sha512-ADGcJ8dX21dVVHIwTRgzrcunY6YY9uSlAHHGVKvkA+vLc5qLwEszvKts40lx7z0qc4clpjclwLeK5rVCV2P/uw==}
+    peerDependencies:
+      tailwindcss: '>=3.0.0 || insiders'
+
   '@tanstack/react-virtual@3.5.0':
     resolution: {integrity: sha512-rtvo7KwuIvqK9zb0VZ5IL7fiJAEnG+0EiFZz8FUOs+2mhGqdGmjKIaT1XU7Zq0eFqL0jonLlhbayJI/J2SA/Bw==}
     peerDependencies:
@@ -2813,6 +2824,9 @@ packages:
   lodash.camelcase@4.3.0:
     resolution: {integrity: sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA==}
 
+  lodash.castarray@4.4.0:
+    resolution: {integrity: sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==}
+
   lodash.debounce@4.0.8:
     resolution: {integrity: sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==}
 
@@ -2864,6 +2878,12 @@ packages:
     resolution: {integrity: sha512-bJzx6nMoP6PDLPBFmg7+xRKeFZvFboMrGlxmNj9ClvX53KrmvM5bXFXEWjbz4cz1AFn+jWJ9z/DJSz7hrs0w3w==}
     engines: {node: '>=6'}
 
+  markdown-to-jsx@7.4.7:
+    resolution: {integrity: sha512-0+ls1IQZdU6cwM1yu0ZjjiVWYtkbExSyUIFU2ZeDIFuZM1W42Mh4OlJ4nb4apX4H8smxDHRdFaoIVJGwfv5hkg==}
+    engines: {node: '>= 10'}
+    peerDependencies:
+      react: '>= 0.14.0'
+
   mathml-tag-names@2.1.3:
     resolution: {integrity: sha512-APMBEanjybaPzUrfqU0IMU5I0AswKMH7k8OTLs0vvV4KZpExkTkY87nR/zpbuTPj+gARop7aGUbl11pnDfW6xg==}
 
@@ -3126,6 +3146,10 @@ packages:
     peerDependencies:
       postcss: ^8.4.29
 
+  postcss-selector-parser@6.0.10:
+    resolution: {integrity: sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==}
+    engines: {node: '>=4'}
+
   postcss-selector-parser@6.1.0:
     resolution: {integrity: sha512-UMz42UD0UY0EApS0ZL9o1XnLhSTtvvvLe5Dc2H2O56fvRZi+KulDyf5ctDhhtYJBGKStV2FL1fy6253cmLgqVQ==}
     engines: {node: '>=4'}
@@ -5291,6 +5315,14 @@ snapshots:
     dependencies:
       '@swc/counter': 0.1.3
 
+  '@tailwindcss/typography@0.5.13(tailwindcss@3.4.3)':
+    dependencies:
+      lodash.castarray: 4.4.0
+      lodash.isplainobject: 4.0.6
+      lodash.merge: 4.6.2
+      postcss-selector-parser: 6.0.10
+      tailwindcss: 3.4.3
+
   '@tanstack/react-virtual@3.5.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@tanstack/virtual-core': 3.5.0
@@ -6732,6 +6764,8 @@ snapshots:
 
   lodash.camelcase@4.3.0: {}
 
+  lodash.castarray@4.4.0: {}
+
   lodash.debounce@4.0.8: {}
 
   lodash.isplainobject@4.0.6: {}
@@ -6770,6 +6804,10 @@ snapshots:
     dependencies:
       p-defer: 1.0.0
 
+  markdown-to-jsx@7.4.7(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+
   mathml-tag-names@2.1.3: {}
 
   mdn-data@2.0.30: {}
@@ -6991,6 +7029,11 @@ snapshots:
     dependencies:
       postcss: 8.4.38
 
+  postcss-selector-parser@6.0.10:
+    dependencies:
+      cssesc: 3.0.0
+      util-deprecate: 1.0.2
+
   postcss-selector-parser@6.1.0:
     dependencies:
       cssesc: 3.0.0

src/features/misc/sections/Changelog.jsx

@@ -1,46 +1,19 @@
 import variables from 'config/variables';
 import { PureComponent, createRef } from 'react';
+import Markdown from 'markdown-to-jsx';
 import { MdOutlineWifiOff } from 'react-icons/md';
-import Modal from 'react-modal';
-
-import Lightbox from '../../marketplace/components/Elements/Lightbox/Lightbox';
 
 class Changelog extends PureComponent {
   constructor() {
     super();
     this.state = {
       title: null,
-      showLightbox: false,
-      lightboxImg: null,
     };
     this.offlineMode = localStorage.getItem('offlineMode') === 'true';
     this.controller = new AbortController();
     this.changelog = createRef();
   }
 
-  parseMarkdown = (text) => {
-    if (typeof text !== 'string') {
-      throw new Error('Input must be a string');
-    }
-
-    // Replace list items
-    text = text.replace(/^\* (.*$)/gm, '<li>$1</li>');
-
-    // Wrap list items in <ul></ul>
-    text = text.replace(/((<li>.*<\/li>\s*)+)/g, '<ul>$1</ul>');
-
-    // Replace other markdown syntax
-    text = text
-      .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
-      .replace(/^## (.*$)/gm, '<span class="title">$1</span>')
-      .replace(
-        /((http|https):\/\/[^\s]+)/g,
-        '<a href="$1" target="_blank" rel="noopener noreferrer">$1</a>',
-      );
-
-    return text;
-  };
-
   async getUpdate() {
     const releases = await fetch(
       `https://api.github.com/repos/${variables.constants.ORG_NAME}/${variables.constants.REPO_NAME}/releases`,
@@ -72,7 +45,7 @@ class Changelog extends PureComponent {
     const changelog = await res.json();
     this.setState({
       title: changelog.name,
-      content: this.parseMarkdown(changelog.body),
+      content: changelog.body,
       date: new Date(changelog.published_at).toLocaleDateString(),
     });
   }
@@ -133,32 +106,13 @@ class Changelog extends PureComponent {
     }
 
     return (
-      <div className="modalInfoPage changelogtab" ref={this.changelog}>
-        <span className="mainTitle">{this.state.title}</span>
-        <span className="subtitle">Released on {this.state.date}</span>
-        {this.state.image && (
-          <img
-            draggable={false}
-            src={this.state.image}
-            alt={this.state.title}
-            className="updateImage"
-          />
-        )}
-        <div className="updateChangelog" dangerouslySetInnerHTML={{ __html: this.state.content }} />
-        <Modal
-          closeTimeoutMS={100}
-          onRequestClose={() => this.setState({ showLightbox: false })}
-          isOpen={this.state.showLightbox}
-          className="Modal lightBoxModal"
-          overlayClassName="Overlay resetoverlay"
-          ariaHideApp={false}
-        >
-          <Lightbox
-            modalClose={() => this.setState({ showLightbox: false })}
-            img={this.state.lightboxImg}
-          />
-        </Modal>
-      </div>
+      <article className="changelogtab prose dark:prose-invert" ref={this.changelog}>
+        <div className="not-prose">
+          <span className="mainTitle">{this.state.title}</span>
+          <span className="subtitle">Released on {this.state.date}</span>
+        </div>
+        <Markdown>{this.state.content}</Markdown>
+      </article>
     );
   }
 }

tailwind.config.js

@@ -1,12 +1,8 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: [
-    "./index.html",
-    "./src/**/*.{js,ts,jsx,tsx}",
-  ],
+  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
   theme: {
     extend: {},
   },
-  plugins: [],
-}
-
+  plugins: [require('@tailwindcss/typography')],
+};