chore: widgets are blocks, not all blocks need to connect to the cms; bye bugs

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "coryd.dev",
-  "version": "20.7.1",
+  "version": "20.8.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "coryd.dev",
-      "version": "20.7.1",
+      "version": "20.8.0",
       "license": "MIT",
       "dependencies": {
         "@cdransf/api-text": "^1.4.0",

package.json

@@ -1,7 +1,7 @@
 {
   "name": "coryd.dev",
-  "version": "20.7.1",
-  "description": "The source for my personal site. Built using 11ty.",
+  "version": "20.8.0",
+  "description": "The source for my personal site. Built using 11ty (and other tools).",
   "type": "module",
   "scripts": {
     "start": "eleventy --serve",

src/_includes/partials/blocks/addon-links.liquid

@@ -0,0 +1,8 @@
+<div class="addon-links">
+  {%- if popularPosts.size > 0 -%}
+  <div>{% render "partials/blocks/popular-posts.liquid", popularPosts:popularPosts %}</div>
+  {%- endif -%}
+  {%- if links.size > 0 -%}
+  <div>{% render "partials/blocks/recent-links.liquid", links:links %}</div>
+  {%- endif -%}
+</div>

src/_includes/partials/blocks/avatar.liquid

@@ -0,0 +1,22 @@
+<div class="avatar-wrapper flex-centered">
+  <div class="interior">
+    <img
+      srcset="
+        https://cdn.coryd.dev/{{ image }}?class=squaresm 200w,
+        https://cdn.coryd.dev/{{ image }}?class=squaremd 400w,
+        https://cdn.coryd.dev/{{ image }}?class=squarebase 800w,
+        https://cdn.coryd.dev/{{ image }}?class=squarelg 1200w
+      "
+      sizes="(max-width: 450px) 200px,
+        (max-width: 850px) 400px,
+        (max-width: 1000px) 800px,
+        1200px"
+      src="https://cdn.coryd.dev/{{ image }}?class=squarelg"
+      alt="{{ alt }}"
+      loading="eager"
+      decoding="async"
+      width="600"
+      height="600"
+    />
+  </div>
+</div>

src/_includes/partials/blocks/index.liquid

@@ -1,12 +1,12 @@
 {% for block in blocks %}
   {% if block.type == 'youtube_player' %}
-    {% render "partials/widgets/youtube-player.liquid", url:block.url %}
+    {% render "partials/blocks/youtube-player.liquid", url:block.url %}
   {% elsif block.type == 'github_banner' %}
-    {% render "partials/banners/github.liquid", url:block.url %}
+    {% render "partials/blocks/banners/github.liquid", url:block.url %}
   {% elsif block.type == 'npm_banner' %}
-    {% render "partials/banners/npm.liquid", url:block.url, command:block.command %}
+    {% render "partials/blocks/banners/npm.liquid", url:block.url, command:block.command %}
   {% elsif block.type == 'rss_banner' %}
-    {% render "partials/banners/rss.liquid", url:block.url, text:block.text %}
+    {% render "partials/blocks/banners/rss.liquid", url:block.url, text:block.text %}
   {% elsif block.type == 'hero' %}
     {% render "partials/blocks/hero.liquid", image:block.image.filename_disk, alt:block.alt_text %}
   {% elsif block.type == 'markdown' %}
@@ -14,6 +14,6 @@
   {% elsif block.type == 'divider' %}
     {{ block.markup | markdown }}
   {% elsif block.type == 'addon_links' %}
-    {% render "partials/widgets/addon-links.liquid", popularPosts:collections.popularPosts, links:links %}
+    {% render "partials/blocks/addon-links.liquid", popularPosts:collections.popularPosts, links:links %}
   {% endif %}
 {% endfor %}

src/_includes/partials/home/status.liquid

@@ -4,5 +4,5 @@
 <div class="home-status">
   <p><strong class="highlight-text">I'm a software developer based in Camarillo, California</strong>. I enjoy hanging out with my beautiful family and 3 rescue dogs, technology, automation, <a href="/music">music</a>, <a href="/posts">writing</a>, <a href="/books">reading</a>, <a href="/watching#tv">tv</a> and <a href="/watching#movies">movies</a>. Lately I've been listening to a lot of <strong class="highlight-text">{{ artist.title }}</strong>, reading <strong class="highlight-text">{{ book.title }}</strong> and watching <strong class="highlight-text">{{ show.name }}</strong>.</p>
   <p>{{ status.emoji }} {{ status.content }}</p>
-  {% render "partials/widgets/now-playing.liquid" %}
+  {% render "partials/blocks/now-playing.liquid" %}
 </div>

src/_includes/partials/media/grid.liquid

@@ -60,5 +60,5 @@
   {% endfor %}
 </div>
 {% unless hidePagination %}
-  {% render "partials/widgets/paginator.liquid", pagination:data %}
+  {% render "partials/nav/paginator.liquid", pagination:data %}
 {% endunless %}

src/_includes/partials/media/music/chart.liquid

@@ -29,5 +29,5 @@
   </ol>
 </div>
 {% unless count %}
-  {% render "partials/widgets/paginator.liquid", pagination:data %}
+  {% render "partials/nav/paginator.liquid", pagination:data %}
 {% endunless %}

src/_includes/partials/media/watching/grid.liquid

@@ -44,5 +44,5 @@
   {% endfor %}
 </div>
 {% unless hidePagination %}
-  {% render "partials/widgets/paginator.liquid", pagination:data %}
+  {% render "partials/nav/paginator.liquid", pagination:data %}
 {% endunless %}

src/_includes/partials/widgets/addon-links.liquid

@@ -1,8 +0,0 @@
-<div class="addon-links">
-  {%- if popularPosts.size > 0 -%}
-  <div>{% render "partials/widgets/popular-posts.liquid", popularPosts:popularPosts %}</div>
-  {%- endif -%}
-  {%- if links.size > 0 -%}
-  <div>{% render "partials/widgets/recent-links.liquid", links:links %}</div>
-  {%- endif -%}
-</div>

src/_includes/webrings/css-joy.liquid

@@ -2,7 +2,7 @@
   <a href="https://cs.sjoy.lol">
     <h3 class="text-centered">CSS JOY Webring</h3>
   </a>
-  <div class="flex-centered justify-centered">
+  <div class="webring-navigation flex-centered justify-centered">
     <a href="https://webri.ng/webring/cssjoy/previous?via=https://coryd.dev/webrings">
       {% tablericon "arrow-left" "Previous site" %}
     </a>

src/assets/styles/base/index.css

@@ -138,6 +138,13 @@ a {
 
   & svg {
     stroke: var(--accent-color);
+
+    &[data-tablericon-name^="arrow-"]:hover,
+    &[data-tablericon-name^="arrow-"]:active,
+    &[data-tablericon-name^="arrow-"]:focus {
+      transform: rotate(0deg);
+      stroke: var(--accent-color-hover);
+    }
   }
 
   &.linked-header {
@@ -161,6 +168,11 @@ a {
   }
 }
 
+:is(a:hover, a:active, a:focus) svg[data-tablericon-name^="arrow-"] {
+  transform: rotate(0deg);
+  stroke: var(--accent-color-hover);
+}
+
 a:hover,
 a:focus,
 a:active,

src/assets/styles/components/paginator.css

@@ -9,22 +9,9 @@
 
   & a {
     display: flex;
-
-    & > svg {
-      stroke: var(--accent-color);
-      cursor: pointer;
-    }
   }
 
-  & :is(a:hover, a:active, a:focus) svg,
-  & a svg:hover,
-  & a svg:active,
-  & a svg:focus {
-    transform: rotate(0deg);
-    stroke: var(--accent-color-hover);
-  }
-
-  & span.disabled svg {
+  & span.disabled svg[data-tablericon-name^="arrow-"] {
     cursor: not-allowed;
     stroke: color-mix(in srgb, var(--text-color), transparent 50%);
     stroke-width: var(--stroke-width-default);

src/assets/styles/pages/webrings.css

@@ -1,7 +1,15 @@
 .webring-wrapper {
   margin: var(--sizing-base) 0;
 
-  h3 {
+  & h3 {
     margin: var(--sizing-2xl) 0 var(--sizing-lg);
   }
+
+  & .webring-navigation {
+    gap: var(--sizing-sm);
+
+    & a {
+      display: flex;
+    }
+  }
 }

src/pages/main/about.md

@@ -39,4 +39,4 @@ I tend to write about whatever strikes me, with a focus on development, technolo
 
 [You can also see what I'm doing now](/now), [take a look at the links I've shared recently](/links) or [check out the webrings I'm a member of](/webrings).
 
-{% render "partials/widgets/badge-grid.liquid", badges: badges %}
+{% render "partials/blocks/badge-grid.liquid", badges: badges %}

src/pages/main/books/index.html

@@ -11,7 +11,7 @@ schema: books
 <h2 class="page-header">Currently reading</h2>
 <p>Here's what I'm reading at the moment. I've finished <strong class="highlight-text">{{ currentBookCount }} books</strong> this year.</p>
 <p><a href="/books/years/2024">2024</a> / <a href="/books/years/2023">2023</a> / <a href="/books/years/2022">2022</a> / <a href="/books/years/2021">2021</a> / <a href="/books/years/2020">2020</a></p>
-{% render "partials/banners/rss.liquid", url: "https://feedpress.me/coryd-books", text: "Subscribe to my books feed or follow along on this page" %}
+{% render "partials/blocks/banners/rss.liquid", url: "https://feedpress.me/coryd-books", text: "Subscribe to my books feed or follow along on this page" %}
 <hr />
 {% for book in bookData %}
 {% capture alt %}{{ book.title }} by {{ book.authors }}{% endcapture %}

src/pages/main/links.html

@@ -9,7 +9,7 @@ permalink: "/links/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber }}
 {% if pagination.pageNumber == 0 %}
 <h2 class="page-header">Links</h2>
 <p>These are links I've liked or otherwise found interesting. They're all added manually, after having been read and, I suppose, properly considered. Authors are associated with domains using a simple key-value map.</p>
-{% render "partials/banners/rss.liquid", url: "https://feedpress.me/coryd-links", text: "Subscribe to my links feed or follow along on this page" %}
+{% render "partials/blocks/banners/rss.liquid", url: "https://feedpress.me/coryd-links", text: "Subscribe to my links feed or follow along on this page" %}
 <hr />
 {% endif %}
 <div class="link-grid">
@@ -22,4 +22,4 @@ permalink: "/links/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber }}
   </div>
   {% endfor %}
 </div>
-{% render "partials/widgets/paginator.liquid", pagination:pagination %}
+{% render "partials/nav/paginator.liquid", pagination:pagination %}

src/pages/main/music/index.html

@@ -13,7 +13,7 @@ schema: music-index
 <h2 class="page-header">{{ title }}</h2>
 <p>I've listened to <strong class="highlight-text">{{ music.week.artists.size }} artists</strong>, <strong class="highlight-text">{{ music.week.albums.size }} albums</strong> and <strong class="highlight-text">{{ music.week.totalTracks }} tracks</strong> this week. Most of that has been {{ music.week.genres | sortByPlaysDescending: "plays" | genreStrings: "genre" | mediaLinks: "genre", 5 }}.</p>
 <p><strong class="highlight-text">See more of the</strong> <a href="/music/artists/this-week/">artists</a>, <a href="/music/albums/this-week/">albums</a> or <a href="/music/tracks/this-week/">tracks</a> I've listened to this week. <strong class="highlight-text">Or take a look at what I've listened to</strong> <a href="/music/this-month">this month</a> or <a href="/music/three-months">over the last 3 months</a></p>
-{% render "partials/widgets/now-playing.liquid" %}
+{% render "partials/blocks/now-playing.liquid" %}
 <hr />
 <h3 id="artists" class="section-header no-top-margin">
   <a class="link-icon" href="/music/artists/this-week">

src/pages/main/posts/index.html

@@ -25,4 +25,4 @@ permalink: "/posts/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber }}
   </article>
   {% endfor %}
 </div>
-{% render "partials/widgets/paginator.liquid", pagination:pagination %}
+{% render "partials/nav/paginator.liquid", pagination:pagination %}

src/pages/main/posts/post.html

@@ -18,7 +18,7 @@ schema: blog
   <span class="p-author h-card hidden">{{ globals.author }}</span>
   <div class="p-summary hidden">{{ post.description }}</div>
   <div class="e-content">
-    {% render "partials/banners/old-post.liquid", date:post.date %}
+    {% render "partials/blocks/banners/old-post.liquid", date:post.date %}
     {%- if post.image -%}
     <img
       srcset="
@@ -42,4 +42,4 @@ schema: blog
     {% render "partials/blocks/index.liquid", blocks:post.blocks %}
   </div>
 </article>
-{% render "partials/widgets/addon-links.liquid", popularPosts:collections.popularPosts, links:links %}
+{% render "partials/blocks/addon-links.liquid", popularPosts:collections.popularPosts, links:links %}

src/pages/main/search.html

@@ -59,4 +59,4 @@ permalink: /search.html
   <input class="search__form--fallback" type="hidden" placeholder="Search" name="sites" value="coryd.dev">
 </form>
 <ul class="search__results hidden"></ul>
-{% render "partials/widgets/addon-links.liquid", popularPosts:collections.popularPosts, links:links %}
+{% render "partials/blocks/addon-links.liquid", popularPosts:collections.popularPosts, links:links %}

src/pages/main/watching/index.html

@@ -10,7 +10,7 @@ schema: watching
 <h2 class="watching page-header">{{ title }}</h2>
 {% render "partials/media/watching/hero.liquid" movie:featuredMovie %}
 <p>Here's all of the TV and movies I've been watching presented in what is (hopefully) an organized fashion.</p>
-{% render "partials/banners/rss.liquid", url: "https://feedpress.me/coryd-movies", text: "Subscribe to my movies feed or follow along on this page" %}
+{% render "partials/blocks/banners/rss.liquid", url: "https://feedpress.me/coryd-movies", text: "Subscribe to my movies feed or follow along on this page" %}
 <hr />
 <h3 id="movies" class="section-header no-top-margin">
   <a class="link-icon" href="/watching/recent/movies">

src/pages/main/watching/movie.html

@@ -38,7 +38,7 @@ schema: movie
     <p class="sub-meta"><a href="https://themoviedb.org/movie/{{ movie.id }}" title="View {{ movie.title | escape }} on TMDB">View on TMDB</a></p>
   </div>
   {% if movie.review %}
-    {% render "partials/banners/warning.liquid", text: "There are probably spoilers after this banner — this is a warning about them." %}
+    {% render "partials/blocks/banners/warning.liquid", text: "There are probably spoilers after this banner — this is a warning about them." %}
     {{ movie.review | markdown }}
     <hr />
   {% endif %}