feat(snippets): add external link snippet

closes #48

archetypes/help.md

@@ -488,7 +488,13 @@ See the Hugo docs for additional [configuration options](http://gohugo.io/overvi
 
 # Snippets
 
-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:
+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.
+
+The following core snippets are supplied by the theme:
+
+- `external` - Create styled links in layout or markdown.
+
+After Dark also includes snippets to take advantage of [hackcss components][hackcss]:
 
 - `hackcss-alert` - Show various alert boxes.
 - `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
 - `hackcss-textinput` - Accept any kind of text input.
 - `hackcss-throbber` - Show an animated spinner.
 
-Each snippet includes extensive inline documentation and examples, and can be found in the `layouts/shortcodes` directory of the theme.
+Each snippet includes extensive inline documentation. Docs are located in the shortcode files in the `layouts/shortcodes` directory of the theme.
 
 Combine snippets to build great-looking forms anywhere on your site:
 

assets/css/theme.css

@@ -95,12 +95,12 @@ article header img {
   width: 100%;
   border-radius: 3px;
 }
-article img {
-  max-width: 100%;
-}
 table td, table th {
   line-height: inherit;
 }
+img {
+  max-width: 100%;
+}
 @media screen and (min-width: 768px) {
   html {
     font-size: 1em;

layouts/partials/components/external.html

@@ -0,0 +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>

layouts/partials/powered-by.html

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

layouts/shortcodes/external.html

@@ -0,0 +1,49 @@
+<!-- {{/*
+HTML attributes: href [default: "#"], class, referrerpolicy, target [default: "_blank"], rel [default: "external noopener"]
+Custom attributes: text [default: Inner], body [default: href], itemtype
+
+Basic usage:
+{{< external "https://after-dark.habd.as" />}}
+{{< external text="After Dark" href="//after-dark.habd.as" />}}
+{{< external class="muted" href="//after-dark.habd.as" />}}
+{{< external "gopher://gopher.quux.org:70" />}}
+
+With external link styling removed:
+{{< external rel="noopener" href="https://keybase.io/jhabdas" />}}
+
+With internal link opening in a new window:
+{{< external href="crypto-anarchist-manifesto.pdf" text="Manifesto" />}}
+
+With structured data type:
+{{< external itemtype="significantLink" href="https://habd.as" />}}
+
+With site-wide Referrer Policy overridden:
+{{< external referrerpolicy="unsafe-url" href="http://goo.gl" />}}
+
+With markdown image and link styling removed:
+{{% external href="https://source.unsplash.com/collection/983219/2160x1440" %}}
+  ![Example image](https://source.unsplash.com/collection/983219/1080x720 "Click to view enlaged")
+{{% /external %}}
+
+Combined with button shortcode opening in same window with search query:
+{{< external target="_self" href="?s=query" >}}
+  {{< hackcss-button text="Default" />}}
+{{< /external >}}
+
+*/}} -->
+
+{{ $href := .Get "href" | default nil }}
+{{ $body := .Get "text" | default .Inner }}
+{{ $class := .Get "class" }}
+{{ $referrerpolicy := .Get "referrerpolicy" }}
+{{ $target := .Get "target" }}
+{{ $rel := .Get "rel" }}
+{{ $itemtype := .Get "itemtype" }}
+{{ if .IsNamedParams }}
+  {{ 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))) }}
+{{ else }}
+  {{ partial "components/external.html" (dict "href" (.Get 0)) }}
+{{ end }}
+{{ if or (and .IsNamedParams (eq $href nil)) (and (eq .IsNamedParams false) (eq (.Get 0) nil)) }}
+  <p>{{ partial "components/alert.html" (dict "type" "error" "body" (errorf "Invalid use of external shortcode. Please provide an external link.")) }}</p>
+{{ end }}