diff options
author | Robert Kaussow <mail@thegeeklab.de> | 2022-08-31 11:15:13 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-08-31 11:15:13 +0300 |
commit | b7de69863af39f8dc0c66d1ce7ec46e16d6d840b (patch) | |
tree | 4ce0bb01ef177e414e9bc865ffc672f6744df085 | |
parent | 0a01df18857c90575d36c1b8f713d64d8544c9e6 (diff) |
feat: add progress shortcode (#305)
-rw-r--r-- | exampleSite/content/about/index.md | 13 | ||||
-rw-r--r-- | exampleSite/content/posts/advanced/shortcodes.md | 36 | ||||
-rw-r--r-- | layouts/shortcodes/hint.html | 6 | ||||
-rw-r--r-- | layouts/shortcodes/progress.html | 23 | ||||
-rw-r--r-- | src/sass/_shortcodes.scss | 35 |
5 files changed, 105 insertions, 8 deletions
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; + } +} |