website/pikaos-site
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update download section so it can handle mirrors and different ISOs

Browse Source
This commit is contained in:
ferrreo 2023-02-17 14:46:32 +00:00
parent 4bf45a1eef
commit 1a0f5c1d59
4 changed files with 73 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/widgets/CallToAction.astro
View File

@ -43,7 +43,7 @@ const {
callToAction.text &&
callToAction.href && (
<div class="mt-6 max-w-xs mx-auto">
<a class="btn btn-primary w-full sm:w-auto" href={callToAction.href} target="_blank" rel="noopener">
<a class="btn btn-primary w-full sm:w-auto" href={callToAction.href}>
{callToAction.icon && <Icon name={callToAction.icon} class="w-5 h-5 mr-1 -ml-1.5" />}
{callToAction.text}
</a>

51
src/components/widgets/Downloads.astro Normal file
View File

@ -0,0 +1,51 @@
---
import { Icon } from 'astro-icon';
interface Download {
text: string;
hrefEU: string;
hrefWW: string;
md5: string;
isComgingSoon: boolean;
}
export interface Props {
title?: string;
description?: string;
downloads: Array<Download>;
}
const {
title = await Astro.slots.render('title'),
subtitle = await Astro.slots.render('subtitle'),
downloads = [],
} = Astro.props;
---
<section class="relative">
<div class="max-w-6xl mx-auto px-4 sm:px-6">
<div class="py-12 md:py-20">
<div
class="max-w-3xl mx-auto text-center p-6 rounded-md shadow-xl dark:shadow-none dark:border dark:border-slate-600"
>
{
title && (
<h2
class="text-4xl md:text-4xl font-bold leading-tighter tracking-tighter mb-4 font-heading"
set:html={title}
/>
)
}
{subtitle && <p class="text-xl text-gray-600 dark:text-slate-400" set:html={subtitle} />}
<div class="grid grid-cols-4 gap-4"><div class="mb-3 text-xl font-bold">ISO</div><div class="mb-3 text-xl font-bold">EU Mirror</div><div class="mb-3 text-xl font-bold">World Mirror</div><div class="mb-3 text-xl font-bold">hash</div>
{
downloads &&
downloads.map((download) => (
<div>{download.text}</div><div>{download.isComgingSoon ? "Coming Soon" : (<a class="flex flex-row flex-auto justify-center" href={download.hrefEU} target="_blank">{<Icon name="tabler:download" class="w-5 h-5 mr-1 -ml-1.5" />}ISO</a>)}</div><div>{download.isComgingSoon ? "Coming Soon" : (<a class="flex flex-row flex-auto justify-center" href={download.hrefWW} target="_blank">{<Icon name="tabler:download" class="w-5 h-5 mr-1 -ml-1.5" />}ISO</a>)}</div><div>{download.isComgingSoon ? "Coming Soon" : (<a class="flex flex-row flex-auto justify-center" href={download.md5} target="_blank">{<Icon name="tabler:download" class="w-5 h-5 mr-1 -ml-1.5" />}MD5</a>)}</div>
))
}
</div>
</div>
</div>
</div>
</section>

2
src/components/widgets/Hero.astro
View File

@ -46,7 +46,7 @@ const {
{typeof callToAction === 'string' ? (
<Fragment set:html={callToAction} />
) : (
<a class="btn btn-primary sm:mb-0 w-full" href={callToAction?.href} target="_blank" rel="noopener">
<a class="btn btn-primary sm:mb-0 w-full" href={callToAction?.href}>
{callToAction?.icon && (
<>
<Icon name={callToAction.icon} class="w-5 h-5 mr-1 -ml-1.5" />{' '}

30
src/pages/index.astro
View File

@ -11,6 +11,7 @@ import Content from "~/components/widgets/Content.astro";
import FAQs from "~/components/widgets/FAQs.astro";
import Stats from "~/components/widgets/Stats.astro";
import CallToAction from "~/components/widgets/CallToAction.astro";
import Downloads from "~/components/widgets/Downloads.astro";
const meta = {
title: SITE.title,
@ -25,7 +26,7 @@ const meta = {
<Hero
callToAction={{
text: "Get PikaOS",
href: "https://pikaos.ferreo.dev/PikaOS-Gnome-2210-amd64_23.01.18.iso",
href: "#download",
icon: "tabler:download",
}}
callToAction2={{ text: "Learn more", href: "#features" }}
@ -251,12 +252,23 @@ const meta = {
<!-- CallToAction Widget *********** -->
<div id="download">
<CallToAction
callToAction={{
text: "Download ISO",
href: "https://pikaos.ferreo.dev/PikaOS-Gnome-2210-amd64_23.01.18.iso",
icon: "tabler:download",
}}
<Downloads
downloads={[
{
text: "Gnome",
hrefEU: "https://pikaos.ferreo.dev/PikaOS-Gnome-2210-amd64_23.01.18.iso",
hrefWW: "https://cdn.ferreo.dev/PikaOS-Gnome-2210-amd64_23.01.18.iso",
md5: "https://pikaos.ferreo.dev/PikaOS-Gnome-2210-amd64_23.01.18.md5",
isComgingSoon: false,
},
{
text: "KDE",
hrefEU: "https://pikaos.ferreo.dev/PikaOS-KDE-2210-amd64_23.01.18.iso",
hrefWW: "https://cdn.ferreo.dev/PikaOS-KDE-2210-amd64_23.01.18.iso",
md5: "https://pikaos.ferreo.dev/PikaOS-KDE-2210-amd64_23.01.18.md5",
isComgingSoon: true,
},
]}
>
<Fragment slot="title">
PikaOS Download
@ -264,9 +276,7 @@ const meta = {
<Fragment slot="subtitle">
Grab our latest PikaOS ISO now!<br/><br/>
<a class="underline pb-5" href="https://pikaos.ferreo.dev/PikaOS-Gnome-2210-amd64_23.01.18.md5">MD5 hash here.</a><br/>
<a class="underline pb-5" href="https://cdn.ferreo.dev/PikaOS-Gnome-2210-amd64_23.01.18.iso">ISO Mirror</a>
</Fragment>
</CallToAction>
</Downloads>
</div>
</Layout>