diff --git a/.prettierrc b/.prettierrc index d87faa5..0967ef4 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,11 +1 @@ -{ - "plugins": ["prettier-plugin-astro"], - "overrides": [ - { - "files": "*.astro", - "options": { - "parser": "astro" - } - } - ] -} +{} diff --git a/website/.github/workflows/playwright.yml b/website/.github/workflows/playwright.yml index 3eb1314..2812391 100644 --- a/website/.github/workflows/playwright.yml +++ b/website/.github/workflows/playwright.yml @@ -1,27 +1,27 @@ name: Playwright Tests on: push: - branches: [ main, master ] + branches: [main, master] pull_request: - branches: [ main, master ] + branches: [main, master] jobs: test: timeout-minutes: 60 runs-on: ubuntu-latest steps: - - uses: actions/checkout@v4 - - uses: actions/setup-node@v4 - with: - node-version: lts/* - - name: Install dependencies - run: npm ci - - name: Install Playwright Browsers - run: npx playwright install --with-deps - - name: Run Playwright tests - run: npx playwright test - - uses: actions/upload-artifact@v4 - if: ${{ !cancelled() }} - with: - name: playwright-report - path: playwright-report/ - retention-days: 30 + - uses: actions/checkout@v4 + - uses: actions/setup-node@v4 + with: + node-version: lts/* + - name: Install dependencies + run: npm ci + - name: Install Playwright Browsers + run: npx playwright install --with-deps + - name: Run Playwright tests + run: npx playwright test + - uses: actions/upload-artifact@v4 + if: ${{ !cancelled() }} + with: + name: playwright-report + path: playwright-report/ + retention-days: 30 diff --git a/website/.prettierrc b/website/.prettierrc new file mode 100644 index 0000000..d87faa5 --- /dev/null +++ b/website/.prettierrc @@ -0,0 +1,11 @@ +{ + "plugins": ["prettier-plugin-astro"], + "overrides": [ + { + "files": "*.astro", + "options": { + "parser": "astro" + } + } + ] +} diff --git a/website/src/content/commands.md b/website/src/content/commands.md new file mode 100644 index 0000000..cc1906b --- /dev/null +++ b/website/src/content/commands.md @@ -0,0 +1,8 @@ +| Command | Description | +| ------------- | ---------------------------------------------------------------- | +| `hdi` | Interactive picker — shows all sections (default) | +| `hdi install` | Just install/setup commands (aliases: `setup`, `i`) | +| `hdi run` | Just run/start commands (aliases: `start`, `r`) | +| `hdi test` | Just test commands (alias: `t`) | +| `hdi deploy` | Just deploy/release commands and platform detection (alias: `d`) | +| `hdi all` | All sections (aliases: `a`) | diff --git a/website/src/pages/index.astro b/website/src/pages/index.astro index 034af07..e365df7 100644 --- a/website/src/pages/index.astro +++ b/website/src/pages/index.astro @@ -5,6 +5,7 @@ import DemoLatte from "../assets/demo-latte.gif"; import DemoMocha from "../assets/demo-mocha.gif"; import { VERSION } from "../data/data"; import HdiLogo from "../components/HdiLogo.astro"; +import { Content as CommandTable } from "../content/commands.md"; --- @@ -29,7 +30,9 @@ import HdiLogo from "../components/HdiLogo.astro"; > + fill="currentColor" + > + {VERSION} @@ -48,9 +51,7 @@ import HdiLogo from "../components/HdiLogo.astro";

Install

-

- Works on macOS and Linux (probably WSL2 also). -

+

Works on macOS and Linux (probably WSL2 also).

@@ -76,39 +77,32 @@ import HdiLogo from "../components/HdiLogo.astro"; etc. It extracts the fenced code blocks from matching sections and presents them as an interactive, executable list.

-
- -
-

Usage

- 
$ cd some-project
-$ hdi
-[hdi] some-project
-
- ▸ Installation
-  ▶ npm install
-    cp .env.example .env
-
- ▸ Run
-    npm run dev
-
-  ↑↓ navigate  ⇥ sections  ⏎ execute  c copy  q quit

Full documentation on GitHub → + Read the blog post → +

-
+
+

Usage

+ +
+ +
+

Read the blog post → + Full documentation on GitHub → +

@@ -118,42 +112,39 @@ $ hdi /* ── About page ─────────────────────────────────────────────────────── */ .about { + --space: 3rem; + flex: 1; padding: 2rem 1.5rem; max-width: 48rem; margin: 0 auto; width: 100%; - --space: 3rem; - h2 { font-size: 1.25rem; color: var(--sapphire); margin-bottom: 1.5rem; + display: flex; + align-items: center; + gap: 0.5rem; } h2::before { content: "▸ "; } + h2::after { + content: ""; + flex: 1; + background-color: var(--surface1); + block-size: 1px; + } + p { line-height: 1.5; - - code { - background: var(--crust); - padding: 0.125em 0.375em; - border-radius: 2px; - - @media (prefers-color-scheme: dark) { - background: var(--surface0); - } - } + margin-block-start: 0.75rem; } } - .about .links-section { - margin-top: 1.5rem; - } - /* ── Hero ─────────────────────────────────────────────────────── */ .hero { @@ -165,21 +156,17 @@ $ hdi } .hero-header { - align-items: center; --space: 1.5rem; + align-items: center; } .hero h1 { font-weight: 400; } - .hero-accent { - color: var(--yellow); - } - .hero-content { - align-items: center; --space: 1.5rem; + align-items: center; } .hero-text { @@ -213,67 +200,25 @@ $ hdi border: 0.0625rem solid var(--surface0); } - .demo-link { - margin-top: 0.75rem; - text-align: left; - } - - .demo-link a { - color: var(--sapphire); - } - /* ── Install ─────────────────────────────────────────────────────── */ .install-note { - margin-top: 0.75rem; color: var(--subtext0); } /* ── Usage ─────────────────────────────────────────────────────── */ - .usage-block { - background: var(--mantle); - border: 0.0625rem solid var(--surface0); - border-radius: 0.375rem; - padding: 1rem 1.25rem; - overflow-x: auto; - line-height: 1.6; - margin-bottom: 1.25rem; - } - - .usage-block code { - font-family: var(--font-mono); - color: var(--text); - } - - .u-yellow { - color: var(--yellow); - } - .u-sapphire { - color: var(--sapphire); - } - .u-green { - color: var(--green); - } - - .usage-docs-link a { - color: var(--sapphire); - text-decoration: none; - } - - .usage-docs-link a:hover { - text-decoration: underline; + /* :global needed to escape scoped styles and apply to rendered markdown */ + .command-table :global(td:first-child), + .command-table :global(th:first-child) { + min-width: min(20ch, 30vw); } /* ── Responsive ─────────────────────────────────────────────────────── */ @media (max-width: 43.75rem) { - /* About */ .about { padding: 1rem 1.5rem 2rem; } - .links-section { - flex-direction: column; - } } diff --git a/website/src/styles/global.css b/website/src/styles/global.css index 140f72e..80fe63c 100644 --- a/website/src/styles/global.css +++ b/website/src/styles/global.css @@ -23,17 +23,23 @@ body { flex-direction: column; } -/* h1, +h1, h2, h3, h4 { text-wrap: balance; -} */ +} -/* p { +p { text-wrap: pretty; -} */ +} +/* Default link style */ +a:not([class]) { + color: var(--sapphire); +} + +/* Links with a class (typically customised) */ a { color: currentColor; } @@ -111,3 +117,75 @@ button, align-items: center; gap: 0.5rem; } + +/* ── Table ─────────────────────────────────────────────────────── */ + +table { + --stroke: 1px solid var(--surface1); + border: var(--stroke); + border-collapse: collapse; + width: 100%; +} + +th { + text-align: left; + font-weight: bold; +} + +thead th { + padding-block: 0.75rem; +} + +td, +th { + padding: 0.75rem; +} + +th:not(:only-of-type) { + border-block-end: var(--stroke); +} + +th:only-of-type { + border-inline-end: var(--stroke); +} + +:is(th, td) ~ :is(th, td) { + border-inline-start: var(--stroke); +} + +tr + tr :is(th, td) { + border-block-start: var(--stroke); +} + +/* ── Code ─────────────────────────────────────────────────────── */ + +:is(code, kbd, samp) { + background: var(--crust); + border-radius: 2px; + + @media (prefers-color-scheme: dark) { + background: var(--surface0); + } + + font-family: var(--font-mono); + padding: 0.2em 0.2em 0.05em 0.2em; + hyphens: none; + tab-size: 2; + text-align: left; + word-spacing: normal; + word-break: normal; + word-wrap: normal; + box-decoration-break: clone; +} + +pre:has(code) { + width: max-content; + max-width: 100%; + overflow-x: auto; +} + +pre code { + border: none; + background: none; + padding: 0; +}