Skip to content

Commit 8c22021

Browse files
obulatobulat
authored
UseHead instead of components (#5378)
Signed-off-by: Olga Bulat <[email protected]>
1 parent b4a6654 commit 8c22021

File tree

2 files changed

+61
-86
lines changed

2 files changed

+61
-86
lines changed

‎frontend/src/app.vue

+27-38
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,6 @@ import { useDarkMode } from "~/composables/use-dark-mode"
1616
1717
import VSkipToContentButton from "~/components/VSkipToContentButton.vue"
1818
19-
const { updateBreakpoint } = useLayout()
20-
2119
const config = useRuntimeConfig()
2220
2321
const featureFlagStore = useFeatureFlagStore()
@@ -33,13 +31,14 @@ const headerHeight = computed(() => {
3331
})
3432
3533
const head = useLocaleHead({ dir: true, key: "id", seo: true })
36-
37-
useHead({
38-
bodyAttrs: { class: darkMode.cssClass },
39-
title: "Openly Licensed Images, Audio and More | Openverse",
40-
meta: commonMeta,
41-
link: [
34+
const htmlI18nProps = computed(() => ({
35+
lang: head.value?.htmlAttrs?.lang ?? "en",
36+
dir: head.value?.htmlAttrs?.dir ?? "ltr",
37+
}))
38+
const link = computed(() => {
39+
return [
4240
...favicons,
41+
...(head.value.link ?? []),
4342
{
4443
rel: "search",
4544
type: "application/opensearchdescription+xml",
@@ -55,7 +54,19 @@ useHead({
5554
href: config.public.apiUrl,
5655
crossorigin: "",
5756
},
58-
],
57+
]
58+
})
59+
60+
const meta = computed(() => {
61+
return [...commonMeta, ...(head.value.meta ?? [])]
62+
})
63+
64+
useHead({
65+
htmlAttrs: htmlI18nProps,
66+
bodyAttrs: { class: darkMode.cssClass, style: headerHeight },
67+
title: "Openly Licensed Images, Audio and More | Openverse",
68+
meta,
69+
link,
5970
})
6071
6172
/**
@@ -64,40 +75,18 @@ useHead({
6475
* and then a page is opened on SSR on a `lg` screen.
6576
*/
6677
onMounted(() => {
78+
const { updateBreakpoint } = useLayout()
6779
updateBreakpoint()
6880
featureFlagStore.syncAnalyticsWithLocalStorage()
6981
})
7082
</script>
7183

7284
<template>
73-
<div>
74-
<Html :lang="head.htmlAttrs?.lang" :dir="head.htmlAttrs?.dir">
75-
<Head>
76-
<template v-for="link in head.link" :key="link.id">
77-
<Link
78-
:id="link.id"
79-
:rel="link.rel"
80-
:href="link.href"
81-
:hreflang="link.hreflang"
82-
/>
83-
</template>
84-
<template v-for="meta in head.meta" :key="meta.id">
85-
<Meta
86-
:id="meta.id"
87-
:property="meta.property"
88-
:content="meta.content"
89-
/>
90-
</template>
91-
</Head>
92-
<Body :style="headerHeight">
93-
<div :class="[isDesktopLayout ? 'desktop' : 'mobile', breakpoint]">
94-
<VSkipToContentButton />
95-
<NuxtLayout>
96-
<NuxtPage />
97-
</NuxtLayout>
98-
<VGlobalAudioSection />
99-
</div>
100-
</Body>
101-
</Html>
85+
<div :class="[isDesktopLayout ? 'desktop' : 'mobile', breakpoint]">
86+
<VSkipToContentButton />
87+
<NuxtLayout>
88+
<NuxtPage />
89+
</NuxtLayout>
90+
<VGlobalAudioSection />
10291
</div>
10392
</template>

‎frontend/src/error.vue

+34-48
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,45 @@
11
<script setup lang="ts">
2-
import {
3-
onMounted,
4-
useHead,
5-
useLocaleHead,
6-
useRoute,
7-
useRuntimeConfig,
8-
} from "#imports"
2+
import { useHead, useLocaleHead, useRuntimeConfig } from "#imports"
3+
import { computed, onMounted } from "vue"
94
105
import { meta as commonMeta } from "#shared/constants/meta"
116
import { favicons } from "#shared/constants/favicons"
12-
import { useFeatureFlagStore } from "~/stores/feature-flag"
7+
import { useUiStore } from "~/stores/ui"
138
import { useDarkMode } from "~/composables/use-dark-mode"
149
import { useLayout } from "~/composables/use-layout"
1510
1611
import VFourOhFour from "~/components/VFourOhFour.vue"
1712
1813
defineProps(["error"])
1914
20-
const route = useRoute()
21-
const { updateBreakpoint } = useLayout()
2215
const config = useRuntimeConfig()
16+
const uiStore = useUiStore()
17+
18+
const headerHeight = computed(() => {
19+
return `--header-height: ${uiStore.headerHeight}px`
20+
})
2321
2422
/**
2523
* Update the breakpoint value in the cookie on mounted.
2624
* The Pinia state might become different from the cookie state if, for example, the cookies were saved when the screen was `sm`,
2725
* and then a page is opened on SSR on a `lg` screen.
2826
*/
2927
onMounted(() => {
28+
const { updateBreakpoint } = useLayout()
3029
updateBreakpoint()
31-
featureFlagStore.syncAnalyticsWithLocalStorage()
3230
})
3331
34-
/* Feature flag store */
35-
36-
const featureFlagStore = useFeatureFlagStore()
37-
featureFlagStore.initFromQuery(route.query)
38-
3932
const darkMode = useDarkMode()
40-
const head = useLocaleHead({ dir: true, key: "id", seo: true })
4133
42-
useHead({
43-
bodyAttrs: { class: darkMode.cssClass },
44-
title: "Openly Licensed Images, Audio and More | Openverse",
45-
meta: commonMeta,
46-
link: [
34+
const head = useLocaleHead({ dir: true, key: "id", seo: true })
35+
const htmlI18nProps = computed(() => ({
36+
lang: head.value?.htmlAttrs?.lang ?? "en",
37+
dir: head.value?.htmlAttrs?.dir ?? "ltr",
38+
}))
39+
const link = computed(() => {
40+
return [
4741
...favicons,
42+
...(head.value.link ?? []),
4843
{
4944
rel: "search",
5045
type: "application/opensearchdescription+xml",
@@ -60,37 +55,28 @@ useHead({
6055
href: config.public.apiUrl,
6156
crossorigin: "",
6257
},
63-
],
58+
]
59+
})
60+
61+
const meta = computed(() => {
62+
return [...commonMeta, ...(head.value.meta ?? [])]
63+
})
64+
65+
useHead({
66+
htmlAttrs: htmlI18nProps,
67+
bodyAttrs: { class: darkMode.cssClass, style: headerHeight },
68+
title: "Openly Licensed Images, Audio and More | Openverse",
69+
meta,
70+
link,
6471
})
6572
</script>
6673

6774
<template>
6875
<div>
69-
<Html :lang="head.htmlAttrs?.lang" :dir="head.htmlAttrs?.dir">
70-
<Head>
71-
<template v-for="link in head.link" :key="link.id">
72-
<Link
73-
:id="link.id"
74-
:rel="link.rel"
75-
:href="link.href"
76-
:hreflang="link.hreflang"
77-
/>
78-
</template>
79-
<template v-for="meta in head.meta" :key="meta.id">
80-
<Meta
81-
:id="meta.id"
82-
:property="meta.property"
83-
:content="meta.content"
84-
/>
85-
</template>
86-
</Head>
87-
<Body>
88-
<VSkipToContentButton />
89-
<NuxtLayout name="default">
90-
<VFourOhFour class="flex-grow" :error="error" />
91-
</NuxtLayout>
92-
</Body>
93-
</Html>
76+
<VSkipToContentButton />
77+
<NuxtLayout name="default">
78+
<VFourOhFour class="flex-grow" :error="error" />
79+
</NuxtLayout>
9480
</div>
9581
</template>
9682

0 commit comments

Comments
 (0)