helpers4 · baxyz · Mar 7, 2026 · Mar 6, 2026 · Mar 6, 2026 · Mar 6, 2026
diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json
@@ -18,6 +18,9 @@
     "ghcr.io/helpers4/devcontainer/vite-plus:1": {},
     "ghcr.io/helpers4/devcontainer/package-auto-install:1": {}
   },
+  "containerEnv": {
+    "NPM_TOKEN_WEB_AWESOME": "${localEnv:NPM_TOKEN_WEB_AWESOME}"
+  },
   "forwardPorts": [
     3000,
     3001,

diff --git a/assets/logo/Helpers4 Logo.png b/assets/logo/Helpers4 Logo.png
diff --git a/landing/index.html b/landing/index.html
@@ -1,38 +1,23 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" class="wa-dark">
   <head>
     <meta charset="utf-8" />
     <title>helpers4 - Open Source Utilities</title>
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="description" content="helpers4: Open source utilities library for TypeScript with zero dependencies" />
     <meta name="theme-color" content="#2563eb" />
+    <meta http-equiv="Cache-Control" content="no-store, no-cache, must-revalidate, max-age=0" />
+    <meta http-equiv="Pragma" content="no-cache" />
+    <meta http-equiv="Expires" content="0" />
+    <link rel="icon" type="image/png" href="/helpers4-logo.png" />
     <style>
-      * {
+      wa-card h3 {
         margin: 0;
-        padding: 0;
-        box-sizing: border-box;
-      }
-
-      html, body {
-        height: 100%;
-      }
-
-      body {
-        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-        background: var(--wa-color-surface, #fafafa);
-        color: var(--wa-color-text-primary, #1f2937);
-        line-height: 1.6;
-      }
-
-      main {
-        display: flex;
-        flex-direction: column;
-        min-height: 100vh;
       }
     </style>
   </head>
   <body>
-    <main id="root"></main>
+    <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>
diff --git a/landing/package.json b/landing/package.json
@@ -6,17 +6,18 @@
   "type": "module",
   "scripts": {
     "build": "vite build",
-    "dev": "vite --port 3000",
+    "dev": "vite --host 0.0.0.0 --port 3000",
     "preview": "vite preview",
     "clean": "rm -rf dist .vite"
   },
   "dependencies": {
     "@awesome.me/webawesome-pro": "^3.2.1",
-    "@builder.io/qwik": "^1.19.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
   },
   "devDependencies": {
+    "@types/react": "^18.3.28",
+    "@types/react-dom": "^18.3.5",
     "typescript": "^5.3.0",
     "vite": "^7.3.1"
   }

diff --git a/landing/public/helpers4-logo.png b/landing/public/helpers4-logo.png
diff --git a/landing/qwik.config.ts b/landing/qwik.config.ts
diff --git a/landing/src/components/CardItem.tsx b/landing/src/components/CardItem.tsx
@@ -0,0 +1,36 @@
+/**
+ * @license AGPL-3.0-or-later
+ */
+
+import { type ProjectCard } from '../types';
+import { formatStars } from '../utils/github';
+
+interface CardItemProps {
+  card: ProjectCard;
+  stars: number | null;
+}
+
+export function CardItem({ card, stars }: CardItemProps) {
+  return (
+    <wa-card with-footer>
+      {/* Header */}
+      <h3 slot="header">{card.title}</h3>
+      <wa-button slot="header-actions" appearance="plain" href={`https://github.com/${card.repoPath}`} target="_blank" rel="noopener noreferrer">
+        <wa-icon name="star" variant="solid" label="Star count" />
+        {formatStars(stars)}
+      </wa-button>
+
+      {/* Body */}
+      {card.description}
+
+      {/* Footer */}
+
+      <div slot="footer" className="wa-gap-xs">
+        <wa-button variant="brand" href={card.docsHref}>Open {card.label} docs</wa-button>
+        <wa-button variant="outlined" href={`https://github.com/${card.repoPath}`} target="_blank" rel="noopener noreferrer">
+          GitHub
+        </wa-button>
+      </div>
+    </wa-card>
+  );
+}
diff --git a/landing/src/components/CardsList.tsx b/landing/src/components/CardsList.tsx
@@ -0,0 +1,48 @@
+/**
+ * @license AGPL-3.0-or-later
+ */
+
+import { useEffect, useMemo, useState } from 'react';
+import { type ProjectCard, type RepoStars } from '../types';
+import { fetchAllStars } from '../utils/github';
+import { CardItem } from './CardItem';
+
+interface CardsListProps {
+  projects: ProjectCard[];
+}
+
+export function CardsList({ projects }: CardsListProps) {
+  const [starsByRepo, setStarsByRepo] = useState<RepoStars>(() => {
+    // Initialize with hardcoded stars to avoid GitHub API rate limit
+    return Object.fromEntries(projects.map((p) => [p.repoPath, p.stars ?? null]));
+  });
+
+  useEffect(() => {
+    let active = true;
+
+    // Try to fetch live stars, but fallback to hardcoded values on rate limit
+    void fetchAllStars(projects.map((p) => p.repoPath)).then((stars) => {
+      if (active) {
+        setStarsByRepo(stars);
+      }
+    });
+
+    return () => {
+      active = false;
+    };
+  }, [projects]);
+
+  const cards = useMemo(
+    () =>
+      projects.map((project) => (
+        <CardItem key={project.repoPath} card={project} stars={starsByRepo[project.repoPath] ?? project.stars ?? null} />
+      )),
+    [projects, starsByRepo],
+  );
+
+  return (
+    <section className="wa-grid" style={{ '--min-column-size': '40ch' }}>
+      {cards}
+    </section>
+  );
+}
diff --git a/landing/src/components/Header.tsx b/landing/src/components/Header.tsx
@@ -0,0 +1,12 @@
+/**
+ * @license AGPL-3.0-or-later
+ */
+
+export function Header() {
+  return (
+    <header style={{ marginBottom: '20px' }}>
+      <img src="/helpers4-logo.png" alt="helpers4 logo" style={{ height: '56px', width: 'auto', marginBottom: '12px' }} />
+      <h1>helpers4</h1>
+    </header>
+  );
+}
diff --git a/landing/src/components/footer.module.css b/landing/src/components/footer.module.css
diff --git a/landing/src/components/footer.tsx b/landing/src/components/footer.tsx