From 891ae6b4c66114824774b395d717d064a0c2988c Mon Sep 17 00:00:00 2001
From: Jeffrey <jeffrey@1nteger.nl>
Date: Wed, 20 Mar 2024 08:31:22 +0100
Subject: [PATCH] fix glitch footer on mobile

---
 components/Sitemap.vue | 16 +++++++---------
 pages/news/[slug].vue  | 24 ++++++++++++------------
 2 files changed, 19 insertions(+), 21 deletions(-)

diff --git a/components/Sitemap.vue b/components/Sitemap.vue
index 7836f1e..c682103 100644
--- a/components/Sitemap.vue
+++ b/components/Sitemap.vue
@@ -17,13 +17,6 @@
       <div class="column is-full-mobile is-narrow">
         <div class="menu social-menu is-flex is-flex-wrap-wrap">
           <p class="menu-label">SOCIALS</p>
-          <ul class="menu-list">
-            <li>
-              <a href="https://github.com/effectai" target="_blank"
-                ><i class="fab fa-github"></i> GitHub</a
-              >
-            </li>
-          </ul>
           <ul class="menu-list">
             <li>
               <a href="https://twitter.com/effectaix" target="_blank"
@@ -47,8 +40,7 @@
         <div class="columns">
           <div
             class="column is-half is-flex is-align-items-start is-justify-content-center"
-          >
-          </div>
+          ></div>
           <div
             class="column is-half is-flex is-align-items-start is-justify-content-center"
           >
@@ -109,6 +101,12 @@
 
 .social-menu {
   flex-direction: column;
+
+  li a {
+    display: flex;
+    gap: 5px;
+    align-items: center;
+  }
 }
 
 @media all and (max-width: 770px) {
diff --git a/pages/news/[slug].vue b/pages/news/[slug].vue
index c11bc81..090d0cc 100644
--- a/pages/news/[slug].vue
+++ b/pages/news/[slug].vue
@@ -1,12 +1,12 @@
 <template>
   <main id="nuxt-news">
-    <ContentRenderer v-if="article" :value="article">
+    <ContentRenderer v-if="data" :value="data">
       <div class="has-background-smoke">
         <div class="container blog-padding">
           <div class="columns is-vcentered">
             <div class="column is-7">
               <h1 class="is-size-1 has-text-primary title">
-                {{ article.title }}
+                {{ data.title }}
               </h1>
 
               <div class="is-flex is-align-items-center">
@@ -16,12 +16,12 @@
                 />
               </div>
               <span class="is-size-5 mt-5 is-block">
-                Posted on {{ article.created }} by {{ article.author }}
+                Posted on {{ data.created }} by {{ data.author }}
               </span>
             </div>
             <div class="column p-0">
               <NuxtPicture
-                :src="article.image.src"
+                :src="data.image.src"
                 class="image is-5by3 has-rounded-corners"
               ></NuxtPicture>
             </div>
@@ -31,7 +31,7 @@
       <div class="container">
         <div class="columns is-gapless">
           <div class="column content is-medium" id="content">
-            <ContentRendererMarkdown :value="article" class="blog-padding" />
+            <ContentRendererMarkdown :value="data" class="blog-padding" />
           </div>
         </div>
       </div>
@@ -45,16 +45,16 @@ import { useRoute } from "#vue-router";
 import type { News } from "~/types/news";
 
 const route = useRoute();
-const slug = route.params.slug;
+const slug = route.params.slug as string;
 
-const article = ref<News | null>(null);
-
-article.value = await queryContent<News>(`/news/${slug}`).findOne();
+const { data } = await useAsyncData(slug, () =>
+  queryContent<News>(`/news/${slug}`).findOne()
+);
 
 useSeoMeta({
-  title: article.value?.title,
-  description: article.value?.description,
-  ogImage: article.value?.image.src,
+  title: data.value?.title,
+  description: data.value?.description,
+  ogImage: data.value?.image.src,
 });
 </script>