From 3bea18b0daca35d54c5180fe3124a5e22df16b46 Mon Sep 17 00:00:00 2001
From: Kacper Wojciechowski <39823706+jog1t@users.noreply.github.com>
Date: Thu, 16 Jan 2025 23:48:56 +0100
Subject: [PATCH] fix(hub): build with rivet gives 404s

---
 frontend/apps/hub/src/components/get-started.tsx | 16 ++++++++--------
 frontend/packages/components/src/code.tsx        |  2 +-
 frontend/packages/components/src/docs-sheet.tsx  |  2 +-
 site/src/app/(v2)/[section]/[[...page]]/page.tsx |  2 +-
 site/src/app/(v2)/layout.tsx                     |  2 ++
 site/src/components/DocsTableOfContents.tsx      |  2 +-
 site/src/components/EmbedDetector.tsx            |  1 -
 site/src/components/v2/Header.tsx                |  2 +-
 8 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/frontend/apps/hub/src/components/get-started.tsx b/frontend/apps/hub/src/components/get-started.tsx
index 836947abef..14ea0d9995 100644
--- a/frontend/apps/hub/src/components/get-started.tsx
+++ b/frontend/apps/hub/src/components/get-started.tsx
@@ -102,7 +102,7 @@ export function GetStarted() {
 					</div>
 				</CardContent>
 			</Card>
-			<Card
+			{/* <Card
 				id="examples"
 				asChild
 				className="max-w-xl w-full mx-auto my-6"
@@ -156,7 +156,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 +175,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 +215,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"
 								>
diff --git a/frontend/packages/components/src/code.tsx b/frontend/packages/components/src/code.tsx
index b2cf72b109..40ddecc88c 100644
--- a/frontend/packages/components/src/code.tsx
+++ b/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, {
diff --git a/frontend/packages/components/src/docs-sheet.tsx b/frontend/packages/components/src/docs-sheet.tsx
index 981e25a0d2..7c41fcfecf 100644
--- a/frontend/packages/components/src/docs-sheet.tsx
+++ b/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"
 						>
diff --git a/site/src/app/(v2)/[section]/[[...page]]/page.tsx b/site/src/app/(v2)/[section]/[[...page]]/page.tsx
index 59ed0230fe..3fcc92e29c 100644
--- a/site/src/app/(v2)/[section]/[[...page]]/page.tsx
+++ b/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">
diff --git a/site/src/app/(v2)/layout.tsx b/site/src/app/(v2)/layout.tsx
index d6e883af06..6c36ad469d 100644
--- a/site/src/app/(v2)/layout.tsx
+++ b/site/src/app/(v2)/layout.tsx
@@ -1,10 +1,12 @@
 import { Footer } from "@/components/Footer";
+import { EmbedDetector } from "@/components/EmbedDetector";
 import "@/styles/v2.css";
 
 export default function Layout({ children }) {
 	return (
 		<>
 			{children}
+			<EmbedDetector />
 			<Footer />
 		</>
 	);
diff --git a/site/src/components/DocsTableOfContents.tsx b/site/src/components/DocsTableOfContents.tsx
index da85628281..48914f194d 100644
--- a/site/src/components/DocsTableOfContents.tsx
+++ b/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",
 			)}
 		>
diff --git a/site/src/components/EmbedDetector.tsx b/site/src/components/EmbedDetector.tsx
index c57846b8fb..0625ba2eb5 100644
--- a/site/src/components/EmbedDetector.tsx
+++ b/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]);
 
diff --git a/site/src/components/v2/Header.tsx b/site/src/components/v2/Header.tsx
index 1a276112ed..00ab3af62c 100644
--- a/site/src/components/v2/Header.tsx
+++ b/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" />