mirror of
https://github.com/NousResearch/hermes-agent.git
synced 2026-05-10 03:22:05 +00:00
a5c9c83b78
The Documentation tab embeds the public Hermes Agent docs site via an <iframe>. On any system where the browser's prefers-color-scheme resolves to dark — the default on macOS with system dark mode, and common on Linux/Windows too — the docs body text rendered nearly invisible against its own background. Cause: Docusaurus intentionally leaves <html> and <body> transparent and relies on the browser's Canvas color to fill the viewport. Inside our iframe, the iframe element had bg-background (the dashboard's dark canvas) AND inherited the dashboard's dark color-scheme, so the browser set the iframe's Canvas to a dark value. Docusaurus's transparent body exposed that dark Canvas, and the docs body text (tuned for a light Canvas) became near-illegible. Affects every built-in dashboard theme. Fix: replace bg-background on the iframe with [color-scheme:light] (spec-blessed cross-origin override of the inherited color-scheme; forces the iframe's Canvas to light) and bg-white (belt-and-suspenders fallback during the brief paint window before content loads). The docs site's own theme toggle keeps working — Docusaurus stores its choice in localStorage and applies opaque dark backgrounds to its layout elements that cover the white Canvas we forced.
69 lines
2.3 KiB
TypeScript
69 lines
2.3 KiB
TypeScript
import { useLayoutEffect } from "react";
|
|
import { ExternalLink } from "lucide-react";
|
|
import { useI18n } from "@/i18n";
|
|
import { usePageHeader } from "@/contexts/usePageHeader";
|
|
import { cn } from "@/lib/utils";
|
|
import { PluginSlot } from "@/plugins";
|
|
|
|
export const HERMES_DOCS_URL = "https://hermes-agent.nousresearch.com/docs/";
|
|
|
|
const DS_BUTTON_OUTLINED_LINK_CN = cn(
|
|
"group relative inline-grid grid-cols-[auto_1fr_auto] items-center",
|
|
"px-[.9em_.75em] py-[1.25em] gap-2",
|
|
"leading-0 font-bold tracking-[0.2em] uppercase",
|
|
"text-midground bg-transparent shadow-midground",
|
|
"shadow-[inset_-1px_-1px_0_0_#00000080,inset_1px_1px_0_0_#ffffff80]",
|
|
);
|
|
|
|
export default function DocsPage() {
|
|
const { t } = useI18n();
|
|
const { setEnd } = usePageHeader();
|
|
|
|
useLayoutEffect(() => {
|
|
setEnd(
|
|
<a
|
|
href={HERMES_DOCS_URL}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className={DS_BUTTON_OUTLINED_LINK_CN}
|
|
>
|
|
<ExternalLink className="size-3.5" />
|
|
{t.app.openDocumentation}
|
|
</a>,
|
|
);
|
|
return () => {
|
|
setEnd(null);
|
|
};
|
|
}, [setEnd, t]);
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"flex min-h-0 w-full min-w-0 flex-1 flex-col",
|
|
"pt-1 sm:pt-2",
|
|
)}
|
|
>
|
|
<PluginSlot name="docs:top" />
|
|
<iframe
|
|
title={t.app.nav.documentation}
|
|
src={HERMES_DOCS_URL}
|
|
className={cn(
|
|
"min-h-0 w-full min-w-0 flex-1",
|
|
"rounded-sm border border-current/20",
|
|
// Docusaurus paints over a transparent <html> / <body> and
|
|
// relies on the browser's canvas color (light by default) to
|
|
// fill the viewport. Inheriting the dashboard's dark color
|
|
// scheme makes that canvas dark, so the docs body text — which
|
|
// is tuned for a light canvas — becomes near-invisible. Force a
|
|
// light color scheme + white background on the iframe element so
|
|
// the docs render cleanly regardless of the active dashboard
|
|
// theme or the user's prefers-color-scheme.
|
|
"[color-scheme:light] bg-white",
|
|
)}
|
|
sandbox="allow-scripts allow-same-origin allow-popups allow-forms"
|
|
referrerPolicy="no-referrer-when-downgrade"
|
|
/>
|
|
<PluginSlot name="docs:bottom" />
|
|
</div>
|
|
);
|
|
}
|