fix(hub): build with rivet gives 404s

frontend/apps/hub/src/components/get-started.tsx

@@ -13,17 +13,12 @@ import {
 import {
 	Icon,
 	faActors,
-	faArrowPointer,
 	faArrowProgress,
 	faChevronDoubleDown,
 	faChevronRight,
 	faCircleNodes,
-	faCode,
 	faDiagramNext,
-	faGamepadAlt,
-	faSparkles,
 	faUpRightAndDownLeftFromCenter,
-	faWifiSlash,
 } from "@rivet-gg/icons";
 import { motion, useMotionValueEvent, useScroll } from "framer-motion";
 import { type ComponentProps, useState } from "react";
@@ -102,7 +97,7 @@ export function GetStarted() {
 					</div>
 				</CardContent>
 			</Card>
-			<Card
+			{/* <Card
 				id="examples"
 				asChild
 				className="max-w-xl w-full mx-auto my-6"
@@ -156,7 +151,7 @@ export function GetStarted() {
 						</motion.div>
 					</CardContent>
 				</motion.div>
-			</Card>
+			</Card> */}
 			<Card asChild className="max-w-xl w-full mx-auto my-6">
 				<motion.div>
 					<CardHeader>
@@ -175,31 +170,31 @@ export function GetStarted() {
 							className="grid md:grid-cols-2 gap-4"
 						>
 							<ExampleLink
-								href="examples"
+								href="docs"
 								title="What are Actors?"
 								size="md"
 								icon={faActors}
 							/>
 							<ExampleLink
-								href="examples"
+								href="docs/rpc"
 								title="RPC"
 								size="md"
 								icon={faArrowProgress}
 							/>
 							<ExampleLink
-								href="examples"
+								href="docs/state"
 								size="md"
 								title="State"
 								icon={faDiagramNext}
 							/>
 							<ExampleLink
-								href="https://rivet.gg/examples"
+								href="docs/scaling"
 								title="Scaling & Concurrency"
 								size="md"
 								icon={faUpRightAndDownLeftFromCenter}
 							/>
 							<ExampleLink
-								href="https://rivet.gg/examples"
+								href="docs/edge"
 								size="md"
 								title="Edge Networking"
 								icon={faCircleNodes}
@@ -215,7 +210,7 @@ export function GetStarted() {
 							>
 								<motion.a
 									variants={linkVariants}
-									href="https://rivet.gg/examples"
+									href="https://rivet.gg/docs?utm_source=hub"
 									target="_blank"
 									rel="noreferrer"
 								>

frontend/packages/components/src/code.tsx

@@ -2,7 +2,7 @@ import { javascript } from "@codemirror/lang-javascript";
 import { json, jsonParseLinter } from "@codemirror/lang-json";
 import { linter } from "@codemirror/lint";
 import { EditorView } from "@codemirror/view";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@radix-ui/react-tabs";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "./ui/tabs";
 import { Icon, faCopy, faFile } from "@rivet-gg/icons";
 import { githubDark } from "@uiw/codemirror-theme-github";
 import ReactCodeMirror, {

frontend/packages/components/src/docs-sheet.tsx

@@ -25,7 +25,7 @@ export function DocsSheet({ path, title, children }: DocsSheetProps) {
 					<SheetTitle>{title}</SheetTitle>
 					<Text className="text-xs">
 						<Link
-							href={`https://rivet.gg/${path}?utm_source=hub`}
+							href={`https://rivet.gg/${path}?utm_source=hub&embed=true`}
 							target="_blank"
 							rel="noopener noreferrer"
 						>

site/src/app/(v2)/[section]/[[...page]]/page.tsx

@@ -86,7 +86,7 @@ export default async function CatchAllCorePage({ params: { section, page } }) {
 					<DocsNavigation sidebar={foundTab.tab.sidebar} />
 				) : null}
 			</aside>
-			<main className="mx-auto mt-8 w-full max-w-prose px-8 pb-8">
+			<main className="md:mx-auto mt-8 w-full max-w-prose px-8 pb-8">
 				<Prose as="article">
 					{parentPage && (
 						<div className="eyebrow h-5 text-primary text-sm font-semibold">

site/src/app/(v2)/layout.tsx

@@ -1,10 +1,12 @@
+import { EmbedDetector } from "@/components/EmbedDetector";
 import { Footer } from "@/components/Footer";
 import "@/styles/v2.css";
 
 export default function Layout({ children }) {
 	return (
 		<>
 			{children}
+			<EmbedDetector />
 			<Footer />
 		</>
 	);

site/src/components/DocsTableOfContents.tsx

@@ -199,7 +199,7 @@ export function DocsTableOfContents({
 			ref={ref}
 			className={cn(
 				className,
-				"lg:top-header pt-10 md:pt-36 lg:pt-6",
+				"lg:top-header pt-10 lg:pt-6",
 				"w-full lg:pointer-events-auto lg:sticky lg:block lg:max-w-aside lg:self-start lg:overflow-y-auto",
 			)}
 		>

site/src/components/EmbedDetector.tsx

@@ -8,7 +8,6 @@ export function EmbedDetector() {
 	useEffect(() => {
 		if (queryParams?.get("embed") === "true") {
 			document.querySelector("body > header")?.classList.add("hidden");
-			document.querySelector("body > div")?.classList.add("hidden");
 		}
 	}, [queryParams]);
 

site/src/components/v2/Header.tsx

@@ -27,7 +27,7 @@ export function Header({ active, subnav }: HeaderProps) {
 	const [ref, setRef] = useState<Element | null>(null);
 	return (
 		<RivetHeader
-			className="px-8 md:[&>div:first-child]:max-w-[calc(20rem+65ch+20rem)] md:[&>div:first-child]:px-0"
+			className="lg:px-8 md:[&>div:first-child]:max-w-[calc(20rem+65ch+20rem)] md:[&>div:first-child]:px-0"
 			logo={
 				<Link href="/">
 					<Image {...logoUrl} className="w-20" alt="Rivet logo" />