feat: add progress shortcode (#305)

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 -->

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 -->

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

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>

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;
+  }
+}