Add a collapsable code shortcode

README.md

@@ -31,8 +31,33 @@
 
 - **`image`** (prop required: **`src`**; props optional: **`alt`**, **`position`** (**left** is default | center | right), **`style`**)
   - eg: `{{< image src="/img/hello.png" alt="Hello Friend" position="center" style="border-radius: 8px;" >}}`
-- **`figure`** (same as `image`, plus few optional props: **`caption`**, **`captionPosition`** (left | **center** is default | right), **`captionStyle`**
+- **`figure`** (same as `image`, plus few optional props: **`caption`**, **`captionPosition`** (left | **center** is default | right), **`captionStyle`**)
   - eg: `{{< figure src="/img/hello.png" alt="Hello Friend" position="center" style="border-radius: 8px;" caption="Hello Friend!" captionPosition="right" captionStyle="color: red;" >}}`
+- **`code`** (prop required: **`language`**; props optional: **`title`**, **`id`**, **`expand`** (default "△"), **`collapse`** (default "▽"))
+  - eg:
+  ```css
+  {{< code language="CSS" title="Really cool snippet" id="1" expand="Show" collapse="Hide" >}}
+  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
 

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" />
+    <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 }}</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 }}

source/css/code.css

@@ -0,0 +1,84 @@
+.collapsable-code {
+  --border-color: color-mod(var(--accent) blend(#999 90%));
+
+  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 .collapsable-code__toggle:after {
+      content: attr(data-label-expand);
+    }
+  }
+
+  label {
+    position: relative;
+    display: flex;
+    justify-content: space-between;
+    min-width: 30px;
+    min-height: 30px;
+    margin: 0;
+    border-bottom: 1px solid var(--border-color);
+    cursor: pointer;
+  }
+
+  &__title {
+    flex: 1;
+    color: var(--accent);
+    padding: 3px 10px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+
+  &__language {
+    color: var(--accent);
+    border: 1px solid var(--border-color);
+    border-bottom: none;
+    text-transform: uppercase;
+    padding: 3px 10px;
+  }
+
+  &__toggle {
+    color: var(--accent);
+    font-size: 16px;
+    padding: 3px 10px;
+
+    &:after {
+      content: attr(data-label-collapse);
+    }
+  }
+
+  pre {
+    margin-top: 0;
+
+    &::first-line {
+      line-height: 0;
+    }
+  }
+
+  .code-toolbar {
+    margin: 0;
+  }
+}

source/css/style.css

@@ -12,3 +12,4 @@
 
 @import 'prism';
 @import 'syntax';
+@import 'code';