Initial AD port

themes/after-dark/docs/content/shortcode/figure.md

@@ -0,0 +1,46 @@
++++
+title = "Figure"
+description = "Load images progressively with blurry placeholders."
+categories = ["experience"]
+tags = ["performance", "images", "graphics"]
+html_attributes = ["class", "alt", "src"]
+custom_attributes = ["lqipsrc", "caption", "link", "linktarget", "attr", "attrlink", "title"]
+snippets_used = ["external"]
+notes = [
+  "review 'lazy-loading' if this page is modified"
+]
+[[copyright]]
+  owner = "Josh Habdas"
+  date = "2019"
+  license = "agpl-3.0-or-later"
++++
+
+With progressive image placeholder:
+
+```html
+{{</* figure
+  alt="Artistic map"
+  src="/images/watercolor_pTIyYTqAlF8_w1440h700.jpeg"
+  lqipsrc="/images/watercolor_pTIyYTqAlF8_w936h455.jpeg"
+  title="Map of Bali in Watercolor"
+  attr="Stamen Design"
+  attrlink="https://maps.stamen.com/"
+*/>}}
+```
+
+{{< figure
+  alt="Artistic map"
+  src="/images/watercolor_pTIyYTqAlF8_w936h455.jpeg"
+  lqipsrc="/images/watercolor_pTIyYTqAlF8_w1440h700.jpeg"
+  title="Map of Bali in Watercolor"
+  attr="Stamen Design"
+  attrlink="https://maps.stamen.com/"
+>}}
+
+Above as a [Snippet](/feature/snippets/) used in a [Custom Layout](/feature/custom-layouts/):
+
+```go-html-template
+{{ partial "components/figure.html" (dict "alt" "Artistic map" "src" "/images/watercolor_pTIyYTqAlF8_w936h455.jpeg" "lqipsrc" "/images/watercolor_pTIyYTqAlF8_w1440h700.jpeg" "title" "Map of Bali in Watercolor" "attr" "Stamen Design" "attrlink" "https://maps.stamen.com/") }}
+```
+
+See {{< external href="https://gohugo.io/content-management/shortcodes/#figure" text="Figures in Hugo" />}} for Hugo-specific implementation.