From 1e8b17bb8935b7d0ec1c4cef9d3a34d355a18629 Mon Sep 17 00:00:00 2001
From: Hayden <64056131+hay-kot@users.noreply.github.com>
Date: Fri, 30 Sep 2022 21:37:26 -0800
Subject: [PATCH 1/6] add copy button to viewer

---
 templates/pasta.html | 43 +++++++++++++++++++++++++++++++++++++------
 1 file changed, 37 insertions(+), 6 deletions(-)

diff --git a/templates/pasta.html b/templates/pasta.html
index 879c948..adf52cb 100644
--- a/templates/pasta.html
+++ b/templates/pasta.html
@@ -16,13 +16,31 @@
   <a href="/pasta/{{pasta.id_as_animals()}}"><i>{{pasta.id_as_animals()}}</i></a>
 </div>
 <br>
-<div style="clear: both;">
-  {% if args.highlightsyntax %}
-  <pre><code>{{pasta.content_syntax_highlighted()}}</code></pre>
-  {%- else %}
-  <pre><code>{{pasta.content_not_highlighted()}}</code></pre>
-  {%- endif %}
+<div class="code-container">
+  <button id="copy-button" class="copy-button">
+    <svg id="copy-icon" style="width:24px;height:24px" viewBox="0 0 24 24">
+      <path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z" />
+    </svg>
+  </button>
+  <div style="clear: both;">
+    {% if args.highlightsyntax %}
+    <pre><code id="code">{{pasta.content_syntax_highlighted()}}</code></pre>
+    {%- else %}
+    <pre><code id="code">{{pasta.content_not_highlighted()}}</code></pre>
+    {%- endif %}
+  </div>
 </div>
+
+<script>
+  const btn = document.getElementById("copy-icon")
+  const content = `{{ pasta.content }}`
+
+  btn.addEventListener("click", () => {
+    navigator.clipboard.writeText(content)
+  })
+
+</script>
+
 <style>
 code-line {
   counter-increment: listing;
@@ -48,6 +66,19 @@ code-line::before {
   user-select: none;
 }
 
+.code-container {
+  position: relative;
+}
+
+.copy-button {
+  position: absolute;
+  background: transparent;
+  top: 0;
+  right: 0;
+  padding: 8px;
+  margin: 5px;
+}
+
 </style>
 
 {% include "footer.html" %}

From c39b77823461dba7f47debc6fba885069cc3735b Mon Sep 17 00:00:00 2001
From: Hayden <64056131+hay-kot@users.noreply.github.com>
Date: Sat, 1 Oct 2022 20:50:05 -0800
Subject: [PATCH 2/6] properly escape content

---
 src/pasta.rs         | 4 ++++
 templates/pasta.html | 6 +++++-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/pasta.rs b/src/pasta.rs
index 3a54070..a728211 100644
--- a/src/pasta.rs
+++ b/src/pasta.rs
@@ -80,6 +80,10 @@ impl Pasta {
     pub fn content_not_highlighted(&self) -> String {
         html_highlight(&self.content, "txt")
     }
+
+    pub fn content_escaped(&self) -> String {
+        self.content.replace("`", "\\`").replace("$", "\\$")
+    }
 }
 
 impl fmt::Display for Pasta {
diff --git a/templates/pasta.html b/templates/pasta.html
index adf52cb..587619c 100644
--- a/templates/pasta.html
+++ b/templates/pasta.html
@@ -33,7 +33,7 @@
 
 <script>
   const btn = document.getElementById("copy-icon")
-  const content = `{{ pasta.content }}`
+  const content = `{{ pasta.content_escaped() }}`
 
   btn.addEventListener("click", () => {
     navigator.clipboard.writeText(content)
@@ -70,6 +70,10 @@ code-line::before {
   position: relative;
 }
 
+.hidden {
+  display: none;
+}
+
 .copy-button {
   position: absolute;
   background: transparent;

From e8e21d561e063b7f51607757eeda08703be82258 Mon Sep 17 00:00:00 2001
From: Hayden <64056131+hay-kot@users.noreply.github.com>
Date: Sat, 22 Oct 2022 10:12:15 -0800
Subject: [PATCH 3/6] remove icon and change styles

---
 templates/pasta.html | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/templates/pasta.html b/templates/pasta.html
index 587619c..1198e30 100644
--- a/templates/pasta.html
+++ b/templates/pasta.html
@@ -18,9 +18,7 @@
 <br>
 <div class="code-container">
   <button id="copy-button" class="copy-button">
-    <svg id="copy-icon" style="width:24px;height:24px" viewBox="0 0 24 24">
-      <path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z" />
-    </svg>
+    Copy
   </button>
   <div style="clear: both;">
     {% if args.highlightsyntax %}
@@ -32,11 +30,15 @@
 </div>
 
 <script>
-  const btn = document.getElementById("copy-icon")
+  const btn = document.getElementById("copy-button")
   const content = `{{ pasta.content_escaped() }}`
 
   btn.addEventListener("click", () => {
     navigator.clipboard.writeText(content)
+    btn.innerHTML = "Copied"
+    setTimeout(() => {
+      btn.innerHTML = "Copy"
+    }, 1000)
   })
 
 </script>
@@ -79,8 +81,8 @@ code-line::before {
   background: transparent;
   top: 0;
   right: 0;
-  padding: 8px;
-  margin: 5px;
+  padding: 3px;
+  margin: 3px;
 }
 
 </style>

From e031ea0e9510bb3bd281d1c3b62fce7349aab3d4 Mon Sep 17 00:00:00 2001
From: Hayden <64056131+hay-kot@users.noreply.github.com>
Date: Sat, 22 Oct 2022 10:30:16 -0800
Subject: [PATCH 4/6] use a tag instead of button

---
 templates/pasta.html | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/templates/pasta.html b/templates/pasta.html
index 1198e30..540011e 100644
--- a/templates/pasta.html
+++ b/templates/pasta.html
@@ -17,9 +17,9 @@
 </div>
 <br>
 <div class="code-container">
-  <button id="copy-button" class="copy-button">
+  <a id="copy-button" class="copy-button">
     Copy
-  </button>
+  </a>
   <div style="clear: both;">
     {% if args.highlightsyntax %}
     <pre><code id="code">{{pasta.content_syntax_highlighted()}}</code></pre>
@@ -83,6 +83,7 @@ code-line::before {
   right: 0;
   padding: 3px;
   margin: 3px;
+  cursor:  pointer;
 }
 
 </style>

From fd8a66bcbcc9c4d992d35d60705694e3be0dfb26 Mon Sep 17 00:00:00 2001
From: Hayden <64056131+hay-kot@users.noreply.github.com>
Date: Sat, 22 Oct 2022 10:34:39 -0800
Subject: [PATCH 5/6] use proper semantics for a tag as button

---
 templates/pasta.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/templates/pasta.html b/templates/pasta.html
index 540011e..388c8a6 100644
--- a/templates/pasta.html
+++ b/templates/pasta.html
@@ -17,7 +17,7 @@
 </div>
 <br>
 <div class="code-container">
-  <a id="copy-button" class="copy-button">
+  <a href="#" role="button" id="copy-button" class="copy-button">
     Copy
   </a>
   <div style="clear: both;">

From b1ccb43855080bc21bfec2f96daf8f5a44973271 Mon Sep 17 00:00:00 2001
From: Hayden <64056131+hay-kot@users.noreply.github.com>
Date: Sat, 22 Oct 2022 10:37:43 -0800
Subject: [PATCH 6/6] remove hash

---
 templates/pasta.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/templates/pasta.html b/templates/pasta.html
index 388c8a6..6e069ac 100644
--- a/templates/pasta.html
+++ b/templates/pasta.html
@@ -17,7 +17,7 @@
 </div>
 <br>
 <div class="code-container">
-  <a href="#" role="button" id="copy-button" class="copy-button">
+  <a role="button" id="copy-button" class="copy-button">
     Copy
   </a>
   <div style="clear: both;">