Merge pull request #85 from zen-browser/revert-51-refactor/download-page
Revert "refactor: Improved platform detection, UI enhancements, and overall code quality"
This commit is contained in:
mauro 🤙
@@ -1,7 +1,6 @@
|
||||
"use client";
|
||||
|
||||
import { incrementDownloadCount } from "@/lib/db";
|
||||
import { useState, useEffect, useCallback } from "react";
|
||||
import { addDownload } from "@/lib/db";
|
||||
import { useState, useEffect } from "react";
|
||||
import styled, { keyframes } from "styled-components";
|
||||
import { ny } from "@/lib/utils";
|
||||
import { Checkbox } from "./ui/checkbox";
|
||||
@@ -9,36 +8,50 @@ import { ChevronLeft } from "lucide-react";
|
||||
import { Button } from "./ui/button";
|
||||
import Particles from "./ui/particles";
|
||||
import confetti from "canvas-confetti";
|
||||
import type {
|
||||
Architecture,
|
||||
LinuxDownloadType,
|
||||
Platform,
|
||||
WindowsDownloadType,
|
||||
} from "@/lib/releases";
|
||||
import { releases, releaseTree } from "@/lib/releases";
|
||||
import { InfoCircledIcon } from "@radix-ui/react-icons";
|
||||
import Link from "next/link";
|
||||
import SparklesText from "./ui/sparkles-text";
|
||||
import { useRouter } from "next/navigation";
|
||||
|
||||
const BASE_URL =
|
||||
"https://github.com/zen-browser/desktop/releases/latest/download";
|
||||
|
||||
import SparklesText from "./ui/sparkles-text";
|
||||
const field_enter = keyframes`
|
||||
0% { opacity: 0; transform: scale(0.9); filter: blur(10px); }
|
||||
1% { max-height: 100%; }
|
||||
100% { opacity: 1; transform: scale(1); filter: blur(0); }
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(0.9);
|
||||
filter: blur(10px);
|
||||
}
|
||||
1% {
|
||||
max-height: 100%;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
filter: blur(0);
|
||||
}
|
||||
`;
|
||||
|
||||
const field_exit = keyframes`
|
||||
from { display: flex; opacity: 1; transform: scale(1); filter: blur(0); }
|
||||
99% { opacity: 0; transform: scale(0.9); filter: blur(10px); }
|
||||
100% { display: none; }
|
||||
from {
|
||||
display: flex;
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
filter: blur(0);
|
||||
}
|
||||
99% {
|
||||
opacity: 0;
|
||||
transform: scale(0.9);
|
||||
filter: blur(10px);
|
||||
}
|
||||
100% {
|
||||
display: none;
|
||||
}
|
||||
`;
|
||||
|
||||
const FormField = styled.div<{ enter: boolean; out: boolean }>`
|
||||
max-height: 0;
|
||||
flex-direction: column;
|
||||
margin-top: 3rem;
|
||||
opacity: 0;
|
||||
width: 100%;
|
||||
animation: 0.2s ease-in-out forwards
|
||||
@@ -46,59 +59,53 @@ const FormField = styled.div<{ enter: boolean; out: boolean }>`
|
||||
animation-delay: ${({ enter }) => (enter ? "0.4s" : "0s")};
|
||||
`;
|
||||
|
||||
const FieldTitle = ({
|
||||
children,
|
||||
className,
|
||||
}: React.PropsWithChildren & React.HTMLAttributes<HTMLHeadElement>) => (
|
||||
<h2 className={ny("text-xl font-medium", className)}>{children}</h2>
|
||||
);
|
||||
const FieldTitle = styled.div`
|
||||
font-size: 1.35rem;
|
||||
font-weight: 500;
|
||||
`;
|
||||
|
||||
const FieldDescription = ({
|
||||
children,
|
||||
className,
|
||||
}: React.PropsWithChildren & React.HTMLAttributes<HTMLDivElement>) => (
|
||||
<p className={ny("text-base text-[#666] mb-4", className)}>{children}</p>
|
||||
);
|
||||
|
||||
const platforms = {
|
||||
Windows: { color: "blue", icon: "windows8" },
|
||||
Linux: { color: "yellow", icon: "linux" },
|
||||
MacOS: { color: "purple", icon: "apple" },
|
||||
};
|
||||
const FieldDescription = styled.div`
|
||||
font-size: 1rem;
|
||||
color: #666;
|
||||
margin-bottom: 1rem;
|
||||
`;
|
||||
|
||||
export default function DownloadPage() {
|
||||
const router = useRouter();
|
||||
|
||||
const [platform, setPlatform] = useState<Platform | null>(null);
|
||||
const [selectedPlatform, setSelectedPlatform] = useState<Platform | null>(
|
||||
const [platform, setPlatform] = useState<string | null>(null);
|
||||
const [architecture, setArchitecture] = useState<string | null>(null);
|
||||
const [windowsDownloadType, setWindowsDownloadType] = useState<string | null>(
|
||||
null
|
||||
);
|
||||
const [linuxDownloadType, setLinuxDownloadType] = useState<string | null>(
|
||||
null
|
||||
);
|
||||
|
||||
const [selectedArchitecture, setSelectedArchitecture] =
|
||||
useState<Architecture>("specific");
|
||||
const [selectedPlatform, setSelectedPlatform] = useState("");
|
||||
const [selectedArchitecture, setSelectedArchitecture] = useState("specific");
|
||||
const [selectedWindowsDownloadType, setSelectedWindowsDownloadType] =
|
||||
useState<WindowsDownloadType>("installer");
|
||||
useState("installer");
|
||||
const [selectedLinuxDownloadType, setSelectedLinuxDownloadType] =
|
||||
useState<LinuxDownloadType>("portable");
|
||||
useState("portable");
|
||||
|
||||
const [hasDownloaded, setHasDownloaded] = useState<boolean>(false);
|
||||
const [flowIndex, setFlowIndex] = useState<number>(0);
|
||||
const [hasDownloaded, setHasDownloaded] = useState(false);
|
||||
|
||||
const detectPlatform = useCallback(() => {
|
||||
if (typeof window === "undefined") return;
|
||||
|
||||
const userAgent = window.navigator.userAgent.toLowerCase();
|
||||
|
||||
if (userAgent.includes("win")) {
|
||||
const [flowIndex, setFlowIndex] = useState(0);
|
||||
useEffect(() => {
|
||||
let userAgent: string = "";
|
||||
if (typeof window !== "undefined") {
|
||||
userAgent = window.navigator.userAgent;
|
||||
}
|
||||
if (userAgent.includes("Win")) {
|
||||
setSelectedPlatform("Windows");
|
||||
} else if (userAgent.includes("mac")) {
|
||||
}
|
||||
if (userAgent.includes("Mac")) {
|
||||
setSelectedPlatform("MacOS");
|
||||
} else if (userAgent.includes("linux")) {
|
||||
}
|
||||
if (userAgent.includes("Linux")) {
|
||||
setSelectedPlatform("Linux");
|
||||
}
|
||||
}, []);
|
||||
|
||||
const throwConfetti = useCallback(() => {
|
||||
const throwConfetti = () => {
|
||||
const end = Date.now() + 3 * 1000; // 3 seconds
|
||||
const colors = ["#a786ff", "#fd8bbc", "#eca184", "#f8deb1"];
|
||||
const frame = () => {
|
||||
@@ -123,75 +130,68 @@ export default function DownloadPage() {
|
||||
requestAnimationFrame(frame);
|
||||
};
|
||||
frame();
|
||||
}, []);
|
||||
};
|
||||
|
||||
const getReleaseTarget = useCallback(():
|
||||
| keyof typeof releases
|
||||
| undefined => {
|
||||
const startDownload = () => {
|
||||
let releaseTarget: string;
|
||||
if (selectedLinuxDownloadType === "flatpak") {
|
||||
router.push(
|
||||
window.open(
|
||||
"https://dl.flathub.org/repo/appstream/io.github.zen_browser.zen.flatpakref"
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
if (!selectedPlatform) return;
|
||||
|
||||
const platformReleases = releaseTree[selectedPlatform.toLowerCase()];
|
||||
|
||||
if (selectedPlatform === "MacOS")
|
||||
return platformReleases[selectedArchitecture];
|
||||
|
||||
return platformReleases[selectedArchitecture][
|
||||
releaseTarget = "flatpak";
|
||||
} else {
|
||||
const platform = releaseTree[selectedPlatform.toLowerCase()];
|
||||
let arch: string = selectedArchitecture;
|
||||
if (selectedPlatform === "MacOS") {
|
||||
releaseTarget = platform[arch];
|
||||
} else {
|
||||
releaseTarget =
|
||||
platform[arch][
|
||||
selectedPlatform === "Windows"
|
||||
? selectedWindowsDownloadType
|
||||
: selectedLinuxDownloadType
|
||||
? (selectedWindowsDownloadType as string)
|
||||
: (selectedLinuxDownloadType as string)
|
||||
];
|
||||
}, [
|
||||
router,
|
||||
selectedArchitecture,
|
||||
selectedLinuxDownloadType,
|
||||
selectedPlatform,
|
||||
selectedWindowsDownloadType,
|
||||
]);
|
||||
|
||||
const startDownload = useCallback(() => {
|
||||
const releaseTarget = getReleaseTarget();
|
||||
|
||||
if (!releaseTarget) return;
|
||||
|
||||
router.push(`${BASE_URL}/${releases[releaseTarget]}`);
|
||||
|
||||
}
|
||||
console.log("Downloading: ");
|
||||
console.log("platform: ", selectedPlatform);
|
||||
console.log("compat: ", arch);
|
||||
window.location.replace(`${BASE_URL}/${releases[releaseTarget]}`);
|
||||
}
|
||||
setHasDownloaded(true);
|
||||
incrementDownloadCount(releaseTarget);
|
||||
addDownload(releaseTarget);
|
||||
throwConfetti();
|
||||
}, [getReleaseTarget, router, throwConfetti]);
|
||||
};
|
||||
|
||||
const continueFlow = useCallback(() => {
|
||||
const continueFlow = () => {
|
||||
if (flowIndex === 0) setPlatform(selectedPlatform);
|
||||
if (flowIndex === 1) setArchitecture(selectedArchitecture);
|
||||
if (flowIndex === 2 || (flowIndex === 1 && platform === "MacOS")) {
|
||||
setWindowsDownloadType(selectedWindowsDownloadType);
|
||||
setLinuxDownloadType(selectedLinuxDownloadType);
|
||||
startDownload();
|
||||
}
|
||||
setFlowIndex(flowIndex + 1);
|
||||
}, [flowIndex, platform, selectedPlatform, startDownload]);
|
||||
};
|
||||
|
||||
const goBackFlow = useCallback(() => {
|
||||
if (flowIndex === 1) setPlatform(null);
|
||||
else if (flowIndex === 3) {
|
||||
const goBackFlow = () => {
|
||||
if (flowIndex === 1) {
|
||||
setPlatform(null);
|
||||
} else if (flowIndex === 2) {
|
||||
setArchitecture(null);
|
||||
} else if (flowIndex === 3) {
|
||||
setWindowsDownloadType(null);
|
||||
setSelectedWindowsDownloadType("installer");
|
||||
setLinuxDownloadType(null);
|
||||
setSelectedLinuxDownloadType("portable");
|
||||
}
|
||||
if (flowIndex > 0) setFlowIndex(flowIndex - 1);
|
||||
}, [flowIndex]);
|
||||
};
|
||||
|
||||
const changeToFlatpak = useCallback(() => {
|
||||
if (selectedArchitecture !== "specific") return;
|
||||
const changeToFlatpak = () => {
|
||||
if (selectedArchitecture === "specific") {
|
||||
setSelectedLinuxDownloadType("flatpak");
|
||||
}, [selectedArchitecture]);
|
||||
|
||||
useEffect(() => {
|
||||
detectPlatform();
|
||||
}, [detectPlatform]);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
@@ -244,52 +244,63 @@ export default function DownloadPage() {
|
||||
<Button
|
||||
className="mt-5"
|
||||
onClick={() =>
|
||||
router.push(
|
||||
"https://docs.zen-browser.app/guides/install-macos"
|
||||
)
|
||||
(window.location.href =
|
||||
"https://docs.zen-browser.app/guides/install-macos")
|
||||
}
|
||||
>
|
||||
Read Installation Instructions
|
||||
Download Zen for MacOS
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)) || (
|
||||
<>
|
||||
<h1 className="text-6xl font-bold flex flex-col lg:flex-row">
|
||||
Download <SparklesText className="mx-2" text="Zen" />
|
||||
</h1>
|
||||
<h1 className="text-6xl font-bold flex flex-col lg:flex-row">Download <SparklesText className="mx-2" text="Zen" /></h1>
|
||||
<p className="text-muted-foreground mt-3">
|
||||
We're thrilled for you to experience Zen Browser. First, let us
|
||||
know which device you're using. This will only take a moment, we
|
||||
promise.
|
||||
We're thrilled for you to experience Zen Browser. First, let us know which device you're using. This will only take a moment, we promise.
|
||||
</p>
|
||||
</>
|
||||
)}
|
||||
<div className="relative w-full pt-12">
|
||||
{/* Platform */}
|
||||
{!platform && (
|
||||
<FormField enter={!platform} out={!platform}>
|
||||
<div className="relative w-full">
|
||||
{platform === null && (
|
||||
<FormField enter={platform === null} out={platform !== null}>
|
||||
<FieldTitle>Platform</FieldTitle>
|
||||
<FieldDescription>
|
||||
Choose the platform you want to download Zen for.
|
||||
</FieldDescription>
|
||||
{Object.entries(platforms).map(([plat, { color, icon }]) => (
|
||||
<div
|
||||
key={plat}
|
||||
onClick={() => setSelectedPlatform(plat as Platform)}
|
||||
onClick={() => setSelectedPlatform("Windows")}
|
||||
className={ny(
|
||||
"select-none mb-2 px-4 py-3 flex items-center rounded-lg bg-background cursor-pointer border",
|
||||
selectedPlatform === plat && `border-${color}-400`
|
||||
selectedPlatform === "Windows" ? "border-blue-400" : ""
|
||||
)}
|
||||
>
|
||||
<Checkbox checked={selectedPlatform === plat} />
|
||||
<i
|
||||
className={`devicon-${icon}-plain ml-3 p-2 border border-${color}-400 rounded-lg`}
|
||||
></i>
|
||||
<div className="ml-2">{plat}</div>
|
||||
<Checkbox checked={selectedPlatform === "Windows"} />
|
||||
<i className="devicon-windows8-original ml-3 p-2 border border-blue-400 rounded-lg"></i>
|
||||
<div className="ml-2">Windows</div>
|
||||
</div>
|
||||
<div
|
||||
onClick={() => setSelectedPlatform("Linux")}
|
||||
className={ny(
|
||||
"select-none mb-2 px-4 py-3 flex items-center rounded-lg bg-background cursor-pointer border",
|
||||
selectedPlatform === "Linux" ? "border-yellow-400" : ""
|
||||
)}
|
||||
>
|
||||
<Checkbox checked={selectedPlatform === "Linux"} />
|
||||
<i className="devicon-linux-plain ml-3 p-2 border border-yellow-400 rounded-lg"></i>
|
||||
<div className="ml-2">Linux</div>
|
||||
</div>
|
||||
<div
|
||||
onClick={() => setSelectedPlatform("MacOS")}
|
||||
className={ny(
|
||||
"select-none mb-2 px-4 py-3 flex items-center rounded-lg bg-background cursor-pointer border",
|
||||
selectedPlatform === "MacOS" ? "border-purple-400" : ""
|
||||
)}
|
||||
>
|
||||
<Checkbox checked={selectedPlatform === "MacOS"} />
|
||||
<i className="devicon-apple-original p-2 border border-purple-400 ml-3 rounded-lg"></i>
|
||||
<div className="ml-2 font-bold">MacOS</div>
|
||||
</div>
|
||||
))}
|
||||
</FormField>
|
||||
)}
|
||||
{/* Architecture */}
|
||||
@@ -311,30 +322,38 @@ export default function DownloadPage() {
|
||||
Choose the architecture of your device, either optimized or
|
||||
generic.
|
||||
</FieldDescription>
|
||||
<div className="flex items-center justify-center gap-2">
|
||||
<div className="flex items-center justify-center">
|
||||
<div
|
||||
onClick={() => setSelectedArchitecture("specific")}
|
||||
className={ny(
|
||||
"select-none w-full h-full mb-2 p-5 flex flex-col items-center rounded-lg bg-background cursor-pointer border",
|
||||
selectedArchitecture === "specific" && "border-blue-400"
|
||||
selectedArchitecture === "specific"
|
||||
? "border-blue-400"
|
||||
: ""
|
||||
)}
|
||||
>
|
||||
<h1 className="text-5xl my-2">🚀</h1>
|
||||
<h1 className="text-xl font-semibold my-2">Optimized</h1>
|
||||
<p className="text-muted-foreground mx-auto text-center text-balance text-sm">
|
||||
<h1 className="text-5xl my-2 opacity-40 dark:opacity-20">
|
||||
🚀
|
||||
</h1>
|
||||
<h1 className="text-2xl font-semibold my-2">Optimized</h1>
|
||||
<p className="text-muted-foreground mx-auto text-center">
|
||||
Blazing fast and compatible with modern devices
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
onClick={() => setSelectedArchitecture("generic")}
|
||||
className={ny(
|
||||
"select-none w-full h-full mb-2 p-5 flex flex-col items-center rounded-lg bg-background cursor-pointer border",
|
||||
selectedArchitecture === "generic" && "border-blue-400"
|
||||
"select-none w-full h-full mb-2 ml-10 p-5 flex flex-col items-center rounded-lg bg-background cursor-pointer border",
|
||||
selectedArchitecture === "generic"
|
||||
? "border-blue-400"
|
||||
: ""
|
||||
)}
|
||||
>
|
||||
<h1 className="text-5xl my-2">👴</h1>
|
||||
<h1 className="text-xl font-semibold my-2">Generic</h1>
|
||||
<p className="text-muted-foreground mx-auto text-center text-balance text-sm">
|
||||
<h1 className="text-5xl my-2 opacity-40 dark:opacity-20">
|
||||
👴
|
||||
</h1>
|
||||
<h1 className="text-2xl font-semibold my-2">Generic</h1>
|
||||
<p className="text-muted-foreground mx-auto text-center">
|
||||
Slow but compatible with older devices.
|
||||
</p>
|
||||
</div>
|
||||
@@ -350,33 +369,39 @@ export default function DownloadPage() {
|
||||
<FieldDescription>
|
||||
Click the button below to download Zen for MacOS.
|
||||
</FieldDescription>
|
||||
<div className="flex items-center justify-center gap-2">
|
||||
<button
|
||||
<div className="flex items-center justify-center">
|
||||
<div
|
||||
onClick={() => setSelectedArchitecture("specific")}
|
||||
className={ny(
|
||||
"select-none w-full h-full mb-2 p-5 flex flex-col items-center rounded-lg bg-background cursor-pointer border",
|
||||
selectedArchitecture === "specific" && "border-blue-400"
|
||||
selectedArchitecture === "specific"
|
||||
? "border-blue-400"
|
||||
: ""
|
||||
)}
|
||||
>
|
||||
<h1 className="text-5xl my-2">🍏</h1>
|
||||
<h1 className="text-xl font-semibold my-2">aarch64</h1>
|
||||
<p className="text-muted-foreground mx-auto text-center text-balance text-sm">
|
||||
64-bit ARM architecture, for Apple's M Series Chips
|
||||
</p>
|
||||
</button>
|
||||
<button
|
||||
<h1 className="text-5xl my-2 opacity-40 dark:opacity-20">
|
||||
🍏
|
||||
</h1>
|
||||
<h1 className="text-2xl font-semibold my-2">aarch64</h1>
|
||||
<p className="text-muted-foreground mx-auto text-center">64-bit ARM architecture, for Apple's M Series Chips</p>
|
||||
</div>
|
||||
<div
|
||||
onClick={() => setSelectedArchitecture("generic")}
|
||||
className={ny(
|
||||
"select-none w-full h-full mb-2 p-5 flex flex-col items-center rounded-lg bg-background cursor-pointer border",
|
||||
selectedArchitecture === "generic" && "border-blue-400"
|
||||
"select-none w-full h-full mb-2 ml-10 p-5 flex flex-col items-center rounded-lg bg-background cursor-pointer border",
|
||||
selectedArchitecture === "generic"
|
||||
? "border-blue-400"
|
||||
: ""
|
||||
)}
|
||||
>
|
||||
<h1 className="text-5xl font-bold my-2">x64</h1>
|
||||
<h1 className="text-xl font-semibold my-2">Intel</h1>
|
||||
<p className="text-muted-foreground mx-auto text-center text-balance text-sm">
|
||||
<h1 className="text-5xl font-bold my-2 opacity-40 dark:opacity-20">
|
||||
x64
|
||||
</h1>
|
||||
<h1 className="text-2xl font-semibold my-2">Intel</h1>
|
||||
<p className="text-muted-foreground mx-auto text-center">
|
||||
64-bit Intel architecture, for older Macs
|
||||
</p>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</FormField>
|
||||
)}
|
||||
@@ -391,35 +416,41 @@ export default function DownloadPage() {
|
||||
<FieldDescription>
|
||||
Choose the type of download you want for Zen for Windows.
|
||||
</FieldDescription>
|
||||
<div className="flex items-center justify-center gap-2">
|
||||
<button
|
||||
<div className="flex items-center justify-center">
|
||||
<div
|
||||
onClick={() => setSelectedWindowsDownloadType("installer")}
|
||||
className={ny(
|
||||
"select-none w-full h-full mb-2 p-5 flex flex-col items-center rounded-lg bg-background cursor-pointer border",
|
||||
selectedWindowsDownloadType === "installer" &&
|
||||
"border-blue-400"
|
||||
selectedWindowsDownloadType === "installer"
|
||||
? "border-blue-400"
|
||||
: ""
|
||||
)}
|
||||
>
|
||||
<h1 className="text-5xl my-2">🚀</h1>
|
||||
<h1 className="text-xl font-semibold my-2">Installer</h1>
|
||||
<p className="text-muted-foreground mx-auto text-center text-balance text-sm">
|
||||
<h1 className="text-5xl my-2 opacity-40 dark:opacity-20">
|
||||
🚀
|
||||
</h1>
|
||||
<h1 className="text-2xl font-semibold my-2">Installer</h1>
|
||||
<p className="text-muted-foreground mx-auto text-center">
|
||||
Install Zen with a setup wizard
|
||||
</p>
|
||||
</button>
|
||||
<button
|
||||
</div>
|
||||
<div
|
||||
onClick={() => setSelectedWindowsDownloadType("portable")}
|
||||
className={ny(
|
||||
"select-none w-full h-full mb-2 p-5 flex flex-col items-center rounded-lg bg-background cursor-pointer border",
|
||||
selectedWindowsDownloadType === "portable" &&
|
||||
"border-blue-400"
|
||||
"select-none w-full h-full mb-2 ml-10 p-5 flex flex-col items-center rounded-lg bg-background cursor-pointer border",
|
||||
selectedWindowsDownloadType === "portable"
|
||||
? "border-blue-400"
|
||||
: ""
|
||||
)}
|
||||
>
|
||||
<h1 className="text-5xl my-2">📦</h1>
|
||||
<h1 className="text-xl font-semibold my-2">Portable</h1>
|
||||
<p className="text-muted-foreground mx-auto text-center text-balance text-sm">
|
||||
<h1 className="text-5xl my-2 opacity-40 dark:opacity-20">
|
||||
📦
|
||||
</h1>
|
||||
<h1 className="text-2xl font-semibold my-2">Portable</h1>
|
||||
<p className="text-muted-foreground mx-auto text-center">
|
||||
Download Zen as a ZIP file
|
||||
</p>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</FormField>
|
||||
)}
|
||||
@@ -434,51 +465,61 @@ export default function DownloadPage() {
|
||||
<FieldDescription>
|
||||
Choose the type of download you want for Zen for Linux.
|
||||
</FieldDescription>
|
||||
<div className="flex items-center justify-center gap-2">
|
||||
<article
|
||||
<div className="flex items-center justify-center">
|
||||
<div
|
||||
onClick={() => setSelectedLinuxDownloadType("appimage")}
|
||||
className={ny(
|
||||
"select-none w-full h-full mb-2 p-5 flex flex-col items-center rounded-lg bg-background cursor-pointer border space-y-2",
|
||||
selectedLinuxDownloadType === "appimage" &&
|
||||
"border-blue-400"
|
||||
"select-none w-full h-full mb-2 p-5 flex flex-col items-center rounded-lg bg-background cursor-pointer border",
|
||||
selectedLinuxDownloadType === "appimage"
|
||||
? "border-blue-400"
|
||||
: ""
|
||||
)}
|
||||
>
|
||||
<h1 className="text-5xl">🚀</h1>
|
||||
<h1 className="text-xl font-semibold">AppImage</h1>
|
||||
<p className="text-muted-foreground text-center text-balance text-sm">
|
||||
<h1 className="text-5xl my-2 opacity-40 dark:opacity-20">
|
||||
🚀
|
||||
</h1>
|
||||
<h1 className="text-2xl font-semibold my-2">AppImage</h1>
|
||||
<p className="text-muted-foreground mx-auto text-center">
|
||||
Install Zen with a setup wizard
|
||||
</p>
|
||||
</article>
|
||||
<article
|
||||
</div>
|
||||
<div
|
||||
onClick={() => setSelectedLinuxDownloadType("portable")}
|
||||
className={ny(
|
||||
"select-none w-full h-full mb-2 p-5 flex flex-col items-center rounded-lg bg-background cursor-pointer border space-y-2",
|
||||
selectedLinuxDownloadType === "portable" &&
|
||||
"border-blue-400"
|
||||
"select-none w-full h-full mb-2 ml-5 p-5 flex flex-col items-center rounded-lg bg-background cursor-pointer border",
|
||||
selectedLinuxDownloadType === "portable"
|
||||
? "border-blue-400"
|
||||
: ""
|
||||
)}
|
||||
>
|
||||
<h1 className="text-5xl">📦</h1>
|
||||
<h1 className="text-xl font-semibold">Portable</h1>
|
||||
<p className="text-muted-foreground text-center text-balance text-sm">
|
||||
<h1 className="text-5xl my-2 opacity-40 dark:opacity-20">
|
||||
📦
|
||||
</h1>
|
||||
<h1 className="text-2xl font-semibold my-2">Portable</h1>
|
||||
<p className="text-muted-foreground mx-auto text-center">
|
||||
Download Zen as a ZIP file
|
||||
</p>
|
||||
</article>
|
||||
<article
|
||||
onClick={changeToFlatpak}
|
||||
</div>
|
||||
<div
|
||||
onClick={() => changeToFlatpak()}
|
||||
className={ny(
|
||||
"select-none w-full h-full mb-2 p-5 flex flex-col items-center rounded-lg bg-background cursor-pointer border space-y-2",
|
||||
selectedLinuxDownloadType === "flatpak" &&
|
||||
"border-blue-400",
|
||||
selectedArchitecture === "generic" &&
|
||||
"opacity-50 cursor-not-allowed"
|
||||
"select-none w-full h-full mb-2 ml-5 p-5 flex flex-col items-center rounded-lg bg-background cursor-pointer border",
|
||||
selectedLinuxDownloadType === "flatpak"
|
||||
? "border-blue-400"
|
||||
: "",
|
||||
selectedArchitecture === "generic"
|
||||
? "opacity-50 cursor-not-allowed"
|
||||
: ""
|
||||
)}
|
||||
>
|
||||
<h1 className="text-5xl">🧑💻</h1>
|
||||
<h1 className="text-xl font-semibold">Flatpak</h1>
|
||||
<p className="text-muted-foreground text-center text-balance text-sm">
|
||||
<h1 className="text-5xl my-2 opacity-40 dark:opacity-20">
|
||||
🧑💻
|
||||
</h1>
|
||||
<h1 className="text-2xl font-semibold my-2">Flatpak</h1>
|
||||
<p className="text-muted-foreground mx-auto text-center">
|
||||
Install Zen from the Flatpak repository.
|
||||
</p>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</FormField>
|
||||
)}
|
||||
@@ -487,13 +528,19 @@ export default function DownloadPage() {
|
||||
<div className="mt-5 flex items-center justify-between">
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={goBackFlow}
|
||||
className={ny("opacity-70", !platform && "invisible")}
|
||||
onClick={() => goBackFlow()}
|
||||
className={ny(
|
||||
"opacity-70",
|
||||
platform === null ? "invisible" : ""
|
||||
)}
|
||||
>
|
||||
<ChevronLeft className="size-4" />
|
||||
Back
|
||||
</Button>
|
||||
<Button onClick={continueFlow} disabled={!selectedPlatform}>
|
||||
<Button
|
||||
onClick={() => continueFlow()}
|
||||
disabled={selectedPlatform === null}
|
||||
>
|
||||
{(flowIndex === 1 && platform === "MacOS") || flowIndex === 2
|
||||
? "Download 🥳"
|
||||
: "Continue"}
|
||||
@@ -502,7 +549,7 @@ export default function DownloadPage() {
|
||||
)}
|
||||
{(platform === "Linux" || platform === "Windows") &&
|
||||
flowIndex === 1 && (
|
||||
<div className="mt-5 flex items-center justify-center">
|
||||
<div className="mt-5 flex items-center">
|
||||
<InfoCircledIcon className="size-4 mr-2" />
|
||||
<p className="text-muted-foreground">
|
||||
Confused about which build to choose?{" "}
|
||||
|
||||
@@ -1,49 +1,31 @@
|
||||
"use server";
|
||||
|
||||
import { createClient } from "@supabase/supabase-js";
|
||||
import { releases } from "./releases";
|
||||
import { createClient } from '@supabase/supabase-js'
|
||||
|
||||
const supabaseUrl = "https://dmthyedfjzcysoekmyns.supabase.co";
|
||||
const supabaseUrl = 'https://dmthyedfjzcysoekmyns.supabase.co'
|
||||
const supabaseKey = process.env.SUPABASE_KEY as string;
|
||||
const supabase = createClient(supabaseUrl, supabaseKey);
|
||||
|
||||
const DOWNLOADS_TABLE = "downloads";
|
||||
const PLATFORM_COLUMN = "platform";
|
||||
const COUNT_COLUMN = "count";
|
||||
|
||||
export async function incrementDownloadCount(platform: keyof typeof releases) {
|
||||
try {
|
||||
//? Check if the download count for the platform exists
|
||||
export async function addDownload(platform: string) {
|
||||
// Check if the download count for the platform exists
|
||||
const { data, error } = await supabase
|
||||
.from(DOWNLOADS_TABLE)
|
||||
.select(COUNT_COLUMN)
|
||||
.eq(PLATFORM_COLUMN, platform);
|
||||
|
||||
if (error) throw new Error("Error fetching download count");
|
||||
|
||||
if (!data || data.length === 0) {
|
||||
//? If it doesn't exist, create it
|
||||
const { data: insertData, error: insertError } = await supabase
|
||||
.from(DOWNLOADS_TABLE)
|
||||
.from('downloads')
|
||||
.select('count')
|
||||
.eq('platform', platform)
|
||||
// If it doesn't exist, create it
|
||||
console.log(data)
|
||||
if (data?.length === 0 || data === null) {
|
||||
const {data, error} = await supabase
|
||||
.from('downloads')
|
||||
.insert([{ platform, count: 1 }]);
|
||||
|
||||
if (insertError) throw new Error("Error inserting download count");
|
||||
|
||||
return insertData;
|
||||
if (error) {
|
||||
console.error(error)
|
||||
}
|
||||
} else {
|
||||
//? If it exists, increment the count
|
||||
const newCount = data![0][COUNT_COLUMN] + 1;
|
||||
const { data: updateData, error: updateError } = await supabase
|
||||
.from(DOWNLOADS_TABLE)
|
||||
.update({ count: newCount })
|
||||
.eq(PLATFORM_COLUMN, platform);
|
||||
|
||||
if (updateError) throw new Error("Error updating download count");
|
||||
|
||||
return updateData;
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Unexpected error in addDownload:", err);
|
||||
throw err;
|
||||
// If it exists, increment the count
|
||||
await supabase
|
||||
.from('downloads')
|
||||
.update({ count: data![0].count + 1 })
|
||||
.eq('platform', platform)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
export const releases = {
|
||||
export const releases: any = {
|
||||
WindowsInstaller: "zen.installer.exe",
|
||||
WindowsInstallerGeneric: "zen.installer-generic.exe",
|
||||
|
||||
@@ -13,7 +13,7 @@ export const releases = {
|
||||
|
||||
LinuxAppImage: "zen-specific.AppImage",
|
||||
LinuxAppImageGeneric: "zen-generic.AppImage",
|
||||
} as const;
|
||||
};
|
||||
|
||||
// platform
|
||||
// -> arch
|
||||
@@ -44,11 +44,3 @@ export const releaseTree: any = {
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
type Platform = "Windows" | "MacOS" | "Linux";
|
||||
type Architecture = "specific" | "generic";
|
||||
|
||||
type WindowsDownloadType = "installer" | "portable";
|
||||
type LinuxDownloadType = "portable" | "appimage" | "flatpak";
|
||||
|
||||
export type { Platform, Architecture, WindowsDownloadType, LinuxDownloadType };
|
||||
|
||||
Reference in New Issue
Block a user