button: support for link effects #1008

docs/content/introduction/releasenotes/7/4.en.md

@@ -8,6 +8,12 @@ weight = -4
 
 ## 7.4.0 (XXXX-XX-XX) {#7-4-0}
 
+### Change
+
+- {{% badge style="note" title=" " %}}Change{{% /badge %}} The `target` parameter of the [`button` shortcode](shortcodes/button#parameter) was deprecated. Use [link effects](authoring/markdown#link-effects)  on the `href` instead.
+
+  You don't need to change anything as the old parameter still works but may generate warnings.
+
 ### New
 
 - {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} The theme now allows page references (given as `pageRef` of a [Hugo menu item](https://gohugo.io/content-management/menus/), `pageRef` parameter of a [`sidebarmenus` entry ](configuration/sidebar/menus#defining-sidebar-menus) and the `menuPageRef` in a [page's front matter](configuration/sidebar/menus/#displaying-arbitrary-links-in-a-page-menu)) to also be global resources from your `assets` directory.

docs/content/shortcodes/button.en.md

@@ -6,8 +6,8 @@ title = "Button"
 
 The `button` shortcode displays a clickable button with adjustable color, title and icon.
 
-{{% button href="https://gohugo.io/" %}}Get Hugo{{% /button %}}
+{{% button href="https://gohugo.io/" %}}Go Hugo{{% /button %}}
-{{% button href="https://gohugo.io/" style="warning" icon="dragon" %}}Get Hugo{{% /button %}}
+{{% button href="images/magic.gif?download" style="tip" icon="wand-magic-sparkles" %}}Download Magic{{% /button %}}
 
 ## Usage
 
@@ -15,8 +15,8 @@ The `button` shortcode displays a clickable button with adjustable color, title
 {{% tab title="shortcode" %}}
 
 ````go
-{{%/* button href="https://gohugo.io/" %}}Get Hugo{{% /button */%}}
+{{%/* button href="https://gohugo.io/" %}}Go Hugo{{% /button */%}}
-{{%/* button href="https://gohugo.io/" style="warning" icon="dragon" %}}Get Hugo{{% /button */%}}
+{{%/* button href="images/magic.gif?download" style="tip" icon="wand-magic-sparkles" %}}Download Magic{{% /button */%}}
 ````
 
 {{% /tab %}}
@@ -26,14 +26,14 @@ The `button` shortcode displays a clickable button with adjustable color, title
 {{ partial "shortcodes/button.html" (dict
     "page" .
     "href" "https://gohugo.io/"
-    "content" "Get Hugo"
+    "content" "Go Hugo"
 )}}
 {{ partial "shortcodes/button.html" (dict
   "page" .
   "href" "https://gohugo.io/"
-  "style" "warning"
+  "style" "tip"
-  "icon" "dragon"
+  "icon" "wand-magic-sparkles"
-  "content" "Get Hugo"
+  "content" "Download Magic"
 )}}
 ````
 
@@ -44,12 +44,11 @@ The `button` shortcode displays a clickable button with adjustable color, title
 
 | Name                  | Default         | Notes       |
 |-----------------------|-----------------|-------------|
-| **href**              | _&lt;empty&gt;_ | 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.<br><br>- if starting with `javascript:` all following text will be executed in your browser<br>- every other string will be interpreted as URL|
+| **href**              | _&lt;empty&gt;_ | 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.<br><br>- if starting with `javascript:` all following text will be executed in your browser<br>- every other string will be interpreted as URL, you can use [link effects](authoring/markdown#link-effects) as well|
 | **style**             | `transparent`   | The style scheme used for the button.<br><br>- by severity: `caution`, `important`, `info`, `note`, `tip`, `warning`<br>- by brand color: `primary`, `secondary`, `accent`<br>- by color: `blue`, `cyan`, `green`, `grey`, `magenta`, `orange`, `red`<br>- by special color: `default`, `transparent`, `code`<br><br>You can also [define your own styles](shortcodes/notice#defining-own-styles). |
 | **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.<br><br>- for severity styles: a nice matching color for the severity<br>- 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.<br><br>- for severity styles: a nice matching icon for the severity<br>- for all other styles: _&lt;empty&gt;_<br><br>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. |
-| **target**            | see notes       | The destination frame/window if **href** is an URL. Otherwise the parameter is not used. This behaves similar to normal links. If the parameter is not given it defaults to:<br><br>- the setting of `externalLinkTarget` or `_blank` if not set, for any address starting with `http://` or `https://`<br>- no specific value for all other links |
 | **type**              | see notes       | The [button type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type) if **href** is JavaScript. Otherwise the parameter is not used. If the parameter is not given it defaults to `button` |
 | _**&lt;content&gt;**_ | see notes       | Arbitrary text for the button title. Depending on the **style** there may be a default title. Any given value will overwrite the default.<br><br>- for severity styles: the matching title for the severity<br>- for all other styles: _&lt;empty&gt;_<br><br>If you want no title for a severity style, you have to set this parameter to `" "` (a non empty string filled with spaces) |
 
@@ -160,14 +159,17 @@ The `button` shortcode displays a clickable button with adjustable color, title
 
 {{% button href="https://gohugo.io/" icon="dragon" style="warning" %}}Get Hugo{{% /button %}}
 
-### Target
+### Link Effects (Target, Download)
+
+You can use [link effects](authoring/markdown#link-effects) with your `href` to open the link in a different tab or starting a download.
 
 ````go
-{{%/* button href="https://gohugo.io/" target="_self" %}}Get Hugo in same window{{% /button */%}}
+{{%/* button href="https://gohugo.io/?target=_blank" %}}Go Hugo{{% /button */%}}
-{{%/* button href="https://gohugo.io/" %}}Get Hugo in new Window/Frame (default){{% /button */%}}
+{{%/* button href="images/magic.gif?download" style="tip" icon="wand-magic-sparkles" %}}Download Magic{{% /button */%}}
 ````
-{{% button href="https://gohugo.io/" target="_self" %}}Get Hugo in same Window/Frame{{% /button %}}
+
-{{% button href="https://gohugo.io/" %}}Get Hugo in new Window/Frame (default){{% /button %}}
+{{% button href="https://gohugo.io/?target=_blank" %}}Go Hugo{{% /button %}}
+{{% button href="images/magic.gif?download" style="tip" icon="wand-magic-sparkles" %}}Download Magic{{% /button %}}
 
 ### Other
 

layouts/partials/shortcodes/button.html

@@ -11,7 +11,7 @@
 {{- if and (not $color) (eq (len $color) 0) }}
   {{- $style = .style | default "transparent" }}
 {{- end }}
-{{- $target := .target | default "" }}
+{{- $attributes := .attributes | default dict }}
 {{- $type := .type | default "" }}
 {{- $isButton := false }}
 {{- $isLink := false }}
@@ -22,14 +22,28 @@
     {{- $type = "button" }}
   {{- end }}
 {{- else if not $href }}
-{{- else if and (eq (len $target) 0) (or (strings.HasPrefix $href "http://") (strings.HasPrefix $href "https://") ) }}
-  {{- $isLink = true }}
-  {{- $target = "_blank" }}
-  {{- if isset $page.Site.Params "externallinktarget" }}
-    {{- $target = $page.Site.Params.externalLinkTarget }}
-  {{- end }}
 {{- else }}
   {{- $isLink = true }}
+  {{- /* target will be boolean false if no user defined value was set and effect default should be applied */}}
+  {{- $target := false }}
+  {{- $u := urls.Parse .href }}
+  {{- if $u.IsAbs }}
+    {{- partialCached "_relearn/urlExists.gotmpl" (dict "url" .href "page" $page "type" "link") $u.String }}
+  {{- else }}
+    {{- $linkObject := partial "_relearn/linkObject.gotmpl" (dict "url" .href "page" $page) }}
+    {{- if $linkObject }}
+      {{- $href = partial "_relearn/decoratedLink.gotmpl" (dict "url" .href "page" $page "linkObject" $linkObject "param" "link") }}
+    {{- else }}
+      {{- $filepath := "[virtual file]" }}{{ with and $page $page.File $page.File.Filename }}{{ $filepath = . }}{{ end }}
+      {{- $msg := printf "%q: link '%s' is not a page or a resource" $filepath .href }}
+      {{- partial "_relearn/urlErrorReport.gotmpl" (dict "url" .href "page" $page "param" "link" "msg" $msg) }}
+    {{- end }}
+  {{- end }}
+  {{- if and (isset . "target") (or (ne (printf "%T" .target) "string") (ne (trim .target " " ) "")) }}
+    {{- $filepath := "[virtual file]" }}{{ with and $page $page.File $page.File.Filename }}{{ $filepath = . }}{{ end }}
+    {{- warnf "%q: DEPRECATED parameter 'target' for shortcode 'button' found, use link effects instead; see https://mcshelby.github.io/hugo-theme-relearn/introduction/releasenotes/7/#7-4-0" $filepath }}
+  {{- end }}
+  {{- $attributes = merge $attributes (partial "_relearn/linkAttributes.gotmpl" (dict "url" $href "page" $page "target" .target)) -}}
 {{- end }}
 {{- $boxStyle := partial "_relearn/boxStyle.gotmpl" (dict "style" $style "title" (or .title $content) "icon" .icon) }}
 {{- $title := trim ($boxStyle.title) " " }}
@@ -43,7 +57,16 @@
   {{- if $isButton -}}
   <button onclick="{{ $href | safeJS }}"{{ if gt (len $type) 0 }} type="{{ $type }}"{{ end }}>
   {{- else if $isLink -}}
-  <a href="{{ $href }}"{{ if gt (len $target) 0 }} target="{{ $target }}"{{ end }}>
+  <a
+  {{- range $k, $v := $attributes }}
+    {{- if $v }}
+      {{- if eq (printf "%T" $v) "bool" }}
+        {{- printf " %s" $k | safeHTMLAttr }}
+      {{- else }}
+        {{- printf " %s=%q" $k $v | safeHTMLAttr }}
+      {{- end }}
+    {{- end }}
+  {{- end }}>
   {{- else -}}
   <span>
   {{- end }}

layouts/partials/version.txt

@@ -1 +1 @@
-7.3.2+516e552ecefcdf2f67cb0c34869f225affe45f73
+7.3.2+aaf0c707a2ee77896890c34b9d9990040aff448b