fix(authors): authors without posts will use their twitter profile instead of their author page used as their link, fixes GoogleChrome#2904 (GoogleChrome#2965)

* fix(authors): authors without posts will use their twitter profile instead of their author page used as their link, fixes GoogleChrome#2904

* refactor: filter for percy in `authorsWithPosts` collection

Author: MichaelSolati

.eleventy.js

@@ -50,6 +50,7 @@ const YouTube = require(`./${componentsDir}/YouTube`);
 
 const collectionsDir = 'src/site/_collections';
 const authors = require(`./${collectionsDir}/authors`);
+const authorsWithPosts = require(`./${collectionsDir}/authors-with-posts`);
 const paginatedAuthors = require(`./${collectionsDir}/paginated-authors`);
 const paginatedBlogPosts = require(`./${collectionsDir}/paginated-blog-posts`);
 const paginatedNewsletters = require(`./${collectionsDir}/paginated-newsletters`);
@@ -151,6 +152,7 @@ module.exports = function(config) {
   // ----------------------------------------------------------------------------
   // COLLECTIONS
   // ----------------------------------------------------------------------------
+  config.addCollection('authorsWithPosts', authorsWithPosts);
   config.addCollection('authors', authors);
   config.addCollection('blogPosts', blogPostsDescending);
   config.addCollection('postsWithLighthouse', postsWithLighthouse);

jsconfig.json

@@ -0,0 +1,5 @@
+{
+  "include": [
+    "src/**/*.js"
+  ]
+}

src/@typedefs.js

@@ -0,0 +1,33 @@
+/**
+ * @typedef {Object} AdditionalData
+ * @property {string} [title]
+ * @property {string} [href]
+ * @property {string} [description]
+ * @property {string} [tag]
+ */
+
+/**
+ * @typedef {Object} Author
+ * @property {string} [description]
+ * @property {string} [title]
+ * @property {string} [key]
+ * @property {string} [href]
+ * @property {string} [url]
+ * @property {Object} [data]
+ * @property {string} [data.title]
+ * @property {string} [data.subhead]
+ * @property {string} [data.hero]
+ * @property {string} [data.alt]
+ * @property {Array<Object>} [elements]
+ */
+
+/**
+ * @typedef {Object} Paginated
+ * @property {string} [title]
+ * @property {string} [href]
+ * @property {string} [description]
+ * @property {string} [tag]
+ * @property {Array<Object>} elements
+ * @property {number} [index]
+ * @property {number} [pages]
+ */

src/site/_collections/authors-with-posts.js

@@ -0,0 +1,40 @@
+/*
+ * Copyright 2020 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+const authorsCollection = require('./authors');
+
+/**
+ * Returns authors filtered by if they have a post.
+ *
+ * @param {any} collections Eleventy collection object
+ * @return {Array<Author>}
+ */
+module.exports = (collections) => {
+  const testAuthors = [
+    'robdodson',
+    'samthor',
+    'surma',
+    'mgechev',
+    'addyosmani',
+    'adamargyle',
+  ];
+
+  return Object.values(authorsCollection(collections)).filter((author) => {
+    if (process.env.PERCY && !testAuthors.includes(author.key)) {
+      return;
+    }
+    return author.elements.length > 0;
+  });
+};

src/site/_collections/authors.js

@@ -22,8 +22,8 @@ const setdefault = require('../_utils/setdefault');
 /**
  * Generate map the posts by author's username/key
  *
- * @param {Array<any>} posts
- * @return {Map<string, Array<any>>} Map of posts by author's username/key
+ * @param {Array<{ data: { authors: any[] }}>} posts
+ * @return {Map<string, Array<Object>>} Map of posts by author's username/key
  */
 const findAuthorsPosts = (posts) => {
   const authorsMap = new Map();
@@ -42,7 +42,7 @@ const findAuthorsPosts = (posts) => {
  * Finds image of author, returns path.
  *
  * @param {string} key
- * @return {string} Path for image.
+ * @return {string | void} Path for image.
  */
 const findAuthorsImage = (key) => {
   for (const size of ['@3x', '@2x', '']) {
@@ -57,18 +57,9 @@ const findAuthorsImage = (key) => {
  * Returns all authors with their posts.
  *
  * @param {any} collections Eleventy collection object
- * @return {Array<{ description: string, title: string, key: string, href: string, url: string, data: { title: string, subhead: string, hero: string, alt: string }, elements: Array<any> }>}
+ * @return {Object.<string, Author>}
  */
 module.exports = (collections) => {
-  const testAuthors = [
-    'robdodson',
-    'samthor',
-    'surma',
-    'mgechev',
-    'addyosmani',
-    'adamargyle',
-  ];
-
   // Get all posts and sort them
   const posts = collections
     .getFilteredByGlob('**/*.md')
@@ -77,37 +68,39 @@ module.exports = (collections) => {
 
   const authorsPosts = findAuthorsPosts(posts);
 
-  const authors = Object.values(contributors)
+  /** @constant @type {Object.<string, Author>} @default */
+  const authors = {};
+
+  Object.values(contributors)
     .sort((a, b) => a.title.localeCompare(b.title))
-    .reduce((accumulator, author) => {
-      if (process.env.PERCY && !testAuthors.includes(author.key)) {
-        return accumulator;
-      }
+    .forEach((author) => {
       // This updates the shared contributors object with meta information and is safe to be called multiple times.
       author.url = path.join('/en', author.href);
       author.data = {
         title: author.title,
         subhead: author.description,
       };
+
       author.elements = authorsPosts.has(author.key)
         ? authorsPosts.get(author.key)
         : [];
+
+      if (author.elements.length === 0) {
+        author.href = `https://twitter.com/${author.twitter}`;
+      }
+
       const authorsImage = findAuthorsImage(author.key);
       if (authorsImage) {
         author.data.hero = authorsImage;
         author.data.alt = author.title;
       }
 
-      if (author.elements.length > 0) {
-        if (process.env.PERCY) {
-          author.elements = author.elements.slice(-6);
-        }
-
-        accumulator.push(author);
+      if (process.env.PERCY) {
+        author.elements = author.elements.slice(-6);
       }
 
-      return accumulator;
-    }, []);
+      authors[author.key] = author;
+    });
 
   return authors;
 };

src/site/_collections/paginated-authors.js

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-const authorsCollection = require('./authors');
+const authorsCollection = require('./authors-with-posts');
 const addPagination = require('../_utils/add-pagination');
 
 /**
@@ -25,7 +25,7 @@ const addPagination = require('../_utils/add-pagination');
  * embedded loop O^2.
  *
  * @param {any} collections Eleventy collection object
- * @return {Array<{ title: string, href: string, description: string, elements: Array<object>, index: number, pages: number }>} An array where each element is a page with some meta data and n authors for the page.
+ * @return {Array<Paginated>} An array where each element is a page with some meta data and n authors for the page.
  */
 module.exports = (collections) => {
   const authors = authorsCollection(collections);

src/site/_collections/paginated-posts-by-author.js

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-const authorsCollection = require('./authors');
+const authorsCollection = require('./authors-with-posts');
 const addPagination = require('../_utils/add-pagination');
 
 /**
@@ -27,10 +27,12 @@ const addPagination = require('../_utils/add-pagination');
  * embedded loop O^2.
  *
  * @param {any} collections Eleventy collection object
- * @return {Array<{ title: string, href: string, description: string, elements: Array<object>, index: number, pages: number }>} An array where each element is a paged tag with some meta data and n posts for the page.
+ * @return {Array<Paginated>} An array where each element is a paged tag with some meta data and n posts for the page.
  */
 module.exports = (collections) => {
   const authors = authorsCollection(collections);
+
+  /** @constant @type {Array<Paginated>} @default */
   let paginated = [];
 
   authors.forEach((author) => {

src/site/_includes/components/AuthorsDate.js

@@ -69,9 +69,9 @@ const renderAuthorNames = (pairs) => {
   }
 
   const inner = pairs
-    .map(({id, info}) => {
+    .map(({info}) => {
       return html`
-        <a class="w-author__name-link" href="/authors/${id}/">${info.title}</a>
+        <a class="w-author__name-link" href="${info.href}">${info.title}</a>
       `;
     })
     .join(', ');
@@ -87,11 +87,15 @@ const renderAuthorNames = (pairs) => {
  * Render an authors card, including any number of authors and an optional date.
  *
  * @param {{authors: !Array<string>, date: ?Date, images: number}} arg
+ * @param {Object.<string, Author>} [authorsCollection]
  * @return {string}
  */
-const renderAuthorsDate = ({authors, date = null, images = 2}) => {
+const renderAuthorsDate = (
+  {authors, date = null, images = 2},
+  authorsCollection,
+) => {
   const pairs = (authors || []).map((id) => {
-    const info = contributors[id];
+    const info = (authorsCollection ? authorsCollection : contributors)[id];
     if (!info) {
       throw new Error(
         `Can't create Author component for "${id}" without contributor ` +

src/site/_includes/components/EventTable.js

@@ -19,10 +19,11 @@ const {html} = require('common-tags');
 const AuthorsDate = require('./AuthorsDate');
 
 /**
- * @param {!Array<{title: string, from: !Date, sessions: !Array}>} event
+ * @param {!Array<{title: string, from: !Date, sessions: !Array<any>}>} event
+ * @param {Object.<string, Author>} authorsCollection
  * @return {string}
  */
-module.exports = (event) => {
+module.exports = (event, authorsCollection) => {
   // Find the default day to show, as a very basic non-JS fallback. Pick the
   // first day where the build time is before the end time of the sessions.
   // This isn't a very good fallback as our build happens at minimum of once per
@@ -47,7 +48,7 @@ module.exports = (event) => {
     return html`
       <tr>
         <td class="w-event-schedule__speaker">
-          ${AuthorsDate({authors})}
+          ${AuthorsDate({authors}, authorsCollection)}
         </td>
         <td class="w-event-schedule__session">${title}</td>
       </tr>

src/site/_utils/add-pagination.js

@@ -19,8 +19,8 @@ const constants = require('./constants');
 /**
  * Take array of elements and returns an array of paginated pages for the elements.
  * @param {Array<object>} elements Elements to paginate
- * @param {{ title: string, href: string, description: string, tag: string }} additionalData Aditional data that may be relevant to a page.
- * @return {Array<{ title: string, href: string, description: string, tag: string, posts: Array<object>, index: number, pages: number }>} An array of items to display, including href and index.
+ * @param {AdditionalData} additionalData Aditional data that may be relevant to a page.
+ * @return {Array<Paginated>} An array of items to display, including href and index.
  */
 module.exports = function addPagination(elements, additionalData = {}) {
   if (!Array.isArray(elements)) {

src/site/content/en/authors/feed.njk

@@ -11,7 +11,7 @@ renderData:
 noindex: true
 permalink: "/{{lang}}{{ paged.href }}feed.xml"
 pagination:
-  data: collections.authors
+  data: collections.authorsWithPosts
   size: 1
   alias: paged
 ---

src/site/content/en/live/index.njk

@@ -82,7 +82,7 @@ draft: true
     </div>
 
     <div class="w-event-section__column-right w-event-section__column-right__schedule">
-      {% EventTable event %}
+      {% EventTable event, collections.authors %}
     </div>
 
   </section>