docs: surface create-wcb in the getting started guide and homepage
This commit is contained in:
GitHub
parent
bbb07912bc
commit
46ad64d5aa
3 changed files with 137 additions and 19 deletions
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
|
|
|||
Loading…
Reference in a new issue