Add Handlebars templates for theming the storefront

Three files gain a .hbr sibling so a storefront can be compiled with a store's own branding: app/globals.css, app/layout.tsx and components/logo.tsx. The committed files stay as they are and remain the hand-maintained default. Fourteen variables drive them: shopName, logoUrl, primaryColor, accentColor, bgColor, fontHeader and fontBody are supplied per store, while fgColor, primaryFgColor, accentFgColor, surfaceColor, mutedColor, mutedFgColor and borderColor derive from those unless pinned. Two changes were needed for the fonts to be swappable. The CSS variables next/font declares are now generic (--font-heading-family, --font-body-family, --font-mono-family) rather than named after Geist, and headings set font-family: var(--font-heading) so fontHeader has an effect when it differs from fontBody. The compiler lives outside this repo so the template carries no build script or dependency for it. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_013amafJZMQmXgeFEotYWfaw
2026-08-04 17:36:26 -04:00
parent ebdb0bee2f
commit 3442f19816
3 changed files with 343 additions and 0 deletions
@@ -0,0 +1,48 @@
+import React from 'react';
+import './globals.css';
+import type { Metadata } from 'next';
+import {
+  {{fontHeader}},
+{{#unless sameFont}}
+  {{fontBody}},
+{{/unless}}
+  Geist_Mono,
+} from 'next/font/google';
+import StoreAssistant from '@/components/shopify/store-assistant';
+
+const headingFont = {{fontHeader}}({
+  subsets: ['latin'],
+  variable: '--font-heading-family',
+});
+
+const bodyFont = {{fontBody}}({
+  subsets: ['latin'],
+  variable: '--font-body-family',
+});
+
+const monoFont = Geist_Mono({
+  subsets: ['latin'],
+  variable: '--font-mono-family',
+});
+
+export const metadata: Metadata = {
+  title: {{json shopName}},
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html
+      lang="en"
+      className={`${headingFont.variable} ${bodyFont.variable} ${monoFont.variable}`}
+    >
+      <body className="font-body antialiased bg-background text-foreground m-0 p-0">
+        {children}
+        <StoreAssistant />
+      </body>
+    </html>
+  );
+}