From e4cd5d50bf29b7688fdbd292bf965096ac8e2bcc Mon Sep 17 00:00:00 2001
From: Cassie Jones <code@witchoflight.com>
Date: Wed, 6 Nov 2019 16:32:00 -0500
Subject: [PATCH] Template improvements

---
 .eleventy.js                 | 15 ++++++++++++++-
 _includes/layouts/layout.njk | 14 ++++++++++++--
 index.njk                    |  4 +++-
 years.njk                    |  4 +++-
 4 files changed, 32 insertions(+), 5 deletions(-)

diff --git a/.eleventy.js b/.eleventy.js
index 2e50a75..db36b0f 100644
--- a/.eleventy.js
+++ b/.eleventy.js
@@ -15,6 +15,7 @@ module.exports = (eleventyConfig) => {
     eleventyConfig.addNunjucksShortcode("youtube", youtubeShortcode);
     eleventyConfig.addPairedNunjucksShortcode("tweet", tweetShortcode);
     eleventyConfig.addPairedShortcode("aside", asideShortcode);
+    eleventyConfig.addPairedShortcode("figure", figureShortcode);
 
     eleventyConfig.addFilter("markdown", value => md.renderInline(value));
     eleventyConfig.addFilter("groupby", groupbyFilter);
@@ -92,5 +93,17 @@ function tweetShortcode(content, items) {
 
 function asideShortcode(content, style='') {
     const html = md.render(content);
-    return `<div class="aside ${style}">${html}</div>`;
+    if (style) {
+        return `<aside class="${style}">${html}</aside>`;
+    } else {
+        return `<aside>${html}</aside>`;
+    }
+}
+
+function figureShortcode(content, { src, alt }) {
+    const captionHtml = md.render(content);
+    return `<figure class="col hcenter">
+  <img src="${src}" alt="${alt}">
+  <figcaption>${captionHtml}</figcaption>
+</figure>`;
 }
diff --git a/_includes/layouts/layout.njk b/_includes/layouts/layout.njk
index d83ffcd..37cb477 100644
--- a/_includes/layouts/layout.njk
+++ b/_includes/layouts/layout.njk
@@ -41,15 +41,25 @@ body header { margin-bottom: 1em; }
 body footer { margin-top: 1em; }
 h1 { margin: 0; }
 h1, h2, h3, h4, h5, h6 { margin-bottom: 0; }
+/* @TODO: Make this width managing simpler? */
+img { max-width: 800px; border-radius: 4px; }
+@media (max-width: 825px) { img { max-width: calc(100vw - 1em); } }
 blockquote { border-left: solid 10px #bbb; padding-left: 1em; margin-left: 1em; font-style: italic; }
+figure { margin: 0; }
+figcaption > :first-child, aside > :first-child { margin-top: 0; }
+figcaption > :last-child, aside > :first-child { margin-bottom: 0; }
+figcaption { font-style: italic; }
+aside { border: 1px solid black; padding: 0.75em; margin: -0.5em; border-radius: 4px; }
+aside.warning { background: #ffecbf; }
 .c-sun { color: #f78123; }
 .dec-none { text-decoration: none; }
 .dim { color: #777; }
-.flex-center { justify-content: center; }
 .row { display: flex; flex-direction: row; }
 .col { display: flex; flex-direction: column; }
 .hgroup { display: flex; flex-direction: row; }
 @media (max-width: 500px) { .hgroup { flex-direction: column; } }
+.row.hcenter { justify-content: center; }
+.col.hcenter { align-items: center; }
 .baseline { align-items: baseline; }
 .spacer { flex-grow: 1; }
 .ls-none { list-style: none; padding: 0; margin: 0; }
@@ -71,7 +81,7 @@ blockquote { border-left: solid 10px #bbb; padding-left: 1em; margin-left: 1em;
     </header>
     {{ content | safe }}
     <div class="spacer"></div>
-    <footer class="row flex-center">
+    <footer class="row hcenter">
         Copyright &copy; 2019 Cassie Jones.
         - <a href="https://twitter.com/porglezomp">@porglezomp</a>
     </footer>
diff --git a/index.njk b/index.njk
index 93dd65f..371c472 100644
--- a/index.njk
+++ b/index.njk
@@ -6,7 +6,9 @@ layout: "layouts/layout.njk"
     <li>
         <h2><a class="c-sun" href="{{ post.url }}">{{ post.data.title }}</a></h2>
         <i class="dim">{{ post.date | date("YYYY-MM-DD") }}</i>
-        <p>{{ post.data.summary | markdown | safe }}</p>
+        {% if post.data.summary %}
+            <p>{{ post.data.summary | markdown | safe }}</p>
+        {% endif %}
     </li>
 {% endfor %}
 </ul>
diff --git a/years.njk b/years.njk
index 16d4afb..daafcea 100644
--- a/years.njk
+++ b/years.njk
@@ -15,7 +15,9 @@ title: Archive
     <li>
         <h2><a class="c-sun" href="{{ post.url }}">{{ post.data.title }}</a></h2>
         <i class="dim">{{ post.date | date("YYYY-MM-DD") }}</i>
-        <p>{{ post.data.summary | markdown | safe }}</p>
+        {% if post.data.summary %}
+            <p>{{ post.data.summary | markdown | safe }}</p>
+        {% endif %}
     </li>
 {% endfor %}
 </ul>
-- 
2.43.2