Deploy website-next

.github/workflows/publish-website-next.yml

@@ -13,7 +13,7 @@ permissions:
   contents: read
 
 jobs:
-  build:
+  build-and-deploy:
     runs-on: ubuntu-latest
 
     steps:
@@ -66,12 +66,27 @@ jobs:
       - name: Set up Docker Buildx
         uses: docker/setup-buildx-action@e468171a9de216ec08956ac3ada2f0791b6bd435 # v3
 
+      - name: Docker Login
+        uses: docker/login-action@4907a6ddec9925e35a0a9e82d7399ccc52663121 # v4
+        with:
+          registry: ${{ secrets.CONTAINER_REG_URL }}
+          username: ${{ secrets.CONTAINER_REG_USERNAME }}
+          password: ${{ secrets.CONTAINER_REG_PASSWORD }}
+
       - name: Build Website Container
         uses: docker/build-push-action@bcafcacb16a39f128d818304e6c9c0c18556b85f # v7
         with:
           context: ./website-next
           file: ./website-next/Dockerfile
-          push: false
-          tags: ccc-website-next-${{ github.ref_name }}:${{ github.run_id }}
+          push: true
+          tags: ${{ secrets.CONTAINER_REG_DOMAIN }}/ccc-website-next-${{ github.ref_name }}:${{ github.run_id }}
           cache-from: type=gha,scope=website-next
           cache-to: type=gha,scope=website-next,mode=max
+
+      - name: Deploy to Azure WebApp
+        uses: azure/webapps-deploy@02a81bead70021f5284939794bcec79c271ab383 # v3
+        with:
+          app-name: ccc-p-us1-website
+          slot-name: next
+          publish-profile: ${{ secrets.AZURE_PUBLISH_PROFILE_NEXT }}
+          images: ${{ secrets.CONTAINER_REG_DOMAIN }}/ccc-website-next-${{ github.ref_name }}:${{ github.run_id }}

website-next/.yarnrc.yml

@@ -1,11 +1,12 @@
+enableHardenedMode: true
+
+enableScripts: false
+
 nodeLinker: node-modules
 
 # 7 days (in minutes)
 npmMinimalAgeGate: 10080
 
-enableScripts: false
-enableHardenedMode: true
-
 supportedArchitectures:
   cpu:
     - current
@@ -17,4 +18,4 @@ supportedArchitectures:
     - darwin
     - win32
 
-yarnPath: .yarn/releases/yarn-4.14.1.cjs
+yarnPath: .yarn/releases/yarn-4.15.0.cjs

website-next/content/docs/hotchocolate/index.md

@@ -127,13 +127,6 @@ A rule renders as the `Divider` component.
 
 ---
 
-# Images
-
-Standard markdown images render through the `Image` component, which adds
-a soft ring and rounded corners.
-
-![A small placeholder swatch](https://placehold.co/600x200/ecfdf5/047857?text=Docs+Image)
-
 # Tabs
 
 The generic `Tabs` / `Tab` combo is the lowest-level building block. Other
@@ -292,6 +285,13 @@ A shortcut that renders the install instructions for a NuGet package using
 
 <PackageInstallation packageName="HotChocolate.AspNetCore" />
 
+# Images
+
+Standard markdown images render through the `Image` component, which adds
+a soft ring and rounded corners.
+
+![An image](../../../public/images/analytics/banner.png)
+
 # Video
 
 A plain markdown link to a YouTube video.

website-next/package.json

@@ -45,7 +45,7 @@
     "typescript": "^5",
     "vite": "^6"
   },
-  "packageManager": "yarn@4.14.1",
+  "packageManager": "yarn@4.15.0",
   "browserslist": [
     "chrome >= 110",
     "firefox >= 110",

website-next/src/design-system/BrokenMedia.tsx

@@ -12,7 +12,10 @@ type BrokenMediaProps = {
  */
 export function BrokenMedia({ message }: BrokenMediaProps) {
   return (
-    <div className="my-6 flex aspect-video w-full flex-col items-center justify-center gap-3 rounded-md bg-cc-card-bg text-cc-ink-dim ring-1 ring-cc-card-border">
+    // Rendered as <span>s (not <div>/<p>) so it stays valid phrasing content:
+    // markdown wraps a standalone image in a <p>, and a block-level fallback
+    // there would be invalid HTML and trigger a hydration error.
+    <span className="my-6 flex aspect-video w-full flex-col items-center justify-center gap-3 rounded-md bg-cc-card-bg text-cc-ink-dim ring-1 ring-cc-card-border">
       <svg
         viewBox="0 0 24 24"
         fill="none"
@@ -30,7 +33,7 @@ export function BrokenMedia({ message }: BrokenMediaProps) {
         <line x1="16" y1="19" x2="16" y2="22" />
         <line x1="19" y1="16" x2="22" y2="16" />
       </svg>
-      <p className="text-sm font-medium">{message}</p>
-    </div>
+      <span className="text-sm font-medium">{message}</span>
+    </span>
   );
 }

website-next/src/helpers/compileDoc.ts

@@ -35,13 +35,20 @@ export async function compileDoc<T extends Frontmatter = Frontmatter>(
     captured.toc = data.toc ?? [];
   };
 
+  // compileMDX builds the VFile from a raw string, so it has no path. Inject
+  // the real source path up front so link-rewriting plugins can resolve
+  // relative references (./foo.md, ../../../public/img.png) against it.
+  const setSourcePath = () => (_tree: unknown, file: VFile) => {
+    file.path = absPath;
+  };
+
   const { content, frontmatter } = await compileMDX<T>({
     source,
     options: {
       parseFrontmatter: true,
       blockJS: false,
       mdxOptions: {
-        remarkPlugins: [...remarkPlugins, captureToc],
+        remarkPlugins: [setSourcePath, ...remarkPlugins, captureToc],
         rehypePlugins: [...rehypePlugins],
       },
     },

website-next/src/remark/rewriteMdLinks.mjs

@@ -17,8 +17,12 @@ export default function remarkRewriteMdLinks() {
     const cwd = file.cwd ?? process.cwd();
     const appDir = path.join(cwd, "app");
 
+    const publicDir = path.join(cwd, "public");
+
     walk(tree, (node) => {
-      if (node.type !== "link" || typeof node.url !== "string") {
+      const isLink = node.type === "link";
+      const isImage = node.type === "image";
+      if ((!isLink && !isImage) || typeof node.url !== "string") {
         return;
       }
 
@@ -27,6 +31,30 @@ export default function remarkRewriteMdLinks() {
         return;
       }
 
+      // Relative reference that resolves into public/ — rewrite to a rooted
+      // URL (e.g. "../../../public/image.png" -> "/image.png"). Applies to both
+      // links and image sources.
+      if (!node.url.startsWith("/")) {
+        const publicUrl = rewritePublicAsset(
+          node.url,
+          sourceDir,
+          publicDir,
+          cwd,
+          file,
+          node
+        );
+        if (publicUrl !== null) {
+          node.url = publicUrl;
+          return;
+        }
+      }
+
+      // Root-absolute asset sources (e.g. an image at "/image.png") are already
+      // rooted; only links get route-existence validation below.
+      if (node.url.startsWith("/") && !isLink) {
+        return;
+      }
+
       // Root-absolute: check content roots for /docs and /blogs, otherwise
       // verify a matching literal/dynamic route exists in app/.
       if (node.url.startsWith("/")) {
@@ -127,6 +155,41 @@ export default function remarkRewriteMdLinks() {
   };
 }
 
+/**
+ * Resolve a relative URL against the source file and, if it lands inside
+ * public/, return its rooted URL (path relative to public/, with a leading
+ * "/"). Returns null when the target is outside public/ so the caller can fall
+ * through to other handling. Fails the build for a public/ path that doesn't
+ * exist on disk.
+ */
+function rewritePublicAsset(url, sourceDir, publicDir, cwd, file, node) {
+  const m = /^([^#?]+)([#?].*)?$/.exec(url);
+  if (!m) {
+    return null;
+  }
+
+  const [, filePart, suffix = ""] = m;
+  const absResolved = path.resolve(sourceDir, filePart);
+  const relToPublic = path.relative(publicDir, absResolved);
+
+  // Outside public/ (escapes upward or onto another drive) — not our concern.
+  if (relToPublic.startsWith("..") || path.isAbsolute(relToPublic)) {
+    return null;
+  }
+
+  if (!fs.existsSync(absResolved)) {
+    file.fail(
+      `Broken asset link "${url}" — file not found at ${path.relative(cwd, absResolved)}`,
+      node,
+      RULE_ID
+    );
+    return null;
+  }
+
+  const urlPath = relToPublic.split(path.sep).join("/");
+  return `/${urlPath}${suffix}`;
+}
+
 /** Convert a path relative to cwd (without extension) under blogs/ into the
  *  canonical /blogs/YYYY/MM/DD/slug URL, or null if it doesn't match. */
 function blogUrlFromCleanRel(cleanRel) {

website-next/yarn.lock

@@ -2,7 +2,7 @@
 # Manual changes might be lost - proceed with caution!
 
 __metadata:
-  version: 9
+  version: 10
   cacheKey: 10c0
 
 "@adobe/css-tools@npm:^4.4.0":