@the-smithy/create-hearth-site 0.13.1 → 0.14.0

package/README.md

@@ -38,7 +38,7 @@ The command copies the starter into the new folder, writes `.env.local` with the
 cd acme-website
 ```
 
-Add an API key to `.env.local` (Hearth → the site → Settings → Developers → API keys), and run `pnpm dev`. The
+Add an API key to `.env.local` (Hearth → the site → API & webhooks → API keys), and run `pnpm dev`. The
 new site's README walks through the first run, previews, deploying and troubleshooting.
 
 ## Documentation

package/bin/create-hearth-site.js

@@ -111,7 +111,7 @@ Created ${pkg.name} in ${rel}.
 
 Next:
   cd ${rel}
-${installed ? "" : "  pnpm install\n"}  Add an API key to .env.local as HEARTH_API_KEY (Hearth → the site → Settings → Developers → API keys)${
+${installed ? "" : "  pnpm install\n"}  Add an API key to .env.local as HEARTH_API_KEY (Hearth → the site → API & webhooks → API keys)${
     site ? "" : "\n  Set HEARTH_SITE in .env.local to the site's address in Hearth (after /admin/sites/ in its address bar)"
   }
   pnpm dev, then open http://localhost:3000

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@the-smithy/create-hearth-site",
-  "version": "0.13.1",
+  "version": "0.14.0",
   "description": "Start a new client website powered by Hearth: pnpm create @the-smithy/hearth-site",
   "type": "module",
   "license": "SEE LICENSE IN LICENSE",
@@ -29,7 +29,7 @@
   ],
   "devDependencies": {
     "vitest": "^5.0.3",
-    "@the-smithy/hearth-schema": "^0.13.1"
+    "@the-smithy/hearth-schema": "^0.14.0"
   },
   "scripts": {
     "test": "node --test \"test/**/*.test.js\" && vitest run test/blocks.test.ts"

package/template/.env.example

@@ -1,8 +1,8 @@
 # The site's address in Hearth: the part after /admin/sites/ in Hearth's address bar, e.g. grand-eastonian.
 HEARTH_SITE=
-# A Delivery API key: Hearth → the site → Settings → Developers → API keys. Secret: server-side only.
+# A Delivery API key: Hearth → the site → API & webhooks → API keys. Secret: server-side only.
 HEARTH_API_KEY=
-# Only once deployed: the Signing secret shown after saving the Revalidation webhook (Settings → Developers).
+# Only once deployed: the Signing secret shown after saving the Revalidation webhook (API & webhooks).
 HEARTH_WEBHOOK_SECRET=
 # Optional: point at a different Hearth (e.g. a staging deploy).
 # HEARTH_BASE_URL=https://hearth.thesmithy.io

package/template/README.md

@@ -13,7 +13,7 @@ look; Hearth decides what's on the page.** Editors change content in Hearth, and
 
 ## First run
 
-1. **Create an API key.** In Hearth, open the site, then **Settings → Developers → API keys**, and create a key
+1. **Create an API key.** In Hearth, open the site, then **API & webhooks → API keys** (in the sidebar), and create a key
    (name it after where it's used, e.g. "Local"). Copy it straight away: it's only shown once.
 2. **Add it to `.env.local`** in this folder:
 
@@ -29,7 +29,7 @@ look; Hearth decides what's on the page.** Editors change content in Hearth, and
 4. **Publish something in Hearth.** The site only shows **published** content, so a site whose pages are all
    drafts shows "Page not found" everywhere. That's expected, not a bug. Ask the site's editors to publish the
    homepage (its address is `home`), or publish it yourself if you have edit access, then reload.
-5. **Optional: preview drafts on your machine.** In **Settings → Developers → Webhook and preview**, set
+5. **Optional: preview drafts on your machine.** In **API & webhooks → Webhook and preview**, set
    **Preview address** to `http://localhost:3000/api/preview`. "Preview on the website" in Hearth's editor then
    opens your local site with drafts showing, refreshing as you edit. This applies to everyone previewing that
    site, so clear it when you're done.
@@ -97,7 +97,7 @@ Do these in order: the webhook's signing secret only exists once the webhook URL
 3. **Deploy**, and note the site's domain.
 4. **Set the web address in Hearth.** The site's admin sets it under **Settings → Your site → Web address**.
    Until then, search engines are kept out.
-5. **Connect the publish webhook.** In **Settings → Developers → Webhook and preview**, set **Revalidation
+5. **Connect the publish webhook.** In **API & webhooks → Webhook and preview**, set **Revalidation
    webhook** to `https://<domain>/api/revalidate` and save. A **Signing secret** appears: add it in Netlify as
    `HEARTH_WEBHOOK_SECRET`, then **redeploy**, since Netlify only applies new variables on the next deploy.
 6. **Clear the Preview address** if you set it to localhost. Empty means the live site's `/api/preview`.
@@ -115,7 +115,7 @@ Without the webhook, published changes still appear, but can take up to an hour.
 | An `unauthorized` (401) error from Hearth | The key is mistyped, revoked, or belongs to another site. Create a new one for this site |
 | Published changes don't show locally | Hard refresh (Ctrl+Shift+R). The webhook can't reach your computer |
 | Published changes don't show live | The webhook isn't set, or `HEARTH_WEBHOOK_SECRET` doesn't match Hearth's signing secret (redeploy after changing it) |
-| "Preview on the website" opens the wrong place | Check **Preview address** in Settings → Developers |
+| "Preview on the website" opens the wrong place | Check **Preview address** in API & webhooks |
 
 ## Documentation
 

package/template/scripts/hearth.mjs

@@ -21,8 +21,8 @@ function readEnv() {
       .map(([, key, value]) => [key, value.replace(/^["']|["']$/g, "").replace(/\s+#.*$/, "")]),
   );
   if (!env.HEARTH_SITE) fail("HEARTH_SITE is empty in .env.local. It's the site's address: the part after /admin/sites/ in Hearth's address bar.");
-  if (!env.HEARTH_API_KEY) fail("HEARTH_API_KEY is empty in .env.local. Create a key in Hearth → the site → Settings → Developers → API keys.");
-  if (!env.HEARTH_API_KEY.startsWith("hk_")) fail("HEARTH_API_KEY doesn't look like a Hearth key (they start with hk_). Copy it again from Settings → Developers.");
+  if (!env.HEARTH_API_KEY) fail("HEARTH_API_KEY is empty in .env.local. Create a key in Hearth → the site → API & webhooks → API keys.");
+  if (!env.HEARTH_API_KEY.startsWith("hk_")) fail("HEARTH_API_KEY doesn't look like a Hearth key (they start with hk_). Copy it again from API & webhooks.");
   return { site: env.HEARTH_SITE, apiKey: env.HEARTH_API_KEY, baseUrl: (env.HEARTH_BASE_URL || DEFAULT_BASE_URL).replace(/\/+$/, "") };
 }
 

package/template/src/components/SiteHeader.tsx

@@ -2,9 +2,9 @@ import Link from "next/link";
 import type { Site } from "@the-smithy/hearth";
 import { Img, SmartLink } from "@/components/ui";
 
-/** Logo, menu and announcement banner, all edited in Hearth (Settings → General and Navigation). */
+/** Logo, menu, menu button and announcement banner, all edited in Hearth (Settings → General, and Navigation). */
 export function SiteHeader({ site }: { site: Site }) {
-  const { announcement, seo, tagline, navigation } = site.settings;
+  const { announcement, seo, tagline, navigation, navigationCta } = site.settings;
   return (
     <header className="border-b border-line bg-bg">
       {announcement ? <p className="bg-accent px-4 py-2 text-center text-sm font-semibold text-accent-ink">{announcement}</p> : null}
@@ -16,13 +16,19 @@ export function SiteHeader({ site }: { site: Site }) {
             {tagline ? <span className="text-sm font-normal text-muted-ink">{tagline}</span> : null}
           </span>
         </Link>
-        {navigation.length ? (
+        {navigation.length || navigationCta ? (
           <nav aria-label="Main" className="flex flex-wrap items-center gap-x-6 gap-y-1 font-medium">
             {navigation.map((item) => (
               <SmartLink key={item.href + item.label} href={item.href} className="py-2 hover:text-highlight">
                 {item.label}
               </SmartLink>
             ))}
+            {/* The menu button (Navigation → Menu button in Hearth): one action that stands out from the links. */}
+            {navigationCta ? (
+              <SmartLink href={navigationCta.href} className="rounded-lg bg-accent px-4 py-2 font-semibold text-accent-ink hover:opacity-90">
+                {navigationCta.label}
+              </SmartLink>
+            ) : null}
           </nav>
         ) : null}
       </div>