feat: add option to set custom label on progress shortcode (#412)

thegeeklab · Jul 6, 2023 · a611955 · a611955
1 parent 9be0268
commit a611955
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 3 deletions.
diff --git a/exampleSite/content/posts/advanced/shortcodes.md b/exampleSite/content/posts/advanced/shortcodes.md
@@ -450,7 +450,8 @@ Text continues here.
 
 | Name             | Description                                                                      | default   |
 | ---------------- | -------------------------------------------------------------------------------- | --------- |
-| value            | progress value                                                                   | 0         |
+| value            | progress value (0-100)                                                           | 0         |
+| label            | value to display                                                                 | value     |
 | icon (optional)  | icon to use, need to be an icon from an [SVG sprite](/posts/features/icon-sets/) | undefined |
 | title (optional) | progress title                                                                   | undefined |
 

diff --git a/layouts/shortcodes/progress.html b/layouts/shortcodes/progress.html
@@ -1,4 +1,5 @@
 {{- $value := default 0 (.Get "value") -}}
+{{- $label := default (printf "%v %%" $value) (.Get "label") -}}
 {{- $title := .Get "title" -}}
 {{- $icon := .Get "icon" -}}
 
@@ -11,13 +12,13 @@
       {{- end }}
       {{ with $title }}<span>{{ . }}</span>{{ end }}
     </div>
-    <div>{{ $value }}%</div>
+    <div>{{ $label }}</div>
   </div>
   <div class="gblog-progress__wrap">
     <div
       class="gblog-progress__bar"
       data-percent="{{ $value }}"
-      style="width: {{ $value }}%;"
+      style="width: {{ $value }}%; max-width: 100%; min-width: 0"
     ></div>
   </div>
 </div>