refactor

MixDrinks · Sep 26, 2024 · 8ee7139 · 8ee7139
1 parent a10eceb
commit 8ee7139
Show file tree

Hide file tree

Showing 16 changed files with 243 additions and 289 deletions.
diff --git a/.prettierrc b/.prettierrc
@@ -1,5 +1,5 @@
 {
-    "trailingComma": "es6",
+    "trailingComma": "es5",
     "tabWidth": 4,
     "semi": false,
     "singleQuote": true

diff --git a/components/cocktails/CocktailPage.vue b/components/cocktails/CocktailPage.vue
@@ -144,8 +144,9 @@ import Rating from './Rating.vue'
 import IconBtn from './../UI/IconBtn.vue'
 import CocktailComponents from './CocktailComponents.vue'
 import CocktailRecomendation from './CocktailRecomendation.vue'
-import { computed, onBeforeUnmount, toRefs, defineComponent, unref } from 'vue'
-import { useHead, useRoute } from 'nuxt/app'
+import { onBeforeUnmount, toRefs, defineComponent, unref } from 'vue'
+import { head } from '~~/utils/head'
+import { schemaRecipe } from '~~/utils/schemaRecipe'
 
 export default defineComponent({
     name: 'CocktailPage',
@@ -157,7 +158,6 @@ export default defineComponent({
         },
     },
     setup(props) {
-        const route = useRoute()
         const { cocktail } = toRefs(props)
         async function updateVisit() {
             return await $fetch(
@@ -173,95 +173,31 @@ export default defineComponent({
         onBeforeUnmount(() => {
             updateVisit()
         })
-        const author = {
-            '@type': 'Organization',
-            name: 'MixDrinks',
-        }
-        const canonical = route.fullPath
-        const title = `Коктейль ${
-            unref(cocktail).name
-        } 🍹 приготування в домашніх умовах за рецептом`
-        const description = `Як приготувати коктейль ${
-            unref(cocktail).name
-        } 🍹 в домашніх умовах, всі інгрідієнти які вам потрібні та рецепт для коктейля наведені на сторінці!`
-        const recipeIngredient = unref(cocktail).goods.map((good) => good.name)
-        const rating = computed(() => {
-            if (unref(cocktail).rating) {
-                return {
-                    aggregateRating: {
-                        '@type': 'AggregateRating',
-                        ratingValue: unref(cocktail).rating,
-                        ratingCount: unref(cocktail).ratingCount,
-                        worstRating: 1,
-                        bestRating: 5,
-                    },
-                }
-            }
-        })
-        const ogImage = unref(cocktail).meta.ogImage
-        const keywords = unref(cocktail).tags.map((tag) => tag.name)
-        const schemaRecipe = computed(() => {
-            return {
-                '@context': 'https://schema.org',
-                '@type': 'Recipe',
-                name: unref(cocktail).name,
-                author: author,
-                description: description,
-                image: ogImage,
-                recipeIngredient: recipeIngredient,
-                recipeInstructions: unref(cocktail).receipt,
-                keywords: keywords,
-                recipeCategory: 'Коктейлі',
-                prepTime: 'PT10M',
-                cookTime: 'PT10M',
-                ...unref(rating),
-            }
-        })
-        useHead({
-            title: title,
-            link: [{ rel: 'canonical', href: canonical }],
-            meta: [
-                {
-                    hid: 'description',
-                    name: 'description',
-                    content: description,
-                },
-                {
-                    hid: 'og:title',
-                    name: 'og:title',
-                    content: title,
-                },
-                {
-                    hid: 'og:description',
-                    property: 'og:description',
-                    content: description,
-                },
-                {
-                    hid: 'og:url',
-                    property: 'og:url',
-                    content: canonical,
-                },
-                {
-                    hid: 'og:image',
-                    property: 'og:image',
-                    content: ogImage,
-                },
-                { name: 'robots', content: 'index, follow' },
-            ],
-            script: [
-                {
-                    type: 'application/ld+json',
-                    children: JSON.stringify(unref(schemaRecipe)),
-                },
-                {
-                    async: true,
-                    src: 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-9033785625371866',
-                    crossorigin: 'anonymous',
-                },
-                {
-                    InnerHTML: `;(adsbygoogle = window.adsbygoogle || []).push({})`,
-                },
-            ],
+
+        const headTitle = `Коктейль ${unref(cocktail).name} 🍹 приготування в домашніх умовах за рецептом`
+        const headDescription = `Як приготувати коктейль ${unref(cocktail).name} 🍹 в домашніх умовах, всі інгрідієнти які вам потрібні та рецепт для коктейля наведені на сторінці!`
+
+        const scripts = [
+            {
+                type: 'application/ld+json',
+                children: schemaRecipe(unref(cocktail), headDescription),
+            },
+            {
+                async: true,
+                src: 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-9033785625371866',
+                crossorigin: 'anonymous',
+            },
+            {
+                InnerHTML: `;(adsbygoogle = window.adsbygoogle || []).push({})`,
+            },
+        ]
+
+        head({
+            title: headTitle,
+            description: headDescription,
+            indexPage: true,
+            scripts: scripts,
+            image: unref(cocktail).meta.ogImage
         })
     },
 })

diff --git a/components/cocktails/CocktailsPage.vue b/components/cocktails/CocktailsPage.vue
@@ -2,15 +2,15 @@
     <div class="cocktails">
         <div class="cocktails__header cocktails-header">
             <h1 class="cocktails-header__title">
-                {{ title }}
+                {{ pageTitle }}
             </h1>
             <Sorting class="cocktails-header__sorting" />
         </div>
         <div class="cocktails__body cocktails-body">
             <FilterList
                 class="cocktails-body__filter"
                 :filterList="allFilters"
-                :totalCount="cocktailsFull.totalCount"
+                :allCocktailsNumber="cocktailsFull.totalCount"
                 :futureCounts="cocktailsFull.futureCounts"
             />
             <div class="cocktails-body__wrapper">
@@ -53,7 +53,7 @@ import Pagination from '../dump/Pagination.vue'
 import Sorting from './Sorting.vue'
 import { onBeforeMount, defineComponent, computed, toRefs, unref } from 'vue'
 import { store } from '~~/store/filter'
-import { useHead, useRoute } from 'nuxt/app'
+import { head } from '~~/utils/head'
 export default defineComponent({
     name: 'CocktailsPage',
     components: { FilterList, Pagination, CocktailsList, Sorting },
@@ -69,91 +69,52 @@ export default defineComponent({
         },
     },
     setup(props, { emit }) {
-        const route = useRoute()
         const { allFilters, cocktailsFull } = toRefs(props)
-        const title = computed(() => {
-            return unref(cocktailsFull).description
-                ? unref(cocktailsFull).description
-                : 'Коктейлі'
-        })
-        const checkLength = computed(() => {
-            return unref(cocktailsFull).cocktails.length > 12
-        })
-        const cocktailsFirst = computed(() => {
-            return unref(checkLength)
+        
+        const checkLength = computed(() => unref(cocktailsFull).cocktails.length > 12)
+        const cocktailsFirst = computed(() => unref(checkLength)
                 ? unref(cocktailsFull).cocktails.slice(0, 12)
-                : unref(cocktailsFull).cocktails
-        })
-        const cocktailsSecond = computed(() => {
-            return unref(checkLength)
+                : unref(cocktailsFull).cocktails)
+        const cocktailsSecond = computed(() => unref(checkLength)
                 ? unref(cocktailsFull).cocktails.slice(12)
-                : []
-        })
+                : [])
+
+
         const setOpenList = () =>
             store.actions.setFiltersIsOpenList(unref(allFilters))
 
         onBeforeMount(() => {
             setOpenList()
         })
 
-        const canonical = computed(() => route.path)
+        const pageTitle = computed(() => unref(cocktailsFull).description
+                ? unref(cocktailsFull).description
+                : 'Коктейлі')
 
-        const indexPage = computed(() =>
-            unref(cocktailsFull).isAddToIndex
-                ? 'index, follow'
-                : 'noindex, nofollow'
-        )
-        const description = computed(() => {
-            return unref(cocktailsFull).description
-                ? `${
-                      unref(cocktailsFull).description
-                  } 🍸 з фото та рецептами, оберий який подобаєтья тобі`
-                : 'Коктейлі алкогольні 🍸 та безалкогольні 🍹 з фото та рецептами, оберий який подобаєтья тобі'
-        })
-        const metaTitle = computed(() => {
-            return unref(cocktailsFull).description
-                ? `${
-                      unref(cocktailsFull).description
-                  } 🍹 та рецепти до них в домашніх умовах`
-                : 'Колекція коктейлів 🍹 та рецептів до них в домашніх умовах'
-        })
+        const scripts = [
+            {
+                async: true,
+                src: 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-9033785625371866',
+                crossorigin: 'anonymous',
+            },
+            {
+                InnerHTML: `;(adsbygoogle = window.adsbygoogle || []).push({})`,
+            },
+        ]
+
+        const headTitle = unref(cocktailsFull).description
+            ? `${unref(cocktailsFull).description} 🍹 та рецепти до них в домашніх умовах`
+            : 'Колекція коктейлів 🍹 та рецептів до них в домашніх умовах'
+
+        const headDescription = unref(cocktailsFull).description
+            ? `${unref(cocktailsFull).description} 🍸 з фото та рецептами, оберий який подобаєтья тобі`
+            : 'Коктейлі алкогольні 🍸 та безалкогольні 🍹 з фото та рецептами, оберий який подобаєтья тобі'
 
-        useHead({
-            title: unref(metaTitle),
-            link: [{ rel: 'canonical', href: unref(canonical) }],
-            meta: [
-                {
-                    hid: 'description',
-                    name: 'description',
-                    content: unref(description),
-                },
-                {
-                    hid: 'og:title',
-                    name: 'og:title',
-                    content: unref(metaTitle),
-                },
-                {
-                    hid: 'og:description',
-                    property: 'og:description',
-                    content: unref(description),
-                },
-                {
-                    hid: 'og:url',
-                    property: 'og:url',
-                    content: `${unref(canonical)}`,
-                },
-                { name: 'robots', content: unref(indexPage) },
-            ],
-            script: [
-                {
-                    async: true,
-                    src: 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-9033785625371866',
-                    crossorigin: 'anonymous',
-                },
-                {
-                    InnerHTML: `;(adsbygoogle = window.adsbygoogle || []).push({})`,
-                },
-            ],
+        head({
+            title: headTitle,
+            description: headDescription,
+            indexPage: unref(cocktailsFull).isAddToIndex,
+            scripts: scripts
         })
 
         const loadMore = (newQuery) => {
@@ -164,7 +125,7 @@ export default defineComponent({
             cocktailsFirst,
             cocktailsSecond,
             checkLength,
-            title,
+            pageTitle,
             loadMore,
         }
     },

diff --git a/components/cocktails/FilterList.vue b/components/cocktails/FilterList.vue
@@ -5,7 +5,7 @@
                 <div class="filters-header__title filters-header-title">
                     Фільтри
                     <span class="filters-header-title__count">
-                        {{ totalCount }}
+                        {{ allCocktailsNumber }}
                     </span>
                 </div>
                 <transition name="fate-in" appear>
@@ -16,6 +16,7 @@
                         type="short"
                         icon="/img/icons/trash.svg"
                         :href="`${clearFilterUrl}`"
+                        @click="changeFilterIsOpen"
                     >
                         Відмінити всі фільтри
                     </IconBtn>
@@ -92,7 +93,7 @@ export default defineComponent({
             type: Array,
             required: true,
         },
-        totalCount: {
+        allCocktailsNumber: {
             type: Number,
             default: 0,
         },