Merge pull request #260 from rubygems/claude/frosty-meitner-new-design

Redesign blog.rubygems.org to match rubygems.org

Author: colby-swandale

.github/workflows/build.yml

@@ -29,6 +29,8 @@ jobs:
         uses: actions/checkout@v4
         with:
           persist-credentials: false
+      - name: Install libvips
+        run: sudo apt-get update -qq && sudo apt-get install -y --no-install-recommends libvips
       - name: Setup Ruby
         uses: ruby/setup-ruby@v1
         with:

.gitignore

@@ -4,3 +4,5 @@
 .jekyll-metadata
 .sass-cache/
 /_site/*
+.playwright-mcp/
+/assets/images/og/

404.html

@@ -0,0 +1,21 @@
+---
+layout: default
+title: Page not found
+permalink: /404.html
+sitemap: false
+---
+
+<div class="max-w-prose">
+  <p class="text-sm font-semibold text-orange-700 mb-2">404</p>
+  <h1 class="text-3xl md:text-4xl font-bold text-neutral-800 mb-4">Page not found</h1>
+  <p class="text-lg text-neutral-700 mb-8">
+    The page you were looking for doesn't exist. It may have been moved or renamed
+    since this blog has been around since 2004.
+  </p>
+  <ul class="space-y-2 text-base">
+    <li><a href="/" class="text-orange-700 hover:underline font-semibold">Browse all posts &rarr;</a></li>
+    <li><a href="https://rubygems.org/" class="text-orange-700 hover:underline font-semibold">Visit RubyGems.org &rarr;</a></li>
+    <li><a href="https://guides.rubygems.org/" class="text-orange-700 hover:underline font-semibold">Read the guides &rarr;</a></li>
+    <li><a href="https://status.rubygems.org/" class="text-orange-700 hover:underline font-semibold">Check service status &rarr;</a></li>
+  </ul>
+</div>

AGENTS.md

@@ -0,0 +1,49 @@
+## Project
+
+Jekyll blog at `https://blog.rubygems.org`. Auto-deploys to GitHub Pages on push to `master` (`.github/workflows/build.yml`). Ruby 3.4.7.
+
+## Commands
+
+```bash
+bin/setup                    # bundle install
+bundle exec jekyll serve     # Dev server at http://127.0.0.1:4000 (auto-rebuilds)
+bundle exec jekyll build     # One-shot build into _site/
+```
+
+Tailwind v4 is compiled by the `jekyll-tailwindcss` plugin during the Jekyll build — no Node toolchain. Edit `_tailwind.css`; the plugin emits `_site/assets/css/styles.css`, which the layout links via `/assets/css/styles.css`. The empty `assets/css/styles.tailwindcss` source file is the marker that tells the plugin where to land the output — leave it as is.
+
+## Layout
+
+- `_posts/YYYY-MM-DD-slug.md` — ~470 posts back to 2004
+- `_layouts/{default,post}.html` — page shell + article wrapper
+- `_includes/{article,archive,nav_links}.html` — post card, year sidebar, nav
+- `_tailwind.css` — Tailwind entry; holds `@theme` tokens and `.prose` overrides
+- `index.html` — blog index; reuses `_includes/article.html` with `index = false`
+- `_config.yml` — site URL is `https://blog.rubygems.org` (see `CNAME`)
+
+## Writing posts
+
+Filename `_posts/YYYY-MM-DD-slug.md`. Required frontmatter:
+
+```yaml
+---
+title: "Post title"
+layout: post
+author: Author Name
+author_email: author@example.com
+---
+```
+
+## Gotchas
+
+- **Never edit `_site/assets/css/styles.css`** — that's compiled output, regenerated on every build. Edit `_tailwind.css`.
+- **Use Tailwind tokens, not raw hex.** All colors and the font stack are defined as `@theme` tokens in `_tailwind.css` — reference `text-orange-700`, `bg-neutral-050`, etc. The token table is the source of truth; do not re-declare values in CLAUDE.md.
+- **Don't override `prose` styles in markup.** Tweak them in the `.prose` layer of `_tailwind.css` so all posts stay consistent.
+- **Light mode only** — no dark variants.
+- The blog mirrors rubygems.org (the "hammy" template). Header, footer, nav, type, and color should match the main site so the blog reads as an extension of it.
+
+## Design intent
+
+Reliable, open, technical. Content-first: the orange brand color (`orange-500` `#F74C27`) and Titillium Web wordmark are the only signature elements; everything else stays out of the way of the writing. References: GitHub Blog, Rust Blog, Go Blog. Anti-references: marketing-heavy or startup-y aesthetics, animation, dark patterns.
+
+Page shell: `max-w-screen-xl`. Article body: `prose prose-lg` inside `max-w-3xl mx-auto` (centered, ~768px). Display heading: `text-3xl md:text-4xl font-bold text-neutral-800`.

CLAUDE.md

@@ -0,0 +1 @@
+@AGENTS.md

Gemfile

@@ -1,11 +1,11 @@
 source "https://rubygems.org"
 ruby file: ".ruby-version"
 
-gem "base64", "~> 0.2.0"
-gem "bigdecimal", "~> 3.1"
-gem "csv", "~> 3.3"
 gem "jekyll", "~> 4.0"
-gem "puma", "~> 6.4"
-gem "rack-jekyll", "~> 0.5.0", github: "adaoraul/rack-jekyll"
 gem "rake", "~> 13.0"
-gem "sass", "~> 3.7"
+
+group :jekyll_plugins do
+  gem "jekyll-tailwindcss"
+  gem "jekyll-sitemap"
+  gem "jekyll-og-image"
+end

Gemfile.lock

@@ -1,12 +1,3 @@
-GIT
-  remote: https://github.com/adaoraul/rack-jekyll.git
-  revision: a997bd0c384fa377cda3b9ebeb462f91cd8dfd03
-  specs:
-    rack-jekyll (0.5.0)
-      jekyll (>= 1.3)
-      listen (>= 1.3)
-      rack (>= 1.5)
-
 GEM
   remote: https://rubygems.org/
   specs:
@@ -48,8 +39,19 @@ GEM
       safe_yaml (~> 1.0)
       terminal-table (>= 1.8, < 4.0)
       webrick (~> 1.7)
+    jekyll-og-image (2.1.1)
+      jekyll (>= 3.4, < 5.0)
+      jekyll-seo-tag (~> 2.8)
+      ruby-vips (~> 2.2.0)
+      zeitwerk (~> 2.6)
     jekyll-sass-converter (3.1.0)
       sass-embedded (~> 1.75)
+    jekyll-seo-tag (2.8.0)
+      jekyll (>= 3.8, < 5.0)
+    jekyll-sitemap (1.4.0)
+      jekyll (>= 3.7, < 5.0)
+    jekyll-tailwindcss (0.7.0)
+      tailwindcss-ruby
     jekyll-watch (2.2.1)
       listen (~> 3.0)
     json (2.17.1.2)
@@ -61,46 +63,42 @@ GEM
     listen (3.9.0)
       rb-fsevent (~> 0.10, >= 0.10.3)
       rb-inotify (~> 0.9, >= 0.9.10)
+    logger (1.7.0)
     mercenary (0.4.0)
-    nio4r (2.7.5)
     pathutil (0.16.2)
       forwardable-extended (~> 2.6)
     public_suffix (7.0.5)
-    puma (6.6.1)
-      nio4r (~> 2.0)
-    rack (3.2.6)
     rake (13.3.1)
     rb-fsevent (0.11.2)
     rb-inotify (0.11.1)
       ffi (~> 1.0)
     rexml (3.4.4)
     rouge (4.6.1)
+    ruby-vips (2.2.5)
+      ffi (~> 1.12)
+      logger
     safe_yaml (1.0.5)
-    sass (3.7.4)
-      sass-listen (~> 4.0.0)
     sass-embedded (1.94.2)
       google-protobuf (~> 4.31)
       rake (>= 13)
-    sass-listen (4.0.0)
-      rb-fsevent (~> 0.9, >= 0.9.4)
-      rb-inotify (~> 0.9, >= 0.9.7)
+    tailwindcss-ruby (4.2.2)
+    tailwindcss-ruby (4.2.2-arm64-darwin)
     terminal-table (3.0.2)
       unicode-display_width (>= 1.1.1, < 3)
     unicode-display_width (2.6.0)
     webrick (1.9.2)
+    zeitwerk (2.7.5)
 
 PLATFORMS
+  arm64-darwin-25
   ruby
 
 DEPENDENCIES
-  base64 (~> 0.2.0)
-  bigdecimal (~> 3.1)
-  csv (~> 3.3)
   jekyll (~> 4.0)
-  puma (~> 6.4)
-  rack-jekyll (~> 0.5.0)!
+  jekyll-og-image
+  jekyll-sitemap
+  jekyll-tailwindcss
   rake (~> 13.0)
-  sass (~> 3.7)
 
 CHECKSUMS
   addressable (2.9.0) sha256=7fdf6ac3660f7f4e867a0838be3f6cf722ace541dd97767fa42bc6cfa980c7af
@@ -117,32 +115,35 @@ CHECKSUMS
   http_parser.rb (0.8.0) sha256=5a0932f1fa82ce08a8516a2685d5a86031c000560f89946913c555a0697544be
   i18n (1.14.7) sha256=ceba573f8138ff2c0915427f1fc5bdf4aa3ab8ae88c8ce255eb3ecf0a11a5d0f
   jekyll (4.4.1) sha256=4c1144d857a5b2b80d45b8cf5138289579a9f8136aadfa6dd684b31fe2bc18c1
+  jekyll-og-image (2.1.1) sha256=0d535155abd0c5753f3ee0003ba1ff4051d17eb6b876c44c9d4a58fe0b796732
   jekyll-sass-converter (3.1.0) sha256=83925d84f1d134410c11d0c6643b0093e82e3a3cf127e90757a85294a3862443
+  jekyll-seo-tag (2.8.0) sha256=3f2ed1916d56f14ebfa38e24acde9b7c946df70cb183af2cb5f0598f21ae6818
+  jekyll-sitemap (1.4.0) sha256=0de08c5debc185ea5a8f980e1025c7cd3f8e0c35c8b6ef592f15c46235cf4218
+  jekyll-tailwindcss (0.7.0) sha256=987eac000d0ef5a23b901927a34c9949066be3f7acd9729643e2f6afb4e30adf
   jekyll-watch (2.2.1) sha256=bc44ed43f5e0a552836245a54dbff3ea7421ecc2856707e8a1ee203a8387a7e1
   json (2.17.1.2) sha256=130dc7927f9484007107a4bcb2ebaa9523b973985f374686d5b2395d4143e2fa
   kramdown (2.5.1) sha256=87bbb6abd9d3cebe4fc1f33e367c392b4500e6f8fa19dd61c0972cf4afe7368c
   kramdown-parser-gfm (1.1.0) sha256=fb39745516427d2988543bf01fc4cf0ab1149476382393e0e9c48592f6581729
   liquid (4.0.4) sha256=4fcfebb1a045e47918388dbb7a0925e7c3893e58d2bd6c3b3c73ec17a2d8fdb3
   listen (3.9.0) sha256=db9e4424e0e5834480385197c139cb6b0ae0ef28cc13310cfd1ca78377d59c67
+  logger (1.7.0) sha256=196edec7cc44b66cfb40f9755ce11b392f21f7967696af15d274dde7edff0203
   mercenary (0.4.0) sha256=b25a1e4a59adca88665e08e24acf0af30da5b5d859f7d8f38fba52c28f405138
-  nio4r (2.7.5) sha256=6c90168e48fb5f8e768419c93abb94ba2b892a1d0602cb06eef16d8b7df1dca1
   pathutil (0.16.2) sha256=e43b74365631cab4f6d5e4228f812927efc9cb2c71e62976edcb252ee948d589
   public_suffix (7.0.5) sha256=1a8bb08f1bbea19228d3bed6e5ed908d1cb4f7c2726d18bd9cadf60bc676f623
-  puma (6.6.1) sha256=b9b56e4a4ea75d1bfa6d9e1972ee2c9f43d0883f011826d914e8e37b3694ea1e
-  rack (3.2.6) sha256=5ed78e1f73b2e25679bec7d45ee2d4483cc4146eb1be0264fc4d94cb5ef212c2
-  rack-jekyll (0.5.0)
   rake (13.3.1) sha256=8c9e89d09f66a26a01264e7e3480ec0607f0c497a861ef16063604b1b08eb19c
   rb-fsevent (0.11.2) sha256=43900b972e7301d6570f64b850a5aa67833ee7d87b458ee92805d56b7318aefe
   rb-inotify (0.11.1) sha256=a0a700441239b0ff18eb65e3866236cd78613d6b9f78fea1f9ac47a85e47be6e
   rexml (3.4.4) sha256=19e0a2c3425dfbf2d4fc1189747bdb2f849b6c5e74180401b15734bc97b5d142
   rouge (4.6.1) sha256=5075346d5797d6864be93f7adc75a16047a7dbfa572c63c502419ffa582c77de
+  ruby-vips (2.2.5) sha256=f3c547a172c36ba26b8614c809f5823bc6199623ec6204ec7c3bce29037f7758
   safe_yaml (1.0.5) sha256=a6ac2d64b7eb027bdeeca1851fe7e7af0d668e133e8a88066a0c6f7087d9f848
-  sass (3.7.4) sha256=808b0d39053aa69068df939e24671fe84fd5a9d3314486e1a1457d0934a4255d
   sass-embedded (1.94.2) sha256=c5061699ec35fe34b182eab3df4fbe97729e90a8e0d9c247457ccb64ee0d99e6
-  sass-listen (4.0.0) sha256=ae9dcb76dd3e234329e5ba6e213f48e532c5a3e7b0b4d8a87f13aaca0cc18377
+  tailwindcss-ruby (4.2.2) sha256=ce66da7b01fb6ef1ad6485b4b8c3476fac959f3324894fd26ec7c67ab3996d30
+  tailwindcss-ruby (4.2.2-arm64-darwin) sha256=2d66feba0c1ffca5b79246bd881bfb9a6b2298d57c4bc83ee3a8c3233df79d41
   terminal-table (3.0.2) sha256=f951b6af5f3e00203fb290a669e0a85c5dd5b051b3b023392ccfd67ba5abae91
   unicode-display_width (2.6.0) sha256=12279874bba6d5e4d2728cef814b19197dbb10d7a7837a869bab65da943b7f5a
   webrick (1.9.2) sha256=beb4a15fc474defed24a3bda4ffd88a490d517c9e4e6118c3edce59e45864131
+  zeitwerk (2.7.5) sha256=d8da92128c09ea6ec62c949011b00ed4a20242b255293dd66bf41545398f73dd
 
 RUBY VERSION
   ruby 3.4.7

_config.yml

@@ -1,6 +1,42 @@
 ---
 exclude:
 - vendor
-safe: true
+- CLAUDE.md
+- AGENTS.md
 markdown: kramdown
+timezone: UTC
 url: https://blog.rubygems.org
+title: RubyGems Blog
+description: News and updates from the RubyGems team — releases, security advisories, and project announcements.
+
+plugins:
+  - jekyll-tailwindcss
+  - jekyll-sitemap
+  - jekyll-og-image
+
+og_image:
+  collections: ["posts", "pages"]
+  output_dir: assets/images/og
+  canvas:
+    background_color: "#FFFFFF"
+  header:
+    color: "#262626"
+  content:
+    color: "#525252"
+  border_bottom:
+    width: 20
+    fill:
+      - "#F74C27"
+  image:
+    path: /images/blog-mark.png
+    width: 360
+    height: 56
+    radius: 0
+    gravity: se
+    position:
+      x: 60
+      y: 87
+  metadata:
+    fields: ["author", "date"]
+    separator: " • "
+    date_format: "%B %-d, %Y"

_data/authors.yml

@@ -0,0 +1,30 @@
+# Author profiles, keyed by primary email.
+#
+# Posts reference authors via `author:` and `author_email:` frontmatter.
+# When `author_email` matches a key here (or one of its `aliases`), the byline
+# renders the canonical name + URL + bio from this file, and the BlogPosting
+# JSON-LD surfaces `author.url` and `author.sameAs` for E-E-A-T / AI citation
+# signals. Posts whose email matches no entry fall back to the raw `author`
+# frontmatter string.
+#
+# Schema:
+#   <primary-email>:
+#     name: "Canonical Name"   (required — overrides per-post `author` string)
+#     url: "https://..."       (optional — primary profile, e.g. GitHub)
+#     bio: "Short bio."        (optional — one-sentence bio shown under byline)
+#     aliases:                 (optional — alternate emails this author uses)
+#       - other@example.com
+#     same_as:                 (optional — additional profile URLs for JSON-LD)
+#       - "https://..."
+
+hsbt@ruby-lang.org:
+  name: "Hiroshi SHIBATA"
+  url: "https://github.com/hsbt"
+  bio: "Ruby core committer and RubyGems maintainer."
+
+colby@rubygems.org:
+  name: "Colby Swandale"
+  url: "https://github.com/colby-swandale"
+  bio: "Technical lead at RubyCentral."
+  aliases:
+    - me@colby.fyi

_includes/archive.html

@@ -1,5 +1,6 @@
-<div class="post__link--posts-by-year l-col--l">
-  <div class="nav--v">
+<nav aria-label="Archive" class="shrink-0 lg:w-48">
+  <h3 class="text-sm font-bold text-neutral-700 uppercase tracking-wider mb-3">Archive</h3>
+  <ul class="flex flex-row flex-wrap lg:flex-col gap-1 -mx-2">
     {% for post in site.posts %}
       {% assign index = true %}
       {% assign truncated = true %}
@@ -8,8 +9,8 @@
       {% capture next_year %}{{post.next.date | date: "%Y"}}{% endcapture %}
 
       {% if current_year != next_year %}
-        <a class="nav--v__link" href="/#{{current_year}}">{{current_year}}</a>
+        <li><a class="inline-block px-2 py-1.5 text-base text-neutral-700 rounded hover:bg-neutral-100 hover:text-orange-700 focus-visible:text-orange-700 focus-visible:outline-none focus-visible:underline transition-colors" href="/#{{current_year}}">{{current_year}}</a></li>
       {% endif %}
     {% endfor %}
-  </div>
-</div>
+  </ul>
+</nav>