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.
• cargo-like — Cargo / Like live demo, a Cargo Collective-inspired website with immersive typography, pinned image and video backdrops, galleries, and reusable slides rendered as both a scrolling homepage and standalone pages, demonstrating complex, highly designed websites built with DOMStack's low-overhead abstractions.
• 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

The cargo-like example uses Git LFS for its media; run git lfs install --local and git lfs pull before building it. See its README for slide authoring, internal APIs, and deployment instructions.

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!)