Add Vesktop to vencord.dev

README.md

@@ -1,3 +1,20 @@
 # Vencord Website
 
-https://vencord.dev
+<https://vencord.dev>
+
+## Development
+
+### Requirements
+
+- Node.js
+- pnpm
+
+### Setup
+
+1. Clone the repository
+2. Install dependencies with `pnpm install`
+3. Run `pnpm dev` to start the development server
+
+## License
+
+This project is licensed under AGPL-3.0. See [LICENSE](LICENSE) for more details.

scripts/generateRedirects.mjs

@@ -12,6 +12,14 @@ const BaseRedirects = {
     "/donate": "https://github.com/sponsors/Vendicated",
 };
 
+const VesktopRedirects = {
+    "/vesktop/github": "https://github.com/Vencord/Vesktop",
+    "/vesktop/discord": "https://discord.gg/D9uwnFnqmd",
+    "/vesktop/support": "https://discord.gg/D9uwnFnqmd",
+    "/vesktop/install": "/download/#vesktop",
+    "/vesktop/donate": "https://github.com/sponsors/Vendicated",
+};
+
 const VesktopDownloads = version => ({
     "/download/vesktop/amd64/windows": `https://github.com/Vencord/Vesktop/releases/download/v${version}/Vesktop-Setup-${version}.exe`,
     "/download/vesktop/amd64/windows-portable": `https://github.com/Vencord/Vesktop/releases/download/v${version}/Vesktop-${version}-win.zip`,
@@ -33,6 +41,7 @@ const VesktopDownloads = version => ({
 
 const Redirects = {
     ...BaseRedirects,
+    ...VesktopRedirects,
     ...VesktopDownloads(
         readFileSync("scripts/_latestVesktopVersion.txt", "utf-8")
     ),

src/components/AutoSizeGrid.astro

@@ -10,16 +10,14 @@ export type Props = HTMLAttributes<"div">;
 
 <style>
     div {
-        display: inline-grid;
-        grid-auto-flow: column;
-        grid-template-columns: 1fr;
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
         gap: 1rem;
     }
 
     @media screen and (max-width: 800px) {
         div {
-            grid-auto-flow: row;
-            grid-template-rows: 1fr;
+            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
         }
     }
 </style>

src/components/NavBar.astro

@@ -1,6 +1,7 @@
 ---
 const navLinks = {
     download: ["Download", "accentPurple"],
+    vesktop: ["Vesktop", "accentGreen"],
     plugins: ["Plugins", "accentBlue"],
     faq: ["FAQ", "accentAqua"],
     cloud: ["Cloud", "accentYellow"],

src/components/pages/download/Tab.astro

@@ -1,27 +1,28 @@
 ---
 import AutoSizeGrid from "components/AutoSizeGrid.astro";
 import LinkButton from "components/LinkButton.astro";
-import { DOWNLOAD_BASE } from "scripts/constants";
+
+export type NameUrlTuple = [name: string, url: string];
 
 export interface Props {
-    fileNames?: string[];
+    links?: NameUrlTuple[];
 }
 
-const { fileNames } = Astro.props as Props;
+const { links } = Astro.props as Props;
 ---
 
 <div class="tab">
     <slot name="header" />
 
     {
-        fileNames && fileNames.length > 0 && (
+        links && links.length > 0 && (
             <AutoSizeGrid class="os-downloads">
-                {fileNames.map((f, i) => (
+                {links.map(([name, url], i) => (
                     <LinkButton
-                        href={DOWNLOAD_BASE + f}
+                        href={url}
                         class:list={{ "main-btn": i === 0 }}
                     >
-                        Download {f}
+                        Download {name}
                     </LinkButton>
                 ))}
             </AutoSizeGrid>

src/components/pages/download/index.svelte

@@ -4,9 +4,13 @@
 
     import { IS_SERVER } from "scripts/constants";
 
-    const options = ["Windows", "Linux", "Mac", "Browser"] as const;
+    export let exclusions: string[] = []; // Accept exclusions as a prop
+    const allOptions = ["Windows", "Linux", "Mac", "Browser"] as const;
 
-    const accents: { [option in (typeof options)[number]]: string } = {
+    // Filter options based on exclusions
+    const options = allOptions.filter(option => !exclusions.includes(option));
+
+    const accents: { [option in (typeof allOptions)[number]]: string } = {
         Windows: "Blue",
         Linux: "Green",
         Mac: "Yellow",
@@ -16,13 +20,16 @@
     const initialValue = IS_SERVER
         ? "Windows"
         : (() => {
-              const stored = localStorage.platform;
+              const stored: any = localStorage.platform;
               if (stored && options.includes(stored)) return stored;
 
               const platform = navigator.platform.toLowerCase();
-              if (platform.includes("linux")) return "Linux";
-              if (platform.includes("mac")) return "Mac";
-              return "Windows";
+              if (platform.includes("linux") && !exclusions.includes("Linux"))
+                  return "Linux";
+              if (platform.includes("mac") && !exclusions.includes("Mac"))
+                  return "Mac";
+              if (!exclusions.includes("Windows")) return "Windows";
+              return options[0]; // Fallback
           })();
 
     const selected = writable(initialValue);
@@ -31,7 +38,7 @@
 
 <div class="container">
     <slot name="title" />
-    <nav>
+    <nav style="grid-template-columns: repeat({options.length}, 1fr);">
         {#each options as option}
             <label
                 class={$selected === option ? "selected" : ""}
@@ -79,7 +86,7 @@
     nav {
         display: grid;
         width: 100%;
-        grid-template-columns: repeat(4, 1fr);
+        /* grid-template-columns: repeat(4, 1fr); */
     }
 
     section {

src/components/pages/download/BrowserTab.astro → src/components/pages/download/vencord/BrowserTab.astro

@@ -5,7 +5,7 @@ import {
     FIREFOX_WEBSTORE_URL,
     USERSCRIPT_URL,
 } from "scripts/constants";
-import Tab from "./Tab.astro";
+import Tab from "../Tab.astro";
 ---
 
 <Tab>

src/components/pages/download/LinuxTab.astro → src/components/pages/download/vencord/LinuxTab.astro

@@ -1,6 +1,6 @@
 ---
 import Code from "components/Code.astro";
-import Tab from "./Tab.astro";
+import Tab from "../Tab.astro";
 import CodeBlock from "components/CodeBlock.svelte";
 ---
 

src/components/pages/download/MacTab.astro → src/components/pages/download/vencord/MacTab.astro

@@ -1,10 +1,18 @@
 ---
 import Card, { CardKind } from "components/Card.svelte";
 import Code from "components/Code.astro";
-import Tab from "./Tab.astro";
+import Tab from "../Tab.astro";
+import { DOWNLOAD_BASE } from "scripts/constants";
 ---
 
-<Tab fileNames={["VencordInstaller.MacOs.zip"]}>
+<Tab
+    links={[
+        [
+            "for MacOS (Installer)",
+            `${DOWNLOAD_BASE}/VencordInstaller.MacOs.zip`,
+        ],
+    ]}
+>
     <p slot="header">
         Download the zip, unzip it and run <Code>VencordInstaller.app</Code>! It
         should list all Discord installs on your System. Pick the one you would

src/components/pages/download/WindowsTab.astro → src/components/pages/download/vencord/WindowsTab.astro

@@ -1,7 +1,7 @@
 ---
 import Card, { CardKind } from "components/Card.svelte";
 import Code from "components/Code.astro";
-import Tab from "./Tab.astro";
+import Tab from "../Tab.astro";
 import { DOWNLOAD_BASE } from "scripts/constants";
 import CodeBlock from "components/CodeBlock.svelte";
 
@@ -11,7 +11,15 @@ cd Downloads
 `.trim();
 ---
 
-<Tab fileNames={["VencordInstaller.exe", "VencordInstallerCli.exe"]}>
+<Tab
+    links={[
+        ["for Windows (Installer)", `${DOWNLOAD_BASE}/VencordInstaller.exe`],
+        [
+            "for Windows (CLI Installer)",
+            `${DOWNLOAD_BASE}/VencordInstallerCli.exe`,
+        ],
+    ]}
+>
     <div slot="header">
         <p>
             Download <Code>VencordInstaller.exe</Code> and run it. It should list

src/components/pages/download/vesktop/LinuxTab.astro

@@ -0,0 +1,35 @@
+---
+import Code from "components/Code.astro";
+import Tab from "../Tab.astro";
+import CodeBlock from "components/CodeBlock.svelte";
+import { WEBSITE_URL } from "scripts/constants";
+---
+
+<Tab
+    links={[
+        ["AppImage (amd64)", `${WEBSITE_URL}/download/vesktop/amd64/appimage`],
+        ["DEB (amd64)", `${WEBSITE_URL}/download/vesktop/amd64/deb`],
+        ["RPM (amd64)", `${WEBSITE_URL}/download/vesktop/amd64/rpm`],
+        ["tarball (amd64)", `${WEBSITE_URL}/download/vesktop/amd64/tar`],
+        ["AppImage (arm64)", `${WEBSITE_URL}/download/vesktop/arm64/appimage`],
+        ["DEB (arm64)", `${WEBSITE_URL}/download/vesktop/arm64/deb`],
+        ["RPM (arm64)", `${WEBSITE_URL}/download/vesktop/arm64/rpm`],
+        ["tarball (arm64)", `${WEBSITE_URL}/download/vesktop/arm64/tar`],
+    ]}
+>
+    <div slot="header">
+        <p>
+            Several packages are available for Vesktop Linux. Choose the
+            appropriate one for your distribution and architecture. If unsure,
+            choose one of the amd64 packages (depending on your Linux
+            distribution and/or preference).
+        </p>
+    </div>
+</Tab>
+
+<style>
+    h3 {
+        margin: 1em 0 0.5em;
+        font-size: 2em;
+    }
+</style>

src/components/pages/download/vesktop/MacTab.astro

@@ -0,0 +1,33 @@
+---
+import Card, { CardKind } from "components/Card.svelte";
+import Code from "components/Code.astro";
+import Tab from "../Tab.astro";
+import { WEBSITE_URL } from "scripts/constants";
+---
+
+<Tab
+    links={[
+        ["for MacOS (amd64)", `${WEBSITE_URL}/download/vesktop/amd64/dmg`],
+        ["for MacOS (arm64)", `${WEBSITE_URL}/download/vesktop/arm64/dmg`],
+    ]}
+>
+    <p slot="header">
+        Download the zip, unzip it and run <Code>VencordInstaller.app</Code>! It
+        should list all Discord installs on your System. Pick the one you would
+        like to patch and press Install.
+    </p>
+
+    <Card slot="footer" kind={CardKind.Warning}>
+        <p>
+            If you get a VencordInstaller can't be opened warning, right-click
+            VencordInstaller.app and click open
+        </p>
+        <p>
+            This warning is entirely harmless and only shows because the app is
+            not signed. Signing it would cost us <a
+                href="https://developer.apple.com/support/compare-memberships/"
+                >99€/year</a
+            >.
+        </p>
+    </Card>
+</Tab>

src/components/pages/download/vesktop/WindowsTab.astro

@@ -0,0 +1,38 @@
+---
+import Card, { CardKind } from "components/Card.svelte";
+import Code from "components/Code.astro";
+import Tab from "../Tab.astro";
+import { WEBSITE_URL } from "scripts/constants";
+import CodeBlock from "components/CodeBlock.svelte";
+---
+
+<Tab
+    links={[
+        [
+            "for Windows (Installer)",
+            `${WEBSITE_URL}/download/vesktop/amd64/windows`,
+        ],
+        [
+            "for Windows (Portable)",
+            `${WEBSITE_URL}/download/vesktop/amd64/windows-portable`,
+        ],
+    ]}
+>
+    <div slot="header">
+        <p>
+            Install Vesktop via Installer and run it or download portable
+            version and run it.
+        </p>
+    </div>
+</Tab>
+
+<style>
+    code {
+        overflow-wrap: anywhere;
+    }
+
+    h3 {
+        margin: 1em 0 0.5em;
+        font-size: 2em;
+    }
+</style>

src/pages/download.astro

@@ -3,24 +3,44 @@ export const prerender = true;
 
 import Layout from "../layouts/Layout.astro";
 
-import BrowserTab from "components/pages/download/BrowserTab.astro";
-import LinuxTab from "components/pages/download/LinuxTab.astro";
-import MacTab from "components/pages/download/MacTab.astro";
-import WindowsTab from "components/pages/download/WindowsTab.astro";
+import VencordBrowserTab from "components/pages/download/vencord/BrowserTab.astro";
+import VencordLinuxTab from "components/pages/download/vencord/LinuxTab.astro";
+import VencordMacTab from "components/pages/download/vencord/MacTab.astro";
+import VencordWindowsTab from "components/pages/download/vencord/WindowsTab.astro";
+
+import VesktopLinuxTab from "components/pages/download/vesktop/LinuxTab.astro";
+import VesktopMacTab from "components/pages/download/vesktop/MacTab.astro";
+import VesktopWindowsTab from "components/pages/download/vesktop/WindowsTab.astro";
+
 import DownloadTabs from "components/pages/download/index.svelte";
+
+const vesktopTabExclusions = ["Browser"];
 ---
 
 <Layout
-    title="Download Vencord"
+    title="Download"
     description="Download Vencord for Desktop or your favourite Browser"
     breadcrumbs={[["Download", "/download"]]}
 >
-    <DownloadTabs client:load>
+    <DownloadTabs client:load id="vencord">
         <h1 class="p-page-title" slot="title">Download Vencord</h1>
-        <WindowsTab slot="windowsTab" />
-        <LinuxTab slot="linuxTab" />
-        <MacTab slot="macTab" />
-        <BrowserTab slot="browserTab" />
+        <VencordWindowsTab slot="windowsTab" />
+        <VencordLinuxTab slot="linuxTab" />
+        <VencordMacTab slot="macTab" />
+        <VencordBrowserTab slot="browserTab" />
+    </DownloadTabs>
+
+    <DownloadTabs client:load id="vesktop" exclusions={vesktopTabExclusions}>
+        <h1
+            class="p-page-title"
+            slot="title"
+            style={`color: var(--accentGreen)`}
+        >
+            Download Vesktop
+        </h1>
+        <VesktopWindowsTab slot="windowsTab" />
+        <VesktopLinuxTab slot="linuxTab" />
+        <VesktopMacTab slot="macTab" />
     </DownloadTabs>
 </Layout>