docs: build the docs site under a path when forge deploys it

cat committed Oct 1768515cf

forge site deploy sets FORGE_SITE_URL and FORGE_SITE_BASE; without them the docs still build for the root of docs.diagram.zip. Rendered examples resolve their source JSON against the base URL, so they load under a path too. .forge/sites declares the site so it deploys to https://pages.src.rest/sites/cat/diagramzip/docs/.

commit: 68515cf99182d2fc4733e14cc67a8774bcbc95d0
parent: 45d39ea0bbfd5b493e2dc3f843b359e010f546bf
author: cat <admin@dev.site>

3 files changed, +15 -4wrap lines

A	.forge/sites	2	++
M	apps/docs/docusaurus.config.js	9	+++++++--
M	apps/docs/src/components/DiagramExample/index.js	8	++++++--

A .forge/sites +2 -0

@@ -0,0 +1,2 @@

1+# name output build command 2+docs apps/docs/build npm ci --no-audit --no-fund && cd apps/docs && npm ci --no-audit --no-fund && npm run build

M apps/docs/docusaurus.config.js +7 -2

@@ -1,12 +1,17 @@
11 import { themes as prismThemes } from 'prism-react-renderer'22 3+// The docs are served at the root of docs.diagram.zip. `forge site deploy`4+// serves them under a path instead and says where with FORGE_SITE_URL and5+// FORGE_SITE_BASE.6+const forgeSite = process.env.FORGE_SITE_URL ? new URL(process.env.FORGE_SITE_URL) : null7+38 /** @type {import('@docusaurus/types').Config} */49 const config = {510   title: 'diagram.zip documentation',611   tagline: 'Create, style, save, and share text diagrams.',712   favicon: 'img/icon.svg',8-  url: 'https://docs.diagram.zip',9-  baseUrl: '/',13+  url: forgeSite?.origin || 'https://docs.diagram.zip',14+  baseUrl: process.env.FORGE_SITE_BASE || '/',1015   trailingSlash: true,1116   onBrokenLinks: 'throw',1217   markdown: {

M apps/docs/src/components/DiagramExample/index.js +6 -2

@@ -1,4 +1,5 @@
11 import React, {useCallback, useEffect, useRef, useState} from 'react';2+import useBaseUrl from '@docusaurus/useBaseUrl';23 import {materializeSvg, supportedAppearances} from '../../../../../shared/svg/index.js';34 import {canonicalizeHttpRendererSvg} from './httpSvg.mjs';45 import {fitView, zoomView} from './viewMath.mjs';@@ -32,6 +33,9 @@ async function responseError(response) {
3233 }3334 3435 export default function DiagramExample({engine, label, sourceUrl}) {36+  // sourceUrl is site-absolute (/examples/<type>.json); resolve it against37+  // the site's base URL so the docs also work when served under a path.38+  const exampleUrl = useBaseUrl(sourceUrl);3539   const viewportRef = useRef(null);3640   const imageRef = useRef(null);3741   const dragRef = useRef(null);@@ -67,7 +71,7 @@ export default function DiagramExample({engine, label, sourceUrl}) {
6771     async function render() {6872       setStatus('Loading the example…');6973       try {70-        const exampleResponse = await fetch(sourceUrl, {signal: abortController.signal});74+        const exampleResponse = await fetch(exampleUrl, {signal: abortController.signal});7175         if (!exampleResponse.ok) throw new Error('The example source is not available.');7276         const example = await exampleResponse.json();7377         let source;@@ -108,7 +112,7 @@ export default function DiagramExample({engine, label, sourceUrl}) {
108112       if (objectUrlRef.current) URL.revokeObjectURL(objectUrlRef.current);109113       objectUrlRef.current = null;110114     };111-  }, [engine, sourceUrl]);115+  }, [engine, exampleUrl]);112116 113117   useEffect(() => {114118     const viewport = viewportRef.current;