Merge pull request #54 from GemCopeland/dev

v0.2

.eleventy.js

@@ -17,6 +17,12 @@ module.exports = eleventyConfig => {
     });
   });
 
+  // Add excerpts
+  eleventyConfig.setFrontMatterParsingOptions({
+    excerpt: true,
+    excerpt_separator: "<!-- more -->"
+  });
+
   // Minify CSS
   eleventyConfig.addFilter("cssmin", code => {
     return new CleanCSS({}).minify(code).styles;

README.md

@@ -39,26 +39,24 @@ This tells Netlify that when some change happens on the `master` branch<sup id="
 
 ### Editing content
 
-All of the content files can be found in `/src`. As a general rule, you should feel confident editing Markdown files (files ending in `.md`). You can also edit template files (`.njk`), styles (`.css`), JavaScript (`.js`), or data (`.json`), but changes to these files may require more delicate consideration.
+To edit content locally, open up your local site files in your preferred text editor<sup id="ref-13"><a href="#footnote-13">13</a></sup> and then fire up your local server by running `npx @11ty/eleventy --serve`. Watch out for compilaton errors in your Terminal window while you are editing content.
+
+Before you edit your content, it is good practice to run `git fetch` to get remote updates and `git pull` if there are any updates. And of course, be sure to push your edits with `git push` when you are done and ready to publish them.
 
-Within the Markdown files, you will find frontmatter at the top of the file delimited by `---`. This defines important structured data that is separate from the main page content found beneath the frontmatter.
+The content is primarily written in Markdown, so please refer to their documentation for syntax tips. Keep an eye on your curly quotes and apostrophes. Within the Markdown files, you will find frontmatter at the top of the file delimited by `---`. This defines important structured data written in Yaml that is separate from the main page content found beneath the frontmatter. If you need to put `:` or `-` characters in any of your Yaml content, you should wrap it in quotations.
+
+All of the content files can be found in `/src`. As a general rule, you should feel confident editing Markdown files (files ending in `.md`). You can also edit template files (`.njk`), styles (`.css`), JavaScript (`.js`), or data (`.json`), but changes to these files may require more delicate consideration.
 
 The content that you will edit most frequently is:
 
 - `/src/activity` – Used to populate the activity list on the homepage
 - `/src/pages` – Includes your main pages (Home, Thinking, etc.) as well as default pages such as Privacy
 - `/src/posts` - Used to populate the Writing feed
 
-Within these directories, you may find a `/_drafts` folder. Files within this folder will not be published, so you can safely keep WIP files within these folders. See the demo markdown files within these folders for examples of how to format content
+Within each of these directories, you may find a `/_drafts` folder. Files within this folder will not be published, so you can safely keep WIP files within these folders. See the demo markdown files within these folders for examples of how to format content.
 
 You may also find a `.json` file within these folders. These data files set default values for their sibling `.md` files so that these values do not need to be rewritten again and again.
 
-To edit content locally, open up your local site files in your preferred text editor<sup id="ref-13"><a href="#footnote-13">13</a></sup> and then fire up your local server by running `npx @11ty/eleventy --serve`.
-
-The content is primarily written in Markdown, so please refer to their documentation for syntax tips. Keep an eye on your curly quotes and apostrophes.
-
-Be sure to push your edits when you’re done!
-
 ### Editing styles
 
 TODO Obvi it’s mostly CSS, but will include guidance about how to tweak colours easily, in particular.

src/_data/arena.js

@@ -63,19 +63,6 @@ const getArenaChannels = async channelId => {
                   .reverse()
                   .slice(0, 10);
 
-                // Get a description from the text blocks if necessary
-                if (newChannel.description == null) {
-                  let text = contents
-                    .filter(b => {
-                      return b.class == "Text";
-                    })
-                    .map(b => {
-                      return b.content;
-                    })
-                    .join(" ")
-                    .slice(0, 140);
-                  newChannel.description = text ? text + "…" : null;
-                }
                 // Return the channel with the additional image and description content
                 return newChannel;
               });

src/_data/global.json

@@ -1,4 +1,7 @@
 {
+  "arrowsNext": "→, ↳, ↬, ➝, ➨, ⇢, ➺, ➽, ➯, ➔, ⤷, ⫸",
+  "arrowsPrevious": "←, ↵, ↫, ⬱, ⬸, ⬳, ⬿, ⤶, ⫷",
+  "arrowsTop": "↟, ⇑, ⬏, ↑, ⇡, ⟰, ⤴",
   "lang": "en",
   "schemaType": "Person",
   "siteTitle": "Gemma Copeland"

src/_includes/assets/css/components.blocks.css

@@ -42,6 +42,10 @@
   line-height: var(--line-height-small);
 }
 
+.block__desc a {
+  border-bottom: none;
+}
+
 .block__media {
   overflow: hidden;
   margin-bottom: 0.5rem;

src/_includes/assets/css/components.css

@@ -25,6 +25,10 @@
   margin-right: 0.2rem;
 }
 
+.tag:hover {
+  text-decoration: none;
+}
+
 .tag:last-child:after {
   content: none;
 }
@@ -39,5 +43,8 @@
 
 .article__time {
   display: inline-block;
+}
+
+.header--article {
   margin-bottom: 0.875rem;
 }

src/_includes/assets/css/components.footer.css

@@ -16,3 +16,7 @@
   font-size: var(--font-small);
   line-height: var(--line-height-small);
 }
+
+.section--footer > * {
+  max-width: 25rem;
+}

src/_includes/assets/css/components.pagination.css

@@ -0,0 +1,49 @@
+.pagination {
+  margin-bottom: 1rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-top: 1rem;
+  position: relative;
+}
+
+.pagination__simple {
+  display: flex;
+  font-size: 1.5rem;
+  justify-content: space-between;
+  max-width: 34rem;
+}
+
+.pagination__list {
+  color: var(--color-1);
+  display: flex;
+  flex-wrap: wrap;
+  list-style: none;
+  max-width: 34rem;
+}
+
+.pagination a {
+  border: none;
+  color: var(--color-1);
+}
+
+.pagination a:hover,
+.pagination a:focus {
+  color: var(--color-black);
+}
+
+.pagination__list a {
+  color: var(--color-grey-dark);
+}
+
+.pagination__list li:not(:last-child) .pagination__page:after {
+  content: ",";
+  margin-right: 0.3rem;
+}
+
+.pagination__top {
+  bottom: 0;
+  font-size: 1.5rem;
+  padding: 0 1em;
+  position: absolute;
+  right: 0;
+}

src/_includes/assets/css/layout.css

@@ -7,3 +7,14 @@
 .article .prose > * {
   max-width: 34rem;
 }
+
+.writing .main,
+.post .main {
+  display: flex;
+  flex-direction: column;
+}
+
+.writing .main section,
+.post .main section {
+  flex-grow: 1;
+}

src/_includes/assets/css/media.screen-large.css

@@ -55,6 +55,10 @@
     display: block;
   }
 
+  .panel--profile .section--footer {
+    width: 100%;
+  }
+
   .home main,
   .thinking main {
     display: flex;
@@ -72,18 +76,26 @@
   }
 
   .activity {
+    align-items: baseline;
     display: flex;
   }
 
   .activity__time {
-    width: 5.125rem;
+    min-width: 5.125rem;
   }
 
   body > footer {
     display: flex;
   }
 
-  body > footer section {
+  body footer section {
     width: 50%;
   }
 }
+
+@media screen and (min-width: 55em) {
+  .home .panel--profile footer,
+  .thinking .panel--profile footer {
+    display: flex;
+  }
+}

src/_includes/assets/css/typography.css

@@ -11,14 +11,17 @@
   margin-bottom: 0.625rem;
 }
 
-.prose p ~ p img {
-  margin-top: 1rem;
+.prose h1,
+.prose h2,
+.prose h3,
+.prose h4,
+.prose h5,
+.prose h6 {
+  margin-top: 2rem;
 }
 
-.prose p:last-child,
-.prose ul:last-child,
-.prose ol:last-child {
-  margin-bottom: 0;
+.prose p ~ p img {
+  margin-top: 1rem;
 }
 
 .prose blockquote {
@@ -37,6 +40,30 @@
   margin-top: 1.25rem;
 }
 
+.article .prose ul {
+  list-style: disc;
+  padding-left: 1rem;
+}
+
+.article .prose ol {
+  padding-left: 1.5rem;
+}
+
+.prose code,
+.prose pre {
+  font-size: 16px;
+}
+
+.prose p > code {
+  background: var(--color-2);
+  padding: 0.125rem;
+}
+
+.prose pre {
+  background: var(--color-2);
+  padding: 0.5rem;
+}
+
 .section--contact p {
   margin-bottom: 0;
 }

src/_includes/components/activity-item.njk

@@ -38,5 +38,8 @@
     {%- if a.data.location -%}
       <br>{{ a.data.location }}
     {%- endif -%}
+    {% if a.data.subtext %}
+      <br><span class="color-grey">{{ a.data.subtext | safe }}</span>
+    {% endif %}
   </p>
 </li>

src/_includes/components/blocks.njk

@@ -10,9 +10,9 @@
             {{ channel.title }}
           </p>
           {% if channel.description %}
-            <p class="block__desc">
-              {{ channel.description | safe  }}
-            </p>
+            <div class="block__desc">
+              {{  channel.description | markdownify | safe }}
+            </div>
           {% endif %}
           {% if channel.images %}
             <div class="block__media">

src/_includes/components/head.njk

@@ -13,6 +13,7 @@
     {% include "assets/css/components.header.css" %}
     {% include "assets/css/components.footer.css" %}
     {% include "assets/css/components.blocks.css" %}
+    {% include "assets/css/components.pagination.css" %}
     {% include "assets/css/components.panel.css" %}
     {% include "assets/css/typography.css" %}
     {% include "assets/css/helpers.css" %}

src/_includes/components/header-writing.njk

@@ -1,6 +1,6 @@
 {% include "components/header.njk" %}
 
-<div class="header header--desktop" aria-hidden="true">
+<div class="header header--desktop" id="top" aria-hidden="true">
   <div class="panel">
     {% set linkUrl = '/writing/' %}
     {% set linkText = 'Writing' %}

src/_includes/components/header.njk

@@ -1,4 +1,4 @@
-<header class="header header--site">
+<header class="header header--site" id="top">
 
   {% set linkUrl = '/' %}
   {% set linkText = global.siteTitle %}

src/_includes/components/profile.njk

@@ -40,7 +40,7 @@
     <h2>Current and upcoming</h2>
 
     <ul class="activities">
-      {% for a in collections.activityCurrent %}
+      {% for a in collections.activityCurrent | reverse %}
         {% include "components/activity-item.njk" %}
       {% endfor %}
     </ul>

src/_includes/components/single-post.njk

@@ -9,12 +9,11 @@
 {%- endset -%}
 {%- set singleTags = post.data.tags -%}
 {%- set singleContent -%}
-  {% if post.data.excerpt %}
-    {{ post.data.excerpt | markdownify | safe }}
+  {% if post.data.page.excerpt %}
+    {{ post.data.page.excerpt | markdownify | safe }}
     <a class="button button--more" href="{{ post.url | url }}">Read more</a>
   {% else %}
-    {# TODO For some reason this isn’t working when filtered by tag #}
-    {{ post.data.content | safe }}
+    {{ post.templateContent | safe }}
   {% endif %}
 {%- endset -%}
 {% include "components/single.njk" %}

src/_includes/components/single.njk

@@ -17,7 +17,7 @@
       <ul class="tags subtle-links">
         {% for tag in singleTags %}
           {%- if tag != "post" -%}
-            {% set tagUrl %}/tags/{{ tag }}/{% endset %}
+            {% set tagUrl %}/writing/tag/{{ tag | slug }}/{% endset %}
             <li class="tag"><a href="{{ tagUrl | url }}" rel="tag">{{ tag }}</a></li>
           {%- endif -%}
         {% endfor %}