Merge pull request #29 from grega/homepage-usage

grega · web-flow · commit 45bb2fbf1592 · 2026-04-08T00:13:20.000+01:00
Edit homepage usage section
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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";
 ---
 
 <Layout title="Extract install/run/test commands from project READMEs">
@@ -29,7 +30,9 @@ import HdiLogo from "../components/HdiLogo.astro";
           >
             <path
               d="M56.7937 84.9688C44.4187 83.4688 35.7 74.5625 35.7 63.0313C35.7 58.3438 37.3875 53.2813 40.2 49.9063C38.9812 46.8125 39.1687 40.25 40.575 37.5313C44.325 37.0625 49.3875 39.0313 52.3875 41.75C55.95 40.625 59.7 40.0625 64.2937 40.0625C68.8875 40.0625 72.6375 40.625 76.0125 41.6563C78.9187 39.0313 84.075 37.0625 87.825 37.5313C89.1375 40.0625 89.325 46.625 88.1062 49.8125C91.1062 53.375 92.7 58.1563 92.7 63.0313C92.7 74.5625 83.9812 83.2813 71.4187 84.875C74.6062 86.9375 76.7625 91.4375 76.7625 96.5938L76.7625 106.344C76.7625 109.156 79.1062 110.75 81.9187 109.625C98.8875 103.156 112.2 86.1875 112.2 65.1875C112.2 38.6563 90.6375 17 64.1062 17C37.575 17 16.2 38.6562 16.2 65.1875C16.2 86 29.4187 103.25 47.2312 109.719C49.7625 110.656 52.2 108.969 52.2 106.438L52.2 98.9375C50.8875 99.5 49.2 99.875 47.7 99.875C41.5125 99.875 37.8562 96.5 35.2312 90.2188C34.2 87.6875 33.075 86.1875 30.9187 85.9063C29.7937 85.8125 29.4187 85.3438 29.4187 84.7813C29.4187 83.6563 31.2937 82.8125 33.1687 82.8125C35.8875 82.8125 38.2312 84.5 40.6687 87.9688C42.5437 90.6875 44.5125 91.9063 46.8562 91.9063C49.2 91.9063 50.7 91.0625 52.8562 88.9063C54.45 87.3125 55.6687 85.9063 56.7937 84.9688Z"
-              fill="currentColor"></path>
+              fill="currentColor"
+            >
+            </path>
           </svg>
           <span class="version">{VERSION}</span>
         </a>
@@ -48,9 +51,7 @@ import HdiLogo from "../components/HdiLogo.astro";
     <section id="install-section">
       <h2>Install</h2>
       <Install />
-      <p class="install-note">
-        Works on macOS and Linux (probably WSL2 also).
-      </p>
+      <p class="install-note">Works on macOS and Linux (probably WSL2 also).</p>
     </section>
 
     <section class="demo-gif">
@@ -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.
       </p>
-    </section>
-
-    <section class="usage-section">
-      <h2>Usage</h2>
-      <pre
-        class="usage-block"><code>$ cd some-project
-$ hdi
-<span class="u-yellow">[hdi]</span> some-project
-
- <span class="u-yellow">▸</span> <span class="u-sapphire">Installation</span>
-  <span class="u-green">▶ npm install</span>
-    <span class="u-green">cp .env.example .env</span>
-
- <span class="u-yellow">▸</span> <span class="u-sapphire">Run</span>
-    <span class="u-green">npm run dev</span>
-
-  ↑↓ navigate  ⇥ sections  ⏎ execute  c copy  q quit</code></pre>
       <p class="usage-docs-link">
         <a
-          href="https://github.com/grega/hdi#usage"
+          href="https://blog.gregdev.com/posts/2026-03-18-hdi-a-cli-tool-to-extract-run-commands-from-project-readmes/"
           target="_blank"
-          rel="noopener">Full documentation on GitHub &rarr;</a
+          rel="noopener"
         >
+          Read the blog post &rarr;
+        </a>
       </p>
     </section>
 
-    <section class="links-section">
+    <section class="usage-section">
+      <h2>Usage</h2>
+
+      <div class="command-table">
+        <CommandTable />
+      </div>
+
       <p class="usage-docs-link">
         <a
-          href="https://blog.gregdev.com/posts/2026-03-18-hdi-a-cli-tool-to-extract-run-commands-from-project-readmes/"
+          href="https://github.com/grega/hdi#usage"
           target="_blank"
-          rel="noopener">Read the blog post &rarr;</a
+          rel="noopener"
         >
+          Full documentation on GitHub &rarr;
+        </a>
       </p>
     </section>
   </main>
@@ -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;
-    }
   }
 </style>
diff --git a/website/src/styles/global.css b/website/src/styles/global.css
