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, post-assignment directions, contacts, schedule, role-specific info (proctor/runner/grader/activities), volunteer & student FAQs — 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	Fire, earthquake, active shooter, outages, medical emergency, missing participant — each in its own collapsible <details> dropdown
Proctors	Placeholder ("coming soon") — content to be provided later
Directory	Placeholder ("coming soon") — content to be provided later

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

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

• 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. Note that the tab bar wraps on narrow screens — verify it's still usable.
• Shortcodes render inside tab div: The General tab wraps {% details %} shortcodes inside a <div id="tab-general">. Zola processes shortcodes before markdown, so this should work, but verify that all 10 dropdowns in the General tab expand correctly and their markdown content (tables, bold, lists) renders properly.
• Mobile menu on regular pages: The mobile menu and hamburger button were moved inside {% block header %} in base.html. Verify mobile nav still works correctly on regular pages (e.g. the homepage). Both elements are fixed positioned so they should render identically, but confirm no z-index or layout issues.
• 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.
• Events listing: Confirm the volunteer guide does not appear in any events listing or section page.

Suggested test plan: Open the BmMT 2026 event page at /events/bmmt-2026/ and confirm it looks the same as production. Test mobile nav on a regular page. Then open the volunteer guide at /events/bmmt-2026/volunteer-guide/, verify no nav/footer, click through all 5 tabs, expand dropdowns in each tab (especially General to confirm shortcodes render), test Copy buttons on HTTPS in the Disqualifications tab, and resize to mobile width to check the tab bar wrapping. Also verify /volunteer-guide redirects correctly.

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.
• Proctors and Directory tabs show "coming soon": These are visible placeholder tabs. 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.
• "Power round" vs "Puzzle Round": The Student FAQ "Can we move desks together?" answer was changed from "power round" (in the source PDF) to "Puzzle Round" since this is BmMT, not BMT. Confirm this is the intended terminology.
• 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.

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.