Set title in nunjucks pages from queried data

[pandabrand]

Hi,
I can't seem to figure out how to do this and its seems like I'm missing something very obvious.
I am pulling in data from graphql query and creating pages from that. I want the title to be the concatenation of two elements in my object, title and date.

I can't figure out where to do this. Here's my template file artist.njk:

---
pagination:
  data: artist
  size: 1
  alias: paintingDate
layout: basecarousel
permalink: "painting-date/{{ paintingDate.date | slug }}-{{ paintingDate.title | slug }}/"
eleventyExcludeFromCollections: true
---
<div class="tdbc-container">
  <article class="artist">
    <header>
      <div class="tdbc-column-container">
        <section class="text-box">
          <h2>Recollections</h2>
          <div class="text-box--header">
            <h3>{{paintingDate.date}}</h3>
            <h4>{{paintingDate.title}}</h4>
            <h4>{{paintingDate.location[0].name}}</h4>
          </div>
          <div class="text-box--content">
            {{paintingDate.content | safe}}
          </div>
        </section>
        <section class="image--portrait">
          {% if paintingDate.portrait | length %}
            <img src="{{paintingDate.portrait[0].imageKitUrl}}" alt="" srcset="">
          {% endif %}
        </section>
      </div>
    </header>
    <section class="images">
      {% if paintingDate.artistImages | length %}
        <div class="images-row">
          <h5>Artist Images</h5>
            {% set images = paintingDate.artistImages %}
            {% set swipeClass = 'artist' %}
            {% include 'carousel.njk' %}
        </div>
      {% endif %}
      {% if paintingDate.leslieImages | length %}
        <div class="images-row">
          <h5>Leslie Images</h5>
          {% set images = paintingDate.leslieImages %}
          {% set swipeClass = 'leslie' %}
          {% include 'carousel.njk' %}
        </div>
      {% endif %}
      {% if paintingDate.locationImages | length %}
        <div class="images-row">
          <h5>Location Images</h5>
            {% set images = paintingDate.locationImages %}
            {% set swipeClass = 'location' %}
            {% include 'carousel.njk' %}
        </div>
      {% endif %}
    </section>
  </article>
</div>

My understanding (which seems wrong right now) is that I would make an 11tydata file to process this, like so artist.11tydata.js:

module.exports = {
    eleventyComputed: {
        title: artist => artist.title + ' - ' + artist.date
    }
}

and then in the artist.njk front matter I would add:

---
...
eleventyComputed:
    title: {{ title }}
---

but that results in this error:
TypeError: str.replace is not a function (via Template render error)

How would you go about doing this? Thanks!

[pdehaan]

If you're setting the title via eleventyComputed in the artist.11tydata.js file, I don't believe you need to try setting it again in the artist.njk file.

My only immediate idea would be the eleventyComputed might need to be something like this:

module.exports = {
    eleventyComputed: {
        title: data => data.artist.title + ' - ' + data.artist.date
    }
}

Do you have a public repo somewhere or any chance you can tell me what the artist array looks like?
If not I can probably just create some overly simple test case with an array that only includes nested title and date properties and see if we can figure out the computed concatenation.

[pandabrand]

In the search-update branch https://github.com/pandabrand/plein-air-11ty
Now it is undefined - undefined???

[pdehaan]

Ah, that repo needs a lot of env vars.

Here's my simpler case:

// src/_data/artist.js
module.exports = [{
  title: "Artist 1",
  date: "2022-04-14"
}, {
  title: "Artist 2",
  date: "2022-06-24"
}, {
  title: "Artist 4",
  date: "2022-09-30"
}];

---
# src/artist.njk
pagination:
  data: artist
  size: 1
  alias: paintingDate
permalink: "painting-date/{{ paintingDate.date | slug }}-{{ paintingDate.title | slug }}/"
eleventyComputed:
  title: "{{ paintingDate.title }} - {{ paintingDate.date }}"
---

title="{{ title }}"
title2="{{ title2 }}"

Above we can set the eleventyComputed.title directly in the NJK file using templating instead of JavaScript (for the {{ title }} value).

The JavaScript data file version is:

// src/artist.11tydata.js
module.exports = {
  eleventyComputed: {
    title2(data) {
      return `${data.paintingDate.title} - ${data.paintingDate.date}`;
    }
  }
};

This sets a computed title2 value (so it didn't conflict with the title value in the .njk template above.
And the output looks something like this:

<!-- www/painting-date/2022-09-30-artist4/index.html -->
title="Artist 1 - 2022-04-14"
title2="Artist 1 - 2022-04-14"

[pandabrand]

Ok, so I'm still trying to figure out what I'm doing wrong when I put an output into artist.11tydata.js like so:

module.exports = {
    eleventyComputed: {
        title: data => {
            console.log(data)
            return data.title + ' - ' + data.date
        }
    }
}

the output looks like this:

{
  artist: [
    {
      showThisDate: true,
      location: [Array],
      date: 'August 16, 2019',
      images: [Array],
      title: 'Alex Bradley Cohen',
      content: '\n' +
        '<p>Here it begins:</p>\n' +
        '\n' +
        '\n' +
        '\n' +
        '<p>Memory is tricky, But<br>great experiences are made through extraordinary events.<br>And this event, my time in the park with leslie<br>that she made an opening for, cultivated by her<br>unrehearsed by me<br>took form as organically in plain site<br>as the drawings we made<br>while we took site and plein aired our site<br>the location was intimate and open<br>we had visitors both Woman, Child, Animal, Insect<br>that flew for us, and told us what we were doing was beautiful and took our photo<br>it was a moment where connections and differences were made and noted<br>where seeds for imaginative projections were made<br>an archaic event, two humans in greenery, trying to make sense of their own relationship, to an external world through image making<br>showing each other what they saw, how they see, seeing who got it right, and whose window directed us forward<br>oh it was a memory all right, one that stuck</p>\n',
      portrait: [Array],
      artistImages: [Array],
      leslieImages: [Array],
      locationImages: [Array],
      panImage: 'https://ik.imagekit.io/studiofwww/2021/04/[email protected]'
    },
    {
      showThisDate: true,
      location: [Array],
      date: 'May 7, 2022',
      images: [Array],
      title: 'Alex Harvey',
      content: null,
      portrait: [Array],
      artistImages: [Array],
      leslieImages: [Array],
      locationImages: [Array],
      panImage: 'https://ik.imagekit.io/studiofwww/2021/04/[email protected]'
    },
...
  ]
}

So instead of on artist object it has all of the artist objects as an array. So am I using this data file in the wrong place?

[pandabrand]

Thanks @pdehaan! This was it!It was sort of it

[pdehaan]

That was a bit unexpected… my simple test case w/ eleventyComputed worked without any issues:

---
pagination:
  data: gql
  size: 1
  alias: paintingDate
permalink: "painting-date/{{ paintingDate.date | slug }}-{{ paintingDate.title | slug }}/"
eleventyComputed:
  title: "{{ paintingDate.title }} - {{ paintingDate.date }}"
  description2: "{{ stripDescription }}"
---

title="{{ title }}"
title2="{{ title2 }}"

stripDescription="{{ stripDescription }}"
description2="{{ description2 }}"

OUTPUT

...
[11ty] Writing www/painting-date/april-20-2019-kate-sierputowski/index.html from ./src/artist.njk
[11ty] Writing www/painting-date/june-13-2022-kelly-kaczynski/index.html from ./src/artist.njk
[11ty] Writing www/painting-date/june-24-2022-kelly-williams/index.html from ./src/artist.njk
[11ty] Writing www/painting-date/august-1-2018-kg-and-dan-gunn/index.html from ./src/artist.njk
[11ty] Writing www/painting-date/april-16-2020-kindon-mills/index.html from ./src/artist.njk
[11ty] Wrote 100 files in 0.10 seconds (1.0ms each, v1.0.2)

[pandabrand]

does it work if you change description2 in the front matter to description?

[pdehaan]

Yep, all works for me:

---
pagination:
  data: gql
  size: 1
  alias: paintingDate
permalink: "painting-date/{{ paintingDate.date | slug }}-{{ paintingDate.title | slug }}/"
eleventyComputed:
  title: "{{ paintingDate.title }} - {{ paintingDate.date }}"
  description: "{{ stripDescription }}"
---

title="{{ title }}"
title2="{{ title2 }}"

stripDescription="{{ stripDescription }}"
description="{{ description }}"
paintingDate.content="{{ paintingDate.content }}"

SAMPLE OUTPUT

title="Danielle Bitner - April 10, 2020"
title2="Danielle Bitner - April 10, 2020"

stripDescription="Table set, Zooming
Blank paper wants color, action
Familiar looks new
Excited to paint
Look outside, inside bubble
Cactus, window, car.
In the April sun
Observation connection
Children like this too
Despite pandemic
A way to share space and time
Unexpected view"

description="Table set, Zooming
Blank paper wants color, action
Familiar looks new
Excited to paint
Look outside, inside bubble
Cactus, window, car.
In the April sun
Observation connection
Children like this too
Despite pandemic
A way to share space and time
Unexpected view"

paintingDate.content="<p>Table set, Zooming<br />
Blank paper wants color, action<br />
Familiar looks new</p>
<p>Excited to paint<br />
Look outside, inside bubble<br />
Cactus, window, car.</p>
<p>In the April sun<br />
Observation connection<br />
Children like this too</p>
<p>Despite pandemic<br />
A way to share space and time<br />
Unexpected view</p>"

[pandabrand]

hmmmm, @pdehaan thanks for all your help. I must have something environmental going on that I don't see. I'll go through that and see what I can find.

[pdehaan]

Also note that I'm only building 100 pages from that data dump, since that's all that was included in the Google Drive JSON. I think it said something like "53 more records" at the bottom of that file, so it is possible something is invalid in one of those records not included in the JSON you sent.

But more likely something w/ one of the plugins or layouts or blocks (since my simple tests bypassed all that complexity).