From 49fb4c68b6499590f1831a9bf133ab45c5efe9ed Mon Sep 17 00:00:00 2001
From: V <vendicated@riseup.net>
Date: Mon, 26 Jun 2023 01:42:51 +0200
Subject: [PATCH] Updater Popup: Add Changelog; Make about page prettier

---
 package.json                   |  2 +-
 src/main/about.ts              | 12 ++++++------
 src/updater/main.ts            | 25 ++++++++++++++++---------
 static/views/about.html        | 15 ++++++++++++---
 static/views/first-launch.html | 31 ++-----------------------------
 static/views/splash.html       | 13 +++----------
 static/views/style.css         | 30 ++++++++++++++++++++++++++++++
 static/views/updater.html      | 34 +++++++++++++++++++++-------------
 8 files changed, 91 insertions(+), 71 deletions(-)
 create mode 100644 static/views/style.css

diff --git a/package.json b/package.json
index ef7043c..7ecf48d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "VencordDesktop",
-    "version": "0.2.4",
+    "version": "0.2.5",
     "private": true,
     "description": "",
     "keywords": [],
diff --git a/src/main/about.ts b/src/main/about.ts
index c15f2b8..84ac4ad 100644
--- a/src/main/about.ts
+++ b/src/main/about.ts
@@ -4,8 +4,7 @@
  * Copyright (c) 2023 Vendicated and Vencord contributors
  */
 
-import { app, BrowserWindow } from "electron";
-import { readFileSync } from "fs";
+import { BrowserWindow } from "electron";
 import { join } from "path";
 import { ICON_PATH, VIEW_DIR } from "shared/paths";
 
@@ -15,14 +14,15 @@ export function createAboutWindow() {
     const about = new BrowserWindow({
         center: true,
         autoHideMenuBar: true,
-        icon: ICON_PATH
+        icon: ICON_PATH,
+        webPreferences: {
+            preload: join(__dirname, "updaterPreload.js")
+        }
     });
 
     makeLinksOpenExternally(about);
 
-    const html = readFileSync(join(VIEW_DIR, "about.html"), "utf-8").replaceAll("%VERSION%", app.getVersion());
-
-    about.loadURL("data:text/html;charset=utf-8," + html);
+    about.loadFile(join(VIEW_DIR, "about.html"));
 
     return about;
 }
diff --git a/src/updater/main.ts b/src/updater/main.ts
index 2c74d83..243364d 100644
--- a/src/updater/main.ts
+++ b/src/updater/main.ts
@@ -6,9 +6,9 @@
 
 import { app, BrowserWindow, ipcMain, shell } from "electron";
 import { Settings } from "main/settings";
+import { makeLinksOpenExternally } from "main/utils/makeLinksOpenExternally";
 import { githubGet, ReleaseData } from "main/utils/vencordLoader";
 import { join } from "path";
-import { SplashProps } from "shared/browserWinProperties";
 import { IpcEvents } from "shared/IpcEvents";
 import { VIEW_DIR } from "shared/paths";
 
@@ -79,13 +79,13 @@ export async function checkUpdates() {
 
         const oldVersion = app.getVersion();
         const newVersion = data.tag_name.replace(/^v/, "");
-        if (Settings.store.skippedUpdate !== newVersion && isOutdated(oldVersion, newVersion)) {
-            updateData = {
-                currentVersion: oldVersion,
-                latestVersion: newVersion,
-                release: data
-            };
+        updateData = {
+            currentVersion: oldVersion,
+            latestVersion: newVersion,
+            release: data
+        };
 
+        if (Settings.store.skippedUpdate !== newVersion && isOutdated(oldVersion, newVersion)) {
             openNewUpdateWindow();
         }
     } catch (e) {
@@ -95,11 +95,18 @@ export async function checkUpdates() {
 
 function openNewUpdateWindow() {
     const win = new BrowserWindow({
-        ...SplashProps,
+        width: 500,
+        autoHideMenuBar: true,
+        alwaysOnTop: true,
         webPreferences: {
-            preload: join(__dirname, "updaterPreload.js")
+            preload: join(__dirname, "updaterPreload.js"),
+            nodeIntegration: false,
+            contextIsolation: true,
+            sandbox: true
         }
     });
 
+    makeLinksOpenExternally(win);
+
     win.loadFile(join(VIEW_DIR, "updater.html"));
 }
diff --git a/static/views/about.html b/static/views/about.html
index 489cea7..45501ca 100644
--- a/static/views/about.html
+++ b/static/views/about.html
@@ -1,9 +1,9 @@
 <head>
+    <link rel="stylesheet" href="./style.css" type="text/css" />
+
     <style>
         body {
             padding: 2em;
-            font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
-                "Open Sans", "Helvetica Neue", sans-serif;
         }
 
         h1 {
@@ -13,7 +13,7 @@
 </head>
 
 <body>
-    <h1>Vencord Desktop %VERSION%</h1>
+    <h1 id="title">Vencord Desktop</h1>
     <p>
         Vencord Desktop is a free/libre cross platform desktop app aiming to give you a snappier Discord experience with
         Vencord pre-installed
@@ -60,3 +60,12 @@
         </ul>
     </section>
 </body>
+
+<script type="module">
+    const data = await Updater.getData();
+    if (data.currentVersion) {
+        const title = document.getElementById("title");
+
+        title.textContent += ` v${data.currentVersion}`;
+    }
+</script>
diff --git a/static/views/first-launch.html b/static/views/first-launch.html
index e7ca9de..6840bab 100644
--- a/static/views/first-launch.html
+++ b/static/views/first-launch.html
@@ -1,29 +1,10 @@
 <head>
+    <link rel="stylesheet" href="./style.css" type="text/css" />
+
     <style>
-        :root {
-            --bg: white;
-            --fg: black;
-            --fg-secondary: #313338;
-            --fg-semi-trans: rgb(0 0 0 / 0.2);
-            --link: #006ce7;
-        }
-
-        @media (prefers-color-scheme: dark) {
-            :root {
-                --bg: hsl(223 6.7% 20.6%);
-                --fg: white;
-                --fg-secondary: #b5bac1;
-                --fg-semi-trans: rgb(255 255 255 / 0.2);
-                --link: #00a8fc;
-            }
-        }
-
         body {
             height: 100vh;
 
-            font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
-                "Open Sans", "Helvetica Neue", sans-serif;
-            margin: 0;
             padding: 1.5em;
             padding-bottom: 1em;
 
@@ -34,13 +15,9 @@
             box-sizing: border-box;
         }
 
-        body,
         select {
             background: var(--bg);
             color: var(--fg);
-        }
-
-        select {
             padding: 0.3em;
             margin: -0.3em;
             border-radius: 6px;
@@ -54,10 +31,6 @@
             margin: 1em 0 2em;
         }
 
-        a {
-            color: var(--link);
-        }
-
         form {
             display: grid;
             gap: 1em;
diff --git a/static/views/splash.html b/static/views/splash.html
index f136584..5ea1874 100644
--- a/static/views/splash.html
+++ b/static/views/splash.html
@@ -1,16 +1,11 @@
 <head>
+    <link rel="stylesheet" href="./style.css" type="text/css" />
+
     <style>
         * {
             user-select: none;
         }
 
-        body {
-            font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
-                "Open Sans", "Helvetica Neue", sans-serif;
-            margin: 0;
-            padding: 0;
-        }
-
         .wrapper {
             box-sizing: border-box;
             height: 100%;
@@ -18,13 +13,11 @@
             flex-direction: column;
             justify-content: center;
             align-items: center;
-            background-color: hsl(223 6.7% 20.6%);
             border-radius: 8px;
-            border: 1px solid hsl(220 6.5% 18%);
+            border: 1px solid var(--fg-semi-trans);
         }
 
         p {
-            color: rgb(219, 222, 225);
             text-align: center;
         }
 
diff --git a/static/views/style.css b/static/views/style.css
new file mode 100644
index 0000000..909095f
--- /dev/null
+++ b/static/views/style.css
@@ -0,0 +1,30 @@
+:root {
+    --bg: white;
+    --fg: black;
+    --fg-secondary: #313338;
+    --fg-semi-trans: rgb(0 0 0 / 0.2);
+    --link: #006ce7;
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --bg: hsl(223 6.7% 20.6%);
+        --fg: white;
+        --fg-secondary: #b5bac1;
+        --fg-semi-trans: rgb(255 255 255 / 0.2);
+        --link: #00a8fc;
+    }
+}
+
+body {
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
+        "Open Sans", "Helvetica Neue", sans-serif;
+    margin: 0;
+    padding: 0;
+    background: var(--bg);
+    color: var(--fg);
+}
+
+a {
+    color: var(--link);
+}
diff --git a/static/views/updater.html b/static/views/updater.html
index 89a8f15..57c12b1 100644
--- a/static/views/updater.html
+++ b/static/views/updater.html
@@ -1,22 +1,13 @@
 <head>
-    <style>
-        body {
-            font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
-                "Open Sans", "Helvetica Neue", sans-serif;
-            margin: 0;
-            padding: 0;
-            color: rgb(219, 222, 225);
-        }
+    <link rel="stylesheet" href="./style.css" type="text/css" />
 
+    <style>
         .wrapper {
             display: flex;
             flex-direction: column;
             justify-content: space-between;
             box-sizing: border-box;
-            height: 100%;
-            background-color: #313338;
-            border-radius: 8px;
-            border: 1px solid #248046;
+            min-height: 100%;
             padding: 1em;
         }
 
@@ -34,7 +25,7 @@
         button {
             cursor: pointer;
             padding: 0.5em;
-            color: white;
+            color: var(--fg);
             border: none;
             border-radius: 3px;
             font-weight: bold;
@@ -66,6 +57,9 @@
                 <br />
                 Latest: <span id="latest"></span>
             </p>
+
+            <h2>Changelog</h2>
+            <p id="changelog">Loading...</p>
         </section>
 
         <section>
@@ -113,3 +107,17 @@
         });
     }
 </script>
+
+<script type="module">
+    import { micromark } from "https://esm.sh/micromark@3?bundle";
+    import { gfm, gfmHtml } from "https://esm.sh/micromark-extension-gfm@2?bundle";
+
+    const changelog = (await Updater.getData()).release.body;
+    if (changelog)
+        document.getElementById("changelog").innerHTML = micromark(changelog, {
+            extensions: [gfm()],
+            htmlExtensions: [gfmHtml()]
+        })
+            .replace(/h1>/g, "h3>")
+            .replace(/<a /g, '<a target="_blank" ');
+</script>