From 2319ed72db53859c9bd2acafc26e4024cc2c43f4 Mon Sep 17 00:00:00 2001 From: Sol Irvine Date: Mon, 14 Aug 2023 14:33:42 +0900 Subject: [PATCH] wip: Saving work --- app/[lang]/favicon.ico | Bin 15086 -> 0 bytes app/[lang]/layout.tsx | 19 +++++++++------- app/[lang]/page.tsx | 7 ++---- app/context/language-context.tsx | 7 +++++- components/grid/three-items.tsx | 18 +++++++-------- components/grid/tile.tsx | 2 +- components/icons/namemark.tsx | 34 +++++++++++++++++++++++++++ components/label.tsx | 24 +++++++++++++------ components/layout/menu/modal.tsx | 38 +++++++++++++++---------------- dictionaries/en.json | 12 +++++++--- dictionaries/ja.json | 12 +++++++--- lib/shopify/fragments/product.ts | 3 +++ lib/shopify/types.ts | 3 +++ tailwind.config.js | 2 +- 14 files changed, 124 insertions(+), 57 deletions(-) delete mode 100644 app/[lang]/favicon.ico create mode 100644 components/icons/namemark.tsx diff --git a/app/[lang]/favicon.ico b/app/[lang]/favicon.ico deleted file mode 100644 index dc7d8431e47ee24c71eebaffe30786769b348353..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 15086 zcmd^GTWAzX6m4-g@sXH`@A%578(qZ@6^)AEx+seJA)+9DC<(qIf}bu*kok~BOho(? zMKOx(j~|Mt_~Qfw1wjdF^h0Abh?s;#^B@nC+`Xsl>g}%X>Y3@8NoLrAo9cSpd(W+R z)vXxDC}Xs-bg98%*!ZW!FiH)>2#3vh$S@i>EyN-6D}FJIzq!EgT!vYUGA5*p-)}#I zSbt~DniZNndGh+g!ot4_3JPi_Oqfv1RG*)p-^A3y^o^;Dshg=MNrDW>f=tM6VqLGH zlXYJQ24DfEIB@4poH((Jd82uGdF|uJj~^U2ZXAsy0RylA6Jsl9JMz8km_B`a5$c-D z_l+c8Ki$9vjKFHQVa}X6c}Vx;&7?eF1!idj+9i|gU9CG{1!mx%J$rVD`_?11Os2$z>2Y9|^LwUa)#1Z9=6+PG%g^+5U}t)r={R-x zfF0|#EWG+X@0z8$BxzV>Er=BQk>gsAbd-kl0s;a7J+qP{2r=1trX3UsDCr_Rvlu>yhZ_l1R#B*XoHUK+Q zw_TUtH|npVqJsMR`bhVC{`@)3pFiJa18l!^>5?Z~M@I+k+__VgtT#Sa_{7cQiiFJF3MM`C+>J8j*%)zt>5=d!Xg z>hJHT+S*#0Idi6~uc%4VKI}V|@87>qQ>RXK;KR6>GGz+gym^y$?b_wC zPlwejJsJEG$KAVkwQYcT>cD{mE{x#iy*q_MAxHo6!swTl41UN(8*JRTky=_>v^HQq zoi}futBwSQh%~xs_+8`aBbSO ziCSA*J#A=gY!quU`dhNNC4VaMLng-Zg$oy4_y-3E>BNZ>t~p5J2pXmuKk9bz;>A>7 zU+=Kt@#DwD_e_p;EGT9>U#js#Hu}-gqesR507i6nb|$^f+A-U|(}5pjdD^sT^x(k* z(FQd&HN^KEDX)9jVd9Vb{9?D=?;CBfWy=#$y%dyaI!pQ)E?Q>^zh1o-@?7h$ns zG$PD3j3~m<|Ai66M;V41BKiOPi@15(!Z+@7x&I0b&;j2u{Os`IqYT2md-qaNQIRhO)-UEYsZR|d8-7{bv)X?j zK763%%a>dCPq@>$diAQk2;I7MOW^XW1J*C*R8_BxXhS+0KmZK&g+Qf13kPAl8D|Q`oV*Cz&P*j?sj0n+m9tnmRNNl<;MyWu^+NvBl;qI?Dk(>T^*H_ zl%!q1tb;Xc)>va5eQ^K&{Z=20WwSj$QTrt?>H%+Y@VkBcwlxN2e!QWnKjC-j=!@{Z zWBkKUkA4xaPJ21lFZQYSv_!t=&Yhc-@0Rt8J#r#C?PY_EIXge=7yEO2+HiieesMM! zPMvmLtY4f<>}kXKZJvonbpJil=Z}#-f8h)`lIKt8$8VU<-&N}Q`eXWHL&)=p@a3;v zyH=zvSg^pcA7g$|SCXIO;=OWDPY-?m{8{j@jdbP875e)1t7Bge9xgBHS@HuP_FHe? zzP0uM*cai ({ 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: {