assets/css/app.css

@@ -89,6 +89,26 @@
   .prose em {
     @apply text-theme-quaternary;
   }
+
+  .prose h1, h2, h3, h4 {
+    @apply before:font-light before:text-theme-base/25;
+  }
+
+  .prose h1 {
+    @apply before:content-['#'];
+  }
+
+  .prose h2 {
+    @apply before:content-['##'];
+  }
+
+  .prose h3 {
+    @apply before:content-['###'];
+  }
+
+  .prose h4 {
+    @apply before:content-['####'];
+  }
 }
 
 @layer components {

lib/chiya_web/controllers/page_html.ex

@@ -1,8 +1,23 @@
 defmodule ChiyaWeb.PageHTML do
   use ChiyaWeb, :html_public
+  import Phoenix.HTML.Tag, only: [content_tag: 3, content_tag: 2]
 
   embed_templates "page_html/*"
 
   def tag_list([]), do: "No Tags"
   def tag_list(tags), do: Enum.map_join(tags, ", ", fn t -> t.name end)
+
+  def render_outline(note) do
+    list = ChiyaWeb.Outline.get(note.content)
+    Enum.map(list, &do_render_outline/1)
+  end
+
+  def do_render_outline(%{text: text, children: children, level: _level}) do
+    content_tag(:ul, [class: "m-0"],
+      do: [
+        content_tag(:li, do: content_tag(:a, text, href: "##{Slugger.slugify(text)}")),
+        Enum.map(children, &do_render_outline/1)
+      ]
+    )
+  end
 end

lib/chiya_web/controllers/page_html/note.html.heex

@@ -3,6 +3,10 @@
     <%= @note.name %>
   </.header>
 
+  <aside class="max-w-2xl mx-auto mt-8 prose prose-gruvbox bg-theme-background1 rounded p-2">
+    <%= raw Enum.map(render_outline(@note), &safe_to_string/1) %>
+  </aside>
+
   <section class="mt-8 mx-auto prose prose-gruvbox md:prose-lg lg:prose-xl  | p-summary e-content">
     <%= Markdown.render(@note.content) |> raw %>
   </section>