create-swift-rust 0.3.1 → 0.7.0

package/templates/default/src/app/blog/[slug]/page.tsx

@@ -0,0 +1,116 @@
+import { formatDate } from "@/lib/format";
+import { BLUR } from "@/lib/blur";
+import { getPost, posts } from "@/lib/posts";
+import type { Metadata } from "swift-rust";
+import Image from "swift-rust/image";
+import { Link } from "swift-rust";
+import { notFound } from "swift-rust/router";
+
+export function generateStaticParams() {
+  return posts.map((p) => ({ slug: p.slug }));
+}
+
+export function generateMetadata({ params }: { params: { slug: string } }): Metadata {
+  const post = getPost(params.slug);
+  if (!post) return { title: "Not found" };
+  return {
+    title: post.title,
+    description: post.excerpt,
+  };
+}
+
+export default function BlogPostPage({ params }: { params: { slug: string } }) {
+  const post = getPost(params.slug);
+  if (!post) notFound();
+
+  const related = posts.filter((p) => p.slug !== post.slug).slice(0, 2);
+
+  return (
+    <article className="container-prose py-16 sm:py-20">
+      <Link
+        href="/blog"
+        className="inline-flex items-center gap-1.5 text-[0.875rem] text-[var(--color-fg-muted)] transition-colors hover:text-[var(--color-fg)]"
+      >
+        <svg
+          viewBox="0 0 24 24"
+          className="h-3.5 w-3.5"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+        >
+          <path d="M19 12H5M11 18l-6-6 6-6" strokeLinecap="round" strokeLinejoin="round" />
+        </svg>
+        All posts
+      </Link>
+
+      <header className="mt-10 border-b border-[var(--color-border)] pb-10">
+        <div className="flex flex-wrap items-center gap-2">
+          {post.tags.map((tag) => (
+            <span key={tag} className="badge badge-accent">
+              {tag}
+            </span>
+          ))}
+        </div>
+        <h1 className="mt-5 text-balance text-4xl font-semibold tracking-tight sm:text-5xl">
+          {post.title}
+        </h1>
+        <p className="mt-5 text-pretty text-lg leading-relaxed text-[var(--color-fg-muted)]">
+          {post.excerpt}
+        </p>
+        <div className="mt-8 flex items-center gap-3 text-[0.875rem] text-[var(--color-fg-subtle)]">
+          <span className="font-medium text-[var(--color-fg)]">{post.author.name}</span>
+          <span>·</span>
+          <time dateTime={post.date}>{formatDate(post.date)}</time>
+          <span>·</span>
+          <span>{post.readingTime}</span>
+        </div>
+      </header>
+
+      {post.cover ? (
+        <Image
+          src={post.cover}
+          alt={post.title}
+          width={1200}
+          height={630}
+          placeholder="blur"
+          blurDataURL={BLUR}
+          loader={({ src }) => src}
+          className="mt-10 aspect-[1200/630] w-full rounded-2xl border border-[var(--color-border)] object-cover"
+        />
+      ) : null}
+
+      <div className="prose prose-stone mt-10 max-w-none text-[1.0625rem] leading-[1.8] text-[var(--color-fg)]">
+        {post.body.split("\n\n").map((paragraph, i) => (
+          <p key={i} className="mb-6">
+            {paragraph}
+          </p>
+        ))}
+      </div>
+
+      {related.length > 0 ? (
+        <div className="mt-20 border-t border-[var(--color-border)] pt-12">
+          <h2 className="text-[0.75rem] font-semibold uppercase tracking-wider text-[var(--color-fg-subtle)]">
+            Keep reading
+          </h2>
+          <ul className="mt-6 grid gap-px overflow-hidden rounded-xl border border-[var(--color-border)] bg-[var(--color-border)] sm:grid-cols-2">
+            {related.map((p) => (
+              <li key={p.slug} className="bg-[var(--color-surface)]">
+                <Link
+                  href={`/blog/${p.slug}`}
+                  className="group block p-5 transition-colors hover:bg-[var(--color-surface-2)]"
+                >
+                  <p className="text-[0.75rem] text-[var(--color-fg-subtle)]">
+                    <time dateTime={p.date}>{formatDate(p.date)}</time>
+                  </p>
+                  <h3 className="mt-2 text-[1rem] font-semibold text-[var(--color-fg)] group-hover:text-[var(--color-accent)]">
+                    {p.title}
+                  </h3>
+                </Link>
+              </li>
+            ))}
+          </ul>
+        </div>
+      ) : null}
+    </article>
+  );
+}

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

@@ -0,0 +1,101 @@
+import { formatDate } from "@/lib/format";
+import { getAllTags, posts } from "@/lib/posts";
+import type { Metadata } from "swift-rust";
+import { Link } from "swift-rust";
+
+export const metadata: Metadata = {
+  title: "Blog",
+  description: "Field notes, release announcements, and the occasional rant about bundlers.",
+};
+
+export default function BlogIndexPage() {
+  const tags = getAllTags();
+  const [featured, ...rest] = posts;
+
+  return (
+    <div className="container-page py-16 sm:py-20">
+      <div className="mx-auto max-w-2xl">
+        <h1 className="text-4xl font-semibold tracking-tight sm:text-5xl">Blog</h1>
+        <p className="mt-4 text-[var(--color-fg-muted)]">
+          Field notes, release announcements, and the occasional rant about bundlers.
+        </p>
+      </div>
+
+      {featured ? (
+        <Link
+          href={`/blog/${featured.slug}`}
+          className="group mt-16 grid gap-8 border-b border-[var(--color-border)] pb-16 lg:grid-cols-[1.3fr_1fr] lg:items-center"
+        >
+          <div>
+            <span className="badge badge-accent">Featured</span>
+            <h2 className="mt-4 text-3xl font-semibold tracking-tight text-[var(--color-fg)] group-hover:text-[var(--color-accent)] sm:text-4xl">
+              {featured.title}
+            </h2>
+            <p className="mt-4 text-pretty leading-relaxed text-[var(--color-fg-muted)]">
+              {featured.excerpt}
+            </p>
+            <div className="mt-6 flex items-center gap-3 text-[0.8125rem] text-[var(--color-fg-subtle)]">
+              <span>{featured.author.name}</span>
+              <span>·</span>
+              <time dateTime={featured.date}>{formatDate(featured.date)}</time>
+              <span>·</span>
+              <span>{featured.readingTime}</span>
+            </div>
+          </div>
+          <div className="aspect-[4/3] overflow-hidden rounded-2xl border border-[var(--color-border)] bg-gradient-to-br from-[var(--color-accent-soft)] via-[var(--color-surface)] to-[var(--color-surface-2)]" />
+        </Link>
+      ) : null}
+
+      <div className="mt-12 flex flex-wrap items-center gap-2">
+        <span className="text-[0.75rem] font-medium uppercase tracking-wider text-[var(--color-fg-subtle)]">
+          Tags:
+        </span>
+        <Link
+          href="/blog"
+          className="badge hover:border-[var(--color-border-strong)] hover:bg-[var(--color-surface-2)]"
+        >
+          All
+        </Link>
+        {tags.map((tag) => (
+          <Link
+            key={tag}
+            href={`/blog/tag/${tag}`}
+            className="badge hover:border-[var(--color-border-strong)] hover:bg-[var(--color-surface-2)]"
+          >
+            {tag}
+          </Link>
+        ))}
+      </div>
+
+      <ul className="mt-12 grid gap-px overflow-hidden rounded-2xl border border-[var(--color-border)] bg-[var(--color-border)] sm:grid-cols-2">
+        {rest.map((post) => (
+          <li key={post.slug} className="bg-[var(--color-surface)]">
+            <Link
+              href={`/blog/${post.slug}`}
+              className="group flex h-full flex-col p-6 transition-colors hover:bg-[var(--color-surface-2)]"
+            >
+              <div className="flex items-center gap-2 text-[0.75rem] text-[var(--color-fg-subtle)]">
+                <time dateTime={post.date}>{formatDate(post.date)}</time>
+                <span>·</span>
+                <span>{post.readingTime}</span>
+              </div>
+              <h3 className="mt-3 text-[1.125rem] font-semibold text-[var(--color-fg)] group-hover:text-[var(--color-accent)]">
+                {post.title}
+              </h3>
+              <p className="mt-2 flex-1 text-[0.875rem] leading-relaxed text-[var(--color-fg-muted)]">
+                {post.excerpt}
+              </p>
+              <div className="mt-6 flex flex-wrap gap-1.5">
+                {post.tags.map((tag) => (
+                  <span key={tag} className="badge">
+                    {tag}
+                  </span>
+                ))}
+              </div>
+            </Link>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}

package/templates/default/src/app/blog/tag/[tag]/page.tsx

@@ -0,0 +1,82 @@
+import { formatDate } from "@/lib/format";
+import { getAllTags, getPostsByTag } from "@/lib/posts";
+import type { Metadata } from "swift-rust";
+import { Link } from "swift-rust";
+import { notFound } from "swift-rust/router";
+
+export function generateStaticParams() {
+  return getAllTags().map((tag) => ({ tag }));
+}
+
+export function generateMetadata({ params }: { params: { tag: string } }): Metadata {
+  return { title: `Tag: ${params.tag}`, description: `Posts tagged ${params.tag}` };
+}
+
+export default function TagPage({ params }: { params: { tag: string } }) {
+  const tag = params.tag;
+  const tagged = getPostsByTag(tag);
+  if (tagged.length === 0) notFound();
+
+  return (
+    <div className="container-page py-16 sm:py-20">
+      <Link
+        href="/blog"
+        className="inline-flex items-center gap-1.5 text-[0.875rem] text-[var(--color-fg-muted)] transition-colors hover:text-[var(--color-fg)]"
+      >
+        <svg
+          viewBox="0 0 24 24"
+          className="h-3.5 w-3.5"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+        >
+          <path d="M19 12H5M11 18l-6-6 6-6" strokeLinecap="round" strokeLinejoin="round" />
+        </svg>
+        All posts
+      </Link>
+      <div className="mt-8">
+        <p className="text-[0.75rem] font-semibold uppercase tracking-wider text-[var(--color-fg-subtle)]">
+          Tag
+        </p>
+        <h1 className="mt-2 text-4xl font-semibold tracking-tight sm:text-5xl">{tag}</h1>
+        <p className="mt-3 text-[var(--color-fg-muted)]">
+          {tagged.length} {tagged.length === 1 ? "post" : "posts"}
+        </p>
+      </div>
+
+      <ul className="mt-12 divide-y divide-[var(--color-border)] border-y border-[var(--color-border)]">
+        {tagged.map((post) => (
+          <li key={post.slug}>
+            <Link
+              href={`/blog/${post.slug}`}
+              className="group flex items-start justify-between gap-6 py-6 transition-colors"
+            >
+              <div className="flex-1">
+                <div className="flex items-center gap-2 text-[0.75rem] text-[var(--color-fg-subtle)]">
+                  <time dateTime={post.date}>{formatDate(post.date)}</time>
+                  <span>·</span>
+                  <span>{post.readingTime}</span>
+                </div>
+                <h3 className="mt-2 text-[1.0625rem] font-semibold text-[var(--color-fg)] group-hover:text-[var(--color-accent)]">
+                  {post.title}
+                </h3>
+                <p className="mt-1.5 text-[0.875rem] leading-relaxed text-[var(--color-fg-muted)]">
+                  {post.excerpt}
+                </p>
+              </div>
+              <svg
+                viewBox="0 0 24 24"
+                className="mt-1 h-4 w-4 shrink-0 text-[var(--color-fg-subtle)] transition-all group-hover:translate-x-0.5 group-hover:text-[var(--color-fg)]"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+              >
+                <path d="M5 12h14M13 6l6 6-6 6" strokeLinecap="round" strokeLinejoin="round" />
+              </svg>
+            </Link>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}

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

@@ -0,0 +1,131 @@
+import type { Metadata } from "swift-rust";
+import { Link } from "swift-rust";
+import { siteConfig } from "@/lib/site.config";
+
+export const metadata: Metadata = {
+  title: "Contact",
+  description: "Get in touch with the Swift Rust team.",
+};
+
+const CHANNELS = [
+  {
+    name: "GitHub",
+    handle: "colesites/swift-rust",
+    href: siteConfig.githubUrl,
+    description: "Issues, PRs, and discussion.",
+  },
+  {
+    name: "Discord",
+    handle: "discord.gg/swift-rust",
+    href: "https://discord.gg/swift-rust",
+    description: "Real-time help and announcements.",
+  },
+  {
+    name: "Email",
+    handle: "hello@swift-rust.dev",
+    href: "mailto:hello@swift-rust.dev",
+    description: "Security reports and private inquiries.",
+  },
+];
+
+export default function ContactPage() {
+  return (
+    <div className="container-page py-16 sm:py-20">
+      <div className="grid gap-16 lg:grid-cols-[1fr_1fr]">
+        <div>
+          <p className="text-[0.75rem] font-semibold uppercase tracking-wider text-[var(--color-fg-subtle)]">
+            Contact
+          </p>
+          <h1 className="mt-2 text-balance text-4xl font-semibold tracking-tight sm:text-5xl">
+            Let&apos;s talk.
+          </h1>
+          <p className="mt-5 text-pretty text-lg leading-relaxed text-[var(--color-fg-muted)]">
+            Bug reports, feature requests, partnership ideas, or just to say hi. Pick a channel or
+            use the form.
+          </p>
+
+          <ul className="mt-10 space-y-6">
+            {CHANNELS.map((c) => (
+              <li key={c.name} className="group">
+                <Link
+                  href={c.href}
+                  className="flex items-start justify-between gap-6 border-b border-[var(--color-border)] pb-6 transition-colors last:border-0"
+                >
+                  <div>
+                    <p className="text-[0.75rem] font-semibold uppercase tracking-wider text-[var(--color-fg-subtle)]">
+                      {c.name}
+                    </p>
+                    <p className="mt-1 font-mono text-[0.9375rem] text-[var(--color-fg)] group-hover:text-[var(--color-accent)]">
+                      {c.handle}
+                    </p>
+                    <p className="mt-1 text-[0.875rem] text-[var(--color-fg-muted)]">
+                      {c.description}
+                    </p>
+                  </div>
+                  <svg
+                    viewBox="0 0 24 24"
+                    className="mt-1 h-4 w-4 shrink-0 text-[var(--color-fg-subtle)] transition-all group-hover:translate-x-0.5 group-hover:text-[var(--color-fg)]"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="2"
+                  >
+                    <path d="M5 12h14M13 6l6 6-6 6" strokeLinecap="round" strokeLinejoin="round" />
+                  </svg>
+                </Link>
+              </li>
+            ))}
+          </ul>
+        </div>
+
+        <div>
+          <form className="card p-6 sm:p-8">
+            <h2 className="text-[0.95rem] font-semibold">Send a message</h2>
+            <p className="mt-1 text-[0.8125rem] text-[var(--color-fg-muted)]">
+              We&apos;ll get back to you within a business day.
+            </p>
+            <div className="mt-6 space-y-5">
+              <div>
+                <label htmlFor="contact-name" className="block text-[0.8125rem] font-medium">
+                  Name
+                </label>
+                <input id="contact-name" name="name" type="text" className="input mt-1.5" />
+              </div>
+              <div>
+                <label htmlFor="contact-email" className="block text-[0.8125rem] font-medium">
+                  Email
+                </label>
+                <input id="contact-email" name="email" type="email" className="input mt-1.5" />
+              </div>
+              <div>
+                <label htmlFor="contact-subject" className="block text-[0.8125rem] font-medium">
+                  Subject
+                </label>
+                <select id="contact-subject" name="subject" className="input mt-1.5">
+                  <option>Bug report</option>
+                  <option>Feature request</option>
+                  <option>Partnership</option>
+                  <option>Other</option>
+                </select>
+              </div>
+              <div>
+                <label htmlFor="contact-message" className="block text-[0.8125rem] font-medium">
+                  Message
+                </label>
+                <textarea
+                  id="contact-message"
+                  name="message"
+                  rows={5}
+                  className="textarea mt-1.5"
+                  placeholder="What's on your mind?"
+                />
+              </div>
+              <button type="submit" className="btn btn-primary w-full">
+                Send message
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/default/src/app/dashboard/analytics/page.tsx

@@ -0,0 +1,103 @@
+import { formatNumber } from "@/lib/format";
+import { trafficMax, trafficSeries } from "@/lib/stats";
+import type { Metadata } from "swift-rust";
+
+export const metadata: Metadata = { title: "Analytics" };
+
+const SOURCES = [
+  { name: "Direct", value: 412000, pct: 42 },
+  { name: "Search", value: 281000, pct: 28 },
+  { name: "Social", value: 175000, pct: 18 },
+  { name: "Referral", value: 121000, pct: 12 },
+];
+
+const PAGES = [
+  { path: "/", views: 982000, avg: "1:42" },
+  { path: "/blog/introducing-swift-rust", views: 218000, avg: "3:18" },
+  { path: "/dashboard", views: 154000, avg: "2:05" },
+  { path: "/fonts", views: 98000, avg: "0:48" },
+  { path: "/blog/streaming-ssr-in-rust", views: 87000, avg: "4:12" },
+];
+
+export default function AnalyticsPage() {
+  return (
+    <div className="px-6 py-10 sm:px-10">
+      <p className="text-[0.75rem] font-semibold uppercase tracking-wider text-[var(--color-fg-subtle)]">
+        Dashboard
+      </p>
+      <h1 className="mt-1 text-3xl font-semibold tracking-tight">Analytics</h1>
+      <p className="mt-1 text-[var(--color-fg-muted)]">Last 7 days, all projects combined.</p>
+
+      <div className="mt-8 card p-6">
+        <div className="flex items-center justify-between">
+          <h2 className="text-[0.95rem] font-semibold">Requests over time</h2>
+          <span className="text-[0.75rem] text-[var(--color-fg-subtle)]">
+            Total: {formatNumber(trafficSeries.reduce((s, d) => s + d.requests, 0))}
+          </span>
+        </div>
+        <div className="mt-6 flex h-64 items-end gap-3">
+          {trafficSeries.map((d) => (
+            <div key={d.day} className="flex flex-1 flex-col items-center gap-2">
+              <div
+                className="w-full rounded-t-md bg-[var(--color-accent)] transition-opacity hover:opacity-80"
+                style={{ height: `${(d.requests / trafficMax) * 100}%` }}
+                title={`${d.requests.toLocaleString()} requests`}
+              />
+              <span className="text-[0.75rem] font-medium text-[var(--color-fg-subtle)]">
+                {d.day}
+              </span>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      <div className="mt-6 grid gap-6 lg:grid-cols-2">
+        <div className="card p-6">
+          <h2 className="text-[0.95rem] font-semibold">Traffic sources</h2>
+          <ul className="mt-5 space-y-4">
+            {SOURCES.map((s) => (
+              <li key={s.name}>
+                <div className="flex items-center justify-between text-[0.875rem]">
+                  <span className="font-medium">{s.name}</span>
+                  <span className="font-mono text-[var(--color-fg-muted)]">
+                    {formatNumber(s.value)}
+                  </span>
+                </div>
+                <div className="mt-1.5 h-1.5 overflow-hidden rounded-full bg-[var(--color-surface-2)]">
+                  <div
+                    className="h-full rounded-full bg-[var(--color-accent)]"
+                    style={{ width: `${s.pct}%` }}
+                  />
+                </div>
+              </li>
+            ))}
+          </ul>
+        </div>
+
+        <div className="card p-6">
+          <h2 className="text-[0.95rem] font-semibold">Top pages</h2>
+          <ul className="mt-5 divide-y divide-[var(--color-border)]">
+            {PAGES.map((p) => (
+              <li
+                key={p.path}
+                className="flex items-center justify-between py-3 first:pt-0 last:pb-0"
+              >
+                <span className="truncate font-mono text-[0.8125rem] text-[var(--color-fg)]">
+                  {p.path}
+                </span>
+                <div className="flex items-center gap-6 text-[0.8125rem]">
+                  <span className="font-mono text-[var(--color-fg-muted)]">
+                    {formatNumber(p.views)}
+                  </span>
+                  <span className="w-12 text-right font-mono text-[var(--color-fg-subtle)]">
+                    {p.avg}
+                  </span>
+                </div>
+              </li>
+            ))}
+          </ul>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,11 @@
+import { Sidebar } from "@/components/sidebar";
+import type { ReactNode } from "react";
+
+export default function DashboardLayout({ children }: { children: ReactNode }) {
+  return (
+    <div className="flex">
+      <Sidebar />
+      <div className="min-w-0 flex-1">{children}</div>
+    </div>
+  );
+}

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

@@ -0,0 +1,18 @@
+export default function DashboardLoading() {
+  return (
+    <div className="px-6 py-10 sm:px-10">
+      <div className="h-4 w-16 animate-pulse rounded bg-[var(--color-surface-2)]" />
+      <div className="mt-2 h-9 w-72 animate-pulse rounded bg-[var(--color-surface-2)]" />
+      <div className="mt-2 h-4 w-96 animate-pulse rounded bg-[var(--color-surface-2)]" />
+      <div className="mt-10 grid gap-px overflow-hidden rounded-2xl border border-[var(--color-border)] bg-[var(--color-border)] sm:grid-cols-2 lg:grid-cols-4">
+        {[0, 1, 2, 3].map((i) => (
+          <div key={i} className="bg-[var(--color-surface)] p-6">
+            <div className="h-3 w-20 animate-pulse rounded bg-[var(--color-surface-2)]" />
+            <div className="mt-3 h-8 w-24 animate-pulse rounded bg-[var(--color-surface-2)]" />
+            <div className="mt-3 h-3 w-32 animate-pulse rounded bg-[var(--color-surface-2)]" />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}