/**
* The schoolcompare mark.
*
* A location pin with a leaf growing inside it: where a school is, and a child
* growing there. The pin's tail sweeps left as the guideline's "signature path
* shape" — the journey a parent takes to find the right school — so the mark
* and the illustration style share one gesture.
*
* This is the single source for the mark. app/icon.svg, app/apple-icon.tsx and
* app/opengraph-image.tsx all derive from the same geometry (see MARK_PATHS),
* because the header and the favicon had previously drifted into two different
* logos.
*
* Drawn on a 48×48 grid. The pin takes the brand hue and the leaf is knocked
* out of it, so the mark needs exactly two colours and works on any ground.
*/
/** Geometry shared by every rendering of the mark, on a 0 0 48 48 viewBox. */
export const MARK_PATHS = {
/** The path tail, stroked — 8.5 wide with a round cap. */
tail: 'M17 30 C15 35.6 11.6 40.2 7.8 42.8',
/** The pin head. */
head: { cx: 26.5, cy: 18.5, r: 16.5 },
/** Leaf stem, stroked — 2.6 wide with a round cap. */
stem: 'M26.5 29.5 C26.5 25 26.6 21 27 18',
/** Upper leaf, filled. */
leafUpper: 'M27 19.6 C28.2 13.8 32.4 9.8 37.6 9.4 C38 15.6 33.8 20.8 27 19.6 Z',
/** Lower leaf, filled. */
leafLower: 'M26.4 24.6 C25.2 20 21.2 17 16.4 17.1 C16.2 21.8 19.8 25.8 26.4 24.6 Z',
} as const;
/**
* The mark as a standalone SVG string.
*
* Satori (next/og) renders `` with a data URI far more reliably than it
* renders inline SVG children, so the generated icon and share card both draw
* the mark this way — from the same geometry as the React component above,
* which is the whole point of MARK_PATHS.
*/
export function markSvg(pin: string, leaf: string): string {
return [
'',
].join('');
}
/** The same string as a data URI, ready for ``. */
export function markDataUri(pin: string, leaf: string): string {
return `data:image/svg+xml;base64,${Buffer.from(markSvg(pin, leaf)).toString('base64')}`;
}
interface LogoMarkProps {
className?: string;
/** Rendered size in px. Defaults to inheriting via CSS. */
size?: number;
/** The pin. Defaults to the brand token so it inverts with the theme. */
pin?: string;
/** The leaf knocked out of the pin. */
leaf?: string;
title?: string;
}
export function LogoMark({
className,
size,
pin = 'var(--brand)',
leaf = 'var(--bg-card)',
title,
}: LogoMarkProps) {
return (
);
}