From f6966b85139e66f1793155ace2098054436c4c1c Mon Sep 17 00:00:00 2001 From: Robert Kaussow Date: Sat, 23 Apr 2022 15:14:42 +0200 Subject: [PATCH] feat: add optional hint/admonition icons (#383) BREAKING CHANGE: The types of the `hint` short code have been renamed to `[note|tip|important|caution|warning]` the old types `[info|ok|warning|danger]` are still working, but should be considered as deprecated. BREAKING CHANGE: The `hint` short code is using named arguments now. You have to change, e.g. `{{< hint warning >}}` to `{{< hint type=warning >}}`. --- .drone.yml | 6 +- exampleSite/config/_default/config.yaml | 5 ++ .../content/en/asciidoc/admonition-icons.adoc | 29 ++++++++ .../content/en/asciidoc/admonitions.adoc | 72 +++++++++++++++++++ exampleSite/content/en/shortcodes/hints.md | 39 ++++++++-- exampleSite/static/custom.css | 2 +- layouts/partials/menu-bundle.html | 2 +- layouts/partials/menu-filetree.html | 3 +- layouts/partials/search.html | 2 +- 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 | 36 +++++++++- src/sass/_base.scss | 20 +++--- src/sass/_color_mode.scss | 15 +++- src/sass/_defaults.scss | 19 ++++- src/sass/_markdown.scss | 4 +- src/sass/_mobile.scss | 2 +- src/sass/_shortcodes.scss | 38 ++++++++++ svgsprite.config.json | 5 ++ webpack.config.js | 4 ++ 24 files changed, 310 insertions(+), 35 deletions(-) create mode 100644 exampleSite/content/en/asciidoc/admonition-icons.adoc create mode 100644 exampleSite/content/en/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 diff --git a/.drone.yml b/.drone.yml index 4bf192d..d2994e5 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-geekdoc - 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/ @@ -284,6 +284,6 @@ depends_on: --- kind: signature -hmac: bd8e739515bc29102da412272b61aa89cf18f9b4d1f62b502172131a51009c71 +hmac: b43a67b7ebd42ae6e180cd5aaa2ffa9740f7bf649fbf9cfa76c5ea84ae94d8bd ... diff --git a/exampleSite/config/_default/config.yaml b/exampleSite/config/_default/config.yaml index ec6dfb4..53de5ee 100644 --- a/exampleSite/config/_default/config.yaml +++ b/exampleSite/config/_default/config.yaml @@ -37,3 +37,8 @@ outputs: - HTML term: - HTML + +security: + exec: + allow: + - "^asciidoctor$" diff --git a/exampleSite/content/en/asciidoc/admonition-icons.adoc b/exampleSite/content/en/asciidoc/admonition-icons.adoc new file mode 100644 index 0000000..bfcdc26 --- /dev/null +++ b/exampleSite/content/en/asciidoc/admonition-icons.adoc @@ -0,0 +1,29 @@ ++++ +title = "Admonition Icons" ++++ + +: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/en/asciidoc/admonitions.adoc b/exampleSite/content/en/asciidoc/admonitions.adoc new file mode 100644 index 0000000..62a01e0 --- /dev/null +++ b/exampleSite/content/en/asciidoc/admonitions.adoc @@ -0,0 +1,72 @@ ++++ +title = "Admonitions" ++++ + +: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/en/shortcodes/hints.md b/exampleSite/content/en/shortcodes/hints.md index 5e8fad4..8f21060 100644 --- a/exampleSite/content/en/shortcodes/hints.md +++ b/exampleSite/content/en/shortcodes/hints.md @@ -3,11 +3,20 @@ title: Hints --- 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](/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. @@ -17,26 +26,44 @@ Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclima ## 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 ok >}} +{{< 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 warning >}} +{{< 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 danger >}} +{{< 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 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=gdoc_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 >}} + + diff --git a/exampleSite/static/custom.css b/exampleSite/static/custom.css index 7be1537..b020f6b 100644 --- a/exampleSite/static/custom.css +++ b/exampleSite/static/custom.css @@ -14,7 +14,7 @@ height: 4rem; } -.icon-grid__line .icon { +.icon-grid__line .gdoc-icon { font-size: 3em; } diff --git a/layouts/partials/menu-bundle.html b/layouts/partials/menu-bundle.html index dc205ad..59bb434 100644 --- a/layouts/partials/menu-bundle.html +++ b/layouts/partials/menu-bundle.html @@ -39,7 +39,7 @@ />