Event Horizon Content Guide

This guide covers everything you need to manage content on your Event Horizon site. Most tasks don't require any coding knowledge.

Writing a New Post

All posts live in the content/blog/ folder as .md files.

1. Create a new file — e.g. content/blog/my-post.md 2. The filename becomes the URL: my-post.md → /blog/my-post 3. Use lowercase letters, numbers, and hyphens only

Good filenames: - getting-started-with-nextjs.md - how-to-deploy-to-vercel.md

Bad filenames: - My First Post.md — no spaces or capitals

Post Frontmatter

Every post starts with a frontmatter block between --- lines:

markdown
---
title: How to Deploy Your Site to Vercel
description: A step-by-step guide to deploying your Next.js site to Vercel for free.
date: 2025-01-01
author: Your Name
tags: [tutorial, deployment, beginner]
coverImage: https://images.unsplash.com/photo-xxx?w=1200&h=630&fit=crop
published: true
---
Your content starts here...

Frontmatter Fields

title — required. Keep under 60 characters for SEO.

description — required. 120–160 characters. Shown in search results and post cards.

date — required. Format: YYYY-MM-DD.

author — optional. Shown in the post header. Falls back to siteConfig.author.name if not set.

tags — optional. Lowercase array: [tutorial, beginner]. Use hyphens for multi-word tags: [deep-dive].

coverImage — optional. Full URL to a 1200×630px image. Falls back to a gradient if not set.

published — optional. Set to false to hide a draft without deleting the file.

Free Cover Image Sources

- Unsplash — append ?w=1200&h=630&fit=crop to any image URL - Pexels

Markdown Formatting

Headings

markdown
Main Section
Subsection

Use ## and ### only. The post title is already an h1. Both levels appear in the Table of Contents.

Text

markdown
bold
italic
inline code

Code Blocks

`markdown

bash npm install npm run dev

`

Supported languages: bash, js, ts, jsx, tsx, css, html, json, markdown, python, and more.

Links

markdown
link text

Images

markdown

Images are automatically styled with rounded corners. Click any image to zoom in.

Blockquote

markdown
> This is a tip or important note.

Lists

markdown
- Item one
- Item two
- Item three

Customizing the Site

Site Name, URL, and Description

Edit config/site.ts:

ts
name: 'My Blog',
title: 'My Blog — Articles & Tutorials',
description: 'Your site description here.',
url: 'https://yourdomain.com',
domain: 'yourdomain.com',

This controls the site name everywhere: header, footer, metadata, OG tags, RSS feed, sitemap, and all legal pages.

Author Bio

Edit 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',
},

Place your avatar at public/images/avatar.png. Set youtube or x to '' to hide that link.

Hero Section

Edit the hero object in config/site.ts:

ts
hero: {
  badge: 'New articles published regularly',
  headline: 'Ideas worth\nreading.',
  headlineAccent: 'reading.',
  subheading: 'Practical articles, guides, and tutorials.',
  ctaPrimary: { label: 'Browse all posts →', href: '/blog' },
  ctaSecondary: { label: 'Start here', href: '/tags/beginner' },
},

Topic Cards

Edit the topics array in config/site.ts:

ts
topics: [
  { icon: '🚀', title: 'Getting Started', desc: '...', href: '/tags/beginner' },
  { icon: '📖', title: 'Tutorials', desc: '...', href: '/tags/tutorial' },
],

Add, remove, or reorder cards as needed.

Navigation

Edit the nav array in config/site.ts:

ts
nav: [
  { href: '/', label: 'Home' },
  { href: '/blog', label: 'Blog' },
  { href: '/tags', label: 'Tags' },
  { href: '/about', label: 'About' },
  { href: '/contact', label: 'Contact' },
],

Accent Color

Edit app/globals.css:

css
:root {
  --color-primary: #38bdf8;       / dark mode /
  --color-primary-hover: #0ea5e9;
}
html.light {
  --color-primary: #2563eb;       / light mode /
  --color-primary-hover: #1d4ed8;
}

One variable controls links, hover states, active TOC items, and highlights across the entire site.

Newsletter

Edit config/site.ts:

ts
newsletter: {
  enabled: true,
  beehiivFormId: 'your-form-id',
  heading: 'Stay in the loop',
  description: 'Get new posts delivered straight to your inbox.',
},

To get your Beehiiv form ID: log in to Beehiiv → publication settings → Embed → copy the form ID.

Set enabled: false to hide the newsletter section entirely.

About Page

Edit app/about/page.tsx directly. Key sections: - Opening paragraph — describe your site's mission - "What You'll Find Here" list — update the bullet points - Contact paragraph at the bottom

Legal Pages

| Page | File | |---|---| | Privacy Policy | app/privacy/page.tsx | | Terms of Service | app/terms/page.tsx | | Disclaimer | app/disclaimer/page.tsx | | Cookie Policy | app/cookies/page.tsx |

Each file has a date constant at the top — update it when you make changes.

Quick Reference

| Task | Where | |---|---| | Add a new post | content/blog/your-post.md | | Edit site name, URL, author | config/site.ts | | Edit hero & topic cards | config/site.ts | | Edit navigation | config/site.ts → nav | | Enable newsletter | config/site.ts → newsletter | | Enable contact form | config/site.ts → contact | | Edit about page | app/about/page.tsx | | Change accent color | app/globals.css | | Edit legal pages | app/privacy/, app/terms/, etc. |