crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-23 04:36:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: Basic internationalization

Browse Source
This commit is contained in:
Sol Irvine
2023-08-14 02:27:52 +09:00
parent 7a4a7cf4ed
commit 4c8abdfe6f
24 changed files with 202 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/[lang]/[page]/opengraph-image.tsx
View File

@@ -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 });

4
app/[lang]/[page]/page.tsx
View File

@@ -13,7 +13,7 @@ export async function generateMetadata({
}: {
params: { page: string };
}): Promise<Metadata> {
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();

8
app/[lang]/globals.css
View File

@@ -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;
}

19
app/[lang]/layout.tsx
View File

@@ -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 (
<html lang={params.lang} className={`${cinzel.variable} ${alpina.variable}`}>
<html lang={params.lang} className={`${cinzel.variable} ${alpina.variable} ${mincho.variable}`}>
<body className="bg-dark text-white selection:bg-green-800 selection:text-green-400">
<div className="mx-auto max-w-screen-2xl">
<Navbar lang={params.lang as Locale} />
<Suspense>
<main>{children}</main>
</Suspense>
<LanguageProvider language={params.lang as Locale}>
<Navbar />
<Suspense>
<main>{children}</main>
</Suspense>
</LanguageProvider>
</div>
</body>
</html>

2
app/[lang]/page.tsx
View File

@@ -32,7 +32,7 @@ export default async function HomePage({ params: { lang } }: { params: { lang: L
className="max-w-[260px] md:max-w-[600px]"
/>
</div>
<ThreeItemGrid />
<ThreeItemGrid lang={lang} />
<Suspense>
<Carousel />
<Suspense>

6
app/[lang]/product/[handle]/page.tsx
View File

@@ -18,7 +18,7 @@ export async function generateMetadata({
}: {
params: { handle: string };
}): Promise<Metadata> {
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;

2
app/[lang]/search/[collection]/opengraph-image.tsx
View File

@@ -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 });

2
app/[lang]/search/[collection]/page.tsx
View File

@@ -13,7 +13,7 @@ export async function generateMetadata({
}: {
params: { collection: string };
}): Promise<Metadata> {
const collection = await getCollection(params.collection);
const collection = await getCollection({ handle: params.collection });
if (!collection) return notFound();

2
app/[lang]/sitemap.ts
View File

@@ -30,7 +30,7 @@ export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
}))
);
const pagesPromise = getPages().then((pages) =>
const pagesPromise = getPages({}).then((pages) =>
pages.map((page) => ({
url: `${baseUrl}/${page.handle}`,
lastModified: page.updatedAt

36
app/context/language-context.tsx Normal file
View File

@@ -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<IContextProps>({} as IContextProps);
export function LanguageProvider({
language,
children
}: {
language: Locale;
children: ReactNode | ReactNode[] | string;
}) {
const [currentLanguage, setCurrentLanguage] = useState<Locale>(language || 'en');
return (
<LanguageContext.Provider
value={{
currentLanguage,
setCurrentLanguage
}}
>
{children}
</LanguageContext.Provider>
);
}
export const useLanguage = () => {
return useContext(LanguageContext);
};

BIN
app/fonts/A-OTF-A1MinchoStd-Bold.otf Normal file
View File

Binary file not shown.