feat: add optional hint/admonition icons (#233)

pull/234/head v0.18.0
Robert Kaussow 3 months ago committed by GitHub
parent 90cfc27c3c
commit 7ce82f7b6d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 1
      .dictionary
  2. 6
      .drone.yml
  3. 5
      exampleSite/config.yaml
  4. 2
      exampleSite/content/_includes/include-page.md
  5. 2
      exampleSite/content/posts/advanced/includes.md
  6. 46
      exampleSite/content/posts/advanced/shortcodes.md
  7. 30
      exampleSite/content/posts/asciidoc/admonition-icons.adoc
  8. 73
      exampleSite/content/posts/asciidoc/admonitions.adoc
  9. 7
      exampleSite/content/posts/usage/getting-started.md
  10. 17
      layouts/shortcodes/hint.html
  11. 5
      src/icons/check_circle_outline.svg
  12. 5
      src/icons/dangerous.svg
  13. 5
      src/icons/error_outline.svg
  14. 5
      src/icons/fire.svg
  15. 5
      src/icons/info_outline.svg
  16. 61
      src/sass/_asciidoc.scss
  17. 4
      src/sass/_base.scss
  18. 6
      src/sass/_color_mode.scss
  19. 23
      src/sass/_defaults.scss
  20. 4
      src/sass/_markdown.scss
  21. 4
      src/sass/_mobile.scss
  22. 40
      src/sass/_shortcodes.scss
  23. 1
      src/sass/main.scss
  24. 5
      svgsprite.config.json
  25. 4
      webpack.config.js

@ -36,3 +36,4 @@ Theming
Favicon[s]?
webpack
pre-processor[s]?
Asciidoc

@ -26,7 +26,7 @@ steps:
NPM_CONFIG_LOGLEVEL: error
- name: testbuild
image: thegeeklab/hugo:0.93.2
image: thegeeklab/hugo:0.97.3
commands:
- mkdir -p exampleSite/themes/ && ln -s $(pwd)/ exampleSite/themes/hugo-geekblog
- hugo --panicOnWarning -s exampleSite/ -b http://localhost/
@ -203,7 +203,7 @@ steps:
- refs/pull/**
- name: build
image: thegeeklab/hugo:0.93.2
image: thegeeklab/hugo:0.97.3
commands:
- hugo --panicOnWarning -s exampleSite/
@ -285,6 +285,6 @@ depends_on:
---
kind: signature
hmac: 81346082b0ec800862167cfbe219ed2369e774b0fa15371febc103b0d30f9f09
hmac: e60db36deaaa99afbf3ab8fd17852bcfdf44813675e23fdef287e27c5f0919df
...

@ -86,3 +86,8 @@ params:
geekblogImageLazyLoading: true
geekblogDarkModeDim: true
geekblogTagsToMenu: true
security:
exec:
allow:
- "^asciidoctor$"

@ -1,6 +1,6 @@
_**Example page include**_
{{< hint info >}}
{{< hint type=note >}}
**Example Shortcode**\
Shortcode used in an include page.
{{< /hint >}}

@ -35,7 +35,7 @@ Attributes:
If no other options are specified, files will be rendered as Markdown using the `RenderString` [function](https://gohugo.io/functions/renderstring/).
{{< hint warning >}}
{{< hint type=important >}}
**Location of markdown files**\
If you include markdown files that should not get a menu entry, place them outside the content folder or exclude them otherwise.
{{< /hint >}}

@ -96,7 +96,7 @@ The [emojify](https://gohugo.io/functions/emojify/) function can be called direc
The [Emoji cheat sheet](http://www.emoji-cheat-sheet.com/) is a useful reference for emoji shorthand codes.
{{< hint info >}}
{{< hint type=note >}}
**Info**\
The above steps enable Unicode Standard emoji characters and sequences in Hugo, however the rendering of these glyphs depends on the browser and the platform. To style the emoji you can either use a third party emoji font or a font stack.
{{< /hint >}}
@ -159,43 +159,71 @@ copious quo ad. Stet probates in duo.
## Hint
Hint shortcode can be used as hint/alerts/notification block.
There are four colors to choose: `info`, `ok`, `warning` and `danger`.
<!-- prettier-ignore -->
Attributes:
| Name | Usage | default |
| ---------------- | --------------------------------------------------------------------------------------- | --------------------- |
| type | color types to choose from | note |
| icon (optional) | custom icon to use | undefined (type name) |
| title (optional) | custom icon to use, need to be an icon from an [SVG sprite](/posts/features/icon-sets/) | undefined (type name) |
Syntax:
<!-- prettier-ignore-start -->
```tpl
{{</* hint [info|ok|warning|danger] */>}}
{{</* hint type=[note|tip|important|caution|warning] (icon=gblog_github) (title=GitHub) */>}}
**Markdown content**\
Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates investiture.
Ornateness bland it ex enc, est yeti am bongo detract re.
Ornateness bland it ex enc, est yeti am bongo detract re.
{{</* /hint */>}}
```
<!-- prettier-ignore-end -->
### Example
{{< hint info >}}
{{< hint type=note >}}
**Markdown content**\
Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates investiture.
Ornateness bland it ex enc, est yeti am bongo detract re.
{{< /hint >}}
{{< hint type=tip >}}
**Markdown content**\
Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates investiture.
Ornateness bland it ex enc, est yeti am bongo detract re.
{{< /hint >}}
{{< hint ok >}}
{{< hint type=important >}}
**Markdown content**\
Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates investiture.
Ornateness bland it ex enc, est yeti am bongo detract re.
{{< /hint >}}
{{< hint warning >}}
{{< hint type=caution >}}
**Markdown content**\
Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates investiture.
Ornateness bland it ex enc, est yeti am bongo detract re.
{{< /hint >}}
{{< hint danger >}}
{{< hint type=warning >}}
**Markdown content**\
Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates investiture.
Ornateness bland it ex enc, est yeti am bongo detract re.
{{< /hint >}}
Example with a custom icon and title:
<!-- prettier-ignore-start -->
<!-- spellchecker-disable -->
{{< hint type=note icon=gblog_github title=GitHub >}}
**Markdown content**\
Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates investiture.
Ornateness bland it ex enc, est yeti am bongo detract re.
{{< /hint >}}
<!-- spellchecker-enable -->
<!-- prettier-ignore-end -->
## Icon
Simple shortcode to include icons from SVG sprites outside of menus.

@ -0,0 +1,30 @@
+++
title = "Admonition Icons"
date = 2020-06-22T20:00:00+02:00
+++
:icons: font
By default, the admonition is rendered with a plain text label. To enable font icons the document attribute `:icons: font` need to be set.
== Example
[NOTE]
Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates investiture.
Ornateness bland it ex enc, est yeti am bongo detract re.
[TIP]
Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates investiture.
Ornateness bland it ex enc, est yeti am bongo detract re.
[IMPORTANT]
Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates investiture.
Ornateness bland it ex enc, est yeti am bongo detract re.
[CAUTION]
Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates investiture.
Ornateness bland it ex enc, est yeti am bongo detract re.
[WARNING]
Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates investiture.
Ornateness bland it ex enc, est yeti am bongo detract re.

@ -0,0 +1,73 @@
+++
title = "Admonitions"
date = 2020-06-22T20:00:00+02:00
+++
:toc:
:toclevels: 2
{{< toc >}}
== Admonition types
There are certain statements you may want to draw attention to by taking them out of the content's flow and labeling them with a priority. These are called admonitions.
```tpl
[NOTE|TIP|IMPORTANT|CAUTION|WARNING]
Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates investiture.
Ornateness bland it ex enc, est yeti am bongo detract re.
```
=== Example
[NOTE]
Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates investiture.
Ornateness bland it ex enc, est yeti am bongo detract re.
[TIP]
Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates investiture.
Ornateness bland it ex enc, est yeti am bongo detract re.
[IMPORTANT]
Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates investiture.
Ornateness bland it ex enc, est yeti am bongo detract re.
[CAUTION]
Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates investiture.
Ornateness bland it ex enc, est yeti am bongo detract re.
[WARNING]
Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates investiture.
Ornateness bland it ex enc, est yeti am bongo detract re.
== Admonition icons
Icons can be added by setting a unicode glyph or a character reference to the `tip-caption` attribute:
```text
:tip-caption: 💡
[TIP]
It's possible to use Unicode glyphs as admonition icons.
```
```text
:tip-caption: pass:[&#128293;]
[TIP]
It's possible to use Unicode glyphs as admonition icons.
```
=== Example
:tip-caption: 💡
[TIP]
It's possible to use Unicode glyphs as admonition icons.
:tip-caption: pass:[&#128293;]
[TIP]
It's possible to use Unicode glyphs as admonition icons.

@ -138,7 +138,7 @@ curl -L https://github.com/thegeeklab/hugo-geekblog/releases/latest/download/hug
### Option 2: Clone the GitHub repository
{{< hint info >}}
{{< hint type=note >}}
**Info**\
Keep in mind this method is not recommended and needs some extra steps to get it working.
If you want to use the Theme as submodule keep in mind that your build process need to
@ -210,7 +210,7 @@ command = "command1 && command 2 && command3 && hugo"
### Subdirectories
{{< hint danger >}}
{{< hint type=important >}}
**Warning**\
As deploying Hugo sites on subdirectories is not as robust as on subdomains, we do not recommend this.
If you have a choice, using a domain/subdomain should always be the preferred solution!
@ -260,3 +260,6 @@ There are a lot more things to discover. To get the most out of the Theme we hav
- [Advanced Images](/posts/post-with-images/)
- [Includes](/posts/advanced/includes/)
- [Table of Content](/posts/advanced/toc/)
- **Asciidoc**
- [Admonitions](/posts/asciidoc/admonitions/)
- [Admonition Icons](/posts/asciidoc/admonition-icons/)

@ -1,3 +1,16 @@
<blockquote class="gblog-hint {{ .Get 0 }}">
{{ .Inner | $.Page.RenderString }}
{{ $type := default "note" (.Get "type") }}
{{ $icon := .Get "icon" }}
{{ $title := default ($type | title) (.Get "title") }}
<blockquote class="gblog-hint {{ $type | lower }}">
<div class="gblog-hint__title flex align-center">
{{- with $icon -}}
<svg class="gblog-icon {{ . }}"><use xlink:href="#{{ . }}"></use></svg>
<span>{{ $title }}</span>
{{- else -}}
<i class="fa {{ $type | lower }}" title="{{ $title }}"></i>
{{- end -}}
</div>
<div class="gblog-hint__text">{{ .Inner | $.Page.RenderString }}</div>
</blockquote>

@ -0,0 +1,5 @@
<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 28 28">
<title>check_circle_outline</title>
<path d="M14 25.239q4.601 0 7.92-3.319t3.319-7.92-3.319-7.92-7.92-3.319-7.92 3.319-3.319 7.92 3.319 7.92 7.92 3.319zM14 0q5.784 0 9.892 4.108t4.108 9.892-4.108 9.892-9.892 4.108-9.892-4.108-4.108-9.892 4.108-9.892 9.892-4.108zM20.441 7.822l1.972 1.972-11.239 11.239-6.967-7.033 1.972-1.972 4.995 4.995z"></path>
</svg>

After

Width:  |  Height:  |  Size: 486 B

@ -0,0 +1,5 @@
<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 28 28">
<title>dangerous</title>
<path d="M21.802 19.833l-5.833-5.833 5.833-5.833-1.969-1.969-5.833 5.833-5.833-5.833-1.969 1.969 5.833 5.833-5.833 5.833 1.969 1.969 5.833-5.833 5.833 5.833zM19.833 0l8.167 8.167v11.666l-8.167 8.167h-11.666l-8.167-8.167v-11.666l8.167-8.167h11.666z"></path>
</svg>

After

Width:  |  Height:  |  Size: 420 B

@ -0,0 +1,5 @@
<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 28 28">
<title>error_outline</title>
<path d="M14 25.239q4.601 0 7.92-3.319t3.319-7.92-3.319-7.92-7.92-3.319-7.92 3.319-3.319 7.92 3.319 7.92 7.92 3.319zM14 0q5.784 0 9.892 4.108t4.108 9.892-4.108 9.892-9.892 4.108-9.892-4.108-4.108-9.892 4.108-9.892 9.892-4.108zM12.62 6.967h2.761v8.413h-2.761v-8.413zM12.62 18.206h2.761v2.826h-2.761v-2.826z"></path>
</svg>

After

Width:  |  Height:  |  Size: 482 B

@ -0,0 +1,5 @@
<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 28 28">
<title>fire</title>
<path d="M17.689 21.998q-0.32 0.32-0.8 0.576t-0.864 0.384q-1.152 0.384-2.272 0.032t-1.888-0.992q-0.128-0.128-0.096-0.256t0.16-0.192q1.216-0.384 1.92-1.216t0.96-1.792q0.192-0.896-0.064-1.728t-0.384-1.728q-0.128-0.704-0.096-1.376t0.288-1.312q0-0.128 0.128-0.128t0.192 0.064q0.384 0.832 0.992 1.472t1.28 1.216 1.216 1.248 0.672 1.568q0.064 0.384 0.064 0.704 0.064 0.96-0.32 1.92t-1.088 1.536zM21.529 11.054q-0.768-0.704-1.6-1.28t-1.6-1.344q-1.536-1.536-2.016-3.584t0.16-4.16q0.128-0.32-0.096-0.544t-0.544-0.096q-0.768 0.32-1.44 0.768t-1.312 0.896q-1.984 1.664-3.136 3.936t-1.312 4.864 0.8 5.088q0 0.128 0.032 0.256t0.032 0.256q0 0.576-0.512 0.832t-1.024-0.192q-0.128-0.192-0.192-0.32-1.024-1.28-1.376-2.912t-0.096-3.232q0.064-0.384-0.288-0.576t-0.608 0.128q-1.28 1.664-1.856 3.68t-0.448 4.064q0 0.576 0.096 1.184t0.288 1.184q0.448 1.536 1.216 2.816 1.216 2.048 3.264 3.424t4.416 1.696q2.496 0.32 5.024-0.256t4.448-2.304q1.408-1.344 2.208-3.104t0.864-3.68-0.704-3.712q-0.064-0.128-0.096-0.224t-0.096-0.224q-0.576-1.088-1.28-1.984-0.256-0.384-0.544-0.704t-0.672-0.64z"></path>
</svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

@ -0,0 +1,5 @@
<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 28 28">
<title>info_outline</title>
<path d="M12.62 9.793v-2.826h2.761v2.826h-2.761zM14 25.239q4.601 0 7.92-3.319t3.319-7.92-3.319-7.92-7.92-3.319-7.92 3.319-3.319 7.92 3.319 7.92 7.92 3.319zM14 0q5.784 0 9.892 4.108t4.108 9.892-4.108 9.892-9.892 4.108-9.892-4.108-4.108-9.892 4.108-9.892 9.892-4.108zM12.62 21.033v-8.413h2.761v8.413h-2.761z"></path>
</svg>

After

Width:  |  Height:  |  Size: 481 B

@ -0,0 +1,61 @@
.admonitionblock {
@each $name, $color in $hint-colors {
&.#{$name} {
border-left-color: $color;
background-color: scale-color($color, $lightness: 95%, $saturation: -30%);
color: $body-font-color;
}
}
margin: $padding-16 0;
padding: 0;
border-left: $border-4 solid var(--accent-color);
border-radius: $border-radius;
table {
margin: 0 !important;
padding: 0 !important;
tr {
border: 0 !important;
}
td {
&:first-child {
background-color: scale-color($gray-600, $alpha: -95%);
font-weight: bold;
&.icon {
.title {
display: flex;
align-items: center;
}
i.fa::after {
content: attr(title);
font-style: normal;
padding-left: $padding-24;
}
i.fa {
color: $black;
background-size: auto 90%;
background-repeat: no-repeat;
filter: invert(30%);
margin-left: -5px;
}
@each $name, $icon in $hint-icons {
i.fa.icon-#{$name} {
background-image: url(img/geekdoc-stack.svg##{$icon});
}
}
}
}
display: flex;
padding: $padding-4 $padding-16 !important;
}
}
}

@ -542,7 +542,7 @@ svg.gblog-icon {
}
.gblog-error {
padding: $padding-16 * 6 $padding-16;
padding: $padding-96 $padding-16;
margin: 0 auto;
max-width: 45em;
@ -557,7 +557,7 @@ svg.gblog-icon {
}
&__message {
padding-left: $padding-16 * 4;
padding-left: $padding-64;
}
&__line {

@ -96,8 +96,14 @@
.gblog-markdown {
.gblog-hint,
.admonitionblock,
.gblog-post__codecopy--success {
filter: saturate(2.5) brightness(0.85);
}
.gblog-hint__title,
.admonitionblock table td:first-child {
background-color: scale-color($gray-600, $alpha: -85%);
}
}
}

@ -3,7 +3,10 @@ $padding-2: 0.125rem !default;
$padding-4: 0.25rem !default;
$padding-8: 0.5rem !default;
$padding-16: 1rem !default;
$padding-24: 1.5rem !default;
$padding-32: 2rem !default;
$padding-64: 4rem !default;
$padding-96: 6rem !default;
$font-size-base: 16px !default;
$font-size-12: 0.75rem !default;
@ -71,7 +74,23 @@ $sm-breakpoint: $menu-width + $body-min-width + 3rem !default;
// Panel colors
$hint-colors: (
info: rgba(0, 145, 234, 1),
note: rgba(0, 145, 234, 1),
ok: rgba(0, 200, 83, 1),
warning: rgba(255, 171, 0, 1),
danger: rgba(213, 0, 0, 1)
tip: rgba(0, 200, 83, 1),
important: rgba(255, 171, 0, 1),
caution: rgba(115, 0, 211, 1),
danger: rgba(213, 0, 0, 1),
warning: rgba(213, 0, 0, 1)
) !default;
// Panel colors
$hint-icons: (
info: "gblog_info_outline",
note: "gblog_info_outline",
ok: "gblog_check_circle_outline",
tip: "gblog_check_circle_outline",
important: "gblog_error_outline",
caution: "gblog_dangerous",
danger: "gblog_fire",
warning: "gblog_fire"
) !default;

@ -135,7 +135,7 @@
ul,
ol {
padding-left: $padding-16 * 2;
padding-left: $padding-32;
}
dl {
@ -145,7 +145,7 @@
}
dd {
margin-left: $padding-16 * 2;
margin-left: $padding-32;
}
}

@ -58,14 +58,14 @@
}
.gblog-error {
padding: $padding-16 * 6 $padding-16;
padding: $padding-96 $padding-16;
svg.gblog-icon {
font-size: $font-size-96;
}
&__message {
padding-left: $padding-16 * 2;
padding-left: $padding-32;
}
&__line {

@ -139,10 +139,48 @@
border-left-color: $color;
background-color: scale-color($color, $lightness: 95%, $saturation: -30%);
color: $body-font-color;
padding: 0;
}
}
.gblog-post__anchor {
&__title {
padding: $padding-4 $padding-16;
background-color: scale-color($gray-600, $alpha: -95%);
font-weight: bold;
color: scale-color($body-font-color, $alpha: -15%);
i.fa::after {
content: attr(title);
font-style: normal;
padding-left: $padding-24;
}
i.fa {
color: $black;
background-size: auto 90%;
background-repeat: no-repeat;
filter: invert(30%);
margin-left: -5px;
}
@each $name, $icon in $hint-icons {
i.fa.#{$name} {
background-image: url(img/geekdoc-stack.svg##{$icon});
}
}
.gblog-icon {
width: $font-size-24;
height: $font-size-24;
margin-left: -5px;
}
}
&__text {
padding: $padding-4 $padding-16;
}
.gblog-page__anchor {
display: none;
}
}

@ -12,4 +12,5 @@
@import "_base";
@import "_markdown";
@import "_asciidoc";
@import "_shortcodes";

@ -25,6 +25,11 @@
"dest": "build/sprites/",
"sprite": "geekblog.svg",
"bust": false
},
"stack": {
"dest": "build/img/",
"sprite": "geekdoc-stack.svg",
"bust": false
}
}
}

@ -46,6 +46,10 @@ var config = {
from: "sprites/*.svg",
to: path.resolve(__dirname, "assets"),
context: path.resolve(__dirname, "build")
},
{
from: "img/*.svg",
context: path.resolve(__dirname, "build")
}
]
}),

Loading…
Cancel
Save