Skip to content

Improve card metadata display and styling#258

Merged
gregswinehart merged 6 commits into
mainfrom
gs/blog
May 21, 2026
Merged

Improve card metadata display and styling#258
gregswinehart merged 6 commits into
mainfrom
gs/blog

Conversation

@gregswinehart
Copy link
Copy Markdown
Collaborator

@gregswinehart gregswinehart commented May 20, 2026

Summary

  • Unify metadata display across all card formats (card, tile, row) with inline layout and pipe separators
  • Add rounded corners to images in tile and row formats
  • Make author block styling configurable via `author_class` in items.yaml
  • Add pos-og.png as fallback image for blog posts without thumbnails
  • Update "Outgrowing your laptop" blog post with proper local thumbnail image

Changes

Metadata display improvements:

  • Refactored metadata in card format from stacked icon+text rows to inline format with separators (date | location | duration | views | stars)
  • Applied consistent `metadata_class` styling from items.yaml across all card types
  • Updated JavaScript hydration in search-filter-sort.js to match new inline metadata format
  • Simplified card templates by removing individual metadata slots in favor of unified container

Visual polish:

  • Added `rounded-md` to tile and row format image containers
  • Enhanced author block to accept `author_class` parameter for consistent typography
  • Updated author wrapper spacing and colors (gray-400 for separators, configurable text color)

Blog post improvements:

  • Added pos-og.png as fallback for blog posts missing thumbnails (replaces blog-placeholder.svg)
  • Updated outgrow-your-laptop post: replaced YouTube thumbnail with local image (outgrowing.jpg)
  • Cleaned up unused image files (hqdefault.jpg, blog-placeholder.svg)

Test plan

  • View blog listing pages - verify metadata shows inline with separators
  • Check tile and row formats - verify images have rounded corners
  • Test posts with/without images - verify pos-og.png fallback works
  • Verify author styling is consistent across card types
  • Check responsive behavior at different breakpoints

🤖 Generated with Claude Code

gregswinehart and others added 3 commits May 19, 2026 11:30
Show /images/opensource-og-2.png for blog posts that don't have a
thumbnail image, but only on list pages. The fallback is handled in
JavaScript during client-side rendering of item cards.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Replace opensource-og-2.png with pos-og.png as the fallback image
for blog posts without thumbnails on list pages. Remove unused
blog-placeholder.svg and old OG image.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
@netlify
Copy link
Copy Markdown

netlify Bot commented May 20, 2026

Deploy Preview for posit-open-source canceled.

Name Link
🔨 Latest commit b705521
🔍 Latest deploy log https://app.netlify.com/projects/posit-open-source/deploys/6a0e3a610c044700089a8af7

@github-actions
Copy link
Copy Markdown

github-actions Bot commented May 20, 2026

@gregswinehart gregswinehart changed the title Add fallback image for blog posts without thumbnails blog post fallback image and card styling. May 20, 2026
@gregswinehart gregswinehart changed the title blog post fallback image and card styling. Improve card metadata display and styling May 20, 2026
@github-actions
Copy link
Copy Markdown

github-actions Bot commented May 20, 2026

@github-actions
Copy link
Copy Markdown

Blog YAML Checks

✅ All 1 posts passed.

@gregswinehart gregswinehart merged commit 9248053 into main May 21, 2026
13 checks passed
cwickham added a commit that referenced this pull request May 21, 2026
PR #258 added images/outgrowing.jpg under content/blog/positron/...
just before the move commit was rebased; git's rename detection didn't
extend the parent-dir rename to the newly added file, so it landed
outside the ported/ tree. Move it into place so the post's image
reference resolves.
cwickham added a commit that referenced this pull request May 21, 2026
* Rewrite content-path blog cross-links to permalinks

Replaces 476 internal links of the form /blog/<source>/<post>/ with their
permalink form /blog/YYYY-MM-DD_<slug>/ across 231 files. Decouples links
from folder structure so a future reorganization (e.g. moving ported posts
to a subdirectory) doesn't break them. Source files (.qmd, .Rmd,
.Rmarkdown) and their rendered .md/.markdown outputs get the same rewrite
so re-rendering won't undo it.

Both pre- and post-rewrite Hugo builds produce identical broken-link
output (0 broken across 29,619 internal links / 1,012 HTML files).

* Report link/file counts in check-blog-links.py

A "0 broken" result was masking a silent Hugo build failure that produced
no HTML at all. The script now reports how many internal links it
actually checked across how many files, and exits non-zero with a stderr
warning when 0 files are scanned — so a broken build can't masquerade as
a clean check.

* Move ported posts under content/blog/ported/

Relocates all ported source dirs (ai, education, great-tables, plotnine,
pointblank, positron, quarto, rstudio, shiny, tidyverse) from
content/blog/<source>/ to content/blog/ported/<source>/. URLs are
unaffected — the blog permalink template uses date + slug/basename, not
the section path.

Also includes a few link cleanups exposed by the move:

- Rewrites reference-style markdown links ([label]: URL form) and
  absolutizes `../`-style relative paths in rendered files where they
  cross out of the source's own section. These slipped through the
  previous content-path rewrite.

- Replaces broken refs to /blog/ai/2023-04-05-deep-learning-scientific-
  computing-r-torch/ (a post that was never created) with the book's
  actual external page. Hugo's GetPage was silently masking these
  pre-move; the move exposes them.

- Updates two slug references that hardcoded source paths
  (content/featured/blog.md, content/test-cards/_index.md).

Verification: post-move build is clean, with 0 broken / 29,672 internal
links across 1,014 HTML files, matching the pre-move baseline.

* Fix quarto.org link in Quarto 1.7 release post

Source had [quarto.org](/) (correct on quarto.org, where the post
originally lived). After porting, this resolved to the opensource.posit.co
homepage rather than quarto.org. Use the explicit external URL so it
works in both contexts.

* Update docs and skills to reflect ported/ move

Refresh references in the authoring guide, porting notes, editing-ported
notes, the blog CLAUDE.md JSON example, and the /new-post skill so they
reflect the new content/blog/ported/<source>/ layout.

Also tightens the link guidance in _porting-notes.md and
_editing-ported-posts.md to recommend permalink-form URLs
(/blog/YYYY-MM-DD_slug/) rather than content-path-style URLs that depend
on folder structure.

* Move outgrow-your-laptop image into ported/ tree

PR #258 added images/outgrowing.jpg under content/blog/positron/...
just before the move commit was rebased; git's rename detection didn't
extend the parent-dir rename to the newly added file, so it landed
outside the ported/ tree. Move it into place so the post's image
reference resolves.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant