Development Project Page · Build notes for Anthony
One page, built almost entirely from blocks we already have.
9
Existing page builder blocks used, unchanged
3
Blocks with a small, optional field extension
0
New block types
The prototype is the East Oxford Pit page filled in with real content. It replaces today’s /east-oxford-pit (a document list), and the same recipe covers Brechin Quarry and Stittsville II Quarry, which already exist as pages. On the prototype, use Show CMS blocks (bottom right) to label every section with its block.
Page recipe
A page document, pageType: standard, slug kept as east-oxford-pit. Blocks top to bottom:
| Section · anchor | Block | Settings & content | Status | |
|---|---|---|---|---|
| H | Page header | pageHeaderBlock | Image, h1, intro, two buttons (buttonType: anchor → status, contact). headerNavigationSource: custom with nine items that point at anchors on this page. Label slot: project name. Red shapeColor. | Extended |
| 1 | Overview · #overview | statisticsBlock | Eyebrow, heading, two paragraphs, three statisticItems: 44.1 + “ha”, 5, 1 + “M”. | Existing |
| 2 | Location · #location | splitBlock | layout: default, gray, image = licence boundary map, button = full-size map (fileDownload or image link). | Existing |
| 3 | Status · #status | processBlock | Six processItems (applications → open house → review → council → licence → operations). Adds an optional date label and status per item. | Extended |
| 4 | How it works · #how-it-works | contentGridBlock | columns: 3, gray, six items (image, heading, paragraph). Shareable across every pit or quarry page. | Existing |
| 5 | The proposal · #the-proposal | splitBlock | layout: reverseDesktop, contained: true, imageOrientation: portrait. Phasing plan image; content uses h3 + paragraph pairs (Licence, Phasing, Water…). | Existing |
| 6 | Rehabilitation · #rehabilitation | splitBlock | layout: default, gray, rehabilitation plan image, paragraph + bulleted list. | Existing |
| 7 | Studies intro · #technical-studies | splitTextBlock | Heading + one paragraph. | Existing |
| 8 | Studies & documents | resourcesBlock | Nine categories (eight study topics + open house boards), 22 PDFs as resource docs. Adds selected-categories scope and an optional summary + author per category. | Extended |
| 9 | FAQ · #faq | faqBlock | layout: splitAccordion, gray, selectionType: manual → new faqCategory “East Oxford Pit” with 14 faq docs. | Existing |
| 10 | Have your say · #have-your-say | callToActionBlock | Eyebrow “Public Consultation”, image, two anchor buttons (contact, open house boards). | Existing |
| 11 | Contact · #contact | contactBlock | customContactDetails: Craig Bellinger (phone, email). showHeadOffice: true. New form doc “Project Inquiry” with an updates opt-in. | Existing |
The extensions
All three are additive and optional. Leave the new fields empty and each block renders exactly as it does today.
01 · Size S
Anchor links in the page header nav
Today headerNavigationItems only reference other pages. Give each item the same link type switch buttons already have (page or anchor + anchorId).
- On the live site the sub-nav is sticky only inside the page header. For anchor items it has to stick for the whole page, so render it outside the header block (or as a sibling of the page builder).
- Active state from an IntersectionObserver (the existing
opacity-100/opacity-60styles). - Keep the translucent bar over the hero. Once it is stuck over white content, switch to a solid white bar with dark text, because white on a 20% black overlay is unreadable on white sections.
- Add
scroll-margin-topon blocks for the navbar plus the sub-nav (about 120px). anchorIdalready exists onsplitBlockandcontactBlock. Confirm it is on every block, ideally as a shared field.
02 · Size S
Status on process steps
Add two optional fields to processItem:
dateLabel(string): “Spring 2026”, “July 14, 2026”, “[Date TBC]”.status(done·current·upcoming): done shows a check in the red square, current adds a halo and an “In progress” tag, upcoming is an outlined square.
This is the one recurring edit on a project that can run for five years. Megan’s team moves the status forward at each milestone.
03 · Size M
Project-scoped resources
The block supports allCategories today. Add selectionType: selectedCategories (a list of category references), and on resourceCategory an optional summary and author (the consultant).
- Category names will repeat across projects (“Noise” for each pit). Either prefix them (“East Oxford Pit · Noise”) with a display title, or add a
projectreference toresourceand filter by it. The second is cleaner if more than two or three projects are coming. - The sticky category bar needs its
topoffset raised to sit under the sub-nav.
No code
Content only
- New
faqCategoryper project and itsfaqdocs. - New
formdoc “Project Inquiry”: first name, last name, email, street (optional), message, updates opt-in. Confirm routing to the project contact and whether it skips Salesforce. - Upload the 22 PDFs as
resourcefiles. They are currently linked from eastoxfordpit.ca.
Spinning up the next project
- Duplicate the East Oxford Pit page and change the slug.
- Swap the header image, title, intro and the sub-nav label.
- Update the three statistics and the two split blocks (map, phasing plan, rehabilitation plan).
- Set the process steps and their status.
- Create the FAQ category and resource categories, then upload the PDFs.
- Set the project contact in the contact block.
- Remove any block a project doesn’t need. Every block is optional, and the sub-nav only lists what is on the page.
To confirm
- URL: keep
/east-oxford-pitat the root (today’s link keeps working), or nest under Development (for example/development/east-oxford-pit) with a redirect. - eastoxfordpit.ca: point the domain at the new page once it’s live, so notices and signage keep working.
- French: the site has EN / FR. Confirm whether project pages need a French version.
- Email updates: the opt-in needs a list and a sender. It must meet CASL consent wording.
- Photography: the header uses an aerial of another Tomlinson pit. A drone shot of the actual site would be stronger.
Prototype type: Neue Haas Grotesk from the corporate Adobe Fonts kit (uzf7tny); Microgramma loaded from tomlinsongroup.com. Colours, spacing and Tailwind classes mirror the live site.
Content is from eastoxfordpit.ca. Values in [brackets] are placeholders.