improve about window

This commit is contained in:
Vendicated
2025-07-06 18:57:57 +02:00
parent 4baf6de472
commit fde447bc1d
4 changed files with 67 additions and 18 deletions

View File

@@ -4,25 +4,33 @@
* SPDX-License-Identifier: GPL-3.0-or-later * SPDX-License-Identifier: GPL-3.0-or-later
*/ */
import { BrowserWindow } from "electron"; import { app, BrowserWindow } from "electron";
import { join } from "path"; import { join } from "path";
import { ICON_PATH, VIEW_DIR } from "shared/paths"; import { ICON_PATH, VIEW_DIR } from "shared/paths";
import { makeLinksOpenExternally } from "./utils/makeLinksOpenExternally"; import { makeLinksOpenExternally } from "./utils/makeLinksOpenExternally";
export function createAboutWindow() { export async function createAboutWindow() {
const height = 750;
const width = height * (4 / 3);
const about = new BrowserWindow({ const about = new BrowserWindow({
center: true, center: true,
autoHideMenuBar: true, autoHideMenuBar: true,
icon: ICON_PATH, icon: ICON_PATH,
webPreferences: { height,
preload: join(__dirname, "updaterPreload.js") width
}
}); });
makeLinksOpenExternally(about); makeLinksOpenExternally(about);
about.loadFile(join(VIEW_DIR, "about.html")); const data = new URLSearchParams({
APP_VERSION: app.getVersion()
});
about.loadFile(join(VIEW_DIR, "about.html"), {
search: data.toString()
});
return about; return about;
} }

View File

@@ -1,4 +1,6 @@
<head> <head>
<title>About Vesktop</title>
<link rel="stylesheet" href="./style.css" type="text/css" /> <link rel="stylesheet" href="./style.css" type="text/css" />
<style> <style>
@@ -9,19 +11,25 @@
h1 { h1 {
text-align: center; text-align: center;
} }
ul {
display: flex;
flex-direction: column;
gap: 0.5em;
}
</style> </style>
</head> </head>
<body> <body>
<h1 id="title">Vesktop</h1> <h1 id="title">Vesktop v{{APP_VERSION}}</h1>
<p> <p>Vesktop is a cross platform Discord Desktop client, aiming to give you a better Discord experience</p>
Vesktop is a free/libre cross platform desktop app aiming to give you a snappier Discord experience with Vencord
pre-installed
</p>
<section> <section>
<h2>Links</h2> <h2>Links</h2>
<ul> <ul>
<li>
<a href="https://vesktop.vencord.dev/wiki" target="_blank">Vesktop Wiki</a>
</li>
<li> <li>
<a href="https://vencord.dev" target="_blank">Vencord Website</a> <a href="https://vencord.dev" target="_blank">Vencord Website</a>
</li> </li>
@@ -34,6 +42,17 @@
</ul> </ul>
</section> </section>
<section>
<h2>License</h2>
<p>
Vesktop is licensed under the
<a href="https://www.gnu.org/licenses/gpl-3.0.txt" target="_blank">GNU General Public License v3.0</a>.
<br />
This is free software, and you are welcome to redistribute it under certain conditions; see the license for
details.
</p>
</section>
<section> <section>
<h2>Acknowledgements</h2> <h2>Acknowledgements</h2>
<p>These awesome libraries empower Vesktop</p> <p>These awesome libraries empower Vesktop</p>
@@ -58,18 +77,31 @@
<li> <li>
And many And many
<a href="https://github.com/Vencord/Vesktop/blob/main/pnpm-lock.yaml" target="_blank" <a href="https://github.com/Vencord/Vesktop/blob/main/pnpm-lock.yaml" target="_blank"
>more awesome open source libraries</a >more open source libraries</a
> >
</li> </li>
</ul> </ul>
</section> </section>
</body> </body>
<script type="module"> <script>
const data = await Updater.getData(); const data = new URLSearchParams(location.search);
if (data.currentVersion) {
const title = document.getElementById("title");
title.textContent += ` v${data.currentVersion}`; // replace all {{FOO}} placeholders in the document with the values from the URL
/** @param {Node} [node] */
function walk(node) {
if (node.nodeType === Node.TEXT_NODE) {
node.textContent = node.textContent.replace(/{{(\w+)}}/g, (match, key) => data.get(key) || match);
return;
} }
if (node.nodeType === Node.ELEMENT_NODE && node.nodeName !== "SCRIPT") {
for (const child of node.childNodes) {
walk(child);
}
}
}
walk(document.body);
</script> </script>

View File

@@ -1,4 +1,6 @@
<head> <head>
<title>Vesktop Setup</title>
<link rel="stylesheet" href="./style.css" type="text/css" /> <link rel="stylesheet" href="./style.css" type="text/css" />
<style> <style>

View File

@@ -4,6 +4,7 @@
--fg-secondary: #313338; --fg-secondary: #313338;
--fg-semi-trans: rgb(0 0 0 / 0.2); --fg-semi-trans: rgb(0 0 0 / 0.2);
--link: #006ce7; --link: #006ce7;
--link-hover: #005bb5;
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
@@ -13,6 +14,7 @@
--fg-secondary: #b5bac1; --fg-secondary: #b5bac1;
--fg-semi-trans: rgb(255 255 255 / 0.2); --fg-semi-trans: rgb(255 255 255 / 0.2);
--link: #00a8fc; --link: #00a8fc;
--link-hover: #0086c3;
} }
} }
@@ -27,4 +29,9 @@ body {
a { a {
color: var(--link); color: var(--link);
transition: color 0.2s linear;
}
a:hover {
color: var(--link-hover);
} }