-
Notifications
You must be signed in to change notification settings - Fork 2.6k
Feat: add copy button for docs #10353
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
@agnieszka-m the nature of the copy button seems to mess with the visibility of the navigation menu on the right for some pages |
YassineGabsi
left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
| const CopyIcon = () => ( | ||
| <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"> | ||
| <rect x="9" y="9" width="13" height="13" rx="2" ry="2" /> | ||
| <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" /> | ||
| </svg> | ||
| ); | ||
|
|
||
| const ChevronDownIcon = () => ( | ||
| <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"> | ||
| <polyline points="6 9 12 15 18 9" /> | ||
| </svg> | ||
| ); | ||
|
|
||
| const MarkdownIcon = () => ( | ||
| <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"> | ||
| <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" /> | ||
| <polyline points="14 2 14 8 20 8" /> | ||
| <line x1="16" y1="13" x2="8" y2="13" /> | ||
| <line x1="16" y1="17" x2="8" y2="17" /> | ||
| <polyline points="10 9 9 9 8 9" /> | ||
| </svg> | ||
| ); | ||
|
|
||
| const PDFIcon = () => ( | ||
| <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"> | ||
| <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" /> | ||
| <polyline points="14 2 14 8 20 8" /> | ||
| <path d="M9 15v-2h2c.6 0 1 .4 1 1s-.4 1-1 1H9z" /> | ||
| <path d="M9 11h2" /> | ||
| </svg> | ||
| ); | ||
|
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
usually we have these as seperate files, for reusability, and we maybe even have them already
| :global([data-theme='dark']) .menuItem svg { | ||
| color: #999; | ||
| } | ||
|
|
||
| :global([data-theme='dark']) .menuItem:hover svg { | ||
| color: #6e90ff; | ||
| } | ||
|
|
||
| :global([data-theme='dark']) .menuItemTitle { | ||
| color: #e0e0e0; | ||
| } | ||
|
|
||
| :global([data-theme='dark']) .menuItemDescription { | ||
| color: #999; | ||
| } | ||
|
|
||
| :global([data-theme='dark']) .menuItem:hover .menuItemTitle { | ||
| color: #6e90ff; | ||
| } | ||
|
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
we already have our tokens in the main css file, using it hardcoded here would be really hard to manage the themes & rebranding for the future
| }, []); | ||
|
|
||
| // Get the page content as markdown | ||
| const getPageMarkdown = () => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think this can be easily done with a package like this
https://www.npmjs.com/package/react-markdown


Related Issues
Proposed Changes:
How did you test it?
Notes for the reviewer
Checklist
fix:,feat:,build:,chore:,ci:,docs:,style:,refactor:,perf:,test:and added!in case the PR includes breaking changes.