Improve React articles with side navs!

Author: RoyalIcing

assets/css/app.css

@@ -20,6 +20,7 @@ a:not([class]):not(.prose *) {
   padding-top: var(--link--padding-y);
   padding-bottom: var(--link--padding-y);
   color: var(--link--color);
+  font-weight: var(--link--font-weight);
   text-decoration: var(--link--decoration);
 }
 a:hover:not([class]):not(.prose *) {
@@ -35,6 +36,9 @@ a:hover:not([class]):not(.prose *) {
 [data-links~='current-color'] {
   --link--color: currentColor;
 }
+[data-links~='current-page-bold'] a[aria-current="page"] {
+  --link--font-weight: bold;
+}
 [data-links~='block'] {
   --link--display: block;
 }
@@ -45,6 +49,14 @@ a:hover:not([class]):not(.prose *) {
   --link--decoration: none;
   --link--decoration--hover: underline;
 }
+[data-links~='p-1'] {
+  --link--padding-x: 0.25rem;
+  --link--padding-y: 0.25rem;
+}
+[data-links~='p-2'] {
+  --link--padding-x: 0.5rem;
+  --link--padding-y: 0.5rem;
+}
 [data-links~='p-3'] {
   --link--padding-x: 0.75rem;
   --link--padding-y: 0.75rem;

lib/components_guide_web/controllers/react_typescript_controller.ex

@@ -26,3 +26,25 @@ defmodule ComponentsGuideWeb.ReactTypescriptController do
     |> render("index.html", article: article)
   end
 end
+
+defmodule ComponentsGuideWeb.ReactTypescriptView do
+  use ComponentsGuideWeb, :view
+
+  @prose_class "prose md:prose-xl prose-invert max-w-4xl mx-auto py-16"
+
+  def article_content_class("editor"), do: "content text-xl"
+  def article_content_class("editor-prolog"), do: "content text-xl"
+  def article_content_class(_article), do: @prose_class
+
+  def table_rows(rows_content) do
+    Enum.map(rows_content, &table_row/1)
+  end
+
+  def table_row(items) do
+    content_tag(:tr, Enum.map(items, &table_cell/1))
+  end
+
+  def table_cell(content) do
+    content_tag(:td, content |> line(), class: "px-3 py-1")
+  end
+end

lib/components_guide_web/template_engines/markdown_engine.ex

@@ -5,21 +5,56 @@ defmodule ComponentsGuideWeb.TemplateEngines.MarkdownEngine do
 
   require Earmark
 
+  def slug(text) do
+    slug =
+      text
+      |> String.downcase()
+      |> String.replace(~w{ , ` - – — / { \} [ ] ; : ? !}, "")
+      |> String.replace(" ", "-")
+
+    slug
+    # "-md-" <> slug
+  end
+
   def compile(path, name) do
     IO.puts("compile #{path} #{name}")
 
+    registered_processors = [
+      {"h2",
+       fn node ->
+         html_fragment = Earmark.Transform.transform([node])
+
+         inner_text = Floki.parse_fragment!(html_fragment) |> Floki.text() |> String.trim()
+
+         id = slug(inner_text)
+
+         node
+         |> Earmark.AstTools.merge_atts_in_node(id: slug(inner_text))
+       end}
+    ]
+
+    # |> Earmark.TagSpecificProcessors.new()
+
+    options =
+      Earmark.Options.make_options!(
+        code_class_prefix: "language-",
+        smartypants: false,
+        registered_processors: registered_processors
+      )
+
     html =
       path
       |> File.read!()
-      |> Earmark.as_html!(%Earmark.Options{code_class_prefix: "language-", smartypants: false})
-      # |> Earmark.as_html!(%Earmark.Options{code_class_prefix: "language-", smartypants: false, postprocessor: &map_ast/1})
+      |> Earmark.as_html!(options)
+
+    # |> Earmark.as_html!(%Earmark.Options{code_class_prefix: "language-", smartypants: false, postprocessor: &map_ast/1})
 
     # regex = ~r{<live-([\w-]+)>(.+)</live-([\w-]+)>}
     regex = ~r{<live-([\w-]+)>([^<]+)</live-([^>]+)>}
     # regex = ~r{<live-([\w-]+)>}
 
     html =
-      Regex.replace(regex, html, fn whole, tag_suffix, content ->
+      Regex.replace(regex, html, fn _whole, tag_suffix, content ->
         case tag_suffix do
           "render" ->
             # |> String.to_existing_atom

lib/components_guide_web/templates/react_typescript/_headline.html.heex

@@ -0,0 +1,8 @@
+<h2 y-y x-x="md" class="pt-8 pb-8 row space-x-4 text-4xl text-center font-bold leading-tight">
+  <div class="row">
+    <img class="inline-block mr-2" src="https://cdn.jsdelivr.net/gh/gilbarbara/logos@618de63f309bbf56b67364fd6a441cbbf79403cc/logos/react.svg" alt="React logo" width="48" height="48">
+    <span class="mr-2 text-3xl">❤️</span>
+    <img class="inline-block mr-2" src="https://cdn.jsdelivr.net/gh/gilbarbara/logos@02e637e09b55966e802dfe0bc93595594e0214bb/logos/typescript-icon.svg" alt="TypeScript logo" width="48" height="48">
+  </div>
+  <span><%= "React & TypeScript Guide" %></span>
+</h2>

lib/components_guide_web/templates/react_typescript/_nav.html.heex

@@ -0,0 +1,13 @@
+<nav class="">
+  <ul class="text-xl" data-links="block p-2 current-page-bold">
+    <li><%= link(@conn, "Fundamentals", to: "/react+typescript") %></li>
+    <li><%= link(@conn, "Testing", to: "/react+typescript/testing") %></li>
+    <li><%= link(@conn, "Reducer Patterns", to: "/react+typescript/reducer-patterns") %></li>
+    <li><%= link(@conn, "Zero Hook Dependencies", to: "/react+typescript/zero-hook-dependencies") %></li>
+    <li><%= link(@conn, "Hooks in a Concurrent World", to: "/react+typescript/hooks-concurrent-world") %></li>
+    <li hidden><%= link(@conn, "Event Handlers", to: "/react+typescript/event-handlers") %></li>
+    <li><%= link(@conn, "Logical Clocks", to: "/react+typescript/logical-clocks") %></li>
+    <li><%= link(@conn, "Forms", to: "/react+typescript/forms") %></li>
+    <li><%= link(@conn, "Playground", to: "/react-playground") %></li>
+  </ul>
+</nav>

lib/components_guide_web/templates/react_typescript/form-reducers.html.md

@@ -1,3 +1,5 @@
+# Form Validation with React Reducers
+
 ## Thinking of validation as a linear process
 
 We can think of validation as mapping from events to errors.

lib/components_guide_web/templates/react_typescript/index.html.eex

@@ -1,14 +1,69 @@
 <header class="<%= ComponentsGuideWeb.TopicsView.class_for_topic(:react_typescript) %>">
-  <%= render view_module(@conn), "_top.html" %>
+  <%= render view_module(@conn), "_headline.html" %>
 </header>
 
-<article>
-  <div class="text-white bg-gray-900">
-    <div class="<%= view_module(@conn).article_content_class(@article) %>">
-      <%= render(view_module(@conn), @article <> ".html", conn: @conn) %>
+<navigable-article class="flex flex-col">
+  <div class="mx-auto grid-flow-col grid grid-cols-[20rem_minmax(0,var(--max-width))_18rem] gap-8" style="--max-width: 46em">
+    <div class="sticky top-0 h-screen pt-16 text-white">
+      <%= render view_module(@conn), "_nav.html", conn: @conn %>
     </div>
+    <article class="text-white bg-gray-900">
+      <div class="<%= view_module(@conn).article_content_class(@article) %>">
+        <%= render(view_module(@conn), @article <> ".html", conn: @conn) %>
+      </div>
+    </article>
+    <aside class="sticky top-0 h-screen" hidden>
+      <nav class="pt-16 text-gray-200">
+        <div class="pl-5 pb-2 font-bold uppercase text-white">On this page</div>
+        <slot name="nav-items">
+          <template>
+            <ul class="list-none">
+              <li class="border-l-4 border-gray-800 hover:border-blue-400"></li>
+            </ul>
+            <a href="#" class="inline-flex py-1 pl-4 hover:text-blue-400"></a>
+          </template>
+        </slot>
+      </nav>
+    </aside>
   </div>
-</article>
+</navigable-article>
+
+<script type="module">
+customElements.get('navigable-article') || customElements.define('navigable-article',
+  class extends HTMLElement {
+    constructor() {
+      super();
+
+      const document = this.ownerDocument;
+
+      function El(base, props, ...children) {
+        const el = typeof base === 'string' ? document.createElement(base) : base.cloneNode(false);
+        Object.assign(el, props);
+        el.append(...children);
+        return el;
+      }
+
+      const article = this.querySelector('article');
+      const aside = this.querySelector('aside');
+
+      aside.hidden = false;
+
+      const navItemsSlot = this.querySelector('slot[name=nav-items]');
+      const navItemsTemplates = navItemsSlot.querySelector('template').content;
+      const linkTemplate = navItemsTemplates.querySelector('a');
+      const ulTemplate = navItemsTemplates.querySelector('ul');
+      const liTemplate = navItemsTemplates.querySelector('li');
+
+      const headings = article.querySelectorAll('h2');
+      const items = Array.from(headings, (headingEl) => {
+        return El(liTemplate, {}, El(linkTemplate, { href: '#' + headingEl.id }, headingEl.innerText));
+      });
+
+      navItemsSlot.append(El(ulTemplate, {}, ...items));
+    }
+  }
+);
+</script>
 
 <div class="bg-white" hidden>
   <section class="container pt-8 pb-16 text-2xl">

lib/components_guide_web/templates/react_typescript/testing.html.md

@@ -1,3 +1,5 @@
+# React Testing Guide
+
 ## Use Roles First
 
 Most semantic HTML elements have an implicit role. This role is used by accessibility tools such as screen readers. But as we’ll explain, you can also use it to write easy-to-understand tests.

lib/components_guide_web/templates/react_typescript/tips.html.md

@@ -1,3 +1,5 @@
+# TypeScript & React Fundamentals
+
 ## Structural vs nominal types
 
 Most statically typed languages use the concept of nominal types.

lib/components_guide_web/views/link_helpers.ex

@@ -0,0 +1,23 @@
+defmodule ComponentsGuideWeb.LinkHelpers do
+  use Phoenix.HTML
+
+  def link(conn, text, opts) do
+    to = Keyword.get(opts, :to)
+
+    current =
+      case conn.request_path do
+        ^to -> "page"
+        _ -> "false"
+      end
+
+    IO.inspect(%{
+      current: current,
+      request_path: conn.request_path,
+      to: to
+    })
+
+    opts = Keyword.put(opts, :aria_current, current)
+
+    Phoenix.HTML.Link.link(text, opts)
+  end
+end