Getting started with the Pixelversed blog

Welcome to the Pixelversed blog, This guide will walk you through everything you need to know about creating, managing, and publishing blog posts on our platform.

Quick start

Posts are written in Markdown (.md) files. Posts are automatically discovered and rendered with full SSG support (Static Site Generation), and served as static HTML for the best performance.

Writing your first post

1. Create a new file

Navigate to src/routes/blog/posts/ and create a new Markdown file with .md extension:

src/routes/blog/posts/my-post.md

2. Add frontmatter

Every post must include a frontmatter field at the top:

---
title: 'template'
date: '2025-10-05'
description: 'template file'
author: 'Pixelversed Team'
category: 'Documentation'
image: '/image.png'
isDraft: true
pinned: false
toc: true
---

3. Write your content

After the frontmatter, write your content in Markdown:

# My post title
 
This is a paragraph with **bold** and _italic_ text.
 
## Code examples
 
Here's some JavaScript:
 
\`\`\`javascript
const greeting = "Hello, World!";
console.log(greeting);
\`\`\`
 
## Lists
 
- Item one
- Item two
- Item three

Content features

The blog supports full CommonMark Markdown plus extensions, and it’s styled using Tailwind CSS — specifically the Typography plugin. Current theme is prose-zinc

see the Typography guide

Blog features

1. Category filtering

Readers can filter posts by category using the tag buttons on the main blog page. The "All" button shows all posts.

2. Pagination

The blog displays all featured posts and 6 latest posts initially, with a "Load More" button appearing when there are more posts.

3. File naming

Your filename becomes the post URL slug:

• hello-world.md → /blog/hello-world
• getting-started.md → /blog/getting-started
• my-first-post.svx → /blog/my-first-post

Use lowercase with hyphens for best SEO.

4. Pinned posts

Pinned posts always appear at the top of the blog list, regardless of publication date.

5. Table of contents

If toc: true is set in frontmatter, a dynamic Table of Contents will automatically be generated for your post.

Best practices

1. Image guidelines

• Recommended size: 1200x630px (16:9 ratio)
• Format: JPG, PNG, WEBP or SVG
• Location: /static/ or use a URL
• Size: Keep file sizes under 200KB for performance

Troubleshooting

1. Post not appearing?

• Check that you have all required front matter fields.
• Check the date format is: YYYY-MM-DD.
• And ensure isDraft is not set to true.

2. Images not loading?

• Verify the image path starts with /
• Check the file exists in /static/
• Ensure correct file extension in frontmatter

3. Code not highlighting?

• Make sure you're using triple backticks
• Specify the language: ```javascript
• Check the language is supported by Shiki

4. Build errors?

• Run bun run dev to see detailed errors
• Check for syntax errors in frontmatter
• Ensure all frontmatter fields are properly quoted