#MD body headings

7 messages · Page 1 of 1 (latest)

shadow oxide
#

Project layout:

import Layout from '../../layouts/Layout.astro';
import { getCollection, CollectionEntry } from "astro:content";

// What this does?
export const getStaticPaths = async () => {
const projects = await getCollection("projects")
const paths = projects.map(project => {
return {
params: {
slug: project.slug
},
props: {
project
}
}
})
return paths
}

type Props = {
project: CollectionEntry<"projects">
}

const { project } = Astro.props;
const { Content } = await project.render()

<Layout title={project.data.projectName}>
<main>

    <h1 class="text-3xl text-black">{project.data.name}</h1>

    <p>{project.body}</p>




</main>

</Layout>

Project MD:

name: e c h o boomer
github: https://www.echoboomer.info/
image: ./images/echo-boomer/echo-boomer.jpg
techstack: html, css

Introduction

e c h o boomer is a seven piece Space Pop/Jazz band led by bassist Beate Wiesinger. The term „echoboomer“ refers to sociology and actually describes the generation born between 1970

Headings are not displaying within my layout, how to fix it?

Echoneu
news | Echoneu
steep karmaBOT
#

Hi @shadow oxide. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

To display the headings from your markdown content, you need to use the Content component that is returned from the render() function. This component is used to render the document’s contents in an Astro file.

In your case, you have already destructured the Content from project.render(). Now, you need to use it in your Astro component like this:

<Layout title={project.data.projectName}>
    <main>
        <h1 class="text-3xl text-black">{project.data.name}</h1>
        <Content />
    </main>
</Layout>

The Content component will render the markdown content, including the headings.

For more details, you can refer to the Astro documentation (https://docs.astro.build/en/reference/api-reference/#render).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@shadow oxide kapa.ai is still learning and improving, please let us know how it did by reacting below

shadow oxide
#

@steep karma This works, but how can I style the headings with TailwindCSS?

steep karmaBOT
#

Let me check the knowledge base for you. One moment! :books:

#

To style the headings in your markdown content with Tailwind CSS, you can create a reusable Astro component that wraps your markdown content and applies Tailwind's utility classes. Here's how you can do it:

  1. Create a <Prose /> component to provide a wrapping <div> with a <slot /> for your rendered Markdown. Add the style class prose alongside any desired Tailwind element modifiers in the parent element.
// src/components/Prose.astro
<div class="prose dark:prose-invert prose-h1:font-bold prose-h1:text-xl prose-a:text-blue-600 prose-p:text-justify prose-img:rounded-xl prose-headings:underline">
  <slot />
</div>
  1. Use the <Prose /> component in your page to wrap your Markdown content in Tailwind styles.
// src/pages/index.astro
---
import Prose from '../components/Prose.astro';
import Layout from '../layouts/Layout.astro';
import { getEntry } from 'astro:content';

const entry = await getEntry('collection', 'entry');
const { Content } = await entry.render();
---

<Layout>
  <Prose>
    <Content />
  </Prose>
</Layout>

This will apply the Tailwind styles to your markdown content. For more details, you can refer to the Astro documentation (https://docs.astro.build/en/recipes/tailwind-rendered-markdown/#recipe).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: