@africode/core 5.0.8 → 5.0.9

package/templates/starter-fintech/src/styles/main.css

@@ -0,0 +1,246 @@
+:root {
+  color-scheme: light;
+  --bg: #f6f7fb;
+  --surface: #ffffff;
+  --surface-muted: #eef2f7;
+  --text: #172033;
+  --muted: #647084;
+  --border: #d8dee8;
+  --primary: #0f766e;
+  --primary-strong: #0b5f59;
+  --accent: #b7791f;
+  --danger: #b42318;
+  --success: #087443;
+  --shadow: 0 16px 40px rgba(23, 32, 51, 0.08);
+}
+
+[data-theme="dark"] {
+  color-scheme: dark;
+  --bg: #07111f;
+  --surface: #101b2d;
+  --surface-muted: #17243a;
+  --text: #f8fafc;
+  --muted: #a7b4c8;
+  --border: #26364f;
+  --primary: #2dd4bf;
+  --primary-strong: #5eead4;
+  --accent: #f5b84b;
+  --danger: #fb7185;
+  --success: #34d399;
+  --shadow: 0 18px 44px rgba(0, 0, 0, 0.24);
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  min-height: 100vh;
+  margin: 0;
+  background: var(--bg);
+  color: var(--text);
+  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+}
+
+button,
+input,
+select {
+  font: inherit;
+}
+
+.app-shell {
+  width: min(1180px, calc(100% - 32px));
+  margin: 0 auto;
+  padding: 32px 0;
+}
+
+.topbar,
+.panel,
+.metric,
+.ledger,
+.form-panel {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  box-shadow: var(--shadow);
+}
+
+.topbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 18px 20px;
+  border-radius: 8px;
+}
+
+.brand {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.eyebrow,
+.label,
+.status {
+  color: var(--muted);
+  font-size: 0.82rem;
+}
+
+h1,
+h2,
+h3,
+p {
+  margin: 0;
+}
+
+h1 {
+  font-size: clamp(1.45rem, 3vw, 2.25rem);
+  line-height: 1.1;
+}
+
+h2 {
+  font-size: 1rem;
+}
+
+.actions,
+.grid,
+.metrics,
+.form-grid {
+  display: grid;
+  gap: 16px;
+}
+
+.actions {
+  grid-auto-flow: column;
+  align-items: center;
+}
+
+.button {
+  min-height: 40px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 0 14px;
+  background: var(--surface-muted);
+  color: var(--text);
+  cursor: pointer;
+}
+
+.button.primary {
+  border-color: var(--primary);
+  background: var(--primary);
+  color: #ffffff;
+}
+
+[data-theme="dark"] .button.primary {
+  color: #07111f;
+}
+
+.grid {
+  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
+  margin-top: 18px;
+}
+
+.metrics {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.metric,
+.panel,
+.ledger,
+.form-panel {
+  border-radius: 8px;
+  padding: 18px;
+}
+
+.value {
+  margin-top: 10px;
+  font-size: 1.65rem;
+  font-weight: 760;
+}
+
+.status.good {
+  color: var(--success);
+}
+
+.status.warn {
+  color: var(--accent);
+}
+
+.ledger {
+  margin-top: 16px;
+}
+
+.ledger-list {
+  display: grid;
+  gap: 10px;
+  margin-top: 14px;
+}
+
+.ledger-row {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: 12px;
+  padding: 12px;
+  border-radius: 6px;
+  background: var(--surface-muted);
+}
+
+.amount {
+  font-weight: 720;
+}
+
+.form-panel {
+  display: grid;
+  gap: 18px;
+}
+
+.form-grid {
+  grid-template-columns: 1fr;
+}
+
+label {
+  display: grid;
+  gap: 6px;
+  color: var(--muted);
+  font-size: 0.86rem;
+}
+
+input {
+  min-height: 42px;
+  width: 100%;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 0 12px;
+  background: var(--surface-muted);
+  color: var(--text);
+}
+
+.notice {
+  min-height: 46px;
+  border-radius: 6px;
+  padding: 12px;
+  background: var(--surface-muted);
+  color: var(--muted);
+}
+
+.notice.error {
+  color: var(--danger);
+}
+
+.notice.success {
+  color: var(--success);
+}
+
+@media (max-width: 820px) {
+  .topbar,
+  .grid,
+  .metrics {
+    grid-template-columns: 1fr;
+  }
+
+  .topbar,
+  .actions {
+    display: grid;
+    grid-auto-flow: row;
+  }
+}

package/templates/starter-react/package.json

@@ -4,13 +4,13 @@
     "private": true,
     "type": "module",
     "scripts": {
-        "dev": "africode dev",
-        "build": "africode build",
-        "migrate": "africode migrate"
+        "dev": "bun run ./bin/africode.js dev",
+        "build": "bun run ./bin/africode.js build",
+        "migrate": "bun run ./bin/africode.js migrate"
     },
     "dependencies": {
-        "@africode/core": "^5.0.2",
+        "@africode/core": "^5.0.9",
         "react": "^19.0.0",
         "react-dom": "^19.0.0"
     }
-}
+}

package/templates/starter-react/src/pages/index.js

@@ -1,4 +1,4 @@
-import { html, Layout } from 'africode';
+import { html, Layout } from '@africode/core';
 
 /**
  * Home Page — React Interop Starter

package/templates/starter-tailwind/package.json

@@ -4,17 +4,17 @@
     "private": true,
     "type": "module",
     "scripts": {
-        "dev": "concurrently \"africode dev\" \"npx @tailwindcss/cli -i ./src/styles/tailwind.css -o ./src/styles/tailwind.out.css --watch\"",
+        "dev": "concurrently \"bun run ./bin/africode.js dev\" \"npx @tailwindcss/cli -i ./src/styles/tailwind.css -o ./src/styles/tailwind.out.css --watch\"",
         "build:css": "npx @tailwindcss/cli -i ./src/styles/tailwind.css -o ./src/styles/tailwind.out.css --minify",
-        "build": "npm run build:css && africode build",
-        "migrate": "africode migrate"
+        "build": "npm run build:css && bun run ./bin/africode.js build",
+        "migrate": "bun run ./bin/africode.js migrate"
     },
     "dependencies": {
-        "@africode/core": "^5.0.2"
+        "@africode/core": "^5.0.9"
     },
     "devDependencies": {
         "@tailwindcss/cli": "^4.0.0",
         "tailwindcss": "^4.0.0",
         "concurrently": "^9.0.0"
     }
-}
+}

package/templates/starter-tailwind/src/pages/index.js

@@ -1,5 +1,5 @@
 import '../tailwind-loader.js';
-import { html, Layout } from 'africode';
+import { html, Layout } from '@africode/core';
 
 /**
  * Home Page — Tailwind Starter

package/templates/starter-website/.env.example

@@ -0,0 +1,18 @@
+# AfriCode Website Starter Environment
+
+# Server
+PORT=3000
+NODE_ENV=development
+PUBLIC_SITE_URL=http://localhost:3000
+
+# Content and forms
+PUBLIC_SITE_NAME=AfriCode Website
+CONTACT_TO_EMAIL=hello@example.com
+NEWSLETTER_PROVIDER=mock
+NEWSLETTER_API_KEY=newsletter_mock_key
+
+# Optional local data
+DB_FILE=./data.db
+
+# Security
+SESSION_SECRET=replace_this_with_a_long_random_string

package/templates/starter-website/africode.config.js

@@ -0,0 +1,20 @@
+/**
+ * AfriCode Website Starter Configuration
+ */
+export default {
+  entry: 'src/index.js',
+  server: {
+    port: process.env.PORT || 3000,
+    host: '0.0.0.0',
+    staticDir: 'public',
+    cors: true
+  },
+  directories: {
+    src: 'src',
+    pages: 'src/pages',
+    components: 'src/components',
+    styles: 'src/styles',
+    build: 'dist'
+  },
+  theme: { default: 'light', toggleAttribute: 'data-theme' }
+};

package/templates/starter-website/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "africode-website-starter",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "bun run ./bin/africode.js dev",
+    "build": "bun run ./bin/africode.js build",
+    "migrate": "bun run ./bin/africode.js migrate"
+  },
+  "dependencies": {
+    "@africode/core": "^5.0.9"
+  }
+}

package/templates/starter-website/src/index.js

@@ -0,0 +1,17 @@
+import { html, Layout } from '@africode/core';
+
+export function loader() {
+  return { title: 'AfriCode Website Starter' };
+}
+
+export default function App({ data }) {
+  return Layout({
+    title: data?.title || 'AfriCode Website Starter',
+    children: html`
+      <main>
+        <h1>Website starter ready</h1>
+        <p>Use this template for marketing sites, content pages, and product launches.</p>
+      </main>
+    `
+  });
+}

package/templates/starter-website/src/pages/index.html

@@ -0,0 +1,124 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="light">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>AfriCode Website Starter</title>
+  <script type="importmap">
+  {
+    "imports": {
+      "africode": "/node_modules/@africode/core/core/sdk-browser.js",
+      "africode/components": "/node_modules/@africode/core/components/index.js"
+    }
+  }
+  </script>
+  <link rel="stylesheet" href="/node_modules/@africode/core/styles/africanity.css" />
+  <link rel="stylesheet" href="/styles/main.css" />
+  <script type="module" src="/node_modules/@africode/core/core/sdk-browser.js"></script>
+</head>
+<body>
+  <main class="site-shell">
+    <nav class="nav" aria-label="Primary">
+      <a class="brand" href="/">AfriCode Site</a>
+      <div class="nav-links">
+        <a href="#features">Features</a>
+        <a href="#proof">Proof</a>
+        <a href="#contact">Contact</a>
+        <button class="button" id="theme-toggle" type="button">Toggle theme</button>
+      </div>
+    </nav>
+
+    <section class="hero">
+      <div>
+        <span class="eyebrow">Website starter</span>
+        <h1>Launch a fast, structured site with AfriCode.</h1>
+        <p class="hero-copy">A production-minded starter for product pages, service sites, and content launches with clean sections, theme tokens, and a contact-ready call to action.</p>
+        <div class="hero-actions">
+          <a class="button primary" href="#contact">Start a project</a>
+          <a class="button" href="#features">Explore sections</a>
+        </div>
+      </div>
+
+      <aside class="hero-panel" aria-label="Site readiness">
+        <div class="signal">
+          <span class="muted">Pages</span>
+          <strong>4 sections</strong>
+        </div>
+        <div class="signal">
+          <span class="muted">Theme</span>
+          <strong>Light and dark</strong>
+        </div>
+        <div class="signal">
+          <span class="muted">Forms</span>
+          <strong>Contact-ready</strong>
+        </div>
+      </aside>
+    </section>
+
+    <section class="section" id="features">
+      <div class="section-head">
+        <div>
+          <span class="eyebrow">Structure</span>
+          <h2>Everything a small site needs first</h2>
+        </div>
+        <p class="muted">Swap copy, connect forms, and keep moving.</p>
+      </div>
+      <div class="grid">
+        <article class="card">
+          <h3>Clear sections</h3>
+          <p>Hero, feature grid, proof area, and CTA are ready without extra layout work.</p>
+        </article>
+        <article class="card">
+          <h3>Theme tokens</h3>
+          <p>CSS variables make brand changes predictable across light and dark modes.</p>
+        </article>
+        <article class="card">
+          <h3>Component-ready</h3>
+          <p>Import AfriCode components when the project grows beyond static sections.</p>
+        </article>
+      </div>
+    </section>
+
+    <section class="section" id="proof">
+      <div class="grid">
+        <article class="proof">
+          <h3>98</h3>
+          <p>Performance-minded structure with minimal client JavaScript.</p>
+        </article>
+        <article class="proof">
+          <h3>0</h3>
+          <p>Framework lock-in for the content layer.</p>
+        </article>
+        <article class="proof">
+          <h3>1</h3>
+          <p>Shared theme system for every starter page.</p>
+        </article>
+      </div>
+    </section>
+
+    <section class="cta" id="contact">
+      <div>
+        <span class="eyebrow">Contact</span>
+        <h2>Connect this CTA to your own endpoint.</h2>
+        <p class="muted">The `.env.example` file includes contact and newsletter placeholders.</p>
+      </div>
+      <form class="signup">
+        <input type="email" placeholder="you@example.com" aria-label="Email address" />
+        <button class="button primary" type="submit">Notify me</button>
+      </form>
+    </section>
+  </main>
+
+  <script type="module">
+    document.querySelector('#theme-toggle').addEventListener('click', () => {
+      const root = document.documentElement;
+      root.dataset.theme = root.dataset.theme === 'dark' ? 'light' : 'dark';
+    });
+
+    document.querySelector('.signup').addEventListener('submit', (event) => {
+      event.preventDefault();
+      event.currentTarget.querySelector('button').textContent = 'Received';
+    });
+  </script>
+</body>
+</html>

package/templates/starter-website/src/pages/index.js

@@ -0,0 +1,116 @@
+import { html, Layout } from '@africode/core';
+
+export function loader() {
+  return { title: 'AfriCode Website Starter' };
+}
+
+export default function HomePage({ data }) {
+  return Layout({
+    title: data?.title || 'AfriCode Website Starter',
+    children: html`
+      <main class="site-shell">
+        <nav class="nav" aria-label="Primary">
+          <a class="brand" href="/">AfriCode Site</a>
+          <div class="nav-links">
+            <a href="#features">Features</a>
+            <a href="#proof">Proof</a>
+            <a href="#contact">Contact</a>
+            <button class="button" id="theme-toggle" type="button">Toggle theme</button>
+          </div>
+        </nav>
+
+        <section class="hero">
+          <div>
+            <span class="eyebrow">Website starter</span>
+            <h1>Launch a fast, structured site with AfriCode.</h1>
+            <p class="hero-copy">A production-minded starter for product pages, service sites, and content launches with clean sections, theme tokens, and a contact-ready call to action.</p>
+            <div class="hero-actions">
+              <a class="button primary" href="#contact">Start a project</a>
+              <a class="button" href="#features">Explore sections</a>
+            </div>
+          </div>
+
+          <aside class="hero-panel" aria-label="Site readiness">
+            <div class="signal">
+              <span class="muted">Pages</span>
+              <strong>4 sections</strong>
+            </div>
+            <div class="signal">
+              <span class="muted">Theme</span>
+              <strong>Light and dark</strong>
+            </div>
+            <div class="signal">
+              <span class="muted">Forms</span>
+              <strong>Contact-ready</strong>
+            </div>
+          </aside>
+        </section>
+
+        <section class="section" id="features">
+          <div class="section-head">
+            <div>
+              <span class="eyebrow">Structure</span>
+              <h2>Everything a small site needs first</h2>
+            </div>
+            <p class="muted">Swap copy, connect forms, and keep moving.</p>
+          </div>
+          <div class="grid">
+            <article class="card">
+              <h3>Clear sections</h3>
+              <p>Hero, feature grid, proof area, and CTA are ready without extra layout work.</p>
+            </article>
+            <article class="card">
+              <h3>Theme tokens</h3>
+              <p>CSS variables make brand changes predictable across light and dark modes.</p>
+            </article>
+            <article class="card">
+              <h3>Component-ready</h3>
+              <p>Import AfriCode components when the project grows beyond static sections.</p>
+            </article>
+          </div>
+        </section>
+
+        <section class="section" id="proof">
+          <div class="grid">
+            <article class="proof">
+              <h3>98</h3>
+              <p>Performance-minded structure with minimal client JavaScript.</p>
+            </article>
+            <article class="proof">
+              <h3>0</h3>
+              <p>Framework lock-in for the content layer.</p>
+            </article>
+            <article class="proof">
+              <h3>1</h3>
+              <p>Shared theme system for every starter page.</p>
+            </article>
+          </div>
+        </section>
+
+        <section class="cta" id="contact">
+          <div>
+            <span class="eyebrow">Contact</span>
+            <h2>Connect this CTA to your own endpoint.</h2>
+            <p class="muted">The `.env.example` file includes contact and newsletter placeholders.</p>
+          </div>
+          <form class="signup">
+            <input type="email" placeholder="you@example.com" aria-label="Email address" />
+            <button class="button primary" type="submit">Notify me</button>
+          </form>
+        </section>
+      </main>
+
+      <script type="module">
+        document.querySelector('#theme-toggle').addEventListener('click', () => {
+          const root = document.documentElement;
+          root.dataset.theme = root.dataset.theme === 'dark' ? 'light' : 'dark';
+        });
+
+        document.querySelector('.signup').addEventListener('submit', (event) => {
+          event.preventDefault();
+          event.currentTarget.querySelector('button').textContent = 'Received';
+        });
+      </script>
+    `
+  });
+}