feat: authors & newsletter form

src/.vuepress/config/authors.js

@@ -34,4 +34,49 @@ module.exports = new Map([
       twitter: '@jesseclayburgh',
     },
   ],
+  [
+    'jenn-turner',
+    {
+      name: 'Jenn Turner',
+      avatar: 'jenn-turner.jpg',
+      twitter: '@jennwrites',
+    },
+  ],
+  [
+    'dietrich-ayala',
+    {
+      name: 'Dietrich Ayala',
+      avatar: 'dietrich-ayala.jpg',
+      twitter: '@dietrich',
+    },
+  ],
+  [
+    'david-dias',
+    {
+      name: 'David Dias',
+      avatar: 'david-dias.jpg',
+      twitter: '@daviddias',
+    },
+  ],
+  [
+    'whyrusleeping',
+    {
+      name: 'whyrusleeping',
+      avatar: 'whyrusleeping.jpg',
+    },
+  ],
+  [
+    'lidel',
+    {
+      name: 'lidel',
+      avatar: 'lidel.jpg',
+    },
+  ],
+  [
+    'alan-shaw',
+    {
+      name: 'Alan Shaw',
+      avatar: 'alan-shaw.jpg',
+    },
+  ],
 ])

src/.vuepress/plugins/pageData.js

@@ -1,17 +1,36 @@
+const { chalk } = require('@vuepress/shared-utils')
 const slug = require('slug')
 
 module.exports = (options, context) => ({
   extendPageData($page) {
-    const { frontmatter } = $page
+    const { frontmatter, _filePath } = $page
+    const { authors } = options
 
     // author config
     const authorName = frontmatter.author
+    const authorAvatarUrl = frontmatter.avatarUrl
+
     if (typeof authorName === 'string') {
       const authorKey = slug(authorName, { lower: true })
 
       // setup author stub to keep templates happy
-      const author = { name: authorName }
+      let author = { name: authorName }
 
+      if (authors.has(authorKey)) {
+        author = authors.get(authorKey)
+      } else if (authorAvatarUrl) {
+        author.avatarUrl = authorAvatarUrl
+      } else {
+        console.error(
+          `${chalk.red(
+            'error'
+          )} Could not find a configured author for ${chalk.cyan(
+            authorName
+          )} used in ${_filePath}. You need to add a new key in ${chalk.cyan(
+            '.vuepress/config/authors.js'
+          )} or set a frontmatter value for ${chalk.cyan('avatarUrl')}`
+        )
+      }
       // setup the page author object
       frontmatter.author = author
       frontmatter.authorKey = authorKey

src/.vuepress/theme/components/base/Avatar.vue

@@ -15,6 +15,12 @@
       ctx="_assets/avatars/"
       :alt="name"
     />
+    <LazyImage
+      v-else-if="avatarUrl"
+      class="avatar-image"
+      :src="avatarUrl"
+      :alt="name"
+    />
   </div>
 </template>
 

src/.vuepress/theme/components/blog/ActiveTags.vue

@@ -12,14 +12,13 @@
       >
       (newest first) of {{ activeCategory }}
       <span v-if="searchedText.length">
-        for "
+        for
         <span v-for="text in searchedText" :key="text" class=""
-          >{{ text }}
+          >"{{ text }}"
         </span>
-        "
       </span>
       <span v-if="activeTags.length"
-        >with tag{{ numberOfPosts > 1 ? 's' : '' }}:</span
+        >with tag{{ activeTags.length > 1 ? 's' : '' }}:</span
       >
     </span>
     <ul class="tags flex" itemprop="keywords">

src/.vuepress/theme/components/blog/NewsletterForm.vue

@@ -13,23 +13,22 @@
     </div>
     <form
       id="mc-embedded-subscribe-form"
-      action="https://ipfs.us4.list-manage.com/subscribe/post?u=25473244c7d18b897f5a1ff6b&amp;id=cad54b2230"
-      method="post"
       name="mc-embedded-subscribe-form"
       class="flex"
+      action="https://ipfs.us4.list-manage.com/subscribe/post?u=25473244c7d18b897f5a1ff6b&amp;id=cad54b2230"
+      method="post"
       target="_blank"
-      novalidate
     >
       <div id="mc_embed_signup_scroll" class="flex">
         <div class="fields flex flex-col">
           <input
             id="mce-EMAIL"
+            v-model="email"
             required
             type="email"
             aria-label="Email Address"
             class="text-black p-2 rounded"
             placeholder="email@your.domain"
-            value=""
             name="EMAIL"
           />
           <label class="pt-2 italic" for="gdpr_28879">
@@ -37,6 +36,7 @@
               id="gdpr_28879"
               type="checkbox"
               class=""
+              required
               name="gdpr[28879]"
               value="Y"
             /><span class="pl-2">Please send me the newsletter</span>
@@ -74,6 +74,9 @@
 export default {
   name: 'NewsletterForm',
   props: {},
+  data: () => ({
+    email: null,
+  }),
   computed: {},
   methods: {},
 }

src/.vuepress/theme/components/blog/PostAuthor.vue

@@ -6,7 +6,11 @@
     itemscope
     class="flex items-center"
   >
-    <Avatar v-if="avatar || svgIcon" v-bind="$props" class="mr-2 bg-plBlack" />
+    <Avatar
+      v-if="avatar || svgIcon || avatarUrl"
+      v-bind="$props"
+      class="mr-2 bg-plBlack"
+    />
     <span itemprop="name" class="whitespace-no-wrap">{{ name }}</span>
   </div>
 </template>

src/.vuepress/theme/components/blog/PostMeta.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="flex flex-col">
-    <!-- <PostAuthor v-if="author && author.name" v-bind="author" /> -->
+    <PostAuthor v-if="author && author.name" v-bind="author" />
     <div v-if="date">
       <time
         class="italic opacity-50"
@@ -20,13 +20,13 @@
 <script>
 import dayjs from 'dayjs'
 import PostTag from '@theme/components/blog/PostTag'
-// import PostAuthor from '@theme/components/blog/PostAuthor'
+import PostAuthor from '@theme/components/blog/PostAuthor'
 
 export default {
   name: 'PostMeta',
   components: {
     PostTag,
-    // PostAuthor,
+    PostAuthor,
   },
   props: {
     tags: {

src/.vuepress/theme/components/mixins/Author.vue

@@ -9,6 +9,10 @@ export default {
       type: String,
       default: null,
     },
+    avatarUrl: {
+      type: String,
+      default: null,
+    },
     twitter: {
       type: String,
       default: '',

src/.vuepress/theme/layouts/Blog.vue

@@ -56,7 +56,7 @@ import Card from '@theme/components/blog/Card'
 import SortAndFilter from '@theme/components/blog/SortAndFilter'
 import Breadcrumbs from '@theme/components/Breadcrumbs'
 import { getTags } from '@theme/util/tagUtils'
-import { parseProtectedPost } from '@theme/util/blogUtils'
+import { parseProtectedPost, checkItem } from '@theme/util/blogUtils'
 
 const protectedCardTypes = ['newslink']
 const defaultCategory = 'Blog Post'
@@ -111,31 +111,18 @@ export default {
         }
 
         if (
-          this.activeCategory &&
-          decodeURI(this.activeCategory) !== defaultCategory
+          !checkItem({
+            postType: defaultCategory,
+            tags: page.frontmatter.tags,
+            title: page.frontmatter.title,
+            activeTags: this.activeTags,
+            searchedText: this.searchedText,
+            activeCategory: this.activeCategory,
+          })
         ) {
           return false
         }
 
-        for (let i = 0; i < this.activeTags.length; i++) {
-          if (
-            !page.frontmatter.tags ||
-            !page.frontmatter.tags.includes(this.activeTags[i])
-          ) {
-            return false
-          }
-        }
-
-        for (let i = 0; i < this.searchedText.length; i++) {
-          if (
-            !page.frontmatter.title
-              .toLocaleLowerCase()
-              .includes(this.searchedText[i].toLocaleLowerCase())
-          ) {
-            return false
-          }
-        }
-
         if (
           page.frontmatter &&
           (page.frontmatter.sitemap ? !page.frontmatter.sitemap.exclude : true)

src/.vuepress/theme/util/blogUtils.js

@@ -1,3 +1,32 @@
+export const checkItem = ({
+  postType,
+  tags,
+  title,
+  activeTags = [],
+  searchedText = [],
+  activeCategory = '',
+}) => {
+  if (activeCategory && decodeURI(activeCategory) !== postType) {
+    return false
+  }
+
+  for (let i = 0; i < activeTags.length; i++) {
+    if (!tags || !tags.includes(activeTags[i])) {
+      return false
+    }
+  }
+
+  for (let i = 0; i < searchedText.length; i++) {
+    if (
+      !title.toLocaleLowerCase().includes(searchedText[i].toLocaleLowerCase())
+    ) {
+      return false
+    }
+  }
+
+  return true
+}
+
 export const parseProtectedPost = (
   post,
   activeTags = [],
@@ -11,22 +40,19 @@ export const parseProtectedPost = (
   const result = []
 
   post.frontmatter.data.forEach((item) => {
-    if (activeCategory && decodeURI(activeCategory) !== post.frontmatter.type) {
+    if (
+      !checkItem({
+        postType: post.frontmatter.type,
+        tags: item.tags,
+        title: item.title,
+        activeTags,
+        searchedText,
+        activeCategory,
+      })
+    ) {
       return false
     }
 
-    for (let i = 0; i < activeTags.length; i++) {
-      if (!item.tags || !item.tags.includes(activeTags[i])) {
-        return false
-      }
-    }
-
-    for (let i = 0; i < searchedText.length; i++) {
-      if (!item.title.includes(searchedText[i])) {
-        return false
-      }
-    }
-
     result.push({
       category: post.frontmatter.type,
       type: post.frontmatter.type,
@@ -44,21 +70,4 @@ export const parseProtectedPost = (
   })
 
   return result
-
-  //     return post.frontmatter.data.map((item) => {
-
-  //     return {
-  //       type: post.frontmatter.type,
-  //       date: item.date,
-  //       title: item.title,
-  //       path: item.path,
-  //       ...item,
-  //       frontmatter: {
-  //         date: item.date,
-  //         title: item.title,
-  //         path: item.path,
-  //         ...item,
-  //       },
-  //     }
-  //   })
 }

src/_blog/110-go-ipfs-0-7-0/README.md

@@ -4,6 +4,7 @@ url: /2020-09-24-go-ipfs-0-7-0/
 title: IPFS 0.7.0, the SECIO retirement edition, is here!
 description:
 author: Jacob Heun & Adin Schmahmann
+avatarUrl: /header_images/blog-placeholder.png
 tags: go-ipfs, release
 ---