Update download section so it can handle mirrors and different ISOs

src/components/widgets/CallToAction.astro

@@ -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>

src/components/widgets/Downloads.astro

@@ -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>

src/components/widgets/Hero.astro

@@ -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" />{' '}

src/pages/index.astro

@@ -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
+  <Downloads
-    callToAction={{
+    downloads={[
-      text: "Download ISO",
+      {
-      href: "https://pikaos.ferreo.dev/PikaOS-Gnome-2210-amd64_23.01.18.iso",
+        text: "Gnome",
-      icon: "tabler:download",
+        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>