Landmarks article!

Author: RoyalIcing

Makefile

@@ -15,7 +15,7 @@ dev:
 	iex -S mix phx.server
 
 build:
-	mix phx.digest
+	cd apps/components_guide_web/ && mix template_assets && mix phx.digest
 
 clean:
 	rm -rf ./_build

apps/components_guide_web/assets/css/app.css

@@ -76,6 +76,7 @@ h3,
 h4,
 p,
 li,
+figure,
 table,
 blockquote {
   margin-left: var(--item-spacing-left);
@@ -110,6 +111,12 @@ p:empty {
 li {
   padding: var(--listitem-spacing);
 }
+figure {
+  padding: var(--figure-spacing);
+}
+figcaption {
+  padding: var(--figcaption-spacing);
+}
 table {
   margin: var(--table-spacing);
   margin-left: var(--item-spacing-left);
@@ -163,6 +170,8 @@ pre[class*="language-"] {
   --heading-4-spacing: var(--size-base) 0;
   --paragraph-spacing: 0.5rem 0;
   --listitem-spacing: 0.5rem 0;
+  --figure-spacing: 1rem 0;
+  --figcaption-spacing: 0.5rem 0 0;
   --table-spacing: var(--size-xl) 0;
   --code-spacing: 0 0.1875em;
   --code-radius: 0.125em;

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

@@ -17,11 +17,9 @@ defmodule ComponentsGuideWeb.TemplateEngines.MarkdownEngine do
     regex = ~r{<live-([\w-]+)>([^<]+)</live-([^>]+)>}
     # regex = ~r{<live-([\w-]+)>}
 
-    # live? = Regex.match(regex, html)
-
     html =
-      Regex.replace(regex, html, fn whole, name, content ->
-        case name do
+      Regex.replace(regex, html, fn whole, tag_suffix, content ->
+        case tag_suffix do
           "render" ->
             # |> String.to_existing_atom
             module = content |> String.trim()
@@ -37,6 +35,19 @@ defmodule ComponentsGuideWeb.TemplateEngines.MarkdownEngine do
         end
       end)
 
+    regex = ~r{<collected-([\w-]+) image="([^"]+)">([^<]+)</collected-([^>]+)>}
+
+    html =
+      Regex.replace(regex, html, fn _whole, tag_suffix, image, content ->
+        case tag_suffix do
+          "figure" ->
+            "<div><%= collected_figure(@conn, #{inspect(image)}, #{inspect(content)}) %></div>"
+
+          _ ->
+            "!" <> image <> "!" <> content
+        end
+      end)
+
     # html = Regex.replace(regex, html, fn whole, name, content -> "!" <> name <> "!" <> content end)
 
     # html = Regex.replace(regex, html, fn whole, name, content -> "<div><%= live_render(@conn, ComponentsGuideWeb.FakeSearchLive, session: %{}) %></div>" end)