Add BmMT 2026 Volunteer Guide page with tabbed navigation

[devin-ai-integration]

Summary

Adds a new Volunteer Guide page for BmMT 2026 at /events/bmmt-2026/volunteer-guide/ (alias: /volunteer-guide), consolidating content from two source documents (the BmMT 2026 Volunteer Guide PDF and the DQ Pipeline PDF) into a single web page.

The page uses a new standalone.html template that extends base.html but overrides the header and footer blocks to empty, so volunteers cannot navigate to the rest of berkeley.mt — the page is self-contained and intended to be shared via direct URL only.

The volunteer guide file lives at content/volunteer-guide.md (outside the events/ directory to avoid appearing in any events listing) and uses path = "events/bmmt-2026/volunteer-guide" in its frontmatter to achieve the nested URL. The existing bmmt-2026.md page is unchanged — it remains a regular Zola page.

Tabbed navigation

Content is organized into 5 tabs with a navigation bar styled to match berkeley.mt's nav (using ⁄ separators). Tab switching is handled by an inline switchTab() JavaScript function that toggles hidden on .tab-panel divs and updates active button styling.

Tab	Contents
General (default)	Check-in times/locations (with A–L / M–Z room split), post-assignment directions, contacts, schedule, runner info, grader info, activities — all in collapsible {% details %} shortcode dropdowns
Disqualifications	Who handles DQs, immediate DQs, warning-based DQs, escalation process, score consequences, reporting templates (with copy-paste buttons) — each in its own collapsible <details> dropdown
Emergency Procedures	Intro paragraph + fire, earthquake, active shooter, outages, medical emergency, missing participant — each in its own collapsible <details> dropdown
Proctors	Proctor responsibilities and frequently asked questions (student/coach/parent questions proctors may encounter) — each in its own collapsible <details> dropdown
Directory	Placeholder ("coming soon") — content to be provided later

The General tab uses Zola {% details %} shortcodes (which process markdown in the body). The Disqualifications, Emergency Procedures, and Proctors tabs use inline HTML <details> elements because their content lives inside HTML <div> tab panels where markdown is not processed.

Updates since last revision

Content updated to match the finalized BmMT 2026 Volunteer Guide PDF. Key content changes:

• Check-in: Added last names A–L → DWIN 215 / M–Z → DWIN 283 room split
• Where to Go: Removed "Relay Proctors" row; VLSB room 2066 → 2050; "head proctor" → "Proctor Manager"
• Contacts: Major restructuring — Kaden moved to Dwinelle, Eyun moved to Wheeler, Nathan moved to VLSB, Crystal moved to Pauley, Andrew K. added as Pauley Satellite Manager, VLSB room 2062 → 2050
• Runner/Grader Info: Minor wording updates per PDF ("regardless of your role" instead of "while helping as a runner")
• Activities: "Puzzle Hunt with HRT" → "Time Mix-up Puzzle Hunt" (new description); "Cal Origami" now says "origami dragon" (not polyhedra); "Game Board Lounge" → "Games Lounge"; removed "SPS Demo"
• Proctors tab: No longer a placeholder — now contains proctor responsibilities and proctor-facing FAQs (Student ID, room assignments, parent/coach pickup info) from the finalized PDF
• General tab: Removed old Volunteer FAQs and Student FAQs (replaced by the proctor-facing FAQs in the Proctors tab); removed Proctor Info dropdown (moved to Proctors tab)
• Emergency Procedures: Minor wording updates to match finalized PDF; added intro paragraph

base.html changes

The mobile menu (#mobile-menu div) and hamburger button (#mobile-menu-btn) were moved inside the {% block header %} block. This allows standalone.html to remove them by overriding the header block to empty. Both elements are fixed positioned, so moving them inside the max-w-4xl container does not affect their rendering on regular pages.

New templates & shortcodes

File	Purpose
standalone.html	Extends base.html with empty header and footer blocks — no nav, mobile menu, or footer
details.html	Collapsible accordion section using native <details>/<summary> with Tailwind styling and animated chevron
copyable.html	Reusable styled text block with a "Copy" button (uses navigator.clipboard API). Included for future reuse but not used in the volunteer guide itself (inline HTML used instead due to Zola not supporting nested shortcodes)

DQ Reporting Templates

• Warning and DQ templates have a Copy button instead of plain code blocks, making it easy for volunteers to copy-paste into Discord
• The copy button HTML is inlined directly in the markdown rather than using the copyable shortcode, because Zola does not support nesting shortcodes
• Added a note that only people listed in the "Who Handles DQs" section (Crisis Managers, Proctor Managers, Satellite Managers, Dispatcher) may send DQ reports

Review & Testing Checklist for Human

• Contacts table accuracy: The contacts table was significantly restructured (people swapped buildings, rooms changed). Cross-check against the finalized PDF to ensure all names, Discord handles, roles, and building/room assignments are correct.
• Tab switching works correctly: Click each of the 5 tabs and verify the correct content panel appears and the active tab styling updates. Test on both desktop and mobile widths.
• Proctors tab content: The Proctors tab now has real content (responsibilities + FAQs) using inline HTML <details> elements. Verify the dropdowns expand/collapse correctly and text renders properly.
• Shortcodes render inside tab div: The General tab wraps {% details %} shortcodes inside a <div id="tab-general">. Verify that all 7 dropdowns in the General tab expand correctly and their markdown content (tables, bold, lists) renders properly.
• Copy button functionality: On the deployed preview (must be HTTPS), switch to the Disqualifications tab, expand "DQ Reporting Templates", and click the "Copy" buttons. Paste into a text editor to verify the correct template text is copied.

Suggested test plan: Open the volunteer guide at /events/bmmt-2026/volunteer-guide/, verify no nav/footer, click through all 5 tabs. In the General tab, check the contacts table against the finalized PDF. In the Proctors tab, verify the two dropdowns work and content matches the PDF's "Information for Proctors" and "Frequently Asked Questions" sections. Test Copy buttons on HTTPS in the Disqualifications tab. Verify /volunteer-guide redirects correctly. Check mobile nav on a regular page (e.g. homepage) to confirm the base.html changes didn't break anything.

Notes

• The old /bmmt-2026-volunteer-guide URL is not aliased — links to that path will 404.
• The volunteer guide file lives at content/volunteer-guide.md rather than content/events/ to prevent it from appearing in any events listing. The path= frontmatter controls the URL independently of file location.
• No deep-linking to tabs: The tab state is not reflected in the URL hash. If a volunteer shares the page link, it will always open on the General tab. Consider adding location.hash support if this becomes an issue.
• Directory tab still shows "coming soon": The requester indicated content will be provided later.
• The toggleMobileMenu script remains in base.html's <head>, so it is still present on standalone pages. This is harmless (the function simply won't find the elements) but is slightly wasteful.
• Dead shortcode file: templates/shortcodes/copyable.html is included but unused in this PR. Decide whether to keep it for future use or remove it to avoid confusion.
• Old Volunteer/Student FAQs removed: The earlier draft had extensive Volunteer FAQs (leaving room, deliveries, bathroom breaks, Swire) and Student FAQs (desk moving, protractors, fractions, food, etc.) that are not in the finalized PDF and have been removed. If those are still wanted, they would need to be re-added.

Link to Devin session: https://app.devin.ai/sessions/5622665685a34704b136739346b9700d

[devin-ai-integration]

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

• Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
• Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

• Disable automatic comment and CI monitoring

[devin-ai-integration]

Testing Results

Ran the volunteer guide page locally (zola serve) and tested end-to-end. Devin session

Feature Tests (4/4 passed)

• Page structure — Title renders as "BmMT 2026 / Volunteer Guide" (two lines), date shows "Sunday, April 12, 2026", TOC sidebar shows all 7 category headings. All 17 collapsible sections present and collapsed by default.
• Expand/collapse — Clicking "Check-in Times & Locations" expands content with shift details and rotates chevron. Clicking again collapses and returns chevron to right-pointing.
• Content accuracy — Schedule table times match source PDF (e.g. Check-in 7:30–9:00 / 7:45–9:00, Awards 5:00–6:30 / 5:00–6:00). DQ Score Consequences table has 3 correct rows. DQ Reporting Templates show two formatted code blocks.
• Mobile responsiveness — At 400px viewport, dropdowns remain functional, tables fit within viewport, text is readable, hamburger menu visible.

[devin-ai-integration]

Updated Testing Results (Post-Standalone Changes)

Retested locally after converting to standalone template, adding copy buttons, and DQ handler note. Devin session

Feature Tests (3/3 passed)

• Standalone page — No navbar, header, or footer visible. Title "BmMT 2026 Volunteer Guide" renders on a single line. Page is fully self-contained with no links to the rest of berkeley.mt.
• Copy buttons — Warning Template and DQ Template display in styled white boxes with gray borders and "Copy" buttons (not black code blocks). Built HTML contains correct navigator.clipboard.writeText() calls. Note: Clipboard API requires HTTPS (secure context) — will work on the production/preview deployment but not on plain HTTP.
• DQ handler note — Text before the DQ Template reads: "Only people listed in the 'DQ Overview & Who Handles DQs' dropdown above (Crisis Managers, Proctor Managers, Satellite Managers, Dispatcher) may send these in."

Escalation: Copy button runtime untested on HTTP

The navigator.clipboard.writeText() API requires a secure context (HTTPS or localhost). The dev server binds to 0.0.0.0 which Chrome does not treat as secure, so the "Copied!" feedback could not be triggered locally. The copy buttons will work on the HTTPS preview deployment (pr-76.berkeley-mt.pages.dev) and production (berkeley.mt). Please verify on the preview URL.

[devin-ai-integration]

Testing Results (URL Restructuring)

Retested locally after nesting volunteer guide in content/events/bmmt-2026/ folder structure. Devin session

URL Path Tests (5/5 passed)

• Primary URL — /events/bmmt-2026/volunteer-guide/ loads correctly with title "BmMT 2026 Volunteer Guide", standalone layout, all collapsible sections
• /volunteer-guide alias — Redirects to /events/bmmt-2026/volunteer-guide/ correctly
• Old URL removed — /bmmt-2026-volunteer-guide/ returns 404 as expected
• Event page regression — /events/bmmt-2026/ renders correctly as a section with title "Berkeley mini Math Tournament 2026", date, content, TOC sidebar, schedule table
• Nav link — "BmMT 2026" nav link is bold/active on the event page, points to correct URL

[oliver-ni]

can we share code between this and templates/base.html somehow

[devin-ai-integration]

Good call — refactored standalone.html to extend base.html with empty {% block header %} and {% block footer %} overrides instead of duplicating the <head> section. Pushed in the next commit.

[oliver-ni]

what's the point of this template?

[devin-ai-integration]

Moving bmmt-2026.md (a page) into bmmt-2026/_index.md (a section) to create the nested folder structure changed the Zola content type. Sections have different frontmatter than pages — notably date isn't a valid section field, and the default section.html template:

1. Uses section.title instead of page.title
2. Doesn't display a date
3. Appends a section_listing macro at the bottom (which would show the volunteer guide as a child page link)

This template renders the section identically to how it looked as a page — title, date (from extra.date), prose content, and TOC sidebar, without the child page listing.

That said, if you'd prefer a different approach (e.g. just using the default section.html and accepting the differences, or restructuring differently), happy to change it.

[oliver-ni]

i feel like bmmt 2026 should stay a page. is it not possible to have a page in a page

[devin-ai-integration]

Good call — reverted this. bmmt-2026 is back to a regular page (content/events/bmmt-2026.md), and the volunteer guide uses path = "events/bmmt-2026/volunteer-guide" in its frontmatter to get the nested URL. Deleted event-section.html since it's no longer needed.

[oliver-ni]

i mean i don't want it to show up in the events list

[devin-ai-integration]

Moved the file to content/volunteer-guide.md (out of content/events/) so it won't appear in any events listing. The URL is still /events/bmmt-2026/volunteer-guide/ via path= in the frontmatter.