Passing frontmatter variables to a jsbuild JS script

support
1

Hello Hugo Community,

I have some pages with frontmatter posted like so:

eventPage.md

---
title: "my title"
date: "2023-01-25T00:00:00Z"
category: "event"
eventDate: "2023-02-22T00:00:00Z"
eventStyle: "online"
eventStatus: "new"
product: "123"
hasToc: false
type: "single"
layout: "news"
---

<!-- textlint-disable prh,ja-no-mixed-period -->

### My event

Event details, copy text, blah blah blah.

These pages variables are displayed as cards on my front page, and I have no problem calling the cards and accessing frontmatter variables like so:
index.html

                            {{ with $.Site.Params.event.devcamp }}
                            {{ with $.GetPage . }}
                            {{ partial "custom/eventCard.html" . }}

This displays the card partial as expected, which links to the event page. Each of these display cards have a small sticker tag in their css, which I would to change depending on distance from the eventDate frontmatter variable.

Since I am working with dates, my first thought was a JS file with JS Build, defined in my baseOF like:

baseof.html

  {{ $dateJS := resources.Get "js/dateCompare.js" | js.Build (dict "params" (dict "event" $.Site.Params.event)) | minify | fingerprint }}
  <script src="{{ $dateJS.Permalink }}"></script>

This JS file builds and is passed the test params, and sitewide params correctly, as it can console.log on my front page.

Now (thank you for still reading) my question is:
Is it possible to pass each eventPage.md’s frontmatter variables to my JS script?

Here are some variations I have tried below:

  1. passing as a variable:

baseof.html

  {{ $devcamp := .GetPage $.Site.Params.event.devcamp }} 
  {{ with $devcamp }}
  {{ $dateJS := resources.Get "js/dateCompare.js" | js.Build (dict "params" (dict "event" $devcamp)) | minify | fingerprint }}
  <script src="{{ $dateJS.Permalink }}"></script>
  {{ end }}

^ this causes a hard crash / stack overflow by the way

  1. making a dict and trying to pass that
  {{ with $.Site.Params.event.devcamp }}
  {{ with $.GetPage . }}
  {{ $devInfo := (dict "devcamp" .) }}
  {{ $dateJS := resources.Get "js/dateCompare.js" | js.Build (dict "params" $eventInfo) | minify |
  fingerprint }}
  <script src="{{ $dateJS.Permalink }}"></script>
  {{ end }}
  {{ end }}

If anyone has any hugo-ish ways of tackling this problem that would be very apprecaited.