Summit Themes

Getting started with Summit's Themes

Sanity CMS Addon

Every Summit service theme ships its business content — name, phone, hours, services, and service areas — in a single src/data/business.json file. The Sanity CMS Addon is an optional, opt-in guide that swaps that JSON file for Sanity CMS, so a non-technical client can edit content in a friendly visual editor and publish without touching code.

This addon is 100% optional. Your theme works perfectly without it, reading from business.json as usual. The addon lives in addons/sanity/ — outside src/ — so nothing here is imported by the theme by default and it never affects the normal build. You wire it in only if you choose to.

What you'll end up with

  • A free Sanity project + dataset holding one Business document.
  • An embedded Sanity Studio editor you run with npm run dev (at /admin).
  • Your theme reading that document at build time, in the exact same shape it used to read from business.json — so every page keeps working unchanged.

Time to set up: ~30 minutes. The full guide ships inside your theme at addons/sanity/INSTALL.md; this page mirrors it.

Prerequisites

  • Node.js 18+ — check with node --version. Get it at nodejs.org.
  • A free Sanity account — sign up at sanity.io/login. No credit card required.
  • Your theme installed and running locally already (npm install then npm run dev, site loads at http://localhost:4321).

Run every command below from your theme's root folder (the one with package.json and astro.config.mjs). The addon files are in addons/sanity/.

Step 1 — Install the Sanity packages

npm install @sanity/astro @sanity/client sanity
npm install -D @sanity/vision
  • @sanity/astro — the Astro integration that embeds Studio at /admin.
  • @sanity/client — fetches your content (used by the data-adapter).
  • sanity — the Studio itself plus the CLI (npx sanity ...).
  • @sanity/vision — the in-Studio GROQ query tester (dev dependency).

Step 2 — Create your Sanity project

Option A — sanity init (recommended):

npx sanity@latest init

Log in when prompted, choose Create new project, name it, accept the default production dataset, and pick a clean project with no predefined schemas (we supply our own). Note the 8-character Project ID it prints — you can always find it again at sanity.io/manage.

Option B — dashboard (no CLI): go to sanity.io/manage → Create new project, choose the Free plan, create a dataset named production, and copy the Project ID.

Step 3 — Add your project ID to the config

Open addons/sanity/sanity.config.ts and replace the placeholder:

export const projectId = 'REPLACE_WITH_YOUR_PROJECT_ID' // ← your ID here
export const dataset = 'production'                      // ← change only if you renamed it

Step 4 — Create the .env file

In your theme root, create a file named .env:

SANITY_PROJECT_ID=your-project-id-here
SANITY_DATASET=production
SANITY_API_VERSION=2024-01-01

Use the same Project ID from Step 2. Your theme already git-ignores .env — never commit it.

Step 5 — Wire the studio into astro.config.mjs

Add the import at the top:

import sanity from "@sanity/astro";

Then add the integration inside the existing integrations array:

sanity({
  projectId: process.env.SANITY_PROJECT_ID,
  dataset: process.env.SANITY_DATASET || "production",
  useCdn: false,
  studioBasePath: "/admin", // embed Studio at /admin
}),

If npm run dev later reports React is missing, run npm install react react-dom.

Step 6 — Copy the schema into your studio

The integration loads its schema from a sanity.config.ts at your project root. Copy the addon's config and schema folder up:

cp addons/sanity/sanity.config.ts ./sanity.config.ts
cp -r addons/sanity/schemas ./schemas

On Windows PowerShell, use Copy-Item ... -Recurse. Confirm your Project ID from Step 3 is present in the root sanity.config.ts.

Step 7 — The one-line import swap

This is the only change to your theme's source. Make the adapter reachable from inside src/:

cp addons/sanity/data-adapter.ts src/data/business.ts

Then every component drops the .json extension:

// BEFORE
import business from "../../data/business.json";

// AFTER
import business from "../../data/business";

Because src/data/business.ts default-exports the same object shape, no other code changes. Find every file to update with:

grep -rl "data/business.json" src

A project-wide find-and-replace of data/business.json" → data/business" (keep the trailing quote) does this in one pass. Keep src/data/business.json on disk as a fallback — it's just no longer imported.

Step 8 — Run the studio and add content

npm run dev

In the Studio, click Business, fill in the fields (copy values straight from your existing business.json — the field names match), and click Publish. Reload the site; pages now render from Sanity.

If the Studio shows a CORS error, go to sanity.io/manage → your project → API → CORS origins → Add http://localhost:4321 (allow credentials).

Step 9 — Build check

npm run build
npm run preview

Click through a few pages (home, a service page, the footer contact info) — everything should match what you published.

Step 10 — Deploy the studio

A) Ships with your site at /admin: deploying your Astro site (Cloudflare Pages, Vercel, Netlify) also publishes the Studio at yourdomain.com/admin. Set the three env vars in your host's dashboard and add https://yourdomain.com as a CORS origin.

B) Sanity-hosted studio: for a standalone editor URL, run npx sanity deploy and pick a subdomain → https://your-name.sanity.studio.

A static Astro theme only picks up content changes on its next build. To make "Publish" update the live site automatically, add a deploy hook on your host and a Sanity webhook (sanity.io/manage → API → Webhooks) pointing at it.

Switching back to JSON

This addon is non-destructive. To revert: change the imports back to data/business.json; delete src/data/business.ts, the root sanity.config.ts, and ./schemas; remove the sanity(...) integration from astro.config.mjs. Your original business.json was never modified.

The field map

The business schema mirrors src/data/business.json exactly: name, shortName, legalName, type, description, tagline, heritage, founded, url, phone, phoneFormatted, phoneTel, email, gtmId, reviews, address (with counties[]), geo, hours (with structured[]), social, credentials, services[], serviceAreas[], team[], specials[], credit, and housecallPro. The type field is the schema.org business type and differs per niche (RoofingContractor, HVACBusiness, Electrician, Plumber, HomeAndConstructionBusiness).

Getting Started