chobble/chobble-template
1
0
Fork 0
mirror of https://github.com/chobbledotcom/chobble-template.git synced 2026-06-14 03:34:26 +01:00
Code Activity
The Chobble template - an Eleventy site, built with Nix https://example.chobble.com
2,167 commits 3 branches 0 tags 32 MiB
  • JavaScript 85%
  • SCSS 6.2%
  • HTML 5%
  • XSLT 3.3%
  • TypeScript 0.3%
  • Other 0.1%
Find a file
Exact
stefan burke a6fc488e15
 Fix hero/media backgrounds locking to aspect ratio in Safari (#1443) 
The image-background and video-background blocks set `aspect-ratio` +
`overflow: clip` on a grid container so the ratio acted as a minimum
height: overlay content taller than the ratio grew the box. Chrome and
Firefox honour this, but WebKit/Safari treats `aspect-ratio` combined
with a non-visible `overflow` (clip or hidden) as a hard height and clips
the taller content instead of growing the box.

Replace the container `aspect-ratio` with a padding-based spacer
pseudo-element that shares the overlay's single grid cell, so the grid
row grows to whichever is taller while still falling back to the ratio
when content is short. Uses ::after because `.image-background.tinted`
already owns ::before for its gradient overlay.

Verified on WebKit 26 / Safari 26 via Playwright: the band now grows to
fit tall content and holds the ratio for short content, matching
Chromium, for both plain and tinted variants.

https://claude.ai/code/session_01P9KZNabESLjnNj1CCe6F9R

Co-authored-by: Claude <noreply@anthropic.com>
2026-06-13 21:47:15 +00:00
.claude/agents Extract shared js-toolkit package from utility code (#749) 2026-01-19 01:04:05 +00:00
.forgejo/workflows Refactor ecommerce API integration and add product cache validation (#1055) 2026-02-06 20:30:16 +00:00
.github Parallelize the test suite: lanes, async builds, dedup tool runs (#1439) 2026-06-12 14:55:16 +00:00
.zed Add jscpd for copy/paste detection (#51) 2025-11-28 13:53:06 +00:00
bin Profile script and identify performance bottlenecks (#762) 2026-01-20 20:54:05 +00:00
packages/js-toolkit Remove locations feature (#1386) 2026-05-02 17:24:46 +00:00
screenshots Improve reviews layout design (#742) 2026-01-18 16:46:37 +00:00
scripts Parallelize the test suite: lanes, async builds, dedup tool runs (#1439) 2026-06-12 14:55:16 +00:00
src Fix hero/media backgrounds locking to aspect ratio in Safari (#1443) 2026-06-13 21:47:15 +00:00
test Fix masonry gaps (#1436) 2026-06-12 16:11:03 +00:00
.claude.json Add PostToolUse lint hook for Write/Edit operations (#559) 2026-01-09 18:51:27 +00:00
.codex Search box wrapper (#1415) 2026-05-27 21:20:28 +00:00
.eleventy.js Fix raw HTML rendering in markdown by disabling indented code blocks (#1435) 2026-06-12 09:10:58 +00:00
.envrc Use system nixpkgs 2025-12-11 00:20:24 +00:00
.gitignore Parallelize the test suite: lanes, async builds, dedup tool runs (#1439) 2026-06-12 14:55:16 +00:00
.jscpd.json Add click-sparkle WebGL effect to about page (#1361) 2026-04-25 02:50:35 +00:00
.pages.yml Unify hero and background block overlays around markdown content (#1438) 2026-06-12 13:31:42 +00:00
.stylelintrc.json Generic-ify FAQs (#1417) 2026-06-03 20:28:07 +00:00
biome.json Parallelize the test suite: lanes, async builds, dedup tool runs (#1439) 2026-06-12 14:55:16 +00:00
BLOCKS_LAYOUT.md Unify hero and background block overlays around markdown content (#1438) 2026-06-12 13:31:42 +00:00
bun.lock Add stylelint with property sorting to surface SCSS duplicates (#1395) 2026-05-05 00:43:34 +00:00
bunfig.toml Add stylelint with property sorting to surface SCSS duplicates (#1395) 2026-05-05 00:43:34 +00:00
CLAUDE.md Add test efficiency guidance to CLAUDE.md (#1336) 2026-04-20 11:45:31 +00:00
flake.lock Move page content into blocks and replace base.html with the design-system layout (#1428) 2026-06-11 18:15:32 +00:00
flake.nix Strengthen the types (#706) 2026-01-16 13:58:19 +00:00
knip.json Add stylelint with property sorting to surface SCSS duplicates (#1395) 2026-05-05 00:43:34 +00:00
LICENSE Initial commit 2025-03-18 17:36:20 +00:00
package.json Parallelize the test suite: lanes, async builds, dedup tool runs (#1439) 2026-06-12 14:55:16 +00:00
README.md Update README.md (#1220) 2026-04-03 15:40:30 +00:00
tsconfig.json Add click-sparkle WebGL effect to about page (#1361) 2026-04-25 02:50:35 +00:00
tsconfig.strict.json Add strict typecheck ratchet and type generation freshness test (#1088) 2026-02-17 14:31:05 +00:00

README.md

The Chobble Template

⚠️ Don't forget to change the Formspark and Botpoison info in _data/config.json or in your repository's action secrets ⚠️

See this template in action at:

Want me to make you a website based on this template? Hit me up at chobble.com.

💖 Want to support the development of this template? 💖 Donate at liberapay.com/chobble

An Eleventy starter for business websites. The GitHub action deploys to both Neocities and Bunny.net - you'll need to edit that for your setup.

Content Types

  • Products - galleries, options with SKUs, FAQs, specifications, features lists, linked reviews with ratings
  • Categories - product groupings with inherited thumbnails
  • Events - one-off and recurring schedules, iCal feed generation
  • News - blog posts with Atom feed
  • Menus - categories, items, pricing, dietary indicators (vegan, gluten-free, etc.)
  • Locations - multi-site support with sub-locations
  • Properties - for holiday lets, linked to locations
  • Reviews - linked to products, aggregate ratings
  • Team - member profiles
  • Snippets - reusable content blocks

Shopping Cart & Payments

  • LocalStorage-based cart with quantity limits
  • Stripe/Square checkout via external ecommerce backend
  • Quote/enquiry mode (submit cart as request instead of payment)
  • Auto-generated SKUs via GitHub Action

Theming

  • 10 pre-built themes: Default, Neon, 90s Computer, Floral, Hacker, Monochrome, Ocean, Old Mac, Rainbow, Sunset
  • Per-page theme overrides
  • Visual theme editor at /theme-editor/ with export
  • CSS custom properties for colours, fonts, borders, layout
  • SCSS support
  • Bunny Fonts integration

Images

  • Responsive images with srcset via eleventy-img
  • Base64 LQIP placeholders
  • Gallery component with thumbnail navigation and full-size overlay
  • Custom aspect ratio cropping

Forms

SEO & Structured Data

  • Schema.org markup for products (with reviews/ratings), events, FAQs, organisation
  • Canonical URLs
  • Sitemap
  • Atom feed with XSL stylesheet
  • Meta descriptions, noindex support

Navigation & Layout

  • Horizontal or left sidebar navigation
  • Sticky mobile nav option
  • Two-column layout with sidebar
  • Slider component for horizontal scrolling
  • Scroll-fade animations (respects prefers-reduced-motion)

Development

  • Nix flakes with direnv support
  • bin/lint - format with Biome
  • bin/screenshot - automated screenshots
  • Biome linting
  • jscpd duplicate detection
  • Knip unused code detection
  • 17+ test files with custom runner
  • instant.page for link prefetching on hover

Deployment

  • GitHub Actions workflow for Neocities and Bunny.net
  • Forgejo Actions support
  • PagesCMS integration for no-code editing
  • External ecommerce backend for payment processing

Configuration

  • _data/config.json - Formspark, Botpoison, ecommerce checkout, map embed, nav options
  • _data/site.json - name, URL, description, social links (14 platforms), opening hours
  • _data/meta.json - language, organisation details for schema.org
  • _data/strings.json - customisable labels and permalink directories

Want a website based on this template? Clone this repo, or hit me up at Chobble.com.