Fix build, restore lost content, and recreate the boxed two-column design#18
Merged
Conversation
…migration - Exclude _site from source sync so previous build output doesn't pollute builds - Exclude .build/_site from Biome config discovery (nested root configs broke lint) - Restore full homepage content (sessions, lessons, quotes, locations, songbooks) in blocks format - Restore the two news posts deleted in the WIP commit, converted to blocks format with original permalinks - Add news items listing to the news index page Local sitemap now matches https://www.ukegroupnorth.com exactly. https://claude.ai/code/session_013xLFhQjE6SLLfEn3ygUkPt
- Override design-system-base.html to render a banner header from each page's header_image/header_text/subtitle (reusing the design system's image-background block markup) and to render the right-content snippet in an aside, wrapping main in a .page-columns container. The template already adds the two-columns body class when snippets/right-content.md exists; this supplies the missing markup. - Override page.html to stop the duplicate block render (template's page.html renders blocks and design-system-base renders them again, doubling every page's content). - Rewrite theme.scss: boxed 1300px cream panels (nav, banner, content + sidebar, footer) with gold borders on a peach backdrop, 16rem-ish right sidebar grid on desktop, stacked sidebar sessions list, centred headings, matching the previous live site. https://claude.ai/code/session_013xLFhQjE6SLLfEn3ygUkPt
stefan-burke
changed the title
- Rename the client layout override to base.html to match the template's new layout name (design-system-base.html and page.html were removed upstream; layout now comes from src.11tydata.js). The page.html override is no longer needed since upstream fixed the double block render by deleting that layout. - Rewrite the GoatCounter inline script without arrow functions: the template's linkify transform now HTML-escapes '>' inside inline scripts, which turned '=>' into '=>' and broke all site JS (sliders, reveal animations, search). https://claude.ai/code/session_013xLFhQjE6SLLfEn3ygUkPt
…ocks - Every page, event, and news post now declares its banner as a leading image-background block (tinted, with the title as an h1 and former subtitle as a paragraph) instead of bespoke header_image/header_text frontmatter. - base.html override hoists a page's leading image-background block above the .page-columns container so the banner spans content + sidebar; the bespoke banner markup is gone. - Pages drop their now-unused subtitle frontmatter (events and news keep theirs for item cards and the news post header include). - Update .pages.yml CMS fields to match (header fields removed, pages keyed by name instead of header_text). https://claude.ai/code/session_013xLFhQjE6SLLfEn3ygUkPt
- Override the design-system bundle entry to configure the design system's !default variables via 'with ()' — smaller heading sizes (h1 2rem, h2 1.5rem desktop, matching the old live site) and a 6px spacing unit (25% tighter gaps and section padding). The template's documented _theme-variables.scss mechanism doesn't work: its forwarded variables are shadowed by _variables.scss's own !default declarations, so module configuration is the only working route. - Fix inconsistent sidebar width: min-width: 0 on main stops wide children (sliders, 1200px containers) blowing the 1fr grid track past the panel width and shoving the sidebar. Sidebar pinned at 16rem to match the old site. https://claude.ai/code/session_013xLFhQjE6SLLfEn3ygUkPt
Replace the bundle-entry override with plain CSS overrides in theme.scss (loaded last in the design-system bundle, so same-specificity rules win): compact heading sizes, prose gap/line-height, block stack gap, and the --section-padding-y custom property. Same computed result, standard client theming convention. https://claude.ai/code/session_013xLFhQjE6SLLfEn3ygUkPt
The template now exposes --font-size-*, --space-*, and section padding tiers as :root custom properties consumed by its mixins. Replace the flat CSS rule overrides with token overrides in :root — same computed output (h1 2rem, h2 1.5rem, 6px spacing unit, 2.5rem/4rem section padding), now via the supported theming surface. https://claude.ai/code/session_013xLFhQjE6SLLfEn3ygUkPt
The template's :root now derives all --space-* tiers from --space-unit via calc(), so the eight explicit tier values are no longer needed. Rendering verified identical (prose gap 18px, --space-3xl 72px, section padding 64px). https://claude.ai/code/session_013xLFhQjE6SLLfEn3ygUkPt
chobble-template's base.html now renders the right-content snippet in an aside and hoists a leading image-background block above the page-columns grid, so the client layout override is gone entirely. Theme selectors re-scoped to the upstream markup (the hoisted banner is a bare section under body, no .page-banner wrapper) and the redundant grid/min-width/ slider-stacking CSS removed in favour of the design system's _page-columns.scss and --right-column-width token. https://claude.ai/code/session_013xLFhQjE6SLLfEn3ygUkPt
…ails - Nav: add background colour and flex-centred horizontal layout on desktop - Sidebar: strengthen ul rule specificity to suppress bullets inside .prose - Events items-array: remove horizontal slider (four items suit a grid better) - Events: add thumbnail frontmatter matching each event's banner image
The nav box was off-centre because our width/margin rules half-overrode the template's horizontal-nav layout (its margin-inline wins on specificity). The template already centres the nav, gives it the --color-bg background, border-radius, and shadow — so drop all our nav layout rules and keep only the gold border. Also removed other duplication: footer styling (template centres and pads it), right-column padding and no-op gap (template pads the aside), and the direct body background (now the --body-background token, which the template consumes).
- align-items: stretch on the two-column grid so the aside (and its gold border-left) runs the full page height — template uses start - stack ul.items cards in the sidebar at 100% width; the template sizes them for the main column (flex-basis 280px, 33% max at lg) - zero --list-marker-content in the sidebar: the design system draws bullets via an explicit ::marker content, which survives list-style: none
chobble-template now stretches the two-column grid (align-items: start removed) and stacks non-slider items cards at full width inside the right column, so the theme only keeps the gold divider, centring, and the --list-marker-content bullet removal.
The template's reviews system uses markdown body content (not blocks), tagged via reviews.json, with name/url/date frontmatter fields. Add reviews.json and reviews.11tydata.js, rewrite all five review files, add a `reviews` block to pages/reviews.md, and update .pages.yml to match the new shape (date, optional rating, plain body text).
Matching the live site: the homepage gains a Latest Posts news listing after the Plato quote, and each event page ends with the full reviews list via a reviews block.
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
Gets the new blocks-layout build fully working, restores content lost in the WIP migration commit (verified against https://www.ukegroupnorth.com), and recreates the old site's boxed two-column design on top of the chobble-template design system.
Build fixes
_sitetosourceExcludesinscripts/consts.js— previously, a build's output in the repo root got synced into the next build assrc/_site, producing duplicate/_site/...pages and polluting the sitemap..build/and_site/from Biome config discovery — nestedbiome.jsonfiles in the merged template brokebun run lint.deploy-only-on-main: truein the workflow — non-main branches have no staging Bunny CDN secrets, so the deploy step could never succeed; branches now build-only.Restored content (vs live site)
pages/home.md): was reduced to a "# Home" placeholder. Restored all original content in the new blocks format.news/welcome.mdandnews/new-ukulele-workshop-event.mdrestored in blocks format with their original permalinks.pages/news.md): added anitemsblock so the listing shows the posts.Boxed two-column design
_layouts/design-system-base.html(client override of the template layout):header_image/header_text/subtitlefrontmatter, reusing the design system'simage-backgroundblock markup (tinted, white overlaid title) — restoring the old banner headers and page<h1>s.<main>in a.page-columnscontainer and renders theright-contentsnippet's blocks in an<aside class="right-column">. The template already adds thetwo-columnsbody class whensnippets/right-content.mdexists; this supplies the missing markup half._layouts/page.html(client override): fixes a content-duplication bug — the template'spage.htmlrendersblocks, thendesign-system-base.htmlrenders them again, so everypages/page rendered its content twice. The override leaves blocks to the base layout.css/theme.scss: rewritten for the design system — centred 1300px cream panels (nav, banner, content+sidebar, footer) with thin gold borders and soft shadows on a peach backdrop, a 18rem right sidebar grid on desktop (stacked below content on mobile, sticky mobile nav untouched), vertically stacked sidebar session cards, and centred headings, matching the previous live design.Possible upstream improvements for chobble-template
design-system-base.htmlcould render theright-contentsnippet itself —getBodyClassesalready detects the snippet and emitstwo-columns/one-column, but nothing renders it, so the class is currently dead. Upstreaming the aside + sidebar CSS would let this client delete its base-layout override.page.html+design-system-base.htmldouble render ofblockslooks like a genuine template bug (anypages/page with blocks renders everything twice).header_image/header_textfrontmatter would smooth migration for old-template sites, which all carry those fields.Verification
bun run buildexits 0;bun run lintpasses; template test-suite failure count is unchanged vs the branch baseline (pre-existing failures only).https://claude.ai/code/session_013xLFhQjE6SLLfEn3ygUkPt