Browse Source

test meta tags

Olivier Massot 1 year ago
parent
commit
0a7f78ef3d
1 changed files with 18 additions and 33 deletions
  1. 18 33
      components/News/Details.client.vue

+ 18 - 33
components/News/Details.client.vue

@@ -16,11 +16,11 @@
 
       <div v-if="newsItem">
         <div class="news">
-          <!--          <CommonMeta-->
-          <!--            :title="() => newsItem.title!"-->
-          <!--            :description="() => newsItem.leadText!"-->
-          <!--            :image="() => getImageUrl(newsItem.attachment)"-->
-          <!--          />-->
+          <CommonMeta
+            :title="() => newsItem.title!"
+            :description="() => newsItem.leadText!"
+            :image="() => getImageUrl(newsItem.attachment)"
+          />
 
           <v-row class="center-90 mb-12">
             <v-col cols="12" md="6">
@@ -96,12 +96,11 @@ import { fr } from 'date-fns/locale'
 import type { ComputedRef } from 'vue'
 import News from '~/models/Maestro/News'
 import { useEntityFetch } from '~/composables/data/useEntityFetch'
-import { useEntityManager } from '~/composables/data/useEntityManager'
 
 const { mdAndUp, smAndDown } = useDisplay()
 
 const route = useRoute()
-// const { fetch } = useEntityFetch()
+const { fetch } = useEntityFetch()
 const config = useRuntimeConfig()
 
 const newsId: number = parseInt(route.params.id as string)
@@ -110,15 +109,20 @@ if (!newsId || isNaN(newsId)) {
 }
 
 // @ts-expect-error Until we can fix the typing of fetch
-// const { data: newsItem } = (await fetch(News, newsId)) as Ref<News>
+const { data: newsItem, pending } = (await fetch(News, newsId)) as Ref<News>
 
-const { em } = useEntityManager()
+function sleep(time: number) {
+  return new Promise(resolve => setTimeout(resolve, time))
+}
 
-const { data: newsItem } = await useAsyncData(
-  'news_' + newsId,
-  async () => await em.fetch(News, newsId, true),
-  { lazy: false }
-)
+onBeforeMount(async () => {
+  console.log(newsItem)
+  while (pending.value) {
+    console.log('sleep')
+    await sleep(100)
+  }
+  console.log(newsItem)
+})
 
 const getImageUrl = (attachment: string | null): string | null => {
   if (!attachment) {
@@ -145,25 +149,6 @@ const formattedPublicationDate: ComputedRef<string> = computed(() => {
 
   return formattedPublicationDate
 })
-
-watch(newsItem, () => {
-  if (!newsItem.value) {
-    return
-  }
-  useSeoMeta({
-    title: newsItem.value.title!,
-    ogTitle: newsItem.value.title!,
-    twitterTitle: newsItem.value.title!,
-    description: newsItem.value.leadText!,
-    ogDescription: newsItem.value.leadText!,
-    twitterDescription: newsItem.value.leadText!,
-    ogImage: () => getImageUrl(newsItem.value.attachment),
-    twitterImage: () => getImageUrl(newsItem.value.attachment),
-    twitterCard: 'summary_large_image',
-    ogType: 'website',
-    ogLocale: 'fr_FR',
-  })
-})
 </script>
 
 <style scoped>