diff --git a/assets/FiraMono-Regular.ttf b/assets/FiraMono-Regular.ttf new file mode 100644 index 0000000..59e1e1a Binary files /dev/null and b/assets/FiraMono-Regular.ttf differ diff --git a/assets/og_base.png b/assets/og_base.png new file mode 100644 index 0000000..d535d82 Binary files /dev/null and b/assets/og_base.png differ diff --git a/content/posts/display-tempest-weather-static-site/index.md b/content/posts/display-tempest-weather-static-site/index.md index cd64db9..62107db 100644 --- a/content/posts/display-tempest-weather-static-site/index.md +++ b/content/posts/display-tempest-weather-static-site/index.md @@ -1,9 +1,17 @@ --- +<<<<<<< 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 @@ -13,7 +21,11 @@ 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. @@ -607,10 +619,17 @@ 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 to , roughly corresponding to the `icon` value from the Tempest API. - The temperature icon will range from to depending on the temperature. - The precipitation icon will be for no precipitation, and progress through and for a bit more rain, and cap out at for lots of rain[^rain]. - The pressure icon should change based on the trend: , , and . +======= +- The conditions icon will vary from to , roughly corresponding to the `icon` value from the Tempest API. +- The temperature icon will range from to depending on the temperature. +- The precipitation icon will be for no precipitation, and progress through and for a bit more rain, and cap out at for lots of rain[^rain]. +- The pressure icon should change based on the trend: , , and . +>>>>>>> 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. diff --git a/layouts/partials/opengraph.html b/layouts/partials/opengraph.html index 3d2e916..b3e9d33 100644 --- a/layouts/partials/opengraph.html +++ b/layouts/partials/opengraph.html @@ -1,98 +1,52 @@ -{{- $summary := truncate 160 .Summary }} -{{- $s := .Site.Params }} -{{- $p := .Params }} - -{{- $relpath := "" -}} -{{- if or $s.usePageBundles $p.usePageBundles }} - {{- $relpath = .Page.RelPermalink -}} -{{- end }} - -{{ if eq $p.usePageBundles false }} - {{- $relpath = "" }} -{{ 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 }} +{{ $base := resources.Get "og_base.png" }} +{{ $font := resources.Get "/FiraMono-Regular.ttf" }} + + + + {{- if .IsHome }} - -{{- else }} - -{{- end }} - - - - - -{{- $keywords := "" }} -{{- with $s.keywords }} - {{- $keywords = delimit $s.keywords "," }} -{{- end }} -{{- with $p.keywords }} - {{- $keywords = delimit . "," }} -{{- end }} -{{- with $keywords }} - -{{- end }} -{{- if eq .Section $s.blogDir -}} - {{- $date := ( .Date.Format "2006-02-01") -}} - {{- $date := (time .Date) }} - {{- $lastMod := (time .Lastmod) }} - +{{ $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 }} +{{- $iso8601 := "2006-01-02T15:04:05-07:00" -}} + +{{ with .PublishDate }}{{ end }} +{{ with .Lastmod }}{{ end }} +{{ $img := $base.Filter (images.Text .Page.Title (dict + "color" "#d8d8d8" + "size" 64 + "linespacing" 2 + "x" 40 + "y" 240 + "font" $font +))}} +{{ $img = resources.Copy (path.Join .Page.RelPermalink "og.png") $img }} +{{ .Scratch.Set "og_image" $img }} +{{- end -}} +{{ $img := .Scratch.Get "og_image" }} + + + + + + + + + +{{- with .Params.audio }}{{ end }} +{{- with .Site.Params.title }}{{ end }} +{{- with .Params.videos }}{{- range . }} + +{{ end }}{{ end }} +