chore: add recent links widget

package.json

@@ -1,6 +1,6 @@
 {
   "name": "coryd.dev",
-  "version": "7.9.3",
+  "version": "7.10.0",
   "description": "The source for my personal site. Built using 11ty.",
   "type": "module",
   "scripts": {

src/_includes/now.liquid

@@ -12,7 +12,7 @@ layout: default
 {% 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 %}
-{% render "partials/now/links.liquid", links:links %}
+{% render "partials/recent-links.liquid", links:links %}
 {% render "partials/now/media-grid.liquid", data:movies, icon: "movie", title: "Movies", shape: "vertical", count: 6 %}
 {% render "partials/now/media-grid.liquid", data:tv, icon: "device-tv", title: "TV", shape: "vertical", count: 6 %}
 <p class="now__explainer text--centered">

src/_includes/partials/addon-links.liquid

@@ -0,0 +1,8 @@
+{% capture css %}
+  {% render "../../assets/styles/components/addon-links.css" %}
+{% endcapture %}
+<style>{{ css }}</style>
+<div class="addon-links__wrapper">
+  <div>{% render "partials/popular-posts.liquid", posts:posts, analytics:analytics %}</div>
+  <div>{% render "partials/recent-links.liquid", links:links %}</div>
+</div>

src/_includes/partials/now/albumReleases.liquid

@@ -1,5 +1,5 @@
 {% if albumReleases.size > 0 %}
-  <h2 id="album-releases" class="now__section--header flex--centered">
+  <h2 id="album-releases" class="flex--centered">
     {% tablericon "calendar-time" "Anticipated albums" %}
     Anticipated albums
   </h2>

src/_includes/partials/now/links.liquid

@@ -1,15 +0,0 @@
-{% if links.size > 0 %}
-  <h2 id="links" class="now__section--header flex--centered">
-    {% tablericon "link" "Links" %}
-    Links
-  </h2>
-  <ul class="link__list">
-    {% for link in links limit: 5 %}
-      <li>
-        <a href="{{link.url}}" title="{{link.title | escape}}">
-          {{ link.title }}
-        </a>
-      </li>
-    {% endfor %}
-  </ul>
-{% endif %}

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

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

src/_includes/partials/popular-posts.liquid

@@ -1,14 +1,9 @@
-{% capture css %}
-  {% render "../../assets/styles/components/popular-posts.css" %}
-{% endcapture %}
-<style>{{ css }}</style>
 {% assign posts = posts | getPopularPosts: analytics %}
-<div class="popular-posts">
+<h2 class="flex--centered">
-  <h2 class="flex--centered">
   {% tablericon "flame" "Popular" %}
   Popular posts
-  </h2>
+</h2>
-  <ul class="link__list">
+<ul class="link__list">
   {% for post in posts limit: 5 %}
     <li>
       <a class="no-underline" href="{{post.url}}" title="{{ post.data.title | escape}}">
@@ -16,5 +11,4 @@
       </a>
     </li>
   {% endfor %}
-  </ul>
+</ul>
-</div>

src/_includes/partials/recent-links.liquid

@@ -0,0 +1,15 @@
+{% if links.size > 0 %}
+<h2 id="links" class="flex--centered">
+  {% tablericon "link" "Links" %}
+  Recent links
+</h2>
+<ul class="link__list">
+  {% for link in links limit: 5 %}
+    <li>
+      <a href="{{link.url}}" title="{{link.title | escape}}">
+        {{ link.title }}
+      </a>
+    </li>
+  {% endfor %}
+</ul>
+{% endif %}

src/_includes/partials/tags.liquid

@@ -1,4 +1,6 @@
 {% assign filteredTags = tags | filterTags %}
-{% for tag in filteredTags limit: 10 %}
+<div{% if hasSpace %} style="margin-bottom:var(--sizing-md)"{% endif %}>
+  {% for tag in filteredTags limit: 10 %}
   <a class="tag" href="/tags/{{ tag | downcase }}" data-pagefind-filter="tags">{{ tag | formatTag }}</a>
-{% endfor %}
+  {% endfor %}
+</div>

src/_includes/post.liquid

@@ -29,4 +29,4 @@ schema: blog
   </article>
 </div>
 {% render "partials/mastodon-post.liquid", postUrl:postUrl, linkPosts:linkPosts %}
-{% render "partials/popular-posts.liquid", posts:collections.posts, analytics:analytics %}
+{% render "partials/addon-links.liquid", posts:collections.posts, analytics:analytics, links:links %}

src/assets/styles/components/addon-links.css

@@ -0,0 +1,19 @@
+:root {
+  --grid: repeat(1,minmax(0,1fr));
+}
+
+.addon-links__wrapper {
+  display: grid;
+  gap: var(--sizing-sm);
+  grid-template-columns: var(--grid);
+}
+
+.addon-links__wrapper h2 {
+  margin-top: 0;
+}
+
+@media screen and (min-width: 768px) {
+  :root {
+    --grid: repeat(2,minmax(0,1fr));
+  }
+}

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

@@ -3,7 +3,7 @@
   --grid-vertical: repeat(3,minmax(0,1fr));
 }
 
-.now__section--header {
+h2 {
   margin: var(--sizing-3xl) 0 var(--sizing-lg);
 }
 

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

@@ -1,3 +0,0 @@
-.popular-posts h2 {
-  margin: var(--sizing-base) 0;
-}

src/assets/styles/index.css

@@ -325,12 +325,15 @@ article p:first-of-type {
   margin-top: var(--sizing-sm);
 }
 
-.tag:not(:last-child) {
+.tag {
-  margin-right: var(--sizing-lg);
   margin-bottom: var(--sizing-lg);
   display: inline-block;
 }
 
+.tag:not(:last-child) {
+  margin-right: var(--sizing-lg);
+}
+
 /* buttons */
 button {
   appearance: none;
@@ -464,9 +467,12 @@ li {
     margin-top: var(--sizing-md);
   }
 
+  .tag {
+    margin-bottom: var(--sizing-sm);
+  }
+
   .tag:not(:last-child) {
     margin-right: var(--sizing-sm);
-    margin-bottom: var(--sizing-sm);
   }
 
   footer nav:first-child {

src/assets/styles/pages/404.css

@@ -1,4 +1,3 @@
-.four-oh-four__wrapper .image__banner,
+.four-oh-four__wrapper .image__banner {
-.four-oh-four__wrapper a {
   margin-bottom: var(--sizing-base);
 }

src/assets/styles/pages/now.css

@@ -14,11 +14,15 @@
   width: var(--sizing-base);
 }
 
-.now__section--header {
+h2 {
   margin: var(--sizing-3xl) 0 var(--sizing-lg);
 }
 
-.now__section--header:first-of-type {
+h2:first-of-type {
+  margin-top: 0;
+}
+
+.link__list {
   margin-top: 0;
 }
 

src/pages/404.html

@@ -15,8 +15,8 @@ image: /assets/img/404.jpg
     What kind of idiots do you have working here? <a href="/">Hurry up and skip out on the room service bill!</a>
   </div>
   <hr class="large__spacing" />
-  {% render "partials/tags.liquid", tags:collections.tagsSortedByCount %}
+  {% render "partials/tags.liquid", tags:collections.tagsSortedByCount, hasSpace:true %}
-  {% render "partials/popular-posts.liquid", posts:collections.posts, analytics:analytics %}
+  {% render "partials/addon-links.liquid", posts:collections.posts, analytics:analytics, links:links %}
 </div>
 <script>
   document.addEventListener('DOMContentLoaded', function () {

src/pages/contact-success.html

@@ -9,5 +9,5 @@ image: /assets/img/ogi/contact.jpg
     I'll be in touch soon! <a href="/">Head home</a>
 </div>
 <hr class="large__spacing" />
-{% render "partials/tags.liquid", tags:collections.tagsSortedByCount %}
+{% render "partials/tags.liquid", tags:collections.tagsSortedByCount, hasSpace:true %}
-{% render "partials/popular-posts.liquid", posts:collections.posts, analytics:analytics %}
+{% render "partials/addon-links.liquid", posts:collections.posts, analytics:analytics, links:links %}

src/pages/now.html

@@ -5,7 +5,7 @@ permalink: /now.html
 image: /assets/img/ogi/now.jpg
 description: "See what I'm doing now."
 ---
-<h2 class="now__section--header flex--centered">
+<h2 class="flex--centered">
   {% tablericon "clock-heart" "Currently" %}
   Currently
 </h2>
@@ -20,7 +20,7 @@ description: "See what I'm doing now."
     Rooting for the <a href="https://lakers.com">Lakers</a>. 💜💛
   </p>
 </div>
-<h2 class="now__section--header flex--centered">
+<h2 class="flex--centered">
   {% tablericon "terminal-2" "Making" %}
   Making
 </h2>

src/pages/search.html

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

src/posts/2023/from-ics-to-json-surfacing-anticipated-albums.md

@@ -46,7 +46,7 @@ Rendering the output is as simple as:
 
 ```liquid
 {% if albumReleases.size > 0 %}
-  <h2 class="now__section--header flex--centered">
+  <h2 class="flex--centered">
     {% tablericon "calendar-time" "Anticipated albums" %}
     Anticipated albums
   </h2>

src/posts/2024/link-blogging-using-readwise.md

@@ -47,7 +47,7 @@ This fetches links from my archive (so that it's much more likely that I've read
 {% raw %}
 ```liquid
 {% if links.size > 0 %}
-  <h2 class="now__section--header flex--centered">
+  <h2 class="flex--centered">
     {% tablericon "link" "Links" %}
     Links
   </h2>