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

• ---

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: 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/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