adding oembed

Duncanma · May 27, 2024 · 13a8b9d · 13a8b9d
1 parent 0b28689
commit 13a8b9d
Show file tree

Hide file tree

Showing 15 changed files with 221 additions and 4 deletions.
diff --git a/config.toml b/config.toml
@@ -42,10 +42,20 @@ disableHugoGeneratorInject = false
     mediaType = "text/html"
     rel= "alternate"
     noUgly= true
+  [outputFormats.iframe]
+    name = "iframe"
+    baseName = "iframe"
+    mediaType = "text/html"
+    isHTML = true
+  [outputFormats.oembed]
+    name = "oembed"
+    baseName = "oembed"
+    mediaType = "application/json"
+    isPlainText = true
 
 [outputs]
-    home = ["HTML", "RSS", "JSON"]
-    page = ["HTML"]
+    home = ["HTML", "RSS", "JSON", "OEMBED", "IFRAME"]
+    page = ["HTML", "OEMBED", "IFRAME"]
 
 [author]
   name = "Duncan Mackenzie"

diff --git a/content/albums/brooklyn-bridge.md b/content/albums/brooklyn-bridge.md
@@ -2,7 +2,7 @@
 {
   "Outputs": [
     "html",
-    "purchase"
+    "purchase", "oembed", "iframe"
   ],
   "Tags": [
     "New York",

diff --git a/themes/hello-friend-ng/assets/scss/galleries/_styles.scss b/themes/hello-friend-ng/assets/scss/galleries/_styles.scss
@@ -1,3 +1,14 @@
+div.oembed a.card img {
+    width: fit-content;
+    height: fit-content;
+    text-align: center;
+    margin: auto;
+}
+
+div.oembed a.card {
+  text-decoration: none;
+}
+
 a.noJSclickToBuy {
   display:none;
 }

diff --git a/themes/hello-friend-ng/layouts/_default/baseof.iframe.html b/themes/hello-friend-ng/layouts/_default/baseof.iframe.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="{{ .Site.Language }}">
+    <head>
+        {{ partial "head.html" . }}
+    </head>
+
+    <body>
+        <div class="container">
+            <div class="content">
+                {{ block "main" . }}{{ end }}
+            </div>
+        </div>
+
+        {{ partial "javascript.html" . }}
+    </body>
+</html>
diff --git a/themes/hello-friend-ng/layouts/_default/baseof.oembed.json b/themes/hello-friend-ng/layouts/_default/baseof.oembed.json
@@ -0,0 +1,10 @@
+{
+    "version": "1.0",
+    "provider_name": "{{ .Site.Title }}",
+    "provider_url": "{{ .Site.BaseURL }}",
+    "type": "rich",
+    "title": "{{ .Title }} | {{ .Site.Title }}",
+    "url": "{{ .Permalink }}",
+    "author_name": "{{ if .Params.author }}{{ .Params.author }}{{ else }}Anonymous{{ end }}",
+    "html": "<iframe src=\"{{ .Permalink }}iframe.html\" width=\"600\" height=\"200\" title=\"{{ .Title }}\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"></iframe>"
+  }
diff --git a/themes/hello-friend-ng/layouts/_default/oembed.json b/themes/hello-friend-ng/layouts/_default/oembed.json
@@ -0,0 +1,10 @@
+{
+    "version": "1.0",
+    "provider_name": "{{ .Site.Title }}",
+    "provider_url": "{{ .Site.BaseURL }}",
+    "type": "rich",
+    "title": "{{ .Title }} | {{ .Site.Title }}",
+    "url": "{{ .Permalink }}",
+    "author_name": "{{ if .Params.author }}{{ .Params.author }}{{ else }}Anonymous{{ end }}",
+    "html": "<iframe src=\"{{ .Permalink }}iframe.html\" width=\"600\" height=\"200\" title=\"{{ .Title }}\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"></iframe>"
+  }
diff --git a/themes/hello-friend-ng/layouts/_default/single.oembed.json b/themes/hello-friend-ng/layouts/_default/single.oembed.json
@@ -0,0 +1,10 @@
+{
+    "version": "1.0",
+    "provider_name": "{{ .Site.Title }}",
+    "provider_url": "{{ .Site.BaseURL }}",
+    "type": "rich",
+    "title": "{{ .Title }} | {{ .Site.Title }}",
+    "url": "{{ .Permalink }}",
+    "author_name": "{{ if .Params.author }}{{ .Params.author }}{{ else }}Anonymous{{ end }}",
+    "html": "<iframe src=\"{{ .Permalink }}iframe.html\" width=\"600\" height=\"200\" title=\"{{ .Title }}\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"></iframe>"
+  }
diff --git a/themes/hello-friend-ng/layouts/albums/list.html b/themes/hello-friend-ng/layouts/albums/list.html
@@ -20,7 +20,7 @@ <h1>{{ .Title }}</h1>
                     {{ end }}
                     {{ $srcset = trim $srcset ","}}
                     <a class="card" href="{{ .RelPermalink }}" title="{{ .Title }}">
-                        <img loading="lazy" width="{{ $full.Width }}" height="{{ $full.Height }}" src="{{ $full.Url }}" alt="{{ $alt }}"
+                        <img width="{{ $full.Width }}" height="{{ $full.Height }}" src="{{ $full.Url }}" alt="{{ $alt }}"
                         srcset="{{ $srcset }}" >
                         <div>
                             <h2>{{ .Title }}</h2>

diff --git a/themes/hello-friend-ng/layouts/albums/single.iframe.html b/themes/hello-friend-ng/layouts/albums/single.iframe.html
@@ -0,0 +1,66 @@
+{{ define "main" }}
+<main class="album">
+  <section id="gallery" >
+    <h1>{{ .Title }}</h1>
+    {{ if .Description }}
+      <p class="albumDescription">{{ .Description | markdownify }}</p>
+    {{ end }}
+    {{- if .Content }}
+      <div class="albumContent">{{ .Content }}</div>
+    {{- end }}
+    <div class="photo-list" >
+      {{- range .Params.Pictures }}
+      {{ partial "singleImage.html" . | partial "make-image-links-open-in-new-window" }}
+      {{- end }}
+        <div class="spacer"></div>
+    </div>
+  </section>
+  <hr />
+
+  <div class="post-info">
+      {{- with .Params.tags }}
+          <p>
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-tag meta-icon"><path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"></path><line x1="7" y1="7" x2="7" y2="7"></line></svg>
+              {{- range . -}}
+                   <span class="tag"><a target="_blank" href="{{ "tags/" | absURL }}{{ . | urlize }}/">{{.}}</a></span>
+              {{- end }}
+          </p>
+      {{- end }}
+
+      {{- if .Date -}}
+      <p><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-calendar"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
+        {{- $startDate := .Params.startdate -}}
+        {{- if ne .Params.startDate nil -}}
+        {{- if eq (dateFormat "January 2, 2006" $startDate) (.Date.Format "January 2, 2006") -}}
+        Photos taken on
+        {{- else -}}
+        Photos taken between<span class="albumDate">&nbsp;<relative-time datetime="{{ dateFormat "2006-01-02T15:04:05Z0700" $startDate}}" format="datetime">
+            {{ if .Site.Params.dateformNumTime }}{{ dateFormat .Site.Params.dateformNumTime $startDate }}{{ else }}{{ dateFormat "2006-01-02 15:04 -0700" $startDate }}{{ end }}
+          </relative-time></span>
+           and
+        {{- end -}}
+        {{- end -}}
+          <span class="albumDate">&nbsp;<relative-time datetime="{{ .Date.Format "2006-01-02T15:04:05Z0700"}}" format="datetime">
+              {{ if .Site.Params.dateformNumTime }}{{ dateFormat .Site.Params.dateformNumTime .Date.Local }}{{ else }}{{ dateFormat "2006-01-02 15:04 -0700" .Date.Local }}{{ end }}
+          </relative-time></span>
+      </p>
+      {{- end -}}
+
+      {{- if .GitInfo }}
+          <p class="gitinfo"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-git-commit"><circle cx="12" cy="12" r="4"></circle><line x1="1.05" y1="12" x2="7" y2="12"></line><line x1="17.01" y1="12" x2="22.96" y2="12"></line></svg><a href="{{ .Site.Params.gitUrl -}}{{ .GitInfo.Hash }}" target="_blank" rel="noopener">{{ .GitInfo.AbbreviatedHash }}</a> @ {{ if .Site.Params.dateformNum }}{{ dateFormat .Site.Params.dateformNum .GitInfo.AuthorDate.Local }}{{ else }}{{ dateFormat "2006-01-02" .GitInfo.AuthorDate.Local }}{{ end }}</p>
+      {{- end }}
+  </div>
+
+      <div class="post-info">
+  {{ if .Params.comments }}
+     <div id="comments" class="thin">
+          {{- partial "comments.html" . -}}
+     </div>
+  {{ end }}
+
+  {{ if .Site.Params.showRelated }}
+  {{- partial "related.html" .  | partial "make-links-open-in-new-window" -}}
+  {{end}}
+     </div>
+</main>
+{{ end }}
diff --git a/themes/hello-friend-ng/layouts/albums/single.oembed.json b/themes/hello-friend-ng/layouts/albums/single.oembed.json
@@ -0,0 +1,10 @@
+{
+    "version": "1.0",
+    "provider_name": "{{ .Site.Title }}",
+    "provider_url": "{{ .Site.BaseURL }}",
+    "type": "rich",
+    "title": "{{ .Title }} | {{ .Site.Title }}",
+    "url": "{{ .Permalink }}",
+    "author_name": "{{ if .Params.author }}{{ .Params.author }}{{ else }}Anonymous{{ end }}",
+    "html": "<iframe src=\"{{ .Permalink }}iframe.html\" width=\"600\" height=\"300\" title=\"{{ .Title }}\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"></iframe>"
+  }
diff --git a/themes/hello-friend-ng/layouts/partials/head.html b/themes/hello-friend-ng/layouts/partials/head.html
@@ -7,6 +7,9 @@
 <meta name="description"
     content="{{ if .IsHome }}{{ .Site.Params.homeSubtitle }}{{ else }}{{ with .Description }}{{ . }}{{ else }}{{if .IsPage}}{{ .Summary | plainify }}{{ else }}{{ with .Site.Params.description }}{{ . }}{{ end }}{{ end }}{{ end }}{{ end }}" />
 <meta name="keywords" content="{{ .Site.Params.keywords }}" />
+{{ if .OutputFormats.Get "OEMBED" }}
+<link href="{{ with .OutputFormats.Get "OEMBED" }}{{ .Permalink }}{{ end }}" rel="alternate" type="application/json+oembed" title="{{ .Title }}" />
+{{ end }}
 {{ if or (eq .Type "tags") (eq .Type "blog")}}<meta name="robots" content="noindex" />{{ end }}
 <link rel="canonical" href="{{ .Permalink }}" />
 {{ block "title" . }}

diff --git a/themes/hello-friend-ng/layouts/partials/make-image-links-open-in-new-window.html b/themes/hello-friend-ng/layouts/partials/make-image-links-open-in-new-window.html
@@ -0,0 +1 @@
+{{ . | replaceRE `<a class="gallery-item" href=` `<a class="gallery-item" target="_blank" href=` | safeHTML }}
diff --git a/themes/hello-friend-ng/layouts/partials/make-links-open-in-new-window.html b/themes/hello-friend-ng/layouts/partials/make-links-open-in-new-window.html
@@ -0,0 +1 @@
+{{ . | replaceRE `<a href=` `<a target="_blank" href=` | safeHTML }}
diff --git a/themes/hello-friend-ng/layouts/posts/single.iframe.html b/themes/hello-friend-ng/layouts/posts/single.iframe.html
@@ -0,0 +1,59 @@
+{{ define "main" }}
+    <main class="post">
+        <div class="post-info">
+            <p><span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clock"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>{{ i18n "readingTime" .Page.ReadingTime }}</span>
+                {{ partial "shareOpenly.html" . | partial "make-links-open-in-new-window"}}
+            </p>
+        </div>
+        <article>
+            <h1 class="post-title"><a href="{{ .Permalink }}">{{ .Title | markdownify }}</a></h1>
+
+            {{ partial "toc.html" . }}
+
+            {{ with .Params.Cover }}
+                <img src="/img/{{ . }}" class="post-cover" />
+            {{ end }}
+
+            <div class="post-content">
+                {{ .Content | partial "add-header-anchors" | partial "make-links-open-in-new-window" }}
+            </div>
+        </article>
+        <hr />
+        <div class="feedback">
+            <p>Thoughts on this post? <a target="_blank" href="https://bsky.app/profile/duncanmackenzie.net">Feel free to reach out on Bluesky!</a></p>
+        </div>
+
+        <hr />
+
+        <div class="post-info">
+            {{- with .Params.tags }}
+                <p>
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-tag meta-icon"><path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"></path><line x1="7" y1="7" x2="7" y2="7"></line></svg>
+                    {{- range . -}}
+                    {{- if ne . "DevTo" -}}
+                        <span class="tag"><a target="_blank" href="{{ "tags/" | absURL }}{{ . | urlize }}/">{{.}}</a></span>
+                    {{- end -}}
+                    {{- end }}
+                </p>
+            {{- end }}
+
+            <p><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file-text"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+                {{ i18n "wordCount" .Page.WordCount }}
+                {{ partial "shareOpenly.html" . | partial "make-links-open-in-new-window" }}
+            </p>
+            <p><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-calendar"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
+                Published <relative-time datetime="{{ .Date.Format "2006-01-02T15:04:05Z0700"}}" format="relative">
+                    {{ if .Site.Params.dateformNumTime }}{{ dateFormat .Site.Params.dateformNumTime .Date.Local }}{{ else }}{{ dateFormat "2006-01-02 15:04 -0700" .Date.Local }}{{ end }}
+                </relative-time>
+            </p>
+
+            {{- if .GitInfo }}
+                <p class="gitinfo"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-git-commit"><circle cx="12" cy="12" r="4"></circle><line x1="1.05" y1="12" x2="7" y2="12"></line><line x1="17.01" y1="12" x2="22.96" y2="12"></line></svg><a href="{{ .Site.Params.gitUrl -}}{{ .GitInfo.Hash }}" target="_blank">{{ .GitInfo.AbbreviatedHash }}</a> @ {{ if .Site.Params.dateformNum }}{{ dateFormat .Site.Params.dateformNum .GitInfo.AuthorDate.Local }}{{ else }}{{ dateFormat "2006-01-02" .GitInfo.AuthorDate.Local }}{{ end }}</p>
+            {{- end }}
+        </div>
+
+        {{ if .Site.Params.showRelated }}
+        {{- partial "related.html" .  | partial "make-links-open-in-new-window" -}}
+        {{end}}
+    </main>
+{{ end }}
diff --git a/themes/hello-friend-ng/layouts/posts/single.oembed.json b/themes/hello-friend-ng/layouts/posts/single.oembed.json
@@ -0,0 +1,10 @@
+{
+    "version": "1.0",
+    "provider_name": "{{ .Site.Title }}",
+    "provider_url": "{{ .Site.BaseURL }}",
+    "type": "rich",
+    "title": "{{ .Title }} | {{ .Site.Title }}",
+    "url": "{{ .Permalink }}",
+    "author_name": "{{ if .Params.author }}{{ .Params.author }}{{ else }}Anonymous{{ end }}",
+    "html": "<iframe src=\"{{ .Permalink }}iframe.html\" width=\"600\" height=\"350\" title=\"{{ .Title }}\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"></iframe>"
+  }
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		{{ . \| replaceRE `<a class="gallery-item" href=` `<a class="gallery-item" target="_blank" href=` \| safeHTML }}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		{{ . \| replaceRE `<a href=` `<a target="_blank" href=` \| safeHTML }}