✨ Create <DocumentSettings /> component and integrate it into the docs page layout

src/components/documentSettings.svelte

@@ -0,0 +1,116 @@
+<script lang="ts">
+  import type { Component } from "svelte";
+
+  import { cn } from "@/utils/cn";
+  import { clipboard } from "@/utils/clipboard";
+
+  import * as DropdownMenu from "@/components/ui/dropdown-menu";
+  import { Button, buttonVariants } from "@/components/ui/button";
+
+  import CopyIcon from "@lucide/svelte/icons/copy";
+  import Openai from "@/components/logos/openai.svelte";
+  import Claude from "@/components/logos/claude.svelte";
+  import CheckCheck from "@lucide/svelte/icons/check-check";
+  import ChevronDown from "@lucide/svelte/icons/chevron-down";
+  import ArrowUpRight from "@lucide/svelte/icons/arrow-up-right";
+  import Markdown from "./logos/markdown.svelte";
+
+  interface DocumentSettingsProps {
+    documentContent: string;
+    documentUrl: string;
+    rawUrl: string;
+  }
+
+  let isCopied = $state<boolean>(false);
+  let settingsOpen = $state<boolean>(false);
+  let { documentContent, documentUrl, rawUrl }: DocumentSettingsProps =
+    $props();
+
+  const handleCopyPage = () => {
+    clipboard(documentContent);
+    isCopied = true;
+    setTimeout(() => {
+      isCopied = false;
+    }, 2000);
+  };
+
+  interface AiOption {
+    name: string;
+    href: string;
+    icon: Component;
+  }
+
+  const aiPrompt = `The following is a documentation page from SVGL, a web app with SVG logos: ${documentUrl}. Help me understand how to use it. Be ready to explain concepts, give examples, or help debug based on it.`;
+
+  const aiOptions: AiOption[] = [
+    {
+      name: "ChatGPT",
+      href: `https://chatgpt.com/?q=${encodeURIComponent(aiPrompt)}`,
+      icon: Openai,
+    },
+    {
+      name: "Claude",
+      href: `https://claude.ai/new?q=${encodeURIComponent(aiPrompt)}`,
+      icon: Claude,
+    },
+  ];
+</script>
+
+{#snippet LinkItem({ href, icon, name }: AiOption)}
+  <DropdownMenu.Item>
+    {#snippet child({ props })}
+      {@const Icon = icon}
+      <a {href} target="_blank" {...props}>
+        <div class="flex items-center space-x-2">
+          <Icon size={14} />
+          <span>{name}</span>
+          <ArrowUpRight size={12} class="opacity-50" />
+        </div>
+      </a>
+    {/snippet}
+  </DropdownMenu.Item>
+{/snippet}
+
+<div class="flex items-center">
+  <Button
+    size="sm"
+    variant="outline"
+    class="rounded-r-none border-r-0 px-2 md:px-3"
+    onclick={handleCopyPage}
+  >
+    {#if isCopied}
+      <CheckCheck size={14} />
+    {:else}
+      <CopyIcon size={14} />
+    {/if}
+    <span class="hidden md:block">Copy Page</span>
+  </Button>
+  <DropdownMenu.Root bind:open={settingsOpen}>
+    <DropdownMenu.Trigger
+      class={cn(
+        buttonVariants({ variant: "outline", size: "sm" }),
+        "rounded-l-none px-2",
+      )}
+    >
+      <ChevronDown
+        size={14}
+        class={cn(
+          "transition-transform duration-200",
+          settingsOpen ? "rotate-180" : "rotate-0",
+        )}
+      />
+    </DropdownMenu.Trigger>
+    <DropdownMenu.Content side="bottom" align="end" sideOffset={6}>
+      <DropdownMenu.Group>
+        {@render LinkItem({
+          href: rawUrl,
+          icon: Markdown,
+          name: "View as Markdown",
+        })}
+        {#each aiOptions as option (option.name)}
+          {@render LinkItem(option)}
+        {/each}
+      </DropdownMenu.Group>
+    </DropdownMenu.Content>
+  </DropdownMenu.Root>
+</div>

src/routes/api/docs/[...slug]/+server.ts

@@ -0,0 +1,15 @@
+import type { RequestEvent } from "@sveltejs/kit";
+import { error } from "@sveltejs/kit";
+import { allDocs } from "content-collections";
+
+export const GET = async ({ params }: RequestEvent) => {
+  const document = allDocs.find((doc) => doc._meta.path === params.slug);
+  if (!document) {
+    throw error(404, `Could not find ${params.slug}`);
+  }
+  return new Response(document.content, {
+    headers: {
+      "Content-Type": "text/markdown; charset=utf-8",
+    },
+  });
+};

src/routes/docs/[...slug]/+page.svelte

@@ -5,15 +5,16 @@
   import PageCard from "@/components/pageCard.svelte";
   import Container from "@/components/container.svelte";
   import PageHeader from "@/components/pageHeader.svelte";
-  import TableOfContents from "@/components/tableOfContents/tableOfContents.svelte";
+  import { buttonVariants } from "@/components/ui/button";
   import * as Collapsible from "@/components/ui/collapsible";
+  import DocumentSettings from "@/components/documentSettings.svelte";
+  import TableOfContents from "@/components/tableOfContents/tableOfContents.svelte";
 
   import FileText from "@lucide/svelte/icons/file-text";
+  import ChevronDown from "@lucide/svelte/icons/chevron-down";
 
   // Markdown:
   import "@/styles/markdown.css";
-  import { buttonVariants } from "@/components/ui/button";
-  import ChevronDown from "@lucide/svelte/icons/chevron-down";
 
   let { data }: PageProps = $props();
   let tocOpen = $state(false);
@@ -38,6 +39,11 @@
         {document.title}
       </p>
     </div>
+    <DocumentSettings
+      rawUrl={document.rawUrl}
+      documentContent={document.content}
+      documentUrl={document.documentUrl}
+    />
   </PageHeader>
   <Collapsible.Root class="block lg:hidden" bind:open={tocOpen}>
     <Collapsible.Trigger