feat: recent activity

config/filters/index.js

@@ -3,7 +3,6 @@ import feeds from './feeds.js'
 import general from './general.js'
 import media from './media.js'
 import navigation from './navigation.js'
-import posts from './posts.js'
 
 export default {
   ...dates,
@@ -11,5 +10,4 @@ export default {
   ...general,
   ...media,
   ...navigation,
-  ...posts
 }

config/filters/posts.js

@@ -1,8 +0,0 @@
-import { shuffleArray } from '../utilities/index.js'
-
-export default {
-  filterByPostType: (posts, postType) => {
-    if (postType === 'featured') return shuffleArray(posts.filter(post => post.featured === true)).slice(0, 3)
-    return posts.slice(0, 5)
-  }
-}

package-lock.json

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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "coryd.dev",
-  "version": "24.18.2",
+  "version": "24.19.0",
   "description": "The source for my personal site. Built using 11ty (and other tools).",
   "type": "module",
   "scripts": {

src/assets/styles/base/index.css

@@ -25,25 +25,23 @@ body {
   background: var(--accent-color);
 }
 
-p {
+.books,
-  margin: var(--margin-vertical-base-horizontal-zero);
+.collected,
-  overflow: visible;
+.concerts,
-
+.country,
-  &.books,
+.favorite,
-  &.collected,
+.link,
-  &.concerts,
+.movies,
-  &.country,
+.tv,
-  &.favorite,
+.music,
-  &.movies,
+.posts,
-  &.tv,
+.tattoo {
-  &.music,
-  &.posts,
-  &.tattoo {
   &.books { --section-color: var(--books); }
   &.collected { --section-color: var(--collected); }
   &.concerts { --section-color: var(--concerts); }
   &.country { --section-color: var(--country); }
   &.favorite { --section-color: var(--favorite); }
+  &.link { --section-color: var(--link); }
   &.movies, &.tv { --section-color: var(--tv); }
   &.music { --section-color: var(--music); }
   &.posts { --section-color: var(--posts); }
@@ -54,7 +52,11 @@ p {
   & svg {
     stroke: var(--section-color);
   }
-  }
+}
+
+p {
+  margin: var(--margin-vertical-base-horizontal-zero);
+  overflow: visible;
 
   & a {
     text-decoration: underline;
@@ -93,7 +95,9 @@ p:not(.banner p) > svg {
 }
 
 :is(h1, h2, h3, h4, h5, h6):has(svg) {
-  gap: var(--spacing-xs)
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm)
 }
 
 strong,
@@ -130,7 +134,7 @@ a {
   &.headphones > svg { stroke: var(--music); }
   &.heart-handshake > svg { stroke: var(--webrings); }
   &.info-circle > svg { stroke: var(--about); }
-  &.link > svg { stroke: var(--links); }
+  &.link > svg { stroke: var(--link); }
   &.mail-plus > svg { stroke: var(--newsletter); }
   &.rss > svg { stroke: var(--brand-rss); }
   &.search > svg { stroke: var(--search); }
@@ -173,7 +177,7 @@ a:active,
 :is(a):has(svg) {
   display: inline-flex;
   align-items: center;
-  gap: var(--spacing-xs);
+  gap: var(--spacing-sm);
 
   & svg {
     stroke: var(--accent-color);
@@ -250,7 +254,6 @@ h6 {
 }
 
 .section-header {
-  display: flex;
   margin: var(--spacing-xl) 0 var(--spacing-lg);
   line-height: var(--line-height-sm);
 
@@ -484,9 +487,16 @@ article {
   }
 
   & time {
-    display: block;
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-sm);
     color: var(--gray-dark);
     font-size: var(--font-size-sm);
+
+    & svg {
+      width: var(--sizing-svg-sm);
+      height: var(--sizing-svg-sm);
+    }
   }
 }
 

src/assets/styles/defaults/vars.css

@@ -59,7 +59,7 @@
   --country: #20b2aa;
   --error: #d92525;
   --favorite: #ff69b4;
-  --links: #9370db;
+  --link: #9370db;
   --moon: #6a5acd;
   --music: #1e90ff;
   --newsletter: #40e0d0;

src/includes/partials/home/recent-activity.liquid

@@ -0,0 +1,17 @@
+{%- assign track = music.week.tracks | first -%}
+{%- assign show = tv.recentlyWatched | first -%}
+{%- assign movie = movies.recentlyWatched | first -%}
+{%- assign book = books | bookStatus: 'finished' | bookSortDescending | first -%}
+{%- assign link = links | first -%}
+<h2 class="section-header">
+  {% tablericon "activity" "Recent activity" %}
+  Recent activity
+</h2>
+<ul>
+  <li class="music">Top track this week: <a href="{{ track.url }}">{{ track.title }} by {{ track.artist }}</a></li>
+  <li class="tv">Last episode watched: <strong class="highlight-text">S{{ show.season }}E{{ show.episode }}</strong> of <a href="{{ show.url }}">{{ show.name }}</a></li>
+  <li class="movies">Last movie watched: <a href="{{ movie.url }}">{{ movie.title }}</a>{%- if movie.rating %} ({{ movie.rating }}){%- endif -%}</li>
+  <li class="books">Last book finished: <a href="{{ book.url }}">{{ book.title }}</a> by {{ book.author }}{%- if book.rating %} ({{ book.rating }}){%- endif -%}</li>
+  <li class="link">Last link shared: <a href="{{ link.link }}">{{ link.title }}</a>{% if link.authors %} via <a href="{{ link.authors.url }}">{{ link.authors.name }}</a>{% endif %}</li>
+</ul>
+{% render "partials/blocks/banners/rss.liquid", url: "/feeds", text: "Subscribe to my movies, books, links or activity feed(s)" %}

src/includes/partials/home/recent-posts.liquid

@@ -1,14 +1,14 @@
-{%- assign posts = postData | filterByPostType: postType %}
 <div class="article-widget-wrapper">
   <div class="section-header-wrapper">
-    <h2 class="section-header posts">
+    <h2 class="section-header">
-      {% tablericon icon title %}
+      {% tablericon "clock" "Recent posts" %}
-      {{ title }}
+      Recent posts
     </h2>
   </div>
-  {%- for post in posts -%}
+  {%- for post in posts limit: 5 -%}
     <article>
       <time datetime="{{ post.date }}">
+        {%- if post.featured -%}{% tablericon "star" "featured" %}{%- endif -%}
         {{ post.date | date: "%B %e, %Y" }}
       </time>
       <h3>
@@ -17,7 +17,5 @@
       {{ post.description | normalize_whitespace | markdown | truncatewords: 50 }}
     </article>
   {%- endfor -%}
-  {%- if postType != 'featured' -%}
   <a class="icon-link" href="/posts">View all posts {% tablericon "arrow-right" "View all posts" %}</a>
-  {%- endif -%}
 </div>

src/includes/partials/home/status.liquid

@@ -1,7 +1,6 @@
-{%- assign artist = music.week.artists | first -%}
-{%- assign book = books | bookStatus: 'started' | reverse | first -%}
-{%- assign show = tv.recentlyWatched | first -%}
 <article class="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><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>.</p>
   {% render "partials/blocks/now-playing.liquid", music:music %}
+  <hr />
+  {% render "partials/home/recent-activity.liquid" music:music, books:books, tv:tv, movies:movies, links:links %}
 </article>

src/pages/dynamic/index.html

@@ -2,6 +2,5 @@
 layout: default
 permalink: /
 ---
-{% render "partials/home/status.liquid" status:status, music:music, books:books.all, tv:tv %}
+{% render "partials/home/status.liquid" music:music, books:books.all, tv:tv, movies:movies, links:links %}
-{% render "partials/home/posts.liquid" icon: "pencil-star", title: "Featured", postData:posts, postType: "featured" %}
+{% render "partials/home/recent-posts.liquid" posts:posts %}
-{% render "partials/home/posts.liquid" icon: "clock", title: "Recent posts", postData:posts %}

src/pages/dynamic/posts/index.html

@@ -10,7 +10,10 @@ permalink: "/posts/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber }}
 <div class="posts-wrapper">
   {% for post in pagination.items %}
   <article>
-    <time datetime="{{ post.date }}">{{ post.date | date: "%B %e, %Y" }}</time>
+    <time datetime="{{ post.date }}">
+      {%- if post.featured -%}{% tablericon "star" "featured" %}{%- endif -%}
+      {{ post.date | date: "%B %e, %Y" }}
+    </time>
     <h3>
       <a href="{{ post.slug }}">{{ post.title }}</a>
     </h3>

src/pages/dynamic/posts/post.html

@@ -8,8 +8,13 @@ permalink: "{{ post.slug }}/index.html"
 schema: blog
 ---
 <article class="standalone">
-  <time datetime="{{ post.date }}">{{ post.date | date: "%B %e, %Y" }}</time>
+  <time datetime="{{ post.date }}">
-  <h3>{{ post.title }}</h3>
+    {%- if post.featured -%}{% tablericon "star" "featured" %}{%- endif -%}
+    {{ post.date | date: "%B %e, %Y" }}
+  </time>
+  <h3>
+    {{ post.title }}
+  </h3>
   <div>
     {% render "partials/blocks/banners/old-post.liquid", date:post.date %}
     {%- if post.image -%}