Allow custom site title + description, and refactored

src/components/FilterTile.vue

@@ -14,7 +14,10 @@
           title="Clear search"
           @click="clearFilterInput"></i>
       </form>
-      <div class="space-filler"></div>
+      <div class="space-filler">
+        <span>hello</span>
+        <span>world</span>
+      </div>
       <KeyboardShortcutInfo />
   </section>
 </template>

src/components/Header.vue

@@ -1,6 +1,6 @@
 <template>
     <header>
-      <PageTitle />
+      <PageTitle :title="pageInfo.title" :description="pageInfo.description" />
       <Nav class="nav"/>
     </header>
 </template>
@@ -15,6 +15,9 @@ export default {
     PageTitle,
     Nav,
   },
+  props: {
+    pageInfo: Object,
+  },
 };
 </script>
 

src/components/PageTitle.vue

@@ -1,13 +1,17 @@
 <template>
   <div class="page-titles">
-    <h1>Networking Services</h1>
+    <h1>{{ title }}</h1>
-    <span class="subtitle">Local network management and moniroting</span>
+    <span class="subtitle">{{ description }}</span>
   </div>
 </template>
 
 <script>
 export default {
   name: 'PageTitle',
+  props: {
+    title: String,
+    description: String,
+  },
 };
 </script>
 

src/data/conf.yml

@@ -1,10 +1,9 @@
 ---
 pageInfo:
   title: Hello World
-  description: ''
+  description: 'This is a demo'
 sections:
 - name: Firewall
-  collapsed: false
   items:
   - title: OPNsense
     description: Firewall Central Management
@@ -47,7 +46,6 @@ sections:
     iconType: img
     url: https://192.168.1.1/ui/wireguard/general
 - name: DNS Device
-  collapsed: false
   items:
   - title: Pi-Hole
     description: DNS settings for ad & tracker blocking
@@ -112,7 +110,6 @@ sections:
     icon: networking/grafana
     url: http://192.168.130.2:8091/
 - name: Other Devices
-  collapsed: false
   items:
   - title: Modem
     description: ISP Router Modem Combo
@@ -136,8 +133,6 @@ sections:
     iconType: img
     url: "/"
 - name: External Services
-  collapsed: true
-  cols: 1
   items:
   - title: DuckDNS
     description: Dynamic DNS for fixed public IP
@@ -170,8 +165,8 @@ sections:
     iconType: img
     url: https://myaccount.vodafone.co.uk/
 - name: External Utilities
-  collapsed: false
+  displayData:
-  cols: 1
+    collapsed: true
   items:
   - title: Public IP
     description: Check public IP and associated data

src/views/Home.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="home">
-    <Header />
+    <Header :pageInfo="getPageInfo(pageInfo)" />
     <FilterTile @user-is-searchin="searching" class="filter-container" />
     <div class="item-group-container">
       <ItemGroup
@@ -24,28 +24,28 @@ import conf from '../data/conf.yml';
 
 export default {
   name: 'home',
-  props: {
-    title: { default: 'Panel', type: String },
-    subtitle: { default: 'All your server management tools in one place', type: String },
-  },
   components: {
     Header,
     FilterTile,
     ItemGroup,
   },
   data: () => ({
+    pageInfo: conf.pageInfo,
     sections: conf.sections,
     searchTile: '',
   }),
   methods: {
+    /* Returns true if the user is currently searching */
     searching(searchTile) {
       this.searchTile = searchTile;
     },
+    /* Extracts the website 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);
       return domainPattern ? domainPattern[1] : '';
     },
+    /* Returns only the tiles that match the users search query */
     filterTiles(allTiles) {
       return allTiles.filter((tile) => {
         const {
@@ -58,9 +58,21 @@ export default {
           || this.getDomainFromUrl(url).includes(searchTerm);
       });
     },
+    /* Returns optional section display preferences if available */
     getDisplayData(section) {
       return !section.displayData ? {} : section.displayData;
     },
+    /* Returns either page info from the config, or default values */
+    getPageInfo(pageInfo) {
+      const defaults = { title: 'Demo', description: '' };
+      if (pageInfo) {
+        return {
+          title: pageInfo.title || defaults.title,
+          description: pageInfo.description || defaults.description,
+        };
+      }
+      return defaults;
+    },
   },
 };
 </script>
@@ -77,8 +89,9 @@ export default {
 /* Outside container wrapping the item groups*/
 .item-group-container {
   display: grid;
-  gap: 10px;
+  gap: 0.5rem;
 
+  /* Specify number of columns, based on screen size */
   @include phone {
     grid-template-columns: repeat(1, 1fr);
   }