Changes

Author: GrahamSH-LLK

.prettierignore

@@ -2,10 +2,11 @@
 # .png is unformattable (binary)
 */*.ico
 # .ico is unformattable (same as above)
-*/*.svg
+*.svg
 # Prettier doesn't support svg yet
 .* 
 # Most . files shouldn't be formatted
 .*/
 # Most . folders shouldn't be formatted
-.github/*
+.github/*
+# .github shouldn't be formatted

components/global/InfoBox.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="bg-blue-500 text-white p-4 mb-4">
-    <p><slot name="info-box"></slot></p>
+  <div class="bg-indigo-500 rounded text-white p-4 mb-4">
+    <p><slot></slot></p>
   </div>
 </template>

components/global/NextPrev.vue

@@ -1,33 +1,40 @@
 <template>
-  <div>
+  <div class="flex justify-between">
     <NuxtLink
       v-if="prev"
       :to="{ name: 'blog-slug', params: { slug: prev.slug } }"
+      class="text-primary font-bold hover:underline"
     >
-      {{ prev.title }}
+      <unicon name="arrow-left" fill="currentColor" /> {{ prev.title }}
     </NuxtLink>
-
+    <span v-else>&nbsp;</span>
     <NuxtLink
       v-if="next"
       :to="{ name: 'blog-slug', params: { slug: next.slug } }"
+      class="font-bold hover:underline"
     >
-      {{ next.title }}
+      {{ next.title }} <unicon name="arrow-right" fill="currentColor" />
     </NuxtLink>
+    <span v-else>&nbsp;</span>
   </div>
 </template>
 
 <script>
 export default {
-  async asyncData({ $content, params }) {
-    const [prev, next] = await $content("articles")
-      .sortBy("createdAt", "asc")
-      .surround(params.slug)
-      .fetch();
-
-    return {
-      prev,
-      next,
-    };
+  props: {
+    prev: {
+      type: Object,
+      default: () => null,
+    },
+    next: {
+      type: Object,
+      default: () => null,
+    },
   },
 };
 </script>
+<style lang="postcss">
+.unicon {
+    vertical-align: text-bottom;
+}
+</style>

content/articles/nuxt.md

@@ -8,3 +8,7 @@ categories: site
 ---
 
 Hi, and welcome to my new Nuxt site and blog! It's a lot faster and has a PWA. Currently, it's staticly generated with `nuxt generate` in GitHub Actions and deployed to GitHub Pages.
+
+<InfoBox>
+<h3 class="text-white">This is an infobox that I can use in any article.</h3>
+</InfoBox>

nuxt.config.js

@@ -96,5 +96,5 @@ export default {
     routes: createSitemapRoutes,
     exclude: ["/articles/**"],
   },
-  plugins: ["~/plugins/json-ld"],
+  plugins: ["~/plugins/json-ld", "~/plugins/unicons"],
 };