Feature - Add full-page templates collection by markmead · Pull Request #736 · markmead/hyperui

markmead · 2026-07-05T09:17:48Z

Summary

Adds a new templates content collection alongside application/marketing/neobrutalism, with its own listing/detail routes and site nav/search wiring
Ships two full-page templates composed from existing HyperUI components: an analytics dashboard (sidebar, topbar, stat cards, orders table) and a SaaS landing page (header, hero, stats, features, pricing, newsletter, footer)
Adds a "Components used" list on template pages, linking each part of the page back to the real HyperUI component it's built from

Test plan

astro check — no new type errors (pre-existing TypographyMapper.astro errors unrelated to this change)
astro build — all 87 pages build, including both new template pages
Verified rendered "Components used" list resolves correct titles/links for both templates

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

cloudflare-workers-and-pages · 2026-07-05T09:18:17Z

Deploying with Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status	Name	Latest Commit	Preview URL	Updated (UTC)
✅ Deployment successful! View logs	hyperui	`e3719e8`	Commit Preview URL Branch Preview URL	Jul 08 2026, 08:10 PM

Previously each entry linked to the whole category page and showed its title, not the specific variant a template actually copied from. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

The SaaS landing page footer was double-counted: its newsletter form is part of the "Large with newsletter form" footer variant itself, not a separate newsletter-signup component. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

Co-authored-by: Claude Sonnet 5 <noreply@anthropic.com>

…ed section Adds Customers, Orders, Billing, and Settings pages to the analytics dashboard template as separate static pages sharing the same sidebar shell, and drops the Components used section since only templates used it.

Enhances analytics dashboard templates by adding client-side search and status filtering for customers (template 2) and orders (template 3). Rows are now tagged with data attributes, filters update visibility in real time, and each table shows an empty-state row when nothing matches. The compiled `public/component.css` was regenerated to include the new utility classes used by these controls.

Introduces a reusable `TemplateDisclaimer` component and surfaces it on the templates index plus the analytics dashboard and SaaS landing template pages. Updates template descriptions to clearly position them as starting points rather than production-ready builds, and refreshes minor analytics dashboard example details (sidebar class ordering and card sample data).

Add commit/date metadata for `application/charts`, `templates/analytics-dashboard`, and `templates/saas-landing-page` in `src/data/git-metadata.json` so these pages show accurate last-updated information.

Remove the toggle button’s `md:hidden` class so it remains visible anywhere the wrapper is shown (`< lg`), and add `shrink-0` to the wrapper to prevent it from collapsing in flex layouts.

Update the template collection frontmatter for analytics-dashboard and saas-landing-page to use `wrapper: h-[800px]` in both files, making their preview container heights consistent.

…sues Nav and sidebar toggle checkboxes were display:none, taking them out of the tab order so keyboard-only users couldn't open mobile nav or the dashboard sidebar at all. Switched them to sr-only (matching the pattern already used by the settings toggles) and added aria-expanded/aria-controls plus a focus-visible ring on the trigger. Also fixes a semantic-HTML issue (destructive "Delete team" action was an <a>, now a <button>), and a reversed currency format ("30$" instead of "$30") that was present in the templates and in the existing marketing/pricing components. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

Copilot

Pull request overview

Adds a new templates content collection to the HyperUI Astro site, wiring it into navigation and search, and introducing full-page template examples (plus a new application/charts component set) backed by new public/examples HTML.

Changes:

Introduce templates collection with listing + detail routes and SEO constants.
Add new template + charts MDX entries and corresponding example HTML pages (including Chart.js-powered examples).
Wire templates into site nav/search and update supporting types/metadata generation.

Reviewed changes

Copilot reviewed 49 out of 51 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
src/pages/components/templates/index.astro	New templates listing page (collection index).
src/pages/components/templates/[...slug].astro	New templates detail route with static paths.
src/layouts/ComponentPost.astro	Allow `templates` entries to use the shared component post layout.
src/data/git-metadata.json	Add generated metadata entries for new slugs.
src/content/collection/templates/saas-landing-page.mdx	New templates collection entry (SaaS landing page).
src/content/collection/templates/analytics-dashboard.mdx	New templates collection entry (analytics dashboard).
src/content/collection/application/charts.mdx	New application component entry for charts.
src/content.config.ts	Register `templates` as a new content collection.
src/constants/seo.js	Add SEO title/description constants for templates.
src/components/TemplateDisclaimer.astro	New disclaimer component for templates pages.
src/components/SiteHeader.astro	Add Templates link to primary navigation.
src/components/SearchWrapper.astro	Include templates collection results in search.
src/components/RelatedComponents.astro	Extend supported categories to include templates.
src/components/DropdownWrapper.astro	Adjust mobile dropdown wrapper layout behavior.
src/components/DropdownToggle.astro	Adjust dropdown toggle visibility classes.
src/components/DropdownMenu.astro	Add Templates link to dropdown menu.
src/components/ComponentCard.astro	Extend supported entry types to include templates.
scripts/generate-git-metadata.js	Include `templates` in git-metadata generation.
public/examples/templates/saas-landing-page/1.html	Add SaaS landing page full-page template example.
public/examples/templates/analytics-dashboard/1.html	Add analytics dashboard template example (overview).
public/examples/templates/analytics-dashboard/2.html	Add analytics dashboard template example (customers).
public/examples/templates/analytics-dashboard/3.html	Add analytics dashboard template example (orders).
public/examples/templates/analytics-dashboard/4.html	Add analytics dashboard template example (billing).
public/examples/templates/analytics-dashboard/5.html	Add analytics dashboard template example (settings).
public/examples/marketing/pricing/1.html	Fix price formatting in marketing pricing example.
public/examples/marketing/pricing/2.html	Fix price formatting in marketing pricing example.
public/examples/application/charts/1.html	Add charts example (line chart with range toggle + table).
public/examples/application/charts/1-dark.html	Add dark variant for charts example (1).
public/examples/application/charts/2.html	Add charts example (weekly orders bar).
public/examples/application/charts/2-dark.html	Add dark variant for charts example (2).
public/examples/application/charts/3.html	Add charts example (orders status donut).
public/examples/application/charts/3-dark.html	Add dark variant for charts example (3).
public/examples/application/charts/4.html	Add charts example (revenue sparkline stat card).
public/examples/application/charts/4-dark.html	Add dark variant for charts example (4).
public/examples/application/charts/5.html	Add charts example (stacked bar by channel).
public/examples/application/charts/5-dark.html	Add dark variant for charts example (5).
public/examples/application/charts/6.html	Add charts example (combo revenue vs target).
public/examples/application/charts/6-dark.html	Add dark variant for charts example (6).
public/examples/application/charts/7.html	Add charts example (this year vs last year).
public/examples/application/charts/7-dark.html	Add dark variant for charts example (7).
public/examples/application/charts/8.html	Add charts example (radar chart).
public/examples/application/charts/8-dark.html	Add dark variant for charts example (8).
public/examples/application/charts/9.html	Add charts example (polar area chart).
public/examples/application/charts/9-dark.html	Add dark variant for charts example (9).
public/examples/application/charts/10.html	Add charts example (scatter plot).
public/examples/application/charts/10-dark.html	Add dark variant for charts example (10).
public/examples/application/charts/11.html	Add charts example (bubble chart).
public/examples/application/charts/11-dark.html	Add dark variant for charts example (11).
package.json	Add `chart.js` dependency.
pnpm-lock.yaml	Lockfile updates for `chart.js` addition.

Files not reviewed (1)

pnpm-lock.yaml: Generated file

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

+    <TriangleAlert class="mt-0.5 size-6 shrink-0 text-gray-500" />
+
+    <div>
+      <h2 class="text-xl font-medium">Staring point — not a finished product</h2>


    "@astrojs/sitemap": "3.7.3",
    "@lucide/astro": "^1.21.0",
    "astro": "7.0.3",
+    "chart.js": "^4.5.1",
    "wrangler": "^4.105.0"


+<ComponentPost {...collection.data}>
+  <Content components={{ a: ExternalLink }} />
+</ComponentPost>


markmead and others added 7 commits July 5, 2026 10:15

Update - Fix missing space in "Dark Mode" count label

5936928

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

Feature - Register templates as a new component collection

c7c6750

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

Feature - Add templates page routes

29503b9

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

Feature - Surface templates in site navigation and search

5fdb927

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

Feature - Add components used list to template pages

244c1a8

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

Feature - Add analytics dashboard and SaaS landing page templates

9230e9b

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

Chore - Regenerate compiled component CSS

4553465

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

markmead mentioned this pull request Jul 5, 2026

Feature - Add Chart.js-powered charts collection #737

Merged

5 tasks

markmead and others added 4 commits July 5, 2026 10:36

Bugfix - Link "Components used" entries to the specific variant used

f764367

Previously each entry linked to the whole category page and showed its title, not the specific variant a template actually copied from. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

Feature - Add Chart.js-powered charts collection (#737)

684040a

Co-authored-by: Claude Sonnet 5 <noreply@anthropic.com>

markmead marked this pull request as draft July 8, 2026 08:43

markmead marked this pull request as ready for review July 8, 2026 08:46

markmead and others added 6 commits July 8, 2026 09:57

Update git metadata entries

7f379f5

Add commit/date metadata for `application/charts`, `templates/analytics-dashboard`, and `templates/saas-landing-page` in `src/data/git-metadata.json` so these pages show accurate last-updated information.

Fix dropdown toggle on medium screens

51a27c3

Remove the toggle button’s `md:hidden` class so it remains visible anywhere the wrapper is shown (`< lg`), and add `shrink-0` to the wrapper to prevent it from collapsing in flex layouts.

Normalize template wrapper heights

6d71962

Update the template collection frontmatter for analytics-dashboard and saas-landing-page to use `wrapper: h-[800px]` in both files, making their preview container heights consistent.

markmead requested a review from Copilot July 9, 2026 09:03

Copilot started reviewing on behalf of markmead July 9, 2026 09:03 View session

Copilot AI reviewed Jul 9, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feature - Add full-page templates collection#736

Feature - Add full-page templates collection#736
markmead wants to merge 17 commits into
mainfrom
feature/templates-collection

markmead commented Jul 5, 2026

Uh oh!

cloudflare-workers-and-pages Bot commented Jul 5, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

markmead commented Jul 5, 2026

Summary

Test plan

Uh oh!

cloudflare-workers-and-pages Bot commented Jul 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Deploying with Cloudflare Workers

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

cloudflare-workers-and-pages Bot commented Jul 5, 2026 •

edited

Loading