Render image inside a figure with a caption

Most images have a caption (or at least have the option of being
captioned). Instead of displaying the raw image, it's not rendered
inside a <figure> tag with a <figcaption> (possibly blank) as a
sibling. The <figcaption> can be marked up with links.

spec/components/page_content_spec.cr

@@ -87,6 +87,26 @@ describe PageContent do
     html.should eq %(<p>This is <em>neat!</em></p>)
   end
 
+  it "renders a figure and figure caption" do
+    page = Page.new(nodes: [
+      Figure.new(children: [
+        Image.new(src: "image.png"),
+        FigureCaption.new(children: [
+          Text.new("A caption")
+        ] of Child),
+      ] of Child),
+    ] of Child)
+
+    html = PageContent.new(page: page).render_to_string
+
+    html.should eq stripped_html <<-HTML
+      <figure>
+        <img src="https://cdn-images-1.medium.com/image.png">
+        <figcaption>A caption</figcaption>
+      </figure>
+    HTML
+  end
+
   it "renders an H3" do
     page = Page.new(nodes: [
       Heading3.new(children: [
@@ -207,3 +227,7 @@ describe PageContent do
     html.should eq %(<a href="https://medium.com/u/abc123">Some User</a>)
   end
 end
+
+def stripped_html(html : String)
+  html.gsub(/\n\s*/, "").strip
+end