Add random header image and new favicon

Mystler · Sep 13, 2024 · 385ab09 · 385ab09
1 parent c395ffb
commit 385ab09
Show file tree

Hide file tree

Showing 12 changed files with 34 additions and 8 deletions.
diff --git a/src/app.d.ts b/src/app.d.ts
@@ -7,6 +7,7 @@ declare global {
     interface PageData {
       title?: string;
       description?: string;
+      titleImage?: string;
     }
     // interface PageState {}
     // interface Platform {}

diff --git a/src/app.html b/src/app.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%sveltekit.assets%/favicon.ico" />
+    <link rel="icon" href="%sveltekit.assets%/favicon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     %sveltekit.head%
   </head>

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -9,6 +9,7 @@
   import { PageDescription, PageTitle } from "$lib/page-meta";
   import AudioPlayer from "$lib/components/AudioPlayer.svelte";
   import { GlobalAudioCurrentSong, GlobalAudioPlayer } from "$lib/audioplayer";
+  import { slide } from "svelte/transition";
 
   // Update title and description stores based on page data
   // unless we expect MarkdownContent to do it in md-pages.
@@ -40,12 +41,23 @@
 <div class="flex flex-col min-h-screen">
   <Header />
 
-  <div class="site-content grow px-4 py-4 flex justify-center gap-4 flex-col lg:flex-row">
-    <main class="grow lg:max-w-screen-xl">
-      <slot />
-    </main>
-    <div class="flex-none lg:w-72 lg:sticky lg:self-start lg:top-[76px]">
-      <Sidebar />
+  <div class="site-content grow px-4 py-4">
+    {#if $page.data.titleImage}
+      <div transition:slide class="mb-4">
+        <img
+          class="mx-auto rounded-xl border-2 border-zinc-800"
+          src={$page.data.titleImage}
+          alt="Mystler.eu"
+        />
+      </div>
+    {/if}
+    <div class="flex justify-center gap-4 flex-col lg:flex-row">
+      <main class="grow lg:max-w-screen-xl">
+        <slot />
+      </main>
+      <div class="flex-none lg:w-72 lg:sticky lg:self-start lg:top-[76px]">
+        <Sidebar />
+      </div>
     </div>
   </div>
 

diff --git a/src/routes/+page.ts b/src/routes/+page.ts
@@ -1,6 +1,19 @@
+import { browser } from "$app/environment";
 import { fetchPosts } from "$lib/posts";
 import type { PageLoad } from "./$types";
 
+const titleImages = [
+  "/img/header_01.webp",
+  "/img/header_02.webp",
+  "/img/header_03.webp",
+  "/img/header_04.webp",
+  "/img/header_05.webp",
+  "/img/header_06.webp",
+];
+
 export const load: PageLoad = async () => {
-  return { page: await fetchPosts(0) };
+  return {
+    page: await fetchPosts(0),
+    titleImage: browser && titleImages[Math.floor(Math.random() * titleImages.length)],
+  };
 };
diff --git a/static/favicon.ico b/static/favicon.ico
diff --git a/static/favicon.png b/static/favicon.png
diff --git a/static/img/header_01.webp b/static/img/header_01.webp
diff --git a/static/img/header_02.webp b/static/img/header_02.webp
diff --git a/static/img/header_03.webp b/static/img/header_03.webp
diff --git a/static/img/header_04.webp b/static/img/header_04.webp
diff --git a/static/img/header_05.webp b/static/img/header_05.webp
diff --git a/static/img/header_06.webp b/static/img/header_06.webp