From b6b0b6c29e051f0a9c8e92316442dd1ed207c9e3 Mon Sep 17 00:00:00 2001 From: enricobuehler Date: Sun, 21 Jun 2026 12:25:22 +0000 Subject: [PATCH] fix(docs): load Scalar's stylesheet so the API reference isn't unstyled @scalar/api-reference-react@0.9.47's entry imports createApiReference but does NOT import its own style.css (nor inject it at runtime), so /api rendered with no Scalar CSS at all. Import the sheet as a route-scoped (?url + head.links, same pattern as the root app.css) so it loads for SSR + the client-side Vue mount. The brand customCss still themes on top. Co-Authored-By: Claude Opus 4.8 (1M context) --- docs-site/src/routes/api/index.tsx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/docs-site/src/routes/api/index.tsx b/docs-site/src/routes/api/index.tsx index 9492d46..2c4eeb7 100644 --- a/docs-site/src/routes/api/index.tsx +++ b/docs-site/src/routes/api/index.tsx @@ -1,5 +1,10 @@ import { createFileRoute, Link } from '@tanstack/react-router' import { ApiReferenceReact } from '@scalar/api-reference-react' +// @scalar/api-reference-react@0.9.47's entry does NOT import its own stylesheet +// (and doesn't inject it at runtime), so we must ship it ourselves or the +// reference renders unstyled. Load it as a route-scoped (same pattern as +// the root app.css), so it's present for SSR + the client-side Vue mount. +import scalarCss from '@scalar/api-reference-react/style.css?url' import BrandMark from '@/components/BrandMark' import Wordmark from '@/components/Wordmark' @@ -14,6 +19,7 @@ export const Route = createFileRoute('/api/')({ 'Interactive reference for the punktfunk host management REST API (OpenAPI).', }, ], + links: [{ rel: 'stylesheet', href: scalarCss }], }), })