From 70008eb592558f1c3b04814de4b09ee0c5ed8a36 Mon Sep 17 00:00:00 2001
From: Maik de Kruif <maik@maik.dev>
Date: Fri, 4 Dec 2020 11:14:51 +0100
Subject: [PATCH] Add collapsable codeblock

---
 themes/maik-blog/assets/scss/_code.scss       | 120 ++++++++++++++++++
 themes/maik-blog/assets/scss/_main.scss       |  17 ++-
 themes/maik-blog/assets/scss/_normalize.scss  |  16 ---
 themes/maik-blog/assets/scss/main.scss        |   3 +-
 themes/maik-blog/layouts/shortcodes/code.html |   2 +-
 5 files changed, 139 insertions(+), 19 deletions(-)
 create mode 100644 themes/maik-blog/assets/scss/_code.scss

diff --git a/themes/maik-blog/assets/scss/_code.scss b/themes/maik-blog/assets/scss/_code.scss
new file mode 100644
index 0000000..5aaa407
--- /dev/null
+++ b/themes/maik-blog/assets/scss/_code.scss
@@ -0,0 +1,120 @@
+.collapsable-code {
+    position: relative;
+    width: 100%;
+    margin: 40px 0;
+
+    input[type="checkbox"] {
+        position: absolute;
+        visibility: hidden;
+    }
+
+    .highlight,
+    .code-toolbar .highlight {
+        max-height: 80vh;
+        overflow: auto;
+
+        transition: max-height 0.15s ease;
+
+        border-bottom-left-radius: 10px;
+        border-bottom-right-radius: 10px;
+    }
+
+    input[type="checkbox"]:checked {
+
+        ~.highlight,
+        ~.code-toolbar .highlight {
+            max-height: 0;
+
+            padding: 0;
+            border-top: none;
+            overflow: hidden;
+        }
+
+        ~.code-toolbar {
+            padding: 0;
+            border-top: none;
+
+            .toolbar {
+                display: none;
+            }
+        }
+
+        ~label {
+            border-radius: 10px;
+        }
+
+        ~label .collapsable-code__toggle:after {
+            content: attr(data-label-expand);
+        }
+    }
+
+    label {
+        position: relative;
+        display: flex;
+        justify-content: space-between;
+        background: $light-background-secondary;
+        padding: 10px;
+        border-top-left-radius: 10px;
+        border-top-right-radius: 10px;
+        min-width: 30px;
+        min-height: 30px;
+        margin: 0;
+        cursor: pointer;
+
+        .dark-theme & {
+            background: $dark-background-secondary;
+        }
+    }
+
+    &__title {
+        flex: 1;
+        color: $light-color;
+        padding: 3px 10px;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+        font-weight: 600;
+
+        .dark-theme & {
+            color: $dark-color;
+        }
+    }
+
+    &__language {
+        background: $light-background;
+        color: $light-color;
+        border-radius: 10px;
+        padding: 3px 10px;
+        font-weight: 600;
+
+        .dark-theme & {
+            background: $dark-background;
+            color: $dark-color;
+        }
+    }
+
+    &__toggle {
+        color: $light-color;
+        font-size: 16px;
+        padding: 3px 10px;
+        font-weight: 700;
+
+        &:after {
+            content: attr(data-label-collapse);
+        }
+
+        .dark-theme & {
+            color: $dark-color;
+        }
+    }
+
+    pre {
+        margin-top: 0;
+        margin-bottom: 0;
+        border-radius: 0;
+    }
+
+    .code-toolbar {
+        margin: 0;
+    }
+}
\ No newline at end of file
diff --git a/themes/maik-blog/assets/scss/_main.scss b/themes/maik-blog/assets/scss/_main.scss
index 0b97dea..0a9a89c 100644
--- a/themes/maik-blog/assets/scss/_main.scss
+++ b/themes/maik-blog/assets/scss/_main.scss
@@ -1,3 +1,18 @@
+/* Webkit Scrollbar Customize */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+  background: #212020;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #888;
+
+  &:hover {
+    background: #dcdcdc;
+  }
+}
+
 html {
   box-sizing: border-box;
   line-height: 1.6;
@@ -191,7 +206,7 @@ code {
 }
 
 pre {
-  background: #212020;
+  // background: #212020;
   padding: 10px 10px 10px 20px;
   border-radius: 8px;
   font-size: .95rem;
diff --git a/themes/maik-blog/assets/scss/_normalize.scss b/themes/maik-blog/assets/scss/_normalize.scss
index 10dfe91..420cc95 100644
--- a/themes/maik-blog/assets/scss/_normalize.scss
+++ b/themes/maik-blog/assets/scss/_normalize.scss
@@ -7,22 +7,6 @@
  * 1. Correct the line height in all browsers.
  * 2. Prevent adjustments of font size after orientation changes in iOS.
  */
-
-/* Webkit Scrollbar Customize */
-::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-  background: #212020;
-}
-
-::-webkit-scrollbar-thumb {
-  background: #888;
-
-  &:hover {
-    background: #dcdcdc;
-  }
-}
-
 html {
   line-height: 1.15; // 1
   -webkit-text-size-adjust: 100%; // 2
diff --git a/themes/maik-blog/assets/scss/main.scss b/themes/maik-blog/assets/scss/main.scss
index 5d66276..7d3ef04 100644
--- a/themes/maik-blog/assets/scss/main.scss
+++ b/themes/maik-blog/assets/scss/main.scss
@@ -13,4 +13,5 @@
 @import "list";
 @import "single";
 @import "footer";
-@import "sharing-buttons";
\ No newline at end of file
+@import "sharing-buttons";
+@import "code";
\ No newline at end of file
diff --git a/themes/maik-blog/layouts/shortcodes/code.html b/themes/maik-blog/layouts/shortcodes/code.html
index 2e68552..8682d8a 100644
--- a/themes/maik-blog/layouts/shortcodes/code.html
+++ b/themes/maik-blog/layouts/shortcodes/code.html
@@ -10,7 +10,7 @@
     <span class="collapsable-code__toggle" data-label-expand="{{ .Get "expand" | default "△" }}"
       data-label-collapse="{{ .Get "collapse" | default "▽" }}"></span>
   </label>
-  <pre {{ if .Get "language" }}class="language-{{ .Get "language" }}" {{ end }}><code>{{ .Inner | string }}</code></pre>
+  {{ .Inner | markdownify }}
 </div>
 {{ else }}
 {{ errorf "If you want to use the \"collapsable code\" shortcode, you need to pass a mandatory \"language\" param. The issue occured in %q (%q)" .Page.File .Page.Permalink }}