create-swift-rust 0.3.1 → 0.7.0

package/templates/default/src/app/globals.css

@@ -0,0 +1,238 @@
+@import "tailwindcss";
+
+@theme {
+  --color-bg: #fafaf9;
+  --color-surface: #ffffff;
+  --color-surface-2: #f5f5f4;
+  --color-border: #e7e5e4;
+  --color-border-strong: #d6d3d1;
+  --color-fg: #0a0a0a;
+  --color-fg-muted: #57534e;
+  --color-fg-subtle: #78716c;
+  --color-accent: #ea580c;
+  --color-accent-hover: #c2410c;
+  --color-accent-soft: #fff7ed;
+  --color-success: #16a34a;
+  --color-danger: #dc2626;
+
+  --font-sans: var(--font-sans), ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  --font-mono: var(--font-mono), ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
+  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", serif;
+
+  --radius-sm: 6px;
+  --radius-md: 10px;
+  --radius-lg: 14px;
+
+  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.04);
+  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.06), 0 1px 2px -1px rgb(0 0 0 / 0.04);
+  --shadow-md: 0 4px 12px -2px rgb(0 0 0 / 0.06), 0 2px 4px -2px rgb(0 0 0 / 0.04);
+}
+
+@variant dark (&:where(.dark, .dark *));
+
+@layer base {
+  * {
+    border-color: var(--color-border);
+  }
+  html {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-rendering: optimizeLegibility;
+  }
+  body {
+    background: var(--color-bg);
+    color: var(--color-fg);
+    font-family: var(--font-sans);
+    font-feature-settings: "ss01", "cv11";
+  }
+  ::selection {
+    background: var(--color-accent);
+    color: white;
+  }
+  a {
+    color: inherit;
+    text-decoration: none;
+  }
+  hr {
+    border: 0;
+    border-top: 1px solid var(--color-border);
+  }
+}
+
+@utility container-page {
+  max-width: 72rem;
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+}
+
+@utility container-prose {
+  max-width: 42rem;
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+}
+
+@layer components {
+  .btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    height: 2.5rem;
+    padding: 0 1rem;
+    border-radius: var(--radius-md);
+    font-size: 0.875rem;
+    font-weight: 500;
+    transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
+    cursor: pointer;
+    border: 1px solid transparent;
+    white-space: nowrap;
+  }
+  .btn-primary {
+    background: var(--color-fg);
+    color: var(--color-bg);
+  }
+  .btn-primary:hover {
+    background: #1c1c1c;
+  }
+  .btn-accent {
+    background: var(--color-accent);
+    color: white;
+  }
+  .btn-accent:hover {
+    background: var(--color-accent-hover);
+  }
+  .btn-outline {
+    background: transparent;
+    color: var(--color-fg);
+    border-color: var(--color-border-strong);
+  }
+  .btn-outline:hover {
+    background: var(--color-surface-2);
+  }
+  .btn-ghost {
+    background: transparent;
+    color: var(--color-fg-muted);
+  }
+  .btn-ghost:hover {
+    background: var(--color-surface-2);
+    color: var(--color-fg);
+  }
+  .btn-sm {
+    height: 2rem;
+    padding: 0 0.75rem;
+    font-size: 0.8125rem;
+  }
+  .btn-lg {
+    height: 2.75rem;
+    padding: 0 1.25rem;
+    font-size: 0.9375rem;
+  }
+
+  .card {
+    background: var(--color-surface);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-lg);
+  }
+
+  .badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.375rem;
+    padding: 0.125rem 0.5rem;
+    font-size: 0.75rem;
+    font-weight: 500;
+    border-radius: 999px;
+    background: var(--color-surface-2);
+    color: var(--color-fg-muted);
+    border: 1px solid var(--color-border);
+  }
+  .badge-accent {
+    background: var(--color-accent-soft);
+    color: var(--color-accent);
+    border-color: transparent;
+  }
+  .badge-success {
+    background: #f0fdf4;
+    color: #15803d;
+    border-color: transparent;
+  }
+  .badge-dot::before {
+    content: "";
+    display: inline-block;
+    width: 6px;
+    height: 6px;
+    border-radius: 999px;
+    background: currentColor;
+  }
+
+  .input {
+    display: block;
+    width: 100%;
+    height: 2.5rem;
+    padding: 0 0.75rem;
+    border-radius: var(--radius-md);
+    background: var(--color-surface);
+    border: 1px solid var(--color-border);
+    color: var(--color-fg);
+    font-size: 0.875rem;
+    transition: border-color 120ms ease, box-shadow 120ms ease;
+  }
+  .input:focus {
+    outline: none;
+    border-color: var(--color-accent);
+    box-shadow: 0 0 0 3px var(--color-accent-soft);
+  }
+  .textarea {
+    display: block;
+    width: 100%;
+    min-height: 8rem;
+    padding: 0.625rem 0.75rem;
+    border-radius: var(--radius-md);
+    background: var(--color-surface);
+    border: 1px solid var(--color-border);
+    color: var(--color-fg);
+    font-size: 0.875rem;
+    font-family: var(--font-sans);
+    resize: vertical;
+    transition: border-color 120ms ease, box-shadow 120ms ease;
+  }
+  .textarea:focus {
+    outline: none;
+    border-color: var(--color-accent);
+    box-shadow: 0 0 0 3px var(--color-accent-soft);
+  }
+
+  .link {
+    color: var(--color-accent);
+    transition: color 120ms ease;
+  }
+  .link:hover {
+    color: var(--color-accent-hover);
+  }
+
+  .divider {
+    height: 1px;
+    background: var(--color-border);
+    border: 0;
+  }
+}
+
+@keyframes pulse-dot {
+  0%, 100% { opacity: 1; transform: scale(1); }
+  50% { opacity: 0.6; transform: scale(0.9); }
+}
+.pulse-dot {
+  animation: pulse-dot 2s ease-in-out infinite;
+}
+
+@keyframes fade-in {
+  from { opacity: 0; transform: translateY(4px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+.fade-in {
+  animation: fade-in 320ms ease-out both;
+}

package/templates/default/src/app/images/page.tsx

@@ -0,0 +1,56 @@
+import type { Metadata } from "swift-rust";
+import Image from "swift-rust/image";
+import { BLUR } from "@/lib/blur";
+
+export const metadata: Metadata = { title: "Images" };
+
+const IMAGES = [
+  { src: "/samples/axelborg-towers-modern-architecture.jpg", alt: "Modern architecture towers", w: 3456, h: 2635, label: "4:3" },
+  { src: "/samples/full-shot-woman-taking-selfie.jpg", alt: "Woman taking a selfie", w: 5327, h: 7990, label: "2:3" },
+  { src: "/samples/metaverse-concept-collage-design.jpg", alt: "Metaverse concept collage", w: 6000, h: 4000, label: "3:2" },
+  { src: "/samples/happy-black-parents-with-kids-making-video-call-smart-phone-home.jpg", alt: "Family on a video call at home", w: 6000, h: 4000, label: "3:2" },
+  { src: "/samples/brown-high-skyscrapers.jpg", alt: "Tall brown skyscrapers", w: 4000, h: 5000, label: "4:5" },
+  { src: "/samples/close-up-portrait-gorgeous-young-woman.jpg", alt: "Close-up portrait of a young woman", w: 8494, h: 5663, label: "3:2" },
+];
+
+export default function ImagesPage() {
+  return (
+    <div className="container-page py-16 sm:py-20">
+      <p className="text-[0.75rem] font-semibold uppercase tracking-wider text-[var(--color-fg-subtle)]">
+        Showcase
+      </p>
+      <h1 className="mt-2 text-4xl font-semibold tracking-tight sm:text-5xl">Images</h1>
+      <p className="mt-4 max-w-2xl text-[var(--color-fg-muted)]">
+        The Image component handles sizing, format negotiation, and lazy loading. These are local
+        sample photos — replace with your own.
+      </p>
+
+      <div className="mt-12 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
+        {IMAGES.map((img) => (
+          <figure
+            key={img.src}
+            className="group overflow-hidden rounded-2xl border border-[var(--color-border)] bg-[var(--color-surface)]"
+          >
+            <div className="relative aspect-[4/3] overflow-hidden bg-[var(--color-surface-2)]">
+              <Image
+                src={img.src}
+                alt={img.alt}
+                width={img.w}
+                height={img.h}
+                placeholder="blur"
+                blurDataURL={BLUR}
+                className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105"
+              />
+            </div>
+            <figcaption className="flex items-center justify-between border-t border-[var(--color-border)] px-4 py-3 text-[0.8125rem]">
+              <span className="font-mono text-[var(--color-fg-muted)]">
+                {img.src.split("/").pop()}
+              </span>
+              <span className="badge">{img.label}</span>
+            </figcaption>
+          </figure>
+        ))}
+      </div>
+    </div>
+  );
+}

package/templates/default/src/app/layout.tsx

@@ -0,0 +1,44 @@
+import type { ReactNode } from "react";
+import "./globals.css";
+import { Footer } from "@/components/footer";
+import { Nav } from "@/components/nav";
+import { Geist, GeistMono } from "swift-rust/font/google";
+
+const geist = Geist({ variable: true, subsets: ["latin"] });
+const geistMono = GeistMono({ variable: true, subsets: ["latin"] });
+
+const fontSansClass = geist.className;
+const fontMonoClass = geistMono.className;
+
+export const metadata = {
+  title: {
+    template: "%s | Swift Rust",
+    default: "Swift Rust — The React framework powered with Rust + Bun",
+  },
+  description:
+    "Swift Rust is a Next.js-compatible full-stack React framework powered with Rust + Bun. TSX, streaming SSR, four rendering modes, 10x faster than Next.js, single binary deploy.",
+  openGraph: {
+    title: "Swift Rust",
+    description: "The React framework powered with Rust + Bun.",
+    type: "website",
+  },
+};
+
+export default function RootLayout({ children }: { children: ReactNode }) {
+  return (
+    <html
+      lang="en"
+      className={`${geist.variable ?? ""} ${geistMono.variable ?? ""} ${fontSansClass} ${fontMonoClass}`.trim()}
+      style={{
+        ["--font-sans" as string]: "'Geist', system-ui, sans-serif",
+        ["--font-mono" as string]: "'Geist Mono', ui-monospace, monospace",
+      }}
+    >
+      <body className="min-h-screen bg-[var(--color-bg)] font-sans text-[var(--color-fg)] antialiased">
+        <Nav />
+        <main className="min-h-[calc(100vh-3.5rem)]">{children}</main>
+        <Footer />
+      </body>
+    </html>
+  );
+}

package/templates/default/src/app/loading.tsx

@@ -0,0 +1,13 @@
+export default function GlobalLoading() {
+  return (
+    <div className="container-page py-20">
+      <div className="mx-auto max-w-md space-y-4">
+        <div className="h-3 w-24 animate-pulse rounded bg-[var(--color-surface-2)]" />
+        <div className="h-9 w-72 animate-pulse rounded bg-[var(--color-surface-2)]" />
+        <div className="h-4 w-96 animate-pulse rounded bg-[var(--color-surface-2)]" />
+        <div className="h-4 w-80 animate-pulse rounded bg-[var(--color-surface-2)]" />
+        <div className="mt-8 h-40 w-full animate-pulse rounded-2xl bg-[var(--color-surface-2)]" />
+      </div>
+    </div>
+  );
+}

package/templates/default/src/app/not-found.tsx

@@ -0,0 +1,25 @@
+import { Link } from "swift-rust";
+
+export default function GlobalNotFound() {
+  return (
+    <div className="container-page py-24 sm:py-32">
+      <div className="mx-auto max-w-xl text-center">
+        <p className="font-mono text-[0.875rem] font-medium text-[var(--color-accent)]">404</p>
+        <h1 className="mt-3 text-balance text-5xl font-semibold tracking-tight sm:text-6xl">
+          Page not found.
+        </h1>
+        <p className="mt-5 text-pretty text-lg leading-relaxed text-[var(--color-fg-muted)]">
+          The page you were looking for has moved, was renamed, or never existed.
+        </p>
+        <div className="mt-8 flex justify-center gap-2">
+          <Link href="/" className="btn btn-primary">
+            Back to home
+          </Link>
+          <Link href="/blog" className="btn btn-outline">
+            Read the blog
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+}