create-clientkit 0.1.0

package/templates/astro-tailwind/base/src/pages/404.astro

@@ -0,0 +1,147 @@
+---
+import { CONTACT, NAV } from '../config/site.config.ts';
+import BaseLayout from '../layouts/BaseLayout.astro';
+
+const hasEmail = CONTACT.email !== '';
+const links = NAV.filter((item) => item.label !== '' && item.href !== '');
+---
+
+<BaseLayout
+  title="Page not found"
+  description="This page could not be found."
+  noindex={true}
+  structuredData={false}
+  measure="narrow"
+>
+  <div class="wrap">
+    <div class="container-page inner">
+      <p class="code rise" aria-hidden="true">404</p>
+
+      <h1 class="rise" style="animation-delay: 60ms">This page doesn't exist.</h1>
+
+      <p class="lead rise" style="animation-delay: 120ms">
+        The link may be out of date, or the address may have been mistyped.
+      </p>
+
+      <div class="actions rise" style="animation-delay: 180ms">
+        <a class="btn btn-primary" href="/">Return home</a>
+        {
+          hasEmail && (
+            <a class="btn btn-secondary" href={`mailto:${CONTACT.email}`}>
+              Report a broken link
+            </a>
+          )
+        }
+      </div>
+
+      {
+        links.length > 0 && (
+          <nav class="suggestions rise" style="animation-delay: 240ms" aria-label="Other pages">
+            <p class="eyebrow">Try instead</p>
+            <ul>
+              {links.map((item) => (
+                <li>
+                  <a class="link" href={item.href}>
+                    {item.label}
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </nav>
+        )
+      }
+    </div>
+  </div>
+</BaseLayout>
+
+<style>
+  .wrap {
+    display: flex;
+    align-items: center;
+    min-height: calc(100dvh - 10rem);
+    padding-block: var(--spacing-section);
+  }
+
+  .inner {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 1.25rem;
+  }
+
+  /* Oversized, quiet, and decorative - the real heading below carries the
+     meaning, so this is hidden from assistive technology. */
+  .code {
+    margin: 0 0 -0.5rem;
+    font-size: clamp(4.5rem, 2rem + 11vw, 9rem);
+    font-weight: 600;
+    line-height: 0.9;
+    letter-spacing: -0.05em;
+    color: transparent;
+    -webkit-text-stroke: 1.5px var(--color-border-strong);
+    user-select: none;
+  }
+
+  h1 {
+    margin: 0;
+    font-size: var(--text-h1);
+    line-height: var(--text-h1--line-height);
+    letter-spacing: var(--text-h1--letter-spacing);
+    font-weight: 600;
+    text-wrap: balance;
+  }
+
+  .lead {
+    margin: 0;
+    max-width: 48ch;
+    color: var(--color-muted);
+    font-size: var(--text-lead);
+    line-height: var(--text-lead--line-height);
+    text-wrap: pretty;
+  }
+
+  .actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.75rem;
+    margin-top: 0.5rem;
+  }
+
+  .suggestions {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    margin-top: 1.5rem;
+    padding-top: 1.5rem;
+    border-top: 1px solid var(--color-border);
+    width: 100%;
+  }
+
+  .suggestions ul {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem 1.5rem;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .suggestions a {
+    display: inline-flex;
+    align-items: center;
+    min-height: 2.25rem;
+    font-size: var(--text-small);
+  }
+
+  @media (max-width: 30rem) {
+    .actions {
+      flex-direction: column;
+      align-items: stretch;
+      width: 100%;
+    }
+
+    .actions .btn {
+      width: 100%;
+    }
+  }
+</style>

package/templates/astro-tailwind/base/src/pages/index.astro

@@ -0,0 +1,31 @@
+---
+import BaseLayout from '../layouts/BaseLayout.astro';
+---
+
+<BaseLayout>
+  <div class="container-page wrap">
+    <h1>Placeholder</h1>
+    <p>
+      This page comes from the template's base layer and is replaced by the selected mode. If you
+      are seeing it, the mode layer did not apply.
+    </p>
+  </div>
+</BaseLayout>
+
+<style>
+  .wrap {
+    padding-block: var(--spacing-section);
+  }
+
+  h1 {
+    margin: 0 0 1rem;
+    font-size: var(--text-h1);
+    font-weight: 600;
+  }
+
+  p {
+    margin: 0;
+    max-width: 60ch;
+    color: var(--color-muted);
+  }
+</style>

package/templates/astro-tailwind/base/src/pages/robots.txt.ts

@@ -0,0 +1,32 @@
+import type { APIRoute } from 'astro';
+
+import { SEO, SITE } from '../config/site.config.ts';
+import { absoluteUrl, siteOrigin } from '../lib/seo.ts';
+
+/**
+ * robots.txt is generated at build time rather than dropped in public/, so it
+ * always reflects the current site.config.ts instead of whatever was true when
+ * the project was scaffolded.
+ *
+ * The sitemap is only advertised when a production URL exists AND the site is
+ * indexable - the same condition that decides whether a sitemap is built at
+ * all (see astro.config.mjs). A URL-less site gets a valid, permissive
+ * robots.txt with no sitemap line, never a fabricated domain.
+ */
+export const GET: APIRoute = () => {
+  const origin = siteOrigin(SITE.url);
+  const lines = ['User-agent: *'];
+
+  if (SEO.noindex) {
+    lines.push('Disallow: /');
+  } else {
+    lines.push('Allow: /');
+    if (origin !== '') {
+      lines.push('', `Sitemap: ${absoluteUrl(origin, '/sitemap-index.xml')}`);
+    }
+  }
+
+  return new Response(`${lines.join('\n')}\n`, {
+    headers: { 'Content-Type': 'text/plain; charset=utf-8' },
+  });
+};

package/templates/astro-tailwind/base/src/styles/global.css

@@ -0,0 +1,330 @@
+@import 'tailwindcss';
+
+/* ===========================================================================
+   1. Palette
+   ---------------------------------------------------------------------------
+   Raw colour values live here as ordinary custom properties, and the Tailwind
+   theme below only points at them. That means the entire site re-themes from
+   this one block - light, dark and brand accent - without a single component
+   being duplicated or a line of JavaScript being shipped.
+
+   Neutral by design: the default look is ink on paper so it suits any client.
+   Set `theme.accent` in src/config/site.config.ts to introduce brand colour.
+   =========================================================================== */
+
+:root {
+  color-scheme: light;
+
+  --ck-background: #ffffff;
+  --ck-surface: #f7f8f9;
+  --ck-surface-strong: #eef0f2;
+  --ck-foreground: #0f1216;
+  --ck-muted: #5a616d;
+  --ck-border: #e4e6ea;
+  --ck-border-strong: #cfd3da;
+
+  /* Overridden per-site by BaseLayout when theme.accent is set. */
+  --ck-accent: #0f1216;
+  --ck-accent-foreground: #ffffff;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-appearance='light']) {
+    color-scheme: dark;
+
+    --ck-background: #0b0d10;
+    --ck-surface: #12151a;
+    --ck-surface-strong: #1a1f26;
+    --ck-foreground: #eceef1;
+    --ck-muted: #9aa2b1;
+    --ck-border: #232830;
+    --ck-border-strong: #333a45;
+
+    --ck-accent: #eceef1;
+    --ck-accent-foreground: #0b0d10;
+  }
+}
+
+:root[data-appearance='dark'] {
+  color-scheme: dark;
+
+  --ck-background: #0b0d10;
+  --ck-surface: #12151a;
+  --ck-surface-strong: #1a1f26;
+  --ck-foreground: #eceef1;
+  --ck-muted: #9aa2b1;
+  --ck-border: #232830;
+  --ck-border-strong: #333a45;
+
+  --ck-accent: #eceef1;
+  --ck-accent-foreground: #0b0d10;
+}
+
+/* ===========================================================================
+   2. Design tokens
+   ---------------------------------------------------------------------------
+   Tailwind v4 is configured in CSS. There is no tailwind.config.js.
+   Everything declared here becomes a utility: `bg-surface`, `text-muted`,
+   `text-display`, `rounded-lg`, `shadow-lifted`, and so on.
+   =========================================================================== */
+
+@theme {
+  --font-sans:
+    ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
+    'Noto Sans', sans-serif;
+  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
+
+  /* Semantic colours - components never reference a raw hex. */
+  --color-background: var(--ck-background);
+  --color-surface: var(--ck-surface);
+  --color-surface-strong: var(--ck-surface-strong);
+  --color-foreground: var(--ck-foreground);
+  --color-muted: var(--ck-muted);
+  --color-border: var(--ck-border);
+  --color-border-strong: var(--ck-border-strong);
+  --color-accent: var(--ck-accent);
+  --color-accent-foreground: var(--ck-accent-foreground);
+
+  /* Type scale. Display and h1 are fluid so long client names stay readable
+     from 320px upwards without a pile of breakpoint overrides. */
+  --text-display: clamp(2.5rem, 1.35rem + 5.1vw, 4.75rem);
+  --text-display--line-height: 1.03;
+  --text-display--letter-spacing: -0.035em;
+
+  --text-h1: clamp(2rem, 1.35rem + 2.9vw, 3.25rem);
+  --text-h1--line-height: 1.08;
+  --text-h1--letter-spacing: -0.03em;
+
+  --text-h2: clamp(1.5rem, 1.25rem + 1.1vw, 2rem);
+  --text-h2--line-height: 1.18;
+  --text-h2--letter-spacing: -0.02em;
+
+  --text-h3: 1.125rem;
+  --text-h3--line-height: 1.4;
+  --text-h3--letter-spacing: -0.01em;
+
+  --text-lead: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
+  --text-lead--line-height: 1.6;
+
+  --text-body: 1rem;
+  --text-body--line-height: 1.65;
+
+  --text-small: 0.875rem;
+  --text-small--line-height: 1.55;
+
+  --text-label: 0.75rem;
+  --text-label--line-height: 1.2;
+  --text-label--letter-spacing: 0.14em;
+
+  /* Restrained radii - nothing is a pill except deliberate controls. */
+  --radius-sm: 0.375rem;
+  --radius-md: 0.5rem;
+  --radius-lg: 0.75rem;
+  --radius-xl: 1rem;
+
+  /* Two shadows only, both subtle. Depth is used for hierarchy, not decoration. */
+  --shadow-subtle: 0 1px 2px 0 rgb(15 18 22 / 0.04), 0 1px 3px 0 rgb(15 18 22 / 0.06);
+  --shadow-lifted: 0 4px 12px -2px rgb(15 18 22 / 0.08), 0 12px 32px -8px rgb(15 18 22 / 0.1);
+
+  /* Vertical rhythm between major page blocks. */
+  --spacing-section: 4.5rem;
+  --spacing-section-lg: 7rem;
+}
+
+/* ===========================================================================
+   3. Base
+   =========================================================================== */
+
+@layer base {
+  html {
+    -webkit-text-size-adjust: 100%;
+    scroll-behavior: smooth;
+  }
+
+  body {
+    background-color: var(--color-background);
+    color: var(--color-foreground);
+    font-family: var(--font-sans);
+    font-size: var(--text-body);
+    line-height: 1.65;
+    -webkit-font-smoothing: antialiased;
+    text-rendering: optimizeLegibility;
+  }
+
+  /* One consistent focus treatment everywhere, always visible. */
+  :focus-visible {
+    outline: 2px solid var(--color-accent);
+    outline-offset: 3px;
+    border-radius: 2px;
+  }
+
+  ::selection {
+    background-color: var(--color-accent);
+    color: var(--color-accent-foreground);
+  }
+
+  /* Long client names and URLs should wrap, never overflow the viewport. */
+  h1,
+  h2,
+  h3,
+  p {
+    overflow-wrap: break-word;
+  }
+}
+
+/* ===========================================================================
+   4. Components
+   ---------------------------------------------------------------------------
+   Written as plain CSS against the tokens above so restyling a button is one
+   edit here rather than a search across every page.
+   =========================================================================== */
+
+@layer components {
+  .page-shell {
+    display: flex;
+    flex-direction: column;
+    min-height: 100dvh;
+  }
+
+  .container-page {
+    width: 100%;
+    /* Set by BaseLayout's `measure` prop, so header, content and footer all
+       share one column width instead of each choosing its own. */
+    max-width: var(--ck-measure, 72rem);
+    margin-inline: auto;
+    padding-inline: 1.25rem;
+  }
+
+  @media (min-width: 640px) {
+    .container-page {
+      padding-inline: 2rem;
+    }
+  }
+
+  /* Buttons ---------------------------------------------------------------- */
+
+  .btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    min-height: 2.75rem; /* comfortable touch target */
+    padding: 0.625rem 1.25rem;
+    border: 1px solid transparent;
+    border-radius: var(--radius-md);
+    font-size: var(--text-small);
+    font-weight: 500;
+    line-height: 1;
+    text-decoration: none;
+    cursor: pointer;
+    transition:
+      background-color 160ms ease,
+      border-color 160ms ease,
+      color 160ms ease,
+      transform 160ms ease;
+  }
+
+  .btn:active {
+    transform: translateY(1px);
+  }
+
+  .btn-primary {
+    background-color: var(--color-accent);
+    color: var(--color-accent-foreground);
+  }
+
+  .btn-primary:hover {
+    background-color: color-mix(in oklab, var(--color-accent) 86%, var(--color-background));
+  }
+
+  .btn-secondary {
+    background-color: transparent;
+    border-color: var(--color-border-strong);
+    color: var(--color-foreground);
+  }
+
+  .btn-secondary:hover {
+    background-color: var(--color-surface);
+    border-color: var(--color-foreground);
+  }
+
+  /* Eyebrow ---------------------------------------------------------------- */
+
+  .eyebrow {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.625rem;
+    font-size: var(--text-label);
+    font-weight: 600;
+    letter-spacing: var(--text-label--letter-spacing);
+    text-transform: uppercase;
+    color: var(--color-muted);
+  }
+
+  .eyebrow::before {
+    content: '';
+    width: 1.75rem;
+    height: 1px;
+    background-color: var(--color-border-strong);
+  }
+
+  /* Inline text links ------------------------------------------------------ */
+
+  .link {
+    color: var(--color-foreground);
+    text-decoration: underline;
+    text-decoration-color: var(--color-border-strong);
+    text-underline-offset: 0.25em;
+    transition: text-decoration-color 160ms ease;
+  }
+
+  .link:hover {
+    text-decoration-color: var(--color-accent);
+  }
+
+  /* Hairline rule ---------------------------------------------------------- */
+
+  .rule {
+    border: 0;
+    border-top: 1px solid var(--color-border);
+  }
+}
+
+/* ===========================================================================
+   5. Motion
+   ---------------------------------------------------------------------------
+   Entrance animation is applied only when the visitor has not asked for
+   reduced motion, so the default resting state is fully visible. Nothing is
+   ever hidden behind an animation that might not run.
+   =========================================================================== */
+
+@media (prefers-reduced-motion: no-preference) {
+  .rise {
+    animation: ck-rise 640ms cubic-bezier(0.22, 0.68, 0.24, 1) both;
+  }
+
+  @keyframes ck-rise {
+    from {
+      opacity: 0;
+      transform: translateY(0.625rem);
+    }
+    to {
+      opacity: 1;
+      transform: none;
+    }
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  html {
+    scroll-behavior: auto;
+  }
+
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}

package/templates/astro-tailwind/base/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "astro/tsconfigs/strict",
+  "include": [".astro/types.d.ts", "**/*"],
+  "exclude": ["dist"],
+  "compilerOptions": {
+    "strictNullChecks": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noUncheckedIndexedAccess": true
+  }
+}

package/templates/astro-tailwind/modes/coming-soon/_package.json

@@ -0,0 +1,3 @@
+{
+  "keywords": ["landing-page", "astro"]
+}

package/templates/astro-tailwind/modes/coming-soon/src/pages/index.astro

@@ -0,0 +1,149 @@
+---
+import Brand from '../components/Brand.astro';
+import LaunchNotice from '../components/LaunchNotice.astro';
+import SocialLinks from '../components/SocialLinks.astro';
+import { CONTACT, LAUNCH, SITE, SOCIAL } from '../config/site.config.ts';
+import BaseLayout from '../layouts/BaseLayout.astro';
+
+const hasEmail = CONTACT.email !== '';
+const hasSocial = SOCIAL.some((link) => link.label !== '' && link.href !== '');
+const hasLaunch = LAUNCH.enabled && LAUNCH.date !== '';
+---
+
+{/* The page carries its own brand lockup, so a header would only repeat it. */}
+<BaseLayout showHeader={false} measure="narrow">
+  <div class="hero">
+    <div class="glow" aria-hidden="true"></div>
+
+    <div class="container-page inner">
+      <div class="brand rise">
+        <Brand size="lg" />
+      </div>
+
+      <p class="eyebrow rise" style="animation-delay: 60ms">Coming soon</p>
+
+      <h1 class="rise" style="animation-delay: 120ms">{SITE.name}</h1>
+
+      <p class="lead rise" style="animation-delay: 180ms">{SITE.description}</p>
+
+      {
+        hasLaunch && (
+          <div class="rise" style="animation-delay: 240ms">
+            <LaunchNotice />
+          </div>
+        )
+      }
+
+      {
+        (hasEmail || hasSocial) && (
+          <div class="actions rise" style="animation-delay: 300ms">
+            {hasEmail && (
+              <a class="btn btn-primary" href={`mailto:${CONTACT.email}`}>
+                Get in touch
+              </a>
+            )}
+            {hasSocial && <SocialLinks label="Social links" />}
+          </div>
+        )
+      }
+
+      {
+        CONTACT.location !== '' && (
+          <p class="location rise" style="animation-delay: 340ms">
+            {CONTACT.location}
+          </p>
+        )
+      }
+    </div>
+  </div>
+</BaseLayout>
+
+<style>
+  .hero {
+    position: relative;
+    display: flex;
+    align-items: center;
+    min-height: calc(100dvh - 6rem);
+    padding-block: var(--spacing-section);
+    overflow: hidden;
+  }
+
+  /* One soft, very low-contrast wash tinted by the accent. No blobs and no
+     page-wide gradient - just enough that the page does not read as a blank
+     sheet of paper. */
+  .glow {
+    position: absolute;
+    inset-inline: 0;
+    top: -30vh;
+    height: 70vh;
+    background: radial-gradient(
+      55% 60% at 50% 50%,
+      color-mix(in oklab, var(--color-accent) 8%, transparent),
+      transparent 70%
+    );
+    pointer-events: none;
+  }
+
+  .inner {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 1.5rem;
+  }
+
+  .brand {
+    margin-bottom: 0.5rem;
+  }
+
+  h1 {
+    margin: 0;
+    max-width: 16ch;
+    font-size: var(--text-display);
+    line-height: var(--text-display--line-height);
+    letter-spacing: var(--text-display--letter-spacing);
+    font-weight: 600;
+    text-wrap: balance;
+  }
+
+  .lead {
+    margin: 0;
+    max-width: 52ch;
+    color: var(--color-muted);
+    font-size: var(--text-lead);
+    line-height: var(--text-lead--line-height);
+    text-wrap: pretty;
+  }
+
+  .actions {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 1rem 1.75rem;
+    margin-top: 0.5rem;
+  }
+
+  .location {
+    margin: 0;
+    color: var(--color-muted);
+    font-size: var(--text-small);
+  }
+
+  /* On the narrowest screens the call to action goes full width so it is an
+     easy target, and the headline gets the full measure. */
+  @media (max-width: 30rem) {
+    .actions {
+      flex-direction: column;
+      align-items: stretch;
+      width: 100%;
+    }
+
+    .actions :global(.btn) {
+      width: 100%;
+    }
+
+    h1 {
+      max-width: none;
+    }
+  }
+</style>

package/templates/astro-tailwind/modes/full/_package.json

@@ -0,0 +1,3 @@
+{
+  "keywords": ["website", "astro"]
+}