content/posts/display-tempest-weather-static-site/index.md

@@ -1,17 +1,9 @@
 ---
-<<<<<<< HEAD
 title: "Displaying Data from Tempest Weather Station on a Static Site"
-=======
-title: "Displaying Data from a Tempest Weather Station on a Static Site"
->>>>>>> main
 date: "2024-02-11T20:48:49Z"
 # lastmod: 2024-02-10
 description: "Using a GitHub Actions workflow to retrieve data from an authenticated API, posting results to a publicly-accessible pastebin, and displaying them on a static web site."
 featured: false
-<<<<<<< HEAD
-=======
-thumbnail: "finished-product.png"
->>>>>>> main
 toc: true
 comments: true
 categories: Backstage
@@ -21,11 +13,7 @@ tags:
   - meta
   - serverless
 ---
-<<<<<<< HEAD
 As I covered briefly [in a recent Scribble](https://scribbles.jbowdre.lol/post/near-realtime-weather-on-profile-lol-ku4yq-zr), I was inspired by the way [Kris's omg.lol page](https://kris.omg.lol/) displays realtime data from his [Weatherflow Tempest weather station](https://shop.weatherflow.com/products/tempest). I thought that was really neat and wanted to do the same on [my omg.lol page](https://jbowdre.lol) with data from my own Tempest, but I wanted to do it without including my station ID or API token directly in the client-side JavaScript.
-=======
-As I covered briefly [in a recent Scribble](https://scribbles.jbowdre.lol/post/near-realtime-weather-on-profile-lol-ku4yq-zr), I was inspired by the way [Kris's omg.lol page](https://kris.omg.lol/) displays realtime data from his [Weatherflow Tempest weather station](https://shop.weatherflow.com/products/tempest). I thought that was really neat and wanted to do the same on [my omg.lol page](https://jbowdre.lol) with data from my own Tempest, but I wanted to find a way to do it without needing to include an authenticated API call in the client-side JavaScript.
->>>>>>> main
 
 I realized I could use a GitHub Actions workflow to retrieve the data from the authenticated Tempest API, post it somewhere publicly accessible, and then have the client-side code fetch the data from there without needing any authentication. After a few days of tinkering, I came up with a presentation I'm happy with.
 
@@ -619,17 +607,10 @@ For testing this, I can manually alter[^alter] the contents of the pastebin to e
 ![Local test page reflecting "57°f (13.9°c), feels 67°f (19.4°c)" and "no rain today"](local-test-conditional.png)
 
 The final touch will be to change the icons depending on the values of certain fields:
-<<<<<<< HEAD
 - The conditions icon will vary from <i class="fa-solid fa-sun"></i> to <i class="fa-solid fa-cloud-bolt"></i>, roughly corresponding to the `icon` value from the Tempest API.
 - The temperature icon will range from <i class="fa-solid fa-thermometer-empty"></i> to <i class="fa-solid fa-thermometer-full"></i> depending on the temperature.
 - The precipitation icon will be <i class="fa-solid fa-droplet-slash"></i> for no precipitation, and progress through <i class="fa-solid fa-glass-water-droplet"></i> and <i class="fa-solid fa-glass-water"></i> for a bit more rain, and cap out at <i class="fa-solid fa-bucket"></i> for lots of rain[^rain].
 - The pressure icon should change based on the trend: <i class="fa-solid fa-arrow-trend-up"></i>, <i class="fa-solid fa-arrow-right-long"></i>, and <i class="fa-solid fa-arrow-trend-down"></i>.
-=======
-- The conditions icon will vary from <i class='fa-solid fa-cloud-sun'></i> to <i class='fa-solid fa-cloud-showers-heavy'></i>, roughly corresponding to the `icon` value from the Tempest API.
-- The temperature icon will range from <i class='fa-solid fa-thermometer-empty'></i> to <i class='fa-solid fa-thermometer-full'></i> depending on the temperature.
-- The precipitation icon will be <i class='fa-solid fa-droplet-slash'></i> for no precipitation, and progress through <i class='fa-solid fa-glass-water-droplet'></i> and <i class='fa-solid fa-glass-water'></i> for a bit more rain, and cap out at <i class='fa-solid fa-bucket'></i> for lots of rain[^rain].
-- The pressure icon should change based on the trend: <i class='fa-solid fa-arrow-trend-up'></i>, <i class='fa-solid fa-arrow-right-long'></i>, and <i class='fa-solid fa-arrow-trend-down'></i>.
->>>>>>> main
 
 [^rain]: Okay, admittedly this progression isn't perfect, but it's the best I could come up with within the free FA icon set.
 

layouts/partials/opengraph.html

@@ -1,70 +1,98 @@
-{{ $base := resources.Get "og_base.png" }}
+{{- $summary := truncate 160 .Summary }}
-{{ $font := resources.Get "/FiraMono-Regular.ttf" }}
+{{- $s := .Site.Params }}
-<meta property="og:title" content="{{ .Title }}" />
+{{- $p := .Params }}
-<meta property="og:description" content="{{ with .Description }}{{ . }}{{ else }}{{if .IsPage}}{{ .Summary }}{{ else }}{{ with .Site.Params.description }}{{ . }}{{ end }}{{ end }}{{ end }}" />
+
-<meta property="og:type" content="{{ if .IsPage }}article{{ else }}website{{ end }}" />
+{{- $relpath := "" -}}
-<meta property="og:url" content="{{ .Permalink }}" />
+{{- if or $s.usePageBundles $p.usePageBundles }}
-<meta property="og:locale" content="{{ .Lang }}" />
+  {{- $relpath = .Page.RelPermalink -}}
-{{- if .IsHome }}
-{{ $img := $base.Filter (images.Text .Site.Params.Description (dict
-  "color" "#d8d8d8"
-  "size" 64
-  "linespacing" 2
-  "x" 40
-  "y" 300
-  "font" $font
-))}}
-{{ $img = resources.Copy "og.png" $img }}
-{{ .Scratch.Set "og_image" $img }}
 {{- end }}
 
-{{- if .IsPage }}
+{{ if eq $p.usePageBundles false }}
-{{- $iso8601 := "2006-01-02T15:04:05-07:00" -}}
+  {{- $relpath = "" }}
-<meta property="article:section" content="{{ .Section }}" />
-{{ with .PublishDate }}<meta property="article:published_time" {{ .Format $iso8601 | printf "content=%q" | safeHTMLAttr }} />{{ end }}
-{{ with .Lastmod }}<meta property="article:modified_time" {{ .Format $iso8601 | printf "content=%q" | safeHTMLAttr }} />{{ end }}
-{{ with .Params.thumbnail }}
-{{/* $thumbPath := (add $.Page.RelPermalink . ) */}}
-{{ $thumbnail := $.Resources.Get . }}
-{{ with $thumbnail }}
-{{ $img := $base.Filter (images.Overlay (.Process "fit 300x250") 875 38 )}}
-{{ $img = $img.Filter (images.Text $.Page.Title (dict
-  "color" "#d8d8d8"
-  "size" 64
-  "linespacing" 2
-  "x" 40
-  "y" 300
-  "font" $font
-))}}
-{{ $img = resources.Copy (path.Join $.Page.RelPermalink "og.png") $img }}
-{{ $.Scratch.Set "og_image" $img }}
 {{ end }}
-{{ else }}
-{{ $img := $base.Filter (images.Text .Page.Title (dict
-  "color" "#d8d8d8"
-  "size" 64
-  "linespacing" 2
-  "x" 40
-  "y" 300
-  "font" $font
-))}}
-{{ $img = resources.Copy (path.Join $.Page.RelPermalink "og.png") $img }}
-{{ .Scratch.Set "og_image" $img }}
-{{ end }}
-{{- end -}}
-{{ $img := .Scratch.Get "og_image" }}
-
-<meta property="og:image" content="{{$img.Permalink}}">
-<meta property="og:image:width" content="{{$img.Width}}" />
-<meta property="og:image:height" content="{{$img.Height}}" />
-<meta name="twitter:card" content="summary_large_image" />
-<meta name="twitter:title" content="{{ .Title }}" />
-<meta name="twitter:description" content="{{ with .Description }}{{ . }}{{ else }}{{if .IsPage}}{{ .Summary }}{{ else }}{{ with .Site.Params.description }}{{ . }}{{ end }}{{ end }}{{ end -}}"/>
-<meta name="twitter:image" content="{{$img.Permalink}}" />
-
-{{- with .Params.audio }}<meta property="og:audio" content="{{ . }}" />{{ end }}
-{{- with .Site.Params.title }}<meta property="og:site_name" content="{{ . }}" />{{ end }}
-{{- with .Params.videos }}{{- range . }}
-<meta property="og:video" content="{{ . | absURL }}" />
-{{ end }}{{ end }}
 
+{{- with $p.description }}
+  {{- $summary = truncate 160 . }}
+{{- end }}
+{{- if .IsHome }}
+  {{- $summary = $s.description }}
+  {{- with $p.description }}
+    {{- $summary = . }}
+  {{- end }}
+{{- end }}
+{{- $site := .Site.Title }}
+{{- $title := .Title }}
+{{- $permalink := .Permalink }}
+{{- $logo := absURL $s.logo }}
+{{- $author := $s.author }}
+{{- with $p.author }}
+  {{ $author := . }}
+{{- end }}
+{{- $image := absURL $s.fallBackOgImage }}
+{{- with $p.featureImage }}
+  {{- $fullpath := ( add $relpath . ) -}}
+  {{- $image = absURL $fullpath  }}
+{{- end }}
+{{- with $p.thumbnail }}
+  {{- $fullpath := ( add $relpath . ) -}}
+  {{- $image = absURL $fullpath  }}
+{{- end }}
+{{- with $p.shareImage }}
+  {{- $fullpath := ( add $relpath . ) -}}
+  {{- $image = absURL $fullpath  }}
+{{- end }}
+<meta property="og:locale" content="{{ .Lang }}" />
+{{- if .IsHome }}
+<meta property="og:type" content="website">
+{{- else }}
+<meta property="og:type" content="article">
+{{- end }}
+<meta name="description" content="{{ $summary }}" />
+<meta property="og:url" content="{{ $permalink }}" />
+<meta property="og:title" content="{{ $title }}" />
+<meta property="og:description" content="{{ $summary }}" />
+<meta property="og:image" content="{{ $image }}" />
+{{- $keywords := "" }}
+{{- with $s.keywords }}
+  {{- $keywords = delimit $s.keywords "," }}
+{{- end }}
+{{- with $p.keywords }}
+  {{- $keywords = delimit . "," }}
+{{- end }}
+{{- with $keywords }}
+  <meta name="keywords" content="{{ $keywords }}" />
+{{- end }}
+{{- if eq .Section $s.blogDir -}}
+  {{- $date := ( .Date.Format "2006-02-01") -}}
+  {{- $date := (time .Date) }}
+  {{- $lastMod := (time .Lastmod) }}
+  <script type="application/ld+json">
+    {
+      "@context": "http://schema.org",
+      "@type": "BlogPosting",
+      "mainEntityOfPage":"{{ $permalink }}",
+      "name": "{{ $site }}",
+      "headline": {{ $title }},
+      "description": {{ $summary }},
+      "url": "{{ $permalink }}",
+      "datePublished": {{ $date  }},
+      "dateModified": {{ $lastMod }},
+      "author": {
+        "@type": "Person",
+        "name": "{{ $author }}"
+      },
+      "image":{
+        "@type":"ImageObject",
+        "url": "{{ $image }}"
+      },
+      "publisher": {
+        "@type": "Organization",
+        "logo": {
+          "@type":"ImageObject",
+          "url": "{{ $logo }}"
+        },
+        "name": "{{ $site }}"
+      }
+    }
+  </script>
+{{- end }}