Features
Enable and configure theme features including diagrams, comments, analytics, and more.
Table of Contents
Features
The Zer0-Mistakes theme includes several optional features that enhance your site. Each feature can be enabled per-page using front matter.
Available Features
Every feature has its own guide. “Enable” shows how to turn it on — page front
matter, a _config.yml setting, or “always on” (built into the theme).
Content & authoring
| Feature | Description | Enable |
|---|---|---|
| Mermaid Diagrams | Flowcharts, sequence/class diagrams from text | mermaid: true |
| MathJax Math | LaTeX-style equations, rendered in the browser | mathjax: true |
| Jupyter Notebooks | Publish .ipynb notebooks as pages |
drop into pages/_notebooks/ |
| Code Copy Button | One-click copy on every code block | always on |
| AI Preview Images | Auto-generate social/OG images for posts | _config.yml |
Navigation & accessibility
| Feature | Description | Enable |
|---|---|---|
| Sidebar Navigation | Collapsible docs sidebar with scroll spy | sidebar.nav |
| Table of Contents | Auto “On this page” list with active highlighting | toc: true |
| Mobile TOC Button | Floating TOC button on phones | always on |
| Breadcrumbs | Hierarchical trail + Schema.org markup | breadcrumbs: true |
| Back to Top | Floating scroll-to-top button | always on |
| Dynamic Navigation | Auto-builds the navbar from collections | automatic fallback |
| Navigation Architecture | The ES6 modules behind the nav system | always on |
| Keyboard Navigation | Shortcuts + focus management (press ?) |
always on |
| Skip to Content | WCAG skip link for keyboard users | always on |
Appearance & admin
| Feature | Description | Enable |
|---|---|---|
| Dark / Light Mode | Light, dark, and auto color modes + 9 skins | always on |
| Admin Dashboards | Config, stats, theme, and build dashboards | layout: admin |
| Vendored Assets | Bootstrap/Icons/Mermaid committed, no CDN | build-time |
| Theme Version | Surface the installed theme version | automatic |
Engagement & analytics
| Feature | Description | Enable |
|---|---|---|
| Site Search | Client-side search modal (press /) |
always on |
| Giscus Comments | GitHub Discussions-powered comments | comments: true + giscus: |
| PostHog Analytics | Privacy-first analytics, consent-gated | posthog: (production) |
| AI Chat Assistant | Page-aware Claude chat widget | ai_chat.enabled |
| Copilot / AI Integration | Repo-wide AI coding-agent instructions | repo config |
Privacy & resilience
| Feature | Description | Enable |
|---|---|---|
| Cookie Consent | GDPR/CCPA banner gating analytics | site-wide |
| Smart 404 | Deployment-aware “page not found” with search | automatic |
Quick Enable
Per-Page Features
Add to your page’s front matter:
---
title: "My Page"
mermaid: true # Enable Mermaid diagrams
mathjax: true # Enable MathJax formulas
comments: true # Enable Giscus comments
---
Site-Wide Features
Configure in _config.yml:
# Analytics (production only)
posthog:
enabled: true
api_key: "your-api-key"
# Comments
giscus:
enabled: true
data-repo-id: "YOUR_REPO_ID"
data-category-id: "YOUR_CATEGORY_ID"
# Diagrams
mermaid:
src: '/assets/vendor/mermaid/mermaid.min.js'
Feature Guides
Content Enhancement
- Mermaid Diagrams — Create flowcharts, sequence diagrams, class diagrams, and more using text-based syntax
- MathJax Math — Display mathematical equations using LaTeX notation
User Engagement
- Giscus Comments — Add GitHub Discussions-powered comments to your pages
- PostHog Analytics — Privacy-first analytics with custom event tracking
Accessibility
- Keyboard Navigation — Comprehensive keyboard shortcuts and accessibility features
Conditional Loading
Features are loaded conditionally to optimize performance:
- Mermaid — Only loaded on pages with
mermaid: true - MathJax — Only loaded on pages with
mathjax: true - Analytics — Only loaded in production environment
- Comments — Only shown when enabled and
comments != false
Disabling Features
Per-Page
---
comments: false # Disable comments on this page
---
Site-Wide (Development)
In _config_dev.yml:
posthog:
enabled: false
giscus:
enabled: false
Next Steps
Choose a feature to learn more:
- Mermaid Diagrams — Visual documentation
- MathJax Math — Mathematical notation
- Giscus Comments — User engagement
- PostHog Analytics — Site insights
See also
- [[Customization]]
- [[Bootstrap Integration]]
- [[Analytics]]
- [[SEO]]