Improves reusability of stylings and components

src/lib/Categories.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
   import { slide } from 'svelte/transition';
+  import Button from '$lib/Button.svelte';
+
   export let categories: string[];
   export let selectedCategories: string[];
   export let toggleCategory: (category: string) => void;
@@ -7,11 +9,12 @@
 
 <div class="categories" transition:slide>
   {#each Object.keys(categories) as category}
-    <span
+    <Button
-      on:click={() => toggleCategory(category)}
+      action={() => toggleCategory(category)}
-      class:selected="{selectedCategories.includes(category)}"
+      selected="{selectedCategories.includes(category)}"
-      class="cat"
+    >
-    >{category}</span>
+    {category}
+    </Button>
   {/each}
 </div>
 
@@ -22,21 +25,7 @@
   flex-wrap: wrap;
   margin: 1rem auto;
   padding: 0 1rem;
+  gap: 0.25rem;
   max-width: var(--max-width);
-  .cat {
-    border: 1px solid transparent;
-    padding: 0 0.3rem;
-    margin: 0.25rem;
-    line-height: 2rem;
-    border-radius: 6px;
-    text-transform: capitalize;
-    background: var(--card);
-    transition: all 0.3s ease-in-out;
-    cursor: pointer;
-    font-size: 0.9rem;
-    &:hover, &.selected {
-      background: var(--gradient);
-    }
-  }
 }
 </style>

src/lib/Header.svelte

@@ -1,11 +1,16 @@
+<script lang="ts">
+  import Button from '$lib/Button.svelte';
+  import { gitHubRepo } from '$src/constants';
+</script>
+
 <header>
   <a class="title" href="/">
     <img src="https://i.ibb.co/hMymwH0/portainer-templates-small.png" />
     <h2>Portainer Templates</h2>
   </a>
   <nav>
-    <a href="/">Home</a>
+    <Button to="/">Home</Button>
-    <a href="https://github.com/lissy93/portainer-templates">View on GitHub</a>
+    <Button to={gitHubRepo} icon="github">GitHub</Button>
   </nav>
 </header>
 
@@ -16,6 +21,7 @@
     justify-content: space-between;
     background: var(--card);
     padding: 0.25rem 1rem;
+    flex-wrap: wrap;
     a.title {
       display: flex;
       justify-content: center;
@@ -39,17 +45,6 @@
     nav {
       display: flex;
       gap: 1rem;
-      a {
-        color: var(--foreground);
-        text-decoration: none;
-        padding: 0.25rem 0.5rem;
-        border-radius: 6px;
-        transition: all 250ms ease-in-out;
-        &:hover {
-          background: var(--gradient);
-          transform: scale(1.05);
-        }
-      }
     }
     &.fixed {
       position: fixed;

src/lib/InstallationInstructions.svelte

@@ -216,6 +216,9 @@
       background: var(--card-2);
       position: relative;
       padding: 0.5rem;
+      pre {
+        font-size: 1rem;
+      }
       .docker-command-copy {
         position: absolute;
         right: 0.5rem;

src/lib/MdContent.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
 import { slide } from 'svelte/transition';
 import snarkdown from 'snarkdown';
-export let content: string;
+export let content: string | null = null;
-export let multiContent: { name: string, content: string, description: string, visible: false }[];
+export let multiContent: { name: string, content: string, description: string, visible: false }[] | null = null;
 
 let showDocs = false;
 

src/routes/+layout.svelte

@@ -1,5 +1,39 @@
+<script lang="ts">
+  import { browser } from '$app/environment';
+  import { page, navigating } from '$app/stores';
+  import { tick } from 'svelte';
+  import Header from '$lib/Header.svelte';
+  import Footer from '$lib/Footer.svelte';
+
+  let bottom = false;
+  let showNav = false;
+  
+  const scrollVisible = (): boolean => {
+    return browser ?
+      document.documentElement.clientHeight >= document.documentElement.scrollHeight
+      : false;
+  };
+
+  $: {
+    updateFooter();
+    if($navigating) updateFooter();
+    showNav = !['/', '/index'].includes($page.url.pathname)
+  }
+
+  async function updateFooter() {
+    await tick();
+    bottom = scrollVisible();
+  }
+</script>
+
+{#if showNav}
+  <Header />
+{/if}
+<main>
+  <slot></slot>
+</main>
+<Footer {bottom} />
 
-<slot></slot>
 
 <style lang="scss">
   @import url('https://fonts.googleapis.com/css2?family=Kanit:wght@200;400;800&display=swap');
@@ -21,5 +55,8 @@
     background: var(--accent);
     color: var(--background);
   }
+  main {
+    padding: 2rem;
+  }
 
 </style>

src/routes/+page.svelte

@@ -90,5 +90,3 @@
   <NoResults />
 {/if}
 
-<!-- Footer showing license and source code links -->
-<Footer />

src/routes/[slug]/+page.svelte

@@ -2,8 +2,6 @@
 
   import { page } from '$app/stores';
 
-  import Header from '$lib/Header.svelte';
-  import Footer from '$lib/Footer.svelte';
   import ServiceStats from '$lib/ServiceStats.svelte';
   import TemplateNotFound from '$lib/TemplateNotFound.svelte';
   import DockerStats from '$lib/DockerStats.svelte';
@@ -31,8 +29,6 @@
 
 </script>
 
-<Header />
-
 {#if template}
   <section class="summary-section">
     <h1>
@@ -92,7 +88,6 @@
   <TemplateNotFound templateName={urlSlug} />
 {/if}
 
-<Footer />
 
 <style lang="scss">
   section {

src/routes/usage/+page.svelte

@@ -1,9 +1,5 @@
 <script lang="ts">
     import InstallationInstructions from '$lib/InstallationInstructions.svelte';
-    import Header from '$lib/Header.svelte';
-    import Footer from '$lib/Footer.svelte';
 </script>
 
-<Header />
 <InstallationInstructions />
-<Footer bottom />