Rebuild buttonkin-games with Chobble Template blocks layout#1
Merged
Conversation
Migrates content from the existing buttonkin.com repo into the new blocks-based page structure. The five core snippets (footer-content, socials, recent-blog-posts, featured-games, upcoming-events) are composed entirely of design-system blocks and reused via the snippet block type throughout the site. Content migrated: - Six games (Jude's World, Drama Llamas, Bumbling, Caltrop Kaiju, Psychic Night School, Righteous Jaunt) rebuilt as blocks-layout pages under a new 'games' collection mounted at /releases/ - 32 newsletter posts moved to the 'news' collection, now surfaced as the Blog archive at /blog/ - About page rebuilt from existing copy; images and PDFs copied over Pages added with PLACEHOLDER TEXT where content doesn't yet exist: Services (Layout, Writing), Events (main + past), Media (Streams, Playthroughs, Press), Contact Navigation uses eleventyNavigation with dropdowns for Releases (Jude's World, Drama Llamas), Services, Events and Media.
- Add _data/config.json with cart_mode: null so template doesn't
require stripe-checkout/order-complete pages we don't need
- Swap {% render "youtube.html" %} liquid includes in the
Jude's World launch newsletter post for plain iframe embeds
(the template no longer ships that include)
- Prefix game image paths with src/ so the template's
normalizeImagePath resolves them at src/games/... rather than
src/images/games/... (which doesn't exist)
- Vendor the placeholder SVGs from the template at
images/placeholders/ so news posts without thumbnails render
instead of crashing on the missing placeholder images
The template's `src/assets/icons/iconify/` already ships with a set of cached hugeicons SVGs; anything else has to be fetched from the Iconify API at build time. The CI build failed fetching icons that weren't in the cache (newspaper, layers-01, file-01, play-circle, live-streaming-02, news, pencil-edit-02 etc.). Replace every icon reference with one already cached in the template so the build is fully offline for iconify lookups: - socials.md: newspaper→book-02, simple-icons:*→hugeicons equivalents (gears for itch, global for bluesky, note-edit for medium, tag-01 for tumblr) - services.md: layers-01→image-02, pencil-edit-02→note-edit - media.md: live-streaming-02→youtube, play-circle→image-02, news→book-02 - media-press.md + drama-llamas: file-01→pdf-02 - _data/social-icons.json: switch the custom keys (bluesky, itch, medium, tumblr, email) to hugeicons from the cache too Verified the full build pipeline (ci-merge + bun install + eleventy) runs clean locally on a fresh template clone.
Extracted the colours, fonts, shadows, and border styling from the old Button Kin site's src/css/style.scss and mapped them onto the Chobble design-system's CSS custom properties: - --color-bg / --body-background: #f6d9e1 (light pink) - --body-background-alt: slightly darker pink for alt sections - --color-link: #923a52 (dark pink) - --color-link-hover / --color-secondary: #004d3b (dark green) - --color-accent: #b35b72 (the old shop-button mid pink) - --color-tint: #fff0f4 for icon/badge backgrounds - --font-family-heading: Calistoga (loaded from Google Fonts), the same display face the old site used - --font-family-body: the old condensed sans stack (AvenirNext → HelveticaNeue-CondensedBold → Ubuntu Condensed → Arial Narrow → sans-serif) - Softer shadow scale (--shadow-sm / --shadow-md / --box-shadow) and --border: 2px solid #f6d9e1 matching the old spec-card - Dark-section palette recoloured to deep-green + cream so dark blocks still feel like the Button Kin brand - --list-marker: a pink ✦ instead of the default bullet
The old site kept these under /adventures/; they're now part of the single games collection so they show up under /releases/ alongside the six main games. D&D 5e adventures: - A Fey Mystery of Glen Dourn (featured) - The Tillvayle Committee - Red Gold - Bardic Origins: The Storied Bastion - Bardic Origins: The Lyric Grove - Bardic Origins: Timbrel Sleet's Intrepid Players Drama Llamas postcard one-shots: - Beach Bar-a-Llama - Flora and Llama - Llama Warrior Each page follows the same blocks recipe as the existing games: hero with external buy buttons, section-header / split-image for the body copy, stats for system/players/play-time, features for reviews when available, cta at the bottom. Images (covers, maps, character portraits, thumbs) copied across and referenced with src/ paths so the template resolves them correctly.
Homepage: - Move the intro under the hero into a split-image block so Yvris's convention photo (images/alex.jpg) sits beside the text Releases: - Tag Bumbling as featured (it joins Drama Llamas and Jude's World in the featured-games snippet) and add it to the navigation dropdown alongside the other two - Swap the 150x120 thumbnails for the much higher-resolution product photos (~2000px square) where the old assets repo had one, or for the cover.png where it didn't (a-fey-mystery-of-glen-dourn, psychic-night-school) - Restore the per-release Buy Direct image-cards block from the original `products` frontmatter (one card per product photo with price + direct Stripe checkout link) - Restore the itch.io widget iframe from the original `itch_widget` frontmatter as an html block on the 9 releases that had one - Bardic Origins series + Red Gold keep the small thumbs because the old repo only ever had 150x120 images for them Blog: - For each post that contained an image, set frontmatter `thumbnail` to the first /images/newsletter/* image found in the body, so the news listing cards stop using placeholder colour swatches
The template just gained two first-class blocks we can now lean on: - iframe-embed: a proper iframe block with src, title, aspect_ratio, max_width, sandbox, allow — replaces our hand-rolled `<div class="iframe-container"><iframe…>` html blocks. - buy-options: semantic "things you can buy" with image, title, subtitle, price (+ schema.org Product markup), replacing the image-cards block we'd been stretching into the Buy Direct role. Changes: - New snippets/newsletter.md: section-header intro + iframe-embed (Buttondown signup) + link-button to the blog archive. Homepage now calls it via `type: snippet, reference: newsletter` instead of embedding the iframe by hand inside a split-html block. - 9 game pages swapped their hand-rolled itch.io <iframe> html blocks for iframe-embed blocks. - 7 game pages swapped the "## Buy Direct" image-cards block for buy-options, splitting the old "£15 · Main rulebook" string into the separate `price` and `subtitle` fields that buy-options expects. Price values are bare numbers so the block can emit the currency (GBP) via its schema.org markup.
- A Fey Mystery of Glen Dourn and Red Gold each get a proper
`callout` block (variant: warning, alert icon) for their content
warnings, replacing the "Content warning: …" line that had been
crammed into `cta.description`
- Drama Llamas' downloads moved from a generic `icon-links` block
to the new `downloads` block (takes {file, label} pairs and
picks up file size / type automatically)
- Moved files/ → assets/files/ so they end up served at
/assets/files/*.pdf; the template's passthrough-copy only ships
src/assets and src/images, so the previous /files/ URLs 404'd.
Updated the drama-llamas download paths accordingly.
Verified locally: both block types render in the built HTML
(<aside class="callout callout--warning"> and <ul class="downloads">),
and the three PDFs are now present under _site/assets/files/.
footer sidebar content, and URL redirects
Press kit pages:
- Created /press-kits/drama-llamas/ and /press-kits/judes-world/
from the old liquid templates — contact info, about Yvris,
game descriptions, Kickstarter basics, art galleries, logo
download lists, and press coverage links. All converted to
blocks (section-header, gallery, markdown).
- Updated media-press.md to remove PLACEHOLDER TEXT and add the
real press coverage links.
- Redirect: /drama-llamas-press-kit/ and /judes-world-press-kit/
point to the new locations.
Custom of the Sea:
- Created /custom-of-the-sea/ page — the old cots.md was a
pre-launch signup for an upcoming regency folk horror game.
Uses the newsletter snippet for the signup form.
Favicon:
- Copied favicon.ico from the old repo into assets/.
Site description:
- Added "description" and "email" fields to site.json from the
old site.json.
Suitability callouts:
- Added a callout (variant: info) block to all 6 main games with
the human-readable suitability sentence from the original
frontmatter. D&D adventures and Drama Llamas one-shots already
have the info in their stats blocks so they don't need it.
Footer sidebar content:
- Rebuilt footer-content.md to mirror the old sidebar: a
split-image block with the BK logo + studio tagline + nav
links (dark variant), the recent-blog-posts snippet, then
the existing contact form + socials.
URL redirects for old paths:
- /games/ and /adventures/ → /releases/
- /newsletter/, /archive/, /blog/page1 through /blog/page23 → /blog/
- Every game/adventure slug at root (e.g. /bumbling/, /drama-llamas/,
/a-fey-mystery-of-glen-dourn/) → /releases/{slug}/
- /oh-my-stars/ and /tags/press-kit/ → / (already existed)
Verified locally: 24 redirect HTML files generated, both press
kit pages render with galleries, callout blocks appear on all 6
main games, favicon copied to _site/assets/favicon.ico.
The template's news-post.html uses `layout: base` which renders
posts with the simpler CSS bundle and no design-system footer
blocks. This override switches to `layout: design-system-base.html`
(following the same pattern as property.html: set blocks: false
so the base layout renders our content directly).
The post layout now renders as proper design-system sections:
- compact header section with h1 title, subtitle, and date
- compact hero image section (thumbnail via {% image %} shortcode
if present, cropped to 16/9)
- narrow-container prose section for the post body
- gallery section if the post has one
- "All blog posts" back-link at the bottom
Because each news post now goes through design-system-base, it
automatically picks up the footer-content snippet blocks (logo,
recent posts, contact form, socials) that appear on every other
page — posts were the only page type that was missing these.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Rebuilds the Button Kin site into the new Chobble Template blocks-layout format, migrating content from the existing buttonkin repo.
The 5 requested snippets (composed of design-system blocks)
All live in
snippets/and are reused throughout the site via thesnippetblock type:footer-content.md— contact-form block + socials snippet reference. The template renders this at the end of<main>on every page.socials.md—icon-linksblock listing email, newsletter, RSS, Itch, Bluesky, Medium, Tumblr, Instagram.recent-blog-posts.md— horizontalitemsblock over thenewscollection.featured-games.md—itemsblock over the newgamescollection, filtered bydata.featured == true.upcoming-events.md—itemsblock over theupcomingEventscollection.Pages
/pages/home.md/releases/pages/releases.md/releases/{game}/games/*/index.md/blog/pages/blog.md/services/+/services/layout/+/services/writing/pages/services*.md/events/+/events/past/pages/events*.md/media/+/media/streams/+/media/playthroughs/+/media/press/pages/media*.md/about/pages/about.md/contact/pages/contact.mdContent migrated from the old repo
games/collection (Jude's World, Drama Llamas, Bumbling, Caltrop Kaiju, Psychic Night School, Righteous Jaunt)news/collectionNew content
games/games.json— new collection config (tags:games, permalink/releases/{slug}/)news/news.json— wired up withnavigationParent: "Blog"_data/social-icons.json— adds Bluesky, Email, Itch, Medium, Tumblr icons used bysite.socials.pages.yml— adds agamescollection for CMS editing_data/site.json/_data/meta.json— updated for Button Kin detailsNavigation (via
eleventyNavigation)Where content is missing
Per instruction, sections with no existing content use literal
PLACEHOLDER TEXTrather than invented copy — Services pages, Media/Streams, Media/Press reviews, and the body copy of the Conventions/Online Games/Past Event placeholder events underevents/.Test plan
/renders with all 6 homepage sections (hero, intro, featured games, newsletter, blog, events)featured-gameson home + about,socialsin footer-content + about + contact,upcoming-eventson home + events,recent-blog-postson home)footer-contentsnippet's contact-form renders on every page/blog/and show inrecent-blog-postssnippethttps://claude.ai/code/session_01Cpc5nwayCYvfafPhueEd3G