From 2537283beba2f25d8901317e12d85f42d2768b90 Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Thu, 9 Sep 2021 22:09:07 +0800
Subject: [PATCH] Add clipboard button to code block

---
 _includes/refactor-content.html |  4 ++--
 _sass/addon/syntax.scss         | 33 ++++++++++++++++++++++++++++++++-
 2 files changed, 34 insertions(+), 3 deletions(-)

diff --git a/_includes/refactor-content.html b/_includes/refactor-content.html
index cd04c11..910c032 100644
--- a/_includes/refactor-content.html
+++ b/_includes/refactor-content.html
@@ -102,7 +102,7 @@
 
 {% endif %}
 
-<!-- Add lang-badge for code snippets -->
+<!-- Add header for code snippets -->
 
 {% if _content contains '<div class="language-' %}
   {% assign _code_splits = _content | split: '<div class="language-' %}
@@ -116,7 +116,7 @@
       {% capture _tag_head %}<div class="language-{% endcapture %}
       {% assign _replacement = '-rouge"><div class="code-header" data-lang="'
           | append: _lang
-          | append: '"></div><div class="highlight">'
+          | append: '"><button><i class="fa-fw far fa-clipboard"></i></button></div><div class="highlight">'
       %}
       {% capture _tag_tail %}{{ _snippet | replace: '-rouge"><div class="highlight">', _replacement }}{% endcapture %}
       {% assign _new_content = _new_content | append: _tag_head | append: _tag_tail %}
diff --git a/_sass/addon/syntax.scss b/_sass/addon/syntax.scss
index 6cc8d08..eda2e50 100644
--- a/_sass/addon/syntax.scss
+++ b/_sass/addon/syntax.scss
@@ -166,6 +166,10 @@ div {
   background: var(--code-header-bg);
   border-top-left-radius: $code-radius;
   border-top-right-radius: $code-radius;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  line-height: 1.85rem;
 
   // language badge
   &::before {
@@ -176,6 +180,29 @@ div {
     text-transform: uppercase;
     padding-left: 1em;
   }
+
+  // clipboard
+  button {
+    border: 0;
+    background-color: inherit;
+    border-top-right-radius: $code-radius;
+    color: var(--highlight-lineno-color);
+
+    &:hover {
+      background-color: gray;
+      color: white;
+    }
+
+    &:focus {
+      outline: none;
+    }
+
+    i {
+      font-size: 85%;
+    }
+
+  }
+
 }
 
 @media all and (max-width: 576px) {
@@ -187,7 +214,11 @@ div {
 
       .code-header {
         border-radius: 0;
-        padding: 0 0.4rem;
+        padding-left: 0.4rem;
+
+        button {
+          border-top-right-radius: 0;
+        }
       }
     }
   }