Skip to content

CLAUDE.md

Latest commit

 

History

History
43 lines (30 loc) · 3.7 KB

CLAUDE.md

File metadata and controls

43 lines (30 loc) · 3.7 KB
Raw

CLAUDE.md

About

www.cuberact.org - Main Cuberact website. Astro 5.18 + Tailwind CSS + @astrojs/sitemap, deployed via GitHub Pages.

Structure

  • src/layouts/ - BaseLayout.astro (global layout, includes the global Lightbox), BlogPost.astro (blog post layout)
  • src/components/ - Header, Footer, BlogPostCard, GodotEmbed (iframe wrapper for Godot web exports), Lightbox (global click-to-zoom for content images)
  • src/data/ - shared data modules. socials.ts holds the social links and brand icon SVG paths (X, GitHub, YouTube, Ko-fi) plus itchioPath; reused by the header, footer, and the "Links" button rows
  • src/pages/ - Astro pages:
    • index.astro - homepage: hero plus a reverse-chronological feed of project milestones and blog posts (NEWS / BLOG)
    • about.astro - about page
    • 404.astro - redirects to homepage
    • projects/ - project pages (cuberact-library, planet-chunked-lod)
    • demo/ - interactive demo pages with embedded Godot exports (crope2d, planet-chunked-lod)
    • blog/ - blog index + [...slug].astro for individual posts
  • src/content/blog/ - blog posts in Markdown (how-cuberact-started, planet-reborn, beaten-by-a-black-hole)
  • public/images/ - all images. Example screenshots live in cuberact-library-examples/, planet screenshots are planet-s0X.jpg, the rest (logos, hero shots, avatar) sit at the root

Conventions

  • Image lightbox. Every <img> inside <main> is automatically click-to-zoom (via Lightbox, included in BaseLayout). It only activates when the lightbox would show the image meaningfully larger than it already is on the page, and image clicks never navigate. Opt out per image with data-no-zoom (used on the logo and wordmark). Hover/cursor styling lives on main img.zoomable in global.css.
  • Cards. Card containers are NOT links and have no whole-card hover or click (it is a tap-trap on mobile). Navigate via an explicit link inside (e.g. "Open project", "Web demo", "Read post"). Images inside cards are zoom targets, not navigation.
  • Link rows. "Links" sections use icon buttons (blue primary for GitHub, outline for the rest) built from the socials.ts icon paths. Markdown posts inline the same button HTML (markdown cannot import components); wrap such HTML in not-prose so the .prose a styling does not override the button colors.
  • Image formats. Photographic / gradient-heavy images -> JPG (quality ~90); flat / graphic / transparent images -> PNG. Pick whichever is smaller per image. Put new images in a category subfolder.

⚠️ Externally linked URLs - do not break!

Files in public/images/ are linked from external sources (Godot Asset Library, itch.io, GitHub READMEs, etc.). Do not rename, move, or delete images that are already committed/pushed. Replace them in place (same filename) when needed. New, not-yet-committed images can be freely reorganized.

The same applies to demo and project page URLs - they are linked from Reddit posts, YouTube descriptions, GitHub READMEs, blog articles, and other external sources. Do not change URL paths (e.g. /demo/planet-chunked-lod/, /projects/cuberact-library/).

SEO

BaseLayout.astro includes: Open Graph meta tags (og:title, og:description, og:image), canonical URL, sitemap (auto-generated by @astrojs/sitemap), robots.txt in public/. All new pages inherit SEO automatically via BaseLayout. Listing pages (projects, demo, blog) keep an sr-only <h1> (visually hidden, kept for SEO and screen readers) because the nav already shows the section.

Build & Dev

  • npm run dev - local dev server on port 4321
  • npm run build - production build to dist/
  • Deployment: push to main -> GitHub Actions -> GitHub Pages