Merge branch 'master' of gitlab.com:gabmus/hugo-ficurinia

2022-08-13 13:09:48 +02:00 · 2022-08-13 13:09:48 +02:00 · 89e577a339
parent b95f6a69bb bedcf7a212
commit 89e577a339
21 changed files with 283 additions and 59 deletions
--- a/README.md
+++ b/README.md
@ -43,6 +43,12 @@ summaryLength = 70  # number of words for article summaries
    extraContentDirs = []  # other content directories to render similarly to the home page
    showcaseDir = "showcase"  # create a content directory that shows a special showcase section in the home page

+    # shows a specified single page as a home page, instead of the traditional articles list
+    # requires setting `homeSinglePage`
+    # goes well with extraContentDirs
+    showSinglePageAsHome = false
+    homeSinglePage = "/home"
+
    # It's best to put these icons in the "static" folder of your site
    logo = "/logo.svg"
    favicon = "/favicon.png"  # 32x32
@ -51,6 +57,8 @@ summaryLength = 70  # number of words for article summaries
    svgicon = "/logo.svg"
    icon512 = "/icon512.png"  # 512x512 png image

+    logoRightOfTitle = false  # positions the logo to the right of the title; default: false
+
    showTags = true  # show the Tags menu item; default true
    showRss = true  # show the link for the RSS feed; default true

@ -99,7 +107,12 @@ summaryLength = 70  # number of words for article summaries
    plausibleScriptUrl = "https://something.com/..."
    plausibleDomain = "example.com"

+    # enable analytics using Umami
+    umamiScriptUrl = "https://something.com/..."
+    umamiWebsiteId = "example-tracking-code"
+
    enableShareOnFediverse = false  # enable a button at the end of an article to share it on the fediverse
+    tocBeforeImage = false  # show the table of contents before the main article image; default false

    # WARNING: deprecated! Use [[menu.icons]] instead, look below
    # links = [
@ -246,9 +259,12 @@ Every post can have various parameters in the frontmatter, here are some that yo
 - `description`: a brief description of the post, useful for SEO optimization
 - `tags`: an array of tags, useful for searching similar articles
 - `image`: a link to a feature image for the article, shown in the preview as well
+- `imageCaption`: a markdown text rendered as a caption for the article image described above
 - `featured`: boolean, indicate if the post should be shown as featured
 - `comments`: boolean, if true it enables comments for the current post, if false it disables them (default is true)
 - `showDate`: boolean, true by default, if false hides the date. Useful for non-article pages where the date isn't important
+- `showTitle`: boolean, true by default, if false hides the title.
+- `showShare`: boolean, true by default, if false hides the share button.
 - `norss`: boolean, if set to true the page will be skipped in the rss feed
 - `nosearch`: boolean, if set to true the page won't show up in searches
 - `toc`: boolean, if set to true a table of contents will be shown for the article
--- a/assets/feed_style.xsl
+++ b/assets/feed_style.xsl
@ -0,0 +1,84 @@
+<?xml version="1.0" encoding="utf-8"?>
+<xsl:stylesheet version="3.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:itunes="http://www.itunes.com/dtds/podcast-1.0.dtd">
+  <xsl:output method="html" version="1.0" encoding="UTF-8" indent="yes"/>
+  <xsl:template match="/">
+    <html xmlns="http://www.w3.org/1999/xhtml">
+      <head>
+        <title><xsl:value-of select="/rss/channel/title"/> RSS Feed</title>
+        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
+        <meta charset="UTF-8"/>
+        {{ $style := resources.Get "/scss/style.scss" | resources.ExecuteAsTemplate "/scss/style.scss" . | resources.ToCSS (dict "targetPath" "css/styles.css" "outputStyle" "compressed" "enableSourceMap" "true") | resources.Fingerprint "sha512" }}
+        <link type="text/css" rel="stylesheet" href="{{ $style.Permalink }}" integrity="{{ $style.Data.Integrity }}" />
+        <style>
+          .aboutfeeds {
+            margin: 24px 0; padding: 12px;
+            border: 2px solid var(--default_accent);
+            background-color: var(--default_hl_bg)
+          }
+          .head {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+          }
+          .logo {
+            width: 50px;
+            max-height: 50px;
+            border-radius: 5px;
+            display: block;
+            margin-right: 10px;
+          }
+          .rssLogo {
+            display: block;
+            margin-right: 10px;
+          }
+          header h1 {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+          }
+        </style>
+      </head>
+      <body>
+        <header>
+          <h1>
+            <svg class="rssLogo" width="32" height="32" version="1.1" viewBox="0 0 32 32"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path fill="#ff7800"
+                d="M 4.9970764,0 H 26.997124 C 29.767161,0 31.9971,2.2300144 31.9971,4.9999764 V 27.000024 C 31.9971,29.770061 29.767086,32 26.997124,32 H 4.9970764 C 2.2270388,32 -0.0029,29.769986 -0.0029,27.000024 V 4.9999764 C -0.0029,2.2299388 2.2271144,0 4.9970764,0 Z"
+              />
+              <path fill="#ffffff"
+                d="m 10.652345,21.357209 q 0.794754,0.795468 0.794754,1.931828 0,1.120137 -0.794754,1.915672 -0.7947706,0.795468 -1.9301364,0.795468 -1.1353653,0 -1.930136,-0.795468 -0.7947708,-0.795467 -0.7947708,-1.915672 0,-1.136377 0.7947708,-1.931828 0.7947707,-0.811691 1.930136,-0.811691 1.1353658,0 1.9301364,0.811691 z m 8.077348,3.668942 q 0.01682,0.405854 -0.243305,0.68182 -0.259516,0.292205 -0.664997,0.292205 h -1.913994 q -0.373047,0 -0.632562,-0.22728 -0.243306,-0.2435 -0.259515,-0.584427 -0.324402,-3.263021 -2.643912,-5.56829 Q 10.068158,17.298754 6.8243058,16.990274 6.4674686,16.957811 6.2241796,16.714291 5.9971,16.454549 5.9971,16.097399 v -1.915673 q 0,-0.422077 0.2919482,-0.681819 0.2433052,-0.22728 0.6163522,-0.22728 h 0.081045 q 2.2544878,0.178576 4.3307416,1.136377 2.076086,0.957803 3.681871,2.581269 1.621977,1.623399 2.579007,3.701423 0.97319,2.061749 1.151609,4.334538 z m 7.266385,0.01614 q 0.01682,0.405853 -0.243305,0.681819 -0.259516,0.275984 -0.665013,0.275984 h -2.027493 q -0.356836,0 -0.632578,-0.243502 -0.275724,-0.243504 -0.29195,-0.600637 -0.16226,-3.051983 -1.427332,-5.811809 -1.26514,-2.759827 -3.292615,-4.772772 Q 15.404609,12.542104 12.6472,11.275872 9.9061004,9.9933838 6.8567915,9.8310488 6.4999709,9.8148927 6.2404563,9.5550662 5.9971503,9.2953236 5.9971503,8.9219502 V 6.8926809 q 0,-0.3896138 0.2919481,-0.6493564 Q 6.5324037,5.9998227 6.905451,5.9998227 h 0.048594 q 3.730464,0.1948173 7.120435,1.7207897 3.406113,1.5097508 6.033714,4.1558116 2.660054,2.629906 4.168482,6.039004 1.524655,3.409099 1.719283,7.126678 z"
+              />
+            </svg>
+            <xsl:value-of select="/rss/channel/title"/>
+          </h1>
+          <div class="aboutfeeds">
+            <p>This is a web feed, also known as an RSS feed. <strong>Subscribe</strong> by copying the URL into your RSS reader.</p>
+          </div>
+          <div class="head">
+            <div class="avatar">
+              <img class="logo" src="{{ .Site.Params.Logo }}" alt="Site Logo"/>
+            </div>
+            <div class="description">
+              <p><xsl:value-of select="/rss/channel/description"/></p>
+              <p><a hreflang="en"><xsl:attribute name="href"><xsl:value-of select="/rss/channel/link"/></xsl:attribute>Visit Website &#x2192;</a></p>
+            </div>
+          </div>
+        </header>
+        <div id="content">
+          <main>
+            <h2>📄 Recent Posts</h2>
+            <xsl:for-each select="/rss/channel/item">
+              <article>
+                <h3><a target="_blank"><xsl:attribute name="href"><xsl:value-of select="link"/></xsl:attribute><xsl:value-of select="title"/></a></h3>
+                <footer>Published: <time><xsl:value-of select="pubDate" /></time></footer>
+              </article>
+            </xsl:for-each>
+          </main>
+        </div>
+      </body>
+    </html>
+  </xsl:template>
+</xsl:stylesheet>
--- a/assets/scss/style.scss
+++ b/assets/scss/style.scss
@ -586,6 +586,15 @@ ul.list {
        font-weight: normal;
        font-size: 1.6 * $base_font_size * $title_font_mult;
        margin: 0;
+        {{ if site.Params.logoRightOfTitle }}
+            display: flex;
+            flex-direction: row;
+            flex-wrap: wrap;
+            align-items: center;
+            > a {
+                margin-right: 12px;
+            }
+        {{ end }}
    }

    img {
@ -915,7 +924,7 @@ header.jumbotronContainer {
            color: var(--default_fg) !important;
        }
        #main-nav a, .nerdlink:hover {
-            color: var(--default_accent) !important;
+            color: var(--default_fg) !important;
        }
        .nerdlink span {
            color: var(--default_fg) !important;
@ -1075,13 +1084,13 @@ header.jumbotronContainer {
        max-width: 100vw;
        min-width: 200px;
    }
-    h1 {
+    h2 {
        font-weight: 300;
        &.huge {
            font-size: 4 * $base_font_size * $title_font_mult;
        }
    }
-    h1, h2 {
+    h2, h3 {
        margin: 12px;
    }
    ul {
@ -1112,7 +1121,7 @@ header.jumbotronContainer {
        h1.huge {
            font-size: 3 * $base_font_size * $title_font_mult !important;
        }
-        h1, h2 {
+        h2, h3 {
            margin: 6px;
        }
    }
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html class="{{ if .IsHome }}home{{ end }}" lang="{{ .Site.LanguageCode }}">
    {{- partial "head.html" . -}}
+    {{- partial "build_assets.html" . -}}
    <body>
        <div id="baseContainer">
            {{- partial "header.html" . -}}
@ -14,6 +15,7 @@
            </div>
        </div>
        {{- partial "plausible.html" . -}}
+        {{- partial "umami.html" . -}}
        {{- partial "inject/body.html" . -}}
    </body>
 </html>
--- a/layouts/_default/search.json
+++ b/layouts/_default/search.json
@ -8,7 +8,7 @@
            "title" .Title
            "date" (.Date.Format "2006-01-02")
            "tags" (sort (or .Params.tags slice))
-            "summary" .Summary
+            "summary" (or .Params.description .Summary)
            "text" (lower .Plain)
            "link" .Permalink
            "image" (or .Params.Image "")) }}
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@ -1,41 +1,3 @@
 {{ define "main" }}
-    {{- partial "inject/content-before.html" . -}}
-    <article class="card single">
-        <h1>{{ .Title }}</h1>
-        {{ if (.Params.showDate | default true) }}
-            <p class="date">
-                <span title='{{ i18n "date" }}'> </span>
-                {{- partial "date.html" .Date -}}
-            </p>
-        {{ end }}
-        {{ if .Params.Image }}
-        <img src="{{ .Params.Image }}" alt="" />
-        {{ end }}
-        {{ if (.Params.toc | default false) }}
-            <div class="articleToc">
-                {{ .TableOfContents }}
-                <hr />
-            </div>
-        {{ end }}
-        <div>{{ .Content }}</div>
-    </article>
-    {{ if .Params.tags }}
-        {{ if not .Site.Params.paperCards }}<hr />{{ end }}
-        <p class="articleTagsContainer">
-            <span> </span>
-            <strong>{{ i18n "tagsColumn" }}</strong>
-            {{ range sort .Params.tags }}
-                <a
-                    {{ if site.Params.buttonTags | default false }}
-                    class="buttonTag"
-                    {{ end }}
-                    href="/tags/{{ . | urlize }}">#{{ . }}</a>
-            {{ end }}
-        </p>
-    {{ end }}
-    {{- partial "inject/content-after.html" . -}}
-    {{- partial "share_on_fediverse.html" . -}}
-    {{- partial "commento.html" . -}}
-    {{- partial "cactus_chat.html" . -}}
-    {{- partial "related_articles.html" . -}}
+    {{- partial "single_post.html" . -}}
 {{ end }}
--- a/layouts/index.html
+++ b/layouts/index.html
@ -2,8 +2,14 @@

    {{/* get all the pages that are regular posts and not pages */}}
    {{ $postsDir := .Site.Params.Posts | default (slice "posts" "post") }}
-    {{ $allPostsList := where site.RegularPages "Section" "in" $postsDir }}
+    {{ $allPostsList := where (where site.RegularPages "Section" "in" $postsDir) "Section" "!=" "" }}
    {{- partial "showcase.html" . -}}
-    {{- partial "home_post_list.html" (dict "Ctx" . "AllPostsList" $allPostsList) -}}
+    {{ if and .Site.Params.showSinglePageAsHome (ne .Site.Params.homeSinglePage "") }}
+        {{ with .Site.GetPage .Site.Params.homeSinglePage }}
+            {{- partial "single_post.html" . -}}
+        {{ end }}
+    {{ else }}
+        {{- partial "home_post_list.html" (dict "Ctx" . "AllPostsList" $allPostsList) -}}
+    {{ end }}

 {{ end }}
--- a/layouts/index.json
+++ b/layouts/index.json
@ -15,7 +15,7 @@
            "title" .Title
            "date" (.Date.Format "2006-01-02")
            "tags" (sort (or .Params.tags slice))
-            "summary" .Summary
+            "summary" (or .Params.description .Summary)
            "link" .Permalink
            "image" (or .Params.Image "")) }}
    {{ end }}
--- a/layouts/index.xml
+++ b/layouts/index.xml
@ -11,6 +11,7 @@
 {{- $pages = $pages | first $limit -}}
 {{- end -}}
 {{- printf "<?xml version=\"1.0\" encoding=\"utf-8\" standalone=\"yes\"?>" | safeHTML }}
+{{- printf "<?xml-stylesheet href=\"/feed_style.xsl\" type=\"text/xsl\"?>" | safeHTML -}}
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:media="https://www.rssboard.org/media-rss">
  <channel>
    <title>{{ if eq  .Title  .Site.Title }}{{ .Site.Title }}{{ else }}{{ with .Title }}{{.}} on {{ end }}{{ .Site.Title }}{{ end }}</title>
--- a/layouts/partials/article_card.html
+++ b/layouts/partials/article_card.html
@ -23,7 +23,13 @@
        {{end}}
        {{ if (site.Params.articleSummary | default true) }}
            <div class="articlePreview">
-                <p>{{ .Summary }}</p>
+                <p>
+                    {{ if .Params.description }}
+                        {{ .Params.description }}
+                    {{ else }}
+                        {{.Summary }}
+                    {{ end }}
+                </p>
                <p><a href="{{ .Permalink }}">{{ i18n "continueReading" }} </a></p>
            </div>
        {{ end }}
--- a/layouts/partials/build_assets.html
+++ b/layouts/partials/build_assets.html
@ -0,0 +1,10 @@
+{{/*
+    This partial builds non-standard assets (like xsl files) with the template
+    engine. It is necessary to do it this way to reduce user friction and
+    ensure that the file is there.
+*/}}
+{{ if .IsHome }}
+    {{ $feed_style_xsl_template := resources.Get "feed_style.xsl" }}
+    {{ $feed_style_xsl := $feed_style_xsl_template | resources.ExecuteAsTemplate "feed_style.xsl" . }}
+    {{ $noop := $feed_style_xsl.Permalink }}
+{{ end }}
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@ -29,9 +29,10 @@
        <link rel="stylesheet" href="https://latest.cactus.chat/style.css" type="text/css">
    {{ end }}
    {{ $style := resources.Get "/scss/style.scss" | resources.ExecuteAsTemplate "/scss/style.scss" . | resources.ToCSS (dict "targetPath" "css/styles.css" "outputStyle" "compressed" "enableSourceMap" "true") | resources.Fingerprint "sha512" }}
-    <link type=text/css rel=stylesheet href={{ $style.Permalink }} integrity="{{ $style.Data.Integrity }}" />
+    <link type="text/css" rel="stylesheet" href={{ $style.Permalink }} integrity="{{ $style.Data.Integrity }}" />
    {{- partial "inject/head.html" . -}}
    {{- partial "head_meta_seo.html" . -}}
    {{- partial "head_meta_opengraph.html" . -}}
+    {{- partial "head_meta_twitter.html" . -}}
    <link rel="manifest" href="/manifest/index.json" />
 </head>
--- a/layouts/partials/head_meta_opengraph.html
+++ b/layouts/partials/head_meta_opengraph.html
@ -22,7 +22,7 @@
    {{ if .Params.description }}
        <meta property="og:description" content="{{ .Params.description }}" />
    {{ else }}
-        <meta property="og:description" content="{{ substr .Summary 20 }}" />
+        <meta property="og:description" content="{{ substr .Summary 0 160 }}" />
    {{ end }}
 {{ else }}
    <meta property="og:title"
--- a/layouts/partials/head_meta_twitter.html
+++ b/layouts/partials/head_meta_twitter.html
@ -0,0 +1,27 @@
+<meta name="twitter:card" content="summary_large_image" />
+<meta property="twitter:domain"
+      content='{{ trim (trim .Site.BaseURL "http://") "https://" }}'
+/>
+<meta property="twitter:url" content="{{ .Permalink | absURL }}" />
+
+{{ if .IsPage }}
+    <meta name="twitter:title" content="{{ .Title }}" />
+    
+    <meta name="twitter:image"
+        content='{{ if .Params.Image }}{{ .Params.Image | absURL }}
+        {{ else }}{{ .Site.Params.icon512 | default "/img/icon.svg" | absURL }}
+    {{ end }}' />
+    {{ if .Params.description }}
+        <meta name="twitter:description" content="{{ .Params.description }}" />
+    {{ else }}
+        <meta name="twitter:description" content="{{ substr .Summary 0 160 }}" />
+    {{ end }}
+{{ else }}
+    <meta name="twitter:title"
+        content='{{ .Site.Title | default "Ficurinia" }}' />
+    {{ if .Site.Params.description }}
+        <meta name="twitter:description" content="{{ .Site.Params.description }}" />
+    {{ end }}
+    <meta name="twitter:image"
+        content='{{ .Site.Params.icon512 | default "/img/icon.svg" | absURL }}' />
+{{ end }}
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@ -2,13 +2,18 @@
    {{- partial "inject/header-before.html" . -}}
    <div class="titleAndSearchContainer">
        <div id="titleContainer">
-            <a class="unstyledLink" href="/">
-                <img src='{{ .Site.Params.Logo | default "/logo.svg" }}' />
-            </a>
+            {{ if not (.Site.Params.logoRightOfTitle | default false) }}
+                <a class="unstyledLink" href="/">
+                    <img src='{{ .Site.Params.Logo | default "/logo.svg" }}' />
+                </a>
+            {{ end }}
            <div class="rightOfLogo">
                <div class="titleAndHamburger">
                    <h1>
                        <a class="unstyledLink" href="/">{{ .Site.Title | default "Ficurinia" }}</a>
+                        {{ if .Site.Params.logoRightOfTitle | default false }}
+                            <img src='{{ .Site.Params.Logo | default "/logo.svg" }}' />
+                        {{ end }}
                    </h1>
                    {{ if (.Site.Params.mobileHamburgerNav | default false) }}
                        <label id="hamburger-menu" for="main-nav-toggler">
--- a/layouts/partials/jumbotron.html
+++ b/layouts/partials/jumbotron.html
@ -27,12 +27,12 @@
            <img src="{{ .Site.Data.jumbotron.image }}" />
        {{ end }}
        <div class="main_box">
-            <h1 class="
+            <h2 class="
                {{ if (.Site.Data.jumbotron.hugeTitle | default false) }}
                    huge
                {{ end }}
-            ">{{ .Site.Data.jumbotron.title }}</h1>
-            <h2>{{ .Site.Data.jumbotron.subtitle }}</h2>
+            ">{{ .Site.Data.jumbotron.title }}</h2>
+            <h3>{{ .Site.Data.jumbotron.subtitle }}</h3>
            {{ if .Site.Data.jumbotron.backgroundVideo }}
                <ul id="play_button_container" style="display: none">
                    <li>
--- a/layouts/partials/single_post.html
+++ b/layouts/partials/single_post.html
@ -0,0 +1,50 @@
+{{- partial "inject/content-before.html" . -}}
+<article class="card single">
+    {{ if .Params.showTitle | default true }}
+        <h1>{{ .Title }}</h1>
+    {{ end }}
+    {{ if (.Params.showDate | default true) }}
+        <p class="date">
+            <span title='{{ i18n "date" }}'> </span>
+            {{- partial "date.html" .Date -}}
+        </p>
+    {{ end }}
+    {{ if and (.Params.toc | default false) (.Site.Params.tocBeforeImage | default false) }}
+        {{- partial "toc.html" . -}}
+    {{ end }}
+    {{ if .Params.Image }}
+        <figure style="margin: 0">
+            <img src="{{ .Params.Image }}" alt="" />
+            {{ if .Params.ImageCaption }}
+                <figcaption>
+                    <p>{{ .Params.ImageCaption | markdownify }}</p>
+                </figcaption>
+            {{ end }}
+        </figure>
+    {{ end }}
+    {{ if and (.Params.toc | default false) (not (.Site.Params.tocBeforeImage | default false)) }}
+        {{- partial "toc.html" . -}}
+    {{ end }}
+    <div>{{ .Content }}</div>
+</article>
+{{ if .Params.tags }}
+    {{ if not .Site.Params.paperCards }}<hr />{{ end }}
+    <p class="articleTagsContainer">
+        <span> </span>
+        <strong>{{ i18n "tagsColumn" }}</strong>
+        {{ range sort .Params.tags }}
+            <a
+                {{ if site.Params.buttonTags | default false }}
+                class="buttonTag"
+                {{ end }}
+                href="/tags/{{ . | urlize }}">#{{ . }}</a>
+        {{ end }}
+    </p>
+{{ end }}
+{{- partial "inject/content-after.html" . -}}
+{{ if .Params.showShare | default true }}
+    {{- partial "share_on_fediverse.html" . -}}
+{{ end }}
+{{- partial "commento.html" . -}}
+{{- partial "cactus_chat.html" . -}}
+{{- partial "related_articles.html" . -}}
--- a/layouts/partials/toc.html
+++ b/layouts/partials/toc.html
@ -0,0 +1,4 @@
+<div class="articleToc">
+    {{ .TableOfContents }}
+    <hr />
+</div>
--- a/layouts/partials/umami.html
+++ b/layouts/partials/umami.html
@ -0,0 +1,10 @@
+{{ if .Site.Params.umamiScriptUrl }}
+    {{ if .Site.Params.umamiWebsiteId }}
+        <script
+            async
+            defer
+            data-website-id="{{ .Site.Params.umamiWebsiteId }}"
+            src="{{ .Site.Params.umamiScriptUrl }}"
+        ></script>
+    {{ end }}
+{{ end }}
--- a/layouts/shortcodes/imgwwidth.html
+++ b/layouts/shortcodes/imgwwidth.html
@ -0,0 +1 @@
+<img src='{{ .Get "src" }}' alt='{{ .Get "alt" }}' style='max-width: {{ .Get "width" }};' />
--- a/layouts/shortcodes/video.html
+++ b/layouts/shortcodes/video.html
@ -1,3 +1,33 @@
-<video autoplay loop style="max-width: 100%;">
-    <source src="{{ .Get 0 }}" />
-</video>
+{{ $h265 := .Get "h265" }}
+{{ $h264 := .Get "h264" }}
+{{ $vp9 := .Get "vp9" }}
+{{ $vp8 := .Get "vp8" }}
+{{ $caption := .Get "caption" }}
+{{ $attr := .Get "attr" }}
+{{ $attrlink := .Get "attrlink" }}
+<figure>
+    <video autoplay loop controls style="max-width: 100%;">
+        {{ if $h265 }}
+            <source src='{{ $h265 }}' type="video/mp4" />
+        {{ end }}
+        {{ if $h264 }}
+            <source src='{{ $h264 }}' type="video/mp4" />
+        {{ end }}
+        {{ if $vp9 }}
+            <source src='{{ $vp9 }}' type="video/webm" />
+        {{ end }}
+        {{ if $vp8 }}
+            <source src='{{ $vp8 }}' type="video/webm" />
+        {{ end }}
+    </video>
+    {{ if or $caption $attr }}
+        <figcaption>
+            {{ if $caption }}
+                <p>{{ . }}</p>
+            {{ end }}
+            <p>
+                {{ if $attrlink }}<a href="{{ $attrlink }}">{{ end }}{{ $attr }}{{ if $attrlink }}</a>{{ end }}
+            </p>
+        </figcaption>
+    {{ end }}
+</figure>
				`@ -0,0 +1 @@`
				`<img src='{{ .Get "src" }}' alt='{{ .Get "alt" }}' style='max-width: {{ .Get "width" }};' />`