github/hugo-geekblog
0
0
Fork 0
mirror of https://github.com/thegeeklab/hugo-geekblog.git synced 2024-11-21 20:50:40 +00:00
Code Issues Projects Releases Wiki Activity

feat: add progress shortcode (#305)

Browse Source
This commit is contained in:
Robert Kaussow 2022-08-31 10:15:13 +02:00 committed by GitHub
parent 0a01df1885
commit b7de69863a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 105 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
exampleSite/content/about/index.md
View File

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

36
exampleSite/content/posts/advanced/shortcodes.md
View File

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

6
layouts/shortcodes/hint.html
View File

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

23
layouts/shortcodes/progress.html Normal file
View File

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

35
src/sass/_shortcodes.scss
View File

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