From 8fc079d26c106b166a856eaa962525facdc1f509 Mon Sep 17 00:00:00 2001 From: Bartosz-Do Date: Mon, 7 Sep 2026 23:32:25 +0200 Subject: [PATCH] Add a "Copy to LLM" dropdown with ChatGPT and Claude shortcuts (#2952) Co-authored-by: codecalm --- .changeset/docs-copy-to-llm-dropdown.md | 5 + .../docs-markdown-mirror-data-tables.md | 5 + docs/components/Colors.astro | 17 +++- docs/components/DocsCopyMarkdownLink.astro | 91 +++++++++++++++++++ docs/components/DocsToc.astro | 40 +------- docs/components/Flags.astro | 9 ++ docs/components/MarkdownSource.astro | 17 ++++ docs/components/Payments.astro | 9 ++ docs/components/Socials.astro | 9 ++ docs/env.d.ts | 7 ++ docs/layouts/DocsLayout.astro | 51 +++++++---- docs/lib/llms.ts | 53 ++++++++--- docs/scss/docs.scss | 6 +- shared/lib/markdown-source.test.ts | 37 ++++++++ shared/lib/markdown-source.ts | 34 +++++++ 15 files changed, 313 insertions(+), 77 deletions(-) create mode 100644 .changeset/docs-copy-to-llm-dropdown.md create mode 100644 .changeset/docs-markdown-mirror-data-tables.md create mode 100644 docs/components/DocsCopyMarkdownLink.astro create mode 100644 docs/components/MarkdownSource.astro create mode 100644 shared/lib/markdown-source.test.ts create mode 100644 shared/lib/markdown-source.ts diff --git a/.changeset/docs-copy-to-llm-dropdown.md b/.changeset/docs-copy-to-llm-dropdown.md new file mode 100644 index 000000000..1549eca99 --- /dev/null +++ b/.changeset/docs-copy-to-llm-dropdown.md @@ -0,0 +1,5 @@ +--- +'@tabler/docs': minor +--- + +Added a "Copy to LLM" split button to docs pages with "View as markdown", "Ask ChatGPT" and "Ask Claude" shortcuts, replacing the sidebar copy button. diff --git a/.changeset/docs-markdown-mirror-data-tables.md b/.changeset/docs-markdown-mirror-data-tables.md new file mode 100644 index 000000000..a2ff61c52 --- /dev/null +++ b/.changeset/docs-markdown-mirror-data-tables.md @@ -0,0 +1,5 @@ +--- +'@tabler/docs': patch +--- + +Added the color palette, flags, payments and social icons tables to the docs `.md` mirrors via a new `MarkdownSource` component. diff --git a/docs/components/Colors.astro b/docs/components/Colors.astro index 054e68e69..7487e6598 100644 --- a/docs/components/Colors.astro +++ b/docs/components/Colors.astro @@ -1,14 +1,26 @@ --- +import MarkdownSource from './MarkdownSource.astro' +import { markdownTable } from '@shared/lib/markdown-source' + interface Props { - colors: Record + colors: Record } const { colors }: Props = Astro.props + +// The .md mirror gets the palette as a table; hex values are listed only when +// the data has real ones (the gray scale points at a CSS variable instead). +const list = Object.values(colors) +const withHex = list.some((color) => color.hex?.startsWith('#')) +const markdown = markdownTable( + ['Color', 'CSS variable', ...(withHex ? ['Hex'] : [])], + list.map((color) => [color.title, `\`${color.prop}\``, ...(withHex ? [color.hex?.startsWith('#') ? `\`${color.hex}\`` : ''] : [])]), +) ---
{ - Object.values(colors).map((color) => { + list.map((color) => { return (
@@ -18,3 +30,4 @@ const { colors }: Props = Astro.props }) }
+ diff --git a/docs/components/DocsCopyMarkdownLink.astro b/docs/components/DocsCopyMarkdownLink.astro new file mode 100644 index 000000000..b95f9e615 --- /dev/null +++ b/docs/components/DocsCopyMarkdownLink.astro @@ -0,0 +1,91 @@ +--- +// Fetches this page's Markdown mirror (its url with ".md" appended) and copies +// its content to the clipboard, so the page can be pasted into an LLM directly. +import Icon from '@ui/Icon.astro' + +interface Props { + /** Url of the page's `.md` mirror, fetched on click. */ + url: string + /** Absolute url of the same `.md` mirror, for the "Ask ChatGPT" / "Ask Claude" prompts. */ + absoluteUrl?: string | undefined + class?: string +} + +const { url, absoluteUrl, class: className } = Astro.props + +// Both ChatGPT and Claude open with this text already in the composer; the +// reader still has to press send. +const prompt = absoluteUrl && `Read ${absoluteUrl} so I can ask questions about it.` +const askChatGptUrl = prompt && `https://chatgpt.com/?q=${encodeURIComponent(prompt)}` +const askClaudeUrl = prompt && `https://claude.ai/new?q=${encodeURIComponent(prompt)}` +--- + +
+ + +
+ + + View as markdown + + { + askChatGptUrl && ( + + + Ask ChatGPT + + ) + } + { + askClaudeUrl && ( + + + Ask Claude + + ) + } +
+
+ + diff --git a/docs/components/DocsToc.astro b/docs/components/DocsToc.astro index b72df9218..943cecc13 100644 --- a/docs/components/DocsToc.astro +++ b/docs/components/DocsToc.astro @@ -19,11 +19,9 @@ interface Props { editUrl?: string | undefined /** URL of the file implementing the component, from the page's `source` front matter */ sourceUrl?: string | undefined - /** url of this page's markdown mirror, offered as a copy button */ - markdownUrl?: string | undefined } -const { toc = [], editUrl, sourceUrl, markdownUrl } = Astro.props +const { toc = [], editUrl, sourceUrl } = Astro.props const illustrationsCount = illustrations.length --- @@ -54,15 +52,8 @@ const illustrationsCount = illustrations.length { - (markdownUrl || sourceUrl || editUrl) && ( + (sourceUrl || editUrl) && (