Copy button on code blocks (#597)

* adding copy button

* fixed getting started; modified copy button code

* color change and click feedback

* overflow, overlay issue, click feedback

* changed flashing color to darker orange

* copy button only visible on hover

* switched to tailwind

website/homepage/render_html.py

@@ -44,7 +44,7 @@ def render_index():
 
 guides = []
 for guide in sorted(os.listdir(GRADIO_GUIDES_DIR)):
-    if guide.lower() in ["getting_started.md", "readme.md"]:
+    if guide.lower() == "readme.md":
         continue
     guide_name = guide[:-3]
     pretty_guide_name = " ".join(
@@ -108,6 +108,7 @@ def render_guides():
         code_tags = re.findall(r'\{\{ code\["([^\s]*)"\] \}\}', guide["content"])
         demo_names = re.findall(r'\{\{ demos\["([^\s]*)"\] \}\}', guide["content"])
         code, demos = {}, {}
+
         guide["content"] = (
             guide["content"]
             .replace("website/src/assets", "/assets")
@@ -144,6 +145,12 @@ def render_guides():
             guide_output,
         )
 
+        copy_button = "<button class='copy flex float-right cursor-pointer rounded-l-none rounded-r mx-0 my-2' " \
+                      "onclick='copyCode(this)'><img class='copy-svg m0 w-7 flex-initial' " \
+                      "src='/assets/img/copy-grey.svg'><div class='flex-auto'></div></button>"
+        guide_output = guide_output.replace("<pre>", "<div class='code-block' style='display: flex'><pre>")
+        guide_output = guide_output.replace("</pre>", f"</pre>{copy_button}</div>")
+
         output_html = markdown2.markdown(guide_output, extras=["target-blank-links"])
 
         for match in re.findall(r"<h3>([A-Za-z0-9 ]*)<\/h3>", output_html):

website/homepage/src/assets/img/copy-grey.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" style="fill: #808080;"><!-- Font Awesome Pro 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M320 448v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V120c0-13.255 10.745-24 24-24h72v296c0 30.879 25.121 56 56 56h168zm0-344V0H152c-13.255 0-24 10.745-24 24v368c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24V128H344c-13.2 0-24-10.8-24-24zm120.971-31.029L375.029 7.029A24 24 0 0 0 358.059 0H352v96h96v-6.059a24 24 0 0 0-7.029-16.97z"/></svg>

website/homepage/src/assets/img/copy-orange.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" style="fill: #eb9f59;"><!-- Font Awesome Pro 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M320 448v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V120c0-13.255 10.745-24 24-24h72v296c0 30.879 25.121 56 56 56h168zm0-344V0H152c-13.255 0-24 10.745-24 24v368c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24V128H344c-13.2 0-24-10.8-24-24zm120.971-31.029L375.029 7.029A24 24 0 0 0 358.059 0H352v96h96v-6.059a24 24 0 0 0-7.029-16.97z"/></svg>

website/homepage/src/guides_template.html

@@ -42,6 +42,8 @@
 
     .prose .code,
     .prose pre {
+      width: 95%;
+      border-radius: 4px 0 0 4px;
       color: black;
       background: rgb(249, 250, 251);
     }
@@ -53,6 +55,22 @@
     .prose h1 {
       font-weight: 600;
     }
+
+    .copy {
+      padding-right: 1em;
+      background: #f9fafb;
+    }
+
+    .copy-svg {
+      visibility: hidden;
+      margin: 1em 0 0 0 !important;
+      width: 20px;
+    }
+
+    .code-block:hover .copy-svg {
+       visibility: visible;
+    }
+
   </style>
   <script async src="https://www.googletagmanager.com/gtag/js?id=UA-156449732-1"></script>
   <script>
@@ -117,6 +135,14 @@
       });
     });
 
+    function copyCode(elem) {
+        var text = elem.parentElement.innerText;
+        navigator.clipboard.writeText(text);
+        elem.firstChild.src = "/assets/img/copy-orange.svg"
+        setTimeout(function(){
+          elem.firstChild.src = "/assets/img/copy-grey.svg"
+        }, 600);
+    };
 
     var spacesHolder, spaces;
     spacesHolder = document.getElementById("spaces-holder");