Browse Source

feat(snippets): add external link snippet

closes #48
Josh Habdas 1 year ago
parent
commit
7c885f37c5
Signed by: Josh Habdas <jhabdas@protonmail.com> GPG Key ID: B148B31154C75A74

+ 8
- 2
archetypes/help.md View File

@@ -488,7 +488,13 @@ See the Hugo docs for additional [configuration options](http://gohugo.io/overvi
488 488
 
489 489
 # Snippets
490 490
 
491
-Snippets are reusable bits of code you can add to your site to reduce repetition and improve consistency. They are composed of [partials](https://gohugo.io/templates/partials) and [shortcodes](https://gohugo.io/content-management/shortcodes). After Dark includes the following snippets designed to take advantage of a number of pre-styled and customizable [hackcss components][hackcss] available in the theme:
491
+Snippets are reusable bits of code you can add to your site to reduce repetition and improve consistency. They are composed of [partials](https://gohugo.io/templates/partials) and [shortcodes](https://gohugo.io/content-management/shortcodes) and may be combined together to produce powerful results.
492
+
493
+The following core snippets are supplied by the theme:
494
+
495
+- `external` - Create styled links in layout or markdown.
496
+
497
+After Dark also includes snippets to take advantage of [hackcss components][hackcss]:
492 498
 
493 499
 - `hackcss-alert` - Show various alert boxes.
494 500
 - `hackcss-button` - Add buttons inside and out of forms.
@@ -503,7 +509,7 @@ Snippets are reusable bits of code you can add to your site to reduce repetition
503 509
 - `hackcss-textinput` - Accept any kind of text input.
504 510
 - `hackcss-throbber` - Show an animated spinner.
505 511
 
506
-Each snippet includes extensive inline documentation and examples, and can be found in the `layouts/shortcodes` directory of the theme.
512
+Each snippet includes extensive inline documentation. Docs are located in the shortcode files in the `layouts/shortcodes` directory of the theme.
507 513
 
508 514
 Combine snippets to build great-looking forms anywhere on your site:
509 515
 

+ 3
- 3
assets/css/theme.css View File

@@ -95,12 +95,12 @@ article header img {
95 95
   width: 100%;
96 96
   border-radius: 3px;
97 97
 }
98
-article img {
99
-  max-width: 100%;
100
-}
101 98
 table td, table th {
102 99
   line-height: inherit;
103 100
 }
101
+img {
102
+  max-width: 100%;
103
+}
104 104
 @media screen and (min-width: 768px) {
105 105
   html {
106 106
     font-size: 1em;

+ 1
- 0
layouts/partials/components/external.html View File

@@ -0,0 +1 @@
1
+<a {{ with .itemtype }} itemprop itemtype="http://schema.org/{{ . }}"{{ end }} target="{{ .target | default "_blank" }}"{{ with .rel }} rel="{{ . }}"{{ else }} rel="{{ if eq .supress_external true }}external{{ end }} noopener"{{ end }} href="{{ .href }}"{{ with .referrerpolicy }} referrerpolicy="{{ . }}"{{ end }}{{ with .class }} class="{{ . }}"{{ end }}>{{ .body | default (replaceRE "^https?://(.*)" "$1" .href) }}</a>

+ 1
- 3
layouts/partials/powered-by.html View File

@@ -1,8 +1,6 @@
1 1
 {{ if ne .Site.Params.powered_by false }}
2 2
   <p class="muted">
3 3
     This page was generated using
4
-    <a target="_blank" rel="external noopener" href="https://themes.gohugo.io/after-dark/">After Dark</a>
5
-    for
6
-    <a target="_blank" rel="external noopener" href="https://gohugo.io/">Hugo</a>.
4
+    {{ partial "components/external.html" (dict "itemtype" "significantLink" "body" "After Dark" "href" "https://after-dark.habd.as" "referrerpolicy" "origin-when-cross-origin") }}.
7 5
   </p>
8 6
 {{ end }}

+ 49
- 0
layouts/shortcodes/external.html View File

@@ -0,0 +1,49 @@
1
+<!-- {{/*
2
+HTML attributes: href [default: "#"], class, referrerpolicy, target [default: "_blank"], rel [default: "external noopener"]
3
+Custom attributes: text [default: Inner], body [default: href], itemtype
4
+
5
+Basic usage:
6
+{{< external "https://after-dark.habd.as" />}}
7
+{{< external text="After Dark" href="//after-dark.habd.as" />}}
8
+{{< external class="muted" href="//after-dark.habd.as" />}}
9
+{{< external "gopher://gopher.quux.org:70" />}}
10
+
11
+With external link styling removed:
12
+{{< external rel="noopener" href="https://keybase.io/jhabdas" />}}
13
+
14
+With internal link opening in a new window:
15
+{{< external href="crypto-anarchist-manifesto.pdf" text="Manifesto" />}}
16
+
17
+With structured data type:
18
+{{< external itemtype="significantLink" href="https://habd.as" />}}
19
+
20
+With site-wide Referrer Policy overridden:
21
+{{< external referrerpolicy="unsafe-url" href="http://goo.gl" />}}
22
+
23
+With markdown image and link styling removed:
24
+{{% external href="https://source.unsplash.com/collection/983219/2160x1440" %}}
25
+  ![Example image](https://source.unsplash.com/collection/983219/1080x720 "Click to view enlaged")
26
+{{% /external %}}
27
+
28
+Combined with button shortcode opening in same window with search query:
29
+{{< external target="_self" href="?s=query" >}}
30
+  {{< hackcss-button text="Default" />}}
31
+{{< /external >}}
32
+
33
+*/}} -->
34
+
35
+{{ $href := .Get "href" | default nil }}
36
+{{ $body := .Get "text" | default .Inner }}
37
+{{ $class := .Get "class" }}
38
+{{ $referrerpolicy := .Get "referrerpolicy" }}
39
+{{ $target := .Get "target" }}
40
+{{ $rel := .Get "rel" }}
41
+{{ $itemtype := .Get "itemtype" }}
42
+{{ if .IsNamedParams }}
43
+  {{ partial "components/external.html" (dict "href" $href "body" $body "class" $class "referrerpolicy" $referrerpolicy "target" $target "rel" $rel "itemtype" $itemtype "suppress_external" (and .Inner (eq (len (findRE "external" $rel)) 0))) }}
44
+{{ else }}
45
+  {{ partial "components/external.html" (dict "href" (.Get 0)) }}
46
+{{ end }}
47
+{{ if or (and .IsNamedParams (eq $href nil)) (and (eq .IsNamedParams false) (eq (.Get 0) nil)) }}
48
+  <p>{{ partial "components/alert.html" (dict "type" "error" "body" (errorf "Invalid use of external shortcode. Please provide an external link.")) }}</p>
49
+{{ end }}

Loading…
Cancel
Save