diff --git a/src/components/CopyForLLMButton.astro b/src/components/CopyForLLMButton.astro new file mode 100644 index 0000000000..6b71a45e23 --- /dev/null +++ b/src/components/CopyForLLMButton.astro @@ -0,0 +1,250 @@ +--- +import { FiCopy } from 'react-icons/fi'; +import { getMarkdownPath } from '../util/getMarkdownPath'; + +export interface Props { + size?: 'default' | 'compact'; +} + +const { size = 'default' } = Astro.props; +const classes = ['docs-toolbar-button', 'copy-for-llm-button']; +if (size === 'compact') { + classes.push('docs-toolbar-button--compact'); +} +const markdownPath = getMarkdownPath(Astro.url.pathname); +--- + + + + + + diff --git a/src/components/PageContent/PageContent.astro b/src/components/PageContent/PageContent.astro index 4ac1eef31e..551b328272 100644 --- a/src/components/PageContent/PageContent.astro +++ b/src/components/PageContent/PageContent.astro @@ -92,6 +92,35 @@ const suppressTitle = content.suppressTitle; .content > section { margin-bottom: 4rem; } + :global(.page-heading-bar) { + display: grid; + grid-template-columns: minmax(0, 1fr) auto; + gap: 0.75rem; + align-items: center; + margin-bottom: 0.75rem; + } + :global(.page-heading-bar__breadcrumbs) { + min-width: 0; + } + :global(.page-heading-bar__breadcrumbs .breadcrumbs) { + margin: 0; + display: inline-flex; + align-items: center; + } + :global(.page-heading-bar__breadcrumbs .breadcrumbs ol) { + flex-wrap: nowrap; + gap: 0.25rem; + } + :global(.page-heading-bar__breadcrumbs .breadcrumbs li) { + max-width: none; + } + :global(.docs-toolbar-actions--heading) { + display: inline-flex; + gap: 0.5rem; + flex-wrap: wrap; + justify-content: flex-end; + flex: 0 0 auto; + } .next-previous-nav { display: flex; flex-wrap: wrap; @@ -118,4 +147,14 @@ const suppressTitle = content.suppressTitle; height: 0; } } + + @media (max-width: var(--docs-toolbar-mobile-breakpoint)) { + :global(.page-heading-bar) { + grid-template-columns: 1fr; + } + :global(.docs-toolbar-actions--heading) { + width: 100%; + justify-content: flex-start; + } + } diff --git a/src/components/ViewMarkdownButton.astro b/src/components/ViewMarkdownButton.astro new file mode 100644 index 0000000000..47547fb009 --- /dev/null +++ b/src/components/ViewMarkdownButton.astro @@ -0,0 +1,37 @@ +--- +import { FiFileText } from 'react-icons/fi'; +import { getMarkdownPath } from '../util/getMarkdownPath'; + +export interface Props { + size?: 'default' | 'compact'; +} + +const { size = 'default' } = Astro.props; +const classes = ['docs-toolbar-button', 'view-markdown-button']; +if (size === 'compact') { + classes.push('docs-toolbar-button--compact'); +} + +const markdownPath = getMarkdownPath(Astro.url.pathname); +--- + + + + View as Markdown + + + diff --git a/src/layouts/MainLayout.astro b/src/layouts/MainLayout.astro index b44ddcd540..48f7305c5d 100644 --- a/src/layouts/MainLayout.astro +++ b/src/layouts/MainLayout.astro @@ -3,9 +3,11 @@ import type { CollectionEntry } from 'astro:content'; import type { MarkdownHeading } from 'astro'; import generateToc from '~/util/generateToc'; import Breadcrumbs from '../components/Breadcrumbs.astro'; +import CopyForLLMButton from '../components/CopyForLLMButton.astro'; import PageContent from '../components/PageContent/PageContent.astro'; import RightSidebar from '../components/RightSidebar/RightSidebar.astro'; import TableOfContents from '../components/RightSidebar/TableOfContents'; +import ViewMarkdownButton from '../components/ViewMarkdownButton.astro'; import BaseLayout from './BaseLayout.astro'; export interface Props { @@ -23,13 +25,21 @@ const { content, headings, breadcrumbTitle } = Astro.props; { Astro.url.pathname !== '/' && ( - +
+
+ +
+
+ + +
+
) } - { - headings && ( - + + { + headings && ( - - ) - } + ) + } + diff --git a/src/styles/theme.css b/src/styles/theme.css index 279c5c8aaa..88d2d8402e 100644 --- a/src/styles/theme.css +++ b/src/styles/theme.css @@ -21,6 +21,7 @@ --theme-text-md: 1rem; --theme-text-sm: 0.9375rem; --theme-text-xs: 0.875rem; + --docs-toolbar-mobile-breakpoint: 40em; /* Animation helpers */ --theme-ease-bounce: cubic-bezier(0.4, 2.5, 0.6, 1); } diff --git a/src/util/getMarkdownPath.ts b/src/util/getMarkdownPath.ts new file mode 100644 index 0000000000..9ace2ea0e8 --- /dev/null +++ b/src/util/getMarkdownPath.ts @@ -0,0 +1,4 @@ +export const getMarkdownPath = (pathname: string): string => { + const trimmed = pathname === '/' ? '/index' : pathname.replace(/\/$/, '') || '/index'; + return `${trimmed}.md`; +};