From 4528a3a5b18df09e9ceb0354a5903b5a93c87009 Mon Sep 17 00:00:00 2001 From: Andreas Deininger Date: Wed, 11 May 2022 16:49:45 +0200 Subject: [PATCH] Shortcodes for tabbed panes: - allow tab content in markdown - tab(s) can now be disabled - improve storage of active language - new option to turn storage of active language off - improvements and fixes - documentation update --- assets/scss/main.scss | 1 + assets/scss/shortcodes.scss | 2 + assets/scss/shortcodes/cards-pane.scss | 19 +++ assets/scss/shortcodes/tabbed-pane.scss | 39 ++++++ layouts/shortcodes/tab.html | 24 ++-- layouts/shortcodes/tabpane.html | 112 +++++++++++++++--- package.json | 2 +- static/css/shortcodes.css | 2 - static/css/shortcodes/cards-pane.css | 21 ---- static/css/shortcodes/tabbed-pane.css | 18 --- static/js/tabpane-persist.js | 4 +- .../Adding content/Shortcodes/flags/de.png | Bin 0 -> 1428 bytes .../Adding content/Shortcodes/flags/tz.png | Bin 0 -> 2139 bytes .../Adding content/Shortcodes/flags/uk.png | Bin 0 -> 2749 bytes .../docs/Adding content/Shortcodes/index.md | 62 ++++++---- 15 files changed, 212 insertions(+), 94 deletions(-) create mode 100644 assets/scss/shortcodes.scss create mode 100644 assets/scss/shortcodes/cards-pane.scss create mode 100644 assets/scss/shortcodes/tabbed-pane.scss delete mode 100644 static/css/shortcodes.css delete mode 100644 static/css/shortcodes/cards-pane.css delete mode 100644 static/css/shortcodes/tabbed-pane.css create mode 100644 userguide/content/en/docs/Adding content/Shortcodes/flags/de.png create mode 100644 userguide/content/en/docs/Adding content/Shortcodes/flags/tz.png create mode 100644 userguide/content/en/docs/Adding content/Shortcodes/flags/uk.png diff --git a/assets/scss/main.scss b/assets/scss/main.scss index f1a1aa6f7d..ed21add190 100644 --- a/assets/scss/main.scss +++ b/assets/scss/main.scss @@ -28,6 +28,7 @@ @import "pageinfo"; @import "taxonomy"; @import "drawio"; +@import "shortcodes"; @if $td-enable-google-fonts { @import url($web-font-path); diff --git a/assets/scss/shortcodes.scss b/assets/scss/shortcodes.scss new file mode 100644 index 0000000000..5d1f94f62c --- /dev/null +++ b/assets/scss/shortcodes.scss @@ -0,0 +1,2 @@ +@import "shortcodes/tabbed-pane.scss"; +@import "shortcodes/cards-pane.scss"; diff --git a/assets/scss/shortcodes/cards-pane.scss b/assets/scss/shortcodes/cards-pane.scss new file mode 100644 index 0000000000..00f00f9f2f --- /dev/null +++ b/assets/scss/shortcodes/cards-pane.scss @@ -0,0 +1,19 @@ +.card-deck { + max-width: 83%; +} +.card { + max-width: 80%; + .highlight { + border: none; + } +} +.card-body.code { + background-color: #f8f9fa; + padding: 0 0 0 1ex; +} +.card-body { + pre { + margin: 0; + padding: 0 1rem 1rem 1rem; + } +} diff --git a/assets/scss/shortcodes/tabbed-pane.scss b/assets/scss/shortcodes/tabbed-pane.scss new file mode 100644 index 0000000000..15e54700f6 --- /dev/null +++ b/assets/scss/shortcodes/tabbed-pane.scss @@ -0,0 +1,39 @@ +.td-content { + .highlight { + margin: 0rem 0 2rem 0; + } +} +.tab-content { + .tab-pane { + .highlight { + border: none; + max-width: 100%; + } + pre { + border-left: 1px solid rgba(0, 0, 0, 0.125); + border-right: 1px solid rgba(0, 0, 0, 0.125); + border-bottom: 1px solid rgba(0, 0, 0, 0.125); + } + margin: 0rem; + max-width: 80%; + border-left: none; + border-right: none; + border-bottom: none; + } +} + +.tab-body { + font-weight: $font-weight-medium; + background: $gray-100; + color: inherit; + border-radius: 0; + padding: 1.5rem; + + @each $color, $value in $theme-colors { + &-#{$color} { + + border-style: solid; + border-color: $value; + } + } +} diff --git a/layouts/shortcodes/tab.html b/layouts/shortcodes/tab.html index a907de70b5..2a178c23b9 100644 --- a/layouts/shortcodes/tab.html +++ b/layouts/shortcodes/tab.html @@ -1,8 +1,8 @@ {{ with $.Parent }} -{{- if ne $.Parent.Name "tabpane" -}} -{{- errorf "tab must be used within a tabpane block" -}} -{{- end -}} + {{- if ne $.Parent.Name "tabpane" -}} + {{- errorf "shortcode 'tab' must be used within a 'tabpane' block" -}} + {{- end -}} {{- end -}} @@ -11,18 +11,24 @@ {{ $tab := dict "header" $header }} {{ with $.Get "lang" }} -{{ $tab = merge $tab (dict "language" ($.Get "lang")) }} + {{ $tab = merge $tab (dict "language" ($.Get "lang")) }} {{ end }} {{ with $.Get "highlight" }} -{{ $tab = merge $tab (dict "highlight" ($.Get "highlight")) }} + {{ $tab = merge $tab (dict "highlight" ($.Get "highlight")) }} +{{ end }} +{{ with $.Get "code" }} + {{ $tab = merge $tab (dict "code" ($.Get "code")) }} +{{ end }} +{{ with $.Get "disabled" }} + {{ $tab = merge $tab (dict "disabled" ($.Get "disabled")) }} {{ end }} {{ with $.Inner }} - -{{ $tab = merge $tab (dict "content" (trim $.Inner "\n")) }} + + {{ $tab = merge $tab (dict "content" $.Inner ) }} {{ end }} {{ with .Parent }} -{{- $.Parent.Scratch.SetInMap "tabs" (printf "%v" $.Ordinal) $tab -}} + {{- $.Parent.Scratch.SetInMap "tabs" (printf "%v" $.Ordinal) $tab -}} {{ end }} \ No newline at end of file diff --git a/layouts/shortcodes/tabpane.html b/layouts/shortcodes/tabpane.html index 51709a6e4c..1d3e4a7806 100644 --- a/layouts/shortcodes/tabpane.html +++ b/layouts/shortcodes/tabpane.html @@ -1,21 +1,74 @@ - + +{{ with .Get "langEqualsHeader" }} +{{ if ne ( printf "%T" . ) "bool" }} +{{- errorf "shortcode tabpane: parameter 'langEqualsHeader' must be either true or false" -}} +{{ end }} +{{ end }} + +{{ with .Get "code" }} +{{ if ne ( printf "%T" . ) "bool" }} +{{- errorf "shortcode tabpane: parameter 'code' must be either true or false" -}} +{{ end }} +{{ end }} + +{{ with .Get "persistLang" }} +{{ if ne ( printf "%T" . ) "bool" }} +{{- errorf "shortcode tabpane: parameter 'persistLang' must be either true or false" -}} +{{ end }} +{{ end }} + + +{{- $langPane := default "" ($.Get "lang") -}} +{{- $hloptionsPane := default "" ($.Get "highlight") -}} +{{- $codePane := default true ($.Get "code") -}} +{{- $langEqualsHeader := default false ($.Get "langEqualsHeader") -}} +{{- $persistLang := default true ($.Get "persistLang") -}} +{{- $disabled := false -}} +{{- $activeHeaderSet := false -}} +{{- $activeContentSet := false -}} + + {{- .Inner -}} @@ -23,24 +76,47 @@
{{- range $index, $element := $.Scratch.Get "tabs" -}} - {{- $lang := default $.Site.Language.Lang ($.Get "lang") -}} - {{with $.Get "langEqualsHeader"}} - {{ if $.Get "langEqualsHeader"}} - {{ $lang = $element.header }} - {{end}} + {{- $lang := $langPane -}} + {{- if $langEqualsHeader -}} + {{- $lang = $element.header -}} {{end}} - {{- $hloptions := default "" ($.Get "highlight") -}} {{- with $element.language -}} - {{ $lang = $element.language }} + {{- $lang = $element.language -}} {{- end -}} + + {{- $disabled := false -}} + {{- with $element.disabled -}} + {{- $disabled = . }} + {{- end -}} + + {{- $hloptions := $hloptionsPane -}} {{- with $element.highlight -}} - {{ $hloptions = $element.highlight }} + {{- $hloptions = $element.highlight -}} {{- end -}} + + {{- $code := $codePane -}} + {{- with $element.code -}} + {{ if ne ( printf "%T" . ) "bool" }} + {{- errorf "shortcode tab: parameter 'code' must be either true or false" -}} + {{ end }} + {{- $code = . }} + {{- end -}} + {{- $tabid := printf "tabs-%v-%v-tab" $.Ordinal $index | anchorize -}} {{- $entryid := printf "tabs-%v-%v" $.Ordinal $index | anchorize -}} -
- {{- highlight (index . "content") $lang $hloptions -}} + {{ if $code }} + {{- highlight (trim (index . "content") "\n") $lang $hloptions -}} + {{- else -}} + {{- index . "content" -}} + {{- end -}}
+ + {{ if not $disabled }} + {{ $activeContentSet = true }} + {{ end }} + {{ end }}
diff --git a/package.json b/package.json index 4a324c79c8..e7ed5f372a 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,6 @@ "bootstrap": "^4.6.1" }, "devDependencies": { - "hugo-extended": "0.98.0" + "hugo-extended": "0.99.0" } } diff --git a/static/css/shortcodes.css b/static/css/shortcodes.css deleted file mode 100644 index 0aa1c0f830..0000000000 --- a/static/css/shortcodes.css +++ /dev/null @@ -1,2 +0,0 @@ -@import "shortcodes/tabbed-pane.css"; -@import "shortcodes/cards-pane.css"; diff --git a/static/css/shortcodes/cards-pane.css b/static/css/shortcodes/cards-pane.css deleted file mode 100644 index 34c85450dd..0000000000 --- a/static/css/shortcodes/cards-pane.css +++ /dev/null @@ -1,21 +0,0 @@ -.card-deck { - max-width: 83%; -} - -.card { - max-width: 80%; -} - -.card-body.code { - background-color: #f8f9fa; - padding: 0 0 0 1ex; -} - -.card-body pre { - margin: 0; - padding: 0 1rem 1rem 1rem; -} - -.card .highlight { - border: none; -} diff --git a/static/css/shortcodes/tabbed-pane.css b/static/css/shortcodes/tabbed-pane.css deleted file mode 100644 index 3016398728..0000000000 --- a/static/css/shortcodes/tabbed-pane.css +++ /dev/null @@ -1,18 +0,0 @@ -.td-content .highlight { - margin: 0rem 0 2rem 0; -} - -.tab-content .highlight { - border: none; -} - -.tab-content { - margin: 0rem; - max-width: 80%; -} - -.tab-content pre { - border-left: 1px solid rgba(0, 0, 0, 0.125); - border-right: 1px solid rgba(0, 0, 0, 0.125); - border-bottom: 1px solid rgba(0, 0, 0, 0.125); -} diff --git a/static/js/tabpane-persist.js b/static/js/tabpane-persist.js index 8a02bb6d41..66494639c0 100644 --- a/static/js/tabpane-persist.js +++ b/static/js/tabpane-persist.js @@ -2,7 +2,7 @@ if (typeof Storage !== 'undefined') { const activeLanguage = localStorage.getItem('active_language'); if (activeLanguage) { document - .querySelectorAll('.tab-' + activeLanguage) + .querySelectorAll('.persistLang-' + activeLanguage) .forEach((element) => { $('#' + element.id).tab('show'); }); @@ -11,7 +11,7 @@ if (typeof Storage !== 'undefined') { function handleClick(language) { if (typeof Storage !== 'undefined') { localStorage.setItem('active_language', language); - document.querySelectorAll('.tab-' + language) + document.querySelectorAll('.persistLang-' + language) .forEach((element) => { $('#' + element.id).tab('show'); }); diff --git a/userguide/content/en/docs/Adding content/Shortcodes/flags/de.png b/userguide/content/en/docs/Adding content/Shortcodes/flags/de.png new file mode 100644 index 0000000000000000000000000000000000000000..02569513015d8c937cfb247c513ba71d867ce065 GIT binary patch literal 1428 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 qx^;ko9uwc*IDNxiyS?RLV8VKL*5c29n1mSrU}} {{< tab header="C" >}} @@ -327,42 +327,58 @@ object HelloWorld extends App { {{< /tab >}} {{< /tabpane >}} -The Docsy template provides two shortcodes `tabpane` and `tab` that let you easily create tabbed panes. To see how to use them, have a look at the following code block, which renders to a pane with three tabs: +The Docsy template provides two shortcodes `tabpane` and `tab` that let you easily create tabbed panes. To see how to use them, have a look at the following code block, which renders to a pane with one disabled and three active tabs: ```go-html-template -{{}} - {{}} - Welcome! +{{}} + {{}} {{}} - {{}} - Herzlich willkommen! + {{%/* tab header="English" lang="en" */%}} + ![Flag United Kingdom](flags/uk.png) + Welcome! + {{%/* /tab */%}} + {{}} + Herzlich willkommen! + {{}} - {{}} - Karibu sana! - {{}} -{{}} + {{%/* tab header="Swahili" lang="sw" */%}} + ![Flag Tanzania](flags/tz.png) + **Karibu sana!** + {{%/* /tab */%}} +{{%/* /tabpane */%}} ``` This code translates to the tabbed pane below, showing a `Welcome!` greeting in English, German or Swahili: -{{< tabpane >}} -{{< tab header="English" >}} -Welcome! -{{< /tab >}} -{{< tab header="German" lang="de" >}} -Herzlich willkommen! -{{< /tab >}} -{{< tab header="Swahili" >}} -Karibu sana! -{{< /tab >}} +{{< tabpane code=false >}} + {{% tab header="**Languages**:" disabled=true %}} + {{% /tab %}} + {{% tab header="English" lang="en" %}} + ![Flag United Kingdom](flags/uk.png) + **Welcome!** + {{% /tab %}} + {{< tab header="German" lang="de" >}} + Herzlich willkommen! + + {{< /tab >}} + {{% tab header="Swahili" lang="sw" %}} + ![Flag Tanzania](flags/tz.png) + **Karibu sana!** + {{% /tab %}} {{< /tabpane >}} ### Shortcode details Tabbed panes are implemented using two shortcodes: -* The `tabpane` shortcode, which is the container element for the tabs. This shortcode can optionally hold the named parameters `lang` and/or `highlight`. The values of these optional parameters are passed on as second `LANG` and third `OPTIONS` arguments to Hugo's built-in [`highlight`](https://gohugo.io/functions/highlight/) function which is used to render the code blocks of the individual tabs. In case the header text of the tab equals the `language` used in the tab's code block (as in the first tabbed pane example above), you may specify `langEqualsHeader=true` in the surrounding `tabpane` shortcode. Then, the header text of the individual tab is automatically set as `language` parameter of the respective tab. -* The various `tab` shortcodes which actually represent the tabs you would like to show. We recommend specifying the named parameter `header` for each text in order to set the header text of each tab. If needed, you can additionally specify the named parameters `lang` and `highlight` for each tab. This allows you to overwrite the settings given in the parent `tabpane` shortcode. If the language is neither specified in the `tabpane` nor in the `tab`shortcode, it defaults to Hugo's site variable `.Site.Language.Lang`. +* The `tabpane` shortcode, which is the container element for the tabs. This shortcode can optionally hold the named parameters `lang` and/or `highlight`. The values of these optional parameters are passed on as second `LANG` and third `OPTIONS` arguments to Hugo's built-in [`highlight`](https://gohugo.io/functions/highlight/) function which is used to render the code blocks of the individual tabs. In case the header text of the tab equals the language used in the tab's code block (as in the first tabbed pane example above), you may specify `langEqualsHeader=true` in the surrounding `tabpane` shortcode. Then, the header text of the individual tab is automatically set as `lang` parameter of the respective tab. +* The various `tab` shortcodes represent the tabs you would like to show. Specify the named parameter `header` for each tab in order to set the header text of the tab. You can disable a tab by specifying the parameter `disabled=true`. For enabled tabs, there are two modes for content display, `code` representation and _textual_ representation: + * By default, the tab's content is rendered as `code block`. In order to get proper syntax highlighting, specify the named parameter `lang` --and optionally the parameter `highlight`-- for each tab. Parameters set in the parent `tabpane` shortcode will be overwritten. + * If the contents of your tabs should be rendered as text with different styles and with optional images, specify `code=false` as parameter of your `tabpane` (or your `tab`). If your content is markdown, use the percent sign `%` as outermost delimiter of your `tab` shortcode, your markup should look like `{{%/* tab */%}}`Your \*\*markdown\*\* content`{{%/* /tab */%}}`. In case of HTML content, use square brackets `<>` as outermost delimiters: `{{}}`Your <b>HTML</b> content`{{}}`. + +{{% alert title="Info" %}} +By default, the language of the selected tab is stored and preserved between different browser sessions. If the content length within your tabs differs greatly, this may lead to unwanted scrolling when switching between tabs. To disable this unwanted behaviour, specify `persistLang=false` within your `tabpane` shortcode. +{{% /alert %}} ## Card panes