From b7de69863af39f8dc0c66d1ce7ec46e16d6d840b Mon Sep 17 00:00:00 2001
From: Robert Kaussow <mail@thegeeklab.de>
Date: Wed, 31 Aug 2022 10:15:13 +0200
Subject: [PATCH] feat: add progress shortcode (#305)

---
 exampleSite/content/about/index.md            | 13 +++++++
 .../content/posts/advanced/shortcodes.md      | 36 ++++++++++++++++---
 layouts/shortcodes/hint.html                  |  6 ++--
 layouts/shortcodes/progress.html              | 23 ++++++++++++
 src/sass/_shortcodes.scss                     | 35 ++++++++++++++++++
 5 files changed, 105 insertions(+), 8 deletions(-)
 create mode 100644 layouts/shortcodes/progress.html

diff --git a/exampleSite/content/about/index.md b/exampleSite/content/about/index.md
index db178f7..027aa6f 100644
--- a/exampleSite/content/about/index.md
+++ b/exampleSite/content/about/index.md
@@ -50,6 +50,19 @@ Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclima
 
 ---
 
+## Skills
+
+<!-- prettier-ignore-start -->
+<!-- spellchecker-disable -->
+{{% progress title=Hacking value=95 icon=gblog_search %}}
+{{% progress title=Cyber-Things value=80 icon=gblog_cloud_off %}}
+{{% progress title=Coding value=65 icon=gblog_code %}}
+{{% progress title=Eating value=85 icon=gblog_heart %}}
+<!-- spellchecker-enable -->
+<!-- prettier-ignore-end -->
+
+---
+
 ## Contact
 
 <!-- prettier-ignore-start -->
diff --git a/exampleSite/content/posts/advanced/shortcodes.md b/exampleSite/content/posts/advanced/shortcodes.md
index 510a52f..25924c4 100644
--- a/exampleSite/content/posts/advanced/shortcodes.md
+++ b/exampleSite/content/posts/advanced/shortcodes.md
@@ -170,11 +170,11 @@ Hint shortcode can be used as hint/alerts/notification block.
 
 ### Attributes
 
-| Name             | Description                                                                            | default   |
-| ---------------- | -------------------------------------------------------------------------------------- | --------- |
-| type             | hint type                                                                              | note      |
-| icon (optional)  | custom icon to use,need to be an icon from an [SVG sprite](/posts/features/icon-sets/) | undefined |
-| title (optional) | hint title                                                                             | undefined |
+| Name             | Description                                                                             | default   |
+| ---------------- | --------------------------------------------------------------------------------------- | --------- |
+| type             | hint type                                                                               | note      |
+| icon (optional)  | custom icon to use, need to be an icon from an [SVG sprite](/posts/features/icon-sets/) | undefined |
+| title (optional) | hint title                                                                              | undefined |
 
 ### Usage
 
@@ -455,3 +455,29 @@ f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi
 <!-- spellchecker-enable -->
 
 Text continues here.
+
+## Progress
+
+### Attributes
+
+| Name             | Description                                                                      | default   |
+| ---------------- | -------------------------------------------------------------------------------- | --------- |
+| value            | progress value                                                                   | 0         |
+| icon (optional)  | icon to use, need to be an icon from an [SVG sprite](/posts/features/icon-sets/) | undefined |
+| title (optional) | progress title                                                                   | undefined |
+
+### Usage
+
+<!-- prettier-ignore-start -->
+```tpl
+{{</* progress title=Eating value=65 icon=gblog_heart */>}}
+```
+<!-- prettier-ignore-end -->
+
+### Example
+
+<!-- prettier-ignore-start -->
+<!-- spellchecker-disable -->
+{{< progress title=Eating value=65 icon=gblog_heart >}}
+<!-- spellchecker-enable -->
+<!-- prettier-ignore-end -->
diff --git a/layouts/shortcodes/hint.html b/layouts/shortcodes/hint.html
index 2c8195f..f0cd4dc 100644
--- a/layouts/shortcodes/hint.html
+++ b/layouts/shortcodes/hint.html
@@ -1,6 +1,6 @@
-{{ $type := default "note" (.Get "type") }}
-{{ $icon := .Get "icon" }}
-{{ $title := default ($type | title) (.Get "title") }}
+{{- $type := default "note" (.Get "type") -}}
+{{- $icon := .Get "icon" -}}
+{{- $title := default ($type | title) (.Get "title") }}
 
 
 <blockquote class="gblog-hint {{ $type | lower }}">
diff --git a/layouts/shortcodes/progress.html b/layouts/shortcodes/progress.html
new file mode 100644
index 0000000..d9da6d4
--- /dev/null
+++ b/layouts/shortcodes/progress.html
@@ -0,0 +1,23 @@
+{{- $value := default 0 (.Get "value") -}}
+{{- $title := .Get "title" -}}
+{{- $icon := .Get "icon" -}}
+
+
+<div class="gblog-progress">
+  <div class="gblog-progress__label flex justify-between">
+    <div class="gblog-progress__label--name flex align-center">
+      {{ with $icon -}}
+        <svg class="gblog-icon {{ . }}"><use xlink:href="#{{ . }}"></use></svg>
+      {{- end }}
+      {{ with $title }}<span>{{ . }}</span>{{ end }}
+    </div>
+    <div>{{ $value }}%</div>
+  </div>
+  <div class="gblog-progress__wrap">
+    <div
+      class="gblog-progress__bar"
+      data-percent="{{ $value }}"
+      style="width: {{ $value }}%;"
+    ></div>
+  </div>
+</div>
diff --git a/src/sass/_shortcodes.scss b/src/sass/_shortcodes.scss
index e2811bd..ab94157 100644
--- a/src/sass/_shortcodes.scss
+++ b/src/sass/_shortcodes.scss
@@ -245,3 +245,38 @@
     padding: $padding-8;
   }
 }
+
+.gblog-progress {
+  margin-bottom: $padding-16;
+
+  &__label {
+    padding: $padding-4 0;
+
+    &--name {
+      font-weight: bold;
+    }
+  }
+
+  &__wrap {
+    background-color: var(--accent-color-lite);
+    border-radius: 1em;
+    box-shadow: inset 0 0 0 $border-1 var(--accent-color);
+  }
+
+  &__bar {
+    height: 1em;
+    border-radius: 1em;
+    background-image: linear-gradient(
+      -45deg,
+      rgba(255, 255, 255, 0.125) 25%,
+      transparent 25%,
+      transparent 50%,
+      rgba(255, 255, 255, 0.125) 50%,
+      rgba(255, 255, 255, 0.125) 75%,
+      transparent 75%,
+      transparent
+    );
+    background-size: 2.5em 2.5em;
+    background-color: $main-color !important;
+  }
+}