joshuafhiggins/realm-homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #207 from ZhenyaGoroh/Script-for-flatpak-installation

Browse Source 
Script for flatpak installation
This commit is contained in:
NOCanoa
2024-10-02 20:54:06 +01:00
committed by GitHub
parent b4ce39af20 ea5d9c8dc0
commit 82b8daec68
1 changed files with 32 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
src/components/download.tsx
View File

@@ -192,6 +192,9 @@ export default function DownloadPage() {
const linuxAppimageBashScript = const linuxAppimageBashScript =
"bash <(curl https://updates.zen-browser.app/appimage.sh)"; "bash <(curl https://updates.zen-browser.app/appimage.sh)";
const linuxFlatpakScript =
"flatpak install flathub io.github.zen_browser.zen";
return ( return (
<> <>
<link <link
@@ -233,7 +236,7 @@ export default function DownloadPage() {
</div> </div>
{selectedLinuxDownloadType === "appimage" && ( {selectedLinuxDownloadType === "appimage" && (
<div className="mt-10 rounded-md border bg-surface p-5 shadow"> <div className="mt-10 rounded-md border bg-surface p-5 shadow">
<div className="flex"> <div className="flex items-center">
<InfoIcon className="size-4" /> <InfoIcon className="size-4" />
<p className="ml-3 font-bold">AppImage users?</p> <p className="ml-3 font-bold">AppImage users?</p>
</div> </div>
@@ -241,12 +244,25 @@ export default function DownloadPage() {
If you're using an AppImage, you can use the automatic If you're using an AppImage, you can use the automatic
installer, check it out{" "} installer, check it out{" "}
</p> </p>
<pre className="mt-2 flex items-center rounded-md bg-background p-2 text-muted-foreground"> <pre className="mt-2 flex items-center justify-between rounded-md bg-background p-2 text-muted-foreground">
{linuxAppimageBashScript} {linuxAppimageBashScript}
<CopyButton <CopyButton valueToCopy={linuxAppimageBashScript} />
className="ml-3" </pre>
valueToCopy={linuxAppimageBashScript} </div>
/> )}
{selectedLinuxDownloadType === "flatpak" && (
<div className="mt-10 rounded-md border bg-surface p-5 shadow">
<div className="flex items-center">
<InfoIcon className="size-4" />
<p className="ml-3 font-bold">Flatpak users?</p>
</div>
<p className="mt-2 text-muted-foreground">
If you're using Flatpak, you can install Zen Browser with
the following command
</p>
<pre className="mt-2 flex items-center justify-between rounded-md bg-background p-2 text-muted-foreground">
{linuxFlatpakScript}
<CopyButton valueToCopy={linuxFlatpakScript} />
</pre> </pre>
</div> </div>
)} )}
@@ -347,11 +363,11 @@ export default function DownloadPage() {
Choose the architecture of your device, either optimized or Choose the architecture of your device, either optimized or
generic. generic.
</FieldDescription> </FieldDescription>
<div className="flex items-center justify-center"> <div className="flex items-stretch justify-center">
<div <div
onClick={() => setSelectedArchitecture("specific")} onClick={() => setSelectedArchitecture("specific")}
className={ny( className={ny(
"mb-2 flex h-full w-full cursor-pointer select-none flex-col items-center rounded-lg border bg-background p-5", "mb-2 flex flex-1 cursor-pointer select-none flex-col items-center rounded-lg border bg-background p-5",
selectedArchitecture === "specific" selectedArchitecture === "specific"
? "border-blue-400" ? "border-blue-400"
: "", : "",
@@ -368,7 +384,7 @@ export default function DownloadPage() {
<div <div
onClick={() => setSelectedArchitecture("generic")} onClick={() => setSelectedArchitecture("generic")}
className={ny( className={ny(
"mb-2 ml-10 flex h-full w-full cursor-pointer select-none flex-col items-center rounded-lg border bg-background p-5", "mb-2 ml-10 flex flex-1 cursor-pointer select-none flex-col items-center rounded-lg border bg-background p-5",
selectedArchitecture === "generic" selectedArchitecture === "generic"
? "border-blue-400" ? "border-blue-400"
: "", : "",
@@ -443,11 +459,11 @@ export default function DownloadPage() {
<FieldDescription> <FieldDescription>
Choose the type of download you want for Zen for Windows. Choose the type of download you want for Zen for Windows.
</FieldDescription> </FieldDescription>
<div className="flex items-center justify-center"> <div className="flex items-stretch justify-center">
<div <div
onClick={() => setSelectedWindowsDownloadType("installer")} onClick={() => setSelectedWindowsDownloadType("installer")}
className={ny( className={ny(
"mb-2 flex h-full w-full cursor-pointer select-none flex-col items-center rounded-lg border bg-background p-5", "mb-2 flex flex-1 cursor-pointer select-none flex-col items-center rounded-lg border bg-background p-5",
selectedWindowsDownloadType === "installer" selectedWindowsDownloadType === "installer"
? "border-blue-400" ? "border-blue-400"
: "", : "",
@@ -464,7 +480,7 @@ export default function DownloadPage() {
<div <div
onClick={() => setSelectedWindowsDownloadType("portable")} onClick={() => setSelectedWindowsDownloadType("portable")}
className={ny( className={ny(
"mb-2 ml-10 flex h-full w-full cursor-pointer select-none flex-col items-center rounded-lg border bg-background p-5", "mb-2 ml-10 flex flex-1 cursor-pointer select-none flex-col items-center rounded-lg border bg-background p-5",
selectedWindowsDownloadType === "portable" selectedWindowsDownloadType === "portable"
? "border-blue-400" ? "border-blue-400"
: "", : "",
@@ -492,11 +508,11 @@ export default function DownloadPage() {
<FieldDescription> <FieldDescription>
Choose the type of download you want for Zen for Linux. Choose the type of download you want for Zen for Linux.
</FieldDescription> </FieldDescription>
<div className="flex items-center justify-center"> <div className="flex items-stretch justify-center">
<div <div
onClick={() => setSelectedLinuxDownloadType("appimage")} onClick={() => setSelectedLinuxDownloadType("appimage")}
className={ny( className={ny(
"mb-2 flex h-full w-full cursor-pointer select-none flex-col items-center rounded-lg border bg-background p-5", "mb-2 flex flex-1 cursor-pointer select-none flex-col items-center rounded-lg border bg-background p-5",
selectedLinuxDownloadType === "appimage" selectedLinuxDownloadType === "appimage"
? "border-blue-400" ? "border-blue-400"
: "", : "",
@@ -513,7 +529,7 @@ export default function DownloadPage() {
<div <div
onClick={() => setSelectedLinuxDownloadType("portable")} onClick={() => setSelectedLinuxDownloadType("portable")}
className={ny( className={ny(
"mb-2 ml-5 flex h-full w-full cursor-pointer select-none flex-col items-center rounded-lg border bg-background p-5", "mb-2 ml-5 flex flex-1 cursor-pointer select-none flex-col items-center rounded-lg border bg-background p-5",
selectedLinuxDownloadType === "portable" selectedLinuxDownloadType === "portable"
? "border-blue-400" ? "border-blue-400"
: "", : "",
@@ -530,7 +546,7 @@ export default function DownloadPage() {
<div <div
onClick={() => changeToFlatpak()} onClick={() => changeToFlatpak()}
className={ny( className={ny(
"mb-2 ml-5 flex h-full w-full cursor-pointer select-none flex-col items-center rounded-lg border bg-background p-5", "mb-2 ml-5 flex flex-1 cursor-pointer select-none flex-col items-center rounded-lg border bg-background p-5",
selectedLinuxDownloadType === "flatpak" selectedLinuxDownloadType === "flatpak"
? "border-blue-400" ? "border-blue-400"
: "", : "",