Update Navbar and Navigation to pull data from Ghost

This is instead of using data/admin.yml
This commit is contained in:
Hippo 2019-12-18 19:24:46 +05:30
parent e264253c16
commit 4dcafea516
2 changed files with 41 additions and 14 deletions

View file

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

View file

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