made markdown header ids to slugs ala github markdown

datasektionen · Jul 11, 2023 · 843b16e · 843b16e
1 parent dcfa039
commit 843b16e
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 7 deletions.
diff --git a/lib/haj/markdown.ex b/lib/haj/markdown.ex
@@ -6,7 +6,7 @@ defmodule Haj.Markdown do
 
     case with_ids do
       true ->
-        Earmark.Transform.map_ast_with(ast, 1, &transformer/2, true)
+        Earmark.Transform.map_ast_with(ast, {1, %{}}, &transformer/2, true)
 
       false ->
         ast
@@ -15,13 +15,34 @@ defmodule Haj.Markdown do
     |> Earmark.as_html!()
   end
 
-  defp transformer({tag, attrs, _, m}, count) do
+  defp transformer({tag, attrs, data, m}, {count, map} = acc) when is_binary(tag) do
     case Regex.match?(~r{h[1-6]}, tag) do
       true ->
-        {{tag, Earmark.AstTools.merge_atts(attrs, id: "heading-#{count}"), nil, m}, count + 1}
+        slug = slugify(data)
+
+        # Save a map of counts for each slug to keep track of duplicates
+        map = Map.update(map, slug, 0, &(&1 + 1))
+
+        slug = if map[slug] > 0, do: slug <> "-" <> Integer.to_string(map[slug]), else: slug
+
+        {{tag,
+          Earmark.AstTools.merge_atts(attrs, [
+            {"data-heading-index", "#{count}"},
+            id: "#{slug}"
+          ]), nil, m}, {count + 1, map}}
 
       false ->
-        {{tag, attrs, nil, m}, count}
+        {{tag, attrs, nil, m}, acc}
     end
   end
+
+  defp transformer({tag, attrs, _, m}, acc) when is_atom(tag),
+    do: {{tag, attrs, nil, m}, acc}
+
+  defp slugify(data) when is_list(data) do
+    Enum.join(data, "")
+    |> String.replace(~r/[^\p{L}\p{M}\p{Nd}\p{Nl}\p{Pc}\- ]/u, "")
+    |> String.downcase()
+    |> String.replace(~r/ /, "-")
+  end
 end
diff --git a/lib/haj_web/live/responsibility_live/show.html.heex b/lib/haj_web/live/responsibility_live/show.html.heex
@@ -46,7 +46,7 @@
 <div
   :if={@live_action == :show || @live_action == :edit}
   x-data="{atElement: '', titles: []}"
-  x-init="titles = [...document.querySelectorAll('[id^=heading]')]"
+  x-init="titles = [...document.querySelectorAll('[data-heading-index]')]"
   @scroll.window="atElement = titles.reduce((highest, elem) => {
                 elemBounds = elem.getBoundingClientRect(); highestBounds = highest.getBoundingClientRect();
                 return ((highestBounds.bottom < 0) || (elemBounds.top < highestBounds.top)) ? elem : highest}, titles[0]);
@@ -113,7 +113,7 @@
       </div>
       <article
         :if={@live_action == :show}
-        class="prose max-w-full prose-h1:text-2xl prose-h2:text-xl prose-h3:text-lg"
+        class="prose max-w-full prose-h1:text-2xl prose-h2:text-xl prose-h3:text-lg prose-ul:my-0 prose-li:my-0 prose-code:before:content-[''] prose-code:after:content-[''] prose-code:font-semibold"
         id="description_content"
       >
         <%= raw(@responsibility.description_html) %>
@@ -187,7 +187,7 @@
             </.link>
           </div>
         </div>
-        <div class="prose max-w-full prose-h1:text-2xl prose-h2:text-xl prose-h3:text-lg">
+        <div class="prose max-w-full prose-h1:text-2xl prose-h2:text-xl prose-h3:text-lg prose-ul:my-0 prose-li:my-0 prose-code:before:content-[''] prose-code:after:content-[''] prose-code:font-semibold">
           <%= raw(comment.text_html) %>
         </div>
       </div>