Simple list of Collections + Collection Image (ie. just the top level, "not" the posts)

[koitaki]

I was thinking of having a front page with a list of my collections (ie. topics).
For each collection, I'd like a clickable card with an image.
Thus, this would create an menu index of topics.

Ignoring the HTML/CSS side, wondering how I'd go about that with Eleventy?

Eg. my cockamamie attempt so far has been:

1. Set up collection folder, eg. Ski

  // in **ski.js** 
  {
    "tags": ["coding"],
    "layout": "layouts/page",
    "image": "chazalet.jpg"
  } 

+ various posts in assorted files

2. Hard code a list of collection names (ugh)

  // in **eleventy.js**
  config.addCollection('collsList', (collectionApi) => {
    const collsSet = ['skiing', 'png', 'coding', 'language', 'resorts']
    return [...collsSet].sort((a, b) => a.localeCompare(b))
  })

3. Loop through that list of collection names

// in **index.html**
{%- for topic in collections.collsList -%}
  {% set coll = collections[topic] %}
  
  <div class="card">
     <h2>{{ topic }}</h2>
      <img src="{{ site.images }}{{ coll.image }}" />
     <a href="{{ coll.page.url }}">Read More...</a>
  </div>

{% endfor %}

Big problem is I can't seem to get the data from the root file in the collection folder (ie. ski.js)
Hence, as per image below, data such as the card summary words are not coming through.

And overall, the approach feels quite wrong.
(eg. the hardcoding, plus my understanding is the navigation facility could do this automatically)

Can anyone advise?
Thanks in advance if so.

[pdehaan]

What about just doing a global data file with an array of collection names+meta?

Something like a global ./_data/collectionMap.js which has:

module.exports = [
  { "name": "coding",   "image": "/images/thumbnails/coding.jpg", "url": "/coding/" },
  { "name": "language", "image": "...",  "url": "/language/" },
  { "name": "png",      "image": "...",  "url": "/png/" },
  { "name": "resorts",  "image": "...",  "url": "/resorts/" },
  { "name": "skiing",   "image": "...",  "url": "/skiing/" }
];

Possibly don't even need that url property if it's just a slugified version of the topic.
But it's just a simple array, so you can do whatever custom ordering you want, or keep it alphabetical. I think I like hard-coding the collection names because there might be new collection names that I don't want appearing on a homepage, etc.

Then, on your homepage, just loop over the collectionMap array from the global data file:

// in **index.html**
{%- for coll in collectionMap -%}
  <div class="card">
     <h2>{{ coll.name }}</h2>
     <img src="{{ site.images }}{{ coll.image }}" />
     <a href="{{ coll.url }}">Read More...</a>
  </div>
{% endfor %}

[pdehaan]

Although, after thinking a bit more, you could probably just add this as frontmatter to your /index.html page too:

---
title: Homepage
featuredCollections:
    - coding
    - language
    - png
    - resorts
    - skiing
---

{%- for name in featuredCollections -%}
  <div class="card">
     <h2>{{ name }}</h2>
     <img src="{{ site.images }}/thumbnails/{{ name | slug }}.jpg" alt="{{ name }}" />
     <a href="/{{ name | url }}/">Read More...</a>
  </div>
{% endfor %}

[koitaki]

Thanks Peter, this is a really nice solution!
I had tried the data file approach you first mentioned, but as you noted, it was sub-optimal.
However the frontmatter to the index page works really well.
No need for a separate file, it can handle nested data, and it's helped me realize I can use the same approach for other collection pages.
Very much appreciate your help once again Peter, many thanks for taking the time! 👍 😊