Merge pull request #104 from tjheffner/more-cleaning

More clean-up
tjheffner · Jan 24, 2024 · 5314eae · 5314eae
2 parents b76d398 + 2680188
commit 5314eae
Show file tree

Hide file tree

Showing 18 changed files with 93 additions and 75 deletions.
diff --git a/.github/ISSUE_TEMPLATE/new-gallery-post.md b/.github/ISSUE_TEMPLATE/new-gallery-post.md
@@ -12,6 +12,7 @@ date: 2022-01-16 00:00:00
 description: "will show underneath title on list page"
 image: upload cover image here
 alt: image alt text
+warn: true
 ***
 
 post content goes here, underneath
diff --git a/src/lib/components/Footer.svelte b/src/lib/components/Footer.svelte
@@ -1,7 +1,7 @@
 <script>
   import Icon from '$lib/components/Icon.svelte'
   import NavLink from '$lib/components/NavLink.svelte'
-  import { MY_TWITTER_HANDLE, LASTFM_ID, LETTERBOXD_ID, GH_USER } from '$lib/siteConfig'
+  import { TWITTER_ID, LASTFM_ID, LETTERBOXD_ID, GH_USER } from '$lib/siteConfig'
 
   let isDark = false
   if (typeof localStorage !== 'undefined') {
@@ -23,15 +23,15 @@
   <div
     class="grid grid-cols-4 gap-4 md:mx-4 md:gap-8 lg:mx-12 lg:gap-12 xl:gap-16"
   >
-    <div class="col-span-3 md:col-span-2">
+    <div class="col-span-2 md:col-span-2">
       <NavLink href="/blog">Posts</NavLink>
       <NavLink href="/gallery">Gallery</NavLink>
       <NavLink href="/work">Work</NavLink>
       <NavLink href="/about">About</NavLink>
       <NavLink href="/blogroll">Blogroll</NavLink>
     </div>
 
-    <div class="col-span-1 text-right md:col-span-2 md:col-start-4">
+    <div class="col-span-2 text-right md:col-start-4">
       <Icon href={`/rss.xml`} label="RSS">
         <svg viewBox="0 0 256 256" class="h-12 w-12 p-1" fill="currentColor">
           <circle cx="68" cy="189" r="24"/>
@@ -40,47 +40,19 @@
         </svg>
       </Icon>
 
-      <Icon href={`https://twitter.com/${MY_TWITTER_HANDLE}`} label="Twitter">
+      <Icon href={`https://twitter.com/${TWITTER_ID}`} label="Twitter">
         <svg viewBox="0 0 512 512" class="h-12 w-12 p-1" fill="currentColor">
           <path
             d="M419.6 168.6c-11.7 5.2-24.2 8.7-37.4 10.2 13.4-8.1 23.8-20.8 28.6-36 -12.6 7.5-26.5 12.9-41.3 15.8 -11.9-12.6-28.8-20.6-47.5-20.6 -42 0-72.9 39.2-63.4 79.9 -54.1-2.7-102.1-28.6-134.2-68 -17 29.2-8.8 67.5 20.1 86.9 -10.7-0.3-20.7-3.3-29.5-8.1 -0.7 30.2 20.9 58.4 52.2 64.6 -9.2 2.5-19.2 3.1-29.4 1.1 8.3 25.9 32.3 44.7 60.8 45.2 -27.4 21.4-61.8 31-96.4 27 28.8 18.5 63 29.2 99.8 29.2 120.8 0 189.1-102.1 185-193.6C399.9 193.1 410.9 181.7 419.6 168.6z"
           />
         </svg>
       </Icon>
 
-      <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"/>
+      <!-- <Icon href={`https://instagram.com/${TWITTER_ID}`} label="Instagram">
+        <svg class="h-12 w-12 p-1" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path fill-rule="evenodd" clip-rule="evenodd" d="M2 6C2 3.79086 3.79086 2 6 2H18C20.2091 2 22 3.79086 22 6V18C22 20.2091 20.2091 22 18 22H6C3.79086 22 2 20.2091 2 18V6ZM6 4C4.89543 4 4 4.89543 4 6V18C4 19.1046 4.89543 20 6 20H18C19.1046 20 20 19.1046 20 18V6C20 4.89543 19.1046 4 18 4H6ZM12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9ZM7 12C7 9.23858 9.23858 7 12 7C14.7614 7 17 9.23858 17 12C17 14.7614 14.7614 17 12 17C9.23858 17 7 14.7614 7 12ZM17.5 8C18.3284 8 19 7.32843 19 6.5C19 5.67157 18.3284 5 17.5 5C16.6716 5 16 5.67157 16 6.5C16 7.32843 16.6716 8 17.5 8Z" fill="currentColor"/>
         </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> -->
 
       <Icon href={`https://github.com/${GH_USER}`} label="Github">
         <svg
@@ -117,6 +89,40 @@
           />
         </svg>
       </Icon>
+
+      <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>
     </div>
   </div>
 </footer>
diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte
@@ -33,7 +33,7 @@
        class="flex mr-3 h-9 w-9 items-center justify-center rounded-lg"
     >
       <svg
-        class="absolute h-5 w-5 text-red-600 dark:text-yellow-400"
+        class="absolute h-5 w-5 text-secondary"
         width="20"
         height="20"
         viewBox="0 0 20 20"

diff --git a/src/lib/components/Icon.svelte b/src/lib/components/Icon.svelte
@@ -8,8 +8,8 @@
          transition-all duration-200
          ease-in-out hover:ring-2
          bg-transparent
-         text-red-600 ring-red-600
-         dark:text-yellow-400 dark:ring-yellow-400"
+         text-secondary
+         ring-red-600 dark:ring-yellow-400"
   {href}
   aria-label={label}
 >

diff --git a/src/lib/components/PostItem.svelte b/src/lib/components/PostItem.svelte
@@ -26,9 +26,9 @@
         <span
           class="
           w-fit rounded-full
-          bg-orange-300 px-2
+          bg-alternate dark:bg-secondary px-2
           py-1 text-xs font-bold
-          text-red-600 text-white md:px-4 dark:bg-lime-600 dark:text-gray-900
+          text-red-600 text-white md:px-4 dark:text-gray-900
         ">
           {item.category}
         </span>
@@ -40,7 +40,7 @@
 <style>
   .post:hover {
     & h2 {
-      @apply text-orange-600 dark:text-yellow-400;
+      @apply text-secondary;
     }
   }
 </style>
diff --git a/src/lib/components/ProjectItem.svelte b/src/lib/components/ProjectItem.svelte
@@ -21,7 +21,7 @@
 <style>
   .project:hover {
     & p {
-      @apply text-red-600 dark:text-yellow-400;
+      @apply text-secondary;
     }
   }
 </style>
diff --git a/src/lib/components/Slice.svelte b/src/lib/components/Slice.svelte
@@ -3,7 +3,7 @@
   export let date = false
   export let prose = true
   export let full = false
-
+  export let warn = false
 
   let sliceClasses = "slice mb-6 grid w-full grid-cols-4 gap-4 py-8 md:mb-8 md:gap-8 md:py-12 lg:gap-12 xl:gap-16"
   let slotWrapperClasses = 'w-full md:w-2/3 md:ml-4 lg:ml-12'
@@ -23,13 +23,9 @@
 <div class={sliceClasses}>
   {#if title}
     <div class="col-span-4 md:col-span-1">
-      <h2
-        class="sticky top-4 mb-2 text-xl font-bold
-							 text-black md:ml-4 md:text-2xl lg:ml-12 dark:text-blue-300
-		"
-      >
+      <h2 class="sticky top-4 mb-2 text-xl font-bold text-black md:ml-4 md:text-2xl lg:ml-12 dark:text-blue-300">
         <a href="#{title}" class="slice-title">
-          {title}
+          {title}{#if warn}<a href="#warning" class="text-secondary">*</a>{/if}
         </a>
         {#if date}
         <span class="text-unshadow text-base text-slate-500 dark:text-gray-600">
@@ -41,7 +37,6 @@
   {/if}
   <div class={title ? 'col-span-4 md:col-span-3 xl:col-span-2' : 'col-span-4'}>
     <p class={slotWrapperClasses}>
-      <!-- <p class="{title ? 'prose prose-lg prose-slate dark:prose-invert' : 'w-full md:w-2/3 md:ml-4 lg:ml-12'}"> -->
       <slot />
     </p>
   </div>

diff --git a/src/lib/content.js b/src/lib/content.js
@@ -111,7 +111,8 @@ function parseIssue(issue, label) {
         type: 'gallery',
         ...base,
         alt: data.alt,
-        images: data.images
+        images: data.images,
+        warn: data.warn || false
       }
       break
     case 'Published':

diff --git a/src/lib/siteConfig.js b/src/lib/siteConfig.js
@@ -6,10 +6,10 @@ 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 TWITTER_ID = 'foodpyramids'
 export const LETTERBOXD_ID = 'tjheffner'
 export const LASTFM_ID = 'lob_'
-export const STEAM_ID = ''
+// export const STEAM_ID = ''
 
 export const APPROVED_POSTERS_GH_USERNAME = ['tjheffner']
 export const GH_PUBLISHED_TAGS = ['Published']

diff --git a/src/routes/(main)/+page.svelte b/src/routes/(main)/+page.svelte
@@ -7,7 +7,7 @@
     SITE_TITLE,
     SITE_DESCRIPTION,
     DEFAULT_OG_IMAGE,
-    MY_TWITTER_HANDLE,
+    TWITTER_ID,
   } from '$lib/siteConfig'
 </script>
 
@@ -26,7 +26,7 @@
   <meta property="og:description" content={SITE_DESCRIPTION} />
   <meta property="og:image" content={DEFAULT_OG_IMAGE} />
   <meta name="twitter:card" content="summary" />
-  <meta name="twitter:creator" content={'@' + MY_TWITTER_HANDLE} />
+  <meta name="twitter:creator" content={'@' + TWITTER_ID} />
   <meta name="twitter:title" content={SITE_TITLE} />
   <meta name="twitter:description" content={SITE_DESCRIPTION} />
   <meta name="twitter:image" content={DEFAULT_OG_IMAGE} />

diff --git a/src/routes/(main)/[slug=string]/+page.svelte b/src/routes/(main)/[slug=string]/+page.svelte
@@ -1,6 +1,6 @@
 <script>
   import { page } from '$app/stores'
-  import { MY_TWITTER_HANDLE, SITE_URL } from '$lib/siteConfig'
+  import { TWITTER_ID, SITE_URL } from '$lib/siteConfig'
   import Comments from '$lib/components/Comments.svelte'
   import 'prism-themes/themes/prism-shades-of-purple.min.css'
 
@@ -23,7 +23,7 @@
   <meta property="og:title" content={json.title} />
   <meta name="Description" content={json.description} />
   <meta property="og:description" content={json.description} />
-  <meta name="twitter:creator" content={'@' + MY_TWITTER_HANDLE} />
+  <meta name="twitter:creator" content={'@' + TWITTER_ID} />
   <meta name="twitter:title" content={json.title} />
   <meta name="twitter:description" content={json.description} />
   {#if json.image}

diff --git a/src/routes/(main)/gallery/+page.svelte b/src/routes/(main)/gallery/+page.svelte
@@ -20,25 +20,33 @@
 
 <section class="mx-auto flex w-full flex-col items-start px-4 sm:p-0">
   <Slice>
-    <h1 class="mb-6 text-3xl font-bold tracking-tight text-accent md:text-5xl">
+    <h1 class="mb-6 text-3xl font-bold tracking-tight text-shadow md:text-5xl">
       Gallery
     </h1>
     <p class="text-xl font-semibold text-accent">
-      details, photos<sup>*</sup>, etc. from past adventures
+      details, photos<sup class="text-secondary">*</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 class="text-sm text-secondary mt-2">
+      * advance warning many of the pages are very image heavy
     </p>
   </Slice>
 
   {#each items as trip}
-    <Slice title={trip.title} date={trip.date}>
+    <Slice title={trip.title} date={trip.date} warn={trip.warn}>
       <a href="/gallery/{trip.slug}" style="display: inline-block" class="not-prose w-full">
         <img src={trip.image} alt={trip.alt} class="gallery-image" loading="lazy" />
         {'>> ' + trip.description + ' <<'}
       </a>
+
+      {#if trip.title === 'Japan'}
+      <p class="text-secondary font-bold text-xs">The above link has <strong>>150 MB</strong> worth of images. Please be on wifi.</p>
+      {/if}
     </Slice>
   {/each}
+
+  <p id="warning" class="text-sm text-secondary my-12 mx-0 md:mx-4 lg:mx-12">
+    * seriously, this page has at least <span class="text-secondary">40 MB</span> worth of images.
+  </p>
 </section>
 
 <style>

diff --git a/src/routes/(main)/gallery/[slug]/+page.svelte b/src/routes/(main)/gallery/[slug]/+page.svelte
@@ -1,6 +1,6 @@
 <script>
   import { page } from '$app/stores'
-  import { MY_TWITTER_HANDLE, SITE_URL } from '$lib/siteConfig'
+  import { TWITTER_ID, SITE_URL } from '$lib/siteConfig'
   import Comments from '$lib/components/Comments.svelte'
   import 'prism-themes/themes/prism-shades-of-purple.min.css'
 
@@ -23,7 +23,7 @@
   <meta property="og:title" content={json.title} />
   <meta name="Description" content={json.description} />
   <meta property="og:description" content={json.description} />
-  <meta name="twitter:creator" content={'@' + MY_TWITTER_HANDLE} />
+  <meta name="twitter:creator" content={'@' + TWITTER_ID} />
   <meta name="twitter:title" content={json.title} />
   <meta name="twitter:description" content={json.description} />
   {#if json.image}

diff --git a/src/routes/(main)/work/+page.svelte b/src/routes/(main)/work/+page.svelte
@@ -32,7 +32,7 @@
 
 <section class="mx-auto flex w-full flex-col items-start px-4 sm:p-0">
   <Slice>
-    <h1 class="mb-6 text-3xl font-bold tracking-tight text-accent md:text-5xl">
+    <h1 class="mb-6 text-3xl font-bold tracking-tight text-shadow md:text-5xl">
       Past work
     </h1>
     <p class="text-xl font-semibold text-accent">

diff --git a/src/routes/(main)/work/[slug]/+page.svelte b/src/routes/(main)/work/[slug]/+page.svelte
@@ -4,7 +4,7 @@
 
   const { content, name, date, description, image, url } = data
 
-  import { MY_TWITTER_HANDLE, SITE_URL } from '$lib/siteConfig'
+  import { TWITTER_ID, SITE_URL } from '$lib/siteConfig'
   import GetInTouch from '$lib/components/GetInTouch.svelte'
 </script>
 
@@ -17,7 +17,7 @@
   <meta name="Description" content={description} />
   <meta property="og:description" content={description} />
   <meta name="twitter:card" content={'summary'} />
-  <meta name="twitter:creator" content={'@' + MY_TWITTER_HANDLE} />
+  <meta name="twitter:creator" content={'@' + TWITTER_ID} />
   <meta name="twitter:title" content={name} />
   <meta name="twitter:description" content={description} />
   {#if image}