Pass Grid's data source as props + Add GridEmpty for error messages.

components/Grid.vue

@@ -75,39 +75,58 @@
         </a>
       </div>
     </transition-group>
+
+    <!-- Error Message -->
+    <GridEmpty
+      v-if="dataSource && !dataSource.length"
+      message="0 projects listed."
+    />
   </div>
 </template>
 
 <script>
-import projects from "../content/projects.json";
 import { shuffle } from "lodash";
+import GridEmpty from "./GridEmpty";
 
 export default {
+  components: { GridEmpty },
   computed: {
     filteredData() {
-      if (this.filter === "all") return this.data;
+      if (this.filter === "all") return shuffle(this.dataSource);
 
-      return shuffle(this.data.filter(o => o.type === this.filter));
+      return this.shuffle(this.dataSource.filter(o => o.type === this.filter));
     }
   },
+  props: {
+    dataSource: [Array, Object],
+    default: () => {}
+  },
   data() {
     return {
-      data: projects,
       filter: "all"
     };
   },
   mounted() {
-    this.data = shuffle(this.data);
-
-    // get the sticky element
-    const stickyElm = document.getElementById("grid-nav");
-
-    const observer = new IntersectionObserver(
-      ([e]) => e.target.classList.toggle("shadow-md", e.intersectionRatio < 1),
-      { threshold: [1] }
-    );
-
-    observer.observe(stickyElm);
+    // FIXME: Commented for testing purposes
+    // 1. Get nav element and observe it.
+    // 2. Toggle class for sticky behavior.
+    // const stickyElm = document.getElementById("grid-nav");
+    // this.observeElmt(stickyElm);
+  },
+  methods: {
+    // FIXME: Commented for testing purposes
+    // observeElmt(elmt) {
+    //   const options = {
+    //     root: elmt,
+    //     threshold: 1
+    //   };
+    //   const observer = new IntersectionObserver(
+    //     ([e]) =>
+    //       e.target.classList.toggle("shadow-md", e.intersectionRatio < 1),
+    //     options
+    //   );
+    //   observer.observe(elmt);
+    // }
   }
 };
 </script>

components/GridEmpty.vue

@@ -0,0 +1,22 @@
+<template>
+  <div
+    class="bg-gray-500 text-white text-sm font-bold px-4 py-3 w-1/2 mx-auto"
+    role="alert"
+  >
+    <p>{{ message }}</p>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "GridEmpty",
+  props: {
+    message: {
+      type: String,
+      default: "0 items to be shown."
+    }
+  }
+};
+</script>
+
+<style></style>

components/Header.vue

@@ -17,7 +17,7 @@
         ></path></svg></a
     ><a
       class="flex items-center hover:text-gray-700 mr-5"
-      href="https://www.linkedin.com/in/no%C3%A9-v-395bba109/"
+      href="https://www.linkedin.com/in/no%C3%A9-v-395bba109"
       target="_blank"
     >
       <svg

pages/index.vue

@@ -2,13 +2,21 @@
   <div>
     <Header />
     <Hero />
-    <Grid />
+    <Grid :dataSource="projects" />
     <Contact />
   </div>
 </template>
 
 <script>
-export default {};
+import projects from "@/content/projects.json";
+
+export default {
+  data() {
+    return {
+      projects: projects
+    };
+  }
+};
 </script>
 
 <style>