The docs' Copy page menu keeps its own spacing, with an icon per item
1 file+50−140/1 viewed
| 2 | 2 | // A page's title, what it is about beneath it, and a way to take the page | |
| 3 | 3 | // to an AI assistant: copied as Markdown, read as Markdown, or opened in | |
| 4 | 4 | // Claude or ChatGPT. | |
| 5 | − | import { ChevronDown, Copy } from '@lucide/astro'; | |
| 5 | + | import { ArrowUpRight, ChevronDown, Copy, FileText, MessageSquare } from '@lucide/astro'; | |
| 6 | 6 | ||
| 7 | 7 | const { entry, id } = Astro.locals.starlightRoute; | |
| 8 | 8 | const { title, description } = entry.data; | |
| 14 | 14 | <div class="g1t-page-title"> | |
| 15 | 15 | <div class="g1t-page-title-row"> | |
| 16 | 16 | <h1 id="_top">{title}</h1> | |
| 17 | − | <div class="g1t-copy"> | |
| 17 | + | <div class="g1t-copy not-content"> | |
| 18 | 18 | <button type="button" class="g1t-copy-main" data-markdown={markdown}> | |
| 19 | 19 | <Copy /> | |
| 20 | 20 | <span>Copy page</span> | |
| 25 | 25 | </summary> | |
| 26 | 26 | <div class="g1t-copy-menu"> | |
| 27 | 27 | <a href={markdown} target="_blank" rel="noopener"> | |
| 28 | − | <strong>View as Markdown</strong> | |
| 29 | − | <span>This page as plain text</span> | |
| 28 | + | <FileText class="g1t-copy-icon" /> | |
| 29 | + | <span class="g1t-copy-text"><strong>View as Markdown</strong><small>This page as plain text</small></span> | |
| 30 | 30 | </a> | |
| 31 | 31 | <a href={`https://claude.ai/new?q=${ask}`} target="_blank" rel="noopener"> | |
| 32 | − | <strong>Open in Claude</strong> | |
| 33 | − | <span>Ask questions about this page</span> | |
| 32 | + | <MessageSquare class="g1t-copy-icon" /> | |
| 33 | + | <span class="g1t-copy-text"><strong>Open in Claude</strong><small>Ask questions about this page</small></span> | |
| 34 | + | <ArrowUpRight class="g1t-copy-out" /> | |
| 34 | 35 | </a> | |
| 35 | 36 | <a href={`https://chatgpt.com/?hints=search&q=${ask}`} target="_blank" rel="noopener"> | |
| 36 | − | <strong>Open in ChatGPT</strong> | |
| 37 | − | <span>Ask questions about this page</span> | |
| 37 | + | <MessageSquare class="g1t-copy-icon" /> | |
| 38 | + | <span class="g1t-copy-text"><strong>Open in ChatGPT</strong><small>Ask questions about this page</small></span> | |
| 39 | + | <ArrowUpRight class="g1t-copy-out" /> | |
| 38 | 40 | </a> | |
| 39 | 41 | </div> | |
| 40 | 42 | </details> | |
| 140 | 142 | top: calc(100% + 0.4rem); | |
| 141 | 143 | right: 0; | |
| 142 | 144 | z-index: 10; | |
| 143 | − | width: 15rem; | |
| 145 | + | width: 16.5rem; | |
| 144 | 146 | border-radius: 0.75rem; | |
| 145 | 147 | padding: 0.35rem; | |
| 146 | 148 | background: var(--g1t-raised); | |
| 148 | 150 | inset 0 0 0 1px var(--g1t-line-strong), | |
| 149 | 151 | 0 12px 32px rgb(0 0 0 / 0.45); | |
| 150 | 152 | } | |
| 153 | + | /* Its own spacing: the page's prose rules stop at not-content, and | |
| 154 | + | nothing inside keeps a margin of its own. */ | |
| 155 | + | .g1t-copy-menu * { | |
| 156 | + | margin: 0; | |
| 157 | + | } | |
| 151 | 158 | .g1t-copy-menu a { | |
| 152 | − | display: block; | |
| 159 | + | display: flex; | |
| 160 | + | align-items: flex-start; | |
| 161 | + | gap: 0.6rem; | |
| 153 | 162 | border-radius: 0.5rem; | |
| 154 | − | padding: 0.45rem 0.6rem; | |
| 163 | + | padding: 0.5rem 0.6rem; | |
| 155 | 164 | text-decoration: none; | |
| 165 | + | transition: background 0.15s; | |
| 156 | 166 | } | |
| 167 | + | .g1t-copy-menu a + a { | |
| 168 | + | margin-top: 0.1rem; | |
| 169 | + | } | |
| 157 | 170 | .g1t-copy-menu a:hover { | |
| 158 | 171 | background: var(--g1t-surface); | |
| 159 | 172 | } | |
| 173 | + | .g1t-copy-menu :global(.g1t-copy-icon) { | |
| 174 | + | flex-shrink: 0; | |
| 175 | + | margin-top: 0.15rem; | |
| 176 | + | color: var(--g1t-faint); | |
| 177 | + | } | |
| 178 | + | .g1t-copy-menu :global(.g1t-copy-out) { | |
| 179 | + | flex-shrink: 0; | |
| 180 | + | margin-left: auto; | |
| 181 | + | margin-top: 0.15rem; | |
| 182 | + | width: 0.8rem; | |
| 183 | + | height: 0.8rem; | |
| 184 | + | color: var(--g1t-faint); | |
| 185 | + | opacity: 0; | |
| 186 | + | transition: opacity 0.15s; | |
| 187 | + | } | |
| 188 | + | .g1t-copy-menu a:hover :global(.g1t-copy-out) { | |
| 189 | + | opacity: 1; | |
| 190 | + | } | |
| 191 | + | .g1t-copy-text { | |
| 192 | + | display: flex; | |
| 193 | + | min-width: 0; | |
| 194 | + | flex-direction: column; | |
| 195 | + | gap: 0.1rem; | |
| 196 | + | line-height: 1.3; | |
| 197 | + | } | |
| 160 | 198 | .g1t-copy-menu strong { | |
| 161 | − | display: block; | |
| 162 | 199 | font-size: 0.8125rem; | |
| 163 | 200 | font-weight: 500; | |
| 164 | 201 | color: var(--g1t-fg); | |
| 165 | 202 | } | |
| 166 | − | .g1t-copy-menu span { | |
| 167 | − | display: block; | |
| 203 | + | .g1t-copy-menu small { | |
| 168 | 204 | font-size: 0.75rem; | |
| 169 | 205 | color: var(--g1t-faint); | |
| 170 | 206 | } |