diff --git a/app/[lang]/favicon.ico b/app/[lang]/favicon.ico deleted file mode 100644 index dc7d8431e..000000000 Binary files a/app/[lang]/favicon.ico and /dev/null differ diff --git a/app/[lang]/layout.tsx b/app/[lang]/layout.tsx index 49c86e089..20fbbfd69 100644 --- a/app/[lang]/layout.tsx +++ b/app/[lang]/layout.tsx @@ -4,6 +4,7 @@ import localFont from 'next/font/local'; import { ReactNode, Suspense } from 'react'; import { LanguageProvider } from 'app/context/language-context'; +import { getDictionary } from 'dictionaries'; import './globals.css'; const { TWITTER_CREATOR, TWITTER_SITE, SITE_NAME } = process.env; @@ -38,12 +39,6 @@ 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: [ { @@ -60,6 +55,12 @@ const alpina = localFont({ variable: '--font-alpina' }); +const mincho = localFont({ + src: '../fonts/A-OTF-A1MinchoStd-Bold.otf', + display: 'swap', + variable: '--font-mincho' +}); + export async function generateStaticParams() { return i18n.locales.map((locale) => ({ lang: locale })); } @@ -69,13 +70,15 @@ export default async function RootLayout({ params }: { children: ReactNode; - params: { lang: string }; + params: { lang: Locale }; }) { + const dictionary = await getDictionary(params?.lang); + return (
- +
{children}
diff --git a/app/[lang]/page.tsx b/app/[lang]/page.tsx index 3f6d51aa6..1db45240c 100644 --- a/app/[lang]/page.tsx +++ b/app/[lang]/page.tsx @@ -4,8 +4,7 @@ import Footer from 'components/layout/footer'; import { LanguageControl } from 'components/layout/navbar/language-control'; import type { Locale } from '../../i18n-config'; -import Image from 'next/image'; -import Namemark from 'public/assets/images/namemark.png'; +import LogoNamemark from 'components/icons/namemark'; import { Suspense } from 'react'; export const runtime = 'edge'; @@ -20,15 +19,13 @@ export const metadata = { }; export default async function HomePage({ params: { lang } }: { params: { lang: Locale } }) { - // const dictionary = await getDictionary(lang); - return ( <>
- suginomori brewery +
diff --git a/app/context/language-context.tsx b/app/context/language-context.tsx index 5f31007d7..fd80929d7 100644 --- a/app/context/language-context.tsx +++ b/app/context/language-context.tsx @@ -6,24 +6,29 @@ import { ReactNode, createContext, useContext, useState } from 'react'; interface IContextProps { currentLanguage?: Locale; setCurrentLanguage: (language: Locale) => void; + currentDictionary?: any; } export const LanguageContext = createContext({} as IContextProps); export function LanguageProvider({ language, + dictionary, children }: { language: Locale; + dictionary?: any; children: ReactNode | ReactNode[] | string; }) { const [currentLanguage, setCurrentLanguage] = useState(language || 'en'); + const [currentDictionary] = useState(dictionary); return ( {children} diff --git a/components/grid/three-items.tsx b/components/grid/three-items.tsx index 04fac5b76..df539ed89 100644 --- a/components/grid/three-items.tsx +++ b/components/grid/three-items.tsx @@ -1,36 +1,35 @@ 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'; import Label from '../label'; +import { GridTileImage } from './tile'; function ThreeItemGridItem({ item, priority }: { item: Product; priority?: boolean }) { + const size = item?.variants?.[0]?.selectedOptions?.find((option) => option.name === 'size'); return ( -
+
-
+
); @@ -52,7 +51,8 @@ export async function ThreeItemGrid({ lang }: { lang: Locale }) { return (
diff --git a/components/grid/tile.tsx b/components/grid/tile.tsx index 1b24cb438..4729255bc 100644 --- a/components/grid/tile.tsx +++ b/components/grid/tile.tsx @@ -20,7 +20,7 @@ export function GridTileImage({ {props.src ? ( // eslint-disable-next-line jsx-a11y/alt-text -- `alt` is inherited from `props`, which is being enforced with TypeScript ) { + return ( + + + + + + + + + + + + + + + ); +} diff --git a/components/label.tsx b/components/label.tsx index 287a0fd41..3d92faf1d 100644 --- a/components/label.tsx +++ b/components/label.tsx @@ -4,22 +4,32 @@ import Price from './price'; const Label = ({ title, amount, - currencyCode + currencyCode, + size }: { title: string; amount: string; currencyCode: string; + size?: string; }) => { return (

{title}

- +
+ + {!!size && ( + <> +
/
+
{size}
+ + )} +
); diff --git a/components/layout/menu/modal.tsx b/components/layout/menu/modal.tsx index 7e869f570..78c4d4711 100644 --- a/components/layout/menu/modal.tsx +++ b/components/layout/menu/modal.tsx @@ -9,7 +9,7 @@ import { Fragment, useRef, useState } from 'react'; import { LanguageControl } from '../navbar/language-control'; export function MenuModal() { - const { currentLanguage } = useLanguage(); + const { currentLanguage, currentDictionary } = useLanguage(); let [isOpen, setIsOpen] = useState(false); let closeButtonRef = useRef(null); @@ -43,17 +43,6 @@ export function MenuModal() { >
- -
-
- - - -
-
-
+
+
+ + + +
+
+
@@ -74,7 +73,7 @@ export function MenuModal() { href="/products" className="font-serif text-4xl font-normal transition-opacity duration-150 hover:opacity-50" > - products + {currentDictionary?.menu?.products}
@@ -83,7 +82,7 @@ export function MenuModal() { href="/shops" className="font-serif text-4xl font-normal transition-opacity duration-150 hover:opacity-50" > - shop list + {currentDictionary?.menu?.shops}
@@ -92,7 +91,7 @@ export function MenuModal() { href="/about" className="font-serif text-4xl font-normal transition-opacity duration-150 hover:opacity-50" > - about narai + {currentDictionary?.menu?.about}
@@ -101,7 +100,7 @@ export function MenuModal() { href="/bar" className="font-serif text-4xl font-normal transition-opacity duration-150 hover:opacity-50" > - sagyobar + {currentDictionary?.menu?.bar}
@@ -110,7 +109,7 @@ export function MenuModal() { href="/concept" className="font-serif text-4xl font-normal transition-opacity duration-150 hover:opacity-50" > - concept + {currentDictionary?.menu?.concept}
@@ -119,7 +118,7 @@ export function MenuModal() { href="/stories" className="font-serif text-4xl font-normal transition-opacity duration-150 hover:opacity-50" > - stories + {currentDictionary?.menu?.stories}
@@ -128,7 +127,7 @@ export function MenuModal() { href="/company" className="font-serif text-4xl font-normal transition-opacity duration-150 hover:opacity-50" > - company + {currentDictionary?.menu?.company}
@@ -137,6 +136,7 @@ export function MenuModal() { href="/contact" className="font-serif text-4xl font-normal transition-opacity duration-150 hover:opacity-50" > + {currentDictionary?.menu?.contact} contact
diff --git a/dictionaries/en.json b/dictionaries/en.json index 250e9f084..ddb07fdf7 100644 --- a/dictionaries/en.json +++ b/dictionaries/en.json @@ -1,6 +1,12 @@ { - "hello": { - "title": "Hello World", - "description": "This is a description" + "menu": { + "products": "products", + "shops": "shop list", + "about": "about narai", + "bar": "sagyobar", + "concept": "concept", + "stories": "stories", + "company": "company", + "contact": "contact" } } diff --git a/dictionaries/ja.json b/dictionaries/ja.json index 63ac1ad5f..d064af1de 100644 --- a/dictionaries/ja.json +++ b/dictionaries/ja.json @@ -1,6 +1,12 @@ { - "hello": { - "title": "こんにちは", - "description": "これはせつめいですよ" + "menu": { + "products": "商品", + "shops": "取り扱い店", + "about": "naraiについて", + "bar": "sagyobar", + "concept": "コンセプト", + "stories": "ストーリー", + "company": "会社概要", + "contact": "contact" } } diff --git a/lib/shopify/fragments/product.ts b/lib/shopify/fragments/product.ts index be14dedca..0d37d1627 100644 --- a/lib/shopify/fragments/product.ts +++ b/lib/shopify/fragments/product.ts @@ -9,6 +9,9 @@ const productFragment = /* GraphQL */ ` title description descriptionHtml + summary: metafield(namespace: "custom", key: "product_summary") { + value + } options { id name diff --git a/lib/shopify/types.ts b/lib/shopify/types.ts index b51ab3e30..2a7479067 100644 --- a/lib/shopify/types.ts +++ b/lib/shopify/types.ts @@ -115,6 +115,9 @@ export type ShopifyProduct = { title: string; description: string; descriptionHtml: string; + summary: { + value: string; + }; options: ProductOption[]; priceRange: { maxVariantPrice: Money; diff --git a/tailwind.config.js b/tailwind.config.js index b3297fe32..7f686e8df 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -15,7 +15,7 @@ module.exports = { japan: ['var(--font-mincho)', 'sans-serif'] }, aspectRatio: { - bottle: '1.11' + tall: '596 / 845' }, keyframes: { fadeIn: {