From 409741f42c491cae076998da7fda0ebf87d69802 Mon Sep 17 00:00:00 2001
From: panr <radoslaw.koziel@gmail.com>
Date: Fri, 19 Jun 2020 23:49:06 +0200
Subject: [PATCH] Add collapsable code shortcode

---
 README.md                    |  25 +++++++++
 layouts/shortcodes/code.html |  15 +++++
 source/css/code.css          | 105 +++++++++++++++++++++++++++++++++++
 source/css/prism.css         |   2 +-
 source/css/style.css         |   1 +
 5 files changed, 147 insertions(+), 1 deletion(-)
 create mode 100644 layouts/shortcodes/code.html
 create mode 100644 source/css/code.css

diff --git a/README.md b/README.md
index f844c87..28323a5 100644
--- a/README.md
+++ b/README.md
@@ -43,6 +43,31 @@
 - **`imgproc`** Hugo shortcode for image processing, plus additional **`position`** param [ left | center | right ] (optional).
   - eg: `{{< imgproc "img/hello.png" Resize "250x" center />}}`
   - More detailed info on processing commands at [https://gohugo.io/content-management/image-processing/](https://gohugo.io/content-management/image-processing/)
+- **`code`** (prop required: **`language`**; props optional: **`title`**, **`id`**, **`expand`** (default "△"), **`collapse`** (default "▽"), **`isCollapsed`**)
+  - eg:
+  ```go
+  {{< code language="css" title="Really cool snippet" id="1" expand="Show" collapse="Hide" isCollapsed="true" >}}
+  pre {
+    background: #1a1a1d;
+    padding: 20px;
+    border-radius: 8px;
+    font-size: 1rem;
+    overflow: auto;
+
+    @media (--phone) {
+      white-space: pre-wrap;
+      word-wrap: break-word;
+    }
+
+    code {
+      background: none !important;
+      color: #ccc;
+      padding: 0;
+      font-size: inherit;
+    }
+  }
+  {{< /code >}}
+  ```
 
 #### Code highlighting
 
diff --git a/layouts/shortcodes/code.html b/layouts/shortcodes/code.html
new file mode 100644
index 0000000..8bab825
--- /dev/null
+++ b/layouts/shortcodes/code.html
@@ -0,0 +1,15 @@
+{{ $id := delimit (shuffle (seq 1 9)) "" }}
+
+{{ if .Get "language" }}
+  <div class="collapsable-code">
+    <input id="{{ .Get "id" | default $id }}" type="checkbox" {{ if ( eq ( .Get "isCollapsed" ) "true" ) -}} checked {{- end }} />
+    <label for="{{ .Get "id" | default $id }}">
+      <span class="collapsable-code__language">{{ .Get "language" }}</span>
+      {{ if .Get "title" }}<span class="collapsable-code__title">{{ .Get "title" | markdownify }}</span>{{ end }}
+      <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>
+  </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 }}
+{{ end }}
diff --git a/source/css/code.css b/source/css/code.css
new file mode 100644
index 0000000..c144a50
--- /dev/null
+++ b/source/css/code.css
@@ -0,0 +1,105 @@
+.collapsable-code {
+  position: relative;
+  width: 100%;
+  margin: 40px 0;
+
+  input[type="checkbox"] {
+    position: absolute;
+    visibility: hidden;
+  }
+
+  input[type="checkbox"]:checked {
+    ~ pre,
+    ~ .code-toolbar pre {
+      height: 0;
+      padding: 0;
+      border-top: none;
+    }
+
+    ~ .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: hsla(0, 0%, 10%, 10%);
+    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: hsla(0, 0%, 10%, 40%);
+    }
+  }
+
+  &__title {
+    flex: 1;
+    color: var(--accent);
+    padding: 3px 10px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+
+  &__language {
+    background: hsl(0, 0%, 100%);
+    color: var(--accent);
+    border-radius: 10px;
+    text-transform: uppercase;
+    padding: 3px 10px;
+
+    .dark-theme & {
+      background: hsla(0, 0%, 100%, 10%);
+    }
+  }
+
+  &__toggle {
+    color: var(--accent);
+    font-size: 16px;
+    padding: 3px 10px;
+
+    &:after {
+      content: attr(data-label-collapse);
+    }
+  }
+
+  pre {
+    margin-top: 0;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+
+    &::first-line {
+      line-height: 0;
+    }
+  }
+
+  code {
+    &::first-line {
+      line-height: 0;
+    }
+  }
+
+  .code-toolbar {
+    margin: 0;
+  }
+}
diff --git a/source/css/prism.css b/source/css/prism.css
index ae7df01..b0eb3a4 100644
--- a/source/css/prism.css
+++ b/source/css/prism.css
@@ -15,7 +15,7 @@ pre[class*="language-"] {
 	word-spacing: normal;
 	word-break: normal;
 	word-wrap: normal;
-	line-height: 1.5;
+	/* line-height: 1.5; */
 
 	-moz-tab-size: 4;
 	-o-tab-size: 4;
diff --git a/source/css/style.css b/source/css/style.css
index 29e50c5..5032e62 100644
--- a/source/css/style.css
+++ b/source/css/style.css
@@ -14,3 +14,4 @@
 @import 'archive';
 
 @import 'prism';
+@import 'code';