Customization

Overview

The template is designed to be customized. Common modifications:

• Brand colors and typography
• Landing page content
• Component styling
• Content gating rules

Quick Customizations

App Identity

Update the name, title template, description, locale, and default social image in the site config:

export const siteConfig = {
  name: "Your Product",
  titleTemplate: "%s | Your Product",
  description: "A clear description of your product.",
  locale: "en_US",
  socialImage: {
    path: "/og/default.png",
    width: 1200,
    height: 630,
    alt: "Your Product",
  },
} as const;

Set NEXT_PUBLIC_APP_URL to the final public origin. Canonicals, social URLs, the sitemap, and robots.txt use this value. See Configuration for local and hosted env settings.

Replace public/og/default.png and its editable public/og/default.source.svg when you change the product identity.

Blog Social Images

Edit the shared composition to change the CoreMVP logo, article title, typography, and dot texture across Blog cards and social images:

src/components/blog/open-graph/
├── build-your-first-feature.tsx
├── from-starter-to-product.tsx
├── seo-before-you-ship.tsx
├── default.tsx
└── registry.tsx

default.tsx owns the shared design. registry.tsx selects each article's composition and background from public/blog/backgrounds/; replace those background files or change the mapping to use your own artwork. Each title comes from the article's MDX frontmatter.

Cards use a wide cover that scales with their container. Open Graph and Twitter use the same composition at 1200×630, with the brand and title kept inside the centered square crop. A composition receives either the card or social format so you can adapt one article's layout for both placements. The sample entry points use the shared design; change one for article-specific artwork. Unlisted posts use default.tsx and the graphite background.

src/components/blog/blog-open-graph-image.tsx renders PNG responses using Satori and Resvg. The explicit opengraph-image.ts and twitter-image.ts routes under src/routes/_marketing/blog/ serve those images. Start does not infer metadata or image handlers from a file name.

To serve static artwork instead, place it in public/ and update the corresponding image URLs in src/lib/blog.server.tsx and the Blog index's head. Keep each post's image selection tied to its slug when you need different artwork per article. Check both Open Graph and Twitter metadata after changing the renderer or image paths.

Logo

Replace logo files:

src/components/logo.tsx
public/favicon.ico

Colors

Edit CSS variables and the Tailwind 4 theme mapping in src/styles/globals.css.

Landing Content

Edit marketing copy in:

src/routes/_marketing/index.tsx