Add users.

Author: samikeijonen

.eleventy.js

@@ -47,6 +47,13 @@ module.exports = function(eleventyConfig) {
 		return url.pathname.replace(/\/+$/, '');
 	});
 
+	// Get post author by ID.
+	eleventyConfig.addFilter('thisPostAuthor', (array, ID) => {
+		return array.filter( user => {
+			return user.id === ID;
+		});
+	});
+
 	// Get post comments by ID.
 	eleventyConfig.addFilter('thisPostComments', (array, ID) => {
 		return array.filter( item => {

src/css/main.css

@@ -49,9 +49,9 @@
 @import "objects/animations.css";
 @import "objects/flow-spacing.css";
 @import "objects/helpers.css";
+@import "objects/icon.css";
 @import "objects/layouts.css";
 @import "objects/max-widths.css";
-@import "objects/svg.css";
 
 
 /*--------------------------------------------------------------

src/css/objects/svg.css src/css/objects/icon.css

@@ -1,4 +1,4 @@
-.svg,
+.icon,
 .wp-social-link svg {
 	display: inline-block;
 	fill: currentColor;

src/css/utilities/spacing.css

@@ -42,6 +42,10 @@
 	margin-bottom: var(--spacing-4x);
 }
 
+.mr-4 {
+	margin-right: var(--spacing-4x);
+}
+
 .mt-0 {
 	margin-top: 0;
 }

src/site/_data/icon.json

@@ -0,0 +1,4 @@
+{
+	"calendar": "<svg class='icon icon--user' aria-hidden='true' focusable='false' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><path d='M400 64h-48V12c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v52H160V12c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v52H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zm-6 400H54c-3.3 0-6-2.7-6-6V160h352v298c0 3.3-2.7 6-6 6z'/></svg>",
+	"user": "<svg class='icon icon--user' aria-hidden='true' focusable='false' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><path d='M313.6 304c-28.7 0-42.5 16-89.6 16-47.1 0-60.8-16-89.6-16C60.2 304 0 364.2 0 438.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-25.6c0-74.2-60.2-134.4-134.4-134.4zM400 464H48v-25.6c0-47.6 38.8-86.4 86.4-86.4 14.6 0 38.3 16 89.6 16 51.7 0 74.9-16 89.6-16 47.6 0 86.4 38.8 86.4 86.4V464zM224 288c79.5 0 144-64.5 144-144S303.5 0 224 0 80 64.5 80 144s64.5 144 144 144zm0-240c52.9 0 96 43.1 96 96s-43.1 96-96 96-96-43.1-96-96 43.1-96 96-96z'/></svg>"
+}

src/site/_data/users.js

@@ -0,0 +1,7 @@
+const fetchData = require('../helpers/fetchData.js');
+
+const endPoint = 'https://11ty.foxnet.fi/wp-json/wp/v2/users?per_page=10';
+
+module.exports = async function fetchPages() {
+	return fetchData('users', endPoint);
+};

src/site/_datacache/categories

@@ -0,0 +1 @@
+[{"2020-6-5":"1"},["2"],{"id":1,"name":"3","url":"4","description":"4","link":"5","slug":"6","avatar_urls":"7","meta":"8","_links":"9"},"Sami Keijonen","","https://11ty.foxnet.fi/author/sekeijon/","sekeijon",{"24":"10","48":"11","96":"12"},[],{"self":"13","collection":"14"},"https://secure.gravatar.com/avatar/5dd1cbc606af93bd2132ae5c6983e2b6?s=24&d=mm&r=g","https://secure.gravatar.com/avatar/5dd1cbc606af93bd2132ae5c6983e2b6?s=48&d=mm&r=g","https://secure.gravatar.com/avatar/5dd1cbc606af93bd2132ae5c6983e2b6?s=96&d=mm&r=g",["15"],["16"],{"href":"17"},{"href":"18"},"https://11ty.foxnet.fi/wp-json/wp/v2/users/1","https://11ty.foxnet.fi/wp-json/wp/v2/users"]

src/site/_datacache/comments

@@ -11,12 +11,14 @@ permalink: blog/{{ blogpost.slug }}/index.html
 {% set title = blogpost.title.rendered %}
 {% set commentStatus = blogpost.comment_status %}
 {% set id = blogpost.id %}
+{% set author = users | thisPostAuthor(blogpost.author) %}
 
 {% block byline %}
-	<span class="entry__byline">
-		<svg class="svg" aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M148 288h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm108-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 96v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm192 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96-260v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h48V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h128V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h48c26.5 0 48 21.5 48 48zm-48 346V160H48v298c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z"></path></svg>
-		<time class="entry__date" datetime="{{ blogpost.date | htmlDateString }}">{{ blogpost.date | readableDate }}</time>
-	</span>
+	<p class="entry__byline mb-0">
+		{{ icon.calendar | safe }}
+		<time class="entry__date mr-4" datetime="{{ blogpost.date | htmlDateString }}">{{ blogpost.date | readableDate }}</time>
+		{{ icon.user | safe }} <span class="screen-reader-text">Written by</span> {{ author[0].name }}
+	</p>
 {% endblock %}
 
 {% block pageTitle %}