_content: Copy code snippets
- Updates pre style for doc articles
- Adds js for copying code snippets
- .CopyPaste class with button to work with the js
Darkmode Screenshot: https://drive.google.com/file/d/1plTsw3rd_KoeNkjwEB19uOGZtr5DlHAT/view?usp=sharing
Video: https://drive.google.com/file/d/1PuPiSVbKZsOSadW-iVYI-aNmiiXpPn8B/view?usp=sharing
Change-Id: I2c244c6dd8e73b13c7ee8554d35919d0eb3e18c6
Reviewed-on: https://go-review.googlesource.com/c/website/+/441856
Reviewed-by: Hyang-Ah Hana Kim <hyangah@gmail.com>
Reviewed-by: Jamal Carvalho <jamal@golang.org>
Run-TryBot: Jamal Carvalho <jamal@golang.org>
TryBot-Result: Gopher Robot <gobot@golang.org>
diff --git a/_content/css/styles.css b/_content/css/styles.css
index cbb454f..a0311ef 100644
--- a/_content/css/styles.css
+++ b/_content/css/styles.css
@@ -840,7 +840,38 @@
background: var(--color-background-accented);
}
.Article pre {
+ padding: 0.5rem 1.75rem;
+ border-radius: 4px;
+}
+.CopyPaste {
+ display: flex;
+ align-items: center;
+ padding: 0.5rem 1.75rem;
+ border-radius: 4px;
+}
+.TabSection .CopyPaste {
+ margin-right: 2.5rem;
+}
+.CopyPaste button {
+ display: flex;
+ padding: unset;
+ background: none;
+ border: none;
+ margin-left: auto;
+ cursor: copy;
+}
+.CopyPaste button img.CopyPaste-icon {
margin-left: 1.5rem;
+ background-color: unset;
+}
+.CopyPaste .CopyPaste-icon-dark {
+ display: none;
+}
+[data-theme='dark'] .CopyPaste .CopyPaste-icon {
+ display: none;
+}
+[data-theme='dark'] .CopyPaste .CopyPaste-icon-dark {
+ display: block;
}
.Article.Doc img {
background-color: var(--white);
diff --git a/_content/doc/install.html b/_content/doc/install.html
index e6758bc..3332efe 100644
--- a/_content/doc/install.html
+++ b/_content/doc/install.html
@@ -84,9 +84,13 @@
<strong>Remove any previous Go installation</strong> by deleting the /usr/local/go folder
(if it exists), then extract the archive you just downloaded into /usr/local, creating a fresh
Go tree in /usr/local/go:
- <pre>
-$ rm -rf /usr/local/go && tar -C /usr/local -xzf <span id="linux-filename">go1.14.3.linux-amd64.tar.gz</span>
-</pre>
+ <pre class="CopyPaste">
+ <span>$ rm -rf /usr/local/go && tar -C /usr/local -xzf <span id="linux-filename">go1.14.3.linux-amd64.tar.gz</span></span>
+ <button aria-label="Copy and paste the code.">
+ <img class="CopyPaste-icon" src="/images/icons/copy-paste.svg" />
+ <img class="CopyPaste-icon CopyPaste-icon-dark" src="/images/icons/copy-paste-dark.svg" />
+ </button>
+ </pre>
<p>
(You may need to run the command as root or through <code>sudo</code>).
</p>
@@ -101,10 +105,13 @@
You can do this by adding the following line to your $HOME/.profile or
/etc/profile (for a system-wide installation):
</p>
- <pre>
-export PATH=$PATH:/usr/local/go/bin
-</pre
- >
+ <pre class="CopyPaste">
+ <span>export PATH=$PATH:/usr/local/go/bin</span>
+ <button aria-label="Copy and paste the code.">
+ <img class="CopyPaste-icon" src="/images/icons/copy-paste.svg" />
+ <img class="CopyPaste-icon CopyPaste-icon-dark" src="/images/icons/copy-paste-dark.svg" />
+ </button>
+ </pre>
<p>
<strong>Note:</strong> Changes made to a profile file may not apply
until the next time you log into your computer. To apply the changes
@@ -116,10 +123,13 @@
<li>
Verify that you've installed Go by opening a command prompt and typing
the following command:
- <pre>
-$ go version
-</pre
- >
+ <pre class="CopyPaste">
+ <span>$ go version</span>
+ <button aria-label="Copy and paste the code.">
+ <img class="CopyPaste-icon" src="/images/icons/copy-paste.svg" />
+ <img class="CopyPaste-icon CopyPaste-icon-dark" src="/images/icons/copy-paste-dark.svg" />
+ </button>
+ </pre>
</li>
<li>Confirm that the command prints the installed version of Go.</li>
</ol>
@@ -145,10 +155,13 @@
<li>
Verify that you've installed Go by opening a command prompt and typing
the following command:
- <pre>
-$ go version
-</pre
- >
+ <pre class="CopyPaste">
+ <span>$ go version</span>
+ <button aria-label="Copy and paste the code.">
+ <img class="CopyPaste-icon" src="/images/icons/copy-paste.svg" />
+ <img class="CopyPaste-icon CopyPaste-icon-dark" src="/images/icons/copy-paste-dark.svg" />
+ </button>
+ </pre>
</li>
<li>Confirm that the command prints the installed version of Go.</li>
</ol>
@@ -184,10 +197,13 @@
<li>
In the Command Prompt window that appears, type the following
command:
- <pre>
-$ go version
-</pre
- >
+ <pre class="CopyPaste">
+ <span>$ go version</span>
+ <button aria-label="Copy and paste the code.">
+ <img class="CopyPaste-icon" src="/images/icons/copy-paste.svg" />
+ <img class="CopyPaste-icon CopyPaste-icon-dark" src="/images/icons/copy-paste-dark.svg" />
+ </button>
+ </pre>
</li>
<li>Confirm that the command prints the installed version of Go.</li>
</ol>
@@ -204,3 +220,4 @@
<script async src="/doc/download.js"></script>
<script async src="/doc/hats.js"></script>
+<script async src="/js/copypaste.js"></script>
diff --git a/_content/images/icons/copy-paste-dark.svg b/_content/images/icons/copy-paste-dark.svg
new file mode 100644
index 0000000..6932662
--- /dev/null
+++ b/_content/images/icons/copy-paste-dark.svg
@@ -0,0 +1,9 @@
+<svg version="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 16" width="14" height="16">
+ <title>copy-paste-svg</title>
+ <defs>
+ <image width="14" height="16" id="img1" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAQCAMAAAARSr4IAAAAAXNSR0IB2cksfwAAAJBQTFRFqqyu5ubn5ubn5+fn4uPj2tvc5+fo5OTk3d7f4OHi29vc9fX14ODh5eXm9fX15OXl6Onp4+Tk5ufn2Nna6Ojo6uvr5OXl5ebm4OHi5OTl3t/g2NjZ7Ozt7e3u6Ojp6erq4eHi4+Pk6enq7O3t4+Pk6+vs7+/w8vLy7Ozs3+Dg6urq4ODh3d7e5+jo5eXl7u7u4MIsPAAAADB0Uk5TANT//////8//6rwS//8I7dr/////4P//////////////zf///////+P//8f////opQXlIgAAAH9JREFUeJxjYAACRiZmJhZWNnYGCGABkxycXNxgBg+Y5OXjFwAzBMGkkKCwCIMor5i4OFQTUFwCSEoiuFIgXTAuL4M0kBSDcWXAlsjCuHJghUIwrgjYTnmEUQpAUlFJWYVHVU1dXYNBEyYDsRzO1ULlQszTFtTRZRbSk9TVB/EARPUGZJZMFO8AAAAASUVORK5CYII="/>
+ </defs>
+ <style>
+ </style>
+ <use id="Layer" href="#img1" x="0" y="0"/>
+</svg>
\ No newline at end of file
diff --git a/_content/images/icons/copy-paste.svg b/_content/images/icons/copy-paste.svg
new file mode 100644
index 0000000..9acd5e8
--- /dev/null
+++ b/_content/images/icons/copy-paste.svg
@@ -0,0 +1 @@
+<svg width="14" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.992 0h-6L4 .992V4H.992L0 4.992V15.04l.992.96H9.04l.96-.96V12h3.12l.88-.96V2.992L10.992 0Zm0 1.408 1.584 1.584h-1.584V1.408Zm-2 13.584h-8v-10H4v6.048l.992.96h4v2.992Zm4-4h-8v-10H10V4h2.992v6.992Z" fill="#AAACAE"/></svg>
\ No newline at end of file
diff --git a/_content/js/copypaste.js b/_content/js/copypaste.js
new file mode 100644
index 0000000..cd03d42
--- /dev/null
+++ b/_content/js/copypaste.js
@@ -0,0 +1,15 @@
+(() => {
+ 'use strict';
+ const copyButtons = document.querySelectorAll('.CopyPaste button');
+ function copyToClipboard(copyText) {
+ if (typeof navigator?.clipboard?.writeText !== 'function') return;
+ navigator.clipboard.writeText(copyText);
+ }
+ for (let btn of copyButtons) {
+ btn.addEventListener('click', () => {
+ const content = btn?.previousElementSibling?.textContent ?? '';
+ const text = content.substring(content?.[0] === '$' ? 1 : 0);
+ copyToClipboard(text);
+ });
+ }
+})();
diff --git a/_content/site.tmpl b/_content/site.tmpl
index 65ee1ba..a0b6380 100644
--- a/_content/site.tmpl
+++ b/_content/site.tmpl
@@ -255,6 +255,7 @@
<script src="/js/hats.js"></script>
<script src="/js/playground.js"></script>
<script src="/js/godocs.js"></script>
+ <script async src="/js/copypaste.js"></script>
</footer>
</body>
</html>
