Add Support page for donations

postcss.config.js

@@ -1,5 +1,6 @@
 export default {
   plugins: {
+    "postcss-import": {},
     "tailwindcss/nesting": {},
     tailwindcss: {},
     autoprefixer: {},

src/lib/blocks/Header.svelte

@@ -1,4 +1,5 @@
 <script>
+  import { onMount } from "svelte";
   import { Icon } from "svelte-icons-pack";
   import { BiMenu } from "svelte-icons-pack/bi";
   import { AiOutlineClose } from "svelte-icons-pack/ai";
@@ -8,12 +9,23 @@
 
   import ColourSwitch from "$lib/components/ColourSwitch.svelte";
   import Logo from "$lib/components/Logo.svelte";
+  import DynamicIcon from "$lib/components/DynamicIcon.svelte";
 
   let isMenuOpen = false;
 
   function toggleMenu() {
     isMenuOpen = !isMenuOpen;
   }
+
+  onMount(() => {
+    setInterval(() => {
+      const beatElements = document.querySelectorAll(".beat");
+      beatElements.forEach((element) => {
+        element.classList.remove("beat");
+        setTimeout(() => element.classList.add("beat"), 1000);
+      });
+    }, 29000);
+  });
 </script>
 
 <header class="flex items-center text-mine-shaft-500 dark:text-mine-shaft-300">
@@ -27,16 +39,33 @@
     <!-- Navigation (desktop) -->
     <div class="flex items-center md:gap-12 justify-end">
       <!-- Navigation (links) -->
-      <nav class="hidden md:flex items-center gap-4 xl:gap-6">
+      <nav class="hidden md:flex items-center gap-12 xl:gap-18">
         {#each navigation as menu}
           <ul class="menu flex items-center gap-4 xl:gap-6">
             {#each menu as item}
               <li class="menu-item">
                 <a
-                  class="menu-link h-20 grid items-center uppercase text-sm tracking-wider before:h-1 before:hover:bg-red-berry-900"
+                  class="menu-link grid items-center uppercase text-sm tracking-wider"
+                  class:h-20={!item.button && !item.icon}
+                  class:before:h-1={!item.button && !item.icon}
+                  class:button={item.button}
+                  class:icon={item.icon}
+                  class:beat={item.beat}
+                  class:highlight={item.highlight}
+                  class:before:hover:bg-red-berry-900={!item.button}
                   href={item.href}
-                  target={item.target}>{item.text}</a
+                  target={item.target}
                 >
+                  {#if item.icon}
+                    <DynamicIcon
+                      iconTheme={item.icon[0]}
+                      iconName={item.icon[1]}
+                      size="1.6em"
+                    />
+                  {:else}
+                    {item.text}
+                  {/if}
+                </a>
               </li>
             {/each}
           </ul>
@@ -47,11 +76,7 @@
       <ColourSwitch />
 
       <!-- Hamburger menu button (visible on mobile) -->
-      <button
-        class="md:hidden"
-        on:click={toggleMenu}
-        aria-label="Toggle menu"
-      >
+      <button class="md:hidden" on:click={toggleMenu} aria-label="Toggle menu">
         <Icon src={BiMenu} size="24" />
       </button>
     </div>
@@ -60,7 +85,9 @@
 
 <!-- Mobile menu (shown when isMenuOpen is true) -->
 {#if isMenuOpen}
-  <div class="md:hidden fixed inset-0 z-50 bg-spring-wood-50 text-gray-700 dark:bg-mine-shaft-950 dark:text-spring-wood-50">
+  <div
+    class="md:hidden fixed inset-0 z-50 bg-spring-wood-50 text-gray-700 dark:bg-mine-shaft-950 dark:text-spring-wood-50"
+  >
     <div class="container py-5 text-right">
       <button class="mb-8 pt-2" on:click={toggleMenu} aria-label="Close menu">
         <Icon src={AiOutlineClose} size="24" />
@@ -94,4 +121,44 @@
   .menu-link::after:not(.mobile) {
     content: "";
   }
+
+  .button:not(.icon) {
+    @apply border-2 border-neutral-400 rounded-md px-4 py-2 text-neutral-500 dark:text-neutral-300;
+  }
+
+  .button:hover {
+    @apply border-neutral-600 dark:border-neutral-200;
+  }
+
+  .icon {
+    @apply text-neutral-500;
+  }
+
+  .highlight {
+    @apply text-red-berry-900 dark:text-red-700;
+  }
+
+  .icon:hover {
+    @apply text-neutral-900;
+  }
+
+  .beat {
+    animation: beat 1s ease-in-out 2;
+  }
+
+  .beat:hover {
+    @apply text-red-berry-800 dark:text-red-600;
+  }
+
+  @keyframes beat {
+    0% {
+      transform: scale(1);
+    }
+    50% {
+      transform: scale(1.4);
+    }
+    100% {
+      transform: scale(1);
+    }
+  }
 </style>

src/lib/blocks/Hero.svelte

@@ -1,6 +1,6 @@
 <script>
   import { osStore } from "$lib/store";
-  import { heroContent, heroImages, githubButton } from "$lib/config";
+  import { heroContent, heroImages, donateButton } from "$lib/config";
 
   import Vanta from "$lib/components/Vanta.svelte";
   import Button from "$lib/components/Button.svelte";
@@ -17,7 +17,7 @@
   // Subscribe to osStore
   osStore.subscribe((data) => {
     if (!data.loading) {
-      buttons = [...data.osButtons, githubButton];
+      buttons = [...data.osButtons, donateButton];
     }
   });
 </script>

src/lib/components/Button.svelte

@@ -14,6 +14,7 @@
   } from "svelte-icons-pack/bs";
 
   import { VscTerminalLinux } from "svelte-icons-pack/vsc";
+  import { BiSolidDonateHeart } from "svelte-icons-pack/bi";
 
   let icons = {
     facebook: BsFacebook,
@@ -27,25 +28,30 @@
     unknown: BsQuestionCircleFill,
     download: BsDownload,
     rss: BsRssFill,
+    donate: BiSolidDonateHeart,
   };
 
   export let button = true;
   export let highlight = false;
   export let icon = "";
   export let iconSize = 20;
+  export let fontSize = 12;
   export let href = "";
   export let rel = "";
   export let text = "";
   export let title = text;
   export let target = "_parent";
   export let iconPosition = "right";
   export let fullwidth = false;
+  export let image = ""
 
   let currentIcon = icons[icon];
 
   let hasIcon = icon !== "" && currentIcon !== undefined ? true : false;
   let iconLeft = hasIcon && iconPosition === "left" ? true : false;
   let iconRight = hasIcon && iconPosition === "right" ? true : false;
+
+  let textStyle = `font-size:${fontSize}px`
 </script>
 
 <a
@@ -63,22 +69,27 @@
   class:px-5={button}
   class:rounded={button}
   class:regular={!highlight}
-  class="flex items-center justify-between gap-3 text-sm lg:text-xs"
+  class={image ? "block max-w-60 mx-auto" : "flex items-center justify-between gap-3 text-sm lg:text-xs"}
+  style={textStyle}
 >
-  {#if iconLeft}
-    <span class:icon-left={iconPosition === "left"}>
-      <Icon src={currentIcon} size={iconSize} />
-    </span>
-  {/if}
+  {#if image}
+    <img src={image} alt={text} />
+  {:else}
+    {#if iconLeft}
+      <span class:icon-left={iconPosition === "left"}>
+        <Icon src={currentIcon} size={iconSize} />
+      </span>
+    {/if}
 
-  {#if text}
-    <span>{text}</span>
-  {/if}
+    {#if text}
+      <span>{text}</span>
+    {/if}
 
-  {#if iconRight}
-    <span class:icon-right={iconPosition === "right"}>
-      <Icon src={currentIcon} size={iconSize} />
-    </span>
+    {#if iconRight}
+      <span class:icon-right={iconPosition === "right"}>
+        <Icon src={currentIcon} size={iconSize} />
+      </span>
+    {/if}
   {/if}
 </a>
 
@@ -91,10 +102,18 @@
     @apply from-red-berry-900 to-red-berry-950 text-white border-red-berry-950;
   }
 
+  .button.highlight:hover {
+    @apply from-red-berry-900 to-red-berry-900;
+  }
+
   .button.regular {
     @apply from-mine-shaft-50 to-mine-shaft-100 text-neutral-700 border border-mine-shaft-300;
   }
 
+  .button.regular:hover {
+    @apply from-mine-shaft-100 to-mine-shaft-50;
+  }
+
   .button .icon-right {
     margin-right: -0.4em;
   }

src/lib/components/DynamicIcon.svelte

@@ -4,10 +4,11 @@
 
   import Loader from "./Loader.svelte";
 
-  export let icon;
-  export let size = "4rem";
+  export let iconName;
+  export let iconTheme = "bs";
+  export let size = "1.2rem";
 
-  let iconPromise = getIcon(icon);
+  let iconPromise = getIcon(iconName, iconTheme);
 </script>
 
 {#await iconPromise}

src/lib/components/Logo.svelte

@@ -1,11 +1,16 @@
 <script>
   export let classes = '';
+  export let width = 126;
+  export let height = width / 3.15
+  export let viewBox = null
 </script>
 
 <svg
   xmlns="http://www.w3.org/2000/svg"
-  width={126}
-  height={40}
+  preserveAspectRatio="xMidYMid meet"
+  width={width}
+  height={height}
+  {...(viewBox ? { viewBox } : {})}
   class={classes}
 >
   <path

src/lib/config/index.js

@@ -39,14 +39,19 @@ export const blogSlug = "blog";
 export const ogSlug = "og";
 export const ogImageBlog = `${siteUrl}assets/media/blog_screenshot.png`;
 
+// Social links (for footer and others)
+export const socials = {
+  github: "https://github.com/spyder-ide/spyder",
+  twitter: "https://twitter.com/spyder_ide",
+  facebook: "https://www.facebook.com/SpyderIDE/",
+  mastodon: "https://fosstodon.org/@Spyder",
+  instagram: "https://instagram.com/spyderide",
+  rss: `${base}/blog/feed.xml`
+};
+
 // Navigation
 export const navigation = [
   [
-    {
-      text: "Download",
-      href: `${base}/download/`,
-      target: "_self",
-    },
     {
       text: "About",
       href: `${base}/about/`,
@@ -63,18 +68,30 @@ export const navigation = [
       target: "_blank",
     },
   ],
+  [
+    {
+      text: "GitHub",
+      href: socials.github,
+      target: "_blank",
+      icon: ["bs","BsGithub"],
+    },
+    {
+      text: "Donate",
+      href: `${base}/donate/`,
+      target: "_self",
+      beat: true,
+      highlight: true,
+      icon: ["bs","BsHeartFill"],
+    },
+    {
+      text: "Download",
+      href: `${base}/download/`,
+      target: "_self",
+      button: true,
+    },
+  ]
 ];
 
-// Social links (for footer and others)
-export const socials = {
-  github: "https://github.com/spyder-ide/spyder",
-  twitter: "https://twitter.com/spyder_ide",
-  facebook: "https://www.facebook.com/SpyderIDE/",
-  mastodon: "https://fosstodon.org/@Spyder",
-  instagram: "https://instagram.com/spyderide",
-  rss: `${base}/blog/feed.xml`
-};
-
 // Hero content
 export const heroContent = {
   title: subtitle,
@@ -95,6 +112,14 @@ export const githubButton = {
   href: "https://github.com/spyder-ide/spyder/",
 }
 
+// Donate button
+export const donateButton = {
+  highlight: false,
+  icon: "donate",
+  text: "Support the project",
+  href: "/donate/",
+}
+
 // Download links
 export const releases = {
   windows: {