Markdown renderen met Astro

[Annevd]

17/10 Markdown rendering met Astro

Met Astro kan je heel makkelijk je markdown renderen naar HTML. Om dit te doen heb ik deze tutorial van Astro Docs gevolgd.

De projectstructuur ziet er als volgt uit:

Net zoals in Sveltekit, maak je in je markdown gebruik van frontmatter zoals dit:

---
layout: ../../layouts/MarkdownPostLayout.astro
title: 'We ❤️ Web met Nicolas Garnier'
pubDate: "2024-10-04"
description: 'Een we <3 web over creativity en interactivity'
image:
    url: '../images/lief-amsterdam.png'
    alt: ''
tags: ["Interactivity", "Creative"]
---

Met een markdown layout kan ik consistent bij elke blog post een aantal dingen standaard weergeven:

---
import BaseLayout from './BaseLayout.astro';
const { frontmatter } = Astro.props; // Hiermee geef je de 'props' door, ook wel de verschillende labels in de frontmatter
---
<BaseLayout>

  <p><em>{frontmatter.description}</em></p>
  <p>{frontmatter.pubDate.toString().slice(0,10)}</p>

  <img src={frontmatter.image.url} width="300" alt={frontmatter.image.alt} />

  <div class="tags">
    {frontmatter.tags.map((tag) => (
      <p class="tag">{tag}</p>
    ))}
  </div>

  <slot /> <!-- Hier komen de aantekeningen van de markdown file -->

</BaseLayout>

In de blog.astro pagina worden alle posts geladen:

---
import BaseLayout from '../layouts/BaseLayout.astro';
import BlogPost from '../components/BlogPost.astro';
const allPosts = await Astro.glob('../pages/posts/*.md'); // Dit haalt alle files op die eindigen op .md
---
<BaseLayout>
  <h1>We &hearts; web blog</h1>

    <ul>
        {allPosts.map((post) => <BlogPost url={post.url} title={post.frontmatter.title} image={post.frontmatter.image} 
        description={post.frontmatter.description} tags={post.frontmatter.tags} pubDate={post.frontmatter.pubDate}/>)}
    </ul> <!-- Hier worden alle posts ge'map'ped, en weergeven op de pagina. Ook de props worden hier doorgegeven naar het blogpost component
</BaseLayout>

In het BlogPost.astro component staat al wat informatie die je terugziet op de blog overzichtpagina:

---
const { title, url, image, description, tags, pubDate } = Astro.props; // Hier worden weer label vanuit de frontmatter meegegeven als props zodat je ze kan gebruiken in je HTML
---

<li>
    <a href={url}>
        <img src={image.url} width="300" alt={image.alt} /> <!-- De foto -->
        <h2>{title}</h2> <!-- De titel -->
        <p>{description}</p> <!-- De beschrijving -->
        <div class="container">
            <p class="date">{pubDate}</p> <!-- Datum van de presentatie -->
            <div class="tag-container">
                { tags.filter((tag) => tag.trim() !== "").length > 0 &&
                    tags.slice(0, 3).map((tag) => 
                    <p class="tag">{tag}</p> <!-- Bijpassende tags -->
                )}
            </div>
        </div>
    </a>
</li>