Skip to content

Commit 3c8971d

Browse files
markdumaymarkdumay
authored
Merge pull request #156 from gethinode/develop
Managed links
2 parents 1096507 + d3ece40 commit 3c8971d

File tree

8 files changed

+123
-7
lines changed

8 files changed

+123
-7
lines changed

‎config/_default/params.toml‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,10 @@
44
enableDarkMode = true
55
modes = ["light", "dark"]
66
footerBelowFold = true
7+
canonifyAssetsURLs = false
8+
[main.externalLinks]
9+
cue = true
10+
tab = true
711

812
[modules]
913
core = ["bootstrap", "flexsearch", "fontawesome"]

‎content/en/docs/latest/components/button.md‎

Lines changed: 37 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
author: Mark Dumay
33
title: Button
4-
date: 2023-05-21
4+
date: 2023-07-30
55
description: Use the button shortcode to display a button with a hyperlink.
66
layout: docs
77
icon: fa hand-pointer
@@ -39,9 +39,15 @@ The shortcode supports the following arguments:
3939
| toast | No | Optional id of the toast message to display when the button is clicked. |
4040
| collapse | No | Optional panel to collapse. Cannot be used together with tooltip. Ignored for active/inactive buttons. |
4141
| placement | No | How to position the tooltip: "top" (default), "bottom", "left", or "right". |
42+
| class | No | Optional class attribute of the button element, e.g. “p-5”. |
43+
| icon | No | Font Awesome icon class attribute, required unless button title is set. An example value is "fas sort". |
44+
| order | No | Optional order of the icon, either "first" or "last" (default). |
45+
| justify | No | Optional justification of the button title and icon, either "start", "end", "center" (default), "between", "around", or "evenly". |
46+
| cue | No | Optional flag to indicate if an external link should show a visual cue, defaults to setting "main.externalLinks.cue" in the site's parameters. |
47+
| tab | No | Optional flag to indicate if an external link should open in a new tab, defaults to setting "main.externalLinks.tab" in the site's parameters. |
4248
{{< /table >}}
4349

44-
## Example
50+
## Examples
4551

4652
### Statefull buttons
4753

@@ -97,6 +103,35 @@ Set the `badge` argument to add a badge to the top right of the button.
97103
{{< /example>}}
98104
<!-- markdownlint-enable MD037 -->
99105

106+
### Buttons with an icon
107+
108+
Set the `icon` argument to add an icon to the button. Use `order` to determine the position of the icon relative to the title. Omit the title to show an icon only.
109+
110+
<!-- markdownlint-disable MD037 -->
111+
{{< example lang="hugo" >}}
112+
<div class="hstack gap-3 justify-content-center">
113+
{{</* button icon="fab linkedin" cue=false order="first" href="https://linkedin.com" >}}LinkedIn{{< /button */>}}<br>
114+
{{</* button icon="fab linkedin" cue=false order="last" href="https://linkedin.com" >}}LinkedIn{{< /button */>}}<br>
115+
{{</* button icon="fab linkedin" href="https://linkedin.com" /*/>}}
116+
</div>
117+
{{< /example>}}
118+
<!-- markdownlint-enable MD037 -->
119+
120+
Use `justify` to adjust the layout of the icon and button title.
121+
122+
<!-- markdownlint-disable MD037 -->
123+
{{< example lang="hugo" >}}
124+
<div class="vstack mx-auto w-25">
125+
{{</* button icon="fab linkedin" cue=false justify="start" href="https://linkedin.com" >}}LinkedIn{{< /button */>}}<br>
126+
{{</* button icon="fab linkedin" cue=false justify="end" href="https://linkedin.com" >}}LinkedIn{{< /button */>}}<br>
127+
{{</* button icon="fab linkedin" cue=false justify="center" href="https://linkedin.com" >}}LinkedIn{{< /button */>}}<br>
128+
{{</* button icon="fab linkedin" cue=false justify="between" href="https://linkedin.com" >}}LinkedIn{{< /button */>}}<br>
129+
{{</* button icon="fab linkedin" cue=false justify="around" href="https://linkedin.com" >}}LinkedIn{{< /button */>}}<br>
130+
{{</* button icon="fab linkedin" cue=false justify="evenly" href="https://linkedin.com" >}}LinkedIn{{< /button */>}}<br>
131+
</div>
132+
{{< /example>}}
133+
<!-- markdownlint-enable MD037 -->
134+
100135
### Outlined buttons
101136

102137
Set the `outline` argument to `true` to adjust the style of the button.

‎content/en/docs/latest/components/link.md‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
---
2+
author: Mark Dumay
3+
title: Link
4+
date: 2023-07-30
5+
description: Use the link shortcode to add a managed link to your page content.
6+
layout: docs
7+
icon: fas link
8+
tags: component
9+
---
10+
11+
## Overview
12+
13+
{{< release version="v0.16.8" >}}
14+
15+
Since Hinode `v0.16.8` you can add a managed link to your page content using a configurable shortcode. Managed links refer to an external URL that is centrally maintained in the site's parameters. The shortcode also supports internal links that refer to a regular page.
16+
17+
<!-- markdownlint-disable MD037 -->
18+
{{< example lang="hugo" >}}
19+
{{</* link mozilla_image /*/>}}
20+
{{< /example >}}
21+
<!-- markdownlint-enable MD037 -->
22+
23+
## Arguments
24+
25+
The shortcode supports a single unnamed parameter, or various named parameters. The unnamed parameter is recognized as a named link if it does not contain any "/", otherwise it is treated as a url. Any inner text is rendered as the link title, otherwise it uses the host name (for external links) or page name (for internal links). The shortcode supports the following named arguments:
26+
27+
{{< table >}}
28+
| Argument | Required | Description |
29+
|-------------|----------|-------------|
30+
| name | No | Optional name of the link maintained in the "links" section of the site's parameters. If omitted, the "url" argument should be provided instead. |
31+
| url | No | Optional url of the link, including the scheme ("http" or "https"). If omitted, the "name" argument should be provided instead. |
32+
| cue | No | Optional flag to indicate if an external link should show a visual cue, defaults to setting "main.externalLinks.cue" in the site's parameters. |
33+
| tab | No | Optional flag to indicate if an external link should open in a new tab, defaults to setting "main.externalLinks.tab" in the site's parameters. |
34+
| case | No | Optional flag to indicate if the retrieved title (e.g. no inner text is provided) of an internal link should use its original case, defaults to true. If false, the title is set to lower case. |
35+
{{< /table >}}
36+
37+
## Site configuration
38+
39+
You can [configure the behavior of managed links]({{< relref "layout#extended-configuration" >}}) in the `/config/_default/params.toml` file in the `main.externalLinks` section. Manage the named links in the `links` section of the same file:
40+
41+
```toml
42+
[links]
43+
mozilla_image = "https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images"
44+
```
45+
46+
## Examples
47+
48+
Use either named links or common url's to generate a managed link. Any unnamed link is recognized as internal reference to page when it contains at least one `/` character. Use the `cue` and `tab` arguments to override the default behavior of displaying and opening external links. Omit the link's content to generate a reference to the host (for external links) or the target page's title (for internal links). Lastly, set `case` to false to set the obtained page title to lower case.
49+
50+
<!-- markdownlint-disable MD037 -->
51+
{{< example lang="hugo" >}}
52+
53+
- {{</* link mozilla_image >}}Named link with default settings{{< /link */>}}
54+
- {{</* link name=mozilla_image cue=false tab=false >}}Named link opening in current tab w/o icon{{< /link */>}}
55+
- {{</* link name=mozilla_image cue=true tab=true >}}Named link opening in new tab with icon{{< /link */>}}
56+
- {{</* link mozilla_image /*/>}}
57+
- {{</* link "https://developer.mozilla.org" >}}External link{{< /link */>}}
58+
- {{</* link "/getting-started" >}}Internal link with title{{< /link */>}}
59+
- {{</* link "/license" /*/>}}
60+
- {{</* link url="/license" case=false /*/>}}
61+
62+
{{< /example >}}
63+
<!-- markdownlint-enable MD037 -->

‎content/en/docs/latest/configuration/layout.md‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
title: Layout
33
description: Hinode uses a grid-based, responsive design for the home page, single pages and list pages.
4-
date: 2023-05-20
4+
date: 2023-07-30
55
layout: docs
66
---
77

@@ -69,6 +69,8 @@ Hinode uses the following extended settings in the `main` section of the `site p
6969
| modes | ["light", "dark"] | Supported color modes, used as identifier for color-mode aware images. |
7070
| footerBelowFold | false | If set, pushes the footer including social links to below the page fold. |
7171
| canonifyAssetsURLs | false | If set, makes permalinks to site assets (favicons, images, scripts, and stylesheets) absolute instead of relative. |
72+
| externalLinks.cue | false | If set, adds a visual cue `{{< fas up-right-from-square fa-2xs >}}` as suffix to [managed external links]({{< relref "links-and-cross-references#managed-links" >}}). |
73+
| externalLinks.tab | false | If set, opens [managed external links]({{< relref "links-and-cross-references#managed-links" >}}) in a new browser tab using the HTML attributes `target="_blank" rel= "noopener noreferrer"`. |
7274
{{< /table >}}
7375

7476
The below configuration shows the default configuration set in `config/_default/params.toml`.

‎content/en/docs/latest/content/links-and-cross-references.md‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
title: Links and cross-references
33
description: Generate internal links and external links using a combination of Markdown and Hugo shortcodes.
4-
date: 2023-01-28
4+
date: 2023-07-30
55
layout: docs
66
---
77

@@ -81,7 +81,7 @@ Instead of using parentheses, you can use brackets to link to a predefined addre
8181

8282
### Managed links
8383

84-
Hinode uses `config/default/params.toml` to manage links to external addresses in a single place. You can use a combination of Markdown and Hugo shortcodes to generate a managed link. The following snippet of `config/default/params.toml` defines the link address for `fontawesome`:
84+
Hinode uses `config/default/params.toml` to manage links to external addresses in a single place. You can [use the link shortcode generate a managed link]({{< relref "link" >}}). The following snippet of `config/default/params.toml` defines the link address for `fontawesome`:
8585

8686
```toml
8787
[links]
@@ -90,6 +90,10 @@ Hinode uses `config/default/params.toml` to manage links to external addresses i
9090

9191
You can then use the following statement to generate the link.
9292

93+
<!-- markdownlint-disable MD037 -->
9394
{{< example lang="markdown" >}}
94-
[Font Awesome]({{</* param "links.fontawesome" */>}})
95+
{{</* link fontawesome /*/>}}
9596
{{< /example >}}
97+
<!-- markdownlint-enable MD037 -->
98+
99+
You can [configure the behavior of managed links]({{< relref "layout#extended-configuration" >}}) in the `/config/_default/params.toml` file in the `main.externalLinks` section.

‎go.mod‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ module github.com/gethinode/docs
33
go 1.20
44

55
require (
6-
github.com/gethinode/hinode v0.16.7 // indirect
6+
github.com/gethinode/hinode v0.16.8 // indirect
77
github.com/gethinode/mod-bootstrap v1.1.1 // indirect
88
github.com/gethinode/mod-flexsearch v1.1.4 // indirect
99
github.com/gethinode/mod-fontawesome v1.2.1 // indirect

‎go.sum‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,8 @@ github.com/gethinode/hinode v0.16.6 h1:Ui1PTPT3A/1TVpYmham8eRwvnFYJ8zFUgtubI+33l
1616
github.com/gethinode/hinode v0.16.6/go.mod h1:JB/06DJ9N/Uc3+WF9sZi7dqUuwwgMGzh7y3pd2rNw80=
1717
github.com/gethinode/hinode v0.16.7 h1:R3Girw/mamDEVmV3cw86j5DwG2CstdQmZn1znRYep+M=
1818
github.com/gethinode/hinode v0.16.7/go.mod h1:grfMN7WMSBls7OWohpet8jc30iqYfK2TCsl1U860e4c=
19+
github.com/gethinode/hinode v0.16.8 h1:MNYetMpXjKDkMiZGW1fQedSM8+1MUUOLDOUvM9j9It8=
20+
github.com/gethinode/hinode v0.16.8/go.mod h1:grfMN7WMSBls7OWohpet8jc30iqYfK2TCsl1U860e4c=
1921
github.com/gethinode/mod-bootstrap v1.1.0 h1:BbalsW8kmFhv+J+dcc41TGcjIlM/p69AB0h0oGhAXIU=
2022
github.com/gethinode/mod-bootstrap v1.1.0/go.mod h1:DcpPc2cNaXUPGEvhD7npuEEPA7573NvakTlrwFbyjr8=
2123
github.com/gethinode/mod-bootstrap v1.1.1 h1:Tx4M5hGVOFrEaxnUONDAm6N9xuRi5UphKlT7F26HujU=

‎hugo_stats.json‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -393,9 +393,11 @@
393393
"img-wrap",
394394
"invisible",
395395
"is-search",
396+
"justify-content-around",
396397
"justify-content-between",
397398
"justify-content-center",
398399
"justify-content-end",
400+
"justify-content-evenly",
399401
"justify-content-start",
400402
"lead",
401403
"leaflet-map",
@@ -430,6 +432,7 @@
430432
"mb-4",
431433
"mb-5",
432434
"mb-lg-5",
435+
"me-3",
433436
"me-auto",
434437
"middle-bar",
435438
"min-vh-100",
@@ -668,6 +671,7 @@
668671
"translate-middle-y",
669672
"visually-hidden",
670673
"vr",
674+
"vstack",
671675
"w-100",
672676
"w-25",
673677
"w-75",
@@ -853,6 +857,7 @@
853857
"buttons-with-a-badge",
854858
"buttons-with-a-collapsible-panel",
855859
"buttons-with-a-tooltip",
860+
"buttons-with-an-icon",
856861
"card-layout",
857862
"carousel-0",
858863
"carousel-10",
@@ -1078,6 +1083,7 @@
10781083
"navbar-color-8",
10791084
"navbar-color-9",
10801085
"navbar-color-theme",
1086+
"navbar-color-theme-collapsed",
10811087
"navbar-logo",
10821088
"navbar-mode-1",
10831089
"navbar-mode-2",

0 commit comments

Comments
 (0)