mirror of
https://github.com/hanzoai/templates-blueprints.git
synced 2026-10-01 00:43:09 +00:00
zeekayandHanzo Dev
0d70ce83e9
The gallery could only search and deploy: a card had no way in, so the only way
to learn what an app actually was meant leaving for GitHub. Cards now open
#app=<id> — a real URL, so a specific app can be linked, shared and reloaded,
and Back closes it because the hash is the single source of truth for what is
open.
The panel answers what a tile cannot: which containers a deploy starts and
which images they pull, read from the blueprint's own docker-compose.yml rather
than restated from the catalog row. Verified against the real corpus — 400 of
400 blueprints parse, 812 services, none silently empty. A blueprint without
compose simply omits the section instead of implying nothing runs.
Two things the catalog needed and had nowhere to put:
- "Add it to your repo" — the markdown badge a maintainer pastes into their
README so their own users can deploy in one click. badge.svg ships here so
the snippet is not a dead link, and it carries no external font because
READMEs render where remote CSS is blocked.
- "Suggest an app" — submitting was previously undocumented; it is now a
prefilled issue from the catalog itself and from the footer.
Native <dialog>, so focus trapping, Esc and inertness are the platform's job.
Still no framework, still no innerHTML: the panel is built with the DOM API, so
a hostile description cannot inject.
Co-authored-by: Hanzo Dev <[email protected]>
130 lines
7.4 KiB
HTML
130 lines
7.4 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>Hanzo OSS — deploy the open-source internet in one click</title>
|
|
<meta name="description" content="The world runs on open source. Browse and one-click deploy 1,030 apps — Postgres, Ghost, n8n, Grafana, Ollama — on your machine or Hanzo Cloud. Build one, and earn a share when the world runs it." />
|
|
<meta name="color-scheme" content="light dark" />
|
|
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='7' fill='%230a0a0b'/%3E%3Cpath d='M10 8v16M22 8v16M10 16h12' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E" />
|
|
<link rel="stylesheet" href="/catalog.css" />
|
|
<script src="/app.js"></script>
|
|
</head>
|
|
<body>
|
|
<!-- header -->
|
|
<header class="top">
|
|
<a class="brand" href="https://hanzo.ai" aria-label="Hanzo">
|
|
<svg class="mark" viewBox="0 0 32 32" aria-hidden="true"><rect width="32" height="32" rx="7" fill="currentColor"/><path d="M10 8v16M22 8v16M10 16h12" stroke="var(--bg)" stroke-width="2.4" stroke-linecap="round"/></svg>
|
|
<span>Hanzo <span class="sub">OSS</span></span>
|
|
</a>
|
|
<nav class="topnav" aria-label="Primary">
|
|
<a class="hide-sm" href="#explore">Explore</a>
|
|
<a class="hide-sm" href="#makers">Earn</a>
|
|
<a class="hide-sm" href="https://docs.hanzo.ai" target="_blank" rel="noopener">Docs</a>
|
|
<a class="cta" href="https://platform.hanzo.ai" target="_blank" rel="noopener">Deploy console</a>
|
|
<button id="theme-toggle" class="icon-btn" type="button" aria-label="Toggle color theme" title="Toggle theme">
|
|
<svg class="sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg>
|
|
<svg class="moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"/></svg>
|
|
</button>
|
|
</nav>
|
|
</header>
|
|
|
|
<!-- HERO — the story, in three seconds. Static: paints instantly, survives any data failure. -->
|
|
<section class="hero">
|
|
<p class="eyebrow">The open-source cloud</p>
|
|
<h1>The world runs on open source.<br /><span class="dim">Deploy any of it in one click.</span></h1>
|
|
<p class="lead">
|
|
Postgres, Ghost, n8n, Grafana, Ollama — <strong id="count">1,030</strong> apps,
|
|
packaged and ready to run on your machine, your GPU, your cluster.
|
|
Build one, and earn when the world runs it.
|
|
</p>
|
|
<div class="cta">
|
|
<a class="btn primary" href="#explore">Browse apps</a>
|
|
<a class="btn ghost" href="#makers">How makers earn →</a>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- PHILOSOPHY — what Hanzo believes. Static. -->
|
|
<section class="beliefs" aria-label="What we believe">
|
|
<div class="belt">
|
|
<article class="belief">
|
|
<h3>One binary. One API.</h3>
|
|
<p>The whole network is the cloud — no control planes to babysit, no YAML to appease.</p>
|
|
</article>
|
|
<article class="belief">
|
|
<h3>Deploy anything. Own everything.</h3>
|
|
<p>Your data, your keys, your machine. Self-host it or run it on Hanzo. Leave anytime — nothing's locked in.</p>
|
|
</article>
|
|
<article class="belief">
|
|
<h3>Earn when others run it.</h3>
|
|
<p>Ship a template, and keep a share of the compute it earns — paid out automatically. Open source that pays its makers.</p>
|
|
</article>
|
|
</div>
|
|
<p class="signature">Open by default. Building in the open since Techstars '17.</p>
|
|
</section>
|
|
|
|
<!-- MAKERS — the economic story, first-class. Static. -->
|
|
<section class="makers" id="makers">
|
|
<p class="eyebrow">For makers</p>
|
|
<h2>Open source that pays.</h2>
|
|
<p class="makers-lead">
|
|
Every app here is somebody's work. When your project runs on Hanzo you keep a
|
|
<strong>share of the compute it earns</strong> — metered per second, paid out automatically.
|
|
No invoices. No gatekeepers.
|
|
</p>
|
|
<ol class="steps">
|
|
<li><span class="step-n">01</span> Claim your GitHub repo</li>
|
|
<li><span class="step-n">02</span> People deploy it</li>
|
|
<li><span class="step-n">03</span> You earn, automatically</li>
|
|
</ol>
|
|
<a class="btn primary" href="https://console.hanzo.ai/authors">Claim your project →</a>
|
|
</section>
|
|
|
|
<!-- EXPLORE — the searchable 1,030-app launcher. JS-rendered from /meta.json. -->
|
|
<main id="explore">
|
|
<div class="section-head">
|
|
<h2>Explore the catalog</h2>
|
|
<p>Search <span id="count-2">1,030</span> open-source apps, or filter by category — one click sends any of them to Hanzo Cloud.</p>
|
|
<p class="submit-line">
|
|
Missing something?
|
|
<a href="https://github.com/hanzoai/templates-blueprints/issues/new?title=Add%20app%3A%20&labels=new-app&body=App%20name%3A%0ARepo%3A%0AWhy%20it%20belongs%3A%0A" target="_blank" rel="noopener">Suggest an app</a>
|
|
or
|
|
<a href="https://github.com/hanzoai/templates-blueprints" target="_blank" rel="noopener">open a pull request</a>.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="search-wrap">
|
|
<svg class="glass" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>
|
|
<input id="q" class="search" type="search" placeholder="Search apps — postgres, ghost, n8n, grafana, ollama…" autocomplete="off" autocapitalize="off" spellcheck="false" aria-label="Search open-source apps" />
|
|
<span class="kbd" aria-hidden="true">/</span>
|
|
</div>
|
|
<p class="result-count" id="result-count" role="status" aria-live="polite"></p>
|
|
<div class="tags" id="tags" role="group" aria-label="Filter by category"></div>
|
|
|
|
<div id="grid" class="grid" aria-label="Open-source apps" aria-live="polite"></div>
|
|
<p id="empty" class="empty" hidden>No apps match — try another term.</p>
|
|
<button id="more" class="more" type="button" hidden>Load more</button>
|
|
</main>
|
|
|
|
<!-- DETAIL — one app's page, addressable as #app=<id> so it can be linked and shared. -->
|
|
<dialog id="detail" class="detail" aria-label="App details">
|
|
<button id="detail-close" class="icon-btn detail-close" type="button" aria-label="Close">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M18 6 6 18M6 6l12 12"/></svg>
|
|
</button>
|
|
<div id="detail-body"></div>
|
|
</dialog>
|
|
|
|
<!-- footer -->
|
|
<footer class="foot">
|
|
<span>Sourced from the open-source Dokploy, Coolify, CapRover, CasaOS & Runtipi catalogs — each app keeps its upstream license.</span>
|
|
<span class="links">
|
|
<a href="/meta.json">Catalog API</a>
|
|
<a href="https://platform.hanzo.ai" target="_blank" rel="noopener">Hanzo PaaS</a>
|
|
<a href="https://docs.hanzo.ai" target="_blank" rel="noopener">Docs</a>
|
|
<a href="https://github.com/hanzoai/templates-blueprints/issues/new?title=Add%20app%3A%20&labels=new-app" target="_blank" rel="noopener">Suggest an app</a>
|
|
<a href="https://github.com/hanzoai" target="_blank" rel="noopener">GitHub</a>
|
|
</span>
|
|
</footer>
|
|
</body>
|
|
</html>
|