Eleventy rendering [object Object] when dealing with frontmatter

47 Views Asked by At

I am using netlify cms and eleventy to build a blog. Here's how my markdown looks like:

---
title: How should your business website look like ? Find the perfect agency for it.
description: So, you've decided to take your business online and create a website that will make your competitors green with envy Fantastic! However, before you dive headfirst into the wild world of web development, let's take a humorous and engaging look at what your business website should look like and how to find the perfect agency to bring your digital dreams to life
date: '2023-07-26T05:48:54+05:30'
image: 'https://cdn.pixabay.com/photo/2018/05/18/15/30/web-design-3411373_1280.jpg'
imageAlt: website blog image
tags:
  - post
---

content goes here

Then in my blog.njk file I am looping over data:

{%- for post in collections.post | reverse -%}
    {% include 'article-snippet.njk' %}
 {%- endfor-%} 

And rendering it plain:



<div class="p-4 md:w-1/3 shadow-md" data-aos="fade-up" data-tilt data-shine-opacity="0.5" data-shine-save="true">
        <div class="h-full rounded-lg overflow-hidden" data-aos="fade-up">
          <img class="lg:h-48 md:h-36 w-full object-cover object-center" src="{{post.data.image}}" alt="{{post.data.imageAlt}}">
          <div class="p-6">
            <h3 class="title-font text-lg font-medium mb-3">{{post.data.title}}</h3>
            <p class="leading-relaxed mb-3">{{post.data.description}}...</p>
            <div class="flex items-center flex-wrap">
              <a class="text-indigo-500 inline-flex items-center md:mb-2 lg:mb-0" href="{{post.url}}">Read More
                <svg class="w-4 h-4 ml-2" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
                  <path d="M5 12h14"></path>
                  <path d="M12 5l7 7-7 7"></path>
                </svg>
              </a>
              <span class="text-gray-500 font-semibold">{{post.data.date}}</span>
            </div>
          </div>
        </div>
      </div>    

The problem is the title and description fields show [object].

Now I can fix this issue by using eleventyComputed but I don't want to do that because of problems with my cms.(or if you know a way...)

What's strange is that this issue occurs only during build time. When running it works perfectly.

Let me know if you need anything else.

0

There are 0 best solutions below