The starter template for static blogs, powered by typst and Astro.

• Tags: Categorize your blog posts with tags.
• Search: Search through your blog posts by "title", "description", or "tags".
• Self-Host Fonts: bundle and self-host fonts via @fontsource-variable/inter.
• Link Preview: Link Preview on Open Graph, Facebook, and Twitter.
• SEO: ARIA and Sitemap support.
• Click Stats, Like Reaction, and Comment (Optional): Using an optional backend to store your blog post's click statistics and comments.

Typst-specific features:

• Heading Permalinks and Table of Contents.
• PDF Archives.

pnpm create @myriaddreamin/tylant@latest

All commands are run from the root of the project, from a terminal:

Open using the default setting:

code .vscode/blog.code-workspace

Or customize it:

cp .vscode/blog.code-workspace .vscode/blog.private.code-workspace
code .vscode/blog.private.code-workspace

Install suggseted extensions:

• myriad-dreamin.tinymist, for writing blog posts in typst.
• astro-build.astro-vscode, for developing astro components.

(Untested) Start from GitHub and open your blog repository. You should be able to write articles like you do in local.

Create a new blog post in content/article:

#import "/typ/templates/blog.typ": *
#show: main.with(
  title: "Title of the blog post",
  desc: [This is a test post.],
  date: "2025-04-25",
  tags: (
    blog-tags.misc,
  ),
)

The blog-tags index is defined in content/article/blog-tags.typ to ensure type safety. You can add your own tags by adding a new blog-tags index.

There is a sample blog post in content/article/syntax.typ.

1. Set the URL_BASE in .env. If you would like to keep it in secret, please set it in either .env.{production,development} file in root or Environments.
   • For a GitHub page https://username.github.io/repo, the URL base is /repo/.
2. Change Source's "Build and deployment" to "GitHub Actions" in Page Settings.
3. Push your changes to the main branch and it will automatically deploy to GitHub Pages by CI.

• .env: Configuration read by files, Please check defineConfig/env in astro.config.mjs for schema.
• src/consts.ts,src/components/BaseHead.astro: global metadata, font resource declarations, and the head component.
• src/styles/*: CSS styles.

Improve experience:

• More friendly submodule for forks
• Split Backend Components to a separate repository

Improve website:

• Intro-site Link Hover Preview
• Last Modified Time
• Styling
  • Table
  • Inline Raw
  • Blocky Raw
• Index Page Design
  • Badge
• Comment Reply
• Better theme-frame
• Refactor code to publish packages
  • @myriad-dreamin/blog-template for creating blogs
  • Some components that could be removed (JS required):
    • @myriaddreamin/tylant-search
    • @myriaddreamin/tylant
  • Typst Kit
    • @myriaddreamin/tylant
      • focus on concept: post collections
    • @myriaddreamin/tylant
      • focus on concept: pdf collections
  • People who don't like backend could remove them:
    • @myriaddreamin/tylant-backend-client

The following commands should help you get started for developing and contributing to this repository:

git clone https://github.com/Myriad-Dreamin/tylant
cd tylant
git submodule update --init --recursive
pnpm install
pnpm dev

• This theme is based off of the lovely Bear Blog.
• The astro integration is supported by astro-typst.
• And, the lovely typst.