setting default title in directory data file

[btrem]

I want to set the default title for posts in a directory to the page.fileSlug, with the option to override the default with items from front matter. In order of precedence, I want the the title of the post to be title if it's set; if not, then location.name if that is set; otherwise, page.fileSlug.

What I have so far in my *.11tydata.js file:

module.exports = {
    eleventyComputed: {
        title: data => {
            if (data.title) {
                return data.title;
            }
            if (data.location && data.location.name) {
                return data.location.name;
            }
        }
    }
};

Is there a way to set title to fileSlug using elevenyComputed? AFAICT, page.* items are not available here.

[btrem]

Here are some examples of what I'd like:

post1.md

---
date: 2023-01-23
title: My Post
location:
  name: Public Gardens
  address:
    city: Boston
    state: Massachusetts
---
Lorem ipsum...

The title of the html output should be 'My Post'.

---

post2.md

---
date: 2023-01-23
location:
  name: Public Gardens
  address:
    city: Boston
    state: Massachusetts
---
Lorem ipsum...

The title of the html output should be 'Public Gardens'.

---

post3.md

---
date: 2023-01-23
location:
  address:
    city: Boston
    state: Massachusetts
---
Lorem ipsum...

The title of the html output should be 'post3'.

[pdehaan]

module.exports = {
  eleventyComputed: {
    title: (data) => {
      // console.log({ data });
      if (data.title) {
        return data.title;
      }
      if (data.location?.name) {
        return data.location.name;
      }
      return data.page?.fileSlug || "[Unknown title]";
    },
  },
};

Where I displayed # {{ title }} on each page, and here's is the generated output:

grep -irn "<h1>" www

# www/posts/post1/index.html:1:<h1>My Post</h1>
# www/posts/post2/index.html:1:<h1>Public Gardens</h1>
# www/posts/post3/index.html:1:<h1>post3</h1>

[pdehaan]

Here's a sample of the console.log({ data }) call:

{ data: {} }
{
  data: {
    eleventy: { version: '2.0.0', generator: 'Eleventy v2.0.0', env: [Object] },
    pkg: {
      name: '11ty-2768',
      version: '1.0.0',
      description: '',
      main: '.eleventy.js',
      scripts: [Object],
      keywords: [],
      author: 'Peter deHaan <peter@deseloper.com>',
      license: 'MPL-2.0',
      devDependencies: [Object]
    },
    eleventyComputed: { title: [Function: title] },
    date: 2023-01-23T00:00:00.000Z,
    location: { address: [Object] },
    page: {
      date: 2023-01-23T00:00:00.000Z,
      inputPath: './src/posts/post3.md',
      fileSlug: 'post3',
      filePathStem: '/posts/post3',
      outputFileExtension: 'html',
      templateSyntax: 'liquid,md',
      url: '/posts/post3/',
      outputPath: 'www/posts/post3/index.html'
    },
    collections: {},
    title: ''
  }
}

[btrem]

Ah. I didn't realize that page.* was a property of data. Not sure why you put a ? in the return object name. FYI: I replaced data.page?.fileSlug with data.page.fileSlug.

[btrem]

Oh, shoot, I just did a web search to see if there was a better alternative to if (foo.bar && foo.bar.baz) {} and learned about optional chaining. Sorry about that. The ? is there for a reason.

Odd, but I can't mark your reply as the answer. :(

[pdehaan]

Yeah, the optional chaining operator is pretty neat.
If foo.bar is null/undefined, then foo.bar.baz will throw an error.
If foo.bar is null/undefined, then foo.bar?.baz should just return undefined; which can be kinda useful instead of needing to chain a whole bunch of && operators in an if statement.