Merge changes from upstream

README.md

@@ -4,21 +4,25 @@
 
 ### DEMO - https://hugo-terminal.now.sh/
 
+<a href="https://www.buymeacoffee.com/panr" target="_blank"><img src="https://res.cloudinary.com/panr/image/upload/v1579374705/buymeacoffee_y6yvov.svg" alt="Buy Me A Coffee" ></a>
+
 ---
 
-- [Features](#features)
-- [Built-in shortcodes](#built-in-shortcodes)
-- [Code highlighting](#code-highlighting)
-- [How to start](#how-to-start)
-- [How to configure](#how-to-configure)
-- [Post archetype](#post-archetype)
-- [Add-ons](#add-ons)
-- [How to run your site](#how-to-run-your-site)
-- [How to edit the theme](#how-to-edit-the-theme)
-- [How to contribute](#how-to-contribute)
-- [Terminal theme user?](#terminal-theme-user)
-- [Sponsoring](#sponsoring)
-- [Licence](#licence)
+- [Terminal](#terminal)
+    - [DEMO - https://hugo-terminal.now.sh/](#demo---httpshugo-terminalnowsh)
+  - [Features](#features)
+      - [Built-in shortcodes](#built-in-shortcodes)
+      - [Code highlighting](#code-highlighting)
+  - [How to start](#how-to-start)
+  - [How to configure](#how-to-configure)
+  - [Post archetype](#post-archetype)
+  - [Add-ons](#add-ons)
+  - [How to run your site](#how-to-run-your-site)
+  - [How to edit the theme](#how-to-edit-the-theme)
+  - [How to contribute](#how-to-contribute)
+  - [Terminal theme user?](#terminal-theme-user)
+  - [Sponsoring](#sponsoring)
+  - [License](#license)
 
 ## Features
 
@@ -31,8 +35,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 "▽"), **`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
 

layouts/_default/index.html

@@ -0,0 +1,65 @@
+{{ define "main" }}
+{{ with .Content }}
+  <div class="index-content">
+    {{ . }}
+  </div>
+{{ end }}
+<div class="posts">
+  {{ $isntDefault := not (or (eq (trim $.Site.Params.contentTypeName " ") "posts") (eq (trim $.Site.Params.contentTypeName " ") "")) }}
+  {{ $contentTypeName := cond $isntDefault (string $.Site.Params.contentTypeName) "posts" }}
+
+  {{ $PageContext := . }}
+  {{ if .IsHome }}
+    {{ $PageContext = .Site }}
+  {{ end }}
+  {{ $paginator := .Paginate (where $PageContext.RegularPages "Type" $contentTypeName) }}
+
+  {{ range $paginator.Pages }}
+  <div class="post on-list">
+    <h1 class="post-title">
+      <a href="{{ .Permalink }}">{{ .Title | markdownify }}</a></h1>
+    <div class="post-meta">
+      <span class="post-date">
+        {{ .Date.Format "2006-01-02" }}
+      </span>
+      {{ with .Params.Author }}<span class="post-author">::
+        {{ . }}</span>{{ end }}
+    </div>
+
+    {{ if .Params.tags }}
+    <span class="post-tags">
+      {{ range .Params.tags }}
+      #<a href="{{ (urlize (printf "tags/%s/" . )) | absLangURL }}">
+        {{- . -}}
+      </a>&nbsp;
+      {{ end }}
+    </span>
+    {{ end }}
+
+    {{ with .Params.Cover }}
+    <img src="{{ . | absURL }}" class="post-cover" />
+    {{ end }}
+
+    <div class="post-content">
+      {{ if .Params.showFullContent }}
+      {{ .Content | markdownify }}
+      {{ else if .Description }}
+      {{ .Description | markdownify }}
+      {{ else }}
+      {{ if .Truncated }}
+      {{ .Summary | markdownify }}
+      {{ end }}
+      {{ end }}
+    </div>
+
+    {{ if not .Params.showFullContent }}
+    <div>
+      <a class="read-more button"
+        href="{{.RelPermalink}}">{{ $.Site.Params.ReadMore }} →</a>
+    </div>
+    {{ end }}
+  </div>
+  {{ end }}
+  {{ partial "pagination.html" . }}
+</div>
+{{ end }}

layouts/_default/list.html

@@ -1,25 +1,11 @@
 {{ define "main" }}
 {{ with .Content }}
-  <div class="index-content">
-    {{ . }}
-  </div>
+<div class="index-content">
+  {{ . }}
+</div>
 {{ end }}
 <div class="posts">
-  {{ $isntDefault := not (or (eq (trim $.Site.Params.contentTypeName " ") "posts") (eq (trim $.Site.Params.contentTypeName " ") "")) }}
-  {{ $contentTypeName := cond $isntDefault (string $.Site.Params.contentTypeName) "posts" }}
-
-  {{ $PageContext := . }}
-  {{ if .IsHome }}
-    {{ $PageContext = .Site }}
-  {{ end }}
-  {{ $paginator := .Paginate (where $PageContext.RegularPages "Type" $contentTypeName) }}
-
-  {{ if len .Content }}
-  <h1>{{.Title}}</h1>
-  {{ .Content }}
-  {{ end }}
-
-  {{ range $paginator.Pages }}
+  {{ range .Pages }}
   <div class="post on-list">
     <h1 class="post-title">
       <a href="{{ .Permalink }}">{{ .Title | markdownify }}</a></h1>
@@ -59,8 +45,7 @@
 
     {{ if not .Params.showFullContent }}
     <div>
-      <a class="read-more button"
-        href="{{.RelPermalink}}">{{ $.Site.Params.ReadMore }} →</a>
+      <a class="read-more button" href="{{.RelPermalink}}">{{ $.Site.Params.ReadMore }} →</a>
     </div>
     {{ end }}
   </div>

layouts/_default/terms.html

@@ -0,0 +1,17 @@
+{{ define "main" }}
+  <div class="terms">
+    <h1>{{ .Title }}</h1>
+    <ul>
+      {{ $type := .Type }}
+      {{ range $key, $value := .Data.Terms.Alphabetical }}
+      {{ $name := .Name }}
+      {{ $count := .Count }}
+      {{ with $.Site.GetPage (printf "/%s/%s" $type $name) }}
+        <li>
+          <a class="terms-title" href="{{ .Permalink }}">{{ .Name }} ({{ $count }})</a>
+        </li>
+      {{ end }}
+      {{ end }}
+    </ul>
+  </div>
+{{ end }}

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 }}</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,5 @@
 
 @import 'prism';
 @import 'syntax';
+@import 'code';
+@import 'terms';

source/css/terms.css

@@ -0,0 +1,9 @@
+.terms {
+  h1 {
+    color: var(--accent);
+  }
+
+  h3 {
+    font-size: initial;
+  }
+}