added example gist url

Author: aaanh

frontend/index.html

@@ -22,7 +22,11 @@ <h1 class="text-green-500">Get Raw Gists</h1>
       By <a href="https://aaanh.ca">Anh H Nguyen</a> | <a href="https://github.com/aaanh/gist-stuff">Github</a>
     </div>
     <div>
-
+      
+      <h4 class="text-lg font-bold">Try with this gist URL</h4>
+      <pre><code class="language-url">
+        https://gist.github.com/aaanh/2d8b322170ec9fa3c2273e7b92b48327
+      </code></pre>
       <h4 class="text-lg font-bold">What is a &apos;gist&apos;?</h4>
       <p>Gist is a code or text snippet that is hosted on Github. <a href="https://docs.github.com/en/get-started/writing-on-github/editing-and-sharing-content-with-gists/creating-gists">Docs</a> here.</p>
       <p>It functions similarly to <a href="https://pastebin.com">pastebin.</a></p>

frontend/script.js

@@ -0,0 +1,28 @@
+const copyButtonLabel = "Copy Code";
+
+// you can use a class selector instead if you, or the syntax highlighting library adds one to the 'pre'. 
+let blocks = document.querySelectorAll("pre");
+
+blocks.forEach((block) => {
+  // only add button if browser supports Clipboard API
+  if (navigator.clipboard) {
+    let button = document.createElement("button");
+    button.innerText = copyButtonLabel;
+    button.addEventListener("click", copyCode);
+    block.appendChild(button);
+  }
+});
+
+async function copyCode(event) {
+  const button = event.srcElement;
+  const pre = button.parentElement;
+  let code = pre.querySelector("code");
+  let text = code.innerText;
+  await navigator.clipboard.writeText(text);
+  
+  button.innerText = "Code Copied";
+  
+  setTimeout(()=> {
+    button.innerText = copyButtonLabel;
+  },1000)
+}

frontend/style.css

@@ -19,4 +19,31 @@ a:hover {
 #get-raw-now:hover {
   cursor: pointer;
   background-color: #bbbbbb;
+}
+
+pre[class*="language-"] {
+  position:relative;
+  overflow: auto;
+  margin:5px 0;
+  padding:1.75rem 0 1.75rem 1rem;
+  border-radius:10px;
+}
+
+button{
+  position:absolute;
+  top:5px;
+  right:5px;
+  
+  font-size:.9rem;
+  padding:.15rem;
+  background-color:#828282;
+  color:1e1e1e;
+  border:ridge 1px #7b7b7c;
+  border-radius:5px;
+  text-shadow:#c4c4c4 0 0 2px;
+}
+
+button:hover{
+  cursor:pointer;
+  background-color:#bcbabb;
 }