Open in LLM feature

docs/src/lib/components/DocsMenu.svelte

@@ -7,6 +7,7 @@
 	import { sortFunc } from '@layerstack/utils';
 	import { cls } from '@layerstack/tailwind';
 
+	import LucideBot from '~icons/lucide/bot';
 	import LucideCompass from '~icons/lucide/compass';
 	import LucideGalleryVertical from '~icons/lucide/gallery-vertical';
 	import LucideGalleryHorizontalEnd from '~icons/lucide/gallery-horizontal-end';
@@ -28,7 +29,8 @@
 		{ name: 'Simplified charts', path: 'simplified-charts' },
 		{ name: 'Scales', path: 'scales' },
 		{ name: 'State', path: 'state' },
-		{ name: 'Styles', path: 'styles' }
+		{ name: 'Styles', path: 'styles' },
+		{ name: 'LLMs', path: 'LLMs' }
 	];
 
 	const componentsByCategory = flatGroup(allComponents, (d) => d.category?.toLowerCase())

docs/src/lib/components/OpenLLMs.svelte

@@ -0,0 +1,156 @@
+<script lang="ts">
+	import { page } from '$app/state';
+	import { fly } from 'svelte/transition';
+	import { Button, Dialog, Toggle, ButtonGroup, Icon, MenuItem, Menu } from 'svelte-ux';
+
+	import ChevronDownIcon from '~icons/lucide/chevron-down';
+	import SimpleIconsOpenai from '~icons/simple-icons/openai';
+	import SimpleIconsClaude from '~icons/simple-icons/claude';
+	import LucideCopyIcon from '~icons/lucide/copy';
+	import LucideCodeIcon from '~icons/lucide/code';
+	import SimpleIconsMarkdown from '~icons/simple-icons/markdown';
+	import LucideGithub from '~icons/lucide/github';
+	import Code from './Code.svelte';
+
+	let { metadata, example = false } = $props();
+	// svelte-ignore state_referenced_locally
+	let isOpen = $state(example);
+	let openSourceModal = $state(false);
+	let showButtonCopied = $state(false);
+	const pkg = {
+		name: 'LayerChart',
+		url: 'https://layerchart.com/docs',
+		description: 'A charting/visualization library for Svelte 5'
+	};
+	const pageName = page.url.href.split('/').pop();
+	const llmBaseContext = `The following is a documentation page from ${pkg.name} (${pkg.description}). The page URL for "${pageName}" is ${page.url.href}. Be ready to help answer questions about this page.`;
+
+	const llms = $state([
+		{
+			label: 'View Page Markdown',
+			icon: SimpleIconsMarkdown,
+			fn: () => window.open(`${page.url.href}/llms.txt`, '_self')
+		},
+		{
+			lineBreakBefore: true,
+			label: 'Open in Claude',
+			icon: SimpleIconsClaude,
+			fn: () => window.open(generateLlmUrl('https://claude.ai/new?q='), '_blank')
+		},
+		{
+			label: 'Open in ChatGPT',
+			icon: SimpleIconsOpenai,
+			fn: () => {
+				window.open(generateLlmUrl('https://chatgpt.com/?q='), '_blank');
+			}
+		}
+	]);
+
+	// Add source button if sent (ie component page)
+	// svelte-ignore state_referenced_locally
+	if (metadata?.source || example) {
+		llms.unshift({
+			label: 'View Component Source',
+			icon: LucideCodeIcon,
+			fn: () => {
+				// show menu item, but do not open source modal when it's an example page
+				if (!example) openSourceModal = true;
+			}
+		});
+	}
+
+	function copy(text: string) {
+		navigator.clipboard.writeText(text);
+		showButtonCopied = true;
+		setTimeout(() => {
+			showButtonCopied = false;
+		}, 2000);
+	}
+
+	function generateLlmUrl(url: string): string {
+		return `${url}${encodeURIComponent(llmBaseContext)}`;
+	}
+</script>
+
+<ButtonGroup variant="fill-light" size="sm" color="primary" class={example ? 'mb-40' : ''}>
+	<Button
+		icon={LucideCopyIcon}
+		variant="fill-light"
+		size="sm"
+		color="primary"
+		onclick={async () => {
+			const md = await fetch(`${page.url.href}/llms.txt`).then((res) => res.text());
+			copy(md);
+		}}
+	>
+		<span class="overflow-hidden relative inline-block" style="width: 70px; height: 1.2em;">
+			{#key showButtonCopied}
+				<span
+					in:fly={{ y: showButtonCopied ? 20 : -20, duration: 500 }}
+					out:fly={{ y: showButtonCopied ? -20 : 20, duration: 500 }}
+					class="absolute inset-0 flex items-center justify-center ml-1"
+				>
+					{showButtonCopied ? 'Copied!' : 'Copy Page'}
+				</span>
+			{/key}
+		</span>
+	</Button>
+	<Toggle bind:on={isOpen} let:on={open} let:toggle let:toggleOff>
+		<Button on:click={toggle}>
+			<span style="transition: transform 300ms ease; transform: rotate({open ? -180 : 0}deg);">
+				<ChevronDownIcon />
+			</span>
+			<Menu {open} on:close={toggleOff} placement="bottom-start">
+				{#each llms as llm (llm.label)}
+					{#if llm.lineBreakBefore}
+						<hr class="my-1" />
+					{/if}
+					<MenuItem
+						onclick={() => {
+							toggleOff();
+							llm.fn?.();
+						}}
+					>
+						<Icon data={llm.icon} />
+						{llm.label}
+					</MenuItem>
+				{/each}
+			</Menu>
+		</Button>
+	</Toggle>
+</ButtonGroup>
+<Dialog
+	bind:open={openSourceModal}
+	on:close={() => (openSourceModal = false)}
+	class="max-h-[98dvh] md:max-h-[90dvh] max-w-[98vw] md:max-w-[90vw] grid grid-rows-[auto_1fr_auto]"
+>
+	<div class="grid grid-cols-[1fr_auto] gap-3 items-center p-4">
+		<div class="overflow-auto">
+			<div class="text-lg font-semibold">Source</div>
+			<div class="text-xs text-surface-content/50 truncate">{metadata?.sourceUrl}</div>
+		</div>
+
+		{#if metadata?.sourceUrl}
+			<Button
+				icon={LucideGithub}
+				variant="fill-light"
+				color="primary"
+				href={metadata.sourceUrl}
+				target="_blank"
+			>
+				View on Github
+			</Button>
+		{/if}
+	</div>
+
+	<div class="overflow-auto border-t">
+		<Code
+			source={metadata?.source}
+			language={metadata?.source?.startsWith('<script') ? 'svelte' : 'js'}
+		/>
+	</div>
+
+	<div slot="actions">
+		<Button variant="fill" color="primary">Close</Button>
+	</div>
+</Dialog>

docs/src/routes/docs/components/[name]/+layout.svelte

@@ -2,6 +2,7 @@
 	import { getSettings } from 'layerchart';
 	import { Button, Menu, Switch, Toggle, ToggleGroup, ToggleOption, Tooltip } from 'svelte-ux';
 	import { toTitleCase } from '@layerstack/utils';
+	import OpenLLMsbutton from '$lib/components/OpenLLMs.svelte';
 
 	import ViewSourceButton from '$lib/components/ViewSourceButton.svelte';
 	import { examples } from '$lib/context.js';
@@ -129,14 +130,7 @@
 		<div class="text-sm text-surface-content/70">{metadata.description}</div>
 
 		<div class="flex gap-2 mt-3">
-			{#if 'source' in metadata}
-				<ViewSourceButton
-					label="Source"
-					source={metadata.source}
-					href={metadata.sourceUrl}
-					icon={LucideCode}
-				/>
-			{/if}
+			<OpenLLMsbutton {metadata} />
 
 			<!-- <ViewSourceButton
         label="Page source"

docs/src/routes/docs/guides/LLMs/+page.md

@@ -0,0 +1,33 @@
+<script>
+  import OpenLLMsButton from "$lib/components/OpenLLMs.svelte";
+  import ViewSourceButton from "$lib/components/ViewSourceButton.svelte";
+</script>
+
+# LLMs Documentation
+
+The Layerchart documentation pages are designed to be accessible for humans developers using LLMs and large language models (LLMs) for effective content ingestion and training.
+
+## For the Humans :icon{name="lucide:user" class="inline-block relative -top-0.5 left-0.5 w-7 h-7"}
+
+<OpenLLMsButton example />
+
+At the top of each documentation page, and demonstrated above, you'll find a button which copies the content of the page's documentation in Markdown to the clipboard. The convenient dropdown gives you addtional helpful options.
+
+## For the Bots :icon{name="lucide:bot" class="inline-block relative -top-0.5 left-0.5"}
+
+LayerChart adopts the [llms.txt](https://llmstxt.org/) proposal standard, which provides a structured, machine-readable format optimized for LLMs. This enables developers, researchers, and AI systems to efficiently parse and utilize our documentation.
+
+::note
+Not all pages may support the `/llms.txt` suffix (those deemed irrelevant to LLMs).
+::
+
+## Accessing LLM-friendly Documentation
+
+1. To access the LLM-friendly version of supported Layerchart documentation pages, simply append `/llms.txt` to the end of the page's URL. This will return the content in a plain-text, LLM-optimized format.
+
+    - **Standard Page**: The LineChart component documentation is available at [layerchart.com/docs/components/LineChart](/docs/components/LineChart).
+    - **LLM-friendly Version**: Append `/llms.txt` to access it at [layerchart.com/docs/components/Linechart/llms.txt](/docs/components/LineChart/llms.txt).
+
+2. To explore all supported pages in LLM-friendly format, visit the root index at [layerchart.com/llms.txt](llms.txt). This page provides a comprehensive list of available documentation endpoints compatible with the `llms.txt` standard.
+
+3. For a complete, consolidated view of the Layerchart documentation in an LLM-friendly format, navigate to [layerchart.com/docs/llms.txt](/docs/llms.txt). This single endpoint aggregates all documentation content into a machine-readable structure, ideal for bulk processing or ingestion into AI systems.