Fix: migrate Imgur images to BlitzKit hosting

packages/website/src/components/ArticlePlug.astro

@@ -1,38 +0,0 @@
----
-import { tankIcon } from "@blitzkit/core";
-import { Flex, Heading, Link, Strong, Text } from "@radix-ui/themes";
----
-
-<Flex justify="center" px="4">
-  <Link
-    color="gray"
-    highContrast
-    style={{ display: "content" }}
-    href="/docs/guides/christmas-2025"
-    underline="none"
-  >
-    <Flex
-      mt="3"
-      px="5"
-      py="4"
-      style={{
-        borderRadius: "var(--radius-3)",
-        backgroundImage: "url(https://i.imgur.com/LRYmSkg.png)",
-        backgroundSize: "cover",
-        backgroundPosition: "center",
-        boxSizing: "border-box",
-      }}
-      align="center"
-      gap="5"
-    >
-      <img src={tankIcon(25169)} style={{ height: "min(15vw, 5rem)" }} />
-
-      <Flex direction="column">
-        <Heading size={{ initial: "4", sm: "6" }}>Christmas 2025</Heading>
-        <Text size={{ initial: "2", sm: "3" }}>
-          Win the <Strong>GSOR the TANK</Strong> and more!
-        </Text>
-      </Flex>
-    </Flex>
-  </Link>
-</Flex>

packages/website/src/components/Giveaway.tsx

@@ -1,89 +0,0 @@
-import { Code, Flex, Heading, Link, Text } from "@radix-ui/themes";
-import { useEffect, useState, type ReactNode } from "react";
-import type { MaybeSkeletonComponentProps } from "../types/maybeSkeletonComponentProps";
-import { InlineSkeleton } from "./InlineSkeleton";
-
-const TIME = 1764898200 * 1000;
-
-export function Giveaway({ skeleton }: MaybeSkeletonComponentProps) {
-  const [timeLeft, setTimeLeft] = useState<number>(TIME - Date.now());
-
-  useEffect(() => {
-    const interval = setInterval(() => {
-      setTimeLeft(TIME - Date.now());
-    }, 1000);
-
-    return () => {
-      clearInterval(interval);
-    };
-  }, []);
-
-  let string: ReactNode;
-
-  if (timeLeft > 0) {
-    const hours = Math.floor(timeLeft / (1000 * 60 * 60));
-    const minutes = Math.floor((timeLeft / (1000 * 60)) % 60)
-      .toString()
-      .padStart(2, "0");
-    const seconds = Math.floor((timeLeft / 1000) % 60)
-      .toString()
-      .padStart(2, "0");
-
-    string = (
-      <>
-        in{" "}
-        <Code highContrast>
-          {hours}h {minutes}m {seconds}s
-        </Code>
-      </>
-    );
-  } else {
-    string = "has ended. Come again later!";
-  }
-
-  return (
-    <Flex justify="center" px="4">
-      <Link
-        color="gray"
-        highContrast
-        style={{ display: "content" }}
-        href="https://discord.gg/njQdBhNS?event=1446208951136813117"
-        underline="none"
-      >
-        <Flex
-          mt="3"
-          px="5"
-          py="4"
-          style={{
-            borderRadius: "var(--radius-3)",
-            backgroundImage: "url(https://i.imgur.com/LRYmSkg.png)",
-            backgroundSize: "cover",
-            backgroundPosition: "center",
-            boxSizing: "border-box",
-            boxShadow: "0 0 var(--space-7) var(--blue-a5)",
-          }}
-          align="center"
-          gap="5"
-        >
-          <img
-            src="https://i.imgur.com/mvmJQgB.png"
-            style={{
-              height: "min(15vw, 5rem)",
-              filter: "drop-shadow(0.5rem 0.5rem 1rem #00000080)",
-            }}
-          />
-
-          <Flex direction="column">
-            <Heading size={{ initial: "4", sm: "6" }}>
-              Music Box giveaway {!skeleton && string}{" "}
-              {skeleton && <InlineSkeleton width="10rem" />}
-            </Heading>
-            <Text size={{ initial: "2", sm: "3" }}>
-              Join the BlitzKit Discord server event
-            </Text>
-          </Flex>
-        </Flex>
-      </Link>
-    </Flex>
-  );
-}

packages/website/src/components/Markdown.tsx

@@ -1,13 +1,20 @@
 import { Link, Table } from '@radix-ui/themes';
 import MarkdownToJSX from 'markdown-to-jsx';
 import type { ComponentProps } from 'react';
+import { docImageUrl, isExternalImage } from '../core/blitzkit/docImages';
 
 interface MarkdownProps {
   children: string;
 }
 
-function Image(props: ComponentProps<'img'>) {
-  return <img style={{ maxWidth: '100%' }} {...props} />;
+function Image({ src, ...props }: ComponentProps<'img'>) {
+  return (
+    <img
+      style={{ maxWidth: '100%' }}
+      src={src && isExternalImage(src) ? docImageUrl(src) : src}
+      {...props}
+    />
+  );
 }
 
 export function Markdown({ children }: MarkdownProps) {

packages/website/src/components/StupidCat.tsx

@@ -1,3 +0,0 @@
-export function StupidCat() {
-  return <img src="https://i.imgur.com/6FBBzb9.png" />;
-}

packages/website/src/core/blitzkit/docImages.ts

@@ -0,0 +1,32 @@
+import { alias } from "@blitzkit/core";
+
+const EXTERNAL_IMAGE = /^https?:\/\//;
+const MARKDOWN_IMAGES = [
+  /!\[[^\]]*\]\((\S+?)(?:\s+"[^"]*")?\)/g,
+  /<img[^>]*\ssrc=["']([^"']+)["']/g,
+];
+
+export function isExternalImage(src: string) {
+  return EXTERNAL_IMAGE.test(src);
+}
+
+export function docImageId(url: string) {
+  let hash = 0x811c9dc5;
+
+  for (let index = 0; index < url.length; index++) {
+    hash ^= url.charCodeAt(index);
+    hash = Math.imul(hash, 0x01000193) >>> 0;
+  }
+
+  return hash.toString(16).padStart(8, "0");
+}
+
+export function docImageUrl(url: string) {
+  return alias("api", `/docs/images/${docImageId(url)}.webp`);
+}
+
+export function externalDocImages(markdown: string) {
+  return MARKDOWN_IMAGES.flatMap((pattern) =>
+    Array.from(markdown.matchAll(pattern), (match) => match[1]),
+  ).filter(isExternalImage);
+}

packages/website/src/pages/[...chunk_api]/docs/images/[id].webp.ts

@@ -0,0 +1,39 @@
+import type { APIContext, GetStaticPathsItem } from "astro";
+import sharp from "sharp";
+import {
+  docImageId,
+  externalDocImages,
+} from "../../../../core/blitzkit/docImages";
+import { mixStaticPaths } from "../../../../core/blitzkit/mixStaticPaths";
+import { getStaticPaths as _getStaticPaths } from "../../_index";
+
+export const getStaticPaths = mixStaticPaths(_getStaticPaths, async () => {
+  const documents = import.meta.glob<string>(
+    "../../../../../../../docs/**/*.md",
+    { eager: true, query: "?raw", import: "default" },
+  );
+  const urls = new Set(Object.values(documents).flatMap(externalDocImages));
+
+  return Array.from(
+    urls,
+    (url) =>
+      ({
+        params: { id: docImageId(url) },
+        props: { url },
+      }) satisfies GetStaticPathsItem,
+  );
+});
+
+export async function GET({ props }: APIContext<{ url: string }>) {
+  const response = await fetch(props.url);
+
+  if (!response.ok) {
+    throw new Error(`Failed to fetch ${props.url}: ${response.status}`);
+  }
+
+  const image = await sharp(Buffer.from(await response.arrayBuffer()))
+    .webp()
+    .toBuffer();
+
+  return new Response(new Uint8Array(image));
+}