Features

By Amr

Enable and configure theme features including diagrams, comments, analytics, and more.

Estimated reading time: 2 minutes

• Share on Reddit
• Share on LinkedIn
• Share on Twitter

• ---

• Page Improvements

• Improve Page Polish content, structure, and presentation of this page
• Expand Page Add depth, examples, and missing sections to this page
• Update Page Refresh outdated content, versions, links, and screenshots
• Fix Page Issue Report a typo, broken link, layout glitch, or content bug
• SEO Optimize Improve discoverability, metadata, and structured data
• Accessibility Audit Audit this page for WCAG 2.1 AA compliance

• ---

• Site Improvements

• UI/UX Improvement Propose a design or UX refinement for the theme
• New Feature Propose a new site-wide feature or capability
• Component Enhancement Improve a Jekyll layout, include, or shared component
• Performance Optimization Improve load time, Core Web Vitals, and asset delivery

Edit on GitHub

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

Feature	Description	Front Matter
Mermaid Diagrams	Flowcharts, sequence diagrams, and more	mermaid: true
MathJax Math	Mathematical equations and formulas	mathjax: true
Giscus Comments	GitHub Discussions-powered comments	comments: true
PostHog Analytics	Privacy-first web analytics	(site-wide)
Keyboard Navigation	Accessibility shortcuts	(always on)

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]]