Add footer

packages/website/src/lib/Footer.svelte

@@ -0,0 +1,128 @@
+<script lang="ts">
+    import * as Sentry from "@sentry/sveltekit";
+    import url from "./logo.svg?url";
+    import { SITE_URL } from "$lib/metadata";
+
+    /** @type {Record<string, { href: string; title: string; }[]>} */
+    const links = {
+        Connect: [
+            {
+                href: "https://matrix.to/#/@jadedblueeyes:matrix.org",
+                title: "Matrix",
+            },
+            { href: "https://github.com/JadedBlueEyes", title: "GitHub" },
+            { href: "https://tech.lgbt/@JadedBlueEyes", title: "Mastodon" },
+            {
+                href: "https://bsky.app/profile/jade.ellis.link",
+                title: "Bluesky",
+            },
+            {
+                href: "https://www.linkedin.com/in/jadedblueeyes",
+                title: "LinkedIn",
+            },
+        ],
+    };
+    const sendFeedback = async () => {
+        const feedback = Sentry.getFeedback();
+        if (!feedback) {
+            return;
+        }
+        const form = await feedback.createForm({});
+        form.appendToDom();
+        form.open();
+    };
+</script>
+
+<div class="background">
+    <footer class="container">
+        <div class="logo">
+            <a class="footer-link-home" href={SITE_URL}>
+                <img
+                    src={url}
+                    class="footer-logo"
+                    alt=""
+                    width="28"
+                    height="28"
+                />
+                <span class="site-name">Jade Ellis</span>
+            </a>
+        </div>
+
+        {#each Object.entries(links) as [title, inner_links]}
+            <div class="links">
+                <h2>{title}</h2>
+                {#each inner_links as { href, title }}
+                    <a {href}>{title}</a>
+                {/each}
+            </div>
+        {/each}
+
+        <div class="feedback">
+            <button on:click={sendFeedback}>Report a bug</button>
+        </div>
+        <div class="copyright">© 2024 Jade Ellis</div>
+    </footer>
+</div>
+
+<style>
+    .background {
+        background-color: var(--surface-color);
+        margin-block-start: 4em;
+    }
+    footer {
+        padding: 12px var(--spacing);
+        margin: 0 auto;
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        grid-template-rows: 1fr;
+        grid-row-gap: 6rem;
+    }
+    .container {
+        --container-max-width: calc(var(--page-width) + 6rem + 16px);
+    }
+
+    footer h2 {
+        font-size: var(--sk-text-m);
+        padding-bottom: 1rem;
+    }
+
+    .links a {
+        display: block;
+        line-height: 1.8;
+    }
+
+    .copyright {
+        grid-column: span 2;
+    }
+
+    @media (min-width: 500px) {
+        footer {
+            grid-template-columns: repeat(3, 1fr);
+        }
+
+        footer .logo {
+            display: block;
+        }
+
+        .copyright {
+            grid-column: span 1;
+        }
+
+        .feedback {
+            display: block;
+        }
+    }
+
+    .footer-logo {
+        width: 3rem;
+        height: 100%;
+    }
+
+    .footer-link-home {
+        display: flex;
+        gap: 4px;
+        align-items: center;
+        padding: 8px;
+        font-weight: 700;
+    }
+</style>

packages/website/src/lib/styles.css

@@ -70,7 +70,7 @@
         --color-secondary: hsl(230, 50%, 90%);
         --color-tertiary: hsl(290, 80%, 80%);
         --color-accent: hsl(195, 80%, 80%);
-        
+
         --color-red: #fb464c;
         --color-orange: #e9973f;
         --color-yellow: #e0de71;
@@ -139,6 +139,7 @@ svg {
 a {
     color: var(--color-accent);
 }
+
 a:visited {
     color: var(--color-tertiary);
 }
@@ -195,17 +196,22 @@ a:visited {
 
 
 button {
-        display: inline-block;
-        color: var(--color-primary);
-        background: var(--color-accent);
-        border-radius: 4px;
-        margin: 8px 8px 8px 0px;
-        padding: 12px 24px;
-        border: solid 2px var(--color-accent);
+    display: inline-block;
+    color: var(--color-primary);
+    background: var(--color-accent);
+    border-radius: 4px;
+    margin: 8px 8px 8px 0px;
+    padding: 12px 24px;
+    border: solid 2px var(--color-accent);
 }
 
 .secondary {
     border: solid 2px var(--color-accent);
     color: var(--color-accent);
     background: transparent;
-  }
+}
+
+
+#sentry-feedback {
+    --dialog-inset: auto auto 0;
+}

packages/website/src/routes/+error.svelte

@@ -93,9 +93,7 @@
         font-size: 2em;
         font-weight: 600;
     } */
-    :global(#sentry-feedback) {
-        --dialog-inset: auto auto 0;
-    }
+     
     p {
         font-size: 1.5em;
         line-height: 1.4;

packages/website/src/routes/+layout.svelte

@@ -3,6 +3,7 @@
     import "$lib/styles.css";
     import Favicons from "$lib/Favicons.svelte";
     import Nav from "$lib/Nav.svelte";
+    import Footer from "$lib/Footer.svelte";
     import { SITE_TITLE } from "$lib/metadata"
 </script>
 <svelte:head>
@@ -11,4 +12,5 @@
     <meta property="og:site_name" content={SITE_TITLE}>
 </svelte:head>
 <Nav />
-<slot />
+<slot />
+<Footer />