From 6726dff526fad3d3182bc7173fddadf2ca20b764 Mon Sep 17 00:00:00 2001
From: Edward Loveall <edward@edwardloveall.com>
Date: Sun, 15 Aug 2021 15:08:03 -0400
Subject: [PATCH] Display figure captions as margin notes

On a thin viewport like a phone these show up as hidden at first until
the user expands them by interacting with the "writing hand" icon. Each
margin note needs a small bit of markup near it to enable the toggle.
Each also needs a unique ID to ensure it doesn't interact with
alternate content. The `hash` value of the FigureCaption's `children`
provides this unique value.
---
 spec/components/page_content_spec.cr | 11 +++++++----
 src/components/page_content.cr       | 11 ++++++++++-
 2 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/spec/components/page_content_spec.cr b/spec/components/page_content_spec.cr
index 6028dfe..2d67575 100644
--- a/spec/components/page_content_spec.cr
+++ b/spec/components/page_content_spec.cr
@@ -112,15 +112,14 @@ describe PageContent do
   end
 
   it "renders a figure and figure caption" do
+    children = [Text.new("A caption")] of Child
     page = Page.new(
       title: "Title",
       subtitle: nil,
       nodes: [
         Figure.new(children: [
           Image.new(src: "image.png", originalWidth: 100, originalHeight: 200),
-          FigureCaption.new(children: [
-            Text.new("A caption"),
-          ] of Child),
+          FigureCaption.new(children: children),
         ] of Child),
       ] of Child
     )
@@ -130,7 +129,11 @@ describe PageContent do
     html.should eq stripped_html <<-HTML
       <figure>
         <img src="https://cdn-images-1.medium.com/fit/c/100/200/image.png" width="100">
-        <figcaption>A caption</figcaption>
+        <label class="margin-toggle" for="#{children.hash}">&#9997;&#xFE0E;</label>
+        <input class="margin-toggle" type="checkbox" id="#{children.hash}">
+        <span class="marginnote">
+          A caption
+        </span>
       </figure>
     HTML
   end
diff --git a/src/components/page_content.cr b/src/components/page_content.cr
index 6884a37..0c58244 100644
--- a/src/components/page_content.cr
+++ b/src/components/page_content.cr
@@ -43,7 +43,16 @@ class PageContent < BaseComponent
   end
 
   def render_child(node : FigureCaption)
-    figcaption { render_children(node.children) }
+    writing_hand = "&#9997;"
+    text_variant = "&#xFE0E;"
+    footnote_id = node.children.hash.to_s
+    label class: "margin-toggle", for: footnote_id do
+      raw writing_hand + text_variant
+    end
+    input class: "margin-toggle", type: "checkbox", id: footnote_id
+    span class: "marginnote" do
+      render_children(node.children)
+    end
   end
 
   def render_child(node : Heading2)