eleventy icon indicating copy to clipboard operation
eleventy copied to clipboard

Expose page's frontmatter data to transformers

Open elmuerte opened this issue 1 year ago • 1 comments

Is your feature request related to a problem? Please describe.

With #1522 this.page was added for transformers. However this page data does not contain any of the front matter data.

{
  date: 2023-06-12T17:44:18.978Z,
  inputPath: './src/content/404.html',
  fileSlug: '404',
  filePathStem: '/404',
  outputFileExtension: 'html',
  templateSyntax: 'liquid',
  url: '/404.html',
  outputPath: 'dist/404.html'
}

If the frontmatter data was included it would allow pages to inform transformers to take certain actions.

Describe the solution you'd like

I would like to see the page object to also contain the front matter data

{
  date: 2023-06-12T17:44:18.978Z,
  inputPath: './src/content/404.html',
  fileSlug: '404',
  filePathStem: '/404',
  outputFileExtension: 'html',
  templateSyntax: 'liquid',
  url: '/404.html',
  outputPath: 'dist/404.html',
  data {
    title: '404 page',
    myCustomerFrontMatterElement: ['foo', 'bar']
  }
}

In case the frontmatter was:

---
title: 404 page
myCustomerFrontMatterElement:
  - foo
  - bar
---

### Describe alternatives you've considered

_No response_

### Additional context

_No response_

elmuerte avatar Jun 16 '23 06:06 elmuerte

Adding my voice here. I was adding a custom location to a post front matter for https://github.com/mofosyne/call-to-action-map-static-site

location:
  address: 1 barrack st, masslen, IL USA
  latitude: -45.862
  longitude: 24.7844
  name: 'Top NEP Engineering Products'
  description: 'Venue for neptunia fans gathering'

and while it works when doing pagenation, I was unable to directly access it via what I was expecting to be {{page.data.location | json}}


For now, figured out a workaround

  {% comment %} Workaround for https://github.com/11ty/eleventy/issues/2965 {% endcomment %}
  {%- for post in collections.posts -%}
    {% if page.url == post.url and post.data.location %}
      <div class="post-location">
        <h2>Location</h2>
        <i>lat:{{post.data.location.latitude}}, long:{{post.data.location.longitude}}</i>
        </br>
        <strong>{{post.data.location.name}}</strong>
      {%- if post.data.location.description %}
        </br>
        {{post.data.location.description}}
      {%- endif %}
      {%- if post.data.location.address %}
        </br>
        <a target="_new" href="https://www.openstreetmap.org/?mlat={{post.data.location.latitude}}&mlon={{post.data.location.longitude}}">{{post.data.location.address}}</a>
      {%- endif %}
      </div>
    {% endif %}
  {%- endfor -%}

mofosyne avatar Mar 01 '24 13:03 mofosyne