Adapt Download page style to match other pages (#32)

spyder-ide · Nov 26, 2024 · c661301 · c661301
1 parent aeb0c54
commit c661301
Show file tree

Hide file tree

Showing 2 changed files with 96 additions and 60 deletions.
diff --git a/src/routes/download/+page.js b/src/routes/download/+page.js
@@ -0,0 +1,17 @@
+const visit = `visit our <a href="https://github.com/spyder-ide/spyder/releases" target="_blank">releases page</a> on GitHub.`
+
+const content = {
+  props: {
+    title: "Download Spyder",
+    subtitle: `If the download does not start automatically, please click the button below`,
+    alternative: `To download Spyder for the detected OS, please click the button below`,
+    download: {
+      title: "Download Started...",
+      alternative: `Alternatively, you can manually select the package you want from the buttons below, or ${visit}`
+    },
+  }
+}
+
+export function load() {
+  return content
+}
diff --git a/src/routes/download/+page.svelte b/src/routes/download/+page.svelte
@@ -4,6 +4,7 @@
   import { releases } from "$lib/config";
   import { page } from "$app/stores";
   import { metadata } from "$lib/store";
+  import { getOS } from "$lib/utils";
 
   import Loader from "$lib/components/Loader.svelte";
   import Button from "$lib/components/Button.svelte";
@@ -26,12 +27,16 @@
     url: $page.url.href,
   });
 
+  let result;
   let arch = "unknown";
   let os = "unknown";
   let osName = "unknown";
+  let macs = Object.entries(releases.mac);
   let downloadUrl = "";
   let osButtons = [];
 
+  console.log(macs);
+
   // Generate download buttons even if we don't have
   // a download parameter in the URL
   let generateDownloadButtons = (releases) => {
@@ -72,21 +77,23 @@
       return;
     }
 
-    const result = getOSfromURL();
+    result = getOSfromURL();
 
     if (!result) {
-      return;
+      // Detect OS and architecture if not provided in the URL
+      os = getOS();
+      arch = "x64";
+    } else {
+      os = result.os;
+      arch = result.arch;
     }
 
-    os = result.os;
-    arch = result.arch;
-
-    if (releases[os][arch]) {
+    if (os !== "mac" && releases[os][arch]) {
       osName = releases[os][arch].name;
       downloadUrl = releases[os][arch].link;
     }
 
-    if (downloadUrl) {
+    if (downloadUrl && result) {
       window.location = downloadUrl;
     }
   };
@@ -98,72 +105,84 @@
     getOSValues();
     osButtons = generateDownloadButtons(releases);
   });
-</script>
 
-<Metadata/>
+  export let data;
+  $: pageTitle = data.props.title;
+  $: pageSubtitle = data.props.subtitle;
+  $: pageSubtitleAlt = data.props.alternative;
+  $: download = data.props.download;
+</script>
 
-<div class="download container max-w-2xl mt-32">
-  {#if os === "unknown"}
-    <h1 class="text-4xl font-extralight text-center">
-      Please select the package you want from the links below
-    </h1>
-    <p class="text-neutral-500 text-center mt-4">
-      Or visit our <a href="https://github.com/spyder-ide/spyder/releases"
-        >releases page</a
-      > on GitHub.
-    </p>
-  {:else if os !== "unknown"}
-    <h1 class="text-center text-4xl font-extralight mb-16">
-      Download started&hellip;
+<Metadata />
+
+<div class="download container max-w-2xl">
+  {#if os !== "unknown"}
+    <h1
+      class="text-4xl
+        lg:tracking-tight
+        lg:text-6xl
+        text-center
+        tracking-tight
+        font-extralight
+        text-mine-shaft-600
+        dark:text-mine-shaft-200 my-16 md:my-32"
+    >
+      {@html result ? download.title : pageTitle}
     </h1>
-    <h2 class="text-center dark:text-neutral-200 text-2xl font-light mb-4">
-      Selected <span class="text-red-berry-900 dark:text-white font-semibold">{osName}</span>
-      or compatible
+    <h2
+      class="text-center dark:text-neutral-200 text-4xl font-extralight mb-8"
+    >
+      <span class="text-red-berry-900 dark:text-white font-extrabold"
+        >{osName}</span
+      > detected
     </h2>
-    <p class="text-sm text-neutral-500 text-center">
-      If the download does not start automatically, please click the button
-      below
+    <p class="text-center text-xl font-light">
+      {@html result ? pageSubtitle : pageSubtitleAlt}
     </p>
-    <div class="block my-6 text-center">
-      <Button
-        highlight
-        text="Download for {osName}"
-        icon={os}
-        href={downloadUrl}
-        target="_blank"
-        rel="noopener noreferrer"
-      />
-    </div>
-    <p class="text-neutral-500 text-center">
-      Alternatively, you can manually select the package you want from the links
-      below, or visit our <a
-        href="https://github.com/spyder-ide/spyder/releases"
-        target="_blank">releases page</a
-      > on GitHub.
+    {#if os !== "mac"}
+      <div class="block mt-8 mb-16 text-center w-48 mx-auto">
+        <Button
+          highlight
+          text="Download for {osName}"
+          icon={os}
+          href={downloadUrl}
+          target="_blank"
+          rel="noopener noreferrer"
+        />
+      </div>
+    {:else}
+      <div class="mt-8 mb-16 text-center w-96 flex gap-4 mx-auto">
+        {#each macs as mac}
+          <Button
+            highlight
+            text="Download for {mac[1].name}"
+            icon={"mac"}
+            href={mac[1].link}
+            target="_blank"
+            rel="noopener noreferrer"
+          />
+        {/each}
+      </div>
+    {/if}
+    <p class="text-center text-lg font-light mb-8">
+      {@html download.alternative}
     </p>
   {:else}
     <Loader />
   {/if}
 
   {#if osButtons}
     <div
-      class="border-t border-t-mine-shaft-300 dark:border-t-mine-shaft-600 mt-8"
+      class="mb-5 mx-auto max-w-48 sm:max-w-md grid grid-cols-1 sm:grid-cols-2 items-center justify-center gap-4"
     >
-      <div class="text-neutral-500 font-medium mt-4 text-center">
-        Available for
-      </div>
-      <div
-        class="mx-auto max-w-48 sm:max-w-md mt-4 mb-5 grid grid-cols-1 sm:grid-cols-2 items-center justify-center gap-4"
-      >
-        {#each osButtons as button}
-          <Button
-            highlight={button.highlight}
-            icon={button.icon}
-            text={button.text}
-            href={button.href}
-          />
-        {/each}
-      </div>
+      {#each osButtons as button}
+        <Button
+          highlight={button.highlight}
+          icon={button.icon}
+          text={button.text}
+          href={button.href}
+        />
+      {/each}
     </div>
   {/if}
 </div>