Academic website based on tylant

tylant is a template for a static blog site designed by Myriad Dreamin. Several modifications were made to make it more suitable for an academic website.

Modifications include:

• Publications: list of publications alongside an (optional) blog
• Sidebar: for keeping all your links and profile picture visible/accessible
• Theme Toggle: this was included in tylant but wasn't functioning entirely properly
• Publication sub-categories: quick links in the publication list to search for, e.g., Journal, Conference, etc.

Concerning the content for the list of publications, I set up a pipeline to export data from papis (my reference manager of choice) to the yaml/ folder. Then, the publication-post template is copied into the content/ folder and a line is inserted at the top to refer to a particular yaml file. See scripts/update-content.sh for details.

The original README for tylant is included below.

---

Blog

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

Features

• 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.

Creating a Blog from Template

pnpm create @myriaddreamin/tylant@latest

Commands

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

Command	Action
pnpm install	Installs dependencies
pnpm dev	Starts local dev server at localhost:4321
pnpm build	Build your production site to ./dist/
pnpm preview	Preview your build locally, before deploying
pnpm astro ...	Run CLI commands like astro add, astro check
pnpm astro -- --help	Get help using the Astro CLI

Editor Setup

VS Code

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.

Official Web App

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

Writing

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.

Deploying to GitHub Pages

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.

Customization

• .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.

Todo

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-theme-toggle
  • Typst Kit
    • @myriaddreamin/tylant-typst-kit
      • focus on concept: post collections
    • @myriaddreamin/tylant-pdf-archive
      • focus on concept: pdf collections
  • People who don't like backend could remove them:
    • @myriaddreamin/tylant-backend-client
    • @myriaddreamin/tylant-click
    • @myriaddreamin/tylant-like-reaction
    • @myriaddreamin/tylant-comment

Development

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

Credit

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