feat(surrounding-posts): created surrounding posts component

components/SurroundingPosts/index.vue

@@ -0,0 +1,111 @@
+<template>
+  <nav class="surrounding-posts container">
+    <NuxtLink
+      v-if="prev"
+      :to="{ name: 'posts-slug', params: { slug: prev.slug } }"
+      class="surrounding-posts__link surrounding-posts__link--prev"
+    >
+      <brand-icon
+        class="surrounding-posts__icon surrounding-posts__icon--prev"
+        :name="arrow"
+        title="Arrow icon pointing back"
+      />
+      {{ prev.title }}
+    </NuxtLink>
+    <div v-else />
+    <!-- Added empty div to mantain the "Next Post" link on the end -->
+    <NuxtLink
+      v-if="next"
+      :to="{ name: 'posts-slug', params: { slug: next.slug } }"
+      class="surrounding-posts__link surrounding-posts__link--next"
+    >
+      {{ next.title }}
+      <brand-icon
+        class="surrounding-posts__icon surrounding-posts__icon--next"
+        :name="arrow"
+        title="Arrow icon pointing forward"
+      />
+    </NuxtLink>
+  </nav>
+</template>
+
+<script>
+import dictionary from '@/utils/dictionary'
+
+export default {
+  name: 'SurroundingPosts',
+  props: {
+    next: {
+      type: Object,
+      default: null,
+    },
+    prev: {
+      type: Object,
+      default: null,
+    },
+  },
+  data() {
+    return {
+      arrow: dictionary?.icons?.utilities?.arrow,
+    }
+  },
+}
+</script>
+
+<style lang="scss">
+.surrounding-posts {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-gap: 1rem;
+  width: 100%;
+
+  @media screen and (min-width: $breakpoint-small) {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+.surrounding-posts__link {
+  @include elevation(1);
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  padding: 1rem;
+  border: 0;
+  border-radius: 6px;
+  transition: 0.3s ease-in-out box-shadow;
+
+  &:hover {
+    @include elevation(4);
+
+    border: 0;
+  }
+}
+
+.surrounding-posts__link--prev {
+  @media screen and (min-width: $breakpoint-small) {
+    justify-content: flex-start;
+  }
+}
+
+.surrounding-posts__link--next {
+  @media screen and (min-width: $breakpoint-small) {
+    justify-content: flex-end;
+    text-align: right;
+  }
+}
+
+.surrounding-posts__icon {
+  width: 1.5rem;
+  min-width: 1.5rem;
+}
+
+.surrounding-posts__icon--prev {
+  transform: rotate(180deg);
+}
+
+// .surrounding-posts__icon--next {
+// }
+</style>

components/TheFooter/index.vue

@@ -5,7 +5,7 @@
       <brand-icon
         class="the-footer__heart-icon"
         :name="heart"
-        title="heart icon"
+        title="Heart icon"
       />
       <span>from Mexico</span>
     </div>

content/posts/top-5-football-games-i-saw-with-my-dad.md

@@ -0,0 +1,9 @@
+---
+title: Top 5 football games 🏈 I saw with my dad
+summary: My dad instilled in me a great love for football. These are the games I enjoyed most by his side.
+featuredImage: static/images/posts/top-5-football-games-i-saw-with-my-dad/helmet_catch.jpg
+---
+
+Wait for it
+
+<post-image src="/images/posts/top-5-football-games-i-saw-with-my-dad/helmet_catch" alt="Derek Tyree is catching the football with help of his helmet in tight coverage" title="The helmet catch ny Derek Tyree" width="792" height="512"></post-image>

content/posts/what-is-itcss.md

@@ -7,7 +7,7 @@ featuredImage: static/images/posts/what-is-itcss/ITCSS.jpg
 **ITCSS** refers to Inverted Triangle CSS, a term introduced by [Harry Roberts (@csswizardry)][csswizardry], to deal with the increasing complexity of managing projects with CSS. This methodology helps you organize your CSS projects in a sane and scalable manner. In this blog post I'll try to explain the magnificence of this beautiful architecture.
 
 <!-- omit in toc -->
-## Article content 
+## Content 
 
 <nav class="table-of-contents">
 

pages/posts/_slug.vue

@@ -1,21 +1,31 @@
 <template>
-  <main>
-    <article class="container">
-      <h1 class="title">{{ post.title }}</h1>
-      <article-content :post="post" />
-    </article>
-  </main>
+  <div>
+    <main>
+      <article class="container">
+        <h1 class="title">{{ post.title }}</h1>
+        <article-content :post="post" />
+      </article>
+    </main>
+    <aside>
+      <surrounding-posts :prev="prev" :next="next" />
+    </aside>
+  </div>
 </template>
 
 <script>
 import composeHead from '@/utils/pages/composeHead'
 
 export default {
   name: 'PostPage',
-  async asyncData({ $content, params, $sentry }) {
+  async asyncData({ $content, params }) {
     const post = await $content('posts', params.slug).fetch()
+    const [prev, next] = await $content('posts')
+      .only(['title', 'slug'])
+      .sortBy('createdAt', 'asc')
+      .surround(params.slug)
+      .fetch()
 
-    return { post }
+    return { post, prev, next }
   },
   head() {
     const { title, summary, featuredImageUrl } = this.post

tests/unit/globalComponents.js

@@ -6,6 +6,9 @@ const globalComponents = [
   'components/TheFooter/TheFooterAcknowledgments',
   'components/TheHeader',
   'components/TheLogo',
+  'components/PostList',
+  'components/PostList/PostListItem',
+  'components/SurroundingPosts',
   'components/global/PostImage',
 ]