chore: carbon take 3 (#1297)

sites/docs/src/lib/components/docs/carbon.svelte

@@ -1,12 +1,58 @@
 <script lang="ts">
-	import { page } from "$app/stores";
+	import { onMount } from "svelte";
+	import { isBrowser } from "$lib/utils.js";
+	import { beforeNavigate } from "$app/navigation";
+
+	const src =
+		"//cdn.carbonads.com/carbon.js?serve=CW7DK27L&placement=shadcn-sveltecom&format=cover";
+	const localId = crypto.randomUUID();
+
+	let container: HTMLElement | null = null;
+
+	onMount(() => {
+		refreshCarbonAds();
+
+		return () => {
+			const scriptNode = container?.querySelector(`[data-id="${localId}"]`);
+			const carbonNode = container?.querySelector(`#carbonads`);
+			scriptNode?.remove();
+			carbonNode?.remove();
+		};
+	});
+
+	beforeNavigate((navigation) => {
+		const isDocIndex = navigation.from?.route.id === "/(app)/docs";
+		if (isDocIndex) return;
+		const goingToDocIndex = navigation.to?.route.id === "/(app)/docs";
+		if (goingToDocIndex) return;
+		refreshCarbonAds();
+	});
+
+	function createCarbonScript() {
+		const script = document.createElement("script");
+		script.async = true;
+		script.id = "_carbonads_js";
+		script.src = src;
+		script.type = "text/javascript";
+		script.dataset.id = localId;
+		return script;
+	}
+
+	function refreshCarbonAds() {
+		if (!isBrowser) return;
+
+		const scriptNode = container?.querySelector("[data-id='_carbonads_js']");
+		const carbonAdsNode = container?.querySelector("#carbonads");
+
+		carbonAdsNode?.remove();
+		scriptNode?.remove();
+
+		const script = createCarbonScript();
+		container = document.getElementById(localId);
+		if (container) {
+			container.appendChild(script);
+		}
+	}
 </script>
 
-{#if $page.url.pathname}
-	<script
-		async
-		type="text/javascript"
-		src="//cdn.carbonads.com/carbon.js?serve=CW7DK27L&placement=shadcn-sveltecom&format=classic"
-		id="_carbonads_js"
-	></script>
-{/if}
+<div id={localId} class="pt-4"></div>

sites/docs/src/lib/components/docs/table-of-contents.svelte

@@ -3,6 +3,7 @@
 	import { writable } from "svelte/store";
 	import type { TableOfContents, TableOfContentsItem } from "$lib/types/docs.js";
 	import { Tree } from "$lib/components/docs/index.js";
+	import { page } from "$app/stores";
 
 	let filteredHeadingsList: TableOfContents;
 
@@ -101,7 +102,9 @@
 	});
 </script>
 
-<div class="space-y-2">
-	<p class="inline-flex font-medium">On This Page</p>
-	<Tree tree={filteredHeadingsList} activeItem={$activeItem} />
-</div>
+{#key $page.url.pathname}
+	<div class="space-y-2">
+		<p class="inline-flex font-medium">On This Page</p>
+		<Tree tree={filteredHeadingsList} activeItem={$activeItem} />
+	</div>
+{/key}

sites/docs/src/routes/(app)/docs/+layout.server.ts

@@ -25,3 +25,5 @@ export const load: LayoutServerLoad = async () => {
 		datePicker: await superValidate(zod(datePickerFormSchema)),
 	};
 };
+
+export const prerender = true;

sites/docs/src/routes/(app)/docs/+page.svelte

@@ -2,6 +2,7 @@
 	import type { ComponentType } from "svelte";
 	import ChevronRight from "lucide-svelte/icons/chevron-right";
 	import type { PageData } from "./$types.js";
+	import Carbon from "$lib/components/docs/carbon.svelte";
 	import { page } from "$app/stores";
 	import { DocsPager, TableOfContents } from "$lib/components/docs/index.js";
 	import { cn } from "$lib/utils.js";
@@ -43,13 +44,7 @@
 				<TableOfContents />
 			{/key}
 			<div class="z-10 pt-4">
-				<script
-					async
-					type="text/javascript"
-					src="//cdn.carbonads.com/carbon.js?serve=CW7DK27L&placement=shadcn-sveltecom&format=cover"
-					id="_carbonads_js"
-					data-id="carbon-ads"
-				></script>
+				<Carbon />
 			</div>
 		</div>
 	</div>

sites/docs/src/routes/(app)/docs/[...slug]/+page.svelte

@@ -2,38 +2,18 @@
 	import ChevronRight from "svelte-radix/ChevronRight.svelte";
 	import Code from "svelte-radix/Code.svelte";
 	import ExternalLink from "svelte-radix/ExternalLink.svelte";
-	import { onMount } from "svelte";
 	import type { PageData } from "./$types.js";
 	import { ScrollArea } from "$lib/registry/new-york/ui/scroll-area/index.js";
 	import { config } from "$lib/stores/index.js";
-	import { page } from "$app/stores";
 	import { DocsPager, TableOfContents } from "$lib/components/docs/index.js";
 	import { badgeVariants } from "$lib/registry/new-york/ui/badge/index.js";
 	import { cn } from "$lib/utils.js";
-	import { afterNavigate, beforeNavigate } from "$app/navigation";
+	import Carbon from "$lib/components/docs/carbon.svelte";
 
 	export let data: PageData;
 	$: markdown = data.component;
 	$: doc = data.metadata;
 	$: componentSource = data.metadata.source?.replace("default", $config.style ?? "default");
-
-	let mounted = false;
-
-	beforeNavigate(() => {
-		mounted = false;
-	});
-
-	afterNavigate(() => {
-		mounted = true;
-	});
-
-	onMount(() => {
-		mounted = true;
-
-		return () => {
-			mounted = false;
-		};
-	});
 </script>
 
 <main class="relative py-6 lg:gap-10 lg:py-8 xl:grid xl:grid-cols-[1fr_300px]">
@@ -86,22 +66,10 @@
 	</div>
 	<div class="hidden text-sm xl:block">
 		<div class="sticky top-14 -mt-10 h-[calc(100vh-3.5rem)] py-8">
-			{#key $page.url.pathname}
-				<ScrollArea class="h-full">
-					<TableOfContents />
-					{#if mounted}
-						<div class="z-10 pt-4">
-							<script
-								async
-								type="text/javascript"
-								src="//cdn.carbonads.com/carbon.js?serve=CW7DK27L&placement=shadcn-sveltecom&format=cover"
-								id="_carbonads_js"
-								data-id="carbon-ads"
-							></script>
-						</div>
-					{/if}
-				</ScrollArea>
-			{/key}
+			<ScrollArea class="h-full">
+				<TableOfContents />
+				<Carbon />
+			</ScrollArea>
 		</div>
 	</div>
 </main>