From a501052d59bd0bd6569ccf6d72e0fc725d69d032 Mon Sep 17 00:00:00 2001
From: Bailey Townsend <baileytownsend@pm.me>
Date: Fri, 16 Oct 2026 16:48:27 -0500
Subject: [PATCH] more moo

---
 .../lib/components/og/GenericOgCard.svelte    |  70 +++++++---
 web-ui/src/lib/components/og/PdsCard.svelte   | 123 +++++++++++-------
 web-ui/src/lib/components/og/cards.test.ts    |   3 -
 .../src/routes/og/pds/[hostname]/+server.ts   |   1 -
 4 files changed, 123 insertions(+), 74 deletions(-)

diff --git a/web-ui/src/lib/components/og/GenericOgCard.svelte b/web-ui/src/lib/components/og/GenericOgCard.svelte
index f515c83..b48bb69 100644
--- a/web-ui/src/lib/components/og/GenericOgCard.svelte
+++ b/web-ui/src/lib/components/og/GenericOgCard.svelte
@@ -1,45 +1,75 @@
 <script lang="ts">
     /**
      * Fallback 1200x630 share card for a host that is not a verified directory entry (unlisted,
-     * hidden, unverified, a directory outage, or a card render that failed). Same rendering rules
-     * as {@link PdsCard}: inline styles, explicit flexbox, no browser.
+     * hidden, unverified, a directory outage, or a card render that failed).
+     *
+     * Same milk-cow styling as {@link PdsCard} — the mascot's three colors, heavy black outlines,
+     * patches off the right edge — so a verified and an unverified link look like one family. Same
+     * rendering rules too: inline styles, explicit flexbox, no browser.
      */
     import MooMark from '$lib/components/og/MooMark.svelte';
 
     let {siteUrl = 'https://pdsmoover.com'}: {siteUrl?: string} = $props();
 
     const highlights = ['Repos', 'Blobs', 'Handle + PLC', 'Digital signatures'];
+
+    // The card's job is the link below it, not the host in it, so name the service. The origin is
+    // whatever the request came in on, so cap it rather than let a long host run into the artwork.
+    const domain = $derived(
+        clamp(siteUrl.replace(/^https?:\/\//, '').replace(/\/+$/, ''), 24),
+    );
+
+    function clamp(value: string, max: number): string {
+        return value.length <= max ? value : `${value.slice(0, max - 1)}…`;
+    }
 </script>
 
 <div
-    style="display: flex; flex-direction: column; width: 100%; height: 100%; padding: 60px 72px; box-sizing: border-box; justify-content: space-between; color: #ffffff; font-family: sans-serif; background-color: #16161a; background-image: linear-gradient(135deg, #1e1e28 0%, #15151a 55%, #1c1834 100%);"
+    style="display: flex; width: 1200px; height: 630px; box-sizing: border-box; padding: 22px; background-color: #ffffff; font-family: sans-serif; color: #000000;"
 >
-    <div style="display: flex; align-items: center;">
-        <div style="display: flex; align-items: center; justify-content: center; margin-right: 16px;">
-            <MooMark/>
-        </div>
-        <div style="font-size: 30px; font-weight: 700;">PDS MOOver</div>
-    </div>
+    <div
+        style="position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; box-sizing: border-box; overflow: hidden; border: 9px solid #000000; border-radius: 46px; background-color: #fffdf7; padding: 48px 60px; justify-content: space-between;"
+    >
+        <div
+            style="position: absolute; right: -90px; top: -140px; width: 430px; height: 370px; border-radius: 54% 46% 42% 58%; background-color: #000000;"
+        ></div>
+        <div
+            style="position: absolute; right: -300px; bottom: -220px; width: 430px; height: 400px; border-radius: 50% 50% 46% 54%; background-color: #ffa7de;"
+        ></div>
 
-    <div style="display: flex; flex-direction: column;">
-        <div style="font-size: 76px; font-weight: 800; line-height: 1.05; letter-spacing: -2px;">
-            Move your Atmosphere account
+        <div style="display: flex; align-items: center;">
+            <div style="display: flex; align-items: center; justify-content: center; margin-right: 18px;">
+                <MooMark/>
+            </div>
+            <div style="display: flex; font-size: 33px; font-weight: 800; letter-spacing: 7px;">
+                PDS MOOVER
+            </div>
         </div>
-        <div style="display: flex; font-size: 30px; color: #9aa0b4; margin-top: 24px;">
-            Migrate between PDS hosts, keep your handle, and take your data with you.
+
+        <div style="display: flex; flex-direction: column; max-width: 760px;">
+            <div
+                style="display: flex; font-size: 72px; font-weight: 800; line-height: 1.05; letter-spacing: -2px;"
+            >
+                Move your Atmosphere account
+            </div>
+            <div style="display: flex; font-size: 28px; color: #6f6a60; margin-top: 22px;">
+                Migrate between PDS hosts, keep your handle, and take your data with you.
+            </div>
         </div>
-    </div>
 
-    <div style="display: flex; align-items: flex-end; justify-content: space-between;">
-        <div style="display: flex;">
-            {#each highlights as highlight, index (highlight)}
+        <div style="display: flex; align-items: center;">
+            {#each highlights as highlight (highlight)}
                 <div
-                    style="display: flex; align-items: center; font-size: 22px; color: #c7caff; border-radius: 999px; padding: 10px 22px; background-color: rgba(100,108,255,0.16); border: 1px solid rgba(100,108,255,0.35); margin-right: {index < highlights.length - 1 ? '14px' : '0'};"
+                    style="display: flex; font-size: 20px; font-weight: 700; padding: 8px 18px; border: 5px solid #000000; border-radius: 999px; margin-right: 12px;"
                 >
                     {highlight}
                 </div>
             {/each}
+            <div
+                style="display: flex; font-size: 20px; font-weight: 700; padding: 8px 18px; border: 5px solid #000000; border-radius: 999px; background-color: #ffa7de;"
+            >
+                {domain}
+            </div>
         </div>
-        <div style="display: flex; font-size: 24px; color: #a2a7ff;">{siteUrl}</div>
     </div>
 </div>
diff --git a/web-ui/src/lib/components/og/PdsCard.svelte b/web-ui/src/lib/components/og/PdsCard.svelte
index 9f142df..9e9fb6d 100644
--- a/web-ui/src/lib/components/og/PdsCard.svelte
+++ b/web-ui/src/lib/components/og/PdsCard.svelte
@@ -1,9 +1,16 @@
 <script lang="ts">
     /**
      * 1200x630 share card for a verified PDS, rendered to PNG by the `/og/pds/<host>` endpoint via
-     * `@ethercorps/sveltekit-og` (Takumi engine). Styles are inline on purpose: the renderer parses
-     * the server-rendered HTML into an image without a browser, so it understands only a subset of
-     * CSS — every container with more than one child is an explicit flexbox.
+     * `@ethercorps/sveltekit-og` (Takumi engine).
+     *
+     * Drawn in the mascot's own palette — the artwork uses exactly three colors, black ink, milk
+     * white and candy pink — with the heavy black outlines the artwork is drawn with, and two
+     * Holstein patches bleeding off the right edge.
+     *
+     * Styles are inline on purpose: the renderer parses the server-rendered HTML into an image
+     * without a browser, so it understands only a subset of CSS — every container with more than
+     * one child is an explicit flexbox, and an absolutely positioned child paints *over* later
+     * siblings, which is why the patches only ever sit in the empty right column.
      */
     import MooMark from '$lib/components/og/MooMark.svelte';
 
@@ -13,7 +20,6 @@
         avatar = null,
         initial,
         accountCount = undefined,
-        siteUrl,
     }: {
         name: string;
         hostname: string;
@@ -21,72 +27,89 @@
         avatar?: string | null;
         initial: string;
         accountCount?: number;
-        status?: string;
-        /** Origin the card is served from, e.g. `https://pdsmoover.com`. */
-        siteUrl: string;
     } = $props();
 
     const stats = $derived(
-        [
-            accountCount && accountCount > 0
-                ? `${accountCount.toLocaleString('en-US')} accounts`
-                : null,
-        ]
-            .filter(Boolean)
-            .join(' · '),
+        accountCount && accountCount > 0 ? `${accountCount.toLocaleString('en-US')} accounts` : '',
     );
 
+    /** Cuts at a word boundary so a long host name never ends mid-word. */
+    function clamp(value: string, max: number): string {
+        if (value.length <= max) return value;
+        const cut = value.slice(0, max);
+        const space = cut.lastIndexOf(' ');
+        return `${(space > max * 0.55 ? cut.slice(0, space) : cut).trimEnd()}…`;
+    }
+
     // Display names come from the directory, so they can be any length. Cap the longest ones and
-    // step the font down so the name, the badge and the footer all stay on the card.
-    const shownName = $derived(name.length > 72 ? `${name.slice(0, 71).trimEnd()}…` : name);
-    const nameSize = $derived(
-        shownName.length > 46 ? 44 : shownName.length > 30 ? 54 : 66,
-    );
+    // step the font down so the name, the hostname and the footer all stay on the card.
+    const shownName = $derived(clamp(name, 34));
+    const nameSize = $derived(shownName.length > 20 ? 56 : 70);
 </script>
 
 <div
-    style="display: flex; flex-direction: column; width: 100%; height: 100%; padding: 60px 72px; box-sizing: border-box; justify-content: space-between; color: #ffffff; font-family: sans-serif; background-color: #16161a; background-image: linear-gradient(135deg, #1e1e28 0%, #15151a 55%, #1c1834 100%);"
+    style="display: flex; width: 1200px; height: 630px; box-sizing: border-box; padding: 22px; background-color: #ffffff; font-family: sans-serif; color: #000000;"
 >
-    <div style="display: flex; align-items: center; justify-content: space-between;">
+    <div
+        style="position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; box-sizing: border-box; overflow: hidden; border: 9px solid #000000; border-radius: 46px; background-color: #fffdf7; padding: 48px 60px; justify-content: space-between;"
+    >
+        <div
+            style="position: absolute; right: -90px; top: -140px; width: 430px; height: 370px; border-radius: 54% 46% 42% 58%; background-color: #000000;"
+        ></div>
+        <div
+            style="position: absolute; right: -180px; bottom: -200px; width: 480px; height: 400px; border-radius: 50% 50% 46% 54%; background-color: #ffa7de;"
+        ></div>
+
         <div style="display: flex; align-items: center;">
-            <div style="display: flex; align-items: center; justify-content: center; margin-right: 16px;">
+            <div style="display: flex; align-items: center; justify-content: center; margin-right: 18px;">
                 <MooMark/>
             </div>
-            <div style="font-size: 30px; font-weight: 700;">PDS MOOver</div>
+            <div style="display: flex; font-size: 33px; font-weight: 800; letter-spacing: 7px;">
+                PDS MOOVER
+            </div>
         </div>
-        <div style="display: flex; align-items: center; font-size: 22px; color: #a2a7ff;">
-            Move your Atmosphere account to {shownName}
+
+        <div style="display: flex; align-items: center; max-width: 720px;">
+            <div
+                style="display: flex; align-items: center; justify-content: center; width: 196px; height: 196px; flex-shrink: 0; margin-right: 42px; border: 7px solid #000000; border-radius: 52px; background-color: #ffa7de; overflow: hidden;"
+            >
+                {#if avatar}
+                    <img
+                        src={avatar}
+                        width="196"
+                        height="196"
+                        style="width: 196px; height: 196px; object-fit: cover;"
+                        alt=""
+                    />
+                {:else}
+                    <div style="font-size: 94px; font-weight: 800;">{initial}</div>
+                {/if}
+            </div>
+            <div style="display: flex; flex-direction: column;">
+                <div
+                    style="display: flex; font-size: {nameSize}px; font-weight: 800; line-height: 1.03; letter-spacing: -1px;"
+                >
+                    {shownName}
+                </div>
+                <div style="display: flex; font-size: 26px; font-weight: 700; margin-top: 16px;">
+                    {hostname}
+                </div>
+            </div>
         </div>
-    </div>
 
-    <div style="display: flex; align-items: center;">
-        <div
-            style="display: flex; align-items: center; justify-content: center; width: 224px; height: 224px; flex-shrink: 0; margin-right: 48px; border-radius: 36px; background-color: #26262f; border: 2px solid rgba(255,255,255,0.08); overflow: hidden;"
-        >
-            {#if avatar}
-                <img
-                    src={avatar}
-                    width="224"
-                    height="224"
-                    style="width: 224px; height: 224px; object-fit: cover;"
-                    alt=""
-                />
-            {:else}
-                <div style="font-size: 104px; font-weight: 700; color: #a2a7ff;">{initial}</div>
+        <div style="display: flex; align-items: center;">
+            {#if stats}
+                <div
+                    style="display: flex; font-size: 25px; font-weight: 700; padding: 12px 26px; border: 5px solid #000000; border-radius: 999px; margin-right: 16px;"
+                >
+                    {stats}
+                </div>
             {/if}
-        </div>
-        <div style="display: flex; flex-direction: column; flex: 1;">
             <div
-                style="font-size: {nameSize}px; font-weight: 800; line-height: 1.05; letter-spacing: -1.5px;"
+                style="display: flex; font-size: 25px; font-weight: 700; padding: 12px 26px; border: 5px solid #000000; border-radius: 999px; background-color: #ffa7de;"
             >
-                {shownName}
+                Move your account here
             </div>
-            <div style="font-size: 30px; color: #9aa0b4; margin-top: 14px;">{hostname}</div>
         </div>
     </div>
-
-    <div style="display: flex; align-items: flex-end; justify-content: space-between;">
-        <div style="font-size: 24px; color: #8b90a0;">{stats}</div>
-        <div style="font-size: 24px; color: #a2a7ff;">{siteUrl}/moover/{hostname}</div>
-    </div>
 </div>
diff --git a/web-ui/src/lib/components/og/cards.test.ts b/web-ui/src/lib/components/og/cards.test.ts
index dee26a3..1a863b4 100644
--- a/web-ui/src/lib/components/og/cards.test.ts
+++ b/web-ui/src/lib/components/og/cards.test.ts
@@ -27,8 +27,6 @@ describe('share cards', () => {
             avatar: AVATAR_PIXEL,
             initial: 'C',
             accountCount: 12345,
-            status: 'active',
-            siteUrl: 'https://pdsmoover.com',
         })
 
         expect(response.headers.get('content-type')).toBe('image/png')
@@ -41,7 +39,6 @@ describe('share cards', () => {
             hostname: 'pds.creators.example',
             avatar: null,
             initial: 'C',
-            siteUrl: 'https://pdsmoover.com',
         })
 
         expect(isPng(Buffer.from(await response.arrayBuffer()))).toBe(true)
diff --git a/web-ui/src/routes/og/pds/[hostname]/+server.ts b/web-ui/src/routes/og/pds/[hostname]/+server.ts
index 9488d4a..dfa5b5c 100644
--- a/web-ui/src/routes/og/pds/[hostname]/+server.ts
+++ b/web-ui/src/routes/og/pds/[hostname]/+server.ts
@@ -93,7 +93,6 @@ export const GET: RequestHandler = async ({ params, url }) => {
         avatar,
         initial: initialOf(name),
         accountCount: entry.accountCount,
-        siteUrl,
       },
     )
   } catch (error) {
-- 
knotmirror 0.0.1