diff --git a/package-lock.json b/package-lock.json index 60293068a0..bcbda60e4e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -27,6 +27,7 @@ "gatsby-source-filesystem": "^5.10.0", "gatsby-transformer-sharp": "^5.10.0", "katex": "^0.16.10", + "lucide-react": "^0.408.0", "prismjs": "^1.29.0", "react": "^18.2.0", "react-bootstrap": "^2.7.4", @@ -14100,6 +14101,15 @@ "es5-ext": "~0.10.2" } }, + "node_modules/lucide-react": { + "version": "0.408.0", + "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.408.0.tgz", + "integrity": "sha512-8kETAAeWmOvtGIr7HPHm51DXoxlfkNncQ5FZWXR+abX8saQwMYXANWIkUstaYtcKSo/imOe/q+tVFA8ANzdSVA==", + "license": "ISC", + "peerDependencies": { + "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" + } + }, "node_modules/make-dir": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz", diff --git a/package.json b/package.json index 1af18c439c..5d2b4d391a 100644 --- a/package.json +++ b/package.json @@ -33,6 +33,7 @@ "gatsby-source-filesystem": "^5.10.0", "gatsby-transformer-sharp": "^5.10.0", "katex": "^0.16.10", + "lucide-react": "^0.408.0", "prismjs": "^1.29.0", "react": "^18.2.0", "react-bootstrap": "^2.7.4", diff --git a/src/components/CodeChunk.js b/src/components/CodeChunk.js index 002d27e034..a7543ef8d2 100644 --- a/src/components/CodeChunk.js +++ b/src/components/CodeChunk.js @@ -1,25 +1,43 @@ -import React from 'react'; +import './codeChunk.css'; + +import React, { useState } from 'react'; import Prism from '../prism/prism'; import '../prism/prism.css'; +import { Clipboard } from 'lucide-react'; export default function CodeChunk({ children, hasWhiteBackground = false }) { + const [isCopied, setIsCopied] = useState(false); + React.useEffect(() => { Prism.highlightAll(); - }, []); + }, [children]); + + const copyButton = ( +
{ + navigator.clipboard.writeText(children); + setIsCopied(true); + }} + className="codeChunckCopyButton" + > + {isCopied ? 'Copied' : } +
+ ); return ( -
+ 
         
           {children}
+
{copyButton}
); } diff --git a/src/components/FunctionExploration.js b/src/components/FunctionExploration.js index 327471b9eb..5906adb93f 100644 --- a/src/components/FunctionExploration.js +++ b/src/components/FunctionExploration.js @@ -100,7 +100,7 @@ export default function FunctionExploration({ funDetails }) { )}

Code Example

-
+
{selectedParameterInfo.options ? selectedParameterInfo.basicUsage.replace( diff --git a/src/components/codeChunk.css b/src/components/codeChunk.css new file mode 100644 index 0000000000..5df388345e --- /dev/null +++ b/src/components/codeChunk.css @@ -0,0 +1,25 @@ +.codeChunckCopyButton { + color: grey; + border: solid grey 1px; + border-radius: 5px; + padding-top: 2px; + padding-bottom: 2px; + padding-right: 6px; + padding-left: 6px; + opacity: 0.5; + cursor: pointer; + line-height: 20px; + font-size: 12px; +} + +.codeChunckCopyButton:hover { + opacity: 1; +} + +.copyButtonContainer { + position: absolute; + top: 0px; + right: 0px; + margin-right: 4px; + margin-top: 4px; +} diff --git a/src/prism/prism.css b/src/prism/prism.css index 0acfb6aea8..db61d085e0 100644 --- a/src/prism/prism.css +++ b/src/prism/prism.css @@ -30,71 +30,75 @@ cyan #2aa198 green #859900 */ -code[class*="language-"], -pre[class*="language-"] { - color: #657b83; /* base00 */ - font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; - font-size: 1em; - text-align: left; - white-space: pre; - word-spacing: normal; - word-break: normal; - word-wrap: normal; +code[class*='language-'], +pre[class*='language-'] { + color: #657b83; /* base00 */ + font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; + font-size: 0.9em; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + word-wrap: normal; - line-height: 1.5; + line-height: 1.5; - -moz-tab-size: 4; - -o-tab-size: 4; - tab-size: 4; + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; - -webkit-hyphens: none; - -moz-hyphens: none; - -ms-hyphens: none; - hyphens: none; + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; } -pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection, -code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection { - background: #073642; /* base02 */ +pre[class*='language-']::-moz-selection, +pre[class*='language-'] ::-moz-selection, +code[class*='language-']::-moz-selection, +code[class*='language-'] ::-moz-selection { + background: #d7d6d6; /* base02 */ } -pre[class*="language-"]::selection, pre[class*="language-"] ::selection, -code[class*="language-"]::selection, code[class*="language-"] ::selection { - background: #073642; /* base02 */ +pre[class*='language-']::selection, +pre[class*='language-'] ::selection, +code[class*='language-']::selection, +code[class*='language-'] ::selection { + background: #d7d6d6; /* base02 */ } /* Code blocks */ -pre[class*="language-"] { - padding: 1em; - margin: .5em 0; - overflow: auto; - border-radius: 0.3em; +pre[class*='language-'] { + padding: 1em; + margin: 0.5em 0; + overflow: auto; + border-radius: 0.3em; } -:not(pre) > code[class*="language-"], -pre[class*="language-"] { - background-color: var(--light-grey); /* base3 */ +:not(pre) > code[class*='language-'], +pre[class*='language-'] { + background-color: var(--light-grey); /* base3 */ } /* Inline code */ -:not(pre) > code[class*="language-"] { - padding: .1em; - border-radius: .3em; +:not(pre) > code[class*='language-'] { + padding: 0.1em; + border-radius: 0.3em; } .token.comment, .token.prolog, .token.doctype, .token.cdata { - color: #93a1a1; /* base1 */ + color: #93a1a1; /* base1 */ } .token.punctuation { - color: #586e75; /* base01 */ + color: #586e75; /* base01 */ } .token.namespace { - opacity: .7; + opacity: 0.7; } .token.property, @@ -104,7 +108,7 @@ pre[class*="language-"] { .token.constant, .token.symbol, .token.deleted { - color: #268bd2; /* blue */ + color: #268bd2; /* blue */ } .token.selector, @@ -114,40 +118,39 @@ pre[class*="language-"] { .token.builtin, .token.url, .token.inserted { - color: #2aa198; /* cyan */ + color: #2aa198; /* cyan */ } .token.entity { - color: #657b83; /* base00 */ - background: #eee8d5; /* base2 */ + color: #657b83; /* base00 */ + background: #eee8d5; /* base2 */ } .token.atrule, .token.attr-value, .token.keyword { - color: #859900; /* green */ + color: #859900; /* green */ } .token.function, .token.class-name { - color: #b58900; /* yellow */ + color: #b58900; /* yellow */ } .token.regex, .token.important, .token.variable { - color: #cb4b16; /* orange */ + color: #cb4b16; /* orange */ } .token.important, .token.bold { - font-weight: bold; + font-weight: bold; } .token.italic { - font-style: italic; + font-style: italic; } .token.entity { - cursor: help; + cursor: help; } -