From 4ad0a767890f3f05d3bd1ae9d0a259210fdf9ce2 Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Wed, 22 Sep 2021 18:25:46 +0800
Subject: [PATCH] Add label icon to code snippet header

---
 _includes/refactor-content.html | 12 ++++++++---
 _sass/addon/syntax.scss         | 37 +++++++++++++++++++++------------
 2 files changed, 33 insertions(+), 16 deletions(-)

diff --git a/_includes/refactor-content.html b/_includes/refactor-content.html
index 8525900..e8230c2 100644
--- a/_includes/refactor-content.html
+++ b/_includes/refactor-content.html
@@ -119,14 +119,20 @@
 
       {% if _left contains 'file="' %}
         {% assign _text = _left | split: 'file="' | last | split: '"' | first %}
+        {% assign _label_icon = 'far fa-file' %}
       {% else %}
         {% assign _text = _left | split: 'language-' | last | split: ' ' | first %}
+        {% assign _label_icon = 'fas fa-code small' %}
       {% endif %}
 
+      {% capture _label %}
+        <span text-data="{{ _text }}"><i class="fa-fw {{ _label_icon }}"></i></span>
+      {% endcapture %}
+
       {% assign _new_content = _new_content | append: _snippet
-          | append: '<div class="code-header" text-data="'
-          | append: _text
-          | append: '"><button aria-label="copy" data-original-title="'
+          | append: '<div class="code-header">'
+          | append: _label
+          | append: '<button aria-label="copy" data-original-title="'
           | append: site.data.locales[lang].post.button.copy_code.succeed
           | append: '"><i class="far fa-clone"></i></button></div>'
           | append: '<div class="highlight"><code>'
diff --git a/_sass/addon/syntax.scss b/_sass/addon/syntax.scss
index fcd2ca3..c898c8d 100644
--- a/_sass/addon/syntax.scss
+++ b/_sass/addon/syntax.scss
@@ -172,24 +172,33 @@ div {
   align-items: center;
   line-height: 1.85rem;
 
-  // text data
-  &::before {
-    content: attr(text-data);
+  // the label
+  span {
     color: var(--lang-badge-color);
-    padding-left: 1em;
+    padding-left: 0.6rem;
+    font-size: 0.85rem;
 
-    // language
-    font-size: 0.75rem;
-    font-weight: 600;
-    text-transform: uppercase;
+    &:after {
+      content: attr(text-data);
+      margin-left: 0.3rem;
+      font-weight: 600;
 
-    // file name
-    @at-root [file] #{&} {
-      font-size: 0.85rem;
-      text-transform: none;
+      // language
+      @at-root .highlighter-rouge:not([file]) #{&} {
+        font-size: 0.75rem;
+        text-transform: uppercase;
+      }
+
+    } // :after
+
+    @at-root [file] #{&} > i { // center the file icon
+      position: relative;
+      top: 1px;
     }
+
   }
 
+
   // clipboard
   button {
     border: 1px solid var(--code-header-bg);
@@ -208,7 +217,9 @@ div {
 
     &:not([timeout]):hover {
       background-color: gray;
-      color: white;
+      > i {
+        color: white;
+      }
     }
 
     &:focus {