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 sitessite/_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 interfacesite/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 demosite/_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:
- Clone the repository
- Navigate to
site/examples/[example-name]/ - Open
index.htmlin your browser
No build step is required — the examples are static HTML files.
Summary
- No root-level
example/ordemo/folders exist in Nutlope/hallmark - All demo content resides in
site/examples/andsite/_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:
curl -s "https://instagit.com/install.md" Maintain an open-source project? Get it listed too →