More cleaning

src/lib/components/Emojis.svelte

@@ -0,0 +1,96 @@
+<script>
+  const blendMode = [
+    "normal",
+    "multiply",
+    "screen",
+    // "overlay",
+    // "darken",
+    // "lighten",
+    "color-dodge",
+    "color-burn",
+    // "hard-light",
+    // "soft-light",
+    "difference",
+    "exclusion",
+    "hue",
+    "saturation",
+    "color",
+    "luminosity",
+    // "plus-darker",
+    // "plus-lighter",
+  ]
+
+  const emojis = [
+    '🏔',
+    '🌊',
+    '🏜',
+    '🥏',
+    '👨‍🍳',
+    '👻',
+    '🌲',
+    '🦌',
+    '🦑',
+    '🤠',
+    '🍳'
+  ]
+
+  // all combinations of the above two arrays
+  // ex: { e: '🌊', b: 'exclusion'}
+  const full = emojis.map(
+    e => {
+      const bm = []
+
+      blendMode.forEach(b => {
+        return bm.push({e, b})
+      })
+
+      return bm
+    }
+  ).flat()
+
+  // sort by random map, unmap to get new order
+  function shuffleArray(array) {
+    return array
+        .map(value => ({ value, sort: Math.random() }))
+        .sort((a, b) => a.sort - b.sort)
+        .map(({ value }) => value)
+  }
+
+  // reconstruct item from what was clicked, filter array to remove it
+  function handleRemoval(event) {
+    const data = event.target.dataset
+    const r = {e: data.emoji, b: data.blend}
+
+    const items = shuffled.filter(e => !(e.e === r.e && e.b === r.b))
+    shuffled = shuffleArray(items)
+  }
+
+  // set initial shuffle to full list
+  let shuffled = shuffleArray(full)
+</script>
+
+<div class="block text-shadow text-4xl mt-4 lg:mt-8 w-full max-h-[400px] lg:max-h-fit overflow-hidden lg:overflow-visible">
+  {#each shuffled as f, i}
+    <!-- <span>{i}</span> -->
+    <button
+      class="emoji emoji-{i} p-1 m-1"
+      style="mix-blend-mode: {f.b}"
+      data-emoji={f.e}
+      data-blend={f.b}
+      on:click={(event) => handleRemoval(event)}
+    >
+      {f.e}
+    </button>
+  {/each}
+</div>
+
+{#if shuffled.length < 50 && shuffled.length > 25}
+  <p class="text-accent font-semibold text-xl my-4">keep going...</p>
+{/if}
+{#if shuffled.length <= 25 && shuffled.length > 0}
+  <p class="text-accent font-semibold text-xl my-4">almost there...</p>
+{/if}
+{#if shuffled.length === 0}
+  <!-- svelte-ignore a11y-distracting-elements -->
+  <marquee class="text-shadow font-bold text-6xl py-8">🎉 {full.length} emojis clicked 🎉</marquee>
+{/if}

src/lib/components/Footer.svelte

@@ -1,12 +1,23 @@
 <script>
   import Icon from '$lib/components/Icon.svelte'
   import NavLink from '$lib/components/NavLink.svelte'
-  import { MY_TWITTER_HANDLE, GH_USER } from '$lib/siteConfig'
+  import { MY_TWITTER_HANDLE, LASTFM_ID, LETTERBOXD_ID, GH_USER } from '$lib/siteConfig'
+
+  let isDark = false
+  if (typeof localStorage !== 'undefined') {
+    if (
+      localStorage.theme === 'dark' ||
+      (!('theme' in localStorage) &&
+        window.matchMedia('(prefers-color-scheme: dark)').matches)
+    ) {
+      isDark = true
+    }
+  }
 </script>
 
 <footer
   id="menu"
-  class="flex flex-col justify-center bg-orange-100 px-4 py-12 sm:px-8 dark:bg-slate-900"
+  class="flex flex-col justify-center bg-orange-100 px-4 py-4 sm:px-8 dark:bg-slate-900"
 >
   <hr class="mb-8" />
   <div
@@ -37,12 +48,40 @@
         </svg>
       </Icon>
 
-      <Icon href={'https://www.last.fm/user/lob_'} label="last.fm">
+      <Icon href={`https://www.last.fm/user/${LASTFM_ID}`} label="last.fm">
         <svg viewBox="0 0 256 256" class="h-12 w-12 p-1" fill="currentColor">
           <path d="M102.9,158.4c-4.9,4.4-14.4,13.3-30.3,13.3C54,171.8,36,155.4,36,129.3c0-33.5,21.5-44.3,38-44.3c23.8,0,29,14.4,35.5,34.2l8.7,27.2c8.6,26.4,24.9,47.7,71.6,47.7c33.5,0,56.2-10.4,56.2-37.6c0-22.1-12.5-33.5-35.7-39l-17.3-3.8c-11.9-2.7-15.4-7.6-15.4-15.8c0-9.3,7.3-14.7,19.2-14.7c13,0,20,4.9,21.1,16.6l27-3.3C242.7,72,226,61.9,198.4,61.9c-24.3,0-48.1,9.3-48.1,39c0,18.5,8.9,30.2,31.4,35.7l18.4,4.4c13.8,3.3,18.4,9,18.4,16.9c0,10.1-9.7,14.2-28.1,14.2c-27.3,0-41-14.4-47.5-34.3l-8.9-27.2C122.5,75,109.1,61.9,73.2,61.9C41.1,61.9,10,87.3,10,130.3c0,41.4,29.9,63.8,61.3,63.8c22.7,0,34.2-8,39.9-12.1L102.9,158.4z"/>
         </svg>
       </Icon>
 
+      <Icon href={`https://letterboxd.com/${LETTERBOXD_ID}/`} label="Letterboxd">
+        <svg viewBox="0 0 500 500" class="h-12 w-12 p-1" fill="currentColor">
+          <defs>
+            <rect id="path-1" x="0" y="0" width="129.847328" height="141.443299"></rect>
+            <rect id="path-3" x="0" y="0" width="129.847328" height="141.443299"></rect>
+          </defs>
+          <g id="letterboxd-decal-dots-neg-mono" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+            <g id="Dots" transform="translate(61.000000, 180.000000)">
+              <ellipse id="Green" fill="currentColor" cx="189" cy="70" rx="70.0786517" ry="70"></ellipse>
+              <g id="Blue" transform="translate(248.152672, 0.000000)">
+                <mask id="mask-2" fill="white">
+                  <use xlink:href="#path-1"></use>
+                </mask>
+                <g id="Mask"></g>
+                <ellipse fill="currentcolor" mask="url(#mask-2)" cx="59.7686766" cy="70" rx="70.0786517" ry="70"></ellipse>
+              </g>
+              <g id="Orange">
+                  <mask id="mask-4" fill="white">
+                    <use xlink:href="#path-3"></use>
+                  </mask>
+                  <g id="Mask"></g>
+                  <ellipse fill="currentColor" mask="url(#mask-4)" cx="70.0786517" cy="70" rx="70.0786517" ry="70"></ellipse>
+              </g>
+            </g>
+          </g>
+        </svg>
+      </Icon>
+
       <Icon href={`https://github.com/${GH_USER}`} label="Github">
         <svg
           aria-hidden="true"

src/lib/components/PostItem.svelte

@@ -6,14 +6,16 @@
 </script>
 
 <a data-sveltekit-prefetch class="post w-full" href={'/' + href}>
-  <div class="grid grid-cols-4 px-0 pt-8 my-4 sm:p-4">
-    <h2 class="col-span-4 text-lg font-bold text-accent sm:col-span-3">
-      {item.title}
-    </h2>
+  <div class="grid grid-cols-4 px-0 m-6">
+    <div class="col-span-4 sm:col-span-3 row-start-1">
+      <h2 class="text-lg font-bold text-accent">
+        {item.title}
+      </h2>
 
-    <p class="col-span-4 mb-2 text-slate-800 sm:col-span-3 dark:text-gray-400">
-      <slot />
-    </p>
+      <p class="mb-2 text-slate-800 dark:text-gray-400">
+        <slot />
+      </p>
+    </div>
 
     <div
       class="col-span-4 row-start-1 md:col-span-1 md:col-start-4 md:row-start-1 md:row-span-2 md:justify-self-end w-full text-right"

src/lib/components/Slice.svelte

@@ -2,6 +2,7 @@
   export let title = false
   export let date = false
   export let prose = true
+  export let full = false
 
   let slotWrapperClasses = 'w-full md:w-2/3 md:ml-4 lg:ml-12'
   if (title && prose) {
@@ -10,6 +11,10 @@
   if (title && !prose) {
     slotWrapperClasses = 'not-prose'
   }
+  // nuclear full width
+  if (full) {
+    slotWrapperClasses = 'w-full px-8'
+  }
 </script>
 
 <div

src/lib/siteConfig.js

@@ -5,7 +5,11 @@ export const GH_USER_REPO = 'tjheffner/heffdotdev' // used for pulling github is
 export const SITE_TITLE = 'heffner.dev'
 export const SITE_DESCRIPTION = 'personal site of tanner heffner'
 export const DEFAULT_OG_IMAGE = 'https://heffner.dev/og?message=heffner.dev'
+
 export const MY_TWITTER_HANDLE = 'foodpyramids'
+export const LETTERBOXD_ID = 'tjheffner'
+export const LASTFM_ID = 'lob_'
+export const STEAM_ID = ''
 
 export const APPROVED_POSTERS_GH_USERNAME = ['tjheffner']
 export const GH_PUBLISHED_TAGS = ['Published']

src/mdsvexlayout.svelte

@@ -1,9 +1,4 @@
-<!-- https://tailwindcss.com/docs/typography-plugin#element-modifiers -->
-<article
-  class="container prose mx-auto mb-16 flex w-full flex-col items-start px-4 dark:prose-invert hover:prose-a:text-blue-300
-prose-ul:list-disc
-sm:p-0
-"
->
+<!-- this file gets used for any .svx file -->
+<article class="mx-auto mb-16 flex w-full flex-col items-start px-4 sm:p-0 prose dark:prose-invert">
   <slot />
 </article>

src/routes/(main)/+page.svelte

@@ -1,6 +1,7 @@
 <script>
   import Slice from '$lib/components/Slice.svelte'
   import Card from '$lib/components/Card.svelte'
+  import Emojis from '$lib/components/Emojis.svelte'
   import {
     SITE_URL,
     SITE_TITLE,
@@ -32,10 +33,11 @@
 </svelte:head>
 
 <section class="mx-auto flex w-full flex-col items-start px-4 sm:p-0">
-  <Slice>
+  <Slice full={true}>
     <h1 class="text-shadow text-3xl font-bold lg:text-5xl">
-      🌊 welcome to my page 🌊
+      welcome to my page
     </h1>
+    <Emojis />
   </Slice>
 
   <Slice title="Hello World!">

src/routes/(main)/[slug=string]/+page.svelte

@@ -28,27 +28,18 @@
   <meta name="twitter:description" content={json.description} />
   {#if json.image}
     <meta property="og:image" content={json.image} />
-    <meta
-      name="twitter:card"
-      content={json.image ? 'summary_large_image' : 'summary'}
-    />
     <meta name="twitter:image" content={json.image} />
   {:else}
     <meta
       content={`https://heffner.dev/og?message=${json.title}`}
       property="og:image"
     />
-    <meta
-      name="twitter:card"
-      content={`https://heffner.dev/og?message=${json.title}`
-        ? 'summary_large_image'
-        : 'summary'}
-    />
     <meta
       name="twitter:image"
       content={`https://heffner.dev/og?message=${json.title}`}
     />
   {/if}
+  <meta name="twitter:card" content={'summary'} />
 </svelte:head>
 
 <a href="/blog" class="back-link"> Back </a>

src/routes/(main)/about/+page.svx

@@ -6,7 +6,7 @@
   <title>heffner.dev | about</title>
   <meta name="description" content="About this site." />
 	<meta property="og:image" content={`https://heffner.dev/og?message=about`}>
-	<meta name="twitter:card" content={`https://heffner.dev/og?message=about` ? 'summary_large_image' : 'summary'} />
+	<meta name="twitter:card" content={'summary'} />
 	<meta name="twitter:image" content={`https://heffner.dev/og?message=about`} />
 </svelte:head>
 

src/routes/(main)/blog/+page.svelte

@@ -108,12 +108,7 @@
   <title>heffner.dev | posts</title>
   <meta name="description" content="Latest musings fit to print." />
   <meta property="og:image" content={`https://heffner.dev/og?message=posts`} />
-  <meta
-    name="twitter:card"
-    content={`https://heffner.dev/og?message=posts`
-      ? 'summary_large_image'
-      : 'summary'}
-  />
+  <meta name="twitter:card" content={'summary'} />
   <meta name="twitter:image" content={`https://heffner.dev/og?message=posts`} />
 </svelte:head>
 
@@ -126,7 +121,7 @@
     Posts
   </h1>
   <p class="mb-4 text-zinc-900 dark:text-gray-400">
-    In total, I've written {items.length} posts on my blog. Use the search below
+    In total, I've written <strong>{items.length}</strong> posts on my blog. Use the search below
     to filter.
   </p>
 
@@ -162,7 +157,7 @@
   <!-- Filter Buttons -->
   <div class="my-4 flex w-full items-center">
     <span class="mr-2 text-zinc-900 dark:text-gray-400"> Filter: </span>
-    <span class="">
+    <span>
       <button
         type="button"
         on:click={() => {
@@ -215,13 +210,10 @@
       {/each}
     </ul>
     {#if !showAll}
-      <div class="flex justify-center">
+      <div class="flex justify-center mx-auto">
         <button
           on:click={() => (showAll = true)}
-          class="my-4 rounded-lg bg-sky-600 p-2 font-bold text-orange-100 ring-red-600
-					transition-all duration-200 ease-in-out hover:ring-2
-					dark:bg-yellow-800 dark:text-yellow-100 dark:ring-yellow-400
-					"
+          class="filter"
         >
           See more posts
         </button>
@@ -234,10 +226,7 @@
     </div>
     <button
       on:click={() => (filterStr = '')}
-      class="my-4 rounded-lg bg-yellow-400 p-2 font-bold text-yellow-800 ring-yellow-800
-			transition-all duration-200 ease-in-out hover:ring-2
-			dark:bg-yellow-800 dark:text-yellow-100 dark:ring-yellow-400
-			"
+      class="filter my-4"
     >
       Clear your search
     </button>

src/routes/(main)/blogroll/+page.svx

@@ -2,7 +2,7 @@
   <title>heffner.dev | blogroll</title>
   <meta name="description" content="other cool blogs I enjoy reading" />
 	<meta property="og:image" content={`https://heffner.dev/og?message=blogroll`}>
-	<meta name="twitter:card" content={`https://heffner.dev/og?message=blogroll` ? 'summary_large_image' : 'summary'} />
+	<meta name="twitter:card" content={'summary'} />
 	<meta name="twitter:image" content={`https://heffner.dev/og?message=blogroll`} />
 </svelte:head>
 

src/routes/(main)/gallery/+page.svelte

@@ -11,12 +11,7 @@
     property="og:image"
     content={`https://heffner.dev/og?message=adventure%20log`}
   />
-  <meta
-    name="twitter:card"
-    content={`https://heffner.dev/og?message=adventure%20log`
-      ? 'summary_large_image'
-      : 'summary'}
-  />
+  <meta name="twitter:card" content={'summary'} />
   <meta
     name="twitter:image"
     content={`https://heffner.dev/og?message=adventure%20log`}
@@ -29,7 +24,10 @@
       Gallery
     </h1>
     <p class="text-xl font-semibold text-accent">
-      details, photos, etc. from past adventures
+      details, photos<sup>*</sup>, etc. from past adventures
+    </p>
+    <p class="text-sm text-accent mt-2">
+      <sup>*</sup>advance warning many of the pages are very image heavy
     </p>
   </Slice>