From 466580b57b53f33aba2e52a57a4b1566d0d194ca Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Le Duigou <jb.leduigou@gmail.com>
Date: Mon, 17 May 2021 18:50:37 +0200
Subject: [PATCH] Support adding verifiable `Certification` badges in about
 section (#307)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Fix link to email address

See https://github.com/hossainemruz/toha/issues/7

* ✨ provide ability to show certification badges in about section

Signed-off-by: jbleduigou <jb.leduigou@gmail.com>

* Merge certifications and sofkSkills under "badges" generic title

Signed-off-by: hossainemruz <hossainemruz@gmail.com>

Co-authored-by: Emruz Hossain <hossainemruz@gmail.com>
---
 layouts/partials/misc/badge.html       | 35 ++++++++++++++++++++++++++
 layouts/partials/misc/soft-skills.html |  1 +
 layouts/partials/sections/about.html   |  5 ++++
 3 files changed, 41 insertions(+)
 create mode 100644 layouts/partials/misc/badge.html

diff --git a/layouts/partials/misc/badge.html b/layouts/partials/misc/badge.html
new file mode 100644
index 0000000..2a46299
--- /dev/null
+++ b/layouts/partials/misc/badge.html
@@ -0,0 +1,35 @@
+<div class="col-6 col-lg-4 p-2">
+{{ if eq .type "certification" }}
+    {{/* Verifiable certificate badge from https://www.credly.com */}}
+    <div class="">
+      <a href="{{ .url }}" target="_blank" >
+       <img src="{{ .badge }}" alt="{{ .name }}" />
+      </a>
+    </div>
+{{ else if eq .type "circular-bar" }}
+    {{/* Circular bar indicating the level of expertise in a skill */}}
+    {{ $predefinedColor:= true}}
+    {{ if hasPrefix .color "#"}}
+        {{ $predefinedColor = false }}
+    {{ end }}
+    <div class="circular-progress {{if $predefinedColor}}{{ .color }}{{end}}">
+    <span class="circular-progress-left">
+        <span
+        class="circular-progress-bar circular-progress-percentage-{{ .percentage }}"
+        {{ if not $predefinedColor }}
+            style="border-color: {{.color}};"
+        {{ end }}
+        ></span>
+    </span>
+    <span class="circular-progress-right">
+        <span
+        class="circular-progress-bar"
+        {{ if not $predefinedColor }}
+            style="border-color: {{.color}};"
+        {{ end }}
+        ></span>
+    </span>
+    <div class="circular-progress-value">{{ .name }}</div>
+    </div>
+{{ end }}
+</div>
diff --git a/layouts/partials/misc/soft-skills.html b/layouts/partials/misc/soft-skills.html
index cbdc0ae..1517564 100644
--- a/layouts/partials/misc/soft-skills.html
+++ b/layouts/partials/misc/soft-skills.html
@@ -1,3 +1,4 @@
+{{/* TODO: Delete this file in version v4+ */}}
 <div class="col-6 col-lg-4 p-2">
   {{ $predefinedColor:= true}}
   {{ if hasPrefix .color "#"}}
diff --git a/layouts/partials/sections/about.html b/layouts/partials/sections/about.html
index 2999b99..3bb02d6 100644
--- a/layouts/partials/sections/about.html
+++ b/layouts/partials/sections/about.html
@@ -48,6 +48,11 @@
     <!-- soft skills circular-progressbar -->
     <div class="col-sm-6 pt-5 pl-md-4 pl-sm-3 pt-sm-0">
       <div class="row">
+        {{ range .badges }}
+          {{ partial "misc/badge.html" . }}
+        {{ end }}
+        <!-- TODO: Remove this part in version v4+ -->
+        <!-- Keep backward compatibility with old configuration -->
         {{ range .softSkills }}
           {{ partial "misc/soft-skills.html" . }}
         {{ end }}