site: load images from own img.{apex}; add Bowling/Paintball art

The public site built room/profile image URLs against a hardcoded
img.rec.net fallback for any non-localhost host, so thumbnails loaded
from real Rec Room (Azure-fronted — hence the TiPMix / x-ms-routing-name
cookies the browser rejected) and DorkNet custom-room images could never
display. Derive the CDN apex from the live host instead (shared
imageApex helper in types.ts, used by profileImageUrl and Rooms.tsx) so
images come from this server's own img.{apex}.

Add the two RR-Original thumbnails as static CDN files in data/images so
img.{apex} serves them directly: image_BowlingAlley.png and
image_PaintballKeyArt.png (both real PNGs).
This commit is contained in:
Alexa
2026-05-31 15:47:12 +03:00
parent fad8d81961
commit 18989fa6ec
4 changed files with 19 additions and 8 deletions
+17 -6
View File
@@ -59,12 +59,23 @@ export interface SiteStats {
inventionCount: number;
}
// CDN URL helper for profile images. Mirrors the admin SPA's helper
// so the apex visit ends up calling img.localhost (signed via the
// hardcoded p1 key id baked into the patched client). On rec.net
// fallbacks to img.rec.net so the site works on either apex.
// Resolve the image-CDN apex for the current host. The site is served
// from the DorkNet apex (or www.apex) and the server exposes its
// image-transform pipeline at img.{apex}, signed with the hardcoded p1
// key id baked into the patched client. Derive the apex from the live
// host so images load from THIS server's own CDN instead of leaking to
// real Rec Room (img.rec.net) — which also drops the Azure affinity
// cookies the browser was rejecting. Localhost dev → img.localhost.
export function imageApex(): string {
if (typeof window === 'undefined') return 'localhost';
const host = window.location.host.split(':')[0];
if (host === 'localhost' || host.endsWith('.localhost')) return 'localhost';
return host.startsWith('www.') ? host.slice(4) : host;
}
// CDN URL helper for profile images, served from the server's own
// img.{apex} (see imageApex).
export function profileImageUrl(name: string | null | undefined, width = 96): string | null {
if (!name) return null;
const apex = typeof window !== 'undefined' && window.location.host.endsWith('localhost') ? 'localhost' : 'rec.net';
return `https://img.${apex}/${encodeURIComponent(name)}?width=${width}&cropSquare=1&sig=p1`;
return `https://img.${imageApex()}/${encodeURIComponent(name)}?width=${width}&cropSquare=1&sig=p1`;
}
+2 -2
View File
@@ -1,6 +1,7 @@
import { useEffect, useMemo, useState } from 'react';
import { get } from '../lib/api';
import type { SiteRoom } from '../lib/types';
import { imageApex } from '../lib/types';
import { Empty } from '../components/Empty';
import { num } from '../lib/format';
@@ -55,8 +56,7 @@ export function Rooms() {
}
function RoomCard({ room }: { room: SiteRoom }) {
const apex = typeof window !== 'undefined' && window.location.host.endsWith('localhost') ? 'localhost' : 'rec.net';
const img = room.imageName ? `https://img.${apex}/${encodeURIComponent(room.imageName)}?width=320&sig=p1` : null;
const img = room.imageName ? `https://img.${imageApex()}/${encodeURIComponent(room.imageName)}?width=320&sig=p1` : null;
return (
<div className="card overflow-hidden">
<div className="aspect-[16/9] bg-ink-800 flex items-center justify-center">