How do I style posts from the PostExtension?

[sylvesterroos]

I've been digging through mdex and comrak for a good hour now, but I can't figure out how I would correctly style the HTML generated by the PostExtension. I'd like to stick to my RootLayout so I have a consistent layout across the whole website, meaning I can't simply say in my CSS that i.e. all p tags should be styled a certain way, because that might not be correct on other pages.

Any and all help will be much appreciated 🙏

[mhanberg]

Typically the way you style generated markup is to surround the whole thing in a class and then use selectors to style the elements directly.

.post p {
  // stuff
}

If you are a tailwind user, I'd suggest looking at their typography plugin.

[sylvesterroos]

Maybe I'm really overcomplicating things, but how do you surround the post in a class? Something like this?

my_post.md:

---
title: Some title
date: "2023-02-11"
---

<div class="post">

# Some title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magnam aliquam quaerat voluptatem.
Ut enim aeque doleamus animo, cum corpore dolemus, fieri tamen permagna accessio.

</div>

I can't see another way, unless you use a layout specifically for generated posts, where the render(@inner_content) is surrounded by this div

Edit: hold on, I think I see how you did it with elixir-tools.dev. Gonna see if my assumption is correct 👍️

[sylvesterroos]

Ha! Got it working thanks to your repo!

So for anyone who might have the same problem, you can layer your layouts by doing something like this:

defmodule MyApp.Layouts.PostLayout do
  use MyApp.Component
  use Tableau.Layout, layout: MyApp.Layouts.RootLayout # <- placing the current layout inside RootLayout

  def template(assigns) do
    temple do
      article do
        render(@inner_content)
      end
    end
  end
end