implement changelogs and releases notes

packages/app/config/index.js

@@ -6,17 +6,24 @@ const envOrigins = {
     "localhost": {
         mainApi: `http://${window.location.hostname}:3010`,
         messagingApi: `http://${window.location.hostname}:3020`,
+        livestreamingApi: `http://${window.location.hostname}:3030`,
     },
     "development": {
         mainApi: `https://indev_api.comty.app`,
         messagingApi: `https://indev_messaging_api.comty.app`,
+        livestreamingApi: `https://indev_livestreaming_api.comty.app`,
     },
     "production": {
         mainApi: "https://api.comty.app",
         messagingApi: `https://messaging_api.comty.app`,
+        livestreamingApi: `https://livestreaming_api.comty.app`,
     }
 }
 
+function composeRemote(path) {
+    return window.location.hostname.includes("localhost") ? envOrigins["localhost"][path] : envOrigins[process.env.NODE_ENV][path]
+}
+
 console.log(`Config loaded with mode: [${process.env.NODE_ENV}]`)
 
 export default {
@@ -25,6 +32,7 @@ export default {
     defaultSoundPack: defaultSoundPack,
     author: "RageStudio©",
     fundingLink: "https://www.paypal.com/donate/?hosted_button_id=S4TWMAN79KC76",
+    githubRepoLink: "https://github.com/ragestudio/comty",
     footerLinks: [
         {
             label: "Terms of Service",
@@ -54,8 +62,9 @@ export default {
         ragestudio_full: "https://storage.ragestudio.net/rstudio/branding/ragestudio/labeled/ragestudio-labeled_white.svg",
     },
     remotes: {
-        mainApi: window.location.hostname.includes("localhost") ? envOrigins["localhost"].mainApi : envOrigins[process.env.NODE_ENV].mainApi,
+        mainApi: composeRemote("mainApi"),
-        messagingApi: window.location.hostname.includes("localhost") ? envOrigins["localhost"].messagingApi : envOrigins[process.env.NODE_ENV].messagingApi,
+        messagingApi: composeRemote("messagingApi"),
+        livestreamingApi: composeRemote("livestreamingApi"),
     },
     app: {
         title: packagejson.name,

packages/app/constants/settings/changelogs/index.jsx

@@ -0,0 +1,97 @@
+import React from "react"
+import ReactMarkdown from "react-markdown"
+import remarkGfm from "remark-gfm"
+import {
+    Result,
+    Skeleton
+} from "antd"
+import { SiGithub } from "react-icons/si"
+import config from "config"
+
+import "./index.less"
+
+const FetchChangelogs = async () => {
+    const response = await app.cores.api.customRequest({
+        method: "GET",
+        url: `/release-notes`,
+    })
+
+    return response.data
+}
+
+export default {
+    id: "changelogs",
+    icon: "MdHistory",
+    label: "Changelogs",
+    group: "bottom",
+    render: () => {
+        const [L_Changelogs, R_Changelogs, E_Changelogs,] = app.cores.api.useRequest(FetchChangelogs)
+
+        console.log(R_Changelogs, E_Changelogs)
+
+        if (L_Changelogs) {
+            return <Skeleton active />
+        }
+
+        if (E_Changelogs) {
+            return <Result
+                status="warning"
+                title="Cannot load changelogs"
+                subTitle="Something went wrong, please try again later."
+            />
+        }
+
+        if (!Array.isArray(R_Changelogs)) {
+            return <Result
+                status="error"
+                title="Changelogs error"
+                subTitle="The response is not valid."
+            />
+        }
+
+        return <div className="changelogs">
+            {
+                R_Changelogs.map((changelog, index) => {
+                    return <div id={changelog.version} key={index} className="changelog_entry">
+                        <div className="changelog_entry_header">
+                            <h1>v{changelog.version}</h1>
+                            <p>{changelog.date}</p>
+                        </div>
+
+                        <div className="changelog_entry_body">
+                            <ReactMarkdown remarkPlugins={[remarkGfm]}>
+                                {changelog.body}
+                            </ReactMarkdown>
+                        </div>
+                    </div>
+                })
+            }
+
+            <div
+                className="changelog_entry"
+                style={{
+                    justifyContent: "center",
+                    alignItems: "center",
+                    cursor: "pointer",
+                }}
+                onClick={() => {
+                    window.open(config.githubRepoLink, "_blank")
+                }}
+            >
+                <SiGithub
+                    style={{
+                        fontSize: "2rem",
+                        marginBottom: "10px"
+                    }}
+                />
+                <h1
+                    style={{
+                        margin: 0,
+                    }}
+                >
+                    View more on Github
+                </h1>
+            </div>
+        </div>
+    }
+}

packages/app/constants/settings/changelogs/index.less

@@ -0,0 +1,41 @@
+.changelogs {
+    display: flex;
+    flex-direction: column;
+
+    gap: 20px;
+
+    .changelog_entry {
+        display: flex;
+        flex-direction: column;
+
+        color: var(--text-color);
+
+        background-color: var(--background-color-accent);
+        padding: 20px;
+
+        border-radius: 8px;
+
+        gap: 20px;
+
+        .changelog_entry_header{
+            display: flex;
+            justify-content: space-between;
+
+            align-items: center;
+
+            h1,p {
+                margin-bottom: 0;
+            }
+
+            .changelog_entry_version {
+                font-size: 1.2rem;
+                font-weight: bold;
+            }
+
+            .changelog_entry_date {
+                font-size: 1rem;
+                font-weight: bold;
+            }
+        }
+    }
+}

packages/server/src/controllers/PublicController/endpoints/getReleasesNotes.js

@@ -0,0 +1,49 @@
+import { Octokit } from "@octokit/rest"
+import axios from "axios"
+
+const octokit = new Octokit({})
+
+export default {
+    method: "GET",
+    route: "/release-notes",
+    fn: async (req, res) => {
+        if (!process.env.GITHUB_REPO) {
+            return res.status(400).json({
+                error: "GITHUB_REPO env variable not set"
+            })
+        }
+
+        const releasesNotes = []
+
+        // fetch the 3 latest releases
+        const releases = await octokit.repos.listReleases({
+            owner: process.env.GITHUB_REPO.split("/")[0],
+            repo: process.env.GITHUB_REPO.split("/")[1],
+            per_page: 3
+        })
+
+        for await (const release of releases.data) {
+            let changelogData = release.body
+
+            const bundle = release.assets.find((asset) => asset.name === "changelog.md")
+
+            if (bundle) {
+                const response = await axios.get(bundle.browser_download_url)
+                    .catch(() => null)
+
+                if (response) {
+                    changelogData = response.data
+                }
+            }
+
+            releasesNotes.push({
+                version: release.tag_name,
+                date: release.published_at,
+                body: changelogData,
+                isMd: bundle !== undefined
+            })
+        }
+
+        return res.json(releasesNotes)
+    }
+}