From c9eb6957d3812ee4d95cd936a3262a23caefc5e0 Mon Sep 17 00:00:00 2001
From: Coding <dev.tandpfun@gmail.com>
Date: Fri, 3 Sep 2021 18:12:56 -0700
Subject: [PATCH 1/2] Add floating copy button to code blocks

---
 components/Copy.tsx     |  4 ++--
 components/mdx/Code.tsx | 18 +++++++++---------
 stylesheets/styles.css  |  8 ++++++++
 3 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/components/Copy.tsx b/components/Copy.tsx
index c0611d72..b04b4dc1 100644
--- a/components/Copy.tsx
+++ b/components/Copy.tsx
@@ -6,7 +6,7 @@ interface CopyButtonProps {
   children: React.ReactNode;
 }
 
-export default function CopyButton ({ text, children }: CopyButtonProps) {
+export default function CopyButton({ text, children }: CopyButtonProps) {
   const { copy, status } = useClipboard(text);
   let value = children;
 
@@ -25,4 +25,4 @@ export default function CopyButton ({ text, children }: CopyButtonProps) {
       {value}
     </button>
   );
-}
\ No newline at end of file
+}
diff --git a/components/mdx/Code.tsx b/components/mdx/Code.tsx
index 9abd0a8e..3346a612 100644
--- a/components/mdx/Code.tsx
+++ b/components/mdx/Code.tsx
@@ -74,7 +74,7 @@ export default function Code({
     breakWords = true;
   }
 
-  const hasCopy = props.copy || language === "copy";
+  const hasCopy = /*props.copy || language === "copy"*/ true;
   const isTerminal = props.terminal || language === "terminal";
   const hasLines = file != null || props.lines;
 
@@ -83,7 +83,7 @@ export default function Code({
   );
 
   return (
-    <div className="code-block relative my-6 font-mono rounded-md">
+    <div className="code-block relative my-3 font-mono rounded-md">
       <InfoBar fileName={file} language={language} />
       <Highlight {...defaultProps} code={children} language={language}>
         {({
@@ -99,13 +99,6 @@ export default function Code({
               blockClassName
             )}
           >
-            {(props.copy || language === "copy") && (
-              <div className="copy-button">
-                <CopyButton text={children}>
-                  <CopyIcon />
-                </CopyButton>
-              </div>
-            )}
             <code className="p-4 rounded-md">
               {cleanTokens(tokens).map((line, i) => {
                 const lineClass = {};
@@ -183,6 +176,13 @@ export default function Code({
                   </div>
                 );
               })}
+              {hasCopy && (
+                <div className="copy-button absolute bottom-1 right-2 hidden p-3 transition md:block">
+                  <CopyButton text={children}>
+                    <CopyIcon class="w-5" />
+                  </CopyButton>
+                </div>
+              )}
             </code>
           </pre>
         )}
diff --git a/stylesheets/styles.css b/stylesheets/styles.css
index 2598d733..a39385f3 100644
--- a/stylesheets/styles.css
+++ b/stylesheets/styles.css
@@ -1,3 +1,11 @@
 abbr[title].no-underline {
   text-decoration: none;
 }
+
+code .copy-button {
+  opacity: 0;
+}
+
+code:hover .copy-button {
+  opacity: 100;
+}

From ff428ef738a540461107258f166484642ff33d9a Mon Sep 17 00:00:00 2001
From: Coding <dev.tandpfun@gmail.com>
Date: Sat, 4 Sep 2021 09:33:05 -0700
Subject: [PATCH 2/2] Prevent copy from moving on scroll, class -> className

---
 components/mdx/Code.tsx | 14 +++++++-------
 stylesheets/styles.css  |  4 ++--
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/components/mdx/Code.tsx b/components/mdx/Code.tsx
index 3346a612..5c38e2ec 100644
--- a/components/mdx/Code.tsx
+++ b/components/mdx/Code.tsx
@@ -176,17 +176,17 @@ export default function Code({
                   </div>
                 );
               })}
-              {hasCopy && (
-                <div className="copy-button absolute bottom-1 right-2 hidden p-3 transition md:block">
-                  <CopyButton text={children}>
-                    <CopyIcon class="w-5" />
-                  </CopyButton>
-                </div>
-              )}
             </code>
           </pre>
         )}
       </Highlight>
+      {hasCopy && (
+        <div className="copy-button absolute bottom-4 right-2 hidden p-3 transition md:block">
+          <CopyButton text={children}>
+            <CopyIcon className="w-5" />
+          </CopyButton>
+        </div>
+      )}
     </div>
   );
 }
diff --git a/stylesheets/styles.css b/stylesheets/styles.css
index a39385f3..f3a2cd95 100644
--- a/stylesheets/styles.css
+++ b/stylesheets/styles.css
@@ -2,10 +2,10 @@ abbr[title].no-underline {
   text-decoration: none;
 }
 
-code .copy-button {
+.code-block .copy-button {
   opacity: 0;
 }
 
-code:hover .copy-button {
+.code-block:hover .copy-button {
   opacity: 100;
 }