Improve card metadata display and styling

assets/js/search-filter-sort.js

@@ -613,6 +613,13 @@
           const imgClass = settings.image_class || '';
           if (imgClass) imgClass.split(' ').filter(Boolean).forEach(c => img.classList.add(c));
         }
+      } else if (entry.itemType === 'blog') {
+        const img = slot('image');
+        if (img) {
+          img.src = '/images/pos-og.png';
+          img.alt = entry.title || 'Blog post';
+          img.classList.add('object-cover');
+        }
       } else if (settings.placeholder_image) {
         const img = slot('image');
         if (img) {
@@ -643,15 +650,18 @@
         const peopleEl = slot('people');
         if (peopleEl) {
           peopleEl.classList.remove('hidden');
+          const authorClass = settings.author_class || '';
+          if (authorClass) authorClass.split(' ').filter(Boolean).forEach(c => peopleEl.classList.add(c));
+
           const frag = document.createDocumentFragment();
           const wrapper = document.createElement('div');
-          wrapper.className = 'flex flex-row gap-x-5 items-center';
+          wrapper.className = 'mt-2 flex flex-row gap-x-4 items-center text-sm';
 
           // Headshot images
           const hasImages = entry.authors.some(a => a.image);
           if (hasImages) {
             const imgWrap = document.createElement('div');
-            imgWrap.className = 'flex flex-row';
+            imgWrap.className = 'flex flex-row flex-shrink-0';
             entry.authors.forEach((a, i) => {
               if (a.image) {
                 const img = document.createElement('img');
@@ -668,30 +678,59 @@
 
           // Names
           const namesDiv = document.createElement('div');
-          namesDiv.className = 'truncate text-slate-900';
+          namesDiv.className = 'line-clamp-2';
           namesDiv.textContent = entry.authors.map(a => a.name).join(', ');
           wrapper.appendChild(namesDiv);
           frag.appendChild(wrapper);
           peopleEl.appendChild(frag);
         }
       }
 
-      // Conditional metadata
-      const conditionals = [
-        ['location', entry.location],
-        ['date', entry.dateFormatted],
-        ['duration', entry.durationFormatted],
-        ['views', entry.viewsFormatted],
-        ['stars', entry.starsFormatted],
-      ];
-      for (const [name, value] of conditionals) {
-        if (value) {
-          const el = slot(name);
-          if (el) {
-            el.style.display = '';
-            const textEl = slot(name + '-text');
-            if (textEl) textEl.textContent = value;
-          }
+      // Conditional metadata - inline with separators
+      const metadataEl = slot('metadata');
+      if (metadataEl) {
+        const metadataItems = [
+          ['date', null, entry.dateFormatted],
+          ['location', null, entry.location],
+          ['duration', null, entry.durationFormatted],
+          ['views', null, entry.viewsFormatted],
+          ['stars', 'boxicons--star-filled', entry.starsFormatted],
+        ].filter(([_, __, value]) => value);
+
+        if (metadataItems.length > 0) {
+          metadataEl.classList.remove('hidden');
+          const metadataClass = settings.metadata_class || '';
+          if (metadataClass) metadataClass.split(' ').filter(Boolean).forEach(c => metadataEl.classList.add(c));
+
+          metadataItems.forEach(([name, icon, value], index) => {
+            if (icon) {
+              // Stars - with icon
+              const itemDiv = document.createElement('div');
+              itemDiv.className = 'flex gap-1 items-center';
+
+              const iconSpan = document.createElement('span');
+              iconSpan.className = 'icon-[' + icon + ']';
+              itemDiv.appendChild(iconSpan);
+
+              const textSpan = document.createElement('span');
+              textSpan.textContent = value;
+              itemDiv.appendChild(textSpan);
+
+              metadataEl.appendChild(itemDiv);
+            } else {
+              // Other metadata - no icon
+              const textSpan = document.createElement('span');
+              textSpan.textContent = value;
+              metadataEl.appendChild(textSpan);
+            }
+
+            // Add separator if not last item
+            if (index < metadataItems.length - 1) {
+              const separator = document.createElement('span');
+              separator.textContent = '|';
+              metadataEl.appendChild(separator);
+            }
+          });
         }
       }
 

content/blog/positron/outgrow-your-laptop/index.md

@@ -6,7 +6,7 @@ description: >
 people:
   - Julia Silge
 date: '2026-03-05'
-image: https://img.youtube.com/vi/sPZsH0eaUpQ/hqdefault.jpg
+image: images/outgrowing.jpg
 image-alt: Talk Recording from R-Ladies Abuja
 ported_from: positron
 source: positron

content/blog/positron/outgrow-your-laptop/index.qmd

@@ -5,7 +5,7 @@ description: |
 people:
   - Julia Silge
 date: "2026-03-05"
-image: https://img.youtube.com/vi/sPZsH0eaUpQ/hqdefault.jpg
+image: images/outgrowing.jpg
 image-alt: "Talk Recording from R-Ladies Abuja"
 ported_from: positron
 source: positron

data/items.yaml

@@ -1,109 +1,138 @@
 blog:
+  author_class: "font-medium text-gray-600"
   badge_hide_path: "/blog/"
   badge_icon: "boxicons--message-filled"
   badge_text: "blog post"
   card_class: ""
-  description_class: "@trenta:!line-clamp-3"
+  description_class: "@tall:line-clamp-3 @trenta:!line-clamp-3 font-medium text-gray-600"
   hero_class: ""
   hero_content_class: "max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 pt-14 pb-6 w-full"
   hero_image_container_class: "aspect-[40/21] max-w-[1000px] mx-auto rounded-xl overflow-hidden"
   hero_layout: "banner"
   image_class: "w-full object-cover"
+  metadata_class: "text-xs font-medium text-gray-500"
   people_show: true
   row_class: ""
   tile_class: ""
+  title_class: "text-sm @tall:text-base @grande:text-lg @venti:text-3xl text-gray-600"
 
 cheatsheets:
+  author_class: "font-medium text-gray-600"
   badge_hide_path: "/resources/cheatsheets/"
   badge_icon: "boxicons--file-code-filled"
   badge_text: "cheatsheet"
   card_class: ""
+  description_class: "@tall:line-clamp-3 font-medium text-gray-600"
   hero_class: ""
   hero_content_class: "py-6"
   hero_image_show: false
   hero_layout: "banner"
   image_class: "w-full object-cover"
+  metadata_class: "text-xs font-medium text-gray-500"
   people_show: true
   row_class: ""
   tile_class: ""
+  title_class: "text-sm @tall:text-base @grande:text-lg @venti:text-3xl text-gray-600"
 
 events:
+  author_class: "font-medium text-gray-600"
   badge_hide_path: "/events/"
   badge_icon: "boxicons--calendar-event-filled"
   badge_text: "event"
   card_class: ""
+  description_class: "@tall:line-clamp-3 font-medium text-gray-600"
   hero_class: ""
   hero_content_class: "max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 pt-14 pb-6 w-full"
   hero_image_container_class: "aspect-[40/21] max-w-[1000px] mx-auto rounded-xl overflow-hidden"
   hero_layout: "banner"
   image_class: "w-full object-cover"
+  metadata_class: "text-xs font-medium text-gray-500"
   people_show: false
   row_class: ""
   tile_class: ""
+  title_class: "text-sm @tall:text-base @grande:text-lg @venti:text-3xl text-gray-600"
 
 people:
+  author_class: "font-medium text-gray-600"
   badge_hide_path: "/people/"
   badge_icon: "boxicons--face-filled"
   badge_text: "person"
   card_class: ""
   date_show: true
-  description_class: "@max-venti:text-center"
+  description_class: "@max-venti:text-center font-medium text-gray-600"
   description_field: "role"
   hero_class: ""
   hero_layout: "profile"
   image_class: "object-contain rounded-xl"
+  metadata_class: "text-xs font-medium text-gray-500"
   people_show: false
   row_class: ""
   tile_class: ""
-  title_class: "@max-venti:self-center"
+  title_class: "@max-venti:self-center text-sm @tall:text-base @grande:text-lg @venti:text-3xl text-gray-600"
 
 software:
+  author_class: "font-medium text-gray-600"
   badge_hide_path: "/software/"
   badge_icon: "boxicons--hexagon-filled"
   badge_text: "software"
   card_class: ""
+  description_class: "@tall:line-clamp-3 font-medium text-gray-600"
   hero_class: ""
   hero_layout: "profile"
   image_class: "object-contain px-[20%] py-[5%]"
+  metadata_class: "text-xs font-medium text-gray-500"
   people_show: false
   row_class: ""
   tile_class: ""
+  title_class: "text-sm @tall:text-base @grande:text-lg @venti:text-3xl text-gray-600"
 
 tutorials:
+  author_class: "font-medium text-gray-600"
   badge_hide_path: "/resources/tutorials/"
   badge_icon: "boxicons--book-filled"
   badge_text: "tutorial"
   card_class: ""
+  description_class: "@tall:line-clamp-3 font-medium text-gray-600"
   hero_class: ""
   hero_image_show: false
   hero_layout: "banner"
   image_class: "w-full object-cover"
+  metadata_class: "text-xs font-medium text-gray-500"
   people_show: true
   row_class: ""
   tile_class: ""
+  title_class: "text-sm @tall:text-base @grande:text-lg @venti:text-3xl text-gray-600"
 
 videos:
+  author_class: "font-medium text-gray-600"
   badge_hide_path: "/resources/videos/"
   badge_icon: "boxicons--video-filled"
   badge_text: "video"
   card_class: ""
+  description_class: "@tall:line-clamp-3 font-medium text-gray-600"
   hero_class: ""
   hero_image_show: false
   hero_layout: "banner"
   image_class: "w-full object-cover"
+  metadata_class: "text-xs font-medium text-gray-500"
   people_show: true
   row_class: ""
   tile_class: ""
+  title_class: "text-sm @tall:text-base @grande:text-lg @venti:text-3xl text-gray-600"
 
 webinars:
+  author_class: "font-medium text-gray-600"
   badge_hide_path: "/resources/webinars/"
   badge_icon: "boxicons--presentation-filled"
   badge_text: "webinar"
   card_class: ""
+  description_class: "@tall:line-clamp-3 font-medium text-gray-600"
   hero_class: ""
   hero_image_show: false
   hero_layout: "banner"
   image_class: "w-full object-cover"
+  metadata_class: "text-xs font-medium text-gray-500"
   people_show: true
   row_class: ""
   tile_class: ""
+  title_class: "text-sm @tall:text-base @grande:text-lg @venti:text-3xl text-gray-600"

layouts/partials/block/author.html

@@ -1,10 +1,14 @@
 {{- $pg := . -}}
 {{- $link := true -}}
+{{- $author_class := "" -}}
 {{- if reflect.IsMap . -}}
   {{- $pg = .page -}}
   {{- if isset . "link" -}}
     {{- $link = .link -}}
   {{- end -}}
+  {{- if isset . "author_class" -}}
+    {{- $author_class = .author_class -}}
+  {{- end -}}
 {{- end -}}
 {{- $people := $pg.GetTerms "people" -}}
 {{- if $people -}}
@@ -18,10 +22,10 @@
   {{- end -}}
 {{- end -}}
 
-<div class="flex flex-row gap-x-5 items-center">
+<div class="mt-2 flex flex-row gap-x-4 items-center">
 
   {{- if $hasImages -}}
-  <div class="flex flex-row">
+  <div class="flex flex-row flex-shrink-0">
     {{- range $index, $person := $people -}}
       {{- with .Resources.Get .Params.image -}}
         <img 
@@ -36,18 +40,18 @@
   {{- end -}}
 
   {{- if $link -}}
-    <div class="flex flex-wrap gap-x-1 items-center">
+    <div class="flex flex-wrap gap-x-1 items-center {{ $author_class }}">
       {{- range $index, $person := $people -}}
         {{- if $index -}}
-          <span class="text-slate-500 -ml-1">,</span>
+          <span class="text-gray-400 -ml-1">,</span>
         {{- end -}}
-          <a href="{{ $person.RelPermalink }}" class="hover:underline font-medium text-slate-900">
+          <a href="{{ $person.RelPermalink }}" class="hover:underline">
             {{- $person.LinkTitle -}}
           </a>
       {{- end -}}
     </div>
   {{- else -}}
-    <div class="truncate text-slate-900">
+    <div class="line-clamp-2 {{ $author_class }}">
       {{- range $index, $person := $people -}}
         {{- if $index -}},&nbsp;{{- end -}}
         {{- $person.LinkTitle -}}

layouts/partials/item-templates.html

@@ -31,39 +31,20 @@
       </span>
 
       {{/* Image */}}
-      <div data-slot="image-wrap" class="w-full @venti:w-1/2 aspect-[16/9] flex items-center justify-center overflow-hidden">
+      <div data-slot="image-wrap" class="w-full @venti:w-1/2 aspect-[40/21] flex items-center justify-center overflow-hidden rounded-xl">
         <img data-slot="image" class="mx-auto h-full" loading="lazy" decoding="async" />
       </div>
 
       {{/* Content */}}
-      <div class="hidden gap-y-2 @nip:flex @venti:w-1/2 flex-auto flex-col p-3 @venti:pl-5 text-gray-700">
-        <h3 data-slot="title" class="m-0! font-semibold text-sm @grande:text-lg @venti:text-3xl line-clamp-2"></h3>
+      <div class="hidden gap-y-2 @nip:flex @venti:w-1/2 flex-auto flex-col p-3 @venti:pl-5 mt-2">
+        {{/* Metadata row - all inline with separators */}}
+        <div data-slot="metadata" class="hidden @short:flex flex-wrap gap-x-2 items-center"></div>
+
+        <h3 data-slot="title" class="m-0! mt-3 font-semibold text-sm @grande:text-lg @venti:text-3xl line-clamp-2"></h3>
         <p data-slot="description" class="m-0! text-xs @short:text-sm @grande:text-md @venti:text-lg line-clamp-2 short@line-clamp-3"></p>
 
         {{/* People */}}
-        <div data-slot="people" class="text-sm @grande:text-md hidden"></div>
-
-        {{/* Conditional metadata fields — all hidden by default */}}
-        <div data-slot="location" class="hidden @short:flex text-sm @grande:text-md font-semibold gap-2 items-center" style="display:none">
-          <span class="icon-[boxicons--map-filled]"></span>
-          <div data-slot="location-text"></div>
-        </div>
-        <div data-slot="date" class="hidden @short:flex text-sm @grande:text-md font-semibold gap-2 items-center" style="display:none">
-          <span class="icon-[boxicons--calendar-filled]"></span>
-          <div data-slot="date-text"></div>
-        </div>
-        <div data-slot="duration" class="hidden @short:flex text-sm @grande:text-md font-semibold gap-2 items-center" style="display:none">
-          <span class="icon-[boxicons--clock-4-filled]"></span>
-          <div data-slot="duration-text"></div>
-        </div>
-        <div data-slot="views" class="hidden @short:flex text-sm @grande:text-md font-semibold gap-2 items-center" style="display:none">
-          <span class="icon-[boxicons--eye-filled]"></span>
-          <div data-slot="views-text"></div>
-        </div>
-        <div data-slot="stars" class="hidden @short:flex text-sm @grande:text-md font-semibold gap-2 items-center" style="display:none">
-          <span class="icon-[boxicons--star-filled]"></span>
-          <div data-slot="stars-text"></div>
-        </div>
+        <div data-slot="people" class="hidden"></div>
 
         <div class="grow"></div>
         <div data-slot="tags" class="hidden @grande:flex flex-wrap gap-x-1 gap-y-4 py-2 overflow-hidden h-10 items-end"></div>