How to Convert Phoenix component from MD file before saving in a module (NimblePublisher)

Phoenix Forum Questions / Help
1

Hello friends, I have a blog section in my website that use NimblePublisher and get data from .md file.
Also, I have a series of components that are stateless Phoenix components.
For example, a series of components related to typography

What I need to implement?

If you use <.link navigate="/">Home</.link> in your heex , it converted to something like this

<a href="/" data-phx-link="redirect" data-phx-link-state="push">
  Home
</a>

No I need to convert my phoenix component to html in NimblePublisher parser

For example I get this code from kobrakai_elixir project

  # I got this code from: https://github.com/LostKobrakai/kobrakai_elixir
  def parse(_path, contents) do
    ["---\n" <> yaml, body] =
      contents
      |> String.replace("\r\n", "\n")
      |> :binary.split(["\n---\n"])

    {:ok, attrs} = YamlElixir.read_from_string(yaml)
    attrs = Map.new(attrs, fn {k, v} -> {String.to_atom(k), v} end)

    attrs =
      case :binary.split(body, ["\n<!-- excerpt -->\n"]) do
        [excerpt | [_ | _]] -> Map.put(attrs, :excerpt, String.trim(excerpt))
        _ -> attrs
      end

    # `body` should be changed before save in a module
    {attrs, body}
  end

I think this is the place I need to convert body to compiled html version (for onetime).

I got help from Slack, but I was not successful to implement this :slight_smile:

The suggestions from the friends, which some has error from me that I could not fix

This is the code from here (elixir forum) but how can converted to html not using inside heex

source = "<.link navigate=\"/\">Hi</.link navigate=\"/\">\n"
{result, _result_binding} =
  EEx.compile_string(source, engine: Phoenix.LiveView.Engine, caller: __ENV__, source: source)
  |> Code.eval_quoted(assigns: %{})

Or this code which I think need to have __CALER__, ( I have error from this code)

EEx.compile_string(
  "<CustomTypography.heading1>Hi</CustomTypography.heading1>",
  engine: Phoenix.LiveView.TagEngine,
  tag_handler: Phoenix.LiveView.HTMLEngine,
  caller: MishkaWeb.Components.CustomContent,
  source:
    "<Components.CustomTypography.heading1>Hi</CustomTypography.heading1>"
)

Or Other code

options = [
      engine: Phoenix.LiveView.TagEngine,
      file: __CALLER__.file,
      line: __CALLER__.line + 1,
      caller: __CALLER__,
      indentation: meta[:indentation] || 0,
      source: expr,
      tag_handler: Phoenix.LiveView.HTMLEngine
    ]

    EEx.compile_string(expr, options)

OR this code i am forced to put . before the component name

EEx.compile_string(
        "<.CustomTypography.heading1>Hi</.CustomTypography.heading1>",
        engine: Phoenix.LiveView.Engine,
        caller: __ENV__,
        source:
          "<.CustomTypography.heading1>Hi</..CustomTypography.heading1>"
      )
      |> Code.eval_quoted(assigns: %{})

So if these work, but these are no compiled html, and returns structs, so how can have compiled html before saving in module

Thank you in advance

1 Like
2

Hello friends, the mdex lib creates this

tweet link:
https://x.com/leandrocesquini/status/1844388784743514129