branding-engine 0.1.0 → 0.2.2

package/src/lib/mark.mjs

@@ -4,18 +4,29 @@
 //
 // Outlines come from brand-glyphs.json (A-Z and 0-9 are bundled by default).
 import { loadGlyphs } from './glyphs.mjs';
+import { normalizeGlyph } from './identity.mjs';
 
 // Read glyphs lazily so a BRAND_GLYPHS set in-process (by the build) is honored.
 // Defaults to brand-glyphs.json; point at another extracted set with BRAND_GLYPHS.
 let _glyphData;
+let _glyphFile;
 function glyphData() {
-  if (!_glyphData) _glyphData = loadGlyphs(process.env.BRAND_GLYPHS || 'brand-glyphs.json');
+  const file = process.env.BRAND_GLYPHS || 'brand-glyphs.json';
+  if (!_glyphData || _glyphFile !== file) {
+    _glyphData = loadGlyphs(file);
+    _glyphFile = file;
+  }
   return _glyphData;
 }
 
 const RENDER = {
   letterSpacing: -0.045, // em
-  widthRatio: 0.63,      // glyph ink width relative to the box
+  widthRatio: {
+    1: 0.46,
+    2: 0.63,
+    3: 0.76,
+  },
+  heightRatio: 0.56,     // cap narrow glyphs such as "I" by height
   radiusRatio: 0.22,     // rounded-square corner radius (0 = square)
 };
 
@@ -31,8 +42,7 @@ function layout(glyph) {
     if (!g) {
       throw new Error(
         `No outline for glyph "${ch}". Available: ${Object.keys(glyphs).join(', ')}. ` +
-          `It will be extracted automatically for the bundled font; for a custom ` +
-          `font, ensure python3 + fonttools are installed.`,
+          `Re-run through buildKit or buildBrand so the Node extractor can cache it.`,
       );
     }
     placed.push({ x: penX, g });
@@ -45,7 +55,14 @@ function layout(glyph) {
     yMin = Math.min(yMin, g.bounds.yMin);
     yMax = Math.max(yMax, g.bounds.yMax);
   }
-  return { placed, cx: (xMin + xMax) / 2, cy: (yMin + yMax) / 2, gw: xMax - xMin };
+  return {
+    placed,
+    count: chars.length,
+    cx: (xMin + xMax) / 2,
+    cy: (yMin + yMax) / 2,
+    gw: xMax - xMin,
+    gh: yMax - yMin,
+  };
 }
 
 /**
@@ -55,11 +72,14 @@ function layout(glyph) {
  * @param {boolean} [opts.rounded=true]  rounded-square (false = full square)
  * @param {string|null} [opts.bg]        tile fill, or null for transparent
  * @param {string}  [opts.fg='#ffffff']  glyph fill
- * @param {string}  [opts.glyph='JS']    monogram (J and S are the extracted outlines)
+ * @param {string}  [opts.glyph='JS']    1-3 alphanumeric mark characters
  */
 export function markSvg({ size = 512, rounded = true, bg, fg = '#ffffff', glyph = 'JS' } = {}) {
-  const { placed, cx, cy, gw } = layout(glyph);
-  const s = (RENDER.widthRatio * size) / gw;
+  const normalizedGlyph = normalizeGlyph(glyph);
+  const { placed, count, cx, cy, gw, gh } = layout(normalizedGlyph);
+  const widthScale = (RENDER.widthRatio[count] * size) / gw;
+  const heightScale = (RENDER.heightRatio * size) / gh;
+  const s = Math.min(widthScale, heightScale);
   const rx = rounded ? +(size * RENDER.radiusRatio).toFixed(2) : 0;
   const bgRect = bg ? `<rect width="${size}" height="${size}" rx="${rx}" fill="${bg}"/>` : '';
   const paths = placed

package/src/lib/render.mjs

@@ -8,9 +8,18 @@ import { fontPath } from './font.mjs';
 
 // The bundled font embedded as a data URI, as an @font-face for `family`.
 export function fontFaceCss(family) {
-  const b64 = readFileSync(fontPath()).toString('base64');
+  const font = fontPath();
+  const ext = font.split('.').pop().toLowerCase();
+  const formats = {
+    otf: ['font/otf', 'opentype'],
+    ttf: ['font/ttf', 'truetype'],
+    woff: ['font/woff', 'woff'],
+    woff2: ['font/woff2', 'woff2'],
+  };
+  const [mime, format] = formats[ext] || ['application/octet-stream', ext];
+  const b64 = readFileSync(font).toString('base64');
   return `@font-face{font-family:${family};font-weight:200 900;font-display:block;` +
-    `src:url(data:font/woff2;base64,${b64}) format('woff2')}`;
+    `src:url(data:${mime};base64,${b64}) format('${format}')}`;
 }
 
 // Playwright is an optional dependency: only the sheet and social-card renderers

package/src/lib/wordmark.mjs

@@ -21,8 +21,13 @@ const LETTER_SPACING = { title: -0.03125, caps: -0.02 }; // em
 // Read glyphs lazily so a cache (re)written earlier in the same process, or a
 // BRAND_WORDMARK_GLYPHS set by build.mjs, is honored on first render.
 let _glyphData;
+let _glyphFile;
 function glyphData() {
-  if (!_glyphData) _glyphData = loadGlyphs(wordmarkGlyphFile());
+  const file = wordmarkGlyphFile();
+  if (!_glyphData || _glyphFile !== file) {
+    _glyphData = loadGlyphs(file);
+    _glyphFile = file;
+  }
   return _glyphData;
 }
 

package/src/make-mark.mjs

@@ -8,10 +8,12 @@ import path from 'node:path';
 import sharp from 'sharp';
 import { markSvg } from './lib/mark.mjs';
 import { normalizeHex } from './lib/color.mjs';
+import { normalizeGlyph } from './lib/identity.mjs';
 import { pngsToIco } from './lib/ico.mjs';
 
 export async function makeMark({ slug, hex, glyph = 'JS', outDir }) {
   const fill = normalizeHex(hex);
+  glyph = normalizeGlyph(glyph);
   const iconsDir = path.join(outDir, slug, 'icons');
   const markDir = path.join(outDir, slug, 'mark');
   fs.mkdirSync(iconsDir, { recursive: true });

package/src/make-sheet.mjs

@@ -7,6 +7,7 @@ import { mkdirSync, writeFileSync } from 'node:fs';
 import path from 'node:path';
 import sharp from 'sharp';
 import { markSvg } from './lib/mark.mjs';
+import { normalizeGlyph } from './lib/identity.mjs';
 import { fontPath } from './lib/font.mjs';
 import { darken, normalizeHex } from './lib/color.mjs';
 import { esc } from './lib/html.mjs';
@@ -21,6 +22,7 @@ function prettyFont(file) {
 }
 
 export async function makeSheet({ slug, hex, glyph = 'JS', wordmark, deep, browser, outDir }) {
+  glyph = normalizeGlyph(glyph);
   const fill = normalizeHex(hex);
   const deepShade = deep ? normalizeHex(deep) : darken(fill);
   const title = wordmark || glyph;

package/src/make-web.mjs

@@ -5,9 +5,11 @@
 import { mkdirSync, writeFileSync } from 'node:fs';
 import path from 'node:path';
 import { darken, normalizeHex } from './lib/color.mjs';
+import { normalizeGlyph } from './lib/identity.mjs';
 
 export function makeWeb({ slug, hex, glyph = 'JS', name, deep, onColor, outDir }) {
   const accent = normalizeHex(hex);
+  glyph = normalizeGlyph(glyph);
   const deepShade = deep ? normalizeHex(deep) : darken(accent);
   const onAccent = onColor ? normalizeHex(onColor) : '#ffffff';
   const label = name || slug;

package/src/make-wordmark.mjs

@@ -8,6 +8,7 @@ import path from 'node:path';
 import sharp from 'sharp';
 import { wordmarkSvg } from './lib/wordmark.mjs';
 import { WORDMARK_CHARS, ensureGlyphs, wordmarkGlyphFile } from './lib/glyphs.mjs';
+import { normalizeGlyph } from './lib/identity.mjs';
 
 const INK = { light: '#0b0620', dark: '#ffffff' }; // ink for light / dark backgrounds
 const PNG_HEIGHT = 512; // raster export height; SVG stays the source of truth
@@ -17,13 +18,14 @@ const VARIANTS = [
 ];
 
 export async function makeWordmark({ slug, hex, text, glyph = 'JS', weight = 700, outDir }) {
+  glyph = normalizeGlyph(glyph);
   const dir = path.join(outDir, slug, 'wordmark');
   mkdirSync(dir, { recursive: true });
 
   // The build pre-extracts, but a one-off kit lands straight here, so make sure
   // the cache exists. It bundles the whole alphabet (WORDMARK_CHARS) so a one-off
   // never overwrites the shared set with just its own name's letters.
-  ensureGlyphs({ file: wordmarkGlyphFile(), weight, chars: WORDMARK_CHARS, label: 'wordmark glyphs' });
+  await ensureGlyphs({ file: wordmarkGlyphFile(), weight, chars: WORDMARK_CHARS, label: 'wordmark glyphs' });
 
   const toPng = (svg) => sharp(Buffer.from(svg)).resize({ height: PNG_HEIGHT }).png().toBuffer();
   for (const { caps, base } of VARIANTS) {

package/src/site.mjs

@@ -11,6 +11,7 @@ import path from 'node:path';
 import sharp from 'sharp';
 import { markSvg } from './lib/mark.mjs';
 import { darken, normalizeHex } from './lib/color.mjs';
+import { normalizeGlyph } from './lib/identity.mjs';
 import { pngsToIco } from './lib/ico.mjs';
 
 const DEFAULT_CONFIG = {
@@ -27,6 +28,7 @@ function headSnippet(accent) {
     '<link rel="icon" type="image/svg+xml" href="/favicon.svg" />',
     '<link rel="apple-touch-icon" href="/apple-touch-icon.png" />',
     '<link rel="manifest" href="/site.webmanifest" />',
+    '<link rel="stylesheet" href="/brand-tokens.css" />',
     `<meta name="theme-color" content="${accent}" />`,
   ].join('\n');
 }
@@ -69,7 +71,7 @@ export async function generateSite({ config, publicDir = 'public', cwd = process
   const accent = normalizeHex(cfg.accent);
   const onAccent = cfg.onColor ? normalizeHex(cfg.onColor) : '#ffffff';
   const deep = cfg.deep ? normalizeHex(cfg.deep) : darken(accent);
-  const glyph = cfg.glyph || 'JS';
+  const glyph = normalizeGlyph(cfg.glyph || 'JS');
   const name = cfg.name || 'Site';
 
   const pub = path.resolve(cwd, publicDir);

package/requirements.txt

@@ -1,3 +0,0 @@
-# For ./glyphs.sh (glyph extraction). Install with: pip install -r requirements.txt
-fonttools>=4.60
-brotli>=1.1

package/src/lib/extract-glyphs.py

@@ -1,75 +0,0 @@
-#!/usr/bin/env python3
-"""Extract glyph outlines as SVG path data for the brand mark.
-
-Defaults to the bundled Inter variable woff2, but any font works: pass a path to
-a .ttf/.otf/.woff2. Variable fonts are instantiated at the given weight; static
-fonts use their single master. Output is JSON the node generators consume, so
-they stay pure-node.
-
-Usage:
-  python3 bin/lib/extract-glyphs.py "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789" 800
-  python3 bin/lib/extract-glyphs.py "AB" 700 ~/fonts/SomeFont.ttf
-  python3 bin/lib/extract-glyphs.py "AB" 700 ~/fonts/SomeFont.ttf myfont-glyphs.json
-
-The default run writes brand-glyphs.json (the kit's glyph cache). A custom font
-writes <font-stem>-glyphs.json unless you name the output, so the brand cache is
-never clobbered by accident. Point a generator at a non-default file with
-BRAND_GLYPHS=<file> (e.g. BRAND_GLYPHS=somefont-glyphs.json ./kit.sh ...).
-"""
-import json
-import sys
-from pathlib import Path
-
-from fontTools.ttLib import TTFont
-from fontTools.varLib.instancer import instantiateVariableFont
-from fontTools.pens.svgPathPen import SVGPathPen
-from fontTools.pens.boundsPen import BoundsPen
-
-here = Path(__file__).resolve().parent
-root = here.parents[1]
-default_font = root / "assets/fonts/inter/inter-variable-latin.woff2"
-
-chars = sys.argv[1] if len(sys.argv) > 1 else "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"
-weight = float(sys.argv[2]) if len(sys.argv) > 2 else 800.0
-font_path = Path(sys.argv[3]).expanduser() if len(sys.argv) > 3 else default_font
-
-if len(sys.argv) > 4:
-    out_path = Path(sys.argv[4])
-    if not out_path.is_absolute():
-        out_path = here / out_path
-elif len(sys.argv) > 3:
-    # Custom font, no explicit output: derive a name so Inter is never clobbered.
-    out_path = here / f"{font_path.stem}-glyphs.json"
-else:
-    out_path = here / "brand-glyphs.json"
-
-font = TTFont(str(font_path))
-if "fvar" in font:
-    instantiateVariableFont(font, {"wght": weight}, inplace=True)
-
-glyph_set = font.getGlyphSet()
-cmap = font.getBestCmap()
-upem = font["head"].unitsPerEm
-
-glyphs = {}
-for ch in dict.fromkeys(chars):
-    name = cmap[ord(ch)]
-    g = glyph_set[name]
-    pen = SVGPathPen(glyph_set)
-    g.draw(pen)
-    bp = BoundsPen(glyph_set)
-    g.draw(bp)
-    # Blank glyphs (e.g. the space) have no contours, so BoundsPen leaves
-    # bounds None; they still carry an advance width the layout needs.
-    xmin, ymin, xmax, ymax = bp.bounds or (0, 0, 0, 0)
-    glyphs[ch] = {
-        "path": pen.getCommands(),
-        "advance": g.width,
-        "bounds": {"xMin": xmin, "yMin": ymin, "xMax": xmax, "yMax": ymax},
-    }
-
-out_path.write_text(json.dumps(
-    {"font": font_path.name, "unitsPerEm": upem, "weight": weight, "glyphs": glyphs},
-    indent=2,
-))
-print(f"wrote {out_path.name} from {font_path.name} — upem={upem} weight={int(weight)} chars={''.join(glyphs)}")