Do Example or Demo Folders Exist at the Root of the Nutlope/hallmark Repository?

No, the Nutlope/hallmark repository does not contain root-level folders named example or demo. Instead, all showcase and test-driven demo content is organized under the site/ directory, specifically in site/examples/ and site/_tests/.

The hallmark project is a library for generating themed landing pages. Rather than cluttering the repository root with demo folders, the maintainers structured example content within the documentation site itself. This approach keeps the root clean while providing fully functional, ready-to-run demonstrations.

Where Example Content Lives in hallmark

The repository places all demonstration content inside the site/ folder. There are two primary locations:

  • site/examples/ — Curated, standalone example sites
  • site/_tests/ — Test-driven demo pages for visual regression

Both directories contain complete HTML/CSS projects that you can open directly in a browser.

The site/examples/ Directory

This folder holds production-quality example sites, each demonstrating different themes, layouts, and components. Every subfolder is a self-contained project with its own index.html, stylesheets, and assets.

Notable examples include:

  • site/examples/hum-07/ — The Bubble example, a guided sourdough app interface
  • site/examples/cobalt-01/ — A cold-themed landing page design

These examples are referenced from the homepage and showcased in an interactive "Examples" rail.

The site/_tests/ Directory

The underscore-prefixed _tests folder contains demo pages that serve double duty as visual regression test assets. These pages verify rendering consistency across the library.

Examples include:

  • site/_tests/09-slow-pour/ — A carefully timed animation demo
  • site/_tests/08-cohort-courses/ — Course landing page variation

Each test demo includes thumbnails and markdown briefs documenting the expected behavior.

How Examples Are Surfaced on the Homepage

The site/index.html file aggregates all examples into a browsable interface. The markup explicitly links to each example folder:

<section class="section section--bleed reveal" id="examples" aria-labelledby="s2">
  <h2 class="section__title">Examples</h2>
  <p class="examples__intro">One-shotted. No shared theme. No shared layout.</p>
  <div class="examples-rail" role="list" aria-label="Example landing pages">
    <a class="ex-card" href="examples/hum-07/" target="_blank" rel="noopener"
       aria-label="Open the Bubble example, a guided sourdough app, Hum, in a new tab">
      <!-- thumbnail or video preview -->
    </a>
    <!-- additional <a class="ex-card"> entries for each example -->
  </div>
</section>

The href="examples/hum-07/" paths confirm that examples are served from site/examples/, not from any root-level folder.

Key Files Supporting the Example System

Path Purpose
site/index.html Homepage with the interactive examples rail
site/examples/ Curated standalone example sites
site/_tests/ Test-driven demo pages and visual regression assets
site/js/main.js JavaScript powering scroll behavior and interactions
site/css/components.css Styles for example cards and layout components

Running Examples Locally

To view any example directly from the repository:

  1. Clone the repository
  2. Navigate to site/examples/[example-name]/
  3. Open index.html in your browser

No build step is required — the examples are static HTML files.

Summary

  • No root-level example/ or demo/ folders exist in Nutlope/hallmark
  • All demo content resides in site/examples/ and site/_tests/
  • Examples are complete, runnable HTML projects showcasing themes and components
  • The homepage (site/index.html) provides a browsable interface to all examples
  • Test demos in site/_tests/ serve as visual regression assets

Frequently Asked Questions

Why doesn't hallmark use a root-level examples folder?

The maintainers chose to embed examples within the site/ directory to keep the repository root uncluttered and to integrate examples naturally with the documentation site. This structure treats examples as part of the project's web presence rather than isolated demos.

Can I contribute a new example to hallmark?

Yes. Based on the existing structure, you would create a new subfolder under site/examples/ with a self-contained index.html and supporting assets. The homepage markup in site/index.html would need updating to include your example in the rail.

Are the test demos in site/_tests/ different from regular examples?

Yes. The _tests/ folder contains pages designed for visual regression testing — they verify that the library renders consistently across changes. While you can view them in a browser, their primary purpose is automated testing rather than user demonstration.

How do I find all available examples without browsing the repository?

Open site/index.html after cloning, or examine the examples rail markup directly. The site/js/main.js file also contains logic for loading and displaying example metadata if the project uses dynamic population.

Have a question about this repo?

These articles cover the highlights, but your codebase questions are specific. Give your agent direct access to the source. Share this with your agent to get started:

Share the following with your agent to get started:
curl -s "https://instagit.com/install.md"

Works with
Claude Codex Cursor VS Code OpenClaw Any MCP Client

Maintain an open-source project? Get it listed too →