Slight refactor

src/components/Item.vue

@@ -50,9 +50,7 @@ export default {
     };
   },
   methods: {
-    itemOpened() {
+    /* Returns true if a string is in URL format. Used to identify tile icon source */
-      this.$emit('itemClicked');
-    },
     isUrl(str) {
       const pattern = new RegExp(/(http|https):\/\/(\w+:{0,1}\w*)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%!\-/]))?/);
       return pattern.test(str);
@@ -91,18 +89,25 @@ export default {
       }
       return imgType;
     },
+    /* Called when an item is opened, so that search field can be reset */
+    itemOpened() {
+      this.$emit('itemClicked');
+    },
+    /**
+     * Detects overflowing text, shows ellipse, and allows is to marguee on hover
+     * The below code is horifically bad, it is embarassing that I wrote it...
+     */
+    manageTitleEllipse() {
+      const tileElem = document.getElementById(`tile-${this.getId}`);
+      if (tileElem) {
+        const isOverflowing = tileElem.scrollHeight > tileElem.clientHeight
+              || tileElem.scrollWidth > tileElem.clientWidth;
+        if (isOverflowing) tileElem.className += ' is-overflowing';
+      } // Note from present me to past me: WTF?!
+    },
   },
   mounted() {
-    // Detects overflowing text, and allows is to marguee on hover
+    this.manageTitleEllipse();
-    // The below code is horifically bad, it is embarassing that I wrote it...
-    const tileElem = document.getElementById(`tile-${this.getId}`);
-    if (tileElem) {
-      const isOverflowing = tileElem.scrollHeight > tileElem.clientHeight
-            || tileElem.scrollWidth > tileElem.clientWidth;
-      if (isOverflowing) {
-        tileElem.className += ' is-overflowing';
-      }
-    } // Note from present me to past me: WTF?!
   },
 };
 </script>

src/views/Home.vue

@@ -1,11 +1,14 @@
 <template>
   <div class="home">
+    <!-- Page title and navigation buttons -->
     <Header :pageInfo="getPageInfo(pageInfo)" />
+    <!-- Search bar, layout options and settings -->
     <FilterTile ref="filterComp"
       @user-is-searchin="searching"
       @change-display-layout="changeDisplayLayout"
       class="filter-container"
     />
+    <!-- Main content, section for each group of items -->
     <div class="item-group-container">
       <ItemGroup
         v-for="(section, index) in sections"
@@ -25,7 +28,7 @@
 import Header from '@/components/Header.vue';
 import FilterTile from '@/components/FilterTile.vue';
 import ItemGroup from '@/components/ItemGroup.vue';
-import conf from '../data/conf.yml';
+import conf from '../data/conf.yml'; // Main site configuration
 
 export default {
   name: 'home',
@@ -35,23 +38,23 @@ export default {
     ItemGroup,
   },
   data: () => ({
-    pageInfo: conf.pageInfo,
+    pageInfo: conf.pageInfo, // Site meta data (title, description, etc)
-    sections: conf.sections,
+    sections: conf.sections, // List of sections, containing items
-    searchTile: '',
+    searchValue: '',
   }),
   methods: {
     changeDisplayLayout(layout) {
       console.log('Display layout will update', layout);
     },
-    /* Returns true if the user is currently searching */
+    /* Updates local data with search value, triggered from filter comp */
-    searching(searchTile) {
+    searching(searchValue) {
-      this.searchTile = searchTile;
+      this.searchValue = searchValue;
     },
     /* Clears input field, once a searched item is opened */
     finishedSearching() {
       this.$refs.filterComp.clearFilterInput();
     },
-    /* Extracts the website name from domain, used for the searching functionality */
+    /* Extracts the site name from domain, used for the searching functionality */
     getDomainFromUrl(url) {
       const urlPattern = /^(?:https?:\/\/)?(?:w{3}\.)?([a-z\d.-]+)\.(?:[a-z.]{2,10})(?:[/\w.-]*)*/;
       const domainPattern = url.match(urlPattern);
@@ -63,7 +66,7 @@ export default {
         const {
           title, description, provider, url,
         } = tile;
-        const searchTerm = this.searchTile.toLowerCase();
+        const searchTerm = this.searchValue.toLowerCase();
         return (title && title.toLowerCase().includes(searchTerm))
           || (provider && provider.toLowerCase().includes(searchTerm))
           || (description && description.toLowerCase().includes(searchTerm))