Add colours and Sentry feedback form

packages/website/src/hooks.client.ts

@@ -1,5 +1,5 @@
 import { SENTRY_DSN } from '$lib/config';
-import { init as initSentry, handleErrorWithSentry, makeBrowserOfflineTransport, makeFetchTransport } from '@sentry/sveltekit';
+import { init as initSentry, handleErrorWithSentry, makeBrowserOfflineTransport, makeFetchTransport, feedbackIntegration } from '@sentry/sveltekit';
 
 initSentry({
     dsn: SENTRY_DSN,
@@ -14,8 +14,9 @@ initSentry({
     // sessions when an error occurs.
     replaysOnErrorSampleRate: 1.0,
 
-    // If you don't want to use Session Replay, just remove the line below:
-    // integrations: [replayIntegration()],
+    integrations: [feedbackIntegration({
+        autoInject: false,
+    })],
 
     // To enable offline events caching, use makeBrowserOfflineTransport to wrap
     // existing transports and queue events using the browsers' IndexedDB storage

packages/website/src/lib/styles.css

@@ -33,6 +33,11 @@
     --code-background-color: #0d1117;
     --code-color: #fff;
 
+    --color-primary: hsl(230, 50%, 90%);
+    --color-secondary: hsl(230, 50%, 10%);
+    --color-tertiary: hsl(290, 80%, 20%);
+    --color-accent: hsl(227, 80%, 20%);
+
     --color-red: #e93147;
     --color-orange: #ec7500;
     --color-yellow: #e0ac00;
@@ -61,6 +66,11 @@
         --font-color-contrast: rgba(0, 0, 0, .87);
         --font-color-secondary: rgba(255, 255, 255, .6);
 
+        --color-primary: hsl(230, 50%, 10%);
+        --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;
@@ -109,7 +119,8 @@ html {
 
 body {
     padding: 0;
-    margin: 0
+    margin: 0;
+    min-height: 100vh;
 }
 
 iframe,
@@ -125,6 +136,13 @@ svg {
     display: block;
 }
 
+a {
+    color: var(--color-accent);
+}
+a:visited {
+    color: var(--color-tertiary);
+}
+
 .container {
     --container-max-width: var(--page-width);
     --padding-x: var(--spacing);
@@ -176,3 +194,18 @@ svg {
 }
 
 
+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);
+}
+
+.secondary {
+    border: solid 2px var(--color-accent);
+    color: var(--color-accent);
+    background: transparent;
+  }

packages/website/src/routes/(tools)/bookmarklets/+page.svelte

@@ -5,7 +5,7 @@
     import { bookmarkify, parseMeta } from "./bookmarklets";
     import type { Config } from "./config";
     import { init } from "$lib/workers/terser";
-    import { SITE_URL } from '$lib/metadata';
+    import { SITE_URL } from "$lib/metadata";
 
     /** @type {import('./$types').Snapshot<string>} */
     export const snapshot = {
@@ -13,7 +13,7 @@
         restore: (v: string) => (value = v),
     };
 
-    let minify = init().minify
+    let minify = init().minify;
 
     let value = "";
     let output = "";
@@ -26,7 +26,7 @@
         }
     }
 
-    let contentAttributes = {"aria-label": "Bookmarklet editor"}
+    let contentAttributes = { "aria-label": "Bookmarklet editor" };
 
     $: progress = process(value);
 </script>
@@ -36,6 +36,8 @@
     description="Make booklets in your browser with this tool. Make handy shortcuts to save time."
     canonical={SITE_URL + "/bookmarklets"}
 />
+
+<main class="main container" id="page-content">
     <h1>Bookmarklet Maker</h1>
     <Editor
         {value}
@@ -53,17 +55,26 @@
         <p style="color: red">{error.message}</p>
     {/await}
     <label for="output">Bookmarklet code</label>
-<textarea name="output" id="output" class="output card" rows="1" value={output} readonly
+    <textarea
+        name="output"
+        id="output"
+        class="output card"
+        rows="1"
+        value={output}
+        readonly
     ></textarea>
 
     <!-- <Editor readonly={true}  /> -->
     <p>
-    Bookmark this link: <a href={output}>{options.name || "My Bookmarklet"}</a>
+        Bookmark this link: <a href={output}
+            >{options.name || "My Bookmarklet"}</a
+        >
     </p>
     <p>
-    Either drag the link to your bookmarlets bar or, on FireFox, right click and
-    select "Bookmark Link".
+        Either drag the link to your bookmarlets bar or, on FireFox, right click
+        and select "Bookmark Link".
     </p>
+</main>
 
 <style>
     .code-header {

packages/website/src/routes/(tools)/javascript-minifier/+page.svelte

@@ -3,7 +3,7 @@
     import { javascript } from "@codemirror/lang-javascript";
     import SvelteSeo from "svelte-seo";
     import { init } from "$lib/workers/terser";
-    import { SITE_URL } from '$lib/metadata';
+    import { SITE_URL } from "$lib/metadata";
 
     /** @type {import('./$types').Snapshot<string>} */
     export const snapshot = {
@@ -11,24 +11,24 @@
         restore: (v: string) => (value = v),
     };
 
-    let minify = init().minify
+    let minify = init().minify;
 
     let value = "";
     let output = "";
     async function process(str: string) {
         if (value === "") {
             output = "";
-            return
+            return;
         }
-        let result = await minify(str)
+        let result = await minify(str);
         if (typeof result.code == "string") {
-            output = result.code
+            output = result.code;
         } else {
-            console.error(result)
+            console.error(result);
         }
     }
 
-    let contentAttributes = {"aria-label": "Javascript editor"}
+    let contentAttributes = { "aria-label": "Javascript editor" };
 
     $: progress = process(value);
 </script>
@@ -38,6 +38,8 @@
     description="Reduce JavaScript code size with this handy online tool. It's easy to minify your JavaScript code."
     canonical={SITE_URL + "/javascript-minifier"}
 />
+
+<main class="main container" id="page-content">
     <h1>Javascript Minifier</h1>
     <Editor
         {value}
@@ -55,9 +57,15 @@
         <p style="color: red">{error.message}</p>
     {/await}
     <label for="output">Minified code</label>
-<textarea name="output" id="output" class="output card" rows="1" value={output} readonly
+    <textarea
+        name="output"
+        id="output"
+        class="output card"
+        rows="1"
+        value={output}
+        readonly
     ></textarea>
-
+</main>
 
 <style>
     .code-header {

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

@@ -0,0 +1,78 @@
+<script lang="ts">
+    import { page } from "$app/stores";
+    import * as Sentry from "@sentry/sveltekit";
+    import { onMount } from "svelte";
+    import SvelteSeo from "svelte-seo";
+
+    const { status, error } = $page;
+    const message = error?.message || "Hmm";
+    const title = `${status}: ${message}`;
+    let sentryElement: HTMLDivElement;
+    let openForm = () => {};
+    onMount(async () => {
+        const feedback = Sentry.getFeedback({
+            el: sentryElement,
+        });
+        if (!feedback) {
+            return;
+        }
+        //     console.log("feedback", feedback);
+        const form = await feedback.createForm({});
+        form.appendToDom();
+        form.open();
+        openForm = async () => {
+            form.open();
+        };
+    });
+</script>
+
+<SvelteSeo {title} />
+
+<main class="main container" id="page-content">
+    <div class="wrapper">
+        <h1>{title}</h1>
+        <div bind:this={sentryElement} class="feedback"></div>
+        <button on:click={openForm}>Send Feedback</button>
+        <button class="secondary" on:click={()=> window.location.reload()}>Reload</button>
+        <!-- <div role="doc-subtitle">{status}</div> -->
+    </div>
+</main>
+
+<style>
+    main {
+        display: grid;
+        place-items: center;
+    }
+    .wrapper {
+        flex-grow: 2;
+        width: 40vw;
+        max-width: 500px;
+        margin: 0 auto;
+        /* display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: var(--spacing);
+        margin: 48px auto;
+        max-width: 320px;
+        padding: 3rem 0.5rem; */
+    }
+
+    h1 {
+        margin: 0;
+        font-size: 4em;
+        /* font-weight: 100; */
+    }
+    /* [role="doc-subtitle"] {
+        padding-block-start: 0;
+        font-size: 2em;
+        font-weight: 600;
+    } */
+    :global(#sentry-feedback) {
+        --dialog-inset: auto auto 0;
+    }
+    p {
+        width: 95%;
+        font-size: 1.5em;
+        line-height: 1.4;
+    }
+</style>

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

@@ -11,7 +11,4 @@
     <meta property="og:site_name" content={SITE_TITLE}>
 </svelte:head>
 <Nav />
-<main class="main container" id="page-content">
 <slot />
-
-</main>

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

@@ -6,8 +6,18 @@
 </script>
 
 <svelte:head>
-    <link rel="alternate" type="application/rss+xml" title={SITE_TITLE} href={SITE_URL + "/blog/rss.xml"}>
-    <link rel="alternate" type="application/feed+json" title={SITE_TITLE} href={SITE_URL + "/blog/feed.json"}>
+    <link
+        rel="alternate"
+        type="application/rss+xml"
+        title={SITE_TITLE}
+        href={SITE_URL + "/blog/rss.xml"}
+    />
+    <link
+        rel="alternate"
+        type="application/feed+json"
+        title={SITE_TITLE}
+        href={SITE_URL + "/blog/feed.json"}
+    />
 </svelte:head>
 
 <SvelteSeo
@@ -15,6 +25,8 @@
     description="Student, Creative & Computer Scientist. See what I'm doing."
     canonical="https://jade.ellis.link"
 />
-<Hero />
 
+<main class="main container" id="page-content">
+    <Hero />
     <Homepage />
+</main>

packages/website/src/routes/blog/+page.svelte

@@ -53,6 +53,7 @@
 
 <SvelteSeo title="Jade's Blog - Posts" canonical={SITE_URL + "/blog"} />
 
+<main class="main container" id="page-content">
     <section role="feed" class="h-feed" id="feed">
         <h1 class="p-name">
             <a
@@ -91,6 +92,7 @@
 		<button type="submit" on:click={handleClick}>See more {H_ELLIPSIS_ENTITY}</button>
 	{/if} -->
     </section>
+</main>
 
 <style>
     .permalink {

packages/website/src/routes/blog/[...date]/[slug]/+page.svelte

@@ -48,11 +48,11 @@
             });
 
             gtag("event", "share", {
-                "share_url": url.href,
-                "share_title": data.post.title,
-                "share_button": "article_top",
-                "method": "navigator_share",
-                "content_type": "article",
+                share_url: url.href,
+                share_title: data.post.title,
+                share_button: "article_top",
+                method: "navigator_share",
+                content_type: "article",
             });
         } catch (error: any) {
             if (error.toString().includes("AbortError")) {
@@ -176,6 +176,7 @@
     }}
 />
 
+<main class="main container" id="page-content">
     <article class="h-entry">
         <h1 id="title" class="p-name">{data.post.title}</h1>
         <aside>
@@ -212,6 +213,7 @@
             <svelte:component this={data.component} />
         </div>
     </article>
+</main>
 
 <style>
     aside {

packages/website/src/routes/projects/[slug]/+page.svelte

@@ -18,6 +18,8 @@
     description={data.post.description}
     canonical={SITE_URL + "/projects/" + data.post.slug}
 />
+
+<main class="main container" id="page-content">
     <h1>{data.post.title}</h1>
     <!-- {#await GhReleasesDownload}
     
@@ -30,3 +32,4 @@
     {/if}
 
     <svelte:component this={data.component} />
+</main>