~/blog/example-blog
cd ..

$ cat metadata.txt

nextjstypescripttailwindreact

$ cat post.md

Building a Terminal-Style Blog with Next.js

Welcome to my blog! In this post, I'll walk you through how I built this terminal-themed blog using modern web technologies.

The Tech Stack

The blog is built with:

  • Next.js for the framework
  • TypeScript for type safety
  • Tailwind CSS for styling
  • Gray Matter for Markdown parsing

Key Features

Terminal-Style UI

The interface mimics a terminal window, complete with:

  • Command prompt-style headers (walt@desktop ~ $)
  • Monospace fonts and terminal colors
  • Status indicators for posts

Dynamic Content

Posts are stored as Markdown files and include:

  • Front matter for metadata
  • Tags for categorization
  • Status indicators (DRAFT/PUBLISHED)
  • Formatted dates

Responsive Design

The blog features:

  • Clean typography
  • Mobile-friendly layout
  • Hover effects on interactive elements
  • Consistent terminal theme across all pages

Code Examples

Here's how we parse markdown files:

typescript
import matter from 'gray-matter';
import fs from 'fs';
import path from 'path';

export function getPostData(id: string) {
  const fullPath = path.join(process.cwd(), 'posts', `${id}.md`);
  const fileContents = fs.readFileSync(fullPath, 'utf8');
  
  const { data, content } = matter(fileContents);
  
  return {
    id,
    content,
    ...data
  };
}

And here's some example CSS for the terminal theme:

css
.terminal-window {
  background-color: #1a1b26;
  border-radius: 8px;
  padding: 1.5rem;
  font-family: 'Fira Code', monospace;
  color: #a9b1d6;
}

.command-prompt::before {
  content: "$ ";
  color: #7aa2f7;
}

Implementation Details

Markdown Processing

We use several plugins to enhance our markdown:

  1. rehype-highlight for code syntax highlighting
  2. remark-gfm for GitHub-flavored markdown
  3. rehype-raw for handling HTML in markdown

Terminal Effects

To achieve the terminal look:

jsx
<div className="terminal-prompt">
  <span className="user">walt</span>
  <span className="separator">@</span>
  <span className="machine">desktop</span>
  <span className="path">~/blog</span>
  <span className="command">$ cat current-post.md</span>
</div>

Media Support

Images are supported with terminal-style frames:

Terminal Screenshot

And videos can be embedded: