From 83b1f27cb96c8c33da4e7bc0a1947ad7378c4f0b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=B6ren=20Weber?= Date: Tue, 13 Aug 2024 12:48:25 +0200 Subject: [PATCH] theme: support for GitHub styled alerts #885 --- assets/css/swagger.css | 24 +++++++ assets/css/theme-neon.css | 4 ++ assets/css/variant.css | 30 +++++++-- exampleSite/config/_default/params.toml | 10 +++ .../content/basics/migration/_index.en.md | 10 +++ exampleSite/content/cont/markdown.en.md | 64 ++++++++++++------- exampleSite/content/cont/taxonomy.en.md | 2 +- .../shortcodes/attachments/index.en.md | 2 +- exampleSite/content/shortcodes/badge.en.md | 26 +++++--- exampleSite/content/shortcodes/button.en.md | 2 +- exampleSite/content/shortcodes/notice.en.md | 36 +++++++++-- .../content/shortcodes/resources/index.en.md | 2 +- exampleSite/content/shortcodes/tab.en.md | 2 +- i18n/ar.toml | 10 ++- i18n/art-x-pir.toml | 10 ++- i18n/cs.toml | 10 ++- i18n/de.toml | 10 ++- i18n/en.toml | 10 ++- i18n/es.toml | 10 ++- i18n/fi.toml | 10 ++- i18n/fr.toml | 10 ++- i18n/hi.toml | 10 ++- i18n/hu.toml | 10 ++- i18n/id.toml | 10 ++- i18n/it.toml | 10 ++- i18n/ja.toml | 10 ++- i18n/ko.toml | 12 +++- i18n/nl.toml | 10 ++- i18n/pl.toml | 10 ++- i18n/pt.toml | 10 ++- i18n/ro.toml | 10 ++- i18n/ru.toml | 10 ++- i18n/sw.toml | 10 ++- i18n/tr.toml | 10 ++- i18n/vi.toml | 10 ++- i18n/zh-CN.toml | 10 ++- i18n/zh-Hans.toml | 10 ++- i18n/zh-Hant.toml | 10 ++- i18n/zh-TW.toml | 10 ++- i18n/zh.toml | 10 ++- .../_default/_markup/render-blockquote.html | 19 ++++++ layouts/partials/shortcodes/attachments.html | 8 ++- layouts/partials/shortcodes/badge.html | 8 ++- layouts/partials/shortcodes/button.html | 8 ++- layouts/partials/shortcodes/notice.html | 8 ++- layouts/partials/shortcodes/resources.html | 8 ++- layouts/partials/shortcodes/tabs.html | 16 +++-- static/css/swagger-dark.css | 8 +++ static/css/variables.css | 8 +++ static/js/variant.js | 10 +++ 50 files changed, 471 insertions(+), 116 deletions(-) create mode 100644 layouts/_default/_markup/render-blockquote.html diff --git a/assets/css/swagger.css b/assets/css/swagger.css index bf5bfeab3b..1a6dbd0951 100644 --- a/assets/css/swagger.css +++ b/assets/css/swagger.css @@ -162,6 +162,30 @@ select:-webkit-autofill { .swagger-ui .opblock.opblock-get .tab-header .tab-item.active h4 span::after { background-color: var(--INTERNAL-BOX-BLUE-color); } +.swagger-ui .opblock.opblock-patch { + border-color: var(--INTERNAL-BOX-CYAN-color); +} +.swagger-ui .opblock.opblock-patch .opblock-summary-method { + background-color: var(--INTERNAL-BOX-CYAN-color); +} +.swagger-ui .opblock.opblock-patch .opblock-summary { + border-color: var(--INTERNAL-BOX-CYAN-color); +} +.swagger-ui .opblock.opblock-patch .tab-header .tab-item.active h4 span::after { + background-color: var(--INTERNAL-BOX-CYAN-color); +} +.swagger-ui .opblock.opblock-options { + border-color: var(--INTERNAL-BOX-MAGENTA-color); +} +.swagger-ui .opblock.opblock-options .opblock-summary-method { + background-color: var(--INTERNAL-BOX-MAGENTA-color); +} +.swagger-ui .opblock.opblock-options .opblock-summary { + border-color: var(--INTERNAL-BOX-MAGENTA-color); +} +.swagger-ui .opblock.opblock-options .tab-header .tab-item.active h4 span::after { + background-color: var(--INTERNAL-BOX-MAGENTA-color); +} .swagger-ui .tab li { color: var(--INTERNAL-MAIN-TEXT-color); } diff --git a/assets/css/theme-neon.css b/assets/css/theme-neon.css index 34d325defc..df93d5c25d 100644 --- a/assets/css/theme-neon.css +++ b/assets/css/theme-neon.css @@ -50,10 +50,14 @@ /* optional base colors for colored boxes as in badges, buttons, notice, etc. shortcode */ --BOX-BLUE-color: rgba( 48, 117, 229, 1 ); /* background color of blue boxes */ --BOX-BLUE-TEXT-color: var( --BOX-BLUE-color ); /* text color of blue boxes */ + --BOX-CYAN-color: rgba( 30, 190, 190, 1 ); /* background color of cyan boxes */ + --BOX-CYAN-TEXT-color: var( --BOX-CYAN-color ); /* text color of cyan boxes */ --BOX-GREEN-color: rgba( 42, 178, 24, 1 ); /* background color of green boxes */ --BOX-GREEN-TEXT-color: var( --BOX-GREEN-color ); /* text color of green boxes */ --BOX-GREY-color: rgba( 128, 128, 128, 1 ); /* background color of grey boxes */ --BOX-GREY-TEXT-color: var( --BOX-GREY-color ); /* text color of grey boxes */ + --BOX-MAGENTA-color: rgba( 237, 33, 220, 1 ); /* background color of magenta boxes */ + --BOX-MAGENTA-TEXT-color: var( --BOX-MAGENTA-color ); /* text color of magenta boxes */ --BOX-ORANGE-color: rgba( 237, 153, 9, 1 ); /* background color of orange boxes */ --BOX-ORANGE-TEXT-color: var( --BOX-ORANGE-color ); /* text color of orange boxes */ --BOX-RED-color: rgba( 224, 62, 62, 1 ); /* background color of red boxes */ diff --git a/assets/css/variant.css b/assets/css/variant.css index e9c3cd552a..ead3ab63f2 100644 --- a/assets/css/variant.css +++ b/assets/css/variant.css @@ -155,16 +155,21 @@ div.box > .box-content { color: var(--VARIABLE-BOX-TEXT-color); } +.cstyle.caution { + --VARIABLE-BOX-color: var(--INTERNAL-BOX-CAUTION-color); + --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-CAUTION-TEXT-color); +} + +.cstyle.important { + --VARIABLE-BOX-color: var(--INTERNAL-BOX-IMPORTANT-color); + --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-IMPORTANT-TEXT-color); +} + .cstyle.info { --VARIABLE-BOX-color: var(--INTERNAL-BOX-INFO-color); --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-INFO-TEXT-color); } -.cstyle.warning { - --VARIABLE-BOX-color: var(--INTERNAL-BOX-WARNING-color); - --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-WARNING-TEXT-color); -} - .cstyle.note { --VARIABLE-BOX-color: var(--INTERNAL-BOX-NOTE-color); --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-NOTE-TEXT-color); @@ -175,6 +180,11 @@ div.box > .box-content { --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-TIP-TEXT-color); } +.cstyle.warning { + --VARIABLE-BOX-color: var(--INTERNAL-BOX-WARNING-color); + --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-WARNING-TEXT-color); +} + .cstyle.primary { --VARIABLE-BOX-color: var(--INTERNAL-PRIMARY-color); --VARIABLE-BOX-TEXT-color: var(--INTERNAL-MAIN-TEXT-color); @@ -195,6 +205,11 @@ div.box > .box-content { --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-BLUE-TEXT-color); } +.cstyle.cyan { + --VARIABLE-BOX-color: var(--INTERNAL-BOX-CYAN-color); + --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-CYAN-TEXT-color); +} + .cstyle.green { --VARIABLE-BOX-color: var(--INTERNAL-BOX-GREEN-color); --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-GREEN-TEXT-color); @@ -205,6 +220,11 @@ div.box > .box-content { --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-GREY-TEXT-color); } +.cstyle.magenta { + --VARIABLE-BOX-color: var(--INTERNAL-BOX-MAGENTA-color); + --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-MAGENTA-TEXT-color); +} + .cstyle.orange { --VARIABLE-BOX-color: var(--INTERNAL-BOX-ORANGE-color); --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-ORANGE-TEXT-color); diff --git a/exampleSite/config/_default/params.toml b/exampleSite/config/_default/params.toml index 71f71b1dfb..38409a0184 100644 --- a/exampleSite/config/_default/params.toml +++ b/exampleSite/config/_default/params.toml @@ -440,6 +440,16 @@ disableMermaid = true # This can be overridden in the page's frontmatter. customMermaidURL = "" # "https://unpkg.com/mermaid/dist/mermaid.min.js" +#++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +# Notice +# These options configure how notices are displayed. + +# Wether to add support for Relearn's additional notice styles +# Default: false +# If this value is set to false, GitHub's alerts extension also recognises +# the additional Relearn styles like "info". +disableBlockquoteNoticeSupport = false + #++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ # OpenApi # These options configure how OpenAPI specifications are displayed. diff --git a/exampleSite/content/basics/migration/_index.en.md b/exampleSite/content/basics/migration/_index.en.md index b3660cfc4f..99c841e577 100644 --- a/exampleSite/content/basics/migration/_index.en.md +++ b/exampleSite/content/basics/migration/_index.en.md @@ -18,6 +18,16 @@ This document shows you what's new in the latest release and flags it with one o --- +## 6.2.0.beta (XXXX-XX-XX) {#620} + +- {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} If you are running Hugo {{% badge color="fuchsia" icon="fa-fw fab fa-hackerrank" title=" " %}}0.132.0{{% /badge %}} or later, the theme is now capable to print [GitHub styled alerts](cont/markdown#alerts). + +- {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} To support new severity levels for GitHub styled alerts, all shortcodes that support severity levels with their `style` parameter were expanded with the new severities `caution` and `important` and the `color` parameter was expanded with `cyan` and `magenta`. Please note, that coloring and icons of severities may defer from the [display you see on GitHub](https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#alerts). + +- {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} To support new severity levels for GitHub styled alerts, the new severities and their according colors are also available ass CSS variables `BOX-MAGENTA-color`, `BOX-MAGENTA-TEXT-color`, `BOX-CAUTION-color`, `BOX-CAUTION-TEXT-color`, `BOX-CYAN-color`, `BOX-CYAN-TEXT-color`, `BOX-IMPORTANT-color`, `BOX-IMPORTANT-TEXT-color`. You don't need to change anything in your custom color stylesheet as appropriate default colors will be used. + +--- + ## 6.1.0 (2024-08-02) {#610} - {{% badge style="note" title=" " %}}Change{{% /badge %}} The [`include` shortcode](shortcodes/include) is now able to resolve links to pages as well as resources or files in the file system (the old behavior). diff --git a/exampleSite/content/cont/markdown.en.md b/exampleSite/content/cont/markdown.en.md index 5ab0384ea9..e9bd20a2ac 100644 --- a/exampleSite/content/cont/markdown.en.md +++ b/exampleSite/content/cont/markdown.en.md @@ -115,6 +115,48 @@ Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus. Et legere ocurreret pri, animal tacimates complectitur ad cum. Cu eum inermis inimicus efficiendi. Labore officiis his ex, soluta officiis concludaturque ei qui, vide sensibus vim ad. {{% /notice %}} +## Blockquotes + +For quoting blocks of content from another source within your document add `>` before any text you want to quote. + +Blockquotes can also be nested. + +````md +> Donec massa lacus, ultricies a ullamcorper in, fermentum sed augue. Nunc augue, aliquam non hendrerit ac, commodo vel nisi. +> +> > Sed adipiscing elit vitae augue consectetur a gravida nunc vehicula. Donec auctor odio non est accumsan facilisis. Aliquam id turpis in dolor tincidunt mollis ac eu diam. +> +> Mauris sit amet ligula egestas, feugiat metus tincidunt, luctus libero. Donec congue finibus tempor. Vestibulum aliquet sollicitudin erat, ut aliquet purus posuere luctus. +```` + +{{% notice style="secondary" icon="eye" title="Result" %}} +> Donec massa lacus, ultricies a ullamcorper in, fermentum sed augue. Nunc augue, aliquam non hendrerit ac, commodo vel nisi. +> +> > Sed adipiscing elit vitae augue consectetur a gravida nunc vehicula. Donec auctor odio non est accumsan facilisis. Aliquam id turpis in dolor tincidunt mollis ac eu diam. +> +> Mauris sit amet ligula egestas, feugiat metus tincidunt, luctus libero. Donec congue finibus tempor. Vestibulum aliquet sollicitudin erat, ut aliquet purus posuere luctus. +{{% /notice %}} + +## Alerts + +> [!CAUTION] +> Advises about risks or negative outcomes of certain actions. + +> [!IMPORTANT] +> Key information users need to know to achieve their goal. + +> [!INFO] +> Information that users might find interesting. + +> [!NOTE] +> Useful information that users should know, even when skimming content. + +> [!TIP] +> Helpful advice for doing things better or more easily. + +> [!WARNING] +> Urgent info that needs immediate user attention to avoid problems. + ## Text Markers ### Bold @@ -487,28 +529,6 @@ Adding a colon on the left and/or right side of the dashes below any heading wil | ext | 3 | extension to be used for dest files. | {{% /notice %}} -## Blockquotes - -For quoting blocks of content from another source within your document add `>` before any text you want to quote. - -Blockquotes can also be nested. - -````md -> Donec massa lacus, ultricies a ullamcorper in, fermentum sed augue. Nunc augue, aliquam non hendrerit ac, commodo vel nisi. -> -> > Sed adipiscing elit vitae augue consectetur a gravida nunc vehicula. Donec auctor odio non est accumsan facilisis. Aliquam id turpis in dolor tincidunt mollis ac eu diam. -> -> Mauris sit amet ligula egestas, feugiat metus tincidunt, luctus libero. Donec congue finibus tempor. Vestibulum aliquet sollicitudin erat, ut aliquet purus posuere luctus. -```` - -{{% notice style="secondary" icon="eye" title="Result" %}} -> Donec massa lacus, ultricies a ullamcorper in, fermentum sed augue. Nunc augue, aliquam non hendrerit ac, commodo vel nisi. -> -> > Sed adipiscing elit vitae augue consectetur a gravida nunc vehicula. Donec auctor odio non est accumsan facilisis. Aliquam id turpis in dolor tincidunt mollis ac eu diam. -> -> Mauris sit amet ligula egestas, feugiat metus tincidunt, luctus libero. Donec congue finibus tempor. Vestibulum aliquet sollicitudin erat, ut aliquet purus posuere luctus. -{{% /notice %}} - ## Links ### Autolink diff --git a/exampleSite/content/cont/taxonomy.en.md b/exampleSite/content/cont/taxonomy.en.md index 3b8aa81047..759727417f 100644 --- a/exampleSite/content/cont/taxonomy.en.md +++ b/exampleSite/content/cont/taxonomy.en.md @@ -58,6 +58,6 @@ If you define [custom taxonomies](https://gohugo.io/content-management/taxonomie | **page** | _<empty>_ | Mandatory reference to the page. | | **taxonomy** | _<empty>_ | The plural name of the taxonomy to display as used in your frontmatter. | | **class** | _<empty>_ | Additional CSS classes set on the outermost generated HTML element.

If set to `tags` you will get the visuals for displaying the _tags_ taxonomy, otherwise it will be a simple list of links as for the _categories_ taxonomy. | -| **style** | `primary` | The style scheme used if **class** is `tags`.

- by severity: `info`, `note`, `tip`, `warning`
- by brand color: `primary`, `secondary`, `accent`
- by color: `blue`, `green`, `grey`, `orange`, `red`
- by special color: `default`, `transparent`, `code` | +| **style** | `primary` | The style scheme used if **class** is `tags`.

- by severity: `caution`, `important`, `info`, `note`, `tip`, `warning`
- by brand color: `primary`, `secondary`, `accent`
- by color: `blue`, `cyan`, `green`, `grey`, `magenta`, `orange`, `red`
- by special color: `default`, `transparent`, `code` | | **color** | see notes | The [CSS color value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) to be used if **class** is `tags`. If not set, the chosen color depends on the **style**. Any given value will overwrite the default.

- for severity styles: a nice matching color for the severity
- for all other styles: the corresponding color | | **icon** | _<empty>_ | An optional [Font Awesome icon name](shortcodes/icon#finding-an-icon) set to the left of the list. | diff --git a/exampleSite/content/shortcodes/attachments/index.en.md b/exampleSite/content/shortcodes/attachments/index.en.md index 11b67bb470..0b47f3624c 100644 --- a/exampleSite/content/shortcodes/attachments/index.en.md +++ b/exampleSite/content/shortcodes/attachments/index.en.md @@ -54,7 +54,7 @@ While the examples are using shortcodes with named parameter you are free to als | Name | Default | Notes | |-------------|-----------------|-------------| -| **style** | `transparent` | The style scheme used for the box.

- by severity: `info`, `note`, `tip`, `warning`
- by brand color: `primary`, `secondary`, `accent`
- by color: `blue`, `green`, `grey`, `orange`, `red`
- by special color: `default`, `transparent`, `code` | +| **style** | `transparent` | The style scheme used for the box.

- by severity: `caution`, `important`, `info`, `note`, `tip`, `warning`
- by brand color: `primary`, `secondary`, `accent`
- by color: `blue`, `cyan`, `green`, `grey`, `magenta`, `orange`, `red`
- by special color: `default`, `transparent`, `code` | | **color** | see notes | The [CSS color value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) to be used. If not set, the chosen color depends on the **style**. Any given value will overwrite the default.

- for severity styles: a nice matching color for the severity
- for all other styles: the corresponding color | | **title** | see notes | Arbitrary text for the box title. Depending on the **style** there may be a default title. Any given value will overwrite the default.

- for severity styles: the matching title for the severity
- for all other styles: `Attachments`

If you want no title for a severity style, you have to set this parameter to `" "` (a non empty string filled with spaces) | | **icon** | see notes | [Font Awesome icon name](shortcodes/icon#finding-an-icon) set to the left of the title. Depending on the **style** there may be a default icon. Any given value will overwrite the default.

- for severity styles: a nice matching icon for the severity
- for all other styles: `paperclip`

If you want no icon, you have to set this parameter to `" "` (a non empty d with spaces) | diff --git a/exampleSite/content/shortcodes/badge.en.md b/exampleSite/content/shortcodes/badge.en.md index 890118f7e3..3135407507 100644 --- a/exampleSite/content/shortcodes/badge.en.md +++ b/exampleSite/content/shortcodes/badge.en.md @@ -66,7 +66,7 @@ While the examples are using shortcodes with named parameter you are free to als | Name | Default | Notes | |-----------------------|-----------------|-------------| -| **style** | `default` | The style scheme used for the badge.

- by severity: `info`, `note`, `tip`, `warning`
- by brand color: `primary`, `secondary`, `accent`
- by color: `blue`, `green`, `grey`, `orange`, `red`
- by special color: `default`, `transparent`, `code` | +| **style** | `default` | The style scheme used for the badge.

- by severity: `caution`, `important`, `info`, `note`, `tip`, `warning`
- by brand color: `primary`, `secondary`, `accent`
- by color: `blue`, `cyan`, `green`, `grey`, `magenta`, `orange`, `red`
- by special color: `default`, `transparent`, `code` | | **color** | see notes | The [CSS color value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) to be used. If not set, the chosen color depends on the **style**. Any given value will overwrite the default.

- for severity styles: a nice matching color for the severity
- for all other styles: the corresponding color | | **title** | see notes | Arbitrary text for the badge title. Depending on the **style** there may be a default title. Any given value will overwrite the default.

- for severity styles: the matching title for the severity
- for all other styles: _<empty>_

If you want no title for a severity style, you have to set this parameter to `" "` (a non empty string filled with spaces) | | **icon** | see notes | [Font Awesome icon name](shortcodes/icon#finding-an-icon) set to the left of the title. Depending on the **style** there may be a default icon. Any given value will overwrite the default.

- for severity styles: a nice matching icon for the severity
- for all other styles: _<empty>_

If you want no icon for a severity style, you have to set this parameter to `" "` (a non empty string filled with spaces) | @@ -79,16 +79,20 @@ While the examples are using shortcodes with named parameter you are free to als #### By Severity ````go -{{%/* badge style="info" %}}New{{% /badge */%}} -{{%/* badge style="note" %}}Change{{% /badge */%}} -{{%/* badge style="tip" %}}Optional{{% /badge */%}} -{{%/* badge style="warning" %}}Breaking{{% /badge */%}} +{{%/* badge style="caution" %}}Magenta{{% /badge */%}} +{{%/* badge style="important" %}}Cyan{{% /badge */%}} +{{%/* badge style="info" %}}Blue{{% /badge */%}} +{{%/* badge style="note" %}}Orange{{% /badge */%}} +{{%/* badge style="tip" %}}Green{{% /badge */%}} +{{%/* badge style="warning" %}}Red{{% /badge */%}} ```` -{{% badge style="info" %}}New{{% /badge %}} -{{% badge style="note" %}}Change{{% /badge %}} -{{% badge style="tip" %}}Optional{{% /badge %}} -{{% badge style="warning" %}}Breaking{{% /badge %}} +{{% badge style="caution" %}}Magenta{{% /badge %}} +{{% badge style="important" %}}Cyan{{% /badge %}} +{{% badge style="info" %}}Blue{{% /badge %}} +{{% badge style="note" %}}Orange{{% /badge %}} +{{% badge style="tip" %}}Green{{% /badge %}} +{{% badge style="warning" %}}Red{{% /badge %}} #### By Brand Colors @@ -106,15 +110,19 @@ While the examples are using shortcodes with named parameter you are free to als ````go {{%/* badge style="blue" icon="palette" title="Color" %}}Blue{{% /badge */%}} +{{%/* badge style="cyan" icon="palette" title="Color" %}}Cyan{{% /badge */%}} {{%/* badge style="green" icon="palette" title="Color" %}}Green{{% /badge */%}} {{%/* badge style="grey" icon="palette" title="Color" %}}Grey{{% /badge */%}} +{{%/* badge style="magenta" icon="palette" title="Color" %}}Magenta{{% /badge */%}} {{%/* badge style="orange" icon="palette" title="Color" %}}Orange{{% /badge */%}} {{%/* badge style="red" icon="palette" title="Color" %}}Red{{% /badge */%}} ```` {{% badge style="blue" icon="palette" title="Color" %}}Blue{{% /badge %}} +{{% badge style="cyan" icon="palette" title="Color" %}}Cyan{{% /badge %}} {{% badge style="green" icon="palette" title="Color" %}}Green{{% /badge %}} {{% badge style="grey" icon="palette" title="Color" %}}Grey{{% /badge %}} +{{% badge style="magenta" icon="palette" title="Color" %}}Magenta{{% /badge %}} {{% badge style="orange" icon="palette" title="Color" %}}Orange{{% /badge %}} {{% badge style="red" icon="palette" title="Color" %}}Red{{% /badge %}} diff --git a/exampleSite/content/shortcodes/button.en.md b/exampleSite/content/shortcodes/button.en.md index e682fd88d8..58afaa7262 100644 --- a/exampleSite/content/shortcodes/button.en.md +++ b/exampleSite/content/shortcodes/button.en.md @@ -48,7 +48,7 @@ Once the button is clicked, it opens another browser tab for the given URL. | Name | Default | Notes | |-----------------------|-----------------|-------------| | **href** | _<empty>_ | Either the destination URL for the button or JavaScript code to be executed on click. If this parameter is not set, the button will do nothing but is still displayed as clickable.

- if starting with `javascript:` all following text will be executed in your browser
- every other string will be interpreted as URL| -| **style** | `transparent` | The style scheme used for the button.

- by severity: `info`, `note`, `tip`, `warning`
- by brand color: `primary`, `secondary`, `accent`
- by color: `blue`, `green`, `grey`, `orange`, `red`
- by special color: `default`, `transparent`, `code` | +| **style** | `transparent` | The style scheme used for the button.

- by severity: `caution`, `important`, `info`, `note`, `tip`, `warning`
- by brand color: `primary`, `secondary`, `accent`
- by color: `blue`, `cyan`, `green`, `grey`, `magenta`, `orange`, `red`
- by special color: `default`, `transparent`, `code` | | **color** | see notes | The [CSS color value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) to be used. If not set, the chosen color depends on the **style**. Any given value will overwrite the default.

- for severity styles: a nice matching color for the severity
- for all other styles: the corresponding color | | **icon** | see notes | [Font Awesome icon name](shortcodes/icon#finding-an-icon) set to the left of the title. Depending on the **style** there may be a default icon. Any given value will overwrite the default.

- for severity styles: a nice matching icon for the severity
- for all other styles: _<empty>_

If you want no icon for a severity style, you have to set this parameter to `" "` (a non empty string filled with spaces) | | **iconposition** | `left` | Places the icon to the `left` or `right` of the title. | diff --git a/exampleSite/content/shortcodes/notice.en.md b/exampleSite/content/shortcodes/notice.en.md index fa81b66709..1a93498a59 100644 --- a/exampleSite/content/shortcodes/notice.en.md +++ b/exampleSite/content/shortcodes/notice.en.md @@ -51,7 +51,7 @@ It is all about the boxes. | Name | Position | Default | Notes | |-----------|----------|-----------|-------------| -| **style** | 1 | `default` | The style scheme used for the box.

- by severity: `info`, `note`, `tip`, `warning`
- by brand color: `primary`, `secondary`, `accent`
- by color: `blue`, `green`, `grey`, `orange`, `red`
- by special color: `default`, `transparent`, `code` | +| **style** | 1 | `default` | The style scheme used for the box.

- by severity: `caution`, `important`, `info`, `note`, `tip`, `warning`
- by brand color: `primary`, `secondary`, `accent`
- by color: `blue`, `cyan`, `green`, `grey`, `magenta`, `orange`, `red`
- by special color: `default`, `transparent`, `code` | | **color** | | see notes | The [CSS color value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) to be used. If not set, the chosen color depends on the **style**. Any given value will overwrite the default.

- for severity styles: a nice matching color for the severity
- for all other styles: the corresponding color | | **title** | 2 | see notes | Arbitrary text for the box title. Depending on the **style** there may be a default title. Any given value will overwrite the default.

- for severity styles: the matching title for the severity
- for all other styles: _<empty>_

If you want no title for a severity style, you have to set this parameter to `" "` (a non empty string filled with spaces) | | **icon** | 3 | see notes | [Font Awesome icon name](shortcodes/icon#finding-an-icon) set to the left of the title. Depending on the **style** there may be a default icon. Any given value will overwrite the default.

- for severity styles: a nice matching icon for the severity
- for all other styles: _<empty>_

If you want no icon for a severity style, you have to set this parameter to `" "` (a non empty string filled with spaces) | @@ -61,11 +61,11 @@ It is all about the boxes. ### By Severity -#### Info with markup +#### Caution with markup ````go -{{%/* notice style="info" */%}} -An **information** disclaimer +{{%/* notice style="caution" */%}} +An **caution** disclaimer You can add standard markdown syntax: @@ -83,8 +83,8 @@ You can add standard markdown syntax: {{%/* /notice */%}} ```` -{{% notice style="info" %}} -An **information** disclaimer +{{% notice style="caution" %}} +An **caution** disclaimer You can add standard markdown syntax: @@ -101,6 +101,30 @@ You can add standard markdown syntax: > the possibilities are endless (almost - including other shortcodes may or may not work) {{% /notice %}} +#### Important + +````go +{{%/* notice style="important" */%}} +A **important** disclaimer +{{%/* /notice */%}} +```` + +{{% notice style="important" %}} +A **important** disclaimer +{{% /notice %}} + +#### Info + +````go +{{%/* notice style="info" */%}} +A **information** disclaimer +{{%/* /notice */%}} +```` + +{{% notice style="info" %}} +A **information** disclaimer +{{% /notice %}} + #### Note ````go diff --git a/exampleSite/content/shortcodes/resources/index.en.md b/exampleSite/content/shortcodes/resources/index.en.md index 5d624641d6..c52da67d61 100644 --- a/exampleSite/content/shortcodes/resources/index.en.md +++ b/exampleSite/content/shortcodes/resources/index.en.md @@ -40,7 +40,7 @@ Multilanguage features are not supported directly by the shortcode but rely on H | Name | Default | Notes | |-------------|-----------------|-------------| -| **style** | `transparent` | The style scheme used for the box.

- by severity: `info`, `note`, `tip`, `warning`
- by brand color: `primary`, `secondary`, `accent`
- by color: `blue`, `green`, `grey`, `orange`, `red`
- by special color: `default`, `transparent`, `code` | +| **style** | `transparent` | The style scheme used for the box.

- by severity: `caution`, `important`, `info`, `note`, `tip`, `warning`
- by brand color: `primary`, `secondary`, `accent`
- by color: `blue`, `cyan`, `green`, `grey`, `magenta`, `orange`, `red`
- by special color: `default`, `transparent`, `code` | | **color** | see notes | The [CSS color value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) to be used. If not set, the chosen color depends on the **style**. Any given value will overwrite the default.

- for severity styles: a nice matching color for the severity
- for all other styles: the corresponding color | | **title** | see notes | Arbitrary text for the box title. Depending on the **style** there may be a default title. Any given value will overwrite the default.

- for severity styles: the matching title for the severity
- for all other styles: `Resources`

If you want no title for a severity style, you have to set this parameter to `" "` (a non empty string filled with spaces) | | **icon** | see notes | [Font Awesome icon name](shortcodes/icon#finding-an-icon) set to the left of the title. Depending on the **style** there may be a default icon. Any given value will overwrite the default.

- for severity styles: a nice matching icon for the severity
- for all other styles: `paperclip`

If you want no icon, you have to set this parameter to `" "` (a non empty d with spaces) | diff --git a/exampleSite/content/shortcodes/tab.en.md b/exampleSite/content/shortcodes/tab.en.md index 6b02055042..3774e80b79 100644 --- a/exampleSite/content/shortcodes/tab.en.md +++ b/exampleSite/content/shortcodes/tab.en.md @@ -50,7 +50,7 @@ printf("Hello World!"); | Name | Default | Notes | |-----------------------|-----------------|-------------| -| **style** | see notes | The style scheme used for the tab. If you don't set a style and you display a single code block inside of the tab, its default styling will adapt to that of a `code` block. Otherwise `default` is used.

- by severity: `info`, `note`, `tip`, `warning`
- by brand color: `primary`, `secondary`, `accent`
- by color: `blue`, `green`, `grey`, `orange`, `red`
- by special color: `default`, `transparent`, `code` | +| **style** | see notes | The style scheme used for the tab. If you don't set a style and you display a single code block inside of the tab, its default styling will adapt to that of a `code` block. Otherwise `default` is used.

- by severity: `caution`, `important`, `info`, `note`, `tip`, `warning`
- by brand color: `primary`, `secondary`, `accent`
- by color: `blue`, `cyan`, `green`, `grey`, `magenta`, `orange`, `red`
- by special color: `default`, `transparent`, `code` | | **color** | see notes | The [CSS color value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) to be used. If not set, the chosen color depends on the **style**. Any given value will overwrite the default.

- for severity styles: a nice matching color for the severity
- for all other styles: the corresponding color | | **title** | see notes | Arbitrary title for the tab. Depending on the **style** there may be a default title. Any given value will overwrite the default.

- for severity styles: the matching title for the severity
- for all other styles: _<empty>_

If you want no title for a severity style, you have to set this parameter to `" "` (a non empty string filled with spaces) | | **icon** | see notes | [Font Awesome icon name](shortcodes/icon#finding-an-icon) set to the left of the title. Depending on the **style** there may be a default icon. Any given value will overwrite the default.

- for severity styles: a nice matching icon for the severity
- for all other styles: _<empty>_

If you want no icon for a severity style, you have to set this parameter to `" "` (a non empty string filled with spaces) | diff --git a/i18n/ar.toml b/i18n/ar.toml index 66bac7e388..6ac0454373 100644 --- a/i18n/ar.toml +++ b/i18n/ar.toml @@ -67,12 +67,18 @@ other = "KB" [Megabyte-symbol] other = "MB" -[note] -other = "ملاحظه" +[caution] +other = "الحذر" + +[important] +other = "مهم" [info] other = "معلومات" +[note] +other = "ملاحظه" + [tip] other = "بقشيش" diff --git a/i18n/art-x-pir.toml b/i18n/art-x-pir.toml index 214990a430..228f926b7a 100644 --- a/i18n/art-x-pir.toml +++ b/i18n/art-x-pir.toml @@ -67,12 +67,18 @@ other = "KB" [Megabyte-symbol] other = "MB" -[note] -other = "Avast" +[caution] +other = "Behold" + +[important] +other = "Imporrrt'nt" [info] other = "Ahoi" +[note] +other = "Avast" + [tip] other = "Smarrrt arrrse" diff --git a/i18n/cs.toml b/i18n/cs.toml index 9d76088e41..6c2febf149 100644 --- a/i18n/cs.toml +++ b/i18n/cs.toml @@ -67,12 +67,18 @@ other = "KB" [Megabyte-symbol] other = "MB" -[note] -other = "Poznámka" +[caution] +other = "Upozornění" + +[important] +other = "Důležité" [info] other = "Info" +[note] +other = "Poznámka" + [tip] other = "Tip" diff --git a/i18n/de.toml b/i18n/de.toml index ba55797494..9cfc46808e 100644 --- a/i18n/de.toml +++ b/i18n/de.toml @@ -67,12 +67,18 @@ other = "KB" [Megabyte-symbol] other = "MB" -[note] -other = "Anmerkung" +[caution] +other = "Vorsicht" + +[important] +other = "Wichtig" [info] other = "Info" +[note] +other = "Anmerkung" + [tip] other = "Tipp" diff --git a/i18n/en.toml b/i18n/en.toml index e7889c70bf..1cf36e1e8b 100644 --- a/i18n/en.toml +++ b/i18n/en.toml @@ -67,12 +67,18 @@ other = "KB" [Megabyte-symbol] other = "MB" -[note] -other = "Note" +[caution] +other = "Caution" + +[important] +other = "Important" [info] other = "Info" +[note] +other = "Note" + [tip] other = "Tip" diff --git a/i18n/es.toml b/i18n/es.toml index bfa9921432..6812d34190 100644 --- a/i18n/es.toml +++ b/i18n/es.toml @@ -67,12 +67,18 @@ other = "KB" [Megabyte-symbol] other = "MB" -[note] -other = "Nota" +[caution] +other = "Precaución" + +[important] +other = "Importante" [info] other = "Información" +[note] +other = "Nota" + [tip] other = "Consejo" diff --git a/i18n/fi.toml b/i18n/fi.toml index 37e7bbfb50..f6ffca2bef 100644 --- a/i18n/fi.toml +++ b/i18n/fi.toml @@ -67,12 +67,18 @@ other = "KT" [Megabyte-symbol] other = "MT" -[note] -other = "Huom" +[caution] +other = "Varoitus" + +[important] +other = "Tärkeä" [info] other = "Info" +[note] +other = "Huom" + [tip] other = "Vihje" diff --git a/i18n/fr.toml b/i18n/fr.toml index a212fcd88c..19b418b67b 100644 --- a/i18n/fr.toml +++ b/i18n/fr.toml @@ -67,12 +67,18 @@ other = "ko" [Megabyte-symbol] other = "Mo" -[note] -other = "Remarque" +[caution] +other = "Attention" + +[important] +other = "Important" [info] other = "Information" +[note] +other = "Remarque" + [tip] other = "Astuce" diff --git a/i18n/hi.toml b/i18n/hi.toml index 594875c907..fe2173ca98 100644 --- a/i18n/hi.toml +++ b/i18n/hi.toml @@ -67,12 +67,18 @@ other = "KB" [Megabyte-symbol] other = "MB" -[note] -other = "नोट" +[caution] +other = "सावधानी" + +[important] +other = "महत्वपूर्ण" [info] other = "जानकारी" +[note] +other = "नोट" + [tip] other = "नोक" diff --git a/i18n/hu.toml b/i18n/hu.toml index 6c08811ecd..1463a724fd 100644 --- a/i18n/hu.toml +++ b/i18n/hu.toml @@ -67,12 +67,18 @@ other = "KB" [Megabyte-symbol] other = "MB" -[note] -other = "Jegyzet" +[caution] +other = "Vigyázat" + +[important] +other = "Fontos" [info] other = "Infó" +[note] +other = "Jegyzet" + [tip] other = "Tipp" diff --git a/i18n/id.toml b/i18n/id.toml index 51a01df400..406a93b466 100644 --- a/i18n/id.toml +++ b/i18n/id.toml @@ -67,12 +67,18 @@ other = "KB" [Megabyte-symbol] other = "MB" -[note] -other = "Nota" +[caution] +other = "Perhatian" + +[important] +other = "Penting" [info] other = "Info" +[note] +other = "Nota" + [tip] other = "Ujung" diff --git a/i18n/it.toml b/i18n/it.toml index d3c69e1b5d..bc2cb8198e 100644 --- a/i18n/it.toml +++ b/i18n/it.toml @@ -67,12 +67,18 @@ other = "KB" [Megabyte-symbol] other = "MB" -[note] -other = "Nota" +[caution] +other = "Attenzione" + +[important] +other = "Importante" [info] other = "Informazione" +[note] +other = "Nota" + [tip] other = "Suggerimento" diff --git a/i18n/ja.toml b/i18n/ja.toml index b3351f47e6..6d1d251ee8 100644 --- a/i18n/ja.toml +++ b/i18n/ja.toml @@ -67,12 +67,18 @@ other = "KB" [Megabyte-symbol] other = "MB" -[note] -other = "メモ" +[caution] +other = "注意" + +[important] +other = "重要" [info] other = "情報" +[note] +other = "メモ" + [tip] other = "ヒント" diff --git a/i18n/ko.toml b/i18n/ko.toml index ed53fe8dfd..332060d807 100644 --- a/i18n/ko.toml +++ b/i18n/ko.toml @@ -67,14 +67,20 @@ other = "KB" [Megabyte-symbol] other = "MB" -[note] -# code snippent 내의 comment(주석)과의 혼동 방지를 위해 위와 같이 번역합니다. -other = "주" +[caution] +other = "주의" + +[important] +other = "중요" [info] # 예제 내용상 learn theme 참고 용도로 사용되어 위와 같이 번역합니다. other = "참고" +[note] +# code snippent 내의 comment(주석)과의 혼동 방지를 위해 위와 같이 번역합니다. +other = "주" + [tip] # 우리말 순화어로 기록 가능하고, note, info와 의미상 좀 더 명확한 구분이 되어 아래처럼 기록합니다. other = "도움말" diff --git a/i18n/nl.toml b/i18n/nl.toml index 870c5adefe..c8d5344995 100644 --- a/i18n/nl.toml +++ b/i18n/nl.toml @@ -67,12 +67,18 @@ other = "KB" [Megabyte-symbol] other = "MB" -[note] -other = "Notitie" +[caution] +other = "Let op" + +[important] +other = "Belangrijk" [info] other = "Info" +[note] +other = "Notitie" + [tip] other = "Fooi" diff --git a/i18n/pl.toml b/i18n/pl.toml index a91a852fa1..bfdc7af750 100644 --- a/i18n/pl.toml +++ b/i18n/pl.toml @@ -67,12 +67,18 @@ other = "KB" [Megabyte-symbol] other = "MB" -[note] -other = "Uwaga" +[caution] +other = "Ostrożność" + +[important] +other = "Ważne" [info] other = "Info" +[note] +other = "Uwaga" + [tip] other = "Porada" diff --git a/i18n/pt.toml b/i18n/pt.toml index 9bb8293c66..812be0b40d 100644 --- a/i18n/pt.toml +++ b/i18n/pt.toml @@ -67,12 +67,18 @@ other = "KB" [Megabyte-symbol] other = "MB" -[note] -other = "Nota" +[caution] +other = "Cuidado" + +[important] +other = "Important" [info] other = "Informação" +[note] +other = "Nota" + [tip] other = "Dica" diff --git a/i18n/ro.toml b/i18n/ro.toml index bb91e47ed2..e0920d2640 100644 --- a/i18n/ro.toml +++ b/i18n/ro.toml @@ -67,12 +67,18 @@ other = "KB" [Megabyte-symbol] other = "MB" -[note] -other = "Notă" +[caution] +other = "Atenție" + +[important] +other = "Important" [info] other = "Info" +[note] +other = "Notă" + [tip] other = "Sfat" diff --git a/i18n/ru.toml b/i18n/ru.toml index fa790ff20f..b22111ad7c 100644 --- a/i18n/ru.toml +++ b/i18n/ru.toml @@ -67,12 +67,18 @@ other = "КБ" [Megabyte-symbol] other = "МБ" -[note] -other = "Заметка" +[caution] +other = "Внимание" + +[important] +other = "Важно" [info] other = "Информация" +[note] +other = "Заметка" + [tip] other = "Совет" diff --git a/i18n/sw.toml b/i18n/sw.toml index 5cb2a01d3b..5b83e32f76 100644 --- a/i18n/sw.toml +++ b/i18n/sw.toml @@ -67,12 +67,18 @@ other = "KB" [Megabyte-symbol] other = "MB" -[note] -other = "Kumbuka" +[caution] +other = "Tahadhari" + +[important] +other = "Muhimu" [info] other = "Habari" +[note] +other = "Kumbuka" + [tip] other = "Kidokezo" diff --git a/i18n/tr.toml b/i18n/tr.toml index 054c0861a4..7cac9f25b7 100644 --- a/i18n/tr.toml +++ b/i18n/tr.toml @@ -67,12 +67,18 @@ other = "KB" [Megabyte-symbol] other = "MB" -[note] -other = "Not" +[caution] +other = "Dikkat" + +[important] +other = "Önemli" [info] other = "Bilgi" +[note] +other = "Not" + [tip] other = "Bahşiş" diff --git a/i18n/vi.toml b/i18n/vi.toml index d1f9af62c4..3767751fa8 100644 --- a/i18n/vi.toml +++ b/i18n/vi.toml @@ -70,12 +70,18 @@ other = "KB" [Megabyte-symbol] other = "MB" -[note] -other = "Ghi chú" +[caution] +other = "Thận trọng" + +[important] +other = "Quan trọng" [info] other = "Thông tin" +[note] +other = "Ghi chú" + [tip] other = "Mẹo vặt" diff --git a/i18n/zh-CN.toml b/i18n/zh-CN.toml index b1d7b40789..513a553070 100644 --- a/i18n/zh-CN.toml +++ b/i18n/zh-CN.toml @@ -67,12 +67,18 @@ other = "KB" [Megabyte-symbol] other = "MB" -[note] -other = "注释" +[caution] +other = "注意事项" + +[important] +other = "重要" [info] other = "信息" +[note] +other = "注释" + [tip] other = "提示" diff --git a/i18n/zh-Hans.toml b/i18n/zh-Hans.toml index b1d7b40789..513a553070 100644 --- a/i18n/zh-Hans.toml +++ b/i18n/zh-Hans.toml @@ -67,12 +67,18 @@ other = "KB" [Megabyte-symbol] other = "MB" -[note] -other = "注释" +[caution] +other = "注意事项" + +[important] +other = "重要" [info] other = "信息" +[note] +other = "注释" + [tip] other = "提示" diff --git a/i18n/zh-Hant.toml b/i18n/zh-Hant.toml index 49509135ad..64e044bc44 100644 --- a/i18n/zh-Hant.toml +++ b/i18n/zh-Hant.toml @@ -67,12 +67,18 @@ other = "KB" [Megabyte-symbol] other = "MB" -[note] -other = "註釋" +[caution] +other = "注意事項" + +[important] +other = "重要" [info] other = "資訊" +[note] +other = "註釋" + [tip] other = "提示" diff --git a/i18n/zh-TW.toml b/i18n/zh-TW.toml index 49509135ad..64e044bc44 100644 --- a/i18n/zh-TW.toml +++ b/i18n/zh-TW.toml @@ -67,12 +67,18 @@ other = "KB" [Megabyte-symbol] other = "MB" -[note] -other = "註釋" +[caution] +other = "注意事項" + +[important] +other = "重要" [info] other = "資訊" +[note] +other = "註釋" + [tip] other = "提示" diff --git a/i18n/zh.toml b/i18n/zh.toml index b1d7b40789..513a553070 100644 --- a/i18n/zh.toml +++ b/i18n/zh.toml @@ -67,12 +67,18 @@ other = "KB" [Megabyte-symbol] other = "MB" -[note] -other = "注释" +[caution] +other = "注意事项" + +[important] +other = "重要" [info] other = "信息" +[note] +other = "注释" + [tip] other = "提示" diff --git a/layouts/_default/_markup/render-blockquote.html b/layouts/_default/_markup/render-blockquote.html new file mode 100644 index 0000000000..40b02c1c65 --- /dev/null +++ b/layouts/_default/_markup/render-blockquote.html @@ -0,0 +1,19 @@ +{{- $alerttype := .AlertType }} +{{- $text := .Text }} +{{- if not site.Params.disableBlockquoteNoticeSupport }} + {{- range findRESubmatch "^(

)?\\[!(\\w+)\\]\\n(.*?)(

)?\\s*$" $text 1 }} + {{- $alerttype = lower (index . 2) }} + {{- $text = printf "%s%s%s" (index . 1) (index . 3) (index . 4) }} + {{- end }} +{{- end }} +{{- if $alerttype }} + {{- partial "shortcodes/notice.html" (dict + "page" .Page + "style" $alerttype + "content" $text + ) }} +{{- else }} +
+ {{- $text | safeHTML }} +
+{{- end }} \ No newline at end of file diff --git a/layouts/partials/shortcodes/attachments.html b/layouts/partials/shortcodes/attachments.html index 988909bf96..061c5675a9 100644 --- a/layouts/partials/shortcodes/attachments.html +++ b/layouts/partials/shortcodes/attachments.html @@ -12,19 +12,23 @@ {{- end }} {{- $title := .title }} {{- if not $title }} + {{- if eq $style "caution" }}{{ $title = $style | T }}{{ end }} + {{- if eq $style "important" }}{{ $title = $style | T }}{{ end }} {{- if eq $style "info" }}{{ $title = $style | T }}{{ end }} - {{- if eq $style "warning" }}{{ $title = $style | T }}{{ end }} {{- if eq $style "note" }}{{ $title = $style | T }}{{ end }} {{- if eq $style "tip" }}{{ $title = $style | T }}{{ end }} + {{- if eq $style "warning" }}{{ $title = $style | T }}{{ end }} {{- end }} {{- $title = trim ($title | default ("Attachments-label" | T)) " " }} {{- $icon := .icon | default "" }} {{- if and (not $icon) (eq (len $icon) 0) }} {{- $icon = "paperclip" }} + {{- if eq $style "caution" }}{{ $icon = default "hand" }}{{ end }} + {{- if eq $style "important" }}{{ $icon = default "bolt" }}{{ end }} {{- if eq $style "info" }}{{ $icon = default "info-circle" }}{{ end }} - {{- if eq $style "warning" }}{{ $icon = default "exclamation-triangle" }}{{ end }} {{- if eq $style "note" }}{{ $icon = default "exclamation-circle" }}{{ end }} {{- if eq $style "tip" }}{{ $icon = default "lightbulb" }}{{ end }} + {{- if eq $style "warning" }}{{ $icon = default "exclamation-triangle" }}{{ end }} {{- end }} {{- $icon = trim $icon " " }} {{- if and $icon (not (findRE ".*?\\bfa-\\w.*?" $icon)) }} diff --git a/layouts/partials/shortcodes/badge.html b/layouts/partials/shortcodes/badge.html index ec8cb58ad0..240c721f82 100644 --- a/layouts/partials/shortcodes/badge.html +++ b/layouts/partials/shortcodes/badge.html @@ -8,18 +8,22 @@ {{- $style := .style | default "default" }} {{- $title := .title }} {{- if not $title }} + {{- if eq $style "caution" }}{{ $title = $style | T }}{{ end }} + {{- if eq $style "important" }}{{ $title = $style | T }}{{ end }} {{- if eq $style "info" }}{{ $title = $style | T }}{{ end }} - {{- if eq $style "warning" }}{{ $title = $style | T }}{{ end }} {{- if eq $style "note" }}{{ $title = $style | T }}{{ end }} {{- if eq $style "tip" }}{{ $title = $style | T }}{{ end }} + {{- if eq $style "warning" }}{{ $title = $style | T }}{{ end }} {{- end }} {{- $title = trim $title " " }} {{- $icon := .icon | default "" }} {{- if and (not $icon) (eq (len $icon) 0) }} + {{- if eq $style "caution" }}{{ $icon = default "hand" }}{{ end }} + {{- if eq $style "important" }}{{ $icon = default "bolt" }}{{ end }} {{- if eq $style "info" }}{{ $icon = default "info-circle" }}{{ end }} - {{- if eq $style "warning" }}{{ $icon = default "exclamation-triangle" }}{{ end }} {{- if eq $style "note" }}{{ $icon = default "exclamation-circle" }}{{ end }} {{- if eq $style "tip" }}{{ $icon = default "lightbulb" }}{{ end }} + {{- if eq $style "warning" }}{{ $icon = default "exclamation-triangle" }}{{ end }} {{- end }} {{- $icon = trim $icon " " }} {{- if and $icon (not (findRE ".*?\\bfa-\\w.*?" $icon)) }} diff --git a/layouts/partials/shortcodes/button.html b/layouts/partials/shortcodes/button.html index fe5f78414e..c74f8dcdfe 100644 --- a/layouts/partials/shortcodes/button.html +++ b/layouts/partials/shortcodes/button.html @@ -32,18 +32,22 @@ {{- end }} {{- $title := .title | default ($content) }} {{- if not $title }} + {{- if eq $style "caution" }}{{ $title = $style | T }}{{ end }} + {{- if eq $style "important" }}{{ $title = $style | T }}{{ end }} {{- if eq $style "info" }}{{ $title = $style | T }}{{ end }} - {{- if eq $style "warning" }}{{ $title = $style | T }}{{ end }} {{- if eq $style "note" }}{{ $title = $style | T }}{{ end }} {{- if eq $style "tip" }}{{ $title = $style | T }}{{ end }} + {{- if eq $style "warning" }}{{ $title = $style | T }}{{ end }} {{- end }} {{- $title = trim $title " " }} {{- $icon := .icon | default "" }} {{- if and (not $icon) (eq (len $icon) 0) }} + {{- if eq $style "caution" }}{{ $icon = default "hand" }}{{ end }} + {{- if eq $style "important" }}{{ $icon = default "bolt" }}{{ end }} {{- if eq $style "info" }}{{ $icon = default "info-circle" }}{{ end }} - {{- if eq $style "warning" }}{{ $icon = default "exclamation-triangle" }}{{ end }} {{- if eq $style "note" }}{{ $icon = default "exclamation-circle" }}{{ end }} {{- if eq $style "tip" }}{{ $icon = default "lightbulb" }}{{ end }} + {{- if eq $style "warning" }}{{ $icon = default "exclamation-triangle" }}{{ end }} {{- end }} {{- $icon = trim $icon " " }} {{- if and $icon (not (findRE ".*?\\bfa-\\w.*?" $icon)) }} diff --git a/layouts/partials/shortcodes/notice.html b/layouts/partials/shortcodes/notice.html index 67e35f6456..78b08afaee 100644 --- a/layouts/partials/shortcodes/notice.html +++ b/layouts/partials/shortcodes/notice.html @@ -8,18 +8,22 @@ {{- $style := .style | default "default" }} {{- $title := .title }} {{- if not $title }} + {{- if eq $style "caution" }}{{ $title = $style | T }}{{ end }} + {{- if eq $style "important" }}{{ $title = $style | T }}{{ end }} {{- if eq $style "info" }}{{ $title = $style | T }}{{ end }} - {{- if eq $style "warning" }}{{ $title = $style | T }}{{ end }} {{- if eq $style "note" }}{{ $title = $style | T }}{{ end }} {{- if eq $style "tip" }}{{ $title = $style | T }}{{ end }} + {{- if eq $style "warning" }}{{ $title = $style | T }}{{ end }} {{- end }} {{- $title = trim $title " " }} {{- $icon := .icon | default "" }} {{- if and (not $icon) (eq (len $icon) 0) }} + {{- if eq $style "caution" }}{{ $icon = default "hand" }}{{ end }} + {{- if eq $style "important" }}{{ $icon = default "bolt" }}{{ end }} {{- if eq $style "info" }}{{ $icon = default "info-circle" }}{{ end }} - {{- if eq $style "warning" }}{{ $icon = default "exclamation-triangle" }}{{ end }} {{- if eq $style "note" }}{{ $icon = default "exclamation-circle" }}{{ end }} {{- if eq $style "tip" }}{{ $icon = default "lightbulb" }}{{ end }} + {{- if eq $style "warning" }}{{ $icon = default "exclamation-triangle" }}{{ end }} {{- end }} {{- $icon = trim $icon " " }} {{- if and $icon (not (findRE ".*?\\bfa-\\w.*?" $icon)) }} diff --git a/layouts/partials/shortcodes/resources.html b/layouts/partials/shortcodes/resources.html index 64dcf00754..501c5eadcf 100644 --- a/layouts/partials/shortcodes/resources.html +++ b/layouts/partials/shortcodes/resources.html @@ -11,19 +11,23 @@ {{- end }} {{- $title := .title }} {{- if not $title }} + {{- if eq $style "caution" }}{{ $title = $style | T }}{{ end }} + {{- if eq $style "important" }}{{ $title = $style | T }}{{ end }} {{- if eq $style "info" }}{{ $title = $style | T }}{{ end }} - {{- if eq $style "warning" }}{{ $title = $style | T }}{{ end }} {{- if eq $style "note" }}{{ $title = $style | T }}{{ end }} {{- if eq $style "tip" }}{{ $title = $style | T }}{{ end }} + {{- if eq $style "warning" }}{{ $title = $style | T }}{{ end }} {{- end }} {{- $title = trim ($title | default ("Attachments-label" | T)) " " }} {{- $icon := .icon | default "" }} {{- if and (not $icon) (eq (len $icon) 0) }} {{- $icon = "paperclip" }} + {{- if eq $style "caution" }}{{ $icon = default "hand" }}{{ end }} + {{- if eq $style "important" }}{{ $icon = default "bolt" }}{{ end }} {{- if eq $style "info" }}{{ $icon = default "info-circle" }}{{ end }} - {{- if eq $style "warning" }}{{ $icon = default "exclamation-triangle" }}{{ end }} {{- if eq $style "note" }}{{ $icon = default "exclamation-circle" }}{{ end }} {{- if eq $style "tip" }}{{ $icon = default "lightbulb" }}{{ end }} + {{- if eq $style "warning" }}{{ $icon = default "exclamation-triangle" }}{{ end }} {{- end }} {{- $icon = trim $icon " " }} {{- if and $icon (not (findRE ".*?\\bfa-\\w.*?" $icon)) }} diff --git a/layouts/partials/shortcodes/tabs.html b/layouts/partials/shortcodes/tabs.html index 81b31d31eb..543099de7e 100644 --- a/layouts/partials/shortcodes/tabs.html +++ b/layouts/partials/shortcodes/tabs.html @@ -19,18 +19,22 @@ {{- $style := .style | default $style | default (cond (ne $color "") "filled" "initial") }} {{- $title := .title }} {{- if not $title }} + {{- if eq $style "caution" }}{{ $title = $style | T }}{{ end }} + {{- if eq $style "important" }}{{ $title = $style | T }}{{ end }} {{- if eq $style "info" }}{{ $title = $style | T }}{{ end }} - {{- if eq $style "warning" }}{{ $title = $style | T }}{{ end }} {{- if eq $style "note" }}{{ $title = $style | T }}{{ end }} {{- if eq $style "tip" }}{{ $title = $style | T }}{{ end }} + {{- if eq $style "warning" }}{{ $title = $style | T }}{{ end }} {{- end }} {{- $title = trim $title " " }} {{- $icon := .icon | default "" }} {{- if and (not $icon) (eq (len $icon) 0) }} + {{- if eq $style "caution" }}{{ $icon = default "hand" }}{{ end }} + {{- if eq $style "important" }}{{ $icon = default "bolt" }}{{ end }} {{- if eq $style "info" }}{{ $icon = default "info-circle" }}{{ end }} - {{- if eq $style "warning" }}{{ $icon = default "exclamation-triangle" }}{{ end }} {{- if eq $style "note" }}{{ $icon = default "exclamation-circle" }}{{ end }} {{- if eq $style "tip" }}{{ $icon = default "lightbulb" }}{{ end }} + {{- if eq $style "warning" }}{{ $icon = default "exclamation-triangle" }}{{ end }} {{- end }} {{- $icon = trim $icon " " }} {{- if and $icon (not (findRE ".*?\\bfa-\\w.*?" $icon)) }} @@ -50,18 +54,22 @@ {{- $style = .style | default (cond (ne $color "") "filled" "initial") }} {{- $title = .title }} {{- if not $title }} + {{- if eq $style "caution" }}{{ $title = $style | T }}{{ end }} + {{- if eq $style "important" }}{{ $title = $style | T }}{{ end }} {{- if eq $style "info" }}{{ $title = $style | T }}{{ end }} - {{- if eq $style "warning" }}{{ $title = $style | T }}{{ end }} {{- if eq $style "note" }}{{ $title = $style | T }}{{ end }} {{- if eq $style "tip" }}{{ $title = $style | T }}{{ end }} + {{- if eq $style "warning" }}{{ $title = $style | T }}{{ end }} {{- end }} {{- $title = trim $title " " }} {{- $icon = .icon | default "" }} {{- if and (not $icon) (eq (len $icon) 0) }} + {{- if eq $style "caution" }}{{ $icon = default "hand" }}{{ end }} + {{- if eq $style "important" }}{{ $icon = default "bolt" }}{{ end }} {{- if eq $style "info" }}{{ $icon = default "info-circle" }}{{ end }} - {{- if eq $style "warning" }}{{ $icon = default "exclamation-triangle" }}{{ end }} {{- if eq $style "note" }}{{ $icon = default "exclamation-circle" }}{{ end }} {{- if eq $style "tip" }}{{ $icon = default "lightbulb" }}{{ end }} + {{- if eq $style "warning" }}{{ $icon = default "exclamation-triangle" }}{{ end }} {{- end }} {{- $icon = trim $icon " " }} {{- if and $icon (not (findRE ".*?\\bfa-\\w.*?" $icon)) }} diff --git a/static/css/swagger-dark.css b/static/css/swagger-dark.css index 527be0ea90..fdec952523 100644 --- a/static/css/swagger-dark.css +++ b/static/css/swagger-dark.css @@ -1416,17 +1416,21 @@ select:-webkit-autofill { background-image: initial; background-color: rgba(24, 149, 128, 0.1); border-color: rgb(22, 140, 114); + border-color-relearn: var(--INTERNAL-BOX-CYAN-color); } .swagger-ui .opblock.opblock-patch .opblock-summary-method { background-image: initial; background-color: rgb(24, 149, 128); + background-color-relearn: var(--INTERNAL-BOX-CYAN-color); } .swagger-ui .opblock.opblock-patch .opblock-summary { border-color: rgb(22, 140, 114); + border-color-relearn: var(--INTERNAL-BOX-CYAN-color); } .swagger-ui .opblock.opblock-patch .tab-header .tab-item.active h4 span::after { background-image: initial; background-color: rgb(24, 149, 128); + background-color-relearn: var(--INTERNAL-BOX-CYAN-color); } .swagger-ui .opblock.opblock-head { background-image: initial; @@ -1448,17 +1452,21 @@ select:-webkit-autofill { background-image: initial; background-color: rgba(10, 72, 134, 0.1); border-color: rgb(15, 101, 186); + border-color-relearn: var(--INTERNAL-BOX-MAGENTA-color); } .swagger-ui .opblock.opblock-options .opblock-summary-method { background-image: initial; background-color: rgb(10, 72, 134); + background-color-relearn: var(--INTERNAL-BOX-MAGENTA-color); } .swagger-ui .opblock.opblock-options .opblock-summary { border-color: rgb(15, 101, 186); + border-color-relearn: var(--INTERNAL-BOX-MAGENTA-color); } .swagger-ui .opblock.opblock-options .tab-header .tab-item.active h4 span::after { background-image: initial; background-color: rgb(10, 72, 134); + background-color-relearn: var(--INTERNAL-BOX-MAGENTA-color); } .swagger-ui .opblock.opblock-deprecated { background-image: initial; diff --git a/static/css/variables.css b/static/css/variables.css index daa3932baf..aa419c3c58 100644 --- a/static/css/variables.css +++ b/static/css/variables.css @@ -76,24 +76,32 @@ --INTERNAL-BOX-TEXT-color: var(--BOX-TEXT-color, var(--INTERNAL-MAIN-TEXT-color)); --INTERNAL-BOX-BLUE-color: var(--BOX-BLUE-color, rgba( 48, 117, 229, 1 )); + --INTERNAL-BOX-CYAN-color: var(--BOX-CYAN-color, rgba( 45, 190, 200, 1 )); --INTERNAL-BOX-GREEN-color: var(--BOX-GREEN-color, rgba( 42, 178, 24, 1 )); --INTERNAL-BOX-GREY-color: var(--BOX-GREY-color, rgba( 160, 160, 160, 1 )); + --INTERNAL-BOX-MAGENTA-color: var(--BOX-MAGENTA-color, rgba( 229, 50, 210, 1 )); --INTERNAL-BOX-ORANGE-color: var(--BOX-ORANGE-color, rgba( 237, 153, 9, 1 )); --INTERNAL-BOX-RED-color: var(--BOX-RED-color, rgba( 224, 62, 62, 1 )); + --INTERNAL-BOX-CAUTION-color: var(--BOX-CAUTION-color, var(--INTERNAL-BOX-MAGENTA-color)); --INTERNAL-BOX-INFO-color: var(--BOX-INFO-color, var(--INTERNAL-BOX-BLUE-color)); + --INTERNAL-BOX-IMPORTANT-color: var(--BOX-IMPORTANT-color, var(--INTERNAL-BOX-CYAN-color)); --INTERNAL-BOX-NEUTRAL-color: var(--BOX-NEUTRAL-color, var(--INTERNAL-BOX-GREY-color)); --INTERNAL-BOX-NOTE-color: var(--BOX-NOTE-color, var(--INTERNAL-BOX-ORANGE-color)); --INTERNAL-BOX-TIP-color: var(--BOX-TIP-color, var(--INTERNAL-BOX-GREEN-color)); --INTERNAL-BOX-WARNING-color: var(--BOX-WARNING-color, var(--INTERNAL-BOX-RED-color)); --INTERNAL-BOX-BLUE-TEXT-color: var(--BOX-BLUE-TEXT-color, var(--INTERNAL-BOX-TEXT-color)); + --INTERNAL-BOX-CYAN-TEXT-color: var(--BOX-CYAN-TEXT-color, var(--INTERNAL-BOX-TEXT-color)); --INTERNAL-BOX-GREEN-TEXT-color: var(--BOX-GREEN-TEXT-color, var(--INTERNAL-BOX-TEXT-color)); --INTERNAL-BOX-GREY-TEXT-color: var(--BOX-GREY-TEXT-color, var(--INTERNAL-BOX-TEXT-color)); + --INTERNAL-BOX-MAGENTA-TEXT-color: var(--BOX-MAGENTA-TEXT-color, var(--INTERNAL-BOX-TEXT-color)); --INTERNAL-BOX-ORANGE-TEXT-color: var(--BOX-ORANGE-TEXT-color, var(--INTERNAL-BOX-TEXT-color)); --INTERNAL-BOX-RED-TEXT-color: var(--BOX-RED-TEXT-color, var(--INTERNAL-BOX-TEXT-color)); + --INTERNAL-BOX-CAUTION-TEXT-color: var(--BOX-CAUTION-TEXT-color, var(--INTERNAL-BOX-MAGENTA-TEXT-color)); --INTERNAL-BOX-INFO-TEXT-color: var(--BOX-INFO-TEXT-color, var(--INTERNAL-BOX-BLUE-TEXT-color)); + --INTERNAL-BOX-IMPORTANT-TEXT-color: var(--BOX-IMPORTANT-TEXT-color, var(--INTERNAL-BOX-CYAN-TEXT-color)); --INTERNAL-BOX-NEUTRAL-TEXT-color: var(--BOX-NEUTRAL-TEXT-color, var(--INTERNAL-BOX-GREY-TEXT-color)); --INTERNAL-BOX-NOTE-TEXT-color: var(--BOX-NOTE-TEXT-color, var(--INTERNAL-BOX-ORANGE-TEXT-color)); --INTERNAL-BOX-TIP-TEXT-color: var(--BOX-TIP-TEXT-color, var(--INTERNAL-BOX-GREEN-TEXT-color)); diff --git a/static/js/variant.js b/static/js/variant.js index ddc82e4b5c..56f4bb6c30 100644 --- a/static/js/variant.js +++ b/static/js/variant.js @@ -573,6 +573,11 @@ var variants = { { name: 'BOX-BLUE-TEXT-color', group: 'colored boxes', fallback: 'BOX-TEXT-color', tooltip: 'text color of blue boxes', }, { name: 'BOX-INFO-TEXT-color', group: 'colored boxes', fallback: 'BOX-BLUE-TEXT-color', tooltip: 'text color of info boxes', }, + { name: 'BOX-CYAN-color', group: 'colored boxes', default: 'rgba( 45, 190, 200, 1 )', tooltip: 'background color of cyan boxes', }, + { name: 'BOX-IMPORTANT-color', group: 'colored boxes', fallback: 'BOX-CYAN-color', tooltip: 'background color of info boxes', }, + { name: 'BOX-CYAN-TEXT-color', group: 'colored boxes', fallback: 'BOX-TEXT-color', tooltip: 'text color of cyan boxes', }, + { name: 'BOX-IMPORTANT-TEXT-color', group: 'colored boxes', fallback: 'BOX-CYAN-TEXT-color', tooltip: 'text color of info boxes', }, + { name: 'BOX-GREEN-color', group: 'colored boxes', default: 'rgba( 42, 178, 24, 1 )', tooltip: 'background color of green boxes', }, { name: 'BOX-TIP-color', group: 'colored boxes', fallback: 'BOX-GREEN-color', tooltip: 'background color of tip boxes', }, { name: 'BOX-GREEN-TEXT-color', group: 'colored boxes', fallback: 'BOX-TEXT-color', tooltip: 'text color of green boxes', }, @@ -583,6 +588,11 @@ var variants = { { name: 'BOX-GREY-TEXT-color', group: 'colored boxes', fallback: 'BOX-TEXT-color', tooltip: 'text color of grey boxes', }, { name: 'BOX-NEUTRAL-TEXT-color', group: 'colored boxes', fallback: 'BOX-GREY-TEXT-color', tooltip: 'text color of neutral boxes', }, + { name: 'BOX-MAGENTA-color', group: 'colored boxes', default: 'rgba( 229, 50, 210, 1 )', tooltip: 'background color of magenta boxes', }, + { name: 'BOX-CAUTION-color', group: 'colored boxes', fallback: 'BOX-MAGENTA-color', tooltip: 'background color of info boxes', }, + { name: 'BOX-MAGENTA-TEXT-color', group: 'colored boxes', fallback: 'BOX-TEXT-color', tooltip: 'text color of magenta boxes', }, + { name: 'BOX-CAUTION-TEXT-color', group: 'colored boxes', fallback: 'BOX-MAGENTA-TEXT-color', tooltip: 'text color of info boxes', }, + { name: 'BOX-ORANGE-color', group: 'colored boxes', default: 'rgba( 237, 153, 9, 1 )', tooltip: 'background color of orange boxes', }, { name: 'BOX-NOTE-color', group: 'colored boxes', fallback: 'BOX-ORANGE-color', tooltip: 'background color of note boxes', }, { name: 'BOX-ORANGE-TEXT-color', group: 'colored boxes', fallback: 'BOX-TEXT-color', tooltip: 'text color of orange boxes', },