From 54a70b6a7ef67dec2bf2a49f672a12d3c6c05898 Mon Sep 17 00:00:00 2001
From: hopperelec <hopperelec@gmail.com>
Date: Thu, 9 Nov 2023 05:33:55 +0000
Subject: [PATCH] Added Slideshow on home page Changed primary font

---
 package-lock.json         |  32 ++++++
 package.json              |   4 +-
 src/lib/Slideshow.svelte  | 212 ++++++++++++++++++++++++++++++++++++++
 src/lib/title.ts          |  18 ++--
 src/routes/+layout.js     |   3 -
 src/routes/+layout.svelte |   5 +-
 src/routes/+page.svelte   |   2 +
 7 files changed, 260 insertions(+), 16 deletions(-)
 create mode 100644 src/lib/Slideshow.svelte
 delete mode 100644 src/routes/+layout.js

diff --git a/package-lock.json b/package-lock.json
index 60cf043..6006def 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,8 +19,10 @@
         "dotenv": "^16.3.1",
         "prettier": "3.0.3",
         "prettier-plugin-svelte": "^3.0.3",
+        "scss": "^0.2.4",
         "super-sitemap": "^0.14.7",
         "svelte": "^4.0.5",
+        "svelte-typewriter": "^3.1.8",
         "tslib": "^2.4.1",
         "typescript": "^5.0.0",
         "vite": "^4.4.2"
@@ -1595,6 +1597,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/ometa": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/ometa/-/ometa-0.2.2.tgz",
+      "integrity": "sha512-LZuoK/yjU3FvrxPjUXUlZ1bavCfBPqauA7fsNdwi+AVhRdyk2IzgP3JRnevvjzQ6fKHdUw8YISshf53FmpHrng==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.2.0"
+      }
+    },
     "node_modules/once": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
@@ -1814,6 +1825,18 @@
         "node": ">=14.0.0"
       }
     },
+    "node_modules/scss": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/scss/-/scss-0.2.4.tgz",
+      "integrity": "sha512-4u8V87F+Q/upVhUmhPnB4C1R11xojkRkWjExL2v0CX2EXTg18VrKd+9JWoeyCp2VEMdSpJsyAvVU+rVjogh51A==",
+      "dev": true,
+      "dependencies": {
+        "ometa": "0.2.2"
+      },
+      "engines": {
+        "node": ">= 0.2.0"
+      }
+    },
     "node_modules/set-cookie-parser": {
       "version": "2.6.0",
       "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.6.0.tgz",
@@ -1960,6 +1983,15 @@
         "svelte": "^3.19.0 || ^4.0.0"
       }
     },
+    "node_modules/svelte-typewriter": {
+      "version": "3.1.8",
+      "resolved": "https://registry.npmjs.org/svelte-typewriter/-/svelte-typewriter-3.1.8.tgz",
+      "integrity": "sha512-9ZT9VZb9Yd/hSDM2yLF/Sfxw2FpKZLT151hbtqrvq8QJFijw/EvsKeStBcl1yzBlVL+SbARwUKhrJxACAQ5Ilg==",
+      "dev": true,
+      "peerDependencies": {
+        "svelte": ">=3.47.x"
+      }
+    },
     "node_modules/table-layout": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/table-layout/-/table-layout-1.0.2.tgz",
diff --git a/package.json b/package.json
index ce81c11..a5843e7 100644
--- a/package.json
+++ b/package.json
@@ -16,14 +16,16 @@
     "html-minifier-terser": "^7.2.0"
   },
   "devDependencies": {
-    "@types/html-minifier-terser": "^7.0.2",
+    "svelte-typewriter": "^3.1.8",
     "@sveltejs/adapter-node": "^1.3.1",
     "@sveltejs/adapter-static": "^2.0.3",
     "@sveltejs/kit": "^1.20.4",
+    "@types/html-minifier-terser": "^7.0.2",
     "cross-env": "^7.0.3",
     "dotenv": "^16.3.1",
     "prettier": "3.0.3",
     "prettier-plugin-svelte": "^3.0.3",
+    "scss": "^0.2.4",
     "super-sitemap": "^0.14.7",
     "svelte": "^4.0.5",
     "tslib": "^2.4.1",
diff --git a/src/lib/Slideshow.svelte b/src/lib/Slideshow.svelte
new file mode 100644
index 0000000..cf4ce8b
--- /dev/null
+++ b/src/lib/Slideshow.svelte
@@ -0,0 +1,212 @@
+<script lang="ts">
+  import { writable } from "svelte/store";
+  import Typewriter from "svelte-typewriter";
+
+  interface Slide {
+    caption?: string;
+    captionLink?: string;
+    backgroundImg?: string;
+    altText?: string;
+  }
+  const slides: Slide[] = [
+    {
+      caption: "Example caption-only 📝 slide",
+    },
+    {
+      captionLink: "link1",
+    },
+    {
+      backgroundImg:
+        "https://placehold.co/1388x780.png?text=Example%20Slide%202",
+      altText: 'Placeholder image with text reading "Example Slide 3"',
+    },
+    {
+      caption: "Example caption with link 🤯 slide",
+      captionLink: "link2",
+    },
+    {
+      caption: "Example image caption 🤯 slide",
+      backgroundImg: "https://placehold.co/1388x780.png",
+    },
+    {
+      captionLink: "link3",
+      backgroundImg:
+        "https://placehold.co/1388x780.png?text=Example%20Slide%206",
+    },
+    {
+      caption: "All together! 💥",
+      captionLink: "link4",
+      backgroundImg: "https://placehold.co/1388x780.png",
+      altText: "1388x780 placeholder image",
+    },
+  ];
+
+  function createCurrSlideNo() {
+    const { subscribe, set } = writable(0);
+    return {
+      subscribe,
+      set: (value: number) => {
+        set(value);
+        clearTimeout(autoSlide);
+        autoSlide = setTimeout(() => $currSlideNo++, 10000);
+      },
+    };
+  }
+  let currSlideNo = createCurrSlideNo();
+  let currSlide: Slide;
+  let n: number;
+  $: n = slides.length;
+  $: currSlide = slides[(($currSlideNo % n) + n) % n];
+  let autoSlide: NodeJS.Timeout;
+</script>
+
+<svelte:head>
+  {#each slides as slide}
+    {#if slide.backgroundImg}
+      <link rel="preload" as="image" href={slide.backgroundImg} />
+    {/if}
+  {/each}
+</svelte:head>
+
+{#if currSlide.backgroundImg}
+  <img src={currSlide.backgroundImg} alt={currSlide.altText} />
+{/if}
+<div id="overlay">
+  <h2 class="horCenter">My most recent projects include...</h2>
+  {#if currSlide.caption || currSlide.captionLink}
+    <div id="caption" class="center">
+      <Typewriter>
+        {#if currSlide.captionLink}
+          <a href={currSlide.captionLink}>{currSlide.caption || "🔗"}</a>
+        {:else}
+          <h3>{currSlide.caption}</h3>
+        {/if}
+      </Typewriter>
+    </div>
+  {/if}
+  <button
+    id="prevButton"
+    title="Previous slide"
+    class="verCenter"
+    on:click={() => $currSlideNo--}
+    type="button"
+  />
+  <button
+    id="nextButton"
+    title="Next slide"
+    class="verCenter"
+    on:click={() => $currSlideNo++}
+    type="button"
+  />
+  <div id="positions" class="horCenter">
+    {#each slides as slide, slideNo}
+      {#if slide === currSlide}
+        <button class="checked">◉</button>
+      {:else}
+        <button on:click={() => ($currSlideNo = slideNo)}>◎</button>
+      {/if}
+    {/each}
+  </div>
+</div>
+
+<style lang="scss">
+  img {
+    position: absolute;
+    object-fit: cover;
+    width: 100%;
+    height: 100%;
+    filter: blur(6px);
+  }
+
+  #overlay > * {
+    position: absolute;
+    padding: 10px;
+    background-color: var(--main-bg-color);
+    border: var(--border);
+    color: var(--main-fg-color);
+    font-size: 48px;
+  }
+
+  .center {
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+  }
+  .horCenter {
+    left: 50%;
+    transform: translate(-50%, 0);
+  }
+  .verCenter {
+    top: 50%;
+    transform: translate(0, -50%);
+  }
+
+  h2 {
+    border-top: none !important;
+    border-radius: 0 0 10px 10px;
+  }
+
+  #caption {
+    color: white;
+    border-radius: 10px;
+    font-family: Arial, sans-serif;
+
+    /* +layout.svelte makes all a tags yellow by default */
+    & a {
+      color: white;
+    }
+  }
+
+  #prevButton {
+    border-left: none;
+    border-radius: 0 10px 10px 0;
+    &::before {
+      content: "⮜";
+    }
+  }
+  #nextButton {
+    border-right: none;
+    border-radius: 10px 0 0 10px;
+    right: 0;
+    &::before {
+      content: "⮞";
+    }
+  }
+  #prevButton,
+  #nextButton {
+    padding: 10px 20px;
+    transition: padding 0.5s linear;
+    text-align: center;
+    cursor: pointer;
+
+    &:hover {
+      padding: 10px 30px;
+    }
+  }
+
+  #positions {
+    border-bottom: none;
+    border-top-left-radius: 10px;
+    border-top-right-radius: 10px;
+    bottom: 0;
+    font-size: 24px;
+    transition: padding-bottom 0.5s linear;
+
+    & button {
+      font-size: inherit;
+      padding: 4px;
+      background: none;
+      border: none;
+      color: inherit;
+
+      /*noinspection CssUnusedSymbol*/
+      &:not(.checked) {
+        cursor: pointer;
+      }
+    }
+
+    &:hover {
+      padding-bottom: 15px;
+    }
+  }
+</style>
diff --git a/src/lib/title.ts b/src/lib/title.ts
index ef35fdc..f15a603 100644
--- a/src/lib/title.ts
+++ b/src/lib/title.ts
@@ -1,14 +1,10 @@
 import { writable } from "svelte/store";
 import { SITE_NAME } from "$lib/constants";
 
-function createTitle() {
-  const { subscribe, set } = writable(SITE_NAME);
-
-  return {
-    subscribe,
-    set: (value: string) => {
-      set(`${SITE_NAME} | ${value}`);
-    },
-  };
-}
-export const title = createTitle();
+const { subscribe, set } = writable(SITE_NAME);
+export const title = {
+  subscribe,
+  set: (value: string) => {
+    set(`${SITE_NAME} | ${value}`);
+  },
+};
diff --git a/src/routes/+layout.js b/src/routes/+layout.js
deleted file mode 100644
index 37d9239..0000000
--- a/src/routes/+layout.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import { dev } from "$app/environment";
-
-export const csr = dev;
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 719f9bf..5ffab38 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -45,6 +45,10 @@
         background-color: var(--main-bg-color);
     }
 
+    main, li {
+        font-family: Segoe UI,Calibri,Arial,sans-serif;
+    }
+
     /* Structure */
     main {
         width: 90vw;
@@ -111,7 +115,6 @@
         flex-grow: 1;
         margin: 0 5vw;
         font-size: 3vh;
-        font-family: Arial, sans-serif;
         font-weight: bold;
     }
     @media (max-width: 1050px) {
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index a6f0899..11bd822 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,4 +1,6 @@
 <script>
     import { title } from "$lib/title.ts";
+    import Slideshow from "$lib/Slideshow.svelte";
     title.set("Home");
 </script>
+<Slideshow/>
\ No newline at end of file