Event Horizon — Features Overview

Event Horizon comes with everything a modern blog needs, ready to use out of the box. Here's a full breakdown of what's included.

Dark / Light Mode

The site ships with a dark theme by default. Visitors can toggle to light mode using the button in the header. The preference is saved in localStorage so it persists across visits — and a small inline script prevents any flash of the wrong theme on load.

To change the accent color for each mode, edit app/globals.css:

css
:root {
  --color-primary: #38bdf8;       / dark mode accent /
}
html.light {
  --color-primary: #2563eb;       / light mode accent /
}

Markdown Posts

Write posts as plain .md files in content/blog/. No CMS account, no API keys, no database. The template uses gray-matter to parse frontmatter and a custom renderer to convert Markdown to HTML.

Supported formatting: headings, bold, italic, inline code, code blocks, blockquotes, links, images, and lists.

Tags

Add tags to any post via the frontmatter:

markdown
tags: [tutorial, beginner, nextjs]

Tags are automatically collected and displayed on: - The /tags page — browse all tags with post counts - Individual tag pages at /tags/your-tag - The home page "Browse by Topic" section - Each post page below the content

Table of Contents

Every post automatically gets a floating Table of Contents sidebar (on desktop) built from the ## and ### headings in the post. The active section is highlighted as you scroll.

Reading Progress Bar

A thin progress bar runs across the top of the page on post pages, showing how far through the article the reader is.

Copy Code Button

Every code block gets a copy-to-clipboard button that appears on hover. No configuration needed.

Search

The /search page provides client-side full-text search across all post titles, descriptions, and tags. No external service required — it runs entirely in the browser.

Image Zoom

Click any image inside a post to zoom in with a smooth overlay. Powered by medium-zoom.

Related Posts

At the bottom of each post, up to 3 related posts are shown automatically based on shared tags.

Author Bio Card

A bio card appears below every post showing the author's avatar, name, bio, and social links. All values come from config/site.ts:

ts
author: {
  name: 'Your Name',
  bio: 'Short bio shown below each post.',
  avatar: '/images/avatar.png',
  youtube: 'https://youtube.com/@yourhandle',
  x: 'https://x.com/yourhandle',
},

Newsletter (Beehiiv)

An optional newsletter signup section appears below every post and on the home page. It uses Beehiiv embeds. To enable it:

ts
// config/site.ts
newsletter: {
  enabled: true,
  beehiivFormId: 'your-form-id',
}

Set enabled: false to hide it entirely.

Contact Form

The /contact page has a working contact form powered by Formspree. It includes a honeypot field and a 60-second rate limit for basic bot protection.

ts
// config/site.ts
contact: {
  formspreeId: 'your-form-id',
}

Social Share Buttons

Each post has two sets of share buttons: - Inline — below the post content, next to the tags - Floating — a fixed button on the side of the screen (desktop)

Both share the post title and URL to X (Twitter) and copy the link to clipboard.

RSS Feed

An RSS feed is automatically generated at /rss.xml from all published posts. It includes the title, description, date, author, and tags for each post.

Sitemap

A sitemap is automatically generated at /sitemap.xml and includes all posts, tag pages, and static pages. It's ready to submit to Google Search Console.

Open Graph Images

Dynamic OG images are generated at /og?title=...&description=.... Post pages automatically use the post's coverImage if set, or fall back to the default OG image at public/og-default.png.

Google Analytics

Add your GA4 Measurement ID to .env.local to enable analytics:

bash
NEXTPUBLICGA_ID=G-XXXXXXXXXX

Static Export

The entire site builds to a static out/ folder with npm run build. No server required — deploy to Vercel, Netlify, GitHub Pages, Cloudflare Pages, or any web host.

What's Next?

- Getting Started — set up and deploy in minutes - Content Guide — how to write posts and customize the site - Deployment Guide — step-by-step for every platform