Merge branch 'mayconblopes-enhance' into source

Author: mluukkai

src/templates/ContentTemplate.js

@@ -23,6 +23,9 @@ import { partColors } from './partColors';
 import path from 'path';
 import snakeCase from 'lodash/fp/snakeCase';
 import getPartTranslationPath from '../utils/getPartTranslationPath';
+import { createCopyButton } from './copy-code-button/create-copy-buttons';
+
+
 
 export default class ContentTemplate extends Component {
   constructor(props) {
@@ -69,6 +72,7 @@ export default class ContentTemplate extends Component {
     });
 
     window.addEventListener('scroll', this.handleScroll);
+    createCopyButton();
   }
 
   componentWillUnmount() {

src/templates/copy-code-button/copy-code-button-style.css

@@ -0,0 +1,48 @@
+.copy-code-button:host {
+  display: inline-flex;
+}
+
+.copy-code-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: fit-content;
+  margin: 0;
+  padding: 0.5rem;
+  background: var(--color-pre-background);
+  border: none;
+  border-radius: 0.25rem;
+  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.25);
+  color: #fff;
+  cursor: pointer;
+  font-weight: 600;
+  opacity: 0.2;
+  transition: 0.2s ease-in-out;
+}
+
+.copy-code-button:hover {
+  opacity: 1;
+}
+
+.copy-code-button:active{
+  opacity: 0;
+  color: red;
+}
+
+pre {
+  overflow: auto;
+  padding: 1rem;
+  border-radius: 0.5rem;
+  position: relative;
+}
+
+pre .copy-code-button {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+}
+
+
+code {
+    white-space : pre-wrap !important;
+  }

src/templates/copy-code-button/create-copy-buttons.js

@@ -0,0 +1,35 @@
+/*This code exports a function named createCopyButton which adds a "copy" button to all pre elements
+ containing code snippets. The function checks if it's being run in a browser before executing 
+ the code, because SSR from Gatsby. In the copyCode function, it copies the text content of the code element to 
+ the clipboard using the Clipboard API.*/
+
+import './copy-code-button-style.css';
+
+//Declaring a variable to check if the code is running on a browser or not.
+const isBrowser = typeof document !== undefined;
+
+//Exporting a function that creates a copy button for pre elements containing code.
+export function createCopyButton() {
+  //Checking if the code is running on a browser.
+  if (isBrowser) {
+    //Selecting all the pre elements containing code on the page.
+    let blocks = document.querySelectorAll('pre');
+
+    //Function to copy the text content of the code element to clipboard.
+    function copyCode() {
+      const pre = this.parentElement;
+      let code = pre.querySelectorAll('code')[0];
+      navigator.clipboard.writeText(code.innerText);
+    }
+
+    //Adding a copy button to each pre block.
+    blocks.forEach(block => {
+      let button = document.createElement('button');
+      //Adding the CSS class for the copy button style.
+      button.classList.add('copy-code-button');
+      button.innerText = 'copy';
+      button.addEventListener('click', copyCode);
+      block.appendChild(button);
+    });
+  }
+}