0784bb8192
## Summary Adds a "Copy as Markdown" button to the documentation toolbar that allows users to easily copy the raw markdown content of any documentation page. This feature is inspired by similar implementations on sites like [Better Auth docs](https://www.better-auth.com/docs/installation) and [Cloudflare Workers docs](https://developers.cloudflare.com/workers/) which provide easy ways for users to copy documentation content. ## Features - **Button placement**: Positioned between theme toggle and search icon for optimal UX - **Content fetching**: Retrieves raw markdown from GitHub's API for the current page - **Consistent styling**: Matches existing toolbar button patterns ## Test plan - [x] Copy functionality works on all documentation pages - [x] Toast notifications appear and disappear correctly - [x] Button icon animations work properly (spinner → checkmark → copy) - [x] Styling matches other toolbar buttons - [x] Works in both light and dark themes ## Screenshots The button appears as a copy icon between the theme and search buttons in the left toolbar. <img width="798" height="295" alt="image" src="https://github.com/user-attachments/assets/37d41258-d71b-40f8-b8fe-16eaa46b8d7f" /> <img width="1628" height="358" alt="image" src="https://github.com/user-attachments/assets/fc45bc04-a290-4a07-8d1a-a010a92be033" /> --------- Co-authored-by: Danilo Leal <daniloleal09@gmail.com>
46 lines
877 B
CSS
46 lines
877 B
CSS
kbd.keybinding {
|
|
background-color: var(--keybinding-bg);
|
|
padding: 2px 4px;
|
|
border-radius: 3px;
|
|
font-family: monospace;
|
|
display: inline-block;
|
|
margin: 0 2px;
|
|
}
|
|
|
|
#copy-markdown-toggle i {
|
|
font-weight: 500 !important;
|
|
-webkit-text-stroke: 0.5px currentColor;
|
|
}
|
|
|
|
.copy-toast {
|
|
position: fixed;
|
|
top: 72px;
|
|
right: 16px;
|
|
padding: 12px 16px;
|
|
border-radius: 4px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: var(--fg);
|
|
background: var(--toast-bg);
|
|
border: 1px solid var(--toast-border);
|
|
z-index: 1000;
|
|
opacity: 0;
|
|
transform: translateY(-10px);
|
|
transition: all 0.1s ease-in-out;
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
|
|
max-width: 280px;
|
|
}
|
|
|
|
.copy-toast.success {
|
|
border-color: var(--toast-border-success);
|
|
}
|
|
|
|
.copy-toast.error {
|
|
border-color: var(--toast-border-error);
|
|
}
|
|
|
|
.copy-toast.show {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|