Theme Development

{
  "$schema": "https://velocms.org/schemas/theme-manifest.json",
  "name": "velocms-theme-aurora",
  "displayName": "Aurora",
  "version": "1.0.0",
  "description": "A clean, distraction-free reading theme with subtle gradient accents.",
  "author": {
    "name": "Jane Dev",
    "email": "[email protected]",
    "url": "https://janedev.io"
  },
  "type": "layout",
  "category": "personal",
  "tags": ["minimal", "reading", "personal-blog"],
  "engines": {
    "velocms": ">=1.0.0"
  },
  "preview": {
    "thumbnail": "./preview/thumbnail.png",
    "screenshots": [
      "./preview/blog-listing.png",
      "./preview/post-detail.png"
    ]
  },
  "exports": {
    "components": {
      "BlogLayout": "./src/BlogLayout.tsx",
      "PostLayout": "./src/PostLayout.tsx",
      "PageLayout": "./src/PageLayout.tsx"
    }
  },
  "pricing": {
    "model": "free"
  }
}

import type { BlogLayoutProps } from "@velocms/theme-sdk";

export default function BlogLayout({
  posts,
  settings,
  siteUrl,
  searchEnabled,
  member,
  currentPage,
  totalPages,
}: BlogLayoutProps) {
  return (
    <main>
      <h1>{settings?.site_name ?? "My Blog"}</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>
            <a href={`${siteUrl}/blog/${post.slug}`}>{post.title}</a>
          </li>
        ))}
      </ul>
    </main>
  );
}

import type { PostLayoutProps } from "@velocms/theme-sdk";

export default function PostLayout({
  post,
  settings,
  siteUrl,
  jsonLd,
  member,
  relatedPosts,
}: PostLayoutProps) {
  return (
    <article>
      <h1>{post.title}</h1>
      {/* jsonLd is a pre-built schema object — pass it to a <script> tag */}
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: jsonLdSafe(jsonLd) }}
      />
      <div dangerouslySetInnerHTML={{ __html: post.content_html ?? "" }} />
    </article>
  );
}

/* Core semantic tokens — always available in theme components */
:root {
  --background: oklch(0.98 0 0);
  --foreground: oklch(0.15 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.15 0 0);
  --muted: oklch(0.96 0.005 240);
  --muted-foreground: oklch(0.55 0.01 240);
  --border: oklch(0.9 0.005 240);
  --ring: oklch(0.55 0.16 264);
  --primary: oklch(0.55 0.16 264);
  --primary-foreground: oklch(0.98 0 0);
}

/* Dark mode — automatically applied via .dark class on <html> */
.dark {
  --background: oklch(0.12 0.005 240);
  --foreground: oklch(0.95 0 0);
  /* ... */
}

import { DemoFixtures } from "@velocms/theme-sdk/testing";
import BlogLayout from "../src/BlogLayout";

// Render a layout against the synthetic fixture data.
export default function Preview() {
  return (
    <BlogLayout
      posts={DemoFixtures.posts}
      settings={DemoFixtures.settings}
      siteUrl="https://demo.example.com"
      searchEnabled={false}
      member={null}
      currentPage={1}
      totalPages={1}
    />
  );
}