Update Navbar and Navigation to pull data from Ghost

This is instead of using data/admin.yml

src/components/Navbar.vue

@@ -2,12 +2,18 @@
   <nav class="site-nav">
     <div class="site-nav-left">
       <div v-if="logo">
-        <a v-if="Admin.site.logo" class="site-nav-logo" :href="Admin.site.url">
-          <img :src="Admin.site.logo" :alt="Admin.site.title">
+        <a v-if="$static.metadata.ghost.logo"
+        class="site-nav-logo"
+        :href="$static.metadata.siteUrl|$static.metadata.ghost.url">
+          <img :src="$static.metadata.ghost.logo"
+          :alt="$static.metadata.siteName|$static.metadata.ghost.title">
+        </a>
+        <a v-else class="site-nav-logo"
+        :href="$static.metadata.siteUrl|$static.metadata.ghost.url">
+          {{ $static.metadata.siteName.title|$static.metadata.ghost.title }}
         </a>
-        <a v-else class="site-nav-logo" :href="Admin.site.url">{{ Admin.site.title }}</a>
       </div>
-      <Navigation v-if="Admin.site.navigation"/>
+      <Navigation v-if="$static.metadata.ghost.navigation"/>
     </div>
     <div class="site-nav-right">
       <div class="social-links">
@@ -88,3 +94,23 @@ export default {
 	.social-link > svg
 		width: 1.8rem
 </style>
+
+<static-query>
+  query Admin {
+    metadata {
+      siteName
+      siteDescription
+      siteUrl
+      ghost {
+        title
+        url
+        logo
+        description
+        navigation {
+          url
+          label
+        }
+      }
+    }
+  }
+</static-query>

src/components/Navigation.vue

@@ -1,19 +1,20 @@
 <template>
   <ul class="nav" role="menu">
-    <li v-for="item in Admin.nav_home" :key="item.title" role="menuitem">
-      <a :href="item.link">{{ item.title }}</a>
+    <li v-for="item in $static.metadata.ghost.navigation" :key="item.url" role="menuitem">
+      <a :href="item.url">{{ item.label }}</a>
     </li>
   </ul>
 </template>
 
-<script>
-  import Admin from '../../data/admin.yml'
-
-  export default {
-    computed: {
-      Admin() {
-        return Admin
+<static-query>
+  query Navigation {
+    metadata {
+      ghost {
+        navigation {
+          url
+          label
         }
       }
     }
-</script>
+  }
+</static-query>