feat(brand): adopt the squircle mesh mark and Air wordmark

apps/web/index.html

@@ -24,8 +24,8 @@
       content="default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; img-src 'self' data: blob:; connect-src 'self' ws://localhost:* http://localhost:* ws://127.0.0.1:* http://127.0.0.1:* wss://* https://* https://hub.xnet.fyi https://cloud.xnet.fyi https://*.xnet.fyi https://demo-bucket.protomaps.com https://tiles.openfreemap.org https://www.youtube.com https://publish.twitter.com https://huggingface.co https://*.huggingface.co https://*.hf.co https://raw.githubusercontent.com; font-src 'self' data:; worker-src 'self' blob:; frame-src https://www.youtube.com https://www.youtube-nocookie.com https://player.vimeo.com https://open.spotify.com https://w.soundcloud.com https://platform.twitter.com https://www.instagram.com https://instagram.com https://www.tiktok.com https://codepen.io https://codesandbox.io https://stackblitz.com https://figma.com https://www.figma.com"
     />
     <link rel="manifest" href="/manifest.json" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+    <link rel="icon" type="image/svg+xml" sizes="any" href="/favicon.svg" />
     <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
     <title>xNet</title>
   </head>

scripts/generate-brand-icons.mjs

@@ -0,0 +1,148 @@
+#!/usr/bin/env node
+/**
+ * Regenerate xNet icons and PNG exports: node scripts/generate-brand-icons.mjs
+ * Source artwork lives in site/public/mark.svg and site/public/wordmark.svg.
+ * Uses the site's existing sharp dependency (pnpm --dir site install --ignore-workspace).
+ */
+import { mkdir, readFile, writeFile } from 'node:fs/promises'
+import { createRequire } from 'node:module'
+
+const require = createRequire(new URL('../site/package.json', import.meta.url))
+const sharp = require('sharp')
+const file = (path) => new URL(`../${path}`, import.meta.url)
+const source = await readFile(file('site/public/mark.svg'), 'utf8')
+const body = source.match(/<svg\b[^>]*>([\s\S]*?)<\/svg>\s*$/)?.[1].trim()
+if (!body || !source.includes('viewBox="0 0 100 100"')) {
+  throw new Error('Expected site/public/mark.svg to use a 100 × 100 viewBox')
+}
+
+const svg = (content, color = '#fff') =>
+  `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="currentColor" style="color:${color}">${content}</svg>`
+const mark = (scale) =>
+  `<g transform="translate(${(100 - scale * 100) / 2} ${(100 - scale * 100) / 2}) scale(${scale})">${body}</g>`
+const tile = (radius, scale = 0.74) =>
+  `<rect width="100" height="100" rx="${radius}" fill="#000"/>${mark(scale)}`
+const artwork = {
+  // iOS and web install surfaces apply their own corner masks.
+  app: svg(tile(0)),
+  desktop: svg(tile(23)),
+  // Legacy ICNS files need their own tile and breathing room on older macOS.
+  mac: svg(`<g transform="translate(6.25 6.25) scale(.875)">${tile(23)}</g>`),
+  favicon: svg(tile(23, 0.84)),
+  mask: svg(body),
+  // Keep every arm inside Android's 66 dp safe circle in a 108 dp layer.
+  // https://developer.android.com/develop/ui/compose/system/icon_design_adaptive
+  adaptive: svg(mark(0.52))
+}
+
+const png = (kind, size, opaque = false) => {
+  const rendered = sharp(Buffer.from(artwork[kind]), { density: (size / 100) * 72 }).resize(
+    size,
+    size
+  )
+  return (opaque ? rendered.removeAlpha() : rendered).png().toBuffer()
+}
+
+const rasterFiles = [
+  ['apps/electron/build/icon.png', 'desktop', 1024],
+  ['apps/expo/assets/icon.png', 'app', 1024, true],
+  ['apps/expo/assets/adaptive-icon.png', 'adaptive', 1024],
+  ['apps/web/public/apple-touch-icon.png', 'app', 180, true],
+  ['apps/web/public/icons/icon-192.png', 'app', 192, true],
+  ['apps/web/public/icons/icon-512.png', 'app', 512, true],
+  ['site/public/mark.png', 'mask', 96]
+]
+
+// ICO stores a directory of PNG representations, including real small-size renders.
+const ico = async (kind, sizes) => {
+  const images = await Promise.all(sizes.map((size) => png(kind, size)))
+  const header = Buffer.alloc(6)
+  header.writeUInt16LE(1, 2)
+  header.writeUInt16LE(images.length, 4)
+  const entries = images.map((image, index) => {
+    const entry = Buffer.alloc(16)
+    entry[0] = entry[1] = sizes[index] === 256 ? 0 : sizes[index]
+    entry.writeUInt16LE(1, 4)
+    entry.writeUInt16LE(32, 6)
+    entry.writeUInt32LE(image.length, 8)
+    entry.writeUInt32LE(
+      6 + images.length * 16 + images.slice(0, index).reduce((sum, item) => sum + item.length, 0),
+      12
+    )
+    return entry
+  })
+  return Buffer.concat([header, ...entries, ...images])
+}
+
+// PNG-backed ICNS chunks keep generation portable; no macOS-only iconutil required.
+const icns = async () => {
+  const representations = [
+    ['icp4', 16],
+    ['icp5', 32],
+    ['icp6', 64],
+    ['ic07', 128],
+    ['ic08', 256],
+    ['ic09', 512],
+    ['ic10', 1024],
+    ['ic11', 32],
+    ['ic12', 64],
+    ['ic13', 256],
+    ['ic14', 512]
+  ]
+  const chunks = await Promise.all(
+    representations.map(async ([type, size]) => {
+      const image = await png('mac', size)
+      const header = Buffer.alloc(8)
+      header.write(type, 0, 4, 'ascii')
+      header.writeUInt32BE(image.length + 8, 4)
+      return Buffer.concat([header, image])
+    })
+  )
+  const header = Buffer.alloc(8)
+  header.write('icns', 0, 4, 'ascii')
+  header.writeUInt32BE(8 + chunks.reduce((sum, chunk) => sum + chunk.length, 0), 4)
+  return Buffer.concat([header, ...chunks])
+}
+
+const favicon = `<!-- Generated by scripts/generate-brand-icons.mjs from mark.svg. -->
+${artwork.favicon}
+`
+
+const wordmarkSource = await readFile(file('site/public/wordmark.svg'), 'utf8')
+const brandSources = [
+  ['mark', source, 2048],
+  ['wordmark', wordmarkSource, 2400]
+]
+const brandExports = brandSources.flatMap(([name, artwork, width]) =>
+  [
+    ['black', '#000000'],
+    ['white', '#ffffff']
+  ].map(async ([variant, color]) => {
+    const colored = artwork.replaceAll('currentColor', color)
+    const data = await sharp(Buffer.from(colored), { density: 600 })
+      .resize({ width })
+      .png()
+      .toBuffer()
+    return [`site/public/brand/xnet-${name}-${variant}.png`, data]
+  })
+)
+
+// Prepare every asset before replacing any existing file.
+const outputs = await Promise.all([
+  ...brandExports,
+  ...rasterFiles.map(async ([path, kind, size, opaque]) => [path, await png(kind, size, opaque)]),
+  Promise.resolve(['apps/web/public/favicon.svg', favicon]),
+  Promise.resolve(['site/public/favicon.svg', favicon]),
+  ico('desktop', [16, 24, 32, 48, 64, 128, 256]).then((data) => [
+    'apps/electron/build/icon.ico',
+    data
+  ]),
+  ico('favicon', [16, 24, 32, 48, 64, 128, 256]).then((data) => [
+    'apps/web/public/favicon.ico',
+    data
+  ]),
+  icns().then((data) => ['apps/electron/build/icon.icns', data])
+])
+await mkdir(file('site/public/brand'), { recursive: true })
+await Promise.all(outputs.map(([path, data]) => writeFile(file(path), data)))
+console.log(`Generated ${outputs.length} xNet icons and PNG exports`)

site/public/brand/quicksand-ofl.txt

@@ -0,0 +1,93 @@
+Copyright 2011 The Quicksand Project Authors (https://github.com/andrew-paglinawan/QuicksandFamily), with Reserved Font Name “Quicksand”.
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

site/src/components/BrandWordmark.astro

@@ -0,0 +1,13 @@
+<span class="brand-wordmark" role="img" aria-label="xNet"></span>
+
+<style>
+  .brand-wordmark {
+    display: block;
+    height: 1.75rem;
+    aspect-ratio: 226.147927 / 86;
+    flex: none;
+    background-color: currentColor;
+    -webkit-mask: url('/wordmark.svg') center / contain no-repeat;
+    mask: url('/wordmark.svg') center / contain no-repeat;
+  }
+</style>

site/src/components/docs/SiteTitle.astro

@@ -1,15 +1,16 @@
 ---
+import BrandWordmark from '../BrandWordmark.astro'
+
 /**
  * Custom Starlight SiteTitle — "xNet" links to landing page, "Docs" links to docs root.
  */
 ---
 
-<a href="/" class="site-title sl-flex">
-  <span class="site-title-mark" aria-hidden="true"></span>
-  <span class="site-title-text">xNet</span>
+<div class="site-title sl-flex">
+  <a href="/" class="site-title-brand" aria-label="xNet"><BrandWordmark /></a>
   <span class="site-title-separator">/</span>
   <a href="/docs/introduction/" class="site-title-docs">Docs</a>
-</a>
+</div>
 
 <style>
   .site-title {
@@ -22,48 +23,13 @@
     white-space: nowrap;
   }
 
-  /* Debossed brand mark — see Nav.astro for the same treatment on the
-     landing header. Two offset copies of one alpha mask: a dark incision
-     over a light lower edge. */
-  .site-title-mark {
-    position: relative;
-    width: 1.4rem;
-    height: 1.4rem;
-    flex: none;
-  }
-
-  .site-title-mark::before,
-  .site-title-mark::after {
-    content: '';
-    position: absolute;
-    inset: 0;
-    -webkit-mask: url('/mark.png') center / contain no-repeat;
-    mask: url('/mark.png') center / contain no-repeat;
-  }
-
-  /* Dark is Starlight's default: on a near-black bar the lit lower edge has to
-     carry the shape, so the groove is etched rather than pressed. */
-  .site-title-mark::before {
-    background: rgba(0, 0, 0, 0.9);
-    transform: translate(-0.5px, -0.5px);
-  }
-
-  .site-title-mark::after {
-    background: rgba(255, 255, 255, 0.50);
-  }
-
-  /* Starlight ships a light theme too — there the groove reads as a genuine
-     deboss: dark incision over a white lower edge. */
-  :global([data-theme='light']) .site-title-mark::before {
-    background: rgba(255, 255, 255, 0.9);
-    transform: translate(0.5px, 0.5px);
-  }
-
-  :global([data-theme='light']) .site-title-mark::after {
-    background: rgba(15, 23, 42, 0.62);
+  .site-title-brand {
+    display: inline-flex;
+    color: inherit;
+    text-decoration: none;
   }
 
-  .site-title-text:hover {
+  .site-title-brand:hover {
     color: var(--sl-color-accent);
   }