Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Improve tabbed pane: allow right aligned tabs, allow tab groups #1037

Merged
merged 1 commit into from
Jul 13, 2022
Merged

Improve tabbed pane: allow right aligned tabs, allow tab groups #1037

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 9 additions & 12 deletions assets/scss/shortcodes/tabbed-pane.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,20 +6,17 @@
.tab-content {
.tab-pane {
.highlight {
border: none;
max-width: 100%;
margin: 0rem 0 0rem 0;
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;
margin-top: 0rem;
margin-bottom: 1.5rem;
max-width: 80%;
border-left: none;
border-right: none;
border-bottom: none;
}
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);
}
}

.tab-body {
Expand Down
21 changes: 17 additions & 4 deletions layouts/shortcodes/tab.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,12 +21,25 @@
{{ with $.Get "highlight" }}
{{ $tab = merge $tab (dict "highlight" ($.Get "highlight")) }}
{{ end }}
{{ with $.Get "code" }}
{{ $tab = merge $tab (dict "code" ($.Get "code")) }}
{{ with $.Get "text" }}
{{ if ne ( printf "%T" . ) "bool" }}
{{- errorf "shortcode tab: parameter 'text' must be either true or false" -}}
{{ end }}
{{ $tab = merge $tab (dict "text" ($.Get "text")) }}
{{ end }}
{{ with $.Get "right" }}
{{ if ne ( printf "%T" . ) "bool" }}
{{- errorf "shortcode tab: parameter 'right' must be either true or false" -}}
{{ end }}
{{ $tab = merge $tab (dict "rightpush" ($.Get "right")) }}
{{ end }}
{{ with $.Get "disabled" }}
{{ if ne ( printf "%T" . ) "bool" }}
{{- errorf "shortcode tab: parameter 'disabled' must be either true or false" -}}
{{ end }}
{{ $tab = merge $tab (dict "disabled" ($.Get "disabled")) }}
{{ end }}

{{ with $.Inner }}
<!-- Trim any leading and trailing newlines from .Inner, this avoids
spurious lines during syntax highlighting -->
Expand All @@ -35,5 +48,5 @@

<!-- add dict tab to parent's scratchpad -->
{{ with .Parent }}
{{- $.Parent.Scratch.SetInMap "tabs" (printf "%v" $.Ordinal) $tab -}}
{{ end }}
{{- $.Parent.Scratch.SetInMap "tabs" (printf "%02v" $.Ordinal) $tab -}}
{{ end }}
53 changes: 30 additions & 23 deletions layouts/shortcodes/tabpane.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,9 @@
{{ end }}
{{ end }}

{{ with .Get "code" }}
{{ with .Get "text" }}
{{ if ne ( printf "%T" . ) "bool" }}
{{- errorf "shortcode tabpane: parameter 'code' must be either true or false" -}}
{{- errorf "shortcode tabpane: parameter 'text' must be either true or false" -}}
{{ end }}
{{ end }}

Expand All @@ -17,19 +17,27 @@
{{ end }}
{{ end }}

{{ with .Get "right" }}
{{ if ne ( printf "%T" . ) "bool" }}
{{- errorf "shortcode tabpane: parameter 'right' must be either true or false" -}}
{{ end }}
{{ end }}

<!-- Set values given defined within tabpane -->
{{- $langPane := default "" ($.Get "lang") -}}
{{- $hloptionsPane := default "" ($.Get "highlight") -}}
{{- $codePane := default true ($.Get "code") -}}
{{- $textPane := default false ($.Get "text") -}}
{{- $langEqualsHeader := default false ($.Get "langEqualsHeader") -}}
{{- $persistLang := default true ($.Get "persistLang") -}}
{{- $rightPane := default false ($.Get "right") -}}
{{- $disabled := false -}}
{{- $rightpush := false -}}
{{- $activeSet := false -}}

<!-- Scratchpad gets populated through call to .Inner -->
{{- .Inner -}}

<ul class="nav nav-tabs" id="tabs-{{- $.Ordinal -}}" role="tablist">
<ul class="nav nav-tabs{{ if $rightPane }} justify-content-end{{ end }}" id="tabs-{{- $.Ordinal -}}" role="tablist">
{{- range $index, $element := $.Scratch.Get "tabs" -}}

{{- $lang := $langPane -}}
Expand All @@ -42,21 +50,23 @@

{{- $disabled := false -}}
{{- with $element.disabled -}}
{{ if ne ( printf "%T" . ) "bool" }}
{{- errorf "shortcode tab: parameter 'disabled' must be either true or false" -}}
{{ end }}
{{- $disabled = . }}
{{- end -}}

{{- $rightpush := false -}}
{{- with $element.rightpush -}}
{{- $rightpush = . }}
{{- end -}}

<!-- Replace space and +, not valid for css selectors -->
{{- $lang := replaceRE "[\\s+]" "-" $lang -}}

<li class="nav-item">
<li class="nav-item{{ if $rightpush }} ml-auto{{ end }}">
<!-- Generate the IDs for the <a> and the <div> elements -->
{{- $tabid := printf "tabs-%v-%v-tab" $.Ordinal $index | anchorize -}}
{{- $entryid := printf "tabs-%v-%v" $.Ordinal $index | anchorize -}}
{{- $tabid := printf "tabs-%02v-%v-tab" $.Ordinal $index | anchorize -}}
{{- $entryid := printf "tabs-%02v-%v" $.Ordinal $index | anchorize -}}

<a class="nav-link{{ if and ( not $activeSet ) ( not $disabled ) }} active{{ end }}{{ if eq $disabled true }} disabled{{ end }}{{ if ne $lang "" }}{{ if $persistLang }} persistLang-{{- $lang -}}{{ end }}{{ end }}"
<a class="nav-link{{ if and ( not $activeSet ) ( not $disabled ) }} active{{ end }}{{ if $disabled }} disabled{{ end }}{{ if ne $lang "" }}{{ if $persistLang }} persistLang-{{- $lang -}}{{ end }}{{ end }}"
id="{{- $tabid -}}" data-toggle="tab" href="#{{ $entryid }}" role="tab"
{{ if ne $lang "" }}{{- if $persistLang -}}onclick="persistLang({{- $lang -}});"{{end}}{{end}}
aria-controls="{{- $entryid -}}" aria-selected="{{- and ( not $activeSet ) ( not $disabled ) "true" "false" -}}">
Expand Down Expand Up @@ -95,23 +105,20 @@
{{- $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 = . }}
{{- $text := $textPane -}}
{{- with $element.text -}}
{{- $text = . }}
{{- end -}}

{{- $tabid := printf "tabs-%v-%v-tab" $.Ordinal $index | anchorize -}}
{{- $entryid := printf "tabs-%v-%v" $.Ordinal $index | anchorize -}}
{{- $tabid := printf "tabs-%02v-%v-tab" $.Ordinal $index | anchorize -}}
{{- $entryid := printf "tabs-%02v-%v" $.Ordinal $index | anchorize -}}

<div class="{{ if not $code }}tab-body {{end}}tab-pane fade{{ if and ( not $activeSet ) ( not $disabled ) }} show active{{ end }}"
<div class="{{ if $text }}tab-body {{end}}tab-pane fade{{ if and ( not $activeSet ) ( not $disabled ) }} show active{{ end }}"
id="{{ $entryid }}" role="tabpanel" aria-labelled-by="{{ $tabid }}">
{{ if $code }}
{{- highlight (trim (index . "content") "\n") $lang $hloptions -}}
{{ if $text }}
{{- index . "content" -}}
{{- else -}}
{{- index . "content" -}}
{{- highlight (trim (index . "content") "\n") $lang $hloptions -}}
{{- end -}}
</div>

Expand Down
2 changes: 1 addition & 1 deletion netlify.toml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ publish = "userguide/public"
command = "npm run docs-install && npm run build:preview"

[build.environment]
GO_VERSION = "1.18.2"
GO_VERSION = "1.18.3"
HUGO_THEME = "repo"

[context.production]
Expand Down
27 changes: 15 additions & 12 deletions userguide/content/en/docs/Adding content/Shortcodes/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -322,7 +322,7 @@ With this shortcode you can embed external content into a Docsy page as an inlin
{{% alert title="Warning" color="warning" %}}
You can only embed external content from a server when its `X-Frame-Options` is not set or if it specifically allows embedding for your site. See https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options for details.

There are several tools you can use to check if a website can be embedded via iframe - e.g.: https://gf.dev/x-frame-options-test. Be aware that when this test says "Couldn’t find the X-Frame-Options header
There are several tools you can use to check if a website can be embedded via iframe - e.g.: https://gf.dev/x-frame-options-test. Be aware that when this test says "Couldn’t find the X-Frame-Options header
in the response headers." you __CAN__ embed it, but when the test says "Great! X-Frame-Options header was found in the HTTP response headers as highlighted below.", you __CANNOT__ - unless it has been explicitly enabled for your site.
{{% /alert %}}

Expand Down Expand Up @@ -382,17 +382,20 @@ print("Hello World!")
{{< tab "Ruby" >}}
puts "Hello World!"
{{< /tab >}}
{{< tab "Scala" >}}
{{< tab header="Scala" >}}
object HelloWorld extends App {
println("Hello world!")
}
{{< /tab >}}
{{< tab header="Reference" right=true text=true >}}
{{< iframe src="https://www.mycplus.com/featured-articles/hello-world-programs-in-300-programming-languages" >}}
{{< /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 one disabled and three active 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 right aligned pane with one disabled and three active tabs:

```go-html-template
{{</* tabpane code=false */>}}
{{</* tabpane text=true right=true */>}}
{{%/* tab header="**Languages**:" disabled=true /*/%}}
{{%/* tab header="English" lang="en" */%}}
![Flag United Kingdom](flags/uk.png)
Expand All @@ -404,14 +407,14 @@ The Docsy template provides two shortcodes `tabpane` and `tab` that let you easi
{{</* /tab */>}}
{{%/* tab header="Swahili" lang="sw" */%}}
![Flag Tanzania](flags/tz.png)
**Karibu sana!**
**Karibu sana!**
{{%/* /tab */%}}
{{%/* /tabpane */%}}
```

This code translates to the tabbed pane below, showing a `Welcome!` greeting in English, German or Swahili:
This code translates to the right aligned tabbed pane below, showing a `Welcome!` greeting in English, German or Swahili:

{{< tabpane code=false >}}
{{< tabpane text=true right=true >}}
{{% tab header="**Languages**:" disabled=true /%}}
{{% tab header="English" lang="en" %}}
![Flag United Kingdom](flags/uk.png)
Expand All @@ -423,21 +426,21 @@ This code translates to the tabbed pane below, showing a `Welcome!` greeting in
{{< /tab >}}
{{% tab header="Swahili" lang="sw" %}}
![Flag Tanzania](flags/tz.png)
**Karibu sana!**
**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 `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. If the `header` parameter is the only parameter inside your tab shortcode, you can specify the header as unnamed parameter, something like `{ tab "My header" }} … {{ /tab }}`. If your `tab` shortcode does not have any parameters, the header of the tab will default to `Tab n`. 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:
* The `tabpane` shortcode, which is the container element for the tabs. This shortcode can hold the optional named parameters `lang`, `highlight` and `right`. The value of the optional parameters `lang` and `highlight` 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. Specify `right=true` if you want to right align your 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. If the `header` parameter is the only parameter inside your tab shortcode, you can specify the header as unnamed parameter, something like `{ tab "My header" }} … {{ /tab }}`. If your `tab` shortcode does not have any parameters, the header of the tab will default to `Tab n`. To split the panes into a left aligned and a right aligned tab group, specify `right=true` in the dividing tab. By giving `right=true` several times, you can even render multiple tab groups. 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: `{{</* tab */>}}`Your &lt;b&gt;HTML&lt;/b&gt; content`{{</* /tab */>}}`.
* If the contents of your tabs should be rendered as text with different styles and with optional images, specify `text=true` 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: `{{</* tab */>}}`Your &lt;b&gt;HTML&lt;/b&gt; content`{{</* /tab */>}}`.

{{% 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.
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
Expand Down