diff --git a/docs/.vitepress/theme/Layout.vue b/docs/.vitepress/theme/Layout.vue index b34b700f..0be3a6b6 100644 --- a/docs/.vitepress/theme/Layout.vue +++ b/docs/.vitepress/theme/Layout.vue @@ -1,10 +1,15 @@ diff --git a/docs/.vitepress/theme/components/CopyPageMenu.vue b/docs/.vitepress/theme/components/CopyPageMenu.vue new file mode 100644 index 00000000..e9d26391 --- /dev/null +++ b/docs/.vitepress/theme/components/CopyPageMenu.vue @@ -0,0 +1,457 @@ + + + + + + + diff --git a/docs/.vitepress/theme/components/copy-page-icons.ts b/docs/.vitepress/theme/components/copy-page-icons.ts new file mode 100644 index 00000000..9272c6f8 --- /dev/null +++ b/docs/.vitepress/theme/components/copy-page-icons.ts @@ -0,0 +1,15 @@ +/** @format */ + +/** + * Inline SVG glyphs for the "Copy page" menu (rendered via v-html, sized by CSS). + * All paths use fill="currentColor" so they follow the surrounding text color. + */ + +export const MARKDOWN_ICON = + ''; + +export const OPENAI_ICON = + ''; + +export const CLAUDE_ICON = + ''; diff --git a/docs/.vitepress/theme/style.css b/docs/.vitepress/theme/style.css index 7727bb54..03a1e2f0 100644 --- a/docs/.vitepress/theme/style.css +++ b/docs/.vitepress/theme/style.css @@ -1048,13 +1048,10 @@ html.dark .docs-layout, } .docs-layout .VPDoc.has-aside .content { - /* Theme default adds large top padding here; remove it so only `.main` controls vertical offset */ - padding: 0 32px 128px !important; - } - - .docs-layout .VPDoc.has-aside .content .main { - /* Slightly lower than both side columns */ - padding-top: 32px !important; + /* Theme default adds large top padding here; use 32px so the body copy sits slightly + lower than both side columns. Kept on `.content` (not `.main`) so the `doc-before` + slot — which hosts the "Copy page" control — shares the H1's vertical origin. */ + padding: 32px 32px 128px !important; } /* Right "On this page" rail: the theme’s `.aside-container` is 224px, so the flex @@ -1181,6 +1178,38 @@ html.dark .docs-layout, } } +/* ================================================ + COPY PAGE MENU — placement of components/CopyPageMenu.vue + Rendered in the `doc-before` slot (Layout.vue), i.e. as the first child of + `.VPDoc .content-container`, right above
. The H1 lives inside the + markdown output, so the control is anchored to the content column and the H1 + reserves room for it. Visual styles are scoped in the component. + ================================================ */ +.docs-layout .VPDoc .content-container { + position: relative; /* anchor for the absolutely positioned control */ +} + +/* < 768px: in-flow, right-aligned block above the title */ +.docs-layout .VPDoc .content-container > .copy-page { + margin: 0 0 16px; +} + +@media (min-width: 768px) { + .docs-layout .VPDoc .content-container > .copy-page { + position: absolute; + top: 2px; /* (h1 line box ~38px − 34px button) / 2 */ + right: 0; + margin: 0; + z-index: 10; /* below --vp-z-index-local-nav (20) and the image lightbox */ + } + + /* Reserve the control's footprint on the H1 only when it actually rendered + (sibling selector, so `copyPage: false` pages keep the full width). */ + .docs-layout .VPDoc .content-container > .copy-page ~ .main .vp-doc > div > h1 { + padding-right: 156px; /* ≈ 132px control + 24px gap — re-measure if the label changes */ + } +} + /* ================================================ HERO IMAGE STYLES ================================================ */ diff --git a/docs/index.md b/docs/index.md index 1c7e5a38..ca6d8d73 100644 --- a/docs/index.md +++ b/docs/index.md @@ -4,6 +4,7 @@ title: Plane Docs description: Everything you need to learn Plane, manage projects, and build powerful workflows. prev: false next: false +copyPage: false ---