feat: use tabler icons in place of feather icons

eleventy.config.js

@@ -42,7 +42,7 @@ module.exports = function (eleventyConfig) {
     "src/static/favicons/favicon.ico": "/favicon.ico",
     "node_modules/@fontsource/public-sans/": "static/fonts/public-sans/",
     "node_modules/@fontsource/jetbrains-mono/": "static/fonts/jetbrains-mono/",
-    "node_modules/feather-icons/dist/feather-sprite.svg": "static/img/icons/feather-sprite.svg"
+    "node_modules/@tabler/icons/tabler-sprite.svg": "static/img/icons/tabler-sprite.svg"
   });
 
   // add watch target for tailwind
@@ -119,7 +119,7 @@ module.exports = function (eleventyConfig) {
 
   // shortcode for returning markup for an icon
   eleventyConfig.addNunjucksShortcode("iconify", function (iconName, size = "20") {
-    return `<svg class="feather" width="${size}" height="${size}"><use href="/static/img/icons/feather-sprite.svg#${iconName}" /></svg>`;
+    return `<svg class="tabler-icon" width="${size}" height="${size}"><use xlink:href="/static/img/icons/tabler-sprite.svg#tabler-${iconName}" /></svg>`;
   });
 
   // eleventyConfig.addNunjucksAsyncShortcode("imageHeader", imageHeaderShortcode);

package.json

@@ -32,14 +32,14 @@
     "@fontsource/noto-sans": "^4.5.11",
     "@fontsource/public-sans": "^4.5.12",
     "@sardine/eleventy-plugin-external-links": "^1.4.0",
+    "@tabler/icons": "^2.13.2",
     "@tailwindcss/typography": "^0.5.9",
     "async-git": "^1.13.3",
     "autoprefixer": "^10.4.14",
     "canvas": "^2.11.0",
     "cssnano": "^6.0.0",
     "eleventy-plugin-reading-time": "^0.0.1",
     "eslint": "^8.34.0",
-    "feather-icons": "^4.29.0",
     "html-minifier": "^4.0.0",
     "markdown-it-footnote": "^3.0.3",
     "markdown-it-image-figures": "^2.1.1",

src/_includes/layouts/post.njk

@@ -33,14 +33,12 @@ layout: layouts/base
 </article>
 
 <div class="mt-8">
-    {% if updated %}
+    {%- if updated %}
     <p class="mb-2 text-sm"><i>Last Updated: <time datetime="{{ updated | dateISO }}" title="{{ updated | dateISO }}">{% dateReadable updated, true %}</time></i></p>
-    {% endif %}
-
-
+    {%- endif %}
     <p class="text-sm">
         This post is licensed under <a href="http://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a> by the author.
-        <!-- {%- if image %} Header photo from <a href="{{ image }}">Unsplash</a>.<br>{%- endif %} -->
+        {#- {%- if image %} Header photo from <a href="{{ image }}">Unsplash</a>.<br>{%- endif %} #}
         The source for this page is available on {% page_source_link 'GitHub' %}.
     </p>
 </div>

src/_includes/partials/footer.njk

@@ -1,18 +1,15 @@
 <footer class="w-full p-0 text-sm">
-    <div class="w-full max-w-5xl flex flex-row flex-wrap items-center justify-between my-0 mx-auto pt-20 pb-8 px-4">
-        <div class="flex flex-col gap-y-1">
+    <div class="w-full max-w-5xl flex flex-row flex-wrap items-center justify-between gap-1 my-0 mx-auto pt-20 pb-8 px-4">
+        <div class="flex flex-col gap-1">
             <div>&copy; 2020&ndash;2023 {{ metadata.owner }}</div>
             <div><a href="/colophon">Colophon</a></div>
         </div>
-        <div class="flex flex-col gap-y-1 text-right">
-            <div class="flex flex-row items-center gap-x-2">
-                <span class="inline-flex items-center justify-center"><a href="/feed.xml" title="RSS Feed">{% iconify "rss", "18" %}</a></span>
-                <span class="inline-flex items-center justify-center"><a href="https://github.com/{{ metadata.github_handle }}" title="GitHub profile">{% iconify "github", "18" %}</a></span>
-                <span class="inline-flex items-center justify-center"><a href="https://twitter.com/{{ metadata.twitter_handle }}" title="Twitter profile">{% iconify "twitter", "18" %}</a></span>
-                <span class="inline-flex items-center justify-center"><a href="https://mastodon.social/{{ metadata.mastodon_handle }}" title="Mastodon profile" rel="me">{% iconify "at-sign", "18" %}</a></span>
-                <span class="inline-flex items-center justify-center"><button id="dark-mode-button" class="hover:text-blue-600 dark:hover:text-sky-500" title="Toggle dark mode">{% iconify "moon", "18" %}</button></span>
+        <div class="flex flex-col gap-1 text-right">
+            <div class="flex flex-row items-center gap-x-2 self-end">
+                <a href="/feed.xml" title="RSS Feed">{% iconify "rss", "20" %}</a></span>
+                <button id="dark-mode-button" class="hover:text-blue-600 dark:hover:text-sky-500" title="Toggle dark mode">{% iconify "moon", "20" %}</button>
             </div>
-            <div class="font-mono" title="{{ git.commit_date }}">{% commit_link git.short_sha %}</div>
+            <div class="font-mono text-xs" title="Last updated: {{ git.commit_date }}">{% commit_link git.short_sha %}</div>
         </div>
     </div>
 </footer>

src/about.md

@@ -7,10 +7,10 @@ title: About Me
 
 ![self](/static/img/self.jpg "Yep that's me")
 
-I'm currently working as a software engineer at Lockheed Martin Corporation.
-
 I'm married to a wonderful wife and I'm father to the cutest girl and the sweetest boy.
 
+I'm currently working as a software engineer for Lockheed Martin Corporation.
+
 ## Contact Me
 If you feel like reaching out, you can find me at
  * Twitter: [@sphars_](https://twitter.com/sphars_) 

src/colophon.md

@@ -9,8 +9,8 @@ This site was built with the following:
 
 * Static site generator: [Eleventy](https://www.11ty.dev)
   * Theme: Customized [TailwindCSS](https://www.tailwindcss.com)
-* Fonts: [Public Sans](https://fonts.google.com/specimen/Public+Sans) and [JetBrains Mono](https://www.jetbrains.com/lp/mono/)
-* Icons: [Feather Icons](https://feathericons.com)
+  * Fonts: [Public Sans](https://fonts.google.com/specimen/Public+Sans) and [JetBrains Mono](https://www.jetbrains.com/lp/mono/)
+  * Icons: [Tabler Icons](https://tabler.io)
 * Hosting: [Netlify](https://www.netlify.com) (deployed site) and [GitHub](https://github.com/sphars/spencerharston.com) (source code)
 * Domain registrar: [Porkbun](https://porkbun.com)
 * Editor: [VS Code](https://code.visualstudio.com) 

src/index.njk

@@ -4,10 +4,15 @@ metaTagline: The Homepage of Spencer Harston
 ---
 
 <div class="flex flex-col lg:flex-row items-center my-2">
-    <img class="rounded-full border border-gray-400 dark:border-gray-600 h-40 w-40 mb-2 lg:mb-0" src="/static/img/sea-photo-crop.jpg" alt="grayscale sea photo">
+    <img class="rounded-full border border-gray-400 dark:border-gray-600 h-36 w-36 mb-2 lg:mb-0" src="/static/img/sea-photo-crop.jpg" alt="grayscale sea photo">
     <div class="flex flex-col items-center lg:items-start justify-center gap-3 py-0 px-4">
         <h1 class="text-3xl text-center font-bold">Spencer Harston</h1>
         <p class="text-center lg:text-left">Welcome to my corner of the internet</p>
+        <div class="flex flex-row items-center gap-x-2">
+            <a class="text-zinc-800 dark:text-zinc-200" href="https://github.com/{{ metadata.github_handle }}" title="GitHub profile">{% iconify "brand-github", "20" %}</a>
+            <a class="text-zinc-800 dark:text-zinc-200" href="https://twitter.com/{{ metadata.twitter_handle }}" title="Twitter profile">{% iconify "brand-twitter", "20" %}</a>
+            <a class="text-zinc-800 dark:text-zinc-200" href="https://mastodon.social/{{ metadata.mastodon_handle }}" title="Mastodon profile" rel="me">{% iconify "brand-mastodon", "20" %}</a>
+        </div>
     </div>
 </div>  
 

src/posts/books-of-2023.md

@@ -2,7 +2,7 @@
 title: Books of 2023
 description: A list of books I've read, or may read, this year. Updated periodically.
 date: 2023-01-11 20:00:00
-updated: 2023-03-29 22:00:00
+updated: 2023-04-03 22:29:00
 tags:
     - personal
 image: https://images.unsplash.com/photo-1462392627162-2baa2b3518a8
@@ -15,20 +15,20 @@ The following is a list of books I'm currently reading, have finished, decided t
 
 Links are to the Goodreads entry or other relevant source for the book.
 
+## Currently Reading
+* [The Count of Monte Cristo](https://www.goodreads.com/book/show/7126.The_Count_of_Monte_Cristo) by Alexandre Dumas
+* [Permanent Record](https://www.goodreads.com/book/show/46223297-permanent-record) by Edward Snowden
+* [The Help](https://www.goodreads.com/book/show/4667024-the-help) by Kathryn Stockett
+
 ## Finished Reading
+Generally speaking, if I finish a book, it means the book was enjoyable enough for me to, well, finish it. A ⭐ means the book is recommended, and I think you should read it too.
+
 * [I'm Glad My Mom Died](https://www.goodreads.com/book/show/59364173-i-m-glad-my-mom-died) by Jennette McCurdy ⭐
 * [How to Take Over the World](https://www.goodreads.com/book/show/58446218-how-to-take-over-the-world) by Ryan North ⭐
 * [Born a Crime](https://www.goodreads.com/book/show/29780253-born-a-crime) by Trevor Noah ⭐
 * [Lamb: The Gospel According to Biff, Christ's Childhood Pal](https://www.goodreads.com/book/show/28881.Lamb) by Christopher Moore
 * [Futuristic Violence and Fancy Suits](https://www.goodreads.com/book/show/20501606-futuristic-violence-and-fancy-suits) by Jason Pargin
 
-Generally speaking, if I finished a book, that means it was enjoyable enough for me to, well, finish it. However, a ⭐ means the book is recommended, and I think you should read it too.
-
-## Currently Reading
-* [The Count of Monte Cristo](https://www.goodreads.com/book/show/7126.The_Count_of_Monte_Cristo) by Alexandre Dumas
-* [Permanent Record](https://www.goodreads.com/book/show/46223297-permanent-record) by Edward Snowden
-* [The Help](https://www.goodreads.com/book/show/4667024-the-help) by Kathryn Stockett
-
 ## Didn't Finish
 * [The Cartographers](https://www.goodreads.com/book/show/55004093-the-cartographers) by Peng Shepherd
 

src/static/js/darkmode.js

@@ -5,10 +5,10 @@ function isDarkModeEnabled() {
 function enableDarkMode(isSet) {
   if(isSet){
     document.documentElement.classList.add("dark");
-    darkModeButton.innerHTML = `<svg class="feather" width="${18}" height="${18}"><use href="/static/img/icons/feather-sprite.svg#${"sun"}" /></svg>`;
+    darkModeButton.innerHTML = `<svg class="tabler-icon" width="${20}" height="${20}"><use href="/static/img/icons/tabler-sprite.svg#tabler-${"sun"}" /></svg>`;
   } else {
     document.documentElement.classList.remove("dark");
-    darkModeButton.innerHTML = `<svg class="feather" width="${18}" height="${18}"><use href="/static/img/icons/feather-sprite.svg#${"moon"}" /></svg>`;
+    darkModeButton.innerHTML = `<svg class="tabler-icon" width="${20}" height="${20}"><use href="/static/img/icons/tabler-sprite.svg#tabler-${"moon"}" /></svg>`;
   }
 }
 

src/styles/site.css

@@ -16,7 +16,7 @@
 @tailwind components;
 @tailwind utilities;
 
-.feather {
+.tabler-icon {
     stroke: currentColor;
     stroke-width: 2;
     stroke-linecap: round;