experimental: fix changelog by switching it to github

src/config/constants.js

@@ -8,7 +8,6 @@ export const OPENSTREETMAP_URL = 'https://www.openstreetmap.org';
 // Mue URLs
 export const WEBSITE_URL = 'https://muetab.com';
 export const PRIVACY_URL = 'https://muetab.com/privacy';
-export const BLOG_POST = 'https://blog.muetab.com/posts/version-7-0';
 export const TRANSLATIONS_URL = 'https://docs.muetab.com/translations/';
 export const WEBLATE_URL = 'https://hosted.weblate.org/projects/mue/mue-tab/';
 export const REPORT_ITEM =

src/features/misc/sections/About.jsx

@@ -131,7 +131,7 @@ class About extends PureComponent {
           <div style={{ display: 'flex', flexFlow: 'column', gap: '5px' }}>
             <img draggable={false} className="aboutLogo" src={this.state.image} alt="Logo" />
             <div className="aboutText">
-              <span className="title">Mue, By Kaiso</span>
+              <span className="title">Mue, by Kaiso</span>
               <span className="subtitle">
                 {variables.getMessage('modals.main.settings.sections.about.version.title')}{' '}
                 {variables.constants.VERSION}
@@ -156,8 +156,8 @@ class About extends PureComponent {
                 >
                   The Mue Authors
                 </a>
-                ,{' '}
               </span>
+              <br></br>
               <span className="subtitle">
                 Copyright 2023-2024{' '}
                 <a
@@ -366,12 +366,10 @@ class About extends PureComponent {
           {!!this.state.loading ? <p>{this.state.loading}</p> : <></>}
           <ul>
             {this.state.photographers.map(({ name, count }) => (
-              <>
-                <li className="subtitle-photographers">
-                  {name}
-                  <span> ({count} images)</span>
-                </li>
-              </>
+              <li className="subtitle-photographers">
+                {name}
+                <span> ({count} images)</span>
+              </li>
             ))}
           </ul>
         </div>

src/features/misc/sections/Changelog.jsx

@@ -18,10 +18,36 @@ class Changelog extends PureComponent {
     this.changelog = createRef();
   }
 
+  parseMarkdown = (text) => {
+    text = text.replace(/^\* /gm, '<li>').replace(/\n/g, '</li>');
+    text = text.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>');
+    text = text.replace(/^## (.*$)/gm, '<h3>$1</h3>');
+    text = text.replace(
+      /((http|https):\/\/[^\s]+)/g,
+      '<a href="$1" target="_blank" rel="noopener noreferrer">$1</a>',
+    );
+
+    return text;
+  }
+
   async getUpdate() {
-    const res = await fetch(variables.constants.BLOG_POST + '/index.json', {
-      signal: this.controller.signal,
-    });
+    const releases = await fetch(
+      `https://api.github.com/repos/${variables.constants.ORG_NAME}/${variables.constants.REPO_NAME}/releases`,
+      {
+        signal: this.controller.signal,
+      },
+    );
+
+    // get the release which tag_name is the same as the current version
+    const data = await releases.json();
+    const release = data.find((release) => release.tag_name === `7.0.0`);
+
+    if (this.controller.signal.aborted === true) {
+      return;
+    }
+
+    // request the changelog
+    const res = await fetch(release.url, { signal: this.controller.signal });
 
     if (res.status === 404) {
       this.setState({ error: true });
@@ -32,43 +58,12 @@ class Changelog extends PureComponent {
       return;
     }
 
-    const data = await res.json();
-    let date = new Date(data.date.split(' ')[0]);
-    date = date.toLocaleDateString(variables.languagecode.replace('_', '-'), {
-      year: 'numeric',
-      month: 'long',
-      day: 'numeric',
-    });
-
+    const changelog = await res.json();
     this.setState({
-      title: data.title,
-      date,
-      image: data.featured_image || null,
-      author: variables.getMessage('modals.main.settings.sections.changelog.by', {
-        author: data.authors.join(', '),
-      }),
-      content: data.markdown,
+      title: changelog.name,
+      content: this.parseMarkdown(changelog.body),
+      date: new Date(changelog.published_at).toLocaleDateString(),
     });
-
-    // lightbox etc
-    const images = this.changelog.current.getElementsByTagName('img');
-    const links = this.changelog.current.getElementsByTagName('a');
-
-    for (const img of images) {
-      img.draggable = false;
-      img.onclick = () => {
-        this.setState({
-          showLightbox: true,
-          lightboxImg: img.src,
-        });
-      };
-    }
-
-    // open in new tab
-    for (let link = 0; link < links.length; link++) {
-      links[link].target = '_blank';
-      links[link].rel = 'noopener noreferrer';
-    }
   }
 
   componentDidMount() {
@@ -129,9 +124,7 @@ class Changelog extends PureComponent {
     return (
       <div className="changelogtab" ref={this.changelog}>
         <h1>{this.state.title}</h1>
-        <h5>
-          {this.state.author} • {this.state.date}
-        </h5>
+        <h5>Released on {this.state.date}</h5>
         {this.state.image && (
           <img
             draggable={false}
@@ -140,7 +133,7 @@ class Changelog extends PureComponent {
             className="updateImage"
           />
         )}
-        <div className="updateChangelog">{this.state.content}</div>
+        <div className="updateChangelog" dangerouslySetInnerHTML={{ __html: this.state.content }} />
         <Modal
           closeTimeoutMS={100}
           onRequestClose={() => this.setState({ showLightbox: false })}