[Newbie Question] Render Different Markdowns Properly in a Single Page

[silver pasture]

Apologies for the newbie question (as I'm getting started into Astro as a whole).

I've been attempting to render multiple markdown files, and so far, it has been going reasonably well, I guess? However, I'm encountering an issue where markdown newlines are not being rendered properly. I've tried various approaches to ensure the correct rendering of newlines (/Content/ Component), but unfortunately, I haven't had any success.

Here's what it looks like right now, compared to what it SHOULD look like

---
import Layout from "@layouts/Layout.astro";
import Header from "@components/Header.astro";
import Footer from "@components/Footer.astro";
import Hr from "@components/Hr.astro";
import Card from "@components/Card";

import { getCollection } from "astro:content";
const projects = await getCollection("projects");
---

<Layout>
  <Header activeNav="" />
  <main id="main-content">
    <section id="hero">
      <h1>Projects</h1>
    </section>

    <Hr />

    {
      projects.length > 0 && (
        <>
          <section id="projects">
            <ul>
              {projects.map(({ data, body }) => (
                <h2>{data.title}</h2>
                <p>{body}</p>
                <Hr />
              ))}
            </ul>
          </section>
        </>
      )
    }
  </main>
</Layout>

<Footer />

and here's some placeholder code

I also tried using white-space: pre; under styles, but I'm really not proud of how it looks, as it takes most linebreaks a bit too seriously

Any help and guidance is appreciated!

[silver pasture]

I got it to wokr in a hacky way:

<Layout>
  <Header activeNav="" />
  <main id="main-content">
    <section id="hero">
      <h1>Projects</h1>
    </section>

    <Hr />

    <section id="projects">
      <ul>
        {
          async () => {
            const projects = await Astro.glob("../content/projects/*.md");
            const project_props = projects.map(project => ({
              params: {
                title: project.frontmatter.title,
                type: project.frontmatter.type,
                link: project.frontmatter.link,
                icon: project.frontmatter.icon,
                img: project.frontmatter.img,
                featured: project.frontmatter.featured,
              },
              props: {
                project,
              },
            }));

            return project_props.map(({ params, props: { project } }) => {
              const { Content } = project;
              return (
                <>
                  <h2>{params.title}</h2>
                  <Content />
                </>
              );
            });
          }
        }
      </ul>
    </section>
  </main>
</Layout>

And for spacing:

  #projects {
    @apply pb-6;
  }
  #projects h2 {
    /* @apply my-4 inline-block text-3xl font-bold sm:my-8 sm:text-5xl; */
    @apply mb-2 mt-4 text-2xl font-bold tracking-wide;
  }
  #projects :global(p) {
    @apply mb-4 leading-relaxed;
  }

I really don't like the way on how this turned out to be, but it works I guess?? Dunno. I would appreciate feedback

[strange fractal]

It does look kinda messy, but you could clean it up a bit by moving some of it to the frontmatter:

---
import Layout from "@layouts/Layout.astro"
import Header from "@components/Header.astro"
import Hr from "@components/Hr.astro"

const projects = await Astro.glob("../content/projects/*.md")
const project_props = projects.map((project) => ({
  params: {
    title: project.frontmatter.title,
    type: project.frontmatter.type,
    link: project.frontmatter.link,
    icon: project.frontmatter.icon,
    img: project.frontmatter.img,
    featured: project.frontmatter.featured
  },
  props: {
    project
  }
}))
---

<Layout>
  <Header activeNav="" />
  <main id="main-content">
    <section id="hero">
      <h1>Projects</h1>
    </section>

    <Hr />

    <section id="projects" class="pb-6 [&_p]:mb-4 [&_p]:leading-relaxed">
      <ul>
        {
          project_props.map(({ params, props: { project } }) => {
            const { Content } = project
            return (
              <>
                <h2 class="mb-2 mt-4 text-2xl font-bold tracking-wide">{params.title}</h2>
                <Content  />
              </>
            )
          })
        }
      </ul>
    </section>
  </main>
</Layout>

not sure why you have <ul> in there if you're not rendering <li> inside...