The following examples are meant to show some of the things you can build with a yagss site. They also show some patterns and quirks for how data is passed around the build system. This is very much a work in progress.

This is an example article showing how to include static components like images in them.

One of the most powerful features of Yagss is how it automatically scales jpeg images in the source directory and parses their metadata, making that metadata availale to the rendering context.

This is simply a collection of snippets of text written in markdown, interspersed with snippets of yaml specifying which template to use.

There is no need for hydration because the DOM never changes after the build process is run.

This is an example article showing how to include interactive charts using the recharts library.

Each figure can be self-contained because each element can have its own call to ReactDOM.hydrate. In other words, this doesn’t need to be a “single page application” where there is one root element and every child is rendered by React. I prefer thinking of these as “single div applications.”

Eventually we will want to migrate this example to something that makes charts that are usable prior to calling hydrate.

This is an example article showing how to include videos encoded as HLS.

Each video is its own instance of a React-based video player.