Multiple MD files into one page for FAQ site

[VitroidFPV]

I'm working on a simple FAQ prototype with Netlify CMS and Svelte to learn the basics of it

I have the CMS set up as I'd like it to, it outputs each question and its answer into one .md file for each pair into a folder, ending up with something like

---
Category: green
Question: Question 1
Answer: Answer 1
---

---
Category: red
Question: Question 2
Answer: Answer 2
---

---
Category: red
Question: Question 3
Answer: Answer 3
---

How would I go over each file in the FAQ output folder, and get elements into something like this from the MD files, sorted by the category?

<div class="green">
  <details>
    <summary>Question 1</summary>
    <div>Answer 1</div>
  </details>
</div>

<div class="red">
  <details>
    <summary>Question 2</summary>
    <div>Answer 2</div>
  </details>

  <details>
    <summary>Question 3</summary>
    <div>Answer 3</div>
  </details>
</div>

Any kind of feedback/help is appreciated, it would make my life managing the content a lot easier than writing each one in manually

[pngwn]

If you are using vite or sveltekit then you could use glob imports:

const modules = import.meta.globEager("**/glob_that_matches_dir")

modules will be an object that is something like this:

const modules = {
  "../content/post_one.svx": {
    metadata: { Category: '...', Question: '...', Answer: '...' },
    default: Component 
  },
  ...
}

So you should be able to do something like:

<script>
  const modules = 
    import.meta.globEager("**/glob_that_matches_dir");
  
  let grouped_modules = {};

  for (const k in modules) {
    const cat = modules[k].metadata.Category;
    if (grouped_modules[cat]) {
      grouped_modules[cat].push(modules[k]);
    } else {
      grouped_modules[cat] = [modules[k]]
    }
  }
	
  console.log(grouped_modules)
</script>

{#each Object.entries(grouped_modules) as [cat, contents]}
  <div class={cat}>
    {#each contents as question}
      <details>
        <summary>{question.metadata.Question}</summary>
        <div>{question.metadata.Answer}</div>
      </details>
    {/each}
  </div>
{/each}

Here is an example REPL showing roughly how it works.

More details about vite's glob imports can be found here: https://vitejs.dev/guide/features.html#glob-import

If you are not using vite of sveltekit then you will need to use a rollup or webpack plugin to glob import the files and then you should be able to do something similar.

Does this help?

[VitroidFPV]

Thanks so much for that! It took me some time to get running, but that was mostly because I had stuff set up incorrectly elsewhere and didn't figure it out at first. Now after some messing around it works great. Huge time saver for the long run, again thanks a lot

[AyushSehrawat]

For anyone looking into this in future, the globEager function has been deprecated in vite v4 and now you should use

import.meta.glob("**/glob_that_matches_dir", { eager: true })

Source: https://vitejs.dev/guide/migration.html#removed-deprecated-apis