feat: add churu holder; fix microsite links on preview deploys

src/components/ProjectCard.astro

@@ -4,28 +4,58 @@ interface Props {
   shortDescription: string;
   techStack: string[];
   homepageUrl: string;
+  micrositePath?: string;
   gitHubUrl: string;
   index?: number;
 }
 
-const { name, shortDescription, techStack, homepageUrl, gitHubUrl, index = 0 } = Astro.props;
+const {
+  name,
+  shortDescription,
+  techStack,
+  homepageUrl,
+  micrositePath,
+  gitHubUrl,
+  index = 0,
+} = Astro.props;
 const jerseyNumber = String(index + 1).padStart(2, '0');
 ---
 
 <div class="card" data-card style={`--card-index: ${index}`}>
   <span class="jersey-number" data-jersey>{jerseyNumber}</span>
   <span class="postmark" data-postmark>PROJECT</span>
-  <a href={homepageUrl}>
+  <a href={homepageUrl} data-microsite-path={micrositePath}>
     <h2 class="name" data-card-name>{name}</h2>
   </a>
   <p class="short-description">{shortDescription}</p>
   <p class="detail" data-card-detail>{techStack.join(', ')}</p>
   <div class="links" data-card-links>
-    <a class="link" href={homepageUrl} aria-label={`${name} homepage`}>homepage</a>
+    <a
+      class="link"
+      href={homepageUrl}
+      data-microsite-path={micrositePath}
+      aria-label={`${name} homepage`}>homepage</a
+    >
     <a class="link" href={gitHubUrl} aria-label={`${name} source code`}>code</a>
   </div>
 </div>
 
+<script>
+  import { resolveProjectUrl } from '../utils/resolveProjectUrl';
+
+  const anchors = document.querySelectorAll<HTMLAnchorElement>('a[data-microsite-path]');
+  for (const anchor of anchors) {
+    const micrositePath = anchor.dataset.micrositePath;
+    if (!micrositePath) continue;
+    anchor.href = resolveProjectUrl({
+      homepageUrl: anchor.href,
+      micrositePath,
+      hostname: globalThis.location.hostname,
+      origin: globalThis.location.origin,
+    });
+  }
+</script>
+
 <style>
   .card {
     position: relative;

src/data/projects.json

@@ -12,6 +12,7 @@
       "shortDescription": "A public service announcement about unnecessary tools.",
       "techStack": ["Astro", "Cloudflare Pages"],
       "homepageUrl": "https://useyourdamnhands.com",
+      "micrositePath": "/hands",
       "gitHubUrl": "https://github.com/cdtinney/tinney.dev"
     },
     {

src/microsites/hands/data/scenarios.ts

@@ -38,4 +38,8 @@ export const SCENARIOS: Scenario[] = [
     title: 'The Finger Chopsticks',
     toolImage: `${IMAGE_PATH}/finger-chopsticks.png`,
   },
+  {
+    title: 'The Churu Holder',
+    toolImage: `${IMAGE_PATH}/churu-holder.png`,
+  },
 ];

src/utils/__tests__/resolveProjectUrl.test.ts

@@ -0,0 +1,69 @@
+import { describe, it, expect } from 'vitest';
+import { resolveProjectUrl } from '../resolveProjectUrl';
+
+describe('resolveProjectUrl', () => {
+  it('returns homepageUrl when micrositePath is absent', () => {
+    expect(
+      resolveProjectUrl({
+        homepageUrl: 'https://example.com',
+        hostname: 'abc.tinney-dev.pages.dev',
+        origin: 'https://abc.tinney-dev.pages.dev',
+      }),
+    ).toBe('https://example.com');
+  });
+
+  it('returns homepageUrl on production tinney.dev', () => {
+    expect(
+      resolveProjectUrl({
+        homepageUrl: 'https://useyourdamnhands.com',
+        micrositePath: '/hands',
+        hostname: 'tinney.dev',
+        origin: 'https://tinney.dev',
+      }),
+    ).toBe('https://useyourdamnhands.com');
+  });
+
+  it('returns homepageUrl on www.tinney.dev', () => {
+    expect(
+      resolveProjectUrl({
+        homepageUrl: 'https://useyourdamnhands.com',
+        micrositePath: '/hands',
+        hostname: 'www.tinney.dev',
+        origin: 'https://www.tinney.dev',
+      }),
+    ).toBe('https://useyourdamnhands.com');
+  });
+
+  it('rewrites to the same origin on a Cloudflare Pages preview', () => {
+    expect(
+      resolveProjectUrl({
+        homepageUrl: 'https://useyourdamnhands.com',
+        micrositePath: '/hands',
+        hostname: '73a6f701.tinney-dev.pages.dev',
+        origin: 'https://73a6f701.tinney-dev.pages.dev',
+      }),
+    ).toBe('https://73a6f701.tinney-dev.pages.dev/hands/');
+  });
+
+  it('rewrites to the same origin on a branch alias preview', () => {
+    expect(
+      resolveProjectUrl({
+        homepageUrl: 'https://useyourdamnhands.com',
+        micrositePath: '/hands',
+        hostname: 'cdtinney-churu-holder.tinney-dev.pages.dev',
+        origin: 'https://cdtinney-churu-holder.tinney-dev.pages.dev',
+      }),
+    ).toBe('https://cdtinney-churu-holder.tinney-dev.pages.dev/hands/');
+  });
+
+  it('rewrites to the same origin on localhost', () => {
+    expect(
+      resolveProjectUrl({
+        homepageUrl: 'https://useyourdamnhands.com',
+        micrositePath: '/hands',
+        hostname: 'localhost',
+        origin: 'http://localhost:4321',
+      }),
+    ).toBe('http://localhost:4321/hands/');
+  });
+});

src/utils/resolveProjectUrl.ts

@@ -0,0 +1,19 @@
+interface ProjectUrlInput {
+  homepageUrl: string;
+  micrositePath?: string;
+  hostname: string;
+  origin: string;
+}
+
+const PRODUCTION_HOSTNAMES = new Set(['tinney.dev', 'www.tinney.dev']);
+
+export function resolveProjectUrl({
+  homepageUrl,
+  micrositePath,
+  hostname,
+  origin,
+}: ProjectUrlInput): string {
+  if (!micrositePath) return homepageUrl;
+  if (PRODUCTION_HOSTNAMES.has(hostname)) return homepageUrl;
+  return `${origin}${micrositePath}/`;
+}