Better handling of multiple code blocks + code snippet styling #129
Conversation
…ections at each code snippet point
|
|
||
| const CodeSnippet = ({ children, copy, className, lineNumbers }) => { | ||
| const language = className.replace('language-', ''); | ||
| const [copied, setCopied] = useState(false); | ||
| const formattedCode = useFormattedCode(children ?? ''); | ||
| const [copied, copyCode] = useClipboard(); | ||
|
|
||
| return ( | ||
| <div> |
There was a problem hiding this comment.
even though this isn't a change, is there a reason to use <div> instead of <React.Fragment>?
There was a problem hiding this comment.
I believe that we did this to prevent flex from messing with the code snippet stuff, but I'm not 100% sure (was a week or so ago).
| @@ -21,11 +34,6 @@ SideBySide.propTypes = { | |||
| children: PropTypes.node.isRequired, | |||
| type: PropTypes.string.isRequired, | |||
| className: PropTypes.string, | |||
| dir: PropTypes.oneOf(['right', 'left']), | |||
There was a problem hiding this comment.
I did not know of this PropTypes function but it is useful :)
|
|
||
| const useClipboard = ({ duration = 1000 } = {}) => { | ||
| const [copied, setCopied] = useState(false); | ||
| const copy = useCallback((text) => { |
There was a problem hiding this comment.
why use useCallback here and not useMemo ? What is the difference?
There was a problem hiding this comment.
Great question! useCallback is actually a shorthand for useMemo that returns functions. Per the React docs:
useCallback(fn, deps) is equivalent to useMemo(() => fn, deps)
|
@timglaser addressed! |
|
🎉 This PR is included in version 1.0.0 🎉 The release is available on GitHub release Your semantic-release bot 📦🚀 |
Description
Better handles guides that use multiple code blocks in a single step. This also addresses some styling issues with the code snippet that caused the page to horizontally scroll.
Reviewer Notes
Helpful link: https://pr-129.dlyi50rq9kt6c.amplifyapp.com/build-apps/build-a-custom-app/
Related Issue(s) / Ticket(s)
If there are any related GitHub Issues or JIRA tickets, add links to them here.
Screenshot(s)