Tutorial
Last modified 1710973847000 ago by razzle
2 min read
Overview
This page is a short tutorial on how to use this site. An interactive CLI is available to help you author new content. To use it, run the following command:
bun hack/new.ts
Front Matter
For configuring routing, metadata, and other page-specific settings, this site uses YAML front matter. Front matter is a block of YAML at the top of a page that is surrounded by --- delimiters. For example, the front matter for this page looks like:
---
title: Tutorial
slug: tutorial
---
title: (required) The title of the page. This is used in the<title>tag and in the navigation.slug: (required) The URL path for the page.layout: (optional) The layout to use for the page. Options:default,slides. This controls whether the page is rendered as a normal page or as a slide deck.
Markdown
This site uses markdown-it for rendering Markdown and follows the CommonMark specification.
Images
For right now, images are stored in the static directory, and placed within a directory named the same as the page’s slug. To include an image in a page, use the following syntax:
<!-- The below is an _absolute_ link to the image -->
Slides
This site uses reveal.js for rendering slides. To create a slide deck, create a page with the slides layout and use the following syntax:
reveal.js allows for 2-dimentional slide decks. To place a slide “under” another slide, use --- (3) delimiters. To place a slide “next to” another slide, use ----- (5) delimiters.
---
title: My Slide Deck
slug: my-slide-deck
layout: slides
---
# Slide 1
---
# Under slide 1
-----
# Slide 2
-----
# Slide 3
See an better example at content/slides.md.
All Markdown syntax is supported in slides. See the reveal.js documentation for more information.