more cleanup

package.json

@@ -66,10 +66,14 @@
   "type": "module",
   "dependencies": {
     "date-fns": "^2.28.0",
+    "hast-util-from-selector": "^3.0.0",
+    "hast-util-select": "^6.0.2",
     "parse-link-header": "^2.0.0",
     "prism-themes": "^1.9.0",
     "remark": "^14.0.2",
+    "remark-unwrap-images": "^4.0.0",
     "shiki": "^0.14.7",
-    "snarkdown": "^2.0.0"
+    "snarkdown": "^2.0.0",
+    "unist-util-visit": "^5.0.0"
   }
 }

src/lib/components/Card.svelte

@@ -10,9 +10,8 @@
     <h3>
       {title}
     </h3>
-    <div />
-  </div></a
->
+  </div>
+</a>
 
 <style>
   .card h3 {

src/lib/components/Comments.svelte

@@ -1,8 +1,11 @@
 <script>
+  import utterances, {injectScript}  from '$lib/loadUtterances'
+
   export let issueNumber
+  export let commentsEl
 </script>
 
-<div>
+<!-- <div>
   <script
     src="https://utteranc.es/client.js"
     repo="tjheffner/heffdotdev"
@@ -11,4 +14,14 @@
     crossorigin="anonymous"
     async>
   </script>
+</div> -->
+
+
+<div class="mb-8 text-black dark:text-white " bind:this={commentsEl} use:utterances={{number: issueNumber}}>
+  Loading comments...
+  <!-- svelte-ignore a11y-mouse-events-have-key-events -->
+  <button class="my-4 bg-blue-200 hover:bg-blue-100 text-black p-2 rounded-lg"
+    on:click={() => injectScript(commentsEl, issueNumber)}
+    on:mouseover={() => injectScript(commentsEl, issueNumber)}
+  >Load now</button>
 </div>

src/lib/components/Footer.svelte

@@ -0,0 +1,83 @@
+<script>
+  import Icon from '$lib/components/Icon.svelte'
+  import NavLink from '$lib/components/NavLink.svelte'
+  import { MY_TWITTER_HANDLE, GH_USER } from '$lib/siteConfig'
+</script>
+
+<footer
+  id="menu"
+  class="flex flex-col justify-center bg-orange-100 px-4 py-12 sm:px-8 dark:bg-slate-900"
+>
+  <hr class="mb-8" />
+  <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">
+      <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">
+      <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"/>
+          <path d="M160 213h-34a82 82 0 0 0 -82 -82v-34a116 116 0 0 1 116 116z" />
+          <path d="M184 213A140 140 0 0 0 44 73 V 38a175 175 0 0 1 175 175z" />
+        </svg>
+      </Icon>
+
+      <Icon href={`https://twitter.com/${MY_TWITTER_HANDLE}`} 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/lob_'} 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://github.com/${GH_USER}`} label="Github">
+        <svg
+          aria-hidden="true"
+          class="h-12 w-12 p-1"
+          fill="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path
+            fill-rule="evenodd"
+            d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483
+          0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608
+          1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088
+          2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988
+          1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112
+          6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202
+          2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566
+          4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019
+          10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
+            clip-rule="evenodd"
+          />
+        </svg>
+      </Icon>
+
+      <Icon href="https://www.linkedin.com/in/tannerheffner" label="LinkedIn">
+        <svg
+          aria-hidden="true"
+          class="h-12 w-12 p-1"
+          fill="currentColor"
+          viewBox="0 0 512 512"
+        >
+          <path
+            d="M186.4 142.4c0 19-15.3 34.5-34.2 34.5 -18.9 0-34.2-15.4-34.2-34.5 0-19 15.3-34.5 34.2-34.5C171.1 107.9 186.4 123.4 186.4 142.4zM181.4 201.3h-57.8V388.1h57.8V201.3zM273.8 201.3h-55.4V388.1h55.4c0 0 0-69.3 0-98 0-26.3 12.1-41.9 35.2-41.9 21.3 0 31.5 15 31.5 41.9 0 26.9 0 98 0 98h57.5c0 0 0-68.2 0-118.3 0-50-28.3-74.2-68-74.2 -39.6 0-56.3 30.9-56.3 30.9v-25.2H273.8z"
+          />
+        </svg>
+      </Icon>
+    </div>
+  </div>
+</footer>

src/lib/components/Header.svelte

@@ -1,5 +1,4 @@
 <script>
-  import MobileMenu from './MobileMenu.svelte'
   let isDark = false
   if (typeof localStorage !== 'undefined') {
     if (
@@ -24,49 +23,76 @@
 </script>
 
 <nav class="relative flex justify-between md:mx-4 lg:mx-12">
-  <MobileMenu />
   <h1
     class="text-lg font-bold text-accent transition-all duration-200 ease-in-out hover:scale-110"
   >
     <a href="/">heffner.dev</a>
   </h1>
-  <button
-    aria-label="Toggle Dark Mode"
-    class="ml-1 flex h-9 w-9 items-center justify-center rounded-lg bg-sky-600 ring-red-600 transition-all
-		hover:ring-2 dark:bg-yellow-800 dark:ring-yellow-400"
-    on:click={toggleDarkMode}
-  >
-    {#if isDark}
+  <div class="flex">
+    <a href="#menu"
+       class="flex mr-3 h-9 w-9 items-center justify-center rounded-lg"
+    >
       <svg
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 24 24"
+        class="absolute h-5 w-5 text-red-600 dark:text-yellow-400"
+        width="20"
+        height="20"
+        viewBox="0 0 20 20"
         fill="none"
-        stroke="currentColor"
-        class="h-5 w-5 text-gray-800 dark:text-yellow-100"
-      >
+        >
         <path
+          d="M2.5 7.5H17.5"
+          stroke="currentColor"
+          stroke-width="1.5"
           stroke-linecap="round"
           stroke-linejoin="round"
-          stroke-width="2"
-          d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728
-					0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"
         />
-      </svg>
-    {:else}
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        class="h-5 w-5 text-orange-100 dark:text-gray-200"
-      >
         <path
+          d="M2.5 12.5H17.5"
+          stroke="currentColor"
+          stroke-width="1.5"
           stroke-linecap="round"
           stroke-linejoin="round"
-          stroke-width="2"
-          d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"
         />
       </svg>
-    {/if}
-  </button>
+    </a>
+    <button
+      aria-label="Toggle Dark Mode"
+      class="ml-1 flex h-9 w-9 items-center justify-center rounded-lg bg-sky-600 ring-red-600 transition-all
+  		hover:ring-2 dark:bg-yellow-800 dark:ring-yellow-400"
+      on:click={toggleDarkMode}
+    >
+      {#if isDark}
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          class="h-5 w-5 text-gray-800 dark:text-yellow-100"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728
+  					0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"
+          />
+        </svg>
+      {:else}
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          class="h-5 w-5 text-orange-100 dark:text-gray-200"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"
+          />
+        </svg>
+      {/if}
+    </button>
+  </div>
 </nav>

src/lib/components/Icon.svelte

@@ -4,10 +4,12 @@
 </script>
 
 <a
-  class="m-1 inline-block rounded-lg bg-sky-600 text-orange-100 ring-red-600
+  class="m-1 inline-block rounded-lg
          transition-all duration-200
-         ease-in-out hover:ring-2 dark:bg-yellow-800
-         dark:text-yellow-100 dark:ring-yellow-400"
+         ease-in-out hover:ring-2
+         bg-transparent
+         text-red-600 ring-red-600
+         dark:text-yellow-400 dark:ring-yellow-400"
   {href}
   aria-label={label}
 >