setMenuOpen(false)} aria-hidden="true" />}
);
}
function Footer({ go, dark }) {
return (
);
}
/* ============================================================
* SIGN-OFF + ORNAMENT
* ============================================================ */
function SignOff({ size = 40 }) {
return
Lonesome Goat;
}
function GoatOrnament({ size = 18, opacity = 0.6, tone = "auto" }) {
let filter = "none";
if (tone === "bone") filter = "brightness(0) saturate(100%) invert(91%) sepia(8%) saturate(548%) hue-rotate(8deg) brightness(98%) contrast(86%)";
return
;
}
/* ============================================================
* TAPED PHOTO
* ============================================================ */
function TapedPhoto({ caption, ratio = "4 / 3", style, src }) {
return (
{src ?
:
}
{caption &&
{caption}
}
);
}
/* ============================================================
* SKETCH — Audubon / Sibley plate style
*
* Thin pen weight, deliberate single-line strokes, single ink wash
* for shading, label in print caps with a small specimen number.
* No scribble, no doubled lines. Each plate has its own composition
* with a baseline, the subject, optional wash, and a typeset label.
* ============================================================ */
function Sketch({ kind = "mountains", caption, height = 180, label, framed }) {
// v2 plate-system frame: border + divider + big spaced title at bottom.
// Auto-on for hero-size plates (>=130px) so inline mini-sketches stay clean.
const fullPlate = framed ?? (height >= 130);
const ink = "var(--ink)";
const wash = "var(--ink-soft)";
const accent = "var(--gold-deep)";
/* Each plate is composed with:
* - a hairline baseline (--rule)
* - the subject in 1.2px ink lines
* - a low-opacity wash to suggest mass
* - a printed label & specimen no.
*/
const plates = {
mountains: {
labelDefault: "RANGE · CHINATI",
no: "PL. I",
title: "RANGE",
svg:
{/* wash — distant ridge */}
{/* far ridge line */}
{/* near ridge wash */}
{/* near ridge line */}
{/* sun behind ridge */}
{/* baseline */}
},
truck: {
labelDefault: "PICKUP · DUSTED",
no: "PL. II",
title: "PICKUP",
svg:
{/*
* Boxy pickup, facing LEFT. Fully orthogonal — every corner is 90°.
* Front face (grille + headlight) → flat hood → square cab
* (vertical walls, flat roof) → flat bed → vertical tailgate.
*/}
{/* body wash */}
{/* main silhouette */}
{/* rocker / running board */}
{/* SIDE WINDOW (cab) */}
{/* hood seam at base of cab */}
{/* bed rail */}
{/* tailgate hinge */}
{/* DOOR cut + handle */}
{/* HEADLIGHT (round, on front face) */}
{/* GRILLE (horizontal bars on the front face) */}
{/* WHEELS — bold, prominent */}
{/* dust kick behind */}
{/* baseline */}
},
fire: {
labelDefault: "CAMPFIRE · 3rd LOG",
title: "CAMPFIRE",
no: "PL. III",
svg:
{/* wash plume */}
{/* main flame outline — single deliberate line */}
{/* logs */}
{/* sparks */}
{/* baseline */}
},
map: {
labelDefault: "ROUTE · BACK COUNTRY",
title: "ROUTE",
no: "PL. IV",
svg:
{/* folded paper — irregular edges */}
{/* fold creases — vertical and horizontal */}
{/* a couple of mountain ridges as map symbols */}
{/* river — meandering */}
{/* dirt road — dashed, takes a real turn */}
{/* waypoint markers */}
A
CAMP
B
{/* mileage tick along the road */}
{/* compass rose */}
N
{/* scale bar */}
0 2 4 MI
{/* baseline */}
},
kettle: {
labelDefault: "MUG · BLACK COFFEE",
title: "BLACK COFFEE",
no: "PL. V",
svg:
{/*
* Stoneware coffee mug — short, fat, with a thick handle.
* Centered ~180,98. Steam rises in three calm curls.
*/}
{/* steam — drawn first so it sits behind the rim */}
{/* mug wash — body */}
{/* mug body — slight taper inward toward the bottom */}
{/* rim ellipse */}
{/* coffee surface — dark ellipse just below rim */}
{/* highlight glint on coffee */}
{/* handle — thick D-shape on right */}
{/* base ellipse — bottom curve */}
{/* a stamped maker's mark on the side */}
SL
{/* baseline */}
},
compass: {
labelDefault: "COMPASS · BRASS",
title: "TRUE NORTH",
no: "PL. VI",
svg:
{/* wash */}
{/* outer ring */}
{/* needle */}
{/* pin */}
{/* ticks */}
{/* baseline */}
},
whiskey: {
labelDefault: "WHISKEY · LATE NIGHT LIBATION",
no: "PL. VII",
svg:
{/*
* Old-fashioned glass with one large square ice cube.
* Slightly tapered glass walls with subtle base curve, perspective
* ellipse top, amber whiskey wash filling the lower portion, and
* an isometric ice cube floating in the liquid.
*/}
{/* baseline */}
{/* whiskey amber wash inside glass */}
{/* glass walls (slight taper) + base curve */}
{/* glass top rim — open ellipse */}
{/* whiskey liquid surface (perspective ellipse) */}
{/* ICE CUBE — large square, isometric (front, top, right faces visible) */}
{/* cube body fill */}
{/* top face */}
{/* right face (subtle shadow) */}
{/* front face */}
{/* outer cube silhouette emphasis */}
{/* small ice fissure lines (texture) */}
{/* glass highlights — bright stroke left, dim right */}
{/* condensation droplets */}
{/* shadow under glass */}
},
sunset: {
labelDefault: "SUNSET · LAST LIGHT",
no: "PL. VIII",
svg:
{/* faint horizon wash bands */}
{/* sun — half over horizon, low and heavy */}
{/* horizon line — long, calm */}
{/* sun rays — short ticks above the horizon */}
{/* far hills below the horizon */}
{/* a few birds */}
{/* baseline */}
},
stars: {
labelDefault: "NIGHT · NO MOON",
no: "PL. IX",
svg:
{/* sky frame — light wash */}
{/* milky way — diagonal wash band */}
{/* constellation — Orion-ish */}
{[
[80, 50], [88, 64], [104, 58], [112, 72], [120, 88], [132, 96], [148, 90]].
map(([cx, cy], i) =>
)}
{/* scattered stars — varied size */}
{[
[60, 38, 0.8], [178, 44, 1.6], [210, 32, 1], [248, 58, 0.8], [276, 40, 1.2], [296, 70, 0.9],
[200, 80, 1.1], [228, 96, 0.7], [270, 108, 1], [298, 100, 0.6], [180, 110, 0.8],
[62, 76, 0.7], [40, 52, 0.9], [42, 98, 0.8], [156, 40, 0.8], [316, 52, 1.1],
[314, 90, 0.7], [196, 108, 0.6], [244, 82, 0.8]].
map(([cx, cy, r], i) =>
)}
{/* shooting star */}
{/* horizon silhouette */}
{/* baseline */}
},
agave: {
labelDefault: "AGAVE · DESERT",
no: "PL. X",
svg:
{/* center wash */}
{/* agave leaves — long pointed swords radiating from a center base */}
{/* draw each leaf as two outline curves meeting at the tip */}
{[
{ tip: [180, 30], left: [160, 118], right: [200, 118] },
{ tip: [120, 40], left: [150, 118], right: [166, 116] },
{ tip: [240, 42], left: [194, 116], right: [210, 118] },
{ tip: [80, 72], left: [140, 120], right: [156, 118] },
{ tip: [280, 74], left: [204, 118], right: [220, 120] },
{ tip: [60, 108], left: [130, 124], right: [148, 120] },
{ tip: [300, 108], left: [212, 120], right: [230, 124] },
{ tip: [150, 28], left: [170, 118], right: [178, 118] },
{ tip: [210, 28], left: [182, 118], right: [190, 118] }].
map((leaf, i) =>
{/* leaf midline */}
)}
{/* center rosette */}
{/* a few thorns at tips */}
{/* baseline */}
},
ocotillo: {
labelDefault: "OCOTILLO · BLOOM",
no: "PL. XI",
svg:
{/*
* Ocotillo — a base clump with tall, thin, slightly curved arms
* radiating up. Each arm tipped with a small red bloom.
*/}
{/* ground wash */}
{/* base */}
{/* arms — tall whippy lines, each gently curved differently */}
{[
{ d: "M168 140 C 162 110, 156 80, 150 30", bloom: [150, 30] },
{ d: "M174 140 C 172 110, 168 78, 166 26", bloom: [166, 26] },
{ d: "M180 140 C 180 108, 180 76, 180 22", bloom: [180, 22] },
{ d: "M186 140 C 188 110, 192 78, 196 26", bloom: [196, 26] },
{ d: "M192 140 C 198 110, 206 80, 212 32", bloom: [212, 32] },
{ d: "M162 138 C 150 112, 134 88, 118 56", bloom: [118, 56] },
{ d: "M198 138 C 212 112, 230 86, 246 60", bloom: [246, 60] },
{ d: "M156 138 C 138 116, 116 96, 96 80", bloom: [96, 80] },
{ d: "M204 138 C 224 116, 248 96, 270 84", bloom: [270, 84] }].
map((arm, i) =>
{/* tiny side leaves — small ticks along each arm */}
{/* red flame bloom at tip */}
)}
{/* baseline */}
},
storm: {
labelDefault: "STORM · WEST WIND",
no: "PL. XII",
svg:
{/* sky base */}
{/* big cloud mass — bumpy underline */}
{/* secondary smaller cloud */}
{/* rain — slanted dashes (wind) */}
{Array.from({ length: 22 }).map((_, i) => {
const x = 50 + i * 12;
const y = 80 + i % 3 * 4;
return ;
})}
{/* lightning bolt */}
{/* horizon — distant ridge taking the wind */}
{/* baseline */}
}
};
const plate = plates[kind] || plates.mountains;
const lbl = label || plate.labelDefault;
return (
{caption && {caption}}
);
}
/* ============================================================
* FIELD LINE / COORD STRIP
* ============================================================ */
function FieldLine({ label, value }) {
return (
{label}
{value}
);
}
function CoordStrip({ note }) {
return (
{note.no}
{note.date}
{note.location}
{note.coords && <>
{note.coords}
}
);
}
/* ============================================================
* CATEGORY TOKENS (used everywhere)
* ============================================================ */
const CATEGORIES = {
entries: { id: "entries", label: "Field Entries", short: "Entries", color: "var(--cat-gold)", Icon: IcoLedger, hint: "Published entries — your Goat Notes." },
drafts: { id: "drafts", label: "Drafts", short: "Drafts", color: "var(--cat-sage)", Icon: IcoPencil, hint: "Working notes. Auto-saved as you write." },
sketches: { id: "sketches", label: "Sketches", short: "Sketches", color: "var(--cat-clay)", Icon: IcoFountainPen, hint: "Doodles and field sketches." },
letters: { id: "letters", label: "Letters", short: "Letters", color: "var(--cat-wax)", Icon: IcoEnvelope, hint: "Letters sent — not blog posts." }
};
Object.assign(window, {
Nav, Footer, TapedPhoto, Sketch, FieldLine, CoordStrip,
LogoLong, LogoSquare, LogoStayLonesome, LogoGoat, GoatOrnament, SignOff, SunMoonToggle,
// icons
Ico, IcoLedger, IcoPencil, IcoFountainPen, IcoEnvelope,
IcoTypewriter, IcoBook, IcoPin, IcoLamp, IcoStar, IcoX, IcoChevron,
IcoLocation, IcoCheck, IcoTrash,
CATEGORIES
});