From a3ca8768eb51a3da07e8f612e60b19907ad36fc8 Mon Sep 17 00:00:00 2001
From: Daniel Bulant <danbulant@gmail.com>
Date: Fri, 20 May 2022 17:58:36 +0200
Subject: [PATCH] add page transitions

---
 src/lib/components/pageTransition.svelte |  13 +++
 src/routes/__error.svelte                | 111 +++++++++++++++++++++++
 src/routes/__layout.svelte               |  17 ++++
 src/routes/posts/__layout.svelte         |   6 --
 4 files changed, 141 insertions(+), 6 deletions(-)
 create mode 100644 src/lib/components/pageTransition.svelte
 create mode 100644 src/routes/__error.svelte
 create mode 100644 src/routes/__layout.svelte

diff --git a/src/lib/components/pageTransition.svelte b/src/lib/components/pageTransition.svelte
new file mode 100644
index 0000000..a54521f
--- /dev/null
+++ b/src/lib/components/pageTransition.svelte
@@ -0,0 +1,13 @@
+<script>
+    import { fly } from "svelte/transition";
+    export let url = "";
+</script>
+
+{#key url}
+    <div
+        in:fly={{ x: -5, duration: 500, delay: 500 }}
+        out:fly={{ x: 5, duration: 500 }}
+    >
+        <slot />
+    </div>
+{/key}
diff --git a/src/routes/__error.svelte b/src/routes/__error.svelte
new file mode 100644
index 0000000..d32c898
--- /dev/null
+++ b/src/routes/__error.svelte
@@ -0,0 +1,111 @@
+<script context="module">
+    /** @type {import('@sveltejs/kit').Load} */
+    export async function load({ error, status }) {
+		let response;
+        try {
+            response = await fetch("/api/posts.json");
+        } catch(e) {}
+        return {
+            props: {
+                status,
+                error,
+				posts: response && response.ok && (await response.json())
+            },
+        };
+    }
+</script>
+
+<script>
+    import Button from "$lib/components/button.svelte";
+    import HeroPost from "$lib/components/heroPost.svelte";
+    import Post from "$lib/components/post.svelte";
+
+    export let status;
+    export let error;
+    export let posts;
+    let currentHover;
+
+    console.error(error);
+</script>
+
+<h1 class="text-center">
+    {#if status == 404}
+        404 - Page Not Found
+    {:else}
+        {status} - {error.message}
+    {/if}
+</h1>
+
+<!-- HTML Entity encoded email -->
+<p class="text-center">I'm sorry for that. If this is a repeated problem, try contacting me (&#x64;&#x61;&#x6E;&#x62;&#x75;&#x6C;&#x61;&#x6E;&#x74;&#x40;&#x64;&#x61;&#x6E;&#x62;&#x75;&#x6C;&#x61;&#x6E;&#x74;&#x2E;&#x65;&#x75;)</p>
+
+<div class="flex justify-center">
+    <Button href="/">Go to my home page</Button>
+</div>
+
+{#if posts && posts.length > 0}
+    <div class="my-4 separator text-big">OR</div>
+
+    <main>    
+        <h2 class="text-center">
+            Read one of the blog posts
+        </h2>
+
+        <HeroPost {...posts[0]} />
+    
+        <hr>
+        {#each posts.slice(1, 6) as post (post.title)}
+            <Post {...post} bind:currentHover />
+        {/each}
+    </main>
+{/if}
+
+<style>
+    .flex {
+        display: flex;
+    }
+    .justify-center {
+        justify-content: center;
+    }
+    .text-center {
+        text-align: center;
+    }
+    .text-big {
+        font-size: 1.5em;
+    }
+    .my-4 {
+        margin-top: 1rem;
+        margin-bottom: 1rem;
+    }
+    main {
+        max-width: 700px;
+        margin: auto;
+        padding: 0 20px;
+    }
+
+    .separator {
+        display: flex;
+        align-items: center;
+        text-align: center;
+        justify-content: center;
+    }
+
+    .separator::before,
+    .separator::after {
+        content: "";
+        flex: 1;
+        max-width: 100px;
+        border-bottom: 1px solid #000;
+    }
+    :global(.dark .separator::before, .dark .separator::after) {
+        border-bottom-color: white;
+    }
+
+    .separator:not(:empty)::before {
+        margin-right: 0.25em;
+    }
+
+    .separator:not(:empty)::after {
+        margin-left: 0.25em;
+    }
+</style>
diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte
new file mode 100644
index 0000000..f570270
--- /dev/null
+++ b/src/routes/__layout.svelte
@@ -0,0 +1,17 @@
+<script context="module">
+    export const load = async ({ url }) => ({ props: { url } });
+</script>
+
+<script>
+    import Navbar from "$lib/components/navbar.svelte";
+    import PageTransition from "$lib/components/pageTransition.svelte";
+    export let url;
+</script>
+
+<Navbar />
+
+<div style="overflow-x: hidden;">
+    <PageTransition {url}>
+        <slot />
+    </PageTransition>
+</div>
diff --git a/src/routes/posts/__layout.svelte b/src/routes/posts/__layout.svelte
index dfa959b..ff59c7b 100644
--- a/src/routes/posts/__layout.svelte
+++ b/src/routes/posts/__layout.svelte
@@ -1,11 +1,5 @@
-<script>
-    import Navbar from "$lib/components/navbar.svelte";
-</script>
-
 <svelte:head>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.15.2/dist/katex.min.css" integrity="sha384-MlJdn/WNKDGXveldHDdyRP1R4CTHr3FeuDNfhsLPYrq2t0UBkUdK2jyTnXPEK1NQ" crossorigin="anonymous">
 </svelte:head>
 
-<Navbar/>
-
 <slot />