Repository navigation
feat: JS Cebu design system v0.1 - #1
Merged
Merged
Conversation
Sets up the pnpm monorepo (packages/*, apps/*), MIT license for code, the brand-assets license, CONTRIBUTING, README and CI. packages/brand holds the typed brand data (colors, fonts, personalities, signatures, the 10 MUST rules, logo rules, voice, assets, text pairs, changelog) and WCAG contrast helpers. Every text/background pair is tested against AA.
Three pure generators turn the brand data into the CSS custom properties (with the cursor, sticker and highlighter classes and the reduced-motion rule), the agent-readable brand.md in a fixed section order, and llms.txt. The Terminal grid and hairline values are exported from brand.ts so the recipe text and the CSS share one source.
trace.py reads the flattened mark from the PSD (the editable group is cropped), splits it into ring, inner, blue, green, red and outer masks, traces each with potrace and samples five gradient stops per region from the flattened pixels along the PSD's gradient angles. The PSD, the 5045px horizontal lockup, the region masks and mark-paths.json are committed so later builds never need Python. Each traced region overlaps its mask with IoU >= 0.97.
build-logos.ts composes eight SVGs from mark-paths.json: the full-color, ink and white marks, the sticker with its 5% white die-cut edge, and four horizontal lockups with the JAVASCRIPT / CEBU wordmark set in Roboto Black and converted to outlines. Each SVG also ships as a PNG, plus a sticker pre-tilted -8°. Lockup geometry comes from measuring the 2025 js-horizontal.png. Tests check color fidelity per region against the PSD, see-through gaps in the one-color marks, the sticker edge, the wordmark overlay (IoU >= 0.90) and that the one-color files are listed for the right backgrounds.
lintHtml checks HTML against the machine-checkable MUST rules: no color literals, the cursor wrapped with its last word, unfiltered photos, no full-color flat logo on Poster yellow, and a tokens.css link. Adds the 1080×1080 event post (Poster) and the 1640×624 Facebook cover (Terminal over a real photo, inside the mobile safe zone), the community meetup photo, a copy-paste example per personality, and .jc-label, .jc-event-line and .jc-photo in tokens.css. All pass lint.
apps/website is a static Astro 7 site. It serves /brand (a placeholder for now), /brand.md, /brand/tokens.css and /llms.txt, all generated from @jscebu/brand, plus a 404 page, the Terminal layout with self-hosted fonts, and the Cursor and Sticker components. The build copies the brand logos, photos and templates into public/brand/, then check-dist fails the build if the cursor can wrap alone, a /brand link is not built, a rule is missing from the page or brand.md, or src/ contains a color or font-family literal.
The page renders every section from @jscebu/brand: intro with the MUST checklist and a copyable brand.md link, logos on their intended backgrounds, colors with contrast-checked text pairs, type specimens, ranked signatures, the three personalities with their live examples, the Facebook cover template, voice with draft badges, downloads and the changelog. check-dist now checks every rule list (MUST, logo rules, signature rules, recipes, don'ts, voice) for parity between the page and brand.md. Grid tracks use minmax(0, 1fr) so the example iframes can't widen the page; it holds at 320px with no horizontal scroll.
wrangler.jsonc deploys the static build as the jscebu-org Worker on workers.dev, with no routes yet. Assets are served first; the Worker only runs on misses and returns the 404 page with a 404 status. _headers serves brand.md as text/markdown and llms.txt as text/plain, both UTF-8, and allows cross-origin reads of brand.md, llms.txt and everything under /brand/ so agents and tools can fetch them.
pnpm/action-setup fails when its version input and the packageManager field are both set.
Landing page plus the pages the old Notion site really had (about, links, projects with Cebby), redirects for every old URL, and swapping www to the jscebu-org Worker as a custom domain. Events from Cebby come in a later release.
Six tasks: content collections, shared layout with about/links/projects, the landing page, redirects plus all-page checks, the workers.dev preview with Dorell's review, and the www custom-domain swap on an explicit go. The spec now uses a small sitemap endpoint instead of an integration.
Dorell doesn't want events as one long list. The Facebook history (about 50 events since 2019, with series, Hacktoberfest stages and several hosts) is noted in spec §6 as input for the events release.
projects (Cebby), organizers (the four leads from /members), links (the official channels) and pages (about, with the mission and vision carried over verbatim) are Markdown and JSON collections validated by zod schemas. A test checks the content matches the current site.
A shared Site layout gives every page the same nav (lockup on wide screens, the mark alone below 480px per the 120px lockup minimum) and footer. /about renders the mission, vision, history and organizers from the collections, /links the official channels, /projects the project cards (Cebby). /brand and the 404 page now use the shared layout; /brand keeps its section links as a second nav row.
The home page carries the hero with the blinking cursor and sticker, what JS Cebu does (meetups, workshops, Hacktoberfest Cebu), upcoming events linking to Cebby and Facebook until the Cebby endpoint exists, Cebby as the featured project, the real community photo, and the official channels. Every page now has a canonical URL and Open Graph tags with the community photo, so shared jscebu.org links get a proper preview card.
public/_redirects sends every Notion-era URL to its new home (spec §5), including the three that were soft 404s; /events is a temporary 302 to the landing page's events section. Adds /sitemap.xml and /robots.txt. check-dist now checks the cursor and every internal link on all built pages, brand.md and llms.txt, and that each on-site redirect target exists. A link to a folder without its trailing slash counts as missing, because Workers would answer it with a redirect; links, redirect targets, brand.md and llms.txt now use /brand/, /about/ and so on. The 404 page is noindex with no canonical URL.
scripts/url-matrix.sh checks a base URL against the v1 spec: every old Notion-era URL redirects with the right status and target, the pages return 200, brand.md keeps text/markdown with CORS, and unknown paths return 404. It passes against wrangler dev. The Hacktoberfest redirect target is written as https://hacktoberfest.jscebu.org/, the form Workers sends.
Headline words rise in like terminal output with the cursor already waiting at the end, the sticker gets slapped on as the page loads and peels a little on hover, sections and cards fade up as they scroll in, and buttons and link cards respond to hover and press. Everything is transform and opacity with decelerating easing, switched off entirely under prefers-reduced-motion, and nothing needs JavaScript to be visible: only the reveal script adds the class that hides content until it scrolls in. Adds .impeccable.md, the design context (audience, use cases, personality, motion) for design work on this repo, distilled from the approved specs.
Records the live setup in wrangler.jsonc: www.jscebu.org is a Workers Custom Domain on jscebu-org, which Dorell attached in the dashboard on 2026-10-28. Deploys from main keep it.
The Journal example and the Facebook cover template used draft phrases (Padayon, Salamat), which agents copy verbatim; spec §11 says Bisaya appears only after Dorell approves it. They now use English, the fb-cover note says to wait for approval, and the phrase strip on /brand is labelled as drafts. A test keeps draft phrases out of every example and template. The scroll-reveal rule that hides content until it scrolls in now applies to screens only, so printing or saving a page as PDF shows sections that were never scrolled to. Found by the final review (the /about organizers printed blank).
README and CONTRIBUTING describe what is live and the workflow: intent, plan, approval, implementation, review, merge. Merging to main deploys through Cloudflare Workers Builds, with the exact build and deploy commands, a warning about Custom Domain routes overriding DNS, and the rule that Bisaya appears only once approved. The site spec now records the decided auto-deploy and how www was attached; the design-system spec notes the proposed amendment that only ink one-color logos go on yellow.
feat: jscebu.org v1 site
🚀 Deploying Preview to Cloudflare 🚀Preview Deployments by commit
|
dorelljames
marked this pull request as ready for review
October 28, 2026 01:50
Codex Review SummaryThis comment shows the latest Codex review activity on this pull request.
ℹ️ About Codex in GitHubYour team has set up Codex to review pull requests in this repo. Reviews are triggered when you
Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings. |
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
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.
JS Cebu design system v0.1, per the spec and plan.
What's in it
packages/brand: the brand as typed data (colors, fonts, three personalities, four signatures, the MUST checklist, logo rules, voice), with generators fortokens.css,brand.mdandllms.txt, and an HTML checker for the machine-checkable MUST rules.apps/website: a static Astro 7 site with/brand,/brand.md,/brand/tokens.cssand/llms.txt. The build fails if the page andbrand.mddisagree, if a cursor can wrap alone, if a/brandlink isn't built, or ifsrc/has a color or font literal.jscebu-org), not deployed yet and with no routes.Before merging
/brandpage and each Bisaya phrase (all stilldraft).Not in this PR
The www.jscebu.org swap happens after the full site (project 2) is built.
Verify locally with
pnpm install && pnpm test && pnpm build, and preview withpnpm --filter website dev.