Blog

SveltePak uses mdsvex to render the blog posts.

A Markdown preprocessor for Svelte. Markdown in Svelte.

https://mdsvex.pngwn.io/

The blog posts are located in the /src/blog directory. Each blog post is a .md file that contains the content of the blog post.

Create a new blog post

You can create a new blog post by creating a new .md file in the /src/modules/blog directory.

The file name will be the url slug of the post. For example, if you want the url to be https://your-app.com/blog/my-first-post, then the file name should be my-first-post.md.

The file must start with a frontmatter block, which is a yaml-like block that contains metadata about the post. T he frontmatter block should be surrounded by three dashes (---).

---
title: My awesome blog post
thumbnail: /images/blog/cover.png
description: This is a description of my blog post
date: 2024-01-01
categories: first, second
published: true
---

After this you can write your desired content in markdown. This is the basic structure and you can add or delete fields as needed.

You may also want to update the types in trpc/routes/blog.ts to reflect the new fields you added to the frontmatter.

export type Post = {
  title: string;
  slug: string;
  thumbnail: string;
  description: string;
  date: string;
  categories: string;
  published: boolean;
};

Note that the published field is used to determine if the post should be visible on the blog page.

Metadata Editor (AI Support)

SveltePak comes with a metadata editor that uses AI to suggest metadata for your blog posts. This functionality is automatically visible for SuperAdmin users.