Nimble Publisher: how to hand image refs in markdown and how to control how HTML is emitted?

Ok, so for what it’s worth, I changed the standard NimblePublisher Post module to look like this:

defmodule Msdc.Blog.Post do
  @enforce_keys [:blog, :id, :author, :title, :body, :description, :tags, :date, :long_date]
  defstruct [:blog, :id, :author, :title, :body, :description, :tags, :date, :long_date]

  @style_map %{
    "h1" => "text-4xl font-bold tracking-tight text-zinc-800 sm:text-5xl dark:text-zinc-100",
    "h2" => "text-m font-bold text-zinc-800 dark:text-zinc-100",
    "h3" => "text-base font-semibold tracking-tight text-zinc-800 dark:text-zinc-100",
    "h4" => "text-3xl tracking-tight text-zinc-800 sm:text-3xl dark:text-zinc-100",
    "p" => "mt-6 text-base text-zinc-600 dark:text-zinc-400",
    "a" => "text-m font-medium text-teal-500",
    "img" => ""
  }

  def build(filename, attrs, body) do
    [blog, year, _month_day_id_dir, month_day_id] = filename |> Path.rootname() |> Path.split() |> Enum.take(-4)
    [month, day, id] = String.split(month_day_id, "-", parts: 3)
    date = Date.from_iso8601!("#{year}-#{month}-#{day}")
    long_date = Calendar.strftime(date, "%B, %d")
    struct!(__MODULE__, [blog: blog, id: id, date: date, long_date: long_date, body: inject_style(@style_map, body)] ++ Map.to_list(attrs))
  end

  def inject_style(style_map, html_content) do
    Enum.reduce(style_map, html_content, fn {tag, class_str}, acc ->
      regex = ~r/(<#{tag}[^>]*)(>)/
      replacement = "\\1 class=\"#{class_str}\"\\2"
      String.replace(acc, regex, replacement)
    end)
  end

end

The inject_style/2 function is a bit of a mess, but what it does is add a class="…" attribute for each HTML tag it finds in the raw blog post content where the value of the class is taken from the map of HTML elements onto class strings kept in @style_map.

I know that it is far from robust, but as a PoC, it serves my purpose for now.

Here’s my approach for 2 (but with your styles substituted).

I’ve added the following to my post.ex:

  def earmark_options do
    Earmark.Options.make_options!(postprocessor: Earmark.AstTools.node_only_fn(&add_tag_class/1))
  end

  @tag_to_class %{
    "h1" => "text-4xl font-bold tracking-tight text-zinc-800 sm:text-5xl dark:text-zinc-100",
    "h2" => "text-m font-bold text-zinc-800 dark:text-zinc-100",
    "h3" => "text-base font-semibold tracking-tight text-zinc-800 dark:text-zinc-100",
    "h4" => "text-3xl tracking-tight text-zinc-800 sm:text-3xl dark:text-zinc-100",
    "p" => "mt-6 text-base text-zinc-600 dark:text-zinc-400",
    "a" => "text-m font-medium text-teal-500"
  }
  defp add_tag_class({tag, attrs, ignored, meta}) do
    new_attrs = if class = @tag_to_class[tag], do: [{"class", class}], else: []
    {tag, attrs ++ new_attrs, ignored, meta}
  end

Then the following to my use NimblePublisher invocation:

  use NimblePublisher,
    # ...
    earmark_options: Post.earmark_options(),
    # ...

The postprocessor option gives you a hook which lets you work with the AST.

I also had to add this to my tailwind.config.js:

module.exports = {
  content: [
    // ...
    "../lib/path/to/post.ex",
    // ...
  ],

So it would pickup the new classes.

That’s a neat way to solve this (and more robust than my ropey attempt). Thanks!

I don’t know if it’s the best way, but I store the images one directory below the markdown and serve them with Plug.Static.

My markdown is saved in priv/posts and rendered on the /blog/:title route.
I made priv/posts/images to store the images, and then set up a new Plug.Static in the endpoint to serve them on the same /blog scope:

  plug Plug.Static,
    at: "/blog/",
    from: {:my_app, "priv/posts"},
    gzip: false,
    only: ["images"]

Then in your markdown:

![](images/lovely.jpg)

If we place the image in priv/posts/images/lovely.jpg, it should load.

You can also use an <img> tag directly in the markdown if you need to control the width/height:

<img src="images/lovely.jpg" width="100px" height="50px" />

It’s worth mentioning that unfortunately we can’t get the benefits of Phoenix verified routes or mix.digest for the images, because the markdown is injected as raw HTML and not rendered by Phoenix, so unable to get the route information (theoretically it might be possible to do it, because both the markdown and HEEX templates are parsed at compile-time, but I didn’t try it…). This means that we have to directly link to the image and won’t get warnings for invalid image paths and may end up with broken images (like this dashbit post at the time of writing).