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) && (