From 28f1686c65f2c42e9837cbbb72b1e55148049f8e Mon Sep 17 00:00:00 2001
From: George Cushen <gcushen@users.noreply.github.com>
Date: Thu, 19 Oct 2023 01:31:33 +0100
Subject: [PATCH] feat: add Skills block

---
 .../assets/scss/wowchemy/widgets/_all.scss    |  1 +
 .../assets/scss/wowchemy/widgets/_skills.scss | 57 +++++++++++++++
 .../layouts/partials/blocks/skills.html       | 70 +++++++++++++++++++
 .../partials/functions/parse_block_v2.html    |  2 +-
 4 files changed, 129 insertions(+), 1 deletion(-)
 create mode 100644 modules/wowchemy/assets/scss/wowchemy/widgets/_skills.scss
 create mode 100644 modules/wowchemy/layouts/partials/blocks/skills.html

diff --git a/modules/wowchemy/assets/scss/wowchemy/widgets/_all.scss b/modules/wowchemy/assets/scss/wowchemy/widgets/_all.scss
index 4a7d08ed..47f5488b 100644
--- a/modules/wowchemy/assets/scss/wowchemy/widgets/_all.scss
+++ b/modules/wowchemy/assets/scss/wowchemy/widgets/_all.scss
@@ -6,3 +6,4 @@
 @import 'hero';
 @import 'people';
 @import 'portfolio';
+@import 'skills';
diff --git a/modules/wowchemy/assets/scss/wowchemy/widgets/_skills.scss b/modules/wowchemy/assets/scss/wowchemy/widgets/_skills.scss
new file mode 100644
index 00000000..1ce46d1b
--- /dev/null
+++ b/modules/wowchemy/assets/scss/wowchemy/widgets/_skills.scss
@@ -0,0 +1,57 @@
+/*************************************************
+ *  Wowchemy Blocks: Skills
+ **************************************************/
+
+.skill-group-title {
+  display: inline-block;
+  margin-bottom: 15px;
+  padding-bottom: 5px;
+  border-bottom: 2px solid #c7c7c7;
+  font-size: 1rem;
+  line-height: 30px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+}
+
+.skills-content {
+  margin-bottom: 15px;
+}
+
+.skills-name {
+  margin-bottom: 6px;
+  color: #888;
+  font-size: 0.8rem;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+}
+
+.skills-description {
+  margin-bottom: 6px;
+  font-size: 0.7rem;
+  text-transform: none;
+}
+
+.dark .skills-name {
+  color: #eee;
+}
+
+.skills-icon {
+  margin-right: 0.5em;
+}
+
+.skills-wrapper {
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  height: 10px;
+  border: 1px solid #a8e9e9;
+  border-radius: 10px;
+}
+
+.skills-percent {
+  position: absolute;
+  width: 60%;
+  height: 10px;
+  background-color: #3cb5b5;
+}
diff --git a/modules/wowchemy/layouts/partials/blocks/skills.html b/modules/wowchemy/layouts/partials/blocks/skills.html
new file mode 100644
index 00000000..8fd29ba1
--- /dev/null
+++ b/modules/wowchemy/layouts/partials/blocks/skills.html
@@ -0,0 +1,70 @@
+{{/* Wowchemy Blocks: Skills */}}
+{{/* Documentation: https://wowchemy.com/blocks/ */}}
+{{/* License: https://github.com/wowchemy/wowchemy-hugo-themes/blob/main/LICENSE.md */}}
+
+{{/* Initialise */}}
+{{ $page := .wcPage }}
+{{ $block := .wcBlock }}
+{{ $columns := $block.design.columns | default "1" }}
+{{ $author := $block.content.username | default "admin" }}
+
+{{ $person_page_path := (printf "/authors/%s" $author) }}
+{{ $person_page := site.GetPage $person_page_path }}
+{{ if not $person_page }}
+  {{ errorf "Could not find an author page at `%s`. Please check the value of `author` in your Skill block and create an associated author page if one does not already exist. See https://wowchemy.com/docs/page-builder/#about " $person_page_path }}
+{{end}}
+{{ $skills := $person_page.Params.skills }}
+
+<div class="col-12 {{if eq $columns "2"}}col-lg-8{{end}}">
+
+<div class="row">
+
+  {{ with $block.content.text }}
+  <div class="col-md-12 text-center mb-3">
+    {{ . | emojify | $page.RenderString }}
+  </div>
+  {{ end }}
+
+  {{ range $skills }}
+    {{ $color := .color | default "" }}
+    {{ $color_border := .color_border | default "" }}
+    <div class="col-12 col-md-6">
+      <div class="skill-group-title">
+        {{ .name | markdownify | emojify }}
+        {{ with .description }}<p>{{ . | markdownify | emojify }}</p>{{ end }}
+      </div>
+      {{ range .items }}
+        {{ $pack := or .icon_pack "fas" }}
+        {{ $pack_prefix := $pack }}
+        {{ if in (slice "fab" "fas" "far" "fal") $pack }}
+          {{ $pack_prefix = "fa" }}
+        {{ end }}
+
+    <div class="skills-content">
+
+      {{ with .icon }}
+        <span class="skills-icon">
+          {{- if eq $pack "emoji" -}}
+            {{- . | emojify -}}
+          {{- else if eq $pack "custom" -}}
+            {{- $svg_icon := resources.Get (printf "media/icons/%s.svg" .) -}}
+            {{- if $svg_icon -}}<img src="{{ $svg_icon.RelPermalink }}" alt="{{.}}" class="svg-icon svg-baseline" loading="lazy">{{- end -}}
+          {{- else -}}
+            <i class="{{ $pack }} {{ $pack_prefix }}-{{ . }}"></i>
+          {{- end -}}
+        </span>
+      {{ end }}
+
+      <span class="skills-name">
+        {{ .name | markdownify | emojify }}
+        {{ with .description }}<p class="skills-description">{{ . | markdownify | emojify }}</p>{{ end }}
+      </span>
+      <div class="skills-wrapper" {{with $color_border}}{{ (printf "style=\"border-color: %s\"" .) | safeHTMLAttr }}{{end}}>
+        <div class="skills-percent" style="width: {{ (printf "%s" (cast.ToString (.percent | default 100))) | safeCSS }}%; {{with $color}}{{ (printf "background-color: %s" .) | safeCSS }}{{end}}"></div>
+      </div>
+    </div>
+  {{ end }}
+</div>
+{{ end }}
+</div>
+</div>
diff --git a/modules/wowchemy/layouts/partials/functions/parse_block_v2.html b/modules/wowchemy/layouts/partials/functions/parse_block_v2.html
index 310f7dfc..a25b8b98 100644
--- a/modules/wowchemy/layouts/partials/functions/parse_block_v2.html
+++ b/modules/wowchemy/layouts/partials/functions/parse_block_v2.html
@@ -95,7 +95,7 @@
 {{ $extra_attributes := "" }}
 {{ $use_container := true }}
 {{ $columns := $block.design.columns | default "1" }}
-{{ $use_cols := in (slice "collection" "experience" "accomplishments" "contact" "markdown" "tag_cloud" "portfolio") $block_type }}
+{{ $use_cols := in (slice "collection" "experience" "accomplishments" "contact" "markdown" "tag_cloud" "portfolio" "skills") $block_type }}
 
 {{/* Special case: Slider widget. */}}
 {{ if in (slice "slider") $block_type }}