Template
Rami BitarandClaude Opus 5
3442f19816
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
49 lines
1008 B
Plaintext
49 lines
1008 B
Plaintext
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>
|
|
);
|
|
}
|