Play with fun stuff in markdown engine

Could support custom elements and live view in the future

Author: RoyalIcing

apps/components_guide_web/lib/components_guide_web/live/fake_search.ex

@@ -5,30 +5,32 @@ defmodule ComponentsGuideWeb.FakeSearchLive do
 
   def render(assigns) do
     ~L"""
-    <p>UUID: <%= @uuid %></p>
-
-    <form phx-change="suggest" phx-submit="search">
-      <label>
-        Search:
-        <input name="q" value="<%= @query %>">
-      </label>
-    </form>
-
-    <p><%= Enum.count(@filtered_items) %></p>
-
-    <ul>
-    <%= for item <- @filtered_items do %>
-      <li><%= item["body"] %></li>
-    <% end %>
-    </ul>
+    <div class="bg-white text-black">
+      <p>UUID: <%= @uuid %></p>
+
+      <form phx-change="suggest" phx-submit="search">
+        <label>
+          Search:
+          <input name="q" value="<%= @query %>" class="border">
+        </label>
+      </form>
+
+      <p><%= Enum.count(@filtered_items) %></p>
+
+      <ul>
+      <%= for item <- @filtered_items do %>
+        <li><%= item["body"] %></li>
+      <% end %>
+      </ul>
+    </div>
     """
   end
 
   defp new_uuid do
     Ecto.UUID.generate()
   end
 
-  def mount(%{}, _session, socket) do
+  def mount(_, _session, socket) do
     #if connected?(socket), do: :timer.send_interval(5000, self(), :update)
 
     items = FakeSearch.list()

apps/components_guide_web/lib/components_guide_web/template_engines/markdown_engine.ex

@@ -7,9 +7,18 @@ defmodule ComponentsGuideWeb.TemplateEngines.MarkdownEngine do
 
   def compile(path, _name) do
     IO.puts("compile #{path}")
-    path
+    html = path
     |> File.read!()
     |> Earmark.as_html!(%Earmark.Options{code_class_prefix: "language-", smartypants: false})
-    |> EEx.compile_string(engine: Phoenix.HTML.Engine, file: path, line: 1)
+
+    # regex = ~r{<live-([\w-]+)>(.+)</live-([\w-]+)>}
+    regex = ~r{<live-([\w-]+)>([^<]+)</live-([^>]+)>}
+    # regex = ~r{<live-([\w-]+)>}
+
+    html = Regex.replace(regex, html, fn whole, name, content -> name end)
+    # html = Regex.replace(regex, html, fn whole, name, content -> "<div><%= live_render(@conn, ComponentsGuideWeb.FakeSearchLive, session: %{}) %></div>" end)
+
+    html |> EEx.compile_string(engine: Phoenix.HTML.Engine, file: path, line: 1)
+    # html |> EEx.compile_string(engine: Phoenix.LiveView.Engine, file: path, line: 1)
   end
 end