feat: design + perf + tags etc.

.eleventy.js

@@ -1,6 +1,5 @@
 import syntaxHighlight from '@11ty/eleventy-plugin-syntaxhighlight'
 import tablerIcons from 'eleventy-plugin-tabler-icons'
-import pluginRss from '@11ty/eleventy-plugin-rss'
 import postGraph from '@rknightuk/eleventy-plugin-post-graph'
 import embedEverything from 'eleventy-plugin-embed-everything'
 
@@ -12,7 +11,7 @@ import htmlmin from 'html-minifier-terser'
 import filters from './config/filters/index.js'
 import { slugifyString } from './config/utils/index.js'
 import { svgToJpeg } from './config/events/index.js'
-import { tagList, tagMap, postStats } from './config/collections/index.js'
+import { tagList, tagMap, postStats, tagsSortedByCount } from './config/collections/index.js'
 import { img } from './config/shortcodes/index.js'
 
 import { execSync } from 'child_process'
@@ -84,6 +83,7 @@ export default async function (eleventyConfig) {
   eleventyConfig.addCollection('tagList', tagList)
   eleventyConfig.addCollection('tagMap', tagMap)
   eleventyConfig.addCollection('postStats', postStats)
+  eleventyConfig.addCollection('tagsSortedByCount', tagsSortedByCount)
 
   const md = markdownIt({ html: true, linkify: true })
   md.use(markdownItAnchor, {

_redirects

@@ -30,6 +30,7 @@
 /tags/.env /tags/env 301!
 
 # 404s
+/sitemap.txt /sitemap.xml 301!
 /assets/img/social-preview/adding-a-light/dark-theme-toggle-preview.jpeg /assets/img/social-preview/adding-a-light-dark-theme-toggle-preview.jpeg 301!
 /assets/img/social-card.jpg /assets/img/ogi/default.jpg 301!
 /posts / 301!
@@ -48,7 +49,7 @@
 
 # general
 /articles/ / 301!
-/sitemap.txt /sitemap.xml 301!
+/tags /search 301!
 /mastodon https://social.lol/@cory 301!
 /coffee https://www.buymeacoffee.com/cory 301!
 /speedlify https://speedlify.coryd.dev 301!

config/collections/index.js

@@ -38,6 +38,23 @@ export const tagMap = (collection) => {
   return tags
 }
 
+export const tagsSortedByCount = (collectionApi) => {
+  const tagStats = {};
+  const posts = collectionApi.getFilteredByGlob('src/posts/**/*.md').sort((a, b) => {
+    return a.date - b.date;
+  });
+  posts.forEach((post) => {
+    post.data.tags.forEach((tag) => {
+      if (!tagStats[tag]) tagStats[tag] = 1;
+      if (tagStats[tag]) tagStats[tag] = tagStats[tag] + 1;
+    });
+  });
+  const deletedTags = ['posts', 'politics', 'net neutrality'];
+  deletedTags.forEach(tag => delete tagStats[tag]);
+  const tagStatsArr = Object.entries(tagStats);
+  return tagStatsArr.sort((a, b) => b[1] - a[1]).map(([key, value]) => `${key}`);
+}
+
 export const postStats = (collectionApi) => {
   const oneDayMilliseconds = 1000 * 60 * 60 * 24
   const statsObject = {

config/filters/index.js

@@ -184,4 +184,14 @@ export default {
       }
       return normalized
     }),
+
+    // posts
+  formatTag: (string) => {
+    const capitalizeFirstLetter = (string) => {
+        return string.charAt(0).toUpperCase() + string.slice(1);
+    }
+    if (string === 'iOS' || string === 'macOS') return `#${string}`
+    if (!string.includes(' ')) return `#${capitalizeFirstLetter(string)}`
+    return `#${string.split(' ').map(s => capitalizeFirstLetter(s)).join('')}`
+  }
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "coryd.dev",
-  "version": "6.9.7",
+  "version": "7.0.0",
   "description": "The source for my personal site. Built using 11ty and hosted on Netlify.",
   "type": "module",
   "scripts": {

src/_data/nav.js

@@ -11,8 +11,7 @@ export default async function () {
       { name: 'Now' },
       { name: 'About' },
       { name: 'Links', icon: 'link' },
-      { name: 'Tags', icon: 'tags' },
+      { name: 'Search', icon: 'search' },
-      { name: 'Search', icon: 'search', class: 'client-side' },
       { name: 'Feeds', icon: 'rss' },
       { name: 'Mastodon', icon: 'brand-mastodon' },
     ],

src/_includes/main.liquid

@@ -5,5 +5,5 @@ layout: base
   <main>
     {{ content }}
   </main>
-  {% render "partials/footer.liquid", page: page, nav: nav %}
+  {% render "partials/footer.liquid", page:page, nav:nav %}
 </div>

src/_includes/now.liquid

@@ -8,7 +8,7 @@ layout: default
 {% endcapture %}
 <style>{{ css }}</style>
 {{ content }}
-{% render "partials/now/media-grid.liquid", data:artists, icon: "microphone-2", title: "Artists", shape: "square", count: 8, loading: 'eager' %}
+{% render "partials/now/media-grid.liquid", data:artists, icon: "microphone-2", title: "Artists", shape: "square", count: 8, loading: "eager" %}
 {% render "partials/now/media-grid.liquid", data:albums, icon: "vinyl", title: "Albums", shape: "square", count: 8 %}
 {% render "partials/now/albumReleases.liquid", albumReleases:albumReleases %}
 {% render "partials/now/media-grid.liquid", data:books, icon: "books", title: "Books", shape: "vertical", count: 6 %}

src/_includes/partials/banners/npm.liquid

@@ -0,0 +1,7 @@
+{% capture css %}
+  {% render "../../../assets/styles/components/banners.css" %}
+{% endcapture %}
+<style>{{ css }}</style>
+<div class="banner npm">
+  <p>{% tablericon "brand-npm" "NPM package" %} <a class="no-underline" href="{{ url }}">You can take a look at this package on NPM</a> or install it by running <code>{{ command }}</code>.</p>
+</div>

src/_includes/partials/banners/old-post.liquid

@@ -1,10 +1,10 @@
 {% assign isOldPost = date | oldPost %}
 {% if isOldPost %}
   {% capture css %}
-    {% render "../../assets/styles/components/banner-old-post.css" %}
+    {% render "../../../assets/styles/components/banners.css" %}
   {% endcapture %}
   <style>{{ css }}</style>
-  <div class="banner__old-post">
+  <div class="banner old-post">
     <p>{% tablericon "clock-x" "Old post" %} This post is over 3 years old. I've probably changed my mind since it was written and it <em>could</em> be out of date.</p>
   </div>
 {% endif %}

src/_includes/partials/footer.liquid

@@ -1,12 +1,12 @@
 <footer>
-  <nav aria-label="Social icons" class="flex--centered text--centered">
+  <nav aria-label="Social icons" class="flex--centered justify--centered text--centered">
     {% for link in nav.social %}
-      {% render "partials/nav/linked-icon.liquid", name: link.name, link: link.url, icon: link.icon %}
+      {% render "partials/nav/linked-icon.liquid", name:link.name, link:link.url, icon:link.icon %}
     {% endfor %}
   </nav>
-  <nav aria-label="Secondary site navigation" class="flex--centered text--centered">
+  <nav aria-label="Secondary site navigation" class="flex--centered justify--centered text--centered">
     {% for link in nav.footer %}
-      {% render "partials/nav/link.liquid", page: page, link: link.name, icon: link.icon %}
+      {% render "partials/nav/link.liquid", page:page, link:link.name, icon:link.icon %}
       {% if not forloop.last %}<span>•</span>{% endif %}
     {% endfor %}
   </nav>

src/_includes/partials/header.liquid

@@ -6,5 +6,5 @@
     {{ meta.siteName }}
     {% endif %}
   </h1>
-  {% render "partials/nav/menu.liquid", page: page, nav: nav %}
+  {% render "partials/nav/menu.liquid", page:page, nav:nav %}
 </div>

src/_includes/partials/nav/menu.liquid

@@ -2,7 +2,7 @@
   <ul class="flex--centered flex--wrap">
     {% for link in nav.menu %}
       <li>
-        {% render "partials/nav/link.liquid", page: page, link: link.name, icon: link.icon, class: link.class %}
+        {% render "partials/nav/link.liquid", page:page, link:link.name, icon:link.icon %}
       </li>
     {% endfor %}
     {% render "partials/nav/theme-toggle.liquid" %}

src/_includes/partials/now/media-grid.liquid

@@ -7,7 +7,7 @@
   <style>{{ css }}</style>
   {% endif %}
   {% assign media = data | normalizeMedia %}
-  <h2 class="now__section--header flex--centered">
+  <h2 id="{{ title | downcase }}" class="now__section--header flex--centered">
     {% tablericon icon title %}
     {{ title }}
   </h2>

src/_includes/partials/now/topper.liquid

@@ -1,10 +1,8 @@
+{%- assign artist = artists | first -%}
+{%- assign book = books | first -%}
+{%- assign show = tv | first -%}
 <div class="now__topper">
-  <h2>
+  <p><strong class="highlight-text">I'm a software developer in Camarillo, California.</strong> I enjoy hanging out with my beautiful family and 4 rescue dogs, technology, automation, <a href="https://coryd.dev/now#artists">music</a>, writing, <a href="https://coryd.dev/now#books">reading</a>, <a href="https://coryd.dev/now#tv">tv</a> and <a href="https://coryd.dev/now#movies">movies</a>. Lately I've been{% if artist %} listening to a lot of <strong class="highlight-text">{{ artist.title }}</strong>,{% endif %} reading <strong class="highlight-text">{{ book.title }}</strong> and watching <strong class="highlight-text">{{ show.name }}</strong>.</p>
-    <a class="no-underline" href="/now">Now</a>
+  {% render "partials/now/status.liquid", status:status %}
-  </h2>
+  {% render "partials/now-playing.liquid" %}
-  <div class="dark:text-white text-gray-800">
-    <p>I'm a software developer in Camarillo, California. I enjoy hanging out with my beautiful family and 4 rescue dogs, technology, automation, <a href="https://last.fm/user/coryd_" rel="noopener noreferrer">music</a>, writing, <a href="https://app.thestorygraph.com/profile/coryd" rel="noopener noreferrer">reading</a>, <a href="https://trakt.tv/users/cdransf" rel="noopener noreferrer">tv</a> and <a href="https://trakt.tv/users/cdransf" rel="noopener noreferrer">movies</a>.</p>
-    {% render "partials/now/status.liquid", status:status %}
-    {% render "partials/now-playing.liquid" %}
-  </div>
 </div>

src/_includes/partials/paginator.liquid

@@ -4,34 +4,30 @@
 <style>{{ css }}</style>
 <nav aria-label="Blog pagination" class="pagination flex--centered">
   {% if pagination.href.previous %}
-    <a href="{{ pagination.href.previous }}">
+    <a href="{{ pagination.href.previous }}" aria-label="Previous page">
-      <button aria-label="Previous page [&>svg]:h-5 [&>svg]:w-5">
+      {% tablericon "arrow-left" "Previous" %}
-        {% tablericon "arrow-left" "Previous" %}
-      </button>
     </a>
   {% else %}
-    <button
+    <span
       class="disabled"
       aria-label="Previous page (disabled)"
       disabled>
       {% tablericon "arrow-left" "Prevous" %}
-    </button>
+    </span>
   {% endif %}
   <div class="text--centered">
     <span aria-current="page">{{ pagination.pageNumber | plus: 1 }}</span> of {{ pagination.links.size }}
   </div>
   {% if pagination.href.next %}
-    <a href="{{ pagination.href.next }}">
+    <a href="{{ pagination.href.next }}" aria-label="Next page">
-      <button aria-label="Next page">
+      {% tablericon "arrow-right" "Next" %}
-        {% tablericon "arrow-right" "Next" %}
-      </button>
     </a>
   {% else %}
-    <button
+    <span
       class="disabled"
       aria-label="Next page (disabled)"
       disabled>
       {% tablericon "arrow-right" "Next" %}
-    </button>
+    </span>
   {% endif %}
 </nav>

src/_includes/partials/post-tags.liquid

@@ -1,9 +0,0 @@
-{% for tag in tags %}
-  {% if tag != "posts" %}
-    <a href="/tags/{{ tag }}">
-      <div
-        class="pill--button pill--button__small"
-        data-pagefind-filter="tags">{{ tag }}</div>
-    </a>
-  {% endif %}
-{% endfor %}

src/_includes/partials/share-button.liquid

@@ -4,5 +4,5 @@
 <style>{{ css }}</style>
 <script type="module" src="/assets/scripts/components/webcare-webshare.js"></script>
 <webcare-webshare share-text="{{ title }} {{ url | tagLookup: tagMap }}" share-url="{{ url }}" copy-text="{{ title }} {{ url | tagLookup: tagMap }} {{ url }}">
-  <button class="icon--small icon--center__vertical" disabled>{% tablericon "share" "Share" %}</button>
+  <button class="share icon--small icon--center__vertical" disabled>{% tablericon "share" "Share" %}</button>
 </webcare-webshare>

src/_includes/partials/tags.liquid

@@ -0,0 +1,3 @@
+{% for tag in tags limit: 10 %}
+  <a class="tag no-underline" href="/tags/{{ tag | downcase }}" data-pagefind-filter="tags">{{ tag | formatTag }}</a>
+{% endfor %}

src/_includes/post.liquid

@@ -11,22 +11,22 @@ schema: blog
 <style>{{ css }}</style>
 <div class="default__wrapper">
   <article class="h-entry" data-pagefind-body>
-    <h2 class="p-name" data-pagefind-meta="title">{{ title }}</h2>
-    <span class="p-author h-card hidden">{{ meta.author }}</span>
     <div class="flex--centered">
       <time class="dt-published" datetime="{{ date }}">
-        {{ date | readableDate }}
+        {{ date | date: "%B %d, %Y" }}
         <span class="client-side"> • </span>
       </time>
-      {% render "partials/share-button.liquid", url: postUrl, title: title, tagMap: collections.tagMap %}
+      {% render "partials/share-button.liquid", url:postUrl, title:title, tagMap:collections.tagMap %}
     </div>
+    <h2 class="p-name" data-pagefind-meta="title">{{ title }}</h2>
+    <span class="p-author h-card hidden">{{ meta.author }}</span>
     <div class="p-summary hidden">{{ post_excerpt }}</div>
     <div class="e-content">
-      {% render "partials/banner-old-post.liquid", date: date %}
+      {% render "partials/banners/old-post.liquid", date:date %}
       {{ content }}
     </div>
   </article>
 </div>
-{% render "partials/mastodon-post.liquid", postUrl: postUrl, linkPosts: linkPosts %}
+{% render "partials/mastodon-post.liquid", postUrl:postUrl, linkPosts:linkPosts %}
-{% render "partials/post-tags.liquid", tags: tags %}
+{% render "partials/tags.liquid", tags:tags %}
-{% render "partials/popular-posts.liquid", posts: collections.posts, analytics: analytics %}
+{% render "partials/popular-posts.liquid", posts:collections.posts, analytics:analytics %}

src/_includes/webrings/css-joy.liquid

@@ -6,9 +6,8 @@
     <a href="https://webri.ng/webring/cssjoy/previous?via=https://coryd.dev/webrings">
       {% tablericon "arrow-left" "Previous site" %}
     </a>
-    <a class="pill--button" href="https://webri.ng/webring/cssjoy/random?via=https://coryd.dev/webrings">
+    <a href="https://webri.ng/webring/cssjoy/random?via=https://coryd.dev/webrings">
       {% tablericon "dice-3" "Random site" %}
-      Random
     </a>
     <a href="https://webri.ng/webring/cssjoy/next?via=https://coryd.dev/webrings">
       {% tablericon "arrow-right" "Next site" %}

src/_includes/webrings/the-claw.liquid

@@ -4,8 +4,8 @@
   </div>
   <h3 class="text--centered">The Claw Webring</h3>
   <div class="webring__centered flex--centered">
-    <a href="https://github.com/whitep4nth3r/the-claw-webring" class="pill--button">
+    <strong>
-      {% tablericon "user-plus" "Join!" %} Join!
+      <a class="no-underline" href="https://github.com/whitep4nth3r/the-claw-webring">Join!</a>
-    </a>
+    </strong>
   </div>
 </div>

src/assets/styles/components/banners.css

@@ -1,19 +1,32 @@
-.banner__old-post {
+.banner {
   margin: 1rem 0;
   padding: .75rem;
-  border: 1px solid var(--gray-light);
+  border: 1px solid;
   border-radius: var(--rounded-lg);
 }
 
-.banner__old-post p {
+.banner.old-post {
+  border-color: var(--gray-light);
+}
+
+.banner.npm {
+  border-color: var(--brand-npm);
+}
+
+.banner.npm svg {
+  stroke: var(--brand-npm);
+}
+
+.banner p {
   font-size: var(--font-size-sm);
   line-height: var(--line-height-sm);
   margin: 0;
 }
 
-.banner__old-post p > svg {
+.banner p > svg {
   display: inline;
   vertical-align: middle;
   height: .875rem;
   width: .875rem;
+  margin-right: .125rem;
 }

src/assets/styles/components/forms.css

@@ -19,7 +19,7 @@ textarea {
   /* necessary for pagefind overrides */
 
   outline: none;
-  margin-bottom: 1.5rem;
+  margin-bottom: 1.25rem;
   font-weight: 400 !important;
   line-height: var(--line-height-base);
   transition-property: border-color;
@@ -33,3 +33,31 @@ input[type="search"]:focus,
 textarea:focus {
   border: 1px solid var(--accent-color-hover) !important;
 }
+
+button:not(.theme__toggle, .share, .pagefind-ui__search-clear) {
+  border-radius: var(--rounded-full);
+  padding: .5rem 1rem;
+  margin: 0 .25rem .75rem 0;
+  cursor: pointer;
+  display: inline-flex;
+  flex-direction: row;
+  justify-content: center;
+  font-size: var(--font-size-base);
+  font-weight: 700;
+  line-height: var(--line-height-base);
+  color: var(--color-lightest);
+  background-color: var(--accent-color);
+  appearance: none;
+  border: none;
+  text-decoration: none;
+  transition-property: background-color;
+}
+
+button:not(.theme__toggle, .share, .pagefind-ui__search-clear):hover,
+button:not(.theme__toggle, .share, .pagefind-ui__search-clear):active,
+button:not(.theme__toggle, .share, .pagefind-ui__search-clear):focus {
+  color: var(--color-lightest);
+  background-color: var(--accent-color-hover) !important;
+  transition-timing-function: var(--transition-ease-in-out);
+  transition-duration: var(--transition-duration-default);
+}

src/assets/styles/components/mastodon-post.css

@@ -1,7 +1,7 @@
 .mastodon-post-wrapper {
   border-bottom: 1px solid var(--gray-light);
-  margin-bottom: 2rem;
+  margin-bottom: 1.25rem;
-  padding-bottom: 1rem;
+  padding-bottom: .25rem;
 }
 
 dl {

src/assets/styles/components/media-grid.css

@@ -5,8 +5,7 @@
 }
 
 .now__section--header {
-  margin-top: 2rem;
+  margin: 2rem 0 1rem;
-  margin-bottom: 1rem;
 }
 
 .media__grid {

src/assets/styles/components/pagefind.css

@@ -1,5 +1,5 @@
 .pagefind-ui {
-  margin-bottom: 2rem;
+  margin-bottom: 1.25rem;
   --pagefind-ui-primary: var(--accent-color);
   --pagefind-ui-text: var(--text-color);
   --pagefind-ui-background: var(--color-lightest);
@@ -60,6 +60,12 @@
   background-color: transparent !important;
 }
 
+.pagefind-ui__search-clear:hover,
+.pagefind-ui__search-clear:focus,
+.pagefind-ui__search-clear:active {
+  color: var(--accent-color-hover) !important;
+}
+
 .pagefind-ui__result-title {
   margin-bottom: .25rem !important;
 }

src/assets/styles/components/paginator.css

@@ -8,12 +8,12 @@
   padding-right: 0;
 }
 
-.pagination button > svg {
+.pagination a > svg {
   stroke: var(--accent-color);
   cursor: pointer;
 }
 
-.pagination button.disabled > svg {
+.pagination span.disabled svg {
   cursor: not-allowed;
   stroke: color-mix(in srgb, var(--text-color), transparent 50%);
   stroke-width: var(--stroke-width-default);

src/assets/styles/components/popular-posts.css

@@ -1,4 +1,3 @@
 .popular-posts h2 {
-  margin-top: 2rem;
+  margin: 2rem 0 1rem;
-  margin-bottom: 1rem;
 }

src/assets/styles/index.css

@@ -1,6 +1,9 @@
 body,
 html {
+  color: var(--text-color);
   font-family: var(--font-sans);
+  font-size: var(--font-size-base);
+  line-height: var(--line-height-base);
   background: var(--background-color);
   margin: 0;
 }
@@ -33,7 +36,7 @@ blockquote {
   stroke: var(--text-color);
 }
 
-:is(h1, h2, h3, h4, h5, h6, .pill--button) > svg {
+:is(h1, h2, h3, h4, h5, h6) > svg {
   margin-right: .25rem;
   stroke-width: var(--stroke-width-bold) !important;
 }
@@ -42,11 +45,26 @@ sup.footnote-ref {
   line-height: var(--line-height-xs);
 }
 
+strong,
+blockquote {
+  font-weight: 700;
+}
+
+em,
+blockquote {
+  font-style: italic;
+}
+
 /* links */
 a {
   transition-property: color;
 }
 
+a,
+.active {
+  color: var(--accent-color);
+}
+
 a:hover,
 a:focus,
 a:active,
@@ -56,6 +74,13 @@ a:active,
   color: var(--accent-color-hover);
 }
 
+a:hover,
+a:focus,
+a:active {
+  transition-timing-function: var(--transition-ease-in-out);
+  transition-duration: var(--transition-duration-default);
+}
+
 :is(
     a:has(svg):hover,
     a:has(svg):active,
@@ -101,6 +126,10 @@ table {
   border: 1px solid var(--gray-light);
 }
 
+table a {
+  text-decoration: none;
+}
+
 table,
 th,
 td {
@@ -124,6 +153,7 @@ td {
 }
 
 th {
+  font-weight: 700;
   background-color: var(--gray-lighter);
   text-align: center;
 }
@@ -132,6 +162,8 @@ th {
 .main__title {
   width: 100%;
   padding-top: 2rem;
+  display: flex;
+  flex-direction: column;
 }
 
 .main__title h1 {
@@ -209,6 +241,8 @@ nav ul li .active svg:hover {
 
 .main__wrapper {
   min-height: 100vh;
+  display: flex;
+  flex-direction: column;
 }
 
 main {
@@ -222,14 +256,11 @@ main {
 .now__topper,
 article {
   border-bottom: 1px solid var(--gray-light);
-  margin-bottom: 2rem;
+  margin-bottom: 1.25rem;
-  padding-bottom: 1rem;
 }
 
-.now__topper h2 {
+.now__topper p:first-child {
-  font-size: var(--font-size-xl);
   margin-top: 0;
-  margin-bottom: 1rem;
 }
 
 footer nav:first-child {
@@ -259,60 +290,42 @@ footer nav:last-child span:not(.active) {
   margin-right: .25rem;
 }
 
+:is(.main__title, footer nav:last-child) a {
+  color: var(--text-color);
+  text-decoration: none;
+}
+
 .highlight-text {
-  padding: .125rem;
+  color: var(--color-lightest);
+  background-color: var(--accent-color);
+  padding: .25rem;
 }
 
 code {
-  padding: .125rem;
+  padding: .25rem;
   color: var(--text-color-inverted);
   background-color: var(--background-color-inverted);
 }
 
-/* buttons */
-.pill--button {
-  border-radius: var(--rounded-full);
-  padding: .5rem 1rem;
-  margin: 0 .25rem .75rem 0;
-  cursor: pointer;
-  transition-property: background-color;
-  display: inline-flex;
-  flex-direction: row;
-}
-
-.pill--button.pill--button__small {
-  padding: .25rem .5rem;
-  margin-right: .5rem;
-  margin-bottom: .5rem;
-  font-size: var(--font-size-sm);
-  line-height: var(--line-height-sm);
-  display: inline-block;
-}
-
-.pill--button:hover,
-.pill--button:active,
-.pill--button:focus {
-  background-color: var(--accent-color-hover) !important;
-}
-
-.pill--button > svg,
-.pill--button svg:hover,
-.pill--button svg:active,
-.pill--button svg:focus,
-.pill--button:hover svg,
-.pill--button:active svg,
-.pill--button:focus svg {
-  stroke: var(--color-lightest) !important;
-}
-
 /* articles */
 article h2 {
+  color: var(--text-color);
   line-height: var(--line-height-2xl);
   margin: 0 0 .375rem;
+  transition-property: color;
+}
+
+article h2:hover,
+article h2:focus,
+article h2:active {
+  color: var(--accent-color-hover);
+  transition-timing-function: var(--transition-ease-in-out);
+  transition-duration: var(--transition-duration-default);
 }
 
 article [rel="author"],
 article time {
+  color: var(--gray-dark);
   font-size: var(--font-size-sm);
   line-height: var(--line-height-sm);
   margin-right: .25rem;
@@ -322,6 +335,16 @@ article [rel="author"] {
   margin-bottom: .25rem;
 }
 
+.tag:not(:last-child) {
+  margin-right: .125rem;
+}
+
+/* buttons */
+button {
+  appearance: none;
+  border: none;
+}
+
 /* icons */
 svg {
   stroke-width: var(--stroke-width-default);
@@ -395,10 +418,9 @@ li {
   text-align: center !important;
 }
 
-.fade {
+.text--small {
-  transition-property: opacity;
+  font-size: var(--font-size-sm);
-  transition-timing-function: var(--transition-ease-in-out);
+  line-height: var(--line-height-sm);
-  transition-duration: var(--transition-duration-default);
 }
 
 .flex--centered {
@@ -407,88 +429,14 @@ li {
   align-items: center;
 }
 
+.justify--centered {
+  justify-content: center;
+}
+
 .flex--wrap {
   flex-wrap: wrap
 }
 
-/* shared styles */
-body,
-html,
-:is(.main__title, footer nav:last-child) a {
-  color: var(--text-color);
-}
-
-body,
-html,
-.pill--button {
-  font-size: var(--font-size-base);
-  line-height: var(--line-height-base);
-}
-
-.main__title,
-.main__wrapper,
-.contact__wrapper {
-  display: flex;
-  flex-direction: column;
-}
-
-.highlight-text,
-.pill--button,
-.pill--button:hover,
-.pill--button:active,
-.pill--button:focus {
-  color: var(--color-lightest);
-}
-
-.highlight-text,
-.pill--button {
-  background-color: var(--accent-color);
-}
-
-blockquote,
-strong,
-.pill--button,
-th {
-  font-weight: 700;
-}
-
-blockquote,
-em {
-  font-style: italic;
-}
-
-button,
-.pill--button {
-  appearance: none;
-  border: none;
-}
-
-a,
-.active {
-  color: var(--accent-color);
-}
-
-a:hover,
-a:focus,
-a:active,
-.pill--button:hover,
-.pill--button:focus,
-.pill--button:active {
-  transition-timing-function: var(--transition-ease-in-out);
-  transition-duration: var(--transition-duration-default);
-}
-
-.pill--button,
-:is(.main__title, footer nav:last-child) a,
-table a {
-  text-decoration: none;
-}
-
-.pill--button,
-footer nav {
-  justify-content: center;
-}
-
 /* screens: md */
 @media screen and (min-width: 768px) {
   .main__title {
@@ -505,10 +453,6 @@ footer nav {
     margin-right: .75rem;
   }
 
-  .now__topper h2 {
-    font-size: var(--font-size-2xl);
-  }
-
   main {
     max-width: 768px;
   }
@@ -519,11 +463,6 @@ footer nav {
     line-height: var(--line-height-3xl);
   }
 
-  /* lists */
-  ul, ol {
-    padding-left: 2.5rem;
-  }
-
   footer nav:first-child {
     gap: .75rem;
   }

src/assets/styles/pages/about.css

@@ -4,6 +4,7 @@
 
 .avatar__wrapper {
   margin-bottom: 1.5rem;
+  width: 100%;
 }
 
 .avatar__wrapper .avatar__wrapper--interior {
@@ -22,14 +23,9 @@
   overflow: hidden;
 }
 
-.avatar__wrapper,
 .avatar__wrapper .avatar__wrapper--interior picture > *,
 .avatar__wrapper .avatar__wrapper--interior img {
   width: 100%;
-}
-
-.avatar__wrapper .avatar__wrapper--interior picture > *,
-.avatar__wrapper .avatar__wrapper--interior img {
   height: 100%;
 }
 

src/assets/styles/pages/contact.css

@@ -1,3 +1,8 @@
+.contact__wrapper {
+  display: flex;
+  flex-direction: column;
+}
+
 .contact__wrapper textarea {
   height: 10rem;
   resize: none;

src/assets/styles/pages/now.css

@@ -16,8 +16,7 @@
 }
 
 .now__section--header {
-  margin-top: 2rem;
+  margin: 2rem 0 1rem;
-  margin-bottom: 1rem;
 }
 
 .now__section--header:first-of-type {

src/assets/styles/pages/post.css

@@ -5,7 +5,7 @@
 
 /* footnotes */
 hr.footnotes-sep {
-  margin: 2.5rem 0;
+  margin: 1.25rem 0;
 }
 
 .footnotes-list {
@@ -18,7 +18,7 @@ hr.footnotes-sep {
 }
 
 .footnotes {
-  padding-bottom: 1.5rem;
+  padding-bottom: 1.25rem;
 }
 
 .footnote-item > p {

src/index.html

@@ -7,21 +7,21 @@ pagination:
   alias: posts
 ---
 {% if pagination.pageNumber == 0 %}
-  {% render "partials/now/topper.liquid" status:status %}
+  {% render "partials/now/topper.liquid" status:status, artists:artists, books:books, tv:tv %}
 {% endif %}
 {% for post in pagination.items %}
-  {% if post.data.published %}
+<article class="h-entry">
-  <article class="h-entry">
+  <time class="dt-published" datetime="{{ post.date }}">
-    <a class="no-underline" href="{{ post.url }}">
+    {{ post.date | date: "%B %d, %Y" }}
-      <h2 class="flex--centered">{{ post.data.title }}</h2>
+  </time>
-    </a>
+  <a class="no-underline" href="{{ post.url }}">
-    <span class="p-author h-card hidden">{{ meta.siteName }}</span>
+    <h2 class="flex--centered">{{ post.data.title }}</h2>
-    <time class="dt-published" datetime="{{ post.date }}">
+  </a>
-      {{ post.date | date: "%m.%Y" }}
+  <div class="text--small">{% render "partials/tags.liquid", tags:post.data.tags %}</div>
-    </time>
+  <span class="p-author h-card hidden">{{ meta.siteName }}</span>
-    <div class="p-summary hidden">{{ post.data.post_excerpt }}</div>
+  <div class="p-summary hidden">{{ post.data.post_excerpt }}</div>
-    {{ post.data.post_excerpt | markdown }}
+  {{ post.data.post_excerpt | markdown }}
-  </article>
+  <p><a class="no-underline" href="{{ post.url }}">Read more →</a></p>
-  {% endif %}
+</article>
 {% endfor %}
 {% render "partials/paginator.liquid", pagination:pagination %}

src/pages/404.html

@@ -12,15 +12,8 @@ image: /assets/img/404.jpg
   {% image './src/assets/img/404.jpg', title, 'image__banner', 'eager' %}
   <div class="text--centered">
     <h2 class="page__header">{{ title }}</h2>
-    <h3>What kind of idiots do you have working here?</h3>
+    What kind of idiots do you have working here? <a href="/">Hurry up and skip out on the room service bill!</a>
-    <div class="flex justify-center">
-      <a href="/" class="pill--button">
-        {% tablericon "receipt-2" "Receipt" %} Skip out on the room service bill
-      </a>
-    </div>
   </div>
-  <hr class="large__spacing" />
-  {% render "partials/popular-posts.liquid", posts: collections.posts, analytics: analytics %}
 </div>
 <script>
   document.addEventListener('DOMContentLoaded', function () {

src/pages/contact-success.html

@@ -7,10 +7,5 @@ image: /assets/img/ogi/contact.jpg
 
 <div class="text--centered">
   <h2>{{ title }}</h2>
-  <h3>I'll be in touch soon!</h3>
+    I'll be in touch soon! <a href="/">Head home</a>
-  <a href="/" class="pill--button">
-    {% tablericon "home-2" "Home" %} Head home
-  </a>
 </div>
-<hr class="large__spacing" />
-{% render "partials/popular-posts.liquid", posts: collections.posts, analytics: analytics %}

src/pages/contact.md

@@ -34,6 +34,8 @@ description: 'How to contact me.'
       <input type="email" name="email" placeholder="Email" required />
     </label>
     <textarea name="message" placeholder="Message" required></textarea>
-    <button class="pill--button" type="submit">Send message</button>
+    <div class="flex--centered justify--centered">
+      <button type="submit">Send message</button>
+    </div>
   </form>
 </div>

src/pages/search.html

@@ -19,4 +19,5 @@ image: /assets/img/ogi/search.jpg
   <input type="hidden" placeholder="Search" name="sites" value="coryd.dev">
   </form>
 </pagefind-search>
-{% render "partials/popular-posts.liquid", posts: collections.posts, analytics: analytics %}
+{% render "partials/tags.liquid", tags:collections.tagsSortedByCount %}
+{% render "partials/popular-posts.liquid", posts:collections.posts, analytics:analytics %}

src/pages/stats.html

@@ -6,6 +6,8 @@ image: /assets/img/ogi/stats.jpg
 ---
 <p>My first post was published on <strong class="highlight-text">{{ collections.postStats.firstPostDate | dateToReadableDate }}</strong> and my most recent one was published on <strong class="highlight-text">{{ collections.postStats.lastPostDate | dateToReadableDate }}</strong>. I've published <strong class="highlight-text">{{ collections.postStats.postCount }} posts</strong> containing <strong class="highlight-text">{{ collections.postStats.totalWordCount }} words</strong> and <strong class="highlight-text">{{ collections.postStats.totalCodeBlockCount }} code samples</strong>.</p>
 <p>Posts have, on average, <strong class="highlight-text">{{ collections.postStats.avgWordCount | round }} words</strong> and a gap of <strong class="highlight-text">{{ collections.postStats.avgDays | round }} days</strong> between them.</p>
+<p><strong>Top tags</strong></p>
+{% render "partials/tags.liquid", tags:collections.tagsSortedByCount %}
 <p><strong>Popular posts</strong></p>
 <ol class="link__list">
   {% assign posts = collections.posts | getPopularPosts: analytics %}

src/pages/tag-list.html

@@ -8,19 +8,17 @@ permalink: /tags/{{ tag }}/
 image: /assets/img/ogi/tags.jpg
 eleventyComputed:
   title: '{{ tag }}'
-templateEngineOverride: liquid,md
 ---
 {% assign posts = collections[tag] | reverse %}
 {% for post in posts %}
 <article class="h-entry">
-  <a class="no-underline" href="{{ post.url }}">
-    <h2 class="flex--centered">{{ post.data.title }}</h2>
-  </a>
   <time class="dt-published" datetime="{{ post.date }}">
     {{ post.date | date: "%m.%Y" }}
   </time>
-  {%- if post.data.post_excerpt %}
+  <a class="no-underline" href="{{ post.url }}">
-    <p class="p-summary">{{ post.data.post_excerpt | markdown }}</p>
+    <h2 class="flex--centered">{{ post.data.title }}</h2>
-  {% endif -%}
+  </a>
+  <p class="p-summary">{{ post.data.post_excerpt | markdown }}</p>
+  <p><a class="no-underline" href="{{ post.url }}">Read more →</a></p>
 </article>
 {% endfor %}

src/pages/tags.md

@@ -1,16 +0,0 @@
----
-title: Tags
-description: "Filter and find posts on my site by tag."
-layout: default
-permalink: /tags.html
-image: /assets/img/ogi/tags.jpg
----
-{% for tag in collections.tagList %}
-<span>
-  <a href="/tags/{{ tag }}" class="no-underline">
-    <button class="pill--button">
-      {{ tag }}
-    </button>
-  </a>
-</span>
-{% endfor %}

src/posts/2024/building-a-theme-toggle-web-component.md

@@ -142,4 +142,4 @@ I load the web component script, embed my styles, define the template such that
 
 [The complete JavaScript can be viewed in the source for my site.](https://github.com/cdransf/coryd.dev/blob/main/src/assets/scripts/components/theme-toggle.js)
 
-You can also install the component via npm using `npm i @cdransf/theme-toggle`.
+{% render "partials/banners/npm.liquid", url: 'https://www.npmjs.com/package/@cdransf/theme-toggle', command: 'npm i @cdransf/theme-toggle' %}

src/posts/2024/everything-is-a-checklist.md

@@ -4,31 +4,31 @@ title: 'Everything is a checklist'
 description: 'The author ruminates on routine, mental health and productibity.'
 tags: ['health', 'productivity']
 ---
-- [x] Wake up at 4:15am
+- ✓ Wake up at 4:15am
-- [x] Start exercising by 4:30am
+- ✓ Start exercising by 4:30am
-  - [x] Throw TV or movie on in the background
+  - ✓ Throw TV or movie on in the background
-  - [x] Aim for 1600+ calories, be satisfied with anything over 800
+  - ✓ Aim for 1600+ calories, be satisfied with anything over 800
-- [x] Finish exercising by 6:35am
+- ✓ Finish exercising by 6:35am
 <!-- excerpt -->
-- [x] Check off what was watched on [Trackt](https://trakt.tv)
+- &check; Check off what was watched on [Trackt](https://trakt.tv)
-- [x] AirPods in, start an audiobook or text to speech in [Readwise Reader](https://readwise.io/read)[^1]
+- &check; AirPods in, start an audiobook or text to speech in [Readwise Reader](https://readwise.io/read)[^1]
-- [x] Check [Todoist](https://todoist.com)
+- &check; Check [Todoist](https://todoist.com)
-  - [x] Make coffee
+  - &check; Make coffee
-  - [x] Feed all 4 dogs
+  - &check; Feed all 4 dogs
-  - [x] Feed the guinea pig
+  - &check; Feed the guinea pig
-  - [x] Do dishes
+  - &check; Do dishes
-  - [x] Start laundry
+  - &check; Start laundry
-  - [x] Take medication
+  - &check; Take medication
-  - [x] Drop the kiddo off at school
+  - &check; Drop the kiddo off at school
-- [x] Check my calendar
+- &check; Check my calendar
-- [x] Start music
+- &check; Start music
-- [x] Start work
+- &check; Start work
-  - [x] Meetings
+  - &check; Meetings
-  - [x] Code reviews
+  - &check; Code reviews
-  - [x] Tickets in, tickets out
+  - &check; Tickets in, tickets out
-- [x] Pick the kiddo up from school
+- &check; Pick the kiddo up from school
-- [x] Finish work
+- &check; Finish work
-- [x] Hang out with the family[^2]
+- &check; Hang out with the family[^2]
 
 *Check, check, check, clear the queue, close the rings, get to zero.*