feat(guide): port legacy guide (#10938)

* feat: initial attempt at porting legacy guide * feat: completion of legacy guide backport * chore: lockfile shenanigans * fix: handle svgs * fix: replace svg with mermaid integration * chore: format * chore: remove unnecssary bullet * chore: cleanup code highlights * chore: explicit return * chore: move display components after interactive components in sidebar * chore: voice * top link should be installation * add docs link to sidebar * feat: subguide-based accent styles * chore: don't list faq twice * chore: mention display components in interactive components * fix: remove unoccs/order rule from guide * chore: redirect to legacy guide instead of /guide root * refactor: use `<kbd>` * refactor: more kbd use * Update apps/guide/content/docs/legacy/app-creation/handling-events.mdx Co-authored-by: Naiyar <137700126+imnaiyar@users.noreply.github.com> * chore: fix typos Co-authored-by: Qjuh <76154676+Qjuh@users.noreply.github.com> * chore: fix typos * chore: fix links regarding secret stores across coding platforms * chore: fix typo * chore: link node method directly Co-authored-by: Qjuh <76154676+Qjuh@users.noreply.github.com> * chore: typos Co-authored-by: Vlad Frangu <me@vladfrangu.dev> * chore: typo Co-authored-by: Vlad Frangu <me@vladfrangu.dev> * fix: prevent v14 changes from being listed twice * chore: prefer relative links * chore: missed link conversion * chore: missed link conversion * chore: fix link * chore: remove legacy code highlight markers * chore: rephrase and extend contributing guidelines * feat(setup): suggest cli flag over dotenv package * chore: move introduction in sidebar better navigation experience if the 'next page' in intro refers to getting started vs. updating/faq * fix: replace outdated link * fix: update voice dependencies * chore: update node install instructions * fix: list in missing access callout * chore: match bun env file format * chore: restore ffmpeg disclaimer * fix: lockfile conflict * chore: action row typo Co-authored-by: Vlad Frangu <me@vladfrangu.dev> * chore: no longer use at-next for pino --------- Co-authored-by: Jiralite <33201955+Jiralite@users.noreply.github.com> Co-authored-by: Qjuh <76154676+Qjuh@users.noreply.github.com> Co-authored-by: Naiyar <137700126+imnaiyar@users.noreply.github.com> Co-authored-by: Vlad Frangu <me@vladfrangu.dev>
2026-03-18 20:43:30 +01:00 · 2025-07-08 15:01:50 +02:00
parent ee3ca6f7c6
commit bc6005f446
136 changed files with 11847 additions and 48 deletions
--- a/apps/guide/src/components/mdx/mermaid.tsx
+++ b/apps/guide/src/components/mdx/mermaid.tsx
@@ -0,0 +1,45 @@
+'use client';
+
+import { useTheme } from 'next-themes';
+import { useEffect, useId, useRef, useState } from 'react';
+
+export function Mermaid({ chart }: { readonly chart: string }) {
+	const id = useId();
+	const [svg, setSvg] = useState('');
+	const containerRef = useRef<HTMLDivElement>(null);
+	const currentChartRef = useRef<string>(null);
+	const { resolvedTheme } = useTheme();
+
+	useEffect(() => {
+		if (currentChartRef.current === chart || !containerRef.current) return;
+		const container = containerRef.current;
+		currentChartRef.current = chart;
+
+		async function renderChart() {
+			const { default: mermaid } = await import('mermaid');
+
+			try {
+				// configure mermaid
+				mermaid.initialize({
+					startOnLoad: false,
+					securityLevel: 'loose',
+					fontFamily: 'inherit',
+					themeCSS: 'margin: 1.5rem auto 0;',
+					theme: resolvedTheme === 'dark' ? 'dark' : 'default',
+				});
+
+				const { svg, bindFunctions } = await mermaid.render(id, chart.replaceAll('\\n', '\n'));
+
+				bindFunctions?.(container);
+				setSvg(svg);
+			} catch (error) {
+				console.error('Error while rendering mermaid', error);
+			}
+		}
+
+		void renderChart();
+	}, [chart, id, resolvedTheme]);
+
+	// eslint-disable-next-line react/no-danger
+	return <div dangerouslySetInnerHTML={{ __html: svg }} ref={containerRef} />;
+}