Change how logo is hidden

src/components/Logo.vue

@@ -0,0 +1,15 @@
+<template>
+	<g-link class="logo" to="/">
+	  <span class="logo__text">
+	    {{ $static.metaData.siteName }}
+	  </span>
+	</g-link>
+</template>
+
+<static-query>
+query {
+  metaData {
+    siteName
+  }
+}
+</static-query>

src/layouts/Default.vue

@@ -3,13 +3,9 @@
 
     <header class="header">
       <div class="header__left">
-
+        <Logo v-if="showLogo" /> 
-        <g-link v-if="showLogo" class="logo" to="/">
-          <span class="logo__text">
-            {{ $static.metaData.siteName }}
-          </span>
-        </g-link>
       </div>
+      
       <div class="header__right">        
         <ToggleTheme />
       </div>
@@ -27,15 +23,8 @@
   </div>
 </template>
 
-<static-query>
-query {
-  metaData {
-    siteName
-  }
-}
-</static-query>
-
 <script>
+import Logo from '~/components/Logo.vue'
 import ToggleTheme from '~/components/ToggleTheme.vue'
 
 export default {
@@ -43,6 +32,7 @@ export default {
     showLogo: { default: true }
   },
   components: {
+    Logo,
     ToggleTheme
   }
 }

src/pages/Index.vue

@@ -1,8 +1,10 @@
 <template>
   <Layout :show-logo="false">
     
+    <!-- Author intro -->
     <Author :site-title="$static.metaData.siteName" />
     
+    <!-- List posts -->
     <div class="posts">
       <PostCard v-for="edge in $page.posts.edges" :key="edge.node.id" :post="edge.node"/>
     </div>

src/templates/Post.vue

@@ -50,7 +50,6 @@ query Post ($path: String!) {
 </page-query>
 
 <style lang="scss">
-
 .post-title {
 	padding: calc(var(--space) / 2) 0 var(--space);
 	text-align: center;
@@ -81,6 +80,7 @@ query Post ($path: String!) {
 
 .post-comments {
 	padding: calc(var(--space) / 2);
+	
 	&:empty {
 		display: none;
 	}

src/templates/Tag.vue

@@ -1,14 +1,10 @@
 <template>
   <Layout>
-    
-    <!-- This template shows a template archive -->
-
     <h1 class="tag-title text-center space-bottom">Tag: {{ $page.tag.title }}</h1>
 
     <div class="posts">
       <PostCard v-for="edge in $page.tag.belongsTo.edges" :key="edge.node.id" :post="edge.node"/>
     </div>
-
   </Layout>
 </template>