example-projects

layout	docs
docsOrder	20
handlebars	false

Examples

These projects show how DOMStack's file conventions work in complete sites. Start with the basic example for a tour, or choose a project that demonstrates the feature you need.

Table of Contents

[[toc]]

Bundled examples

A collection of examples can be found in the ./examples folder:

• basic — A broad tour of Markdown, HTML, and TypeScript pages, nested pages and layouts, variables, styles, client bundles, and static assets.
• blog — A blog with derived global data, generated archive pages, redirects, nested layouts, and feed templates.
• css-modules — Using CSS Modules from page code alongside global and page styles.
• default-layout — Building a Markdown site with DOMStack's built-in default layout and no custom layout.
• esbuild-settings — Customizing the browser build through esbuild.settings.
• markdown-settings — Customizing Markdown rendering with markdown-it.settings and Markdown-it plugins.
• nested-dest — Using the project root as src while writing the built site to a nested public directory.
• preact-isomorphic — Rendering with Preact on the server and mounting page-scoped Preact and JSX in the browser.
• react — Configuring React and TypeScript for a page-scoped TSX client.
• static-mpa-offline — A static multi-page app with DOMStack manifests, an offline fallback, precaching, and custom service-worker caching policies.
• static-mpa-workbox-offline — The offline static MPA pattern implemented with Workbox routing, strategies, and precaching.
• string-layouts — Writing layouts that return plain HTML strings instead of using the default renderer.
• tailwind — Integrating Tailwind CSS through an esbuild plugin.
• type-stripping — Using Node.js type stripping for TypeScript pages and layouts, plus a page-scoped TSX client.
• uhtml-isomorphic — Rendering with uhtml-isomorphic on the server and mounting or hydrating UI in the browser.
• worker-example — Bundling and communicating with page-scoped JavaScript and TypeScript Web Workers.

To run an example:

$ git clone git@github.com:bcomnes/domstack.git
$ cd domstack
# install the root package and all example workspaces
$ npm i
# build one example workspace
$ npm --workspace @domstack/basic-example run build

External examples

Here are some additional external examples of larger domstack projects. If you have a project that uses domstack and could act as a nice example, please PR it to the list!

• Blog Example - A personal blog written with DOMStack
• Isomorphic Static/Client App - Pages build from client templates and hydrate on load.
• Zero-Conf Markdown Docs - A npm package with markdown docs, transformed into a website without any any configuration

(Did you make a cool DOMStack website that is open source? PR it to the list!)