diff --git a/app/[lang]/[page]/opengraph-image.tsx b/app/[lang]/[page]/opengraph-image.tsx index 2fd59281e..8f068a6f1 100644 --- a/app/[lang]/[page]/opengraph-image.tsx +++ b/app/[lang]/[page]/opengraph-image.tsx @@ -4,7 +4,7 @@ import { getPage } from 'lib/shopify'; export const runtime = 'edge'; export default async function Image({ params }: { params: { page: string } }) { - const page = await getPage(params.page); + const page = await getPage({ handle: params.page }); const title = page.seo?.title || page.title; return await OpengraphImage({ title }); diff --git a/app/[lang]/[page]/page.tsx b/app/[lang]/[page]/page.tsx index 3dfde9f92..f9f3d1196 100644 --- a/app/[lang]/[page]/page.tsx +++ b/app/[lang]/[page]/page.tsx @@ -13,7 +13,7 @@ export async function generateMetadata({ }: { params: { page: string }; }): Promise { - const page = await getPage(params.page); + const page = await getPage({ handle: params.page }); if (!page) return notFound(); @@ -29,7 +29,7 @@ export async function generateMetadata({ } export default async function Page({ params }: { params: { page: string } }) { - const page = await getPage(params.page); + const page = await getPage({ handle: params.page }); if (!page) return notFound(); diff --git a/app/[lang]/globals.css b/app/[lang]/globals.css index 0a6d36768..dc3410eaf 100644 --- a/app/[lang]/globals.css +++ b/app/[lang]/globals.css @@ -19,3 +19,11 @@ input, button { @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-400 focus-visible:ring-offset-2 focus-visible:ring-offset-neutral-50 dark:focus-visible:ring-neutral-600 dark:focus-visible:ring-offset-neutral-900; } + +.font-multilingual { + @apply font-serif; +} + +[lang='ja'] .font-multilingual { + @apply font-japan; +} diff --git a/app/[lang]/layout.tsx b/app/[lang]/layout.tsx index 8a614ae75..49c86e089 100644 --- a/app/[lang]/layout.tsx +++ b/app/[lang]/layout.tsx @@ -3,6 +3,7 @@ import { Locale, i18n } from 'i18n-config'; import localFont from 'next/font/local'; import { ReactNode, Suspense } from 'react'; +import { LanguageProvider } from 'app/context/language-context'; import './globals.css'; const { TWITTER_CREATOR, TWITTER_SITE, SITE_NAME } = process.env; @@ -37,6 +38,12 @@ const cinzel = localFont({ variable: '--font-cinzel' }); +const mincho = localFont({ + src: '../fonts/A-OTF-A1MinchoStd-Bold.otf', + display: 'swap', + variable: '--font-cinzel' +}); + const alpina = localFont({ src: [ { @@ -65,13 +72,15 @@ export default async function RootLayout({ params: { lang: string }; }) { return ( - +
- - -
{children}
- + + + +
{children}
+ +
diff --git a/app/[lang]/page.tsx b/app/[lang]/page.tsx index b0af28e78..d364af4df 100644 --- a/app/[lang]/page.tsx +++ b/app/[lang]/page.tsx @@ -32,7 +32,7 @@ export default async function HomePage({ params: { lang } }: { params: { lang: L className="max-w-[260px] md:max-w-[600px]" /> - + diff --git a/app/[lang]/product/[handle]/page.tsx b/app/[lang]/product/[handle]/page.tsx index d59423364..e810bae02 100644 --- a/app/[lang]/product/[handle]/page.tsx +++ b/app/[lang]/product/[handle]/page.tsx @@ -18,7 +18,7 @@ export async function generateMetadata({ }: { params: { handle: string }; }): Promise { - const product = await getProduct(params.handle); + const product = await getProduct({ handle: params.handle }); if (!product) return notFound(); @@ -52,7 +52,7 @@ export async function generateMetadata({ } export default async function ProductPage({ params }: { params: { handle: string } }) { - const product = await getProduct(params.handle); + const product = await getProduct({ handle: params.handle }); if (!product) return notFound(); @@ -108,7 +108,7 @@ export default async function ProductPage({ params }: { params: { handle: string } async function RelatedProducts({ id }: { id: string }) { - const relatedProducts = await getProductRecommendations(id); + const relatedProducts = await getProductRecommendations({ productId: id }); if (!relatedProducts.length) return null; diff --git a/app/[lang]/search/[collection]/opengraph-image.tsx b/app/[lang]/search/[collection]/opengraph-image.tsx index 9eb9c47f7..969a652b1 100644 --- a/app/[lang]/search/[collection]/opengraph-image.tsx +++ b/app/[lang]/search/[collection]/opengraph-image.tsx @@ -4,7 +4,7 @@ import { getCollection } from 'lib/shopify'; export const runtime = 'edge'; export default async function Image({ params }: { params: { collection: string } }) { - const collection = await getCollection(params.collection); + const collection = await getCollection({ handle: params.collection }); const title = collection?.seo?.title || collection?.title; return await OpengraphImage({ title }); diff --git a/app/[lang]/search/[collection]/page.tsx b/app/[lang]/search/[collection]/page.tsx index 25416d544..1698a0930 100644 --- a/app/[lang]/search/[collection]/page.tsx +++ b/app/[lang]/search/[collection]/page.tsx @@ -13,7 +13,7 @@ export async function generateMetadata({ }: { params: { collection: string }; }): Promise { - const collection = await getCollection(params.collection); + const collection = await getCollection({ handle: params.collection }); if (!collection) return notFound(); diff --git a/app/[lang]/sitemap.ts b/app/[lang]/sitemap.ts index 46d39669c..12ec3999b 100644 --- a/app/[lang]/sitemap.ts +++ b/app/[lang]/sitemap.ts @@ -30,7 +30,7 @@ export default async function sitemap(): Promise { })) ); - const pagesPromise = getPages().then((pages) => + const pagesPromise = getPages({}).then((pages) => pages.map((page) => ({ url: `${baseUrl}/${page.handle}`, lastModified: page.updatedAt diff --git a/app/context/language-context.tsx b/app/context/language-context.tsx new file mode 100644 index 000000000..5f31007d7 --- /dev/null +++ b/app/context/language-context.tsx @@ -0,0 +1,36 @@ +'use client'; + +import { Locale } from 'i18n-config'; +import { ReactNode, createContext, useContext, useState } from 'react'; + +interface IContextProps { + currentLanguage?: Locale; + setCurrentLanguage: (language: Locale) => void; +} + +export const LanguageContext = createContext({} as IContextProps); + +export function LanguageProvider({ + language, + children +}: { + language: Locale; + children: ReactNode | ReactNode[] | string; +}) { + const [currentLanguage, setCurrentLanguage] = useState(language || 'en'); + + return ( + + {children} + + ); +} + +export const useLanguage = () => { + return useContext(LanguageContext); +}; diff --git a/app/fonts/A-OTF-A1MinchoStd-Bold.otf b/app/fonts/A-OTF-A1MinchoStd-Bold.otf new file mode 100644 index 000000000..f6534addb Binary files /dev/null and b/app/fonts/A-OTF-A1MinchoStd-Bold.otf differ diff --git a/components/grid/three-items.tsx b/components/grid/three-items.tsx index 1b935dff8..4da2f1bf2 100644 --- a/components/grid/three-items.tsx +++ b/components/grid/three-items.tsx @@ -1,5 +1,6 @@ import clsx from 'clsx'; import { GridTileImage } from 'components/grid/tile'; +import { Locale } from 'i18n-config'; import { getCollectionProducts } from 'lib/shopify'; import type { Product } from 'lib/shopify/types'; import Link from 'next/link'; @@ -14,7 +15,10 @@ function ThreeItemGridItem({ item, priority }: { item: Product; priority?: boole > +
{item?.description}
); } -export async function ThreeItemGrid() { +export async function ThreeItemGrid({ lang }: { lang: Locale }) { // Collections that start with `hidden-*` are hidden from the search page. const homepageItems = await getCollectionProducts({ - collection: 'hidden-homepage-featured-items' + collection: 'hidden-homepage-featured-items', + language: lang.toUpperCase() }); + console.debug({ homepageItems }); + if (!homepageItems[0] || !homepageItems[1] || !homepageItems[2]) return null; const [firstProduct, secondProduct, thirdProduct] = homepageItems; diff --git a/components/grid/tile.tsx b/components/grid/tile.tsx index e1523f510..1b24cb438 100644 --- a/components/grid/tile.tsx +++ b/components/grid/tile.tsx @@ -16,7 +16,7 @@ export function GridTileImage({ }; } & React.ComponentProps) { return ( -
+ <> {props.src ? ( // eslint-disable-next-line jsx-a11y/alt-text -- `alt` is inherited from `props`, which is being enforced with TypeScript ) : null} -
+ ); } diff --git a/components/label.tsx b/components/label.tsx index d94a89c37..287a0fd41 100644 --- a/components/label.tsx +++ b/components/label.tsx @@ -12,7 +12,7 @@ const Label = ({ }) => { return (
-
+

{title}

- +