TODO: code styles

.eleventy.js

@@ -36,6 +36,15 @@ 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,6 +3,15 @@
     "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,6 +7,14 @@
     {
       "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="/tag/{{ tag | slug }}/">{{ tag | title }}</a>
+              <a href="/tags/{{ 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 collections.blog -%}
+    {%- asyncEach blog in postslist -%}
       <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="/tag/{{ tag | slug }}/">{{ tag | title }}</a>
+                <a href="/tags/{{ tag | slug }}/">{{ tag | title }}</a>
               </li>
             {%- endfor -%}
           {%- endif -%}

src/blog.md

@@ -2,9 +2,10 @@
 title: 'Blog'
 layout: 'list'
 ---
-# Blog
+# {{ title }}
 
 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,4 +7,5 @@ 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,6 +7,71 @@ 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,9 +15,8 @@
 
 body {
   min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
+  display: grid;
+  grid-template-rows: auto 1fr auto;
 
   > header {
     display: flex;

src/tags-list.md

@@ -0,0 +1,13 @@
+---
+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,35 +1,17 @@
 ---
-title: 'Tag Archive'
-layout: 'list'
+eleventyComputed:
+  title: "{{ Term.Site.Listing.Tags.Title }} “{{ tag }}”"
+permalink: '/tags/{{ tag | slug }}/'
 pagination:
   data: collections
   size: 1
   alias: tag
-permalink: '/tag/{{ tag | slug }}/'
+layout: 'list'
 ---
 
-<h1>Tagged “{{ tag }}”</h1>
+<h1 class="full-bleed">{{ Term.Site.Listing.Tags.Title }} “{{ tag }}”</h1>
 
-<section class="projects">
-  <ol reversed class="postlist">
-  {% set taglist = collections[ tag ] %}
-    {% 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>
+{% set postslist = collections[ tag ] %}
+{% include "partials/post-list.html" %}
+
+<p>{{ Term.Site.Listing.Tags.More.See }} <a href="/tags/">{{ Term.Site.Listing.Tags.More.All }}</a>.</p>