From 7ce82f7b6d375c88a688dacdee4ee0853ccb7ebb Mon Sep 17 00:00:00 2001 From: Robert Kaussow Date: Sat, 30 Apr 2022 14:32:07 +0200 Subject: [PATCH] feat: add optional hint/admonition icons (#233) --- .dictionary | 1 + .drone.yml | 6 +- exampleSite/config.yaml | 5 ++ exampleSite/content/_includes/include-page.md | 2 +- .../content/posts/advanced/includes.md | 2 +- .../content/posts/advanced/shortcodes.md | 46 +++++++++--- .../posts/asciidoc/admonition-icons.adoc | 30 ++++++++ .../content/posts/asciidoc/admonitions.adoc | 73 +++++++++++++++++++ .../content/posts/usage/getting-started.md | 7 +- layouts/shortcodes/hint.html | 17 ++++- src/icons/check_circle_outline.svg | 5 ++ src/icons/dangerous.svg | 5 ++ src/icons/error_outline.svg | 5 ++ src/icons/fire.svg | 5 ++ src/icons/info_outline.svg | 5 ++ src/sass/_asciidoc.scss | 61 ++++++++++++++++ src/sass/_base.scss | 4 +- src/sass/_color_mode.scss | 6 ++ src/sass/_defaults.scss | 23 +++++- src/sass/_markdown.scss | 4 +- src/sass/_mobile.scss | 4 +- src/sass/_shortcodes.scss | 40 +++++++++- src/sass/main.scss | 1 + svgsprite.config.json | 5 ++ webpack.config.js | 4 + 25 files changed, 339 insertions(+), 27 deletions(-) create mode 100644 exampleSite/content/posts/asciidoc/admonition-icons.adoc create mode 100644 exampleSite/content/posts/asciidoc/admonitions.adoc create mode 100644 src/icons/check_circle_outline.svg create mode 100644 src/icons/dangerous.svg create mode 100644 src/icons/error_outline.svg create mode 100644 src/icons/fire.svg create mode 100644 src/icons/info_outline.svg create mode 100644 src/sass/_asciidoc.scss diff --git a/.dictionary b/.dictionary index 709352fa..de4d1b70 100644 --- a/.dictionary +++ b/.dictionary @@ -36,3 +36,4 @@ Theming Favicon[s]? webpack pre-processor[s]? +Asciidoc diff --git a/.drone.yml b/.drone.yml index b7acbbcb..0eb9b35c 100644 --- a/.drone.yml +++ b/.drone.yml @@ -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 ... diff --git a/exampleSite/config.yaml b/exampleSite/config.yaml index 23a39485..4b334f6f 100644 --- a/exampleSite/config.yaml +++ b/exampleSite/config.yaml @@ -86,3 +86,8 @@ params: geekblogImageLazyLoading: true geekblogDarkModeDim: true geekblogTagsToMenu: true + +security: + exec: + allow: + - "^asciidoctor$" diff --git a/exampleSite/content/_includes/include-page.md b/exampleSite/content/_includes/include-page.md index bfc05345..8c39141c 100644 --- a/exampleSite/content/_includes/include-page.md +++ b/exampleSite/content/_includes/include-page.md @@ -1,6 +1,6 @@ _**Example page include**_ -{{< hint info >}} +{{< hint type=note >}} **Example Shortcode**\ Shortcode used in an include page. {{< /hint >}} diff --git a/exampleSite/content/posts/advanced/includes.md b/exampleSite/content/posts/advanced/includes.md index c4e5cd85..ddb0b559 100644 --- a/exampleSite/content/posts/advanced/includes.md +++ b/exampleSite/content/posts/advanced/includes.md @@ -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 >}} diff --git a/exampleSite/content/posts/advanced/shortcodes.md b/exampleSite/content/posts/advanced/shortcodes.md index b8b6efa0..5365d483 100644 --- a/exampleSite/content/posts/advanced/shortcodes.md +++ b/exampleSite/content/posts/advanced/shortcodes.md @@ -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`. - +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: + + ```tpl -{{}} +{{}} **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. {{}} ``` + ### 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: + + + +{{< 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 >}} + + + ## Icon Simple shortcode to include icons from SVG sprites outside of menus. diff --git a/exampleSite/content/posts/asciidoc/admonition-icons.adoc b/exampleSite/content/posts/asciidoc/admonition-icons.adoc new file mode 100644 index 00000000..8f70000e --- /dev/null +++ b/exampleSite/content/posts/asciidoc/admonition-icons.adoc @@ -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. diff --git a/exampleSite/content/posts/asciidoc/admonitions.adoc b/exampleSite/content/posts/asciidoc/admonitions.adoc new file mode 100644 index 00000000..9566cd6e --- /dev/null +++ b/exampleSite/content/posts/asciidoc/admonitions.adoc @@ -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:[🔥] + +[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:[🔥] + +[TIP] +It's possible to use Unicode glyphs as admonition icons. diff --git a/exampleSite/content/posts/usage/getting-started.md b/exampleSite/content/posts/usage/getting-started.md index 6d418a56..6853445b 100644 --- a/exampleSite/content/posts/usage/getting-started.md +++ b/exampleSite/content/posts/usage/getting-started.md @@ -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/) diff --git a/layouts/shortcodes/hint.html b/layouts/shortcodes/hint.html index e93cbc10..2c8195f3 100644 --- a/layouts/shortcodes/hint.html +++ b/layouts/shortcodes/hint.html @@ -1,3 +1,16 @@ -
- {{ .Inner | $.Page.RenderString }} +{{ $type := default "note" (.Get "type") }} +{{ $icon := .Get "icon" }} +{{ $title := default ($type | title) (.Get "title") }} + + +
+
+ {{- with $icon -}} + + {{ $title }} + {{- else -}} + + {{- end -}} +
+
{{ .Inner | $.Page.RenderString }}
diff --git a/src/icons/check_circle_outline.svg b/src/icons/check_circle_outline.svg new file mode 100644 index 00000000..c5b2a10b --- /dev/null +++ b/src/icons/check_circle_outline.svg @@ -0,0 +1,5 @@ + + +check_circle_outline + + diff --git a/src/icons/dangerous.svg b/src/icons/dangerous.svg new file mode 100644 index 00000000..603b90f4 --- /dev/null +++ b/src/icons/dangerous.svg @@ -0,0 +1,5 @@ + + +dangerous + + diff --git a/src/icons/error_outline.svg b/src/icons/error_outline.svg new file mode 100644 index 00000000..104e92b0 --- /dev/null +++ b/src/icons/error_outline.svg @@ -0,0 +1,5 @@ + + +error_outline + + diff --git a/src/icons/fire.svg b/src/icons/fire.svg new file mode 100644 index 00000000..a5c9022a --- /dev/null +++ b/src/icons/fire.svg @@ -0,0 +1,5 @@ + + +fire + + diff --git a/src/icons/info_outline.svg b/src/icons/info_outline.svg new file mode 100644 index 00000000..e7f29d5b --- /dev/null +++ b/src/icons/info_outline.svg @@ -0,0 +1,5 @@ + + +info_outline + + diff --git a/src/sass/_asciidoc.scss b/src/sass/_asciidoc.scss new file mode 100644 index 00000000..2589e591 --- /dev/null +++ b/src/sass/_asciidoc.scss @@ -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; + } + } +} diff --git a/src/sass/_base.scss b/src/sass/_base.scss index 82a71245..14bddcbe 100644 --- a/src/sass/_base.scss +++ b/src/sass/_base.scss @@ -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 { diff --git a/src/sass/_color_mode.scss b/src/sass/_color_mode.scss index 9699d973..481aa4b7 100644 --- a/src/sass/_color_mode.scss +++ b/src/sass/_color_mode.scss @@ -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%); + } } } diff --git a/src/sass/_defaults.scss b/src/sass/_defaults.scss index 23f62ca0..f12d412e 100644 --- a/src/sass/_defaults.scss +++ b/src/sass/_defaults.scss @@ -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; diff --git a/src/sass/_markdown.scss b/src/sass/_markdown.scss index 1fbbb879..848f1265 100644 --- a/src/sass/_markdown.scss +++ b/src/sass/_markdown.scss @@ -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; } } diff --git a/src/sass/_mobile.scss b/src/sass/_mobile.scss index 760366b7..f71cec00 100644 --- a/src/sass/_mobile.scss +++ b/src/sass/_mobile.scss @@ -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 { diff --git a/src/sass/_shortcodes.scss b/src/sass/_shortcodes.scss index 1c397d5f..cb756a9c 100644 --- a/src/sass/_shortcodes.scss +++ b/src/sass/_shortcodes.scss @@ -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; } } diff --git a/src/sass/main.scss b/src/sass/main.scss index 87d51c41..ea5a95df 100644 --- a/src/sass/main.scss +++ b/src/sass/main.scss @@ -12,4 +12,5 @@ @import "_base"; @import "_markdown"; +@import "_asciidoc"; @import "_shortcodes"; diff --git a/svgsprite.config.json b/svgsprite.config.json index 3debc3b5..0d07292a 100644 --- a/svgsprite.config.json +++ b/svgsprite.config.json @@ -25,6 +25,11 @@ "dest": "build/sprites/", "sprite": "geekblog.svg", "bust": false + }, + "stack": { + "dest": "build/img/", + "sprite": "geekdoc-stack.svg", + "bust": false } } } diff --git a/webpack.config.js b/webpack.config.js index b6b760c7..30e889de 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -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") } ] }),