diff --git a/.env.example b/.env.example index 821ecb11f..9ac741a18 100644 --- a/.env.example +++ b/.env.example @@ -19,5 +19,6 @@ VERCEL_GIT_PULL_REQUEST_ID="" TWITTER_CREATOR="@kodamera" TWITTER_SITE="https://kodamera.se" SITE_NAME="KM Storefront" +SITE_DESCRIPTION="High-performance ecommerce store built with Next.js, Vercel, Sanity and Storm." SHOPIFY_STOREFRONT_ACCESS_TOKEN= SHOPIFY_STORE_DOMAIN= diff --git a/app/[locale]/[slug]/page.tsx b/app/[locale]/[...slug]/page.tsx similarity index 54% rename from app/[locale]/[slug]/page.tsx rename to app/[locale]/[...slug]/page.tsx index a2f51cdd3..6a621b175 100644 --- a/app/[locale]/[slug]/page.tsx +++ b/app/[locale]/[...slug]/page.tsx @@ -11,9 +11,25 @@ export const revalidate = 43200; // 12 hours in seconds export async function generateMetadata({ params }: { - params: { locale: string; slug: string }; + params: { locale: string; slug: string[] }; }): Promise { - const page = await clientFetch(pageQuery, params); + let queryParams = { + locale: params.locale, + slug: '' + }; + + if (params.slug.length > 1) { + queryParams = { + locale: params.locale, + slug: `${params.slug.join('/')}` + }; + } else { + queryParams = { + locale: params.locale, + slug: `${params.slug}` + }; + } + const page = await clientFetch(pageQuery, queryParams); if (!page) return notFound(); @@ -31,12 +47,29 @@ export async function generateMetadata({ interface PageParams { params: { locale: string; - slug: string; + slug: string[]; }; } export default async function Page({ params }: PageParams) { - const page = await clientFetch(pageQuery, params); + let queryParams = { + locale: params.locale, + slug: '' + }; + + if (params.slug.length > 1) { + queryParams = { + locale: params.locale, + slug: `${params.slug.join('/')}` + }; + } else { + queryParams = { + locale: params.locale, + slug: `${params.slug}` + }; + } + + const page = await clientFetch(pageQuery, queryParams); if (!page) return notFound(); diff --git a/app/[locale]/layout.tsx b/app/[locale]/layout.tsx index 36ec12ff1..105907983 100644 --- a/app/[locale]/layout.tsx +++ b/app/[locale]/layout.tsx @@ -7,27 +7,22 @@ import { ReactNode } from 'react'; import { supportedLanguages } from '../../i18n-config'; import './globals.css'; -const SITE_NAME = 'KM Storefront'; -const SITE_DESCRIPTION = 'Webb och digitalbyrå från Göteborg'; -const TWITTER_CREATOR = '@kodamera.se'; -const TWITTER_SITE = 'https://kodamera.se'; - export const metadata = { title: { - default: SITE_NAME, - template: `%s | ${SITE_NAME}` + default: process.env.SITE_NAME, + template: `%s | ${process.env.SITE_NAME}` }, - description: SITE_DESCRIPTION, + description: process.env.SITE_DESCRIPTION, robots: { follow: true, index: true }, - ...(TWITTER_CREATOR && - TWITTER_SITE && { + ...(process.env.TWITTER_CREATOR && + process.env.TWITTER_SITE && { twitter: { card: 'summary_large_image', - creator: TWITTER_CREATOR, - site: TWITTER_SITE + creator: process.env.TWITTER_CREATOR, + site: process.env.TWITTER_SITE } }) }; diff --git a/app/[locale]/product/[slug]/page.tsx b/app/[locale]/product/[slug]/page.tsx index db6ebef81..19083ed90 100644 --- a/app/[locale]/product/[slug]/page.tsx +++ b/app/[locale]/product/[slug]/page.tsx @@ -55,6 +55,8 @@ export async function generateMetadata({ export default async function ProductPage({ params }: ProductPageParams) { const product = await clientFetch(productQuery, params); + console.log(params); + if (!product) return notFound(); const productJsonLd = { diff --git a/components/layout/footer/copyright.tsx b/components/layout/footer/copyright.tsx new file mode 100644 index 000000000..d93063b4e --- /dev/null +++ b/components/layout/footer/copyright.tsx @@ -0,0 +1,15 @@ +'use client'; + +import { useTranslations } from 'next-intl'; + +export default function CopyRight() { + const currentYear = new Date().getFullYear(); + const copyrightDate = 2023 + (currentYear > 2023 ? `-${currentYear}` : ''); + const t = useTranslations('ui'); + + return ( +

+ © {copyrightDate} Kodamera - {t('copyright')} +

+ ); +} diff --git a/components/layout/footer/footer.tsx b/components/layout/footer/footer.tsx index b4b20657c..5bdeadc04 100644 --- a/components/layout/footer/footer.tsx +++ b/components/layout/footer/footer.tsx @@ -1,9 +1,8 @@ -'use client'; - -// import LocaleSwitcher from 'components/ui/locale-switcher/locale-switcher'; +import LocaleSwitcher from 'components/ui/locale-switcher/locale-switcher'; import Logo from 'components/ui/logo/logo'; -import { useTranslations } from 'next-intl'; import Link from 'next/link'; +import CopyRight from './copyright'; + // interface FooterProps { // localeData: { // type: string; @@ -13,11 +12,6 @@ import Link from 'next/link'; // } const Footer = () => { - // const locale = useLocale(); - const currentYear = new Date().getFullYear(); - const copyrightDate = 2023 + (currentYear > 2023 ? `-${currentYear}` : ''); - const t = useTranslations('ui'); - return ( diff --git a/components/ui/card/card.tsx b/components/ui/card/card.tsx index 5dbb1e442..09cd57d76 100644 --- a/components/ui/card/card.tsx +++ b/components/ui/card/card.tsx @@ -14,8 +14,6 @@ interface CardProps { imageFormat?: 'square' | 'portrait' | 'landscape'; } -const placeholderImg = '/product-img-placeholder.svg'; - const Card: FC = ({ className, title, image, link, text, imageFormat = 'square' }) => { const rootClassName = cn('relative', className); @@ -39,7 +37,7 @@ const Card: FC = ({ className, title, image, link, text, imageFormat } else if (type === 'category') { href = `/category/${link.internalLink.reference.slug.current}`; } else { - return `${link.internalLink.reference.slug.current}`; + href = `${link.internalLink.reference.slug.current}`; } return ( diff --git a/components/ui/locale-switcher/locale-switcher.tsx b/components/ui/locale-switcher/locale-switcher.tsx index bd9150c2a..c6057f9b3 100644 --- a/components/ui/locale-switcher/locale-switcher.tsx +++ b/components/ui/locale-switcher/locale-switcher.tsx @@ -1,43 +1,47 @@ +'use client'; + import LanguageIcon from 'components/icons/language'; import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from 'components/ui/dropdown/dropdown'; +import { useLocale } from 'next-intl'; import Link from 'next/link'; import { usePathname } from 'next/navigation'; import { useState } from 'react'; import { supportedLanguages } from '../../../i18n-config'; -interface LocaleSwitcherProps { - currentLocale: string; - localeData: { - type: string; - locale: string; - translations: []; - }; -} +// interface LocaleSwitcherProps { +// localeData: { +// type: string; +// locale: string; +// translations: []; +// }; +// } -export default function LocaleSwitcher({ currentLocale, localeData }: LocaleSwitcherProps) { +export default function LocaleSwitcher() { const pathName = usePathname(); - const translations = localeData.translations; + const currentLocale = useLocale(); + + // const translations = localeData.translations; const redirectedPathName = (locale: string) => { - if (!pathName || translations.length === 0) return '/'; + if (!pathName) return '/'; - if (translations.length > 0) { - const translation = translations.find((obj) => { - return obj['locale'] === locale; - }); + // if (translations.length > 0) { + // const translation = translations.find((obj) => { + // return obj['locale'] === locale; + // }); - if (translation) { - const url = `/${translation['locale']}${translation['slug']}`; + // if (translation) { + // const url = `/${translation['locale']}${translation['slug']}`; - return url; - } - } + // return url; + // } + // } - return '/'; + return `/${locale}`; }; const [isOpen, setIsOpen] = useState(false);