understanding template.frontmatter and other things to adapt a theme

[yazae]

Hi, I will ask here because I don’t know where to ask otherwise :

I try to adapt the eleventy-garden theme to my personal blog / theme. It supports backlinks and wikilinks, important features for a garden to have.

The code for the backlinks is in notes.11tydata.js, and we’re here at the heart of the problem : I don’t understand how it truly works to adapt it correctly.

What I want to do is : not using the preview / excerpt who is used currently and using a description tag in the frontmatter of my notes.

description: "my description"
---

here is the original notes.11tydata.js:

module.exports = {
    layout: "note.md",
    type: "note",
    eleventyComputed: {
        title: data => (data.title || data.page.fileSlug),
        backlinks: (data) => {
            const notes = data.collections.notes;
            const currentFileSlug = data.page.fileSlug;

            let backlinks = [];

            // Search the other notes for backlinks
            for(const otherNote of notes) {
                const noteContent = otherNote.template.frontMatter.content;

                // Get all links from otherNote
                const outboundLinks = (noteContent.match(wikilinkRegExp) || [])
                    .map(link => (
                        // Extract link location
                        link.slice(2,-2)
                            .split("|")[0]
                            .replace(/.(md|markdown)\s?$/i, "")
                            .trim()
                    ));

                // If the other note links here, return related info
                if(outboundLinks.some(link => caselessCompare(link, currentFileSlug))) {

                    // Construct preview for hovercards
                    let preview = noteContent.slice(0, 240);

                    backlinks.push({
                        url: otherNote.url,
                        title: otherNote.data.title,
                        preview
                    })
                }
            }

            return backlinks;
        }
    }
}

And here is the include backlinks.html who use this function :

<hr>
<p class="larger" lang="en">
  Backlinks
</p>
{%- if backlinks.length > 0 -%}
<ul class="backlink">
  {%- for link in backlinks -%}
    <li class="backlink-note">
      <a href="{{- link.url -}}">
        <span class="larger">{{- link.title -}}</span>
          {{- link.preview | markdownify -}}
      </a>
    </li>
  {%- endfor -%}
</ul>
{%- else -%}
<p>
  Aucun <span lang="en">backlink</span> trouvé !
</p>
{%- endif -%}

and what I tried to do :

            // Search the other notes for backlinks
            for(const otherNote of notes) {
                const noteContent = otherNote.template.frontMatter.content;
                
                // importing description in the otherNote frontmatter // MY CODE
                const currentDescription = otherNote.template.frontmatter.description;
                
                […]
                
                // If the other note links here, return related info
                if(outboundLinks.some(link => caselessCompare(link, currentFileSlug))) {

                    // Construct preview for hovercards
                    let preview = noteContent.slice(0, 240);
                    // passing the description tag // MY CODE
                    let description = currentDescription;

                    backlinks.push({
                        url: otherNote.url,
                        title: otherNote.data.title,
                        description, // MY CODE
                        preview
                    })
                }

What I wanted it to do : just pass the description of the OtherNotes to the backlinks.push to use it instead of preview

And of course it don’t works as intended, it trows 3 types of errors at me, tell me description is not there (which should’nt be true but I sure don’t understand what I’m doing…) so here I am : could someone please help me through this ?

the error looks like this :

 Cannot read properties of undefined (reading 'description') (via TypeError)
[11ty]
[11ty] Original error stack trace: TypeError: Cannot read properties of undefined (reading 'description')
[…]

It’s OK if you don’t but I really sucks in js and programming in general (I only don’t suck at CSS I guess), it’s my first attempt at really adapting a theme and I’m close to lose my mind :’) (no, I’m not, it’s just frustrating to not get it).

If needed, my repository is here https://codeberg.org/yazae101/yazae.garden, and the branched commit is here but I really think it’s my understanding of the piece of code below who is the problem.

Have a great day,

Yazae

[yazae]

Okay I just found that the author of the eleventy-garden theme have released a standalone plugin :
https://github.com/binyamin/eleventy-plugin-backlinks

I will try to use it and come back here, but it probably is the same code… probably.
My question still stand to understand where my errors are :s

[yazae]

Nevermind, I found my problem :

                    backlinks.push({
                        url: otherNote.url,
                        title: otherNote.data.title,
                        description: otherNote.data.description, //MY CODE
                        preview
                    })

just adding the description like any other item in eleventy worked, without trying to touch the other part of the code. I feel very dumb but it works !