From 0a321c784549302b24790d0fc7633e0307c516ba Mon Sep 17 00:00:00 2001 From: MeesoPost <100311542+MeesoPost@users.noreply.github.com> Date: Thu, 8 Aug 2024 17:11:17 +0200 Subject: [PATCH 1/2] edited layout's to have favicons --- .../app/[locale]/(nestedNavLayout)/layout.tsx | 230 +++++++++++++----- .../src/app/[locale]/(rootLayout)/layout.tsx | 29 +++ 2 files changed, 203 insertions(+), 56 deletions(-) diff --git a/apps/vth-frontend/src/app/[locale]/(nestedNavLayout)/layout.tsx b/apps/vth-frontend/src/app/[locale]/(nestedNavLayout)/layout.tsx index 8a242e11b..0fa2e98fc 100644 --- a/apps/vth-frontend/src/app/[locale]/(nestedNavLayout)/layout.tsx +++ b/apps/vth-frontend/src/app/[locale]/(nestedNavLayout)/layout.tsx @@ -1,18 +1,42 @@ import classnames from 'classnames'; import { dir } from 'i18next'; import type { Metadata } from 'next'; -import { draftMode } from 'next/headers'; +import { draftMode, headers } from 'next/headers'; +import Link from 'next/link'; import Script from 'next/script'; import React from 'react'; -import { useTranslation } from '@/app/i18n'; import { QueryClientProvider } from '@/client'; -import { Footer, FooterData, Page, PreviewAlert, Surface } from '@/components'; +import { + Footer, + FooterData, + Grid, + GridCell, + Logo, + LogoImage, + Navigation, + NavigationListType, + Page, + PageContent, + PageHeader, + PreviewAlert, + SkipLink, + Surface, +} from '@/components'; +// import { ClientLanguageSwitcher } from '@/components/ClientLanguageSwitcher'; import '@utrecht/component-library-css'; import '@utrecht/design-tokens/dist/index.css'; +import { Main } from '@/components/Main'; +import { SearchBar } from '@/components/SearchBar'; import 'react-loading-skeleton/dist/skeleton.css'; -import { Editoria11y } from '@/components/Editoria11y'; +import { GET_OPEN_FORMS_TEMPLATE } from '@/query'; +import { buildAlternateLinks, createStrapiURL, fetchData } from '@/util'; +import { ComponentComponentsUtrechtNavigation, GetTemplateDataQuery } from '../../../../gql/graphql'; +import { getLiveSuggestions, onSearchSubmitAction } from '../../actions'; +import { useTranslation } from '../../i18n/index'; +import { languages } from '../../i18n/settings'; import '@frameless/ui/dist/bundle.css'; import '../../../styles/globals.css'; +import '../../../styles/openforms.scss'; interface LayoutProps { children: React.ReactNode; @@ -30,17 +54,71 @@ type Params = { export async function generateMetadata({ params: { locale } }: Params): Promise { // eslint-disable-next-line react-hooks/rules-of-hooks const { t } = await useTranslation(locale, 'common'); + const url = `${process.env.FRONTEND_PUBLIC_URL}/${locale}`; return { title: { template: `%s | ${t('website-setting.website-name')}`, default: `${t('website-setting.website-name')}`, }, + icons: { + icon: [ + { + url: '/favicon/favicon.ico', + }, + { + url: '/favicon/android-chrome-192x192.png', + type: 'image/png', + sizes: '192x192', + }, + { + url: '/favicon/android-chrome-512x512.png', + type: 'image/png', + sizes: '512x512', + }, + { + url: '/favicon/favicon-32x32.png', + type: 'image/png', + sizes: '32x32', + }, + { + url: '/favicon/favicon-16x16.png', + type: 'image/png', + sizes: '16x16', + }, + ], + apple: [{ url: '/favicon/apple-touch-icon.png', type: 'image/png', sizes: '180x180' }], + }, + manifest: '/favicon/site.webmanifest', + openGraph: { + type: 'website', + locale, + siteName: t('website-setting.website-name') || 'Gemeente Utrecht', + countryName: 'NL', + url, + }, + metadataBase: new URL(process.env.FRONTEND_PUBLIC_URL || 'http://localhost:3000'), + alternates: { + canonical: `/${locale}`, + languages: { + ...buildAlternateLinks({ languages }), + }, + }, }; } const RootLayout = async ({ children, params: { locale } }: LayoutProps) => { + const nonce = headers().get('x-nonce') || ''; const { t } = await useTranslation(locale, ['layout', 'common']); const { isEnabled } = draftMode(); + const { data } = await fetchData<{ data: GetTemplateDataQuery }>({ + url: createStrapiURL(), + query: GET_OPEN_FORMS_TEMPLATE, + variables: { locale }, + }); + + const navigationData = data.pdcTemplate?.data?.attributes?.sections?.find( + (component) => component?.__typename === 'ComponentComponentsUtrechtNavigation', + ) as ComponentComponentsUtrechtNavigation; const footerData = { title: t('footer.title'), @@ -61,55 +139,23 @@ const RootLayout = async ({ children, params: { locale } }: LayoutProps) => { href: t('footer.list.listItem.0.link.2.href'), textContent: t('footer.list.listItem.0.link.2.textContent'), }, - { - href: t('footer.list.listItem.0.link.3.href'), - textContent: t('footer.list.listItem.0.link.3.textContent'), - }, ], }, ], }, address: t('footer.address'), - socialMediaList: { - link: [ - { - href: t('footer.socialMediaList.link.0.href'), - icon: t('footer.socialMediaList.link.0.icon'), - textContent: t('footer.socialMediaList.link.0.textContent'), - }, - { - href: t('footer.socialMediaList.link.1.href'), - icon: t('footer.socialMediaList.link.1.icon'), - textContent: t('footer.socialMediaList.link.1.textContent'), - }, - { - href: t('footer.socialMediaList.link.2.href'), - icon: t('footer.socialMediaList.link.2.icon'), - textContent: t('footer.socialMediaList.link.2.textContent'), - }, - { - href: t('footer.socialMediaList.link.3.href'), - icon: t('footer.socialMediaList.link.3.icon'), - textContent: t('footer.socialMediaList.link.3.textContent'), - }, - { - href: t('footer.socialMediaList.link.4.href'), - icon: t('footer.socialMediaList.link.4.icon'), - textContent: t('footer.socialMediaList.link.4.textContent'), - }, - { - href: t('footer.socialMediaList.link.5.href'), - icon: t('footer.socialMediaList.link.5.icon'), - textContent: t('footer.socialMediaList.link.5.textContent'), - }, - ], - }, }; return ( {isEnabled && ( @@ -123,22 +169,94 @@ const RootLayout = async ({ children, params: { locale } }: LayoutProps) => { )} - - {isEnabled && } - {children} + + + {t('components.skip-link.main')} + {t('components.skip-link.menu')} + {t('components.skip-link.search-input')} + + +
+ + + + + +
+ + {/* + + */} + +
+ +
+ + {navigationData?.navigationList && navigationData?.navigationList?.length > 0 && ( + + + + )} + + + +
{children}
+ +
+