.eleventy.js

@@ -36,15 +36,6 @@ module.exports = config => {
     return [...collection.getFilteredByGlob('./src/posts/*.md')].reverse();
   });
 
-  // Return all the tags used in a collection
-	config.addFilter("getAllTags", collection => {
-		let tagSet = new Set();
-		for(let item of collection) {
-			(item.data.tags || []).forEach(tag => tagSet.add(tag));
-		}
-		return Array.from(tagSet);
-	});
-
   return {
     markdownTemplateEngine: 'njk',
     dataTemplateEngine: 'njk',

src/_data/Term.json

@@ -3,15 +3,6 @@
     "SkipLink": "Skip to content",
     "ToggleTheme": "Toggle theme",
     "TopLink": "Back to top",
-    "Listing": {
-      "Tags": {
-        "Title": "Tagged",
-        "More": {
-          "See": "See",
-          "All": "all tags"
-        }
-      }
-    },
     "Footer": {
       "lastDeployment": "Dernier déploiement le",
       "createdWith": "Built with"

src/_data/navigation.json

@@ -7,14 +7,6 @@
     {
       "text": "About",
       "url": "/about/"
-    },
-    {
-      "text": "Blog",
-      "url": "/blog/"
-    },
-    {
-      "text": "Demo",
-      "url": "/tags/demo/"
     }
   ]
 }

src/_includes/partials/article-head.html

@@ -12,7 +12,7 @@
         {% if tags %}
           {% for tag in tags %}
             <li>
-              <a href="/tags/{{ tag | slug }}/">{{ tag | title }}</a>
+              <a href="/tag/{{ tag | slug }}/">{{ tag | title }}</a>
             </li>
           {% endfor %}
         {% endif %}

src/_includes/partials/post-list.html

@@ -1,6 +1,6 @@
 <section class="projects">
   <ol reversed class="postlist">
-    {%- asyncEach blog in postslist -%}
+    {%- asyncEach blog in collections.blog -%}
       <li>
         <h2><a href="{{ blog.url }}">{{ blog.data.title }}</a></h2>
         <ul class="list-inline">
@@ -8,7 +8,7 @@
           {%- if blog.data.tags -%}
             {%- for tag in blog.data.tags -%}
               <li>
-                <a href="/tags/{{ tag | slug }}/">{{ tag | title }}</a>
+                <a href="/tag/{{ tag | slug }}/">{{ tag | title }}</a>
               </li>
             {%- endfor -%}
           {%- endif -%}

src/blog.md

@@ -2,10 +2,9 @@
 title: 'Blog'
 layout: 'list'
 ---
-# {{ title }}
+# Blog
 
 The latest articles from around the studio, demonstrating our design
 thinking, strategy and expertise.
 
-{% set postslist = collections.blog %}
 {% include "partials/post-list.html" %}

src/index.md

@@ -7,5 +7,4 @@ metaDesc: 'A made up agency site that you build if you take Learn Eleventy From
 layout: 'home'
 ---
 
-{% set postslist = collections.blog %}
 {% include "partials/post-list.html" %}

src/posts/article2.md

@@ -7,71 +7,6 @@ tags: ['Tips And Tricks', 'Demo']
 
 For decades, South Florida schoolchildren and adults fascinated by far-off galaxies, earthly ecosystems, the properties of light and sound and other wonders of science had only a quaint, antiquated museum here in which to explore their interests. "Now, with the long-delayed opening of a vast new science museum downtown set for Monday, visitors will be able to stand underneath a suspended, 500,000-gallon aquarium tank and gaze at hammerhead and tiger sharks, mahi mahi, devil rays and other creatures through a 60,000-pound oculus, a lens that will give the impression of seeing the fish from the bottom of a huge cocktail glass."
 
-```javascript
-const storageKey = 'theme-preference'
-
-const onClick = () => {
-  // flip current value
-  theme.value = theme.value === 'light'
-    ? 'dark'
-    : 'light';
-
-  document
-    .querySelector('.theme-toggle')
-    .classList.toggle('theme-toggle--toggled');
-
-  setPreference()
-}
-
-const getColorPreference = () => {
-  if (localStorage.getItem(storageKey))
-    return localStorage.getItem(storageKey)
-  else
-    return window.matchMedia('(prefers-color-scheme: dark)').matches
-      ? 'dark'
-      : 'light'
-}
-
-const setPreference = () => {
-  localStorage.setItem(storageKey, theme.value)
-  reflectPreference()
-}
-
-const reflectPreference = () => {
-  document.firstElementChild
-    .setAttribute('data-theme', theme.value)
-
-  document
-    .querySelector('#theme-toggle')
-    ?.setAttribute('aria-label', theme.value)
-}
-
-const theme = {
-  value: getColorPreference(),
-}
-
-// set early so no page flashes / CSS is made aware
-reflectPreference()
-
-window.onload = () => {
-  // set on load so screen readers can see latest value on the button
-  reflectPreference()
-
-  // now this script can find and listen for clicks on the control
-  document
-    .querySelector('.theme-toggle')
-    .addEventListener('click', onClick)
-}
-
-// sync with system changes
-window
-  .matchMedia('(prefers-color-scheme: dark)')
-  .addEventListener('change', ({matches:isDark}) => {
-    theme.value = isDark ? 'dark' : 'light'
-    setPreference()
-  })
-```
-
 <figure>
   <img src="https://via.placeholder.com/900x600" alt="Placeholder" width=900 height=600>
   <figcaption>

src/scss/critical.scss

@@ -15,8 +15,9 @@
 
 body {
   min-height: 100vh;
-  display: grid;
+  display: flex;
-  grid-template-rows: auto 1fr auto;
+  flex-direction: column;
+  justify-content: space-between;
 
   > header {
     display: flex;

src/tags-list.md

@@ -1,13 +0,0 @@
----
-title: Tags
-permalink: /tags/
-layout: list
----
-<h1 class="full-bleed">{{ title }}</h1>
-
-<ul>
-{% for tag in collections.all | getAllTags %}
-	{% set tagUrl %}/tags/{{ tag | slugify }}/{% endset %}
-	<li><a href="{{ tagUrl }}" class="post-tag">{{ tag }}</a></li>
-{% endfor %}
-</ul>

src/tags.md

@@ -1,17 +1,35 @@
 ---
-eleventyComputed:
+title: 'Tag Archive'
-  title: "{{ Term.Site.Listing.Tags.Title }} “{{ tag }}”"
+layout: 'list'
-permalink: '/tags/{{ tag | slug }}/'
 pagination:
   data: collections
   size: 1
   alias: tag
-layout: 'list'
+permalink: '/tag/{{ tag | slug }}/'
 ---
 
-<h1 class="full-bleed">{{ Term.Site.Listing.Tags.Title }} “{{ tag }}”</h1>
+<h1>Tagged “{{ tag }}”</h1>
 
-{% set postslist = collections[ tag ] %}
+<section class="projects">
-{% include "partials/post-list.html" %}
+  <ol reversed class="postlist">
-
+  {% set taglist = collections[ tag ] %}
-<p>{{ Term.Site.Listing.Tags.More.See }} <a href="/tags/">{{ Term.Site.Listing.Tags.More.All }}</a>.</p>
+    {% for blog in taglist | reverse %}
+      <li>
+        <h2><a href="{{ blog.url }}">{{ blog.data.title }}</a></h2>
+        <ul class="list-inline">
+          <li><time datetime="{{ blog.date | getDatetime }}">{{ blog.date | toFullDate }}</time></li>
+          {%- if blog.data.tags -%}
+            {%- for tag in blog.data.tags -%}
+              <li>
+                <a href="/tag/{{ tag | slug }}/">{{ tag | title }}</a>
+              </li>
+            {%- endfor -%}
+          {%- endif -%}
+        </ul>
+        {%- if blog.data.leading -%}
+          <p>{{ blog.data.leading }}</p>
+        {%- endif -%}
+      </li>
+    {%- endfor -%}
+  </ol>
+</section>