fix: add favicon and social preview image

apps/web/src/layouts/Layout.astro

@@ -2,6 +2,14 @@
 import { Font } from 'astro:assets';
 import '../styles/global.css';
 import Header from '../components/Header.astro';
+import { NETH_MARK_FILE } from '../lib/nethMark.ts';
+import {
+  SITE_TITLE,
+  SOCIAL_IMAGE_HEIGHT,
+  SOCIAL_IMAGE_WIDTH,
+  socialImageUrl,
+  withBase,
+} from '../lib/site.ts';
 
 interface Props {
   title: string;
@@ -11,6 +19,8 @@ interface Props {
 
 const { title, description, surface = 'docs' } = Astro.props;
 const canonical = new URL(Astro.url.pathname, Astro.site);
+const faviconHref = withBase(NETH_MARK_FILE);
+const socialImage = socialImageUrl();
 ---
 
 <!doctype html>
@@ -21,10 +31,22 @@ const canonical = new URL(Astro.url.pathname, Astro.site);
     <title>{title}</title>
     <meta name="description" content={description} />
     <link rel="canonical" href={canonical.href} />
+    <link rel="icon" href={faviconHref} type="image/svg+xml" />
+    <meta property="og:site_name" content={SITE_TITLE} />
     <meta property="og:title" content={title} />
     <meta property="og:description" content={description} />
     <meta property="og:url" content={canonical.href} />
     <meta property="og:type" content="website" />
+    <meta property="og:image" content={socialImage} />
+    <meta property="og:image:type" content="image/png" />
+    <meta property="og:image:width" content={String(SOCIAL_IMAGE_WIDTH)} />
+    <meta property="og:image:height" content={String(SOCIAL_IMAGE_HEIGHT)} />
+    <meta property="og:image:alt" content={title} />
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:title" content={title} />
+    <meta name="twitter:description" content={description} />
+    <meta name="twitter:image" content={socialImage} />
+    <meta name="twitter:image:alt" content={title} />
     <Font cssVariable="--font-cormorant" preload />
     <Font cssVariable="--font-inter" preload />
   </head>

apps/web/src/lib/nethMark.ts

@@ -1,20 +1,10 @@
-import { SITE_BASE, SITE_ORIGIN } from './site.ts';
+import { siteAssetUrl } from './site.ts';
 
 export const NETH_MARK_VIEWBOX = '186 117 878 878';
 export const NETH_MARK_PATH =
   'M 628 117 L 393 544 L 608 995 L 858 552 Z M 628 255 L 689 410 L 627 643 L 737 489 L 769 551 L 611 843 L 476 546 Z';
 export const NETH_MARK_FILE = 'neth.svg';
 
-function envString(key: string): string | undefined {
-  const env = import.meta.env as Record<string, string | undefined> | undefined;
-  const value = env?.[key];
-  return typeof value === 'string' && value.trim() ? value.trim() : undefined;
-}
-
 export function nethMarkUrl(): string {
-  const originRaw = envString('SITE') ?? SITE_ORIGIN;
-  const origin = originRaw.endsWith('/') ? originRaw : `${originRaw}/`;
-  const baseRaw = envString('BASE_URL') ?? SITE_BASE;
-  const base = baseRaw.endsWith('/') ? baseRaw : `${baseRaw}/`;
-  return new URL(`${base}${NETH_MARK_FILE}`, origin).href;
+  return siteAssetUrl(NETH_MARK_FILE);
 }

apps/web/src/lib/site.test.ts

@@ -0,0 +1,48 @@
+import assert from 'node:assert/strict';
+import { existsSync, readFileSync } from 'node:fs';
+import { dirname, join } from 'node:path';
+import { describe, it } from 'node:test';
+import { fileURLToPath } from 'node:url';
+import { NETH_MARK_FILE } from './nethMark.ts';
+import {
+  SOCIAL_IMAGE_FILE,
+  SOCIAL_IMAGE_HEIGHT,
+  SOCIAL_IMAGE_WIDTH,
+  siteAssetUrl,
+  socialImageUrl,
+  withBase,
+} from './site.ts';
+
+const here = dirname(fileURLToPath(import.meta.url));
+const publicDir = join(here, '../../public');
+const layoutPath = join(here, '../layouts/Layout.astro');
+
+describe('site assets', () => {
+  it('publishes hero.png as the social preview image', () => {
+    const file = join(publicDir, SOCIAL_IMAGE_FILE);
+    assert.equal(existsSync(file), true, SOCIAL_IMAGE_FILE);
+    const png = readFileSync(file);
+    assert.equal(png.subarray(0, 8).equals(Buffer.from([137, 80, 78, 71, 13, 10, 26, 10])), true);
+    assert.equal(png.readUInt32BE(16), SOCIAL_IMAGE_WIDTH);
+    assert.equal(png.readUInt32BE(20), SOCIAL_IMAGE_HEIGHT);
+    assert.equal(socialImageUrl(), 'https://netherprotocol.xyz/hero.png');
+  });
+
+  it('publishes the NETH mark as the favicon', () => {
+    assert.equal(existsSync(join(publicDir, NETH_MARK_FILE)), true, NETH_MARK_FILE);
+    assert.equal(siteAssetUrl(NETH_MARK_FILE), 'https://netherprotocol.xyz/neth.svg');
+    assert.equal(withBase(NETH_MARK_FILE), '/neth.svg');
+  });
+
+  it('wires favicon and social image tags in the document head', () => {
+    const layout = readFileSync(layoutPath, 'utf8');
+    assert.ok(layout.includes('rel="icon"'));
+    assert.ok(layout.includes('type="image/svg+xml"'));
+    assert.ok(layout.includes('withBase(NETH_MARK_FILE)'));
+    assert.ok(layout.includes('property="og:image"'));
+    assert.ok(layout.includes('name="twitter:card"'));
+    assert.ok(layout.includes('summary_large_image'));
+    assert.ok(layout.includes('name="twitter:image"'));
+    assert.ok(layout.includes('socialImageUrl()'));
+  });
+});

apps/web/src/lib/site.ts

@@ -58,15 +58,37 @@ export const RISK_WARNING_DETAILS = [
   'Capital is at high risk. Use Nether entirely at your own risk.',
 ] as const;
 
-function githubRepoUrl(): string {
+export const SOCIAL_IMAGE_FILE = 'hero.png';
+export const SOCIAL_IMAGE_WIDTH = 1122;
+export const SOCIAL_IMAGE_HEIGHT = 1402;
+
+function envString(key: string): string | undefined {
   const env = import.meta.env as Record<string, string | undefined> | undefined;
-  const fromEnv = env?.PUBLIC_GITHUB_REPO;
-  if (typeof fromEnv === 'string' && fromEnv.trim()) {
-    return fromEnv.trim().replace(/\/+$/, '');
+  const value = env?.[key];
+  return typeof value === 'string' && value.trim() ? value.trim() : undefined;
+}
+
+function githubRepoUrl(): string {
+  const fromEnv = envString('PUBLIC_GITHUB_REPO');
+  if (fromEnv) {
+    return fromEnv.replace(/\/+$/, '');
   }
   return GITHUB_REPO_FALLBACK;
 }
 
+export function siteAssetUrl(pathname: string): string {
+  const originRaw = envString('SITE') ?? SITE_ORIGIN;
+  const origin = originRaw.endsWith('/') ? originRaw : `${originRaw}/`;
+  const baseRaw = envString('BASE_URL') ?? SITE_BASE;
+  const base = baseRaw.endsWith('/') ? baseRaw : `${baseRaw}/`;
+  const trimmed = pathname.replace(/^\/+/, '');
+  return new URL(`${base}${trimmed}`, origin).href;
+}
+
+export function socialImageUrl(): string {
+  return siteAssetUrl(SOCIAL_IMAGE_FILE);
+}
+
 export function withBase(pathname = ''): string {
   const env = import.meta.env as Record<string, string | undefined> | undefined;
   const base = (typeof env?.BASE_URL === 'string' && env.BASE_URL) || SITE_BASE;

apps/web/src/pages/index.astro

@@ -12,11 +12,14 @@ import {
   SECONDARY_CTA,
   SITE_DESCRIPTION,
   SITE_TITLE,
+  SOCIAL_IMAGE_FILE,
+  SOCIAL_IMAGE_HEIGHT,
+  SOCIAL_IMAGE_WIDTH,
   withBase,
 } from '../lib/site';
 
 const learnHref = withBase('learn');
-const heroSrc = withBase('hero.png');
+const heroSrc = withBase(SOCIAL_IMAGE_FILE);
 ---
 
 <Layout title={SITE_TITLE} description={SITE_DESCRIPTION} surface="holder">
@@ -54,8 +57,8 @@ const heroSrc = withBase('hero.png');
         <img
           src={heroSrc}
           alt=""
-          width="1122"
-          height="1402"
+          width={SOCIAL_IMAGE_WIDTH}
+          height={SOCIAL_IMAGE_HEIGHT}
           class="relative z-10 mx-auto block h-auto w-full object-contain md:absolute md:inset-0 md:h-full md:w-full"
         />
       </div>