From baa47d3a9a636e071e1aad84ea8adda110cf9fe8 Mon Sep 17 00:00:00 2001
From: Kseninia Mikhaylova <k.mikhailova@svs-tech.pro>
Date: Wed, 19 Mar 2025 09:23:03 +0300
Subject: [PATCH] seo to module

---
 components/seo.vue | 14 ++++++++
 pages/index.vue    | 86 +++++++++++-----------------------------------
 pages/qr.vue       | 13 ++++---
 3 files changed, 42 insertions(+), 71 deletions(-)
 create mode 100644 components/seo.vue

diff --git a/components/seo.vue b/components/seo.vue
new file mode 100644
index 0000000..451081e
--- /dev/null
+++ b/components/seo.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const { fetchData } = useApiFetch()
+const config = useRuntimeConfig()
+const { data: seo } = await fetchData<Seo[]>(`seo`)
+import og_img from '/og_img.png'
+
+useSeoMeta({
+    title: seo.value && seo.value[0].title,
+    ogTitle: seo.value && seo.value[0].title,
+    description: seo.value && seo.value[0].content,
+    ogDescription: seo.value && seo.value[0].content,
+    ogImage: config.public.baseUrl + og_img
+})
+</script>
\ No newline at end of file
diff --git a/pages/index.vue b/pages/index.vue
index 66335ae..4016fdc 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -5,21 +5,10 @@ const imgBase = config.public.imgBase
 
 import { marked } from 'marked'
 
-import og_img from '/og_img.png'
-
-const { data: seo } = await fetchData<Seo[]>(`seo`)
 const { data: menu_raw, status: menu_status } = await fetchData<Menu[]>(`menu`)
 const { data: review } = await fetchData<Review[]>(`review`)
 const { data: calc_data } = await fetchData<CalcItem[]>(`calculator`)
 
-useSeoMeta({
-  title: seo.value && seo.value[0].title,
-  ogTitle: seo.value && seo.value[0].title,
-  description: seo.value && seo.value[0].content,
-  ogDescription: seo.value && seo.value[0].content,
-  ogImage: config.public.baseUrl + og_img
-})
-
 const pages = computed(() => {
   const menu = menu_raw.value?.find(el => el.type == 1)
   return (menu?.pages || []).sort((a, b) => a.order - b.order)
@@ -34,14 +23,15 @@ const delivery = computed(() =>
 
 const setCalcData = (txt: string) => {
   let c = txt
-  ;(calc_data.value || []).map(item => {
-    c = c.replaceAll(`[${item.slug}]`, roubleSign.format(item.base))
-  })
+    ; (calc_data.value || []).map(item => {
+      c = c.replaceAll(`[${item.slug}]`, roubleSign.format(item.base))
+    })
   return marked.parse(c)
 }
 </script>
 <template>
   <div>
+    <Seo />
     <template v-for="page in pages" :key="page.slug">
       <template v-if="page.slug == 'about'">
         <div class="siteblock bg-white" :id="page.slug">
@@ -53,42 +43,24 @@ const setCalcData = (txt: string) => {
               </div>
             </div>
             <div class="siteblock-image">
-              <NuxtImg
-                :src="[imgBase, page.image].join('/')"
-                :alt="page.title"
-                title=""
-                format="webp"
-              />
+              <NuxtImg :src="[imgBase, page.image].join('/')" :alt="page.title" title="" format="webp" />
             </div>
           </div>
         </div>
       </template>
       <template v-if="page.slug == 'review'">
-        <div
-          class="siteblock siteblock_imgbg bg-slate-500"
-          :style="[
-            { backgroundImage: `url(${[imgBase, page.image].join('/')})` }
-          ]"
-        >
-          <NuxtImg
-            :src="[imgBase, page.image].join('/')"
-            :alt="page.title"
-            format="webp"
-            loading="lazy"
-          />
+        <div class="siteblock siteblock_imgbg bg-slate-500" :style="[
+          { backgroundImage: `url(${[imgBase, page.image].join('/')})` }
+        ]">
+          <NuxtImg :src="[imgBase, page.image].join('/')" :alt="page.title" format="webp" loading="lazy" />
         </div>
         <div class="siteblock bg-white">
           <div class="container" :id="page.slug">
             <template v-for="item in review?.slice(0, 3)">
               <div class="review">
                 <div class="review-image">
-                  <NuxtImg
-                    :src="[imgBase, item.image].join('/')"
-                    :alt="item.text"
-                    title=""
-                    format="webp"
-                    loading="lazy"
-                  />
+                  <NuxtImg :src="[imgBase, item.image].join('/')" :alt="item.text" title="" format="webp"
+                    loading="lazy" />
                 </div>
                 <div class="review-content">
                   {{ item.comment }}
@@ -114,17 +86,10 @@ const setCalcData = (txt: string) => {
         </div>
       </template>
       <template v-if="page.slug == 'more'">
-        <div
-          class="siteblock siteblock_imgbg bg-slate-500"
-          :style="[
-            { backgroundImage: `url(${[imgBase, page.image].join('/')})` }
-          ]"
-        >
-          <NuxtImg
-            :src="[imgBase, page.image].join('/')"
-            format="webp"
-            loading="lazy"
-          />
+        <div class="siteblock siteblock_imgbg bg-slate-500" :style="[
+          { backgroundImage: `url(${[imgBase, page.image].join('/')})` }
+        ]">
+          <NuxtImg :src="[imgBase, page.image].join('/')" format="webp" loading="lazy" />
         </div>
         <div class="siteblock bg-white" :id="page.slug">
           <div class="container gap-4">
@@ -138,23 +103,12 @@ const setCalcData = (txt: string) => {
         </div>
       </template>
       <template v-if="page.slug == 'delivery'">
-        <div
-          class="siteblock siteblock_imgbg bg-slate-500"
-          :style="[
-            { backgroundImage: `url(${[imgBase, page.image].join('/')})` }
-          ]"
-        >
-          <NuxtImg
-            :src="[imgBase, page.image].join('/')"
-            format="webp"
-            loading="lazy"
-          />
+        <div class="siteblock siteblock_imgbg bg-slate-500" :style="[
+          { backgroundImage: `url(${[imgBase, page.image].join('/')})` }
+        ]">
+          <NuxtImg :src="[imgBase, page.image].join('/')" format="webp" loading="lazy" />
         </div>
-        <div
-          class="siteblock bg-white siteblock_content"
-          :id="page.slug"
-          v-if="delivery"
-        >
+        <div class="siteblock bg-white siteblock_content" :id="page.slug" v-if="delivery">
           <div class="container">
             <div class="prose col-span-12 xl:col-span-6">
               <span v-html="delivery[0]"></span>
diff --git a/pages/qr.vue b/pages/qr.vue
index 5be7920..749b23e 100644
--- a/pages/qr.vue
+++ b/pages/qr.vue
@@ -26,11 +26,14 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="siteblock">
-    <div class="container text-center">
-      <h1 class="siteblock-title">QR-КОД</h1>
-      <div class="col-span-full">
-        <canvas class="border mx-auto" ref="qrCanvas"></canvas>
+  <div>
+    <Seo />
+    <div class="siteblock">
+      <div class="container text-center">
+        <h1 class="siteblock-title">QR-КОД</h1>
+        <div class="col-span-full">
+          <canvas class="border mx-auto" ref="qrCanvas"></canvas>
+        </div>
       </div>
     </div>
   </div>