Add showing tunit boundaries

assets/css/article.css

@@ -6,11 +6,32 @@
   @apply hover:bg-gray-300;
 }
 
+.article a.hide-link {
+  display: none;
+}
+
+.article.show-boundary a.hide-link {
+  display: inline;
+}
+
+.article.show-boundary a.show-link {
+  display: none;
+}
+
+.article.show-boundary span + span.tunit::before {
+  content: "🭱";
+  color: brown;
+  font-weight: bold;
+  font-size: 130%;
+  vertical-align: -2px;
+}
+
+
 .article h4 {
   @apply font-semibold text-lg leading-8 text-zinc-800;
 }
 
-.article p {
+.article p, .article div {
   @apply text-justify;
 }
 

lib/outlook_web/live/article_live/show.html.heex

@@ -13,8 +13,9 @@
   </:actions>
 </.header>
 
-
 <div class="article">
+<a href="#" class="show-link" phx-click={JS.add_class("show-boundary", to: ".article")}>show boundaries</a>
+<a href="#" class="hide-link" phx-click={JS.remove_class("show-boundary", to: ".article")}>hide boundaries</a>
   <%= InternalTree.render_html(@article.content) |> raw %>
 </div>