From 46ad64d5aaae8bbe381ec579500ab9b4267fa07c Mon Sep 17 00:00:00 2001
From: ayo <ayo@ayco.io>
Date: Tue, 21 Jul 2026 22:30:42 +0200
Subject: [PATCH] docs: surface create-wcb in the getting started guide and
 homepage

---
 docs/src/components/Hero.astro                | 131 ++++++++++++++++--
 .../content/docs/guides/getting-started.mdx   |  21 +++
 docs/src/content/docs/index.mdx               |   4 -
 3 files changed, 137 insertions(+), 19 deletions(-)

diff --git a/docs/src/components/Hero.astro b/docs/src/components/Hero.astro
index 2564614..1874c21 100644
--- a/docs/src/components/Hero.astro
+++ b/docs/src/components/Hero.astro
@@ -1,6 +1,8 @@
 ---
 // Override of Starlight's Hero so the splash page's visual slot holds the
-// live size chart instead of an image. Structure and styles mirror
+// live size chart instead of an image, and the actions row carries a
+// copyable `npm create wcb@latest` command chip beside the buttons
+// (patterned on astro.build's hero). Structure and styles mirror
 // @astrojs/starlight/components/Hero.astro (0.39.1) — a page that declares
 // `hero.image` still gets the stock image treatment; pages without one get
 // the chart.
@@ -10,6 +12,7 @@ import SizeChart from './SizeChart.astro'
 
 // mirrors starlight's own constant; not a public export
 const PAGE_TITLE_ID = '_top'
+const CREATE_COMMAND = 'npm create wcb@latest'
 
 const { data } = Astro.locals.starlightRoute.entry
 const { title = data.title, tagline, image, actions = [] } = data.hero || {}
@@ -55,23 +58,72 @@ if (image) {
       <h1 id={PAGE_TITLE_ID} data-page-title set:html={title} />
       {tagline && <div class="tagline" set:html={tagline} />}
     </div>
-    {
-      actions.length > 0 && (
-        <div class="sl-flex actions">
-          {actions.map(
-            ({ attrs: { class: className, ...attrs } = {}, icon, link: href, text, variant }) => (
-              <LinkButton {href} {variant} icon={icon?.name} class:list={[className]} {...attrs}>
-                {text}
-                {icon?.html && <Fragment set:html={icon.html} />}
-              </LinkButton>
-            )
-          )}
-        </div>
-      )
-    }
+    <div class="sl-flex actions">
+      {
+        actions.map(
+          ({ attrs: { class: className, ...attrs } = {}, icon, link: href, text, variant }) => (
+            <LinkButton {href} {variant} icon={icon?.name} class:list={[className]} {...attrs}>
+              {text}
+              {icon?.html && <Fragment set:html={icon.html} />}
+            </LinkButton>
+          )
+        )
+      }
+      <div class="create-command">
+        <code>{CREATE_COMMAND}</code>
+        <button
+          type="button"
+          aria-label={`Copy "${CREATE_COMMAND}" to clipboard`}
+          data-command={CREATE_COMMAND}
+        >
+          <svg
+            class="copy-icon"
+            aria-hidden="true"
+            width="16"
+            height="16"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <rect x="9" y="9" width="13" height="13" rx="2" />
+            <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
+          </svg>
+          <svg
+            class="check-icon"
+            aria-hidden="true"
+            width="16"
+            height="16"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path d="M20 6 9 17l-5-5" />
+          </svg>
+        </button>
+      </div>
+    </div>
   </div>
 </div>
 
+<script>
+  const button = document.querySelector<HTMLButtonElement>(
+    '.create-command button'
+  )
+  button?.addEventListener('click', async () => {
+    const command = button.dataset.command
+    if (!command) return
+    await navigator.clipboard.writeText(command)
+    button.setAttribute('data-copied', '')
+    setTimeout(() => button.removeAttribute('data-copied'), 1500)
+  })
+</script>
+
 <style>
   .hero {
     display: grid;
@@ -124,12 +176,61 @@ if (image) {
     color: var(--sl-color-gray-2);
   }
 
+  /* no align-items: the default stretch keeps the chip and the link
+     buttons the same height whenever they share a row */
   .actions {
     gap: 1rem 2rem;
     flex-wrap: wrap;
     justify-content: center;
   }
 
+  .create-command {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    border: 1px solid var(--sl-color-gray-5);
+    border-radius: 999rem;
+    background-color: var(--sl-color-black);
+    /* natural height matches the mobile link button (40px); on wider
+       screens the stretch from .actions makes both 56px anyway */
+    padding-inline: 1rem 0.375rem;
+    padding-block: 0.1875rem;
+    font-size: var(--sl-text-sm);
+  }
+
+  .create-command code {
+    font-family: var(--__sl-font-mono);
+    color: var(--sl-color-gray-2);
+  }
+
+  .create-command button {
+    display: inline-flex;
+    padding: 0.5rem;
+    border: 0;
+    border-radius: 999rem;
+    background: none;
+    cursor: pointer;
+    color: var(--sl-color-gray-3);
+  }
+
+  .create-command button:hover {
+    color: var(--sl-color-white);
+    background-color: var(--sl-color-gray-6);
+  }
+
+  .create-command .check-icon {
+    display: none;
+  }
+
+  .create-command button[data-copied] .copy-icon {
+    display: none;
+  }
+
+  .create-command button[data-copied] .check-icon {
+    display: block;
+    color: var(--sl-color-green);
+  }
+
   @media (min-width: 50rem) {
     .hero {
       grid-template-columns: 6fr 5fr;
diff --git a/docs/src/content/docs/guides/getting-started.mdx b/docs/src/content/docs/guides/getting-started.mdx
index 361e88e..6fb2b4a 100644
--- a/docs/src/content/docs/guides/getting-started.mdx
+++ b/docs/src/content/docs/guides/getting-started.mdx
@@ -11,8 +11,29 @@ The result is a reactive UI on property changes.
 
 You can see every feature running at [demo.webcomponent.io ↗](https://demo.webcomponent.io/) — a live gallery with the source alongside each demo. Individual demos are linked from the guide that covers them, and the full list is in [Examples](/examples/#live-demo-gallery).
 
+## Quick start
+
+The fastest way to try wcb is to scaffold a new component with [`create-wcb`](https://www.npmjs.com/package/create-wcb):
+
+```bash
+npm create wcb@latest
+# or name it directly: npm create wcb@latest my-button
+```
+
+It sets up a publishable custom element, ready to develop:
+
+- **A starter component** in TypeScript using the [`static props`](/prop-access/) convention — the class, tag, and file names are derived from your project name (`my-button` → `MyButton` / `<my-button>`), so there are no rename-me TODOs
+- **A Vite setup** — a dev server with a demo page, plus a library build (`npm run build:lib`) that emits ESM + UMD bundles and `.d.ts` types, with `web-component-base` as a peerDependency
+- **`custom-elements.json` generation** — the CEM analyzer configured with wcb's plugin, an `npm run analyze` script, the `customElements` field in `package.json`, and a `prepack` hook so the manifest ships inside the published package
+
+See the [CEM Analyzer Plugin guide](/cem-plugin/) for more details on the manifest and how to use it with Storybook and code editors.
+
+Prefer starting on GitHub? The [`ayo-run/web-component`](https://github.com/ayo-run/web-component) template repository serves the same purpose via "Use this template".
+
 ## Installation
 
+The sections below are more manual options — use them to add wcb to an existing project or page instead of scaffolding a new one.
+
 The library is distributed as complete ECMAScript Modules (ESM) and published on [NPM](https://ayco.io/n/web-component-base). Please open a [GitHub issue](https://github.com/ayo-run/wcb/issues/new) or [discussion](https://github.com/ayo-run/wcb/discussions) for problems or requests regarding our distribution. You can also submit a ticket in [SourceHut](https://todo.sr.ht/~ayoayco/wcb).
 
 ### Import via CDN
diff --git a/docs/src/content/docs/index.mdx b/docs/src/content/docs/index.mdx
index e036823..4ad6f86 100644
--- a/docs/src/content/docs/index.mdx
+++ b/docs/src/content/docs/index.mdx
@@ -10,10 +10,6 @@ hero:
     - text: Get Started
       link: /getting-started
       icon: right-arrow
-    - text: Try on CodePen
-      link: https://codepen.io/ayoayco-the-styleful/pen/PoVegBK?editors=1010
-      icon: external
-      variant: minimal
 ---
 
 import { Card, CardGrid } from '@astrojs/starlight/components';