Add icon-inline component, update render-heading.html.example and add render-image.html.example.

assets/sass/_zen.scss

@@ -292,31 +292,3 @@ figure {
     }
   }
 }
-
-// Icons.
-
-.icon {
-  // Reset set SVG to block but icons are normally inline.
-  display: inline;
-}
-
-// Header anchor links
-
-.anchor-link {
-  opacity: 0;
-  transition: all 130ms ease-in;
-}
-
-.anchor-header {
-  &:focus,
-  &:hover {
-    .anchor-link {
-      opacity: .3;
-
-      &:focus,
-      &:hover {
-        opacity: 1;
-      }
-    }
-  }
-}

assets/sass/components/icon-inline/_icon-inline.scss

@@ -0,0 +1,27 @@
+// Inline icons.
+
+.icon-inline,
+%icon-inline {
+  .icon-link {
+    opacity: 0;
+    transition: all 130ms ease-in;
+    text-decoration: none;
+  }
+
+  &:focus,
+  &:hover {
+    .icon-link {
+      opacity: .3;
+
+      &:focus,
+      &:hover {
+        opacity: 1;
+      }
+    }
+  }
+
+  svg {
+    display: inline;
+    vertical-align: middle;
+  }
+}

assets/sass/styles.scss

@@ -40,6 +40,7 @@
 @import 'components/header/header';
 @import 'components/hidden/hidden';
 @import 'components/highlight-mark/highlight-mark';
+@import 'components/icon-inline/icon-inline';
 @import 'components/language-selector/language-selector';
 @import 'components/list-straight-left/list-straight-left';
 @import 'components/messages/messages';

layouts/_default/_markup/render-heading.html.example

@@ -1,7 +1,7 @@
-<h{{ .Level }} id="{{ .Anchor | safeURL }}" class="anchor-header">{{ .Text | safeHTML }} <a class="anchor-link" href="#{{ .Anchor | safeURL }}" aria-label="{{ .Text | safeHTML }}">
+<h{{ .Level }} id="{{ .Anchor | safeURL }}" class="icon-inline"{{ range $k, $v := .Attributes }}{{ printf " %s=%q" $k $v | safeHTMLAttr }}{{ end }}>
-<svg xmlns="http://www.w3.org/2000/svg" class="anchor-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+{{- .Text | safeHTML -}}
-  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+<a class="icon-link" href="#{{ .Anchor | safeURL }}" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none" />
   <path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5" />
   <path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5" />
-</svg>
+</svg></a></h{{ .Level }}>
-</a></h{{ .Level }}>

layouts/_default/_markup/render-image.html.example

@@ -0,0 +1,78 @@
+{{/* Control how the image is rendered with these variables.  */}}
+{{ $class := "" -}}
+{{ $size := "" -}}
+{{ $srcset := "" -}}
+{{ $width := "" -}}
+
+{{/* Only change the below code if you know what you are doing. */}}
+{{ $height := "" -}}
+{{ $maxwidth := site.Params.imageMaxWidth -}}
+{{ $realwidth := 0 -}}
+{{ $realheight := 0 -}}
+{{ $resource := false -}}
+{{ $src := .Destination -}}
+{{ $srcsetw := (slice) }}
+{{ $static := false -}}
+
+{{ if and $src (fileExists (path.Join "/static" $src)) -}}
+  {{ with (imageConfig (path.Join "/static" $src)) -}}
+    {{ $realwidth = .Width -}}
+    {{ $realheight = .Height -}}
+  {{ end -}}
+  {{ $static = true -}}
+  {{ $src = relURL $src -}}
+{{ else if $src -}}
+  {{ $src = strings.TrimLeft "/" $src -}}
+  {{ with resources.Get $src -}}
+    {{ $resource = . -}}
+  {{ end -}}
+  {{ with .Page.Resources.Get $src -}}
+    {{ $resource = . -}}
+  {{ end -}}
+{{ end -}}
+
+{{ if $resource -}}
+  {{ if $size -}}
+    {{ $image := $resource.Resize $size -}}
+    {{ $src = $image.RelPermalink -}}
+    {{ $width = $image.Width -}}
+    {{ $height = $image.Height -}}
+  {{ else -}}
+    {{ $src = $resource.RelPermalink -}}
+    {{ $realwidth = $resource.Width -}}
+    {{ $realheight = $resource.Height -}}
+  {{ end -}}
+  {{ if $srcset -}}
+    {{ range $set := split $srcset " " -}}
+      {{ $image := $resource.Resize (printf "%sx" $set) -}}
+      {{ $srcsetw = $srcsetw | append (printf "%s %sw" $image.RelPermalink $set) }}
+    {{ end }}
+    {{ $width = "" -}}
+    {{ $height = "" -}}
+  {{ end -}}
+{{ end -}}
+
+{{ if and $width $height -}}
+    {{ $width = int $width -}}
+    {{ $height = int $height -}}
+{{ else if $width -}}
+  {{ $width = int $width -}}
+  {{ $height = $realheight -}}
+  {{ if and ($realwidth) (lt ($width) ($realwidth)) -}}
+    {{ $height = (mul ($realheight) (div (add ($width) 0.0) ($realwidth))) -}}
+    {{ $height = (math.Round $height) -}}
+  {{ end -}}
+{{ else if $height -}}
+  {{ $width = $realwidth -}}
+  {{ $height = int $height -}}
+  {{ if and ($realheight) (lt ($height) ($realheight)) -}}
+    {{ $width = (mul ($realwidth) (div (add ($height) 0.0) ($realheight))) -}}
+    {{ $width = (math.Round $width) -}}
+  {{ end -}}
+{{ else if and ($maxwidth) (lt ($maxwidth) ($realwidth)) -}}
+  {{ $width = ($maxwidth) -}}
+  {{ $height = (mul ($realheight) (div (add ($width) 0.0) ($realwidth))) -}}
+  {{ $height = (math.Round $height) -}}
+{{ end -}}
+
+<img class="image{{ with $class }} {{ . }}{{ end }}" src="{{ $src }}" alt="{{ .Text }}"{{ with $srcsetw }} srcset="{{ delimit  .  ", " }}"{{ end }}{{ with $width }} width="{{ . }}"{{ end }}{{ with $height }} height="{{ . }}"{{ end }}{{ with .Title}} title="{{ . }}"{{ end }}>