From 76ffb77b8294e2c8af52e409cc2f692beab9ad8c Mon Sep 17 00:00:00 2001 From: Sol Irvine Date: Tue, 22 Aug 2023 09:35:27 +0900 Subject: [PATCH 01/13] fix links on homepage --- components/layout/concept-preview.tsx | 2 +- components/layout/location-preview.tsx | 2 +- components/layout/sagyobar-preview.tsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/components/layout/concept-preview.tsx b/components/layout/concept-preview.tsx index 5d38bdbe2..e915f93a6 100644 --- a/components/layout/concept-preview.tsx +++ b/components/layout/concept-preview.tsx @@ -14,7 +14,7 @@ export default function ConceptPreview() {
{t('home.previews.concept.body')}
{t('home.previews.concept.button')} diff --git a/components/layout/location-preview.tsx b/components/layout/location-preview.tsx index 72884299c..2224854d3 100644 --- a/components/layout/location-preview.tsx +++ b/components/layout/location-preview.tsx @@ -14,7 +14,7 @@ export default function LocationPreview() {
{t('home.previews.location.body')}
{t('home.previews.location.button')} diff --git a/components/layout/sagyobar-preview.tsx b/components/layout/sagyobar-preview.tsx index 2a146e70a..31485308b 100644 --- a/components/layout/sagyobar-preview.tsx +++ b/components/layout/sagyobar-preview.tsx @@ -14,7 +14,7 @@ export default function SagyobarPreview() {
{t('home.previews.bar.body')}
{t('home.previews.bar.button')} From 70e75dc725bf94eacd5cd0b283645105fdc6ed4e Mon Sep 17 00:00:00 2001 From: Sol Irvine Date: Tue, 22 Aug 2023 12:43:02 +0900 Subject: [PATCH 02/13] Update location-preview.tsx --- components/layout/location-preview.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/layout/location-preview.tsx b/components/layout/location-preview.tsx index 2224854d3..19e6ce8aa 100644 --- a/components/layout/location-preview.tsx +++ b/components/layout/location-preview.tsx @@ -14,7 +14,7 @@ export default function LocationPreview() {
{t('home.previews.location.body')}
{t('home.previews.location.button')} From 01f38e04cbf5d36641a4f6c4743810fafccf3c5c Mon Sep 17 00:00:00 2001 From: Sol Irvine Date: Wed, 23 Aug 2023 20:49:17 -0700 Subject: [PATCH 03/13] fix: hide stories when no articles are published --- app/[locale]/page.tsx | 4 ++-- components/layout/{stories.tsx => stories-preview.tsx} | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) rename components/layout/{stories.tsx => stories-preview.tsx} (96%) diff --git a/app/[locale]/page.tsx b/app/[locale]/page.tsx index 7f5c2c9ed..4ec31feac 100644 --- a/app/[locale]/page.tsx +++ b/app/[locale]/page.tsx @@ -18,7 +18,7 @@ import Navbar from 'components/layout/navbar'; import NewsletterSignup from 'components/layout/newsletter-signup'; import SagyobarPreview from 'components/layout/sagyobar-preview'; import Shoplist from 'components/layout/shoplist'; -import Stories from 'components/layout/stories'; +import StoriesPreview from 'components/layout/stories-preview'; import { BLOG_HANDLE } from 'lib/constants'; import { getCart } from 'lib/shopify'; import { cookies } from 'next/headers'; @@ -132,7 +132,7 @@ export default async function HomePage({
- +
diff --git a/components/layout/stories.tsx b/components/layout/stories-preview.tsx similarity index 96% rename from components/layout/stories.tsx rename to components/layout/stories-preview.tsx index 267148ee7..aea795954 100644 --- a/components/layout/stories.tsx +++ b/components/layout/stories-preview.tsx @@ -4,7 +4,7 @@ import Image from 'next/image'; import Link from 'next/link'; import { SupportedLocale } from './navbar/language-control'; -export default async function Stories({ +export default async function StoriesPreview({ locale, handle, articles, @@ -21,7 +21,7 @@ export default async function Stories({ language: locale?.toUpperCase() }); - if (!blog) return null; + if (!blog || !!blog?.articles) return null; return (
From bd1538e88a5fda6b104024713885f803cdd9b19f Mon Sep 17 00:00:00 2001 From: Sol Irvine Date: Wed, 23 Aug 2023 21:58:39 -0700 Subject: [PATCH 04/13] fix: Add dedicated products page collection --- app/[locale]/products/page.tsx | 4 +-- components/grid/product-grid.tsx | 61 ++++++++++++++++++++++++++++++++ components/grid/three-items.tsx | 8 +++-- lib/shopify/fragments/product.ts | 3 ++ lib/shopify/types.ts | 1 + 5 files changed, 72 insertions(+), 5 deletions(-) create mode 100644 components/grid/product-grid.tsx diff --git a/app/[locale]/products/page.tsx b/app/[locale]/products/page.tsx index 906f31793..cd18759b1 100644 --- a/app/[locale]/products/page.tsx +++ b/app/[locale]/products/page.tsx @@ -1,7 +1,7 @@ -import { ThreeItemGrid } from 'components/grid/three-items'; import Footer from 'components/layout/footer'; import { SupportedLocale } from 'components/layout/navbar/language-control'; +import { ProductGrid } from 'components/grid/product-grid'; import Navbar from 'components/layout/navbar'; import { getCart } from 'lib/shopify'; import { cookies } from 'next/headers'; @@ -36,7 +36,7 @@ export default async function ProductPage({
- +
diff --git a/components/grid/product-grid.tsx b/components/grid/product-grid.tsx new file mode 100644 index 000000000..767a6eb4e --- /dev/null +++ b/components/grid/product-grid.tsx @@ -0,0 +1,61 @@ +import clsx from 'clsx'; +import { SupportedLocale } from 'components/layout/navbar/language-control'; +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 ProductGridItem({ item, priority }: { item: Product; priority?: boolean }) { + const size = item?.variants?.[0]?.selectedOptions?.find((option) => option.name === 'Size'); + + return ( +
+ +
+ +
+
+
+ +
+ ); +} + +export async function ProductGrid({ lang }: { lang?: SupportedLocale }) { + // Collections that start with `hidden-*` are hidden from the search page. + const productPageItems = await getCollectionProducts({ + collection: 'hidden-products-page-items', + language: lang?.toUpperCase() + }); + console.debug({ productPageItems }); + + if (!productPageItems?.length) return null; + + return ( +
+ {productPageItems.map((item) => ( + + ))} +
+ ); +} diff --git a/components/grid/three-items.tsx b/components/grid/three-items.tsx index 0a4ae1fa8..02671f646 100644 --- a/components/grid/three-items.tsx +++ b/components/grid/three-items.tsx @@ -8,12 +8,14 @@ import { GridTileImage } from './tile'; function ThreeItemGridItem({ item, priority }: { item: Product; priority?: boolean }) { const size = item?.variants?.[0]?.selectedOptions?.find((option) => option.name === 'Size'); - return ( + const image = item?.variants?.[0]?.image; + + return !!image ? (
- ); + ) : null; } export async function ThreeItemGrid({ lang }: { lang?: SupportedLocale }) { diff --git a/lib/shopify/fragments/product.ts b/lib/shopify/fragments/product.ts index 4b608c4a4..6deef10ff 100644 --- a/lib/shopify/fragments/product.ts +++ b/lib/shopify/fragments/product.ts @@ -40,6 +40,9 @@ const productFragment = /* GraphQL */ ` name value } + image { + ...image + } price { amount currencyCode diff --git a/lib/shopify/types.ts b/lib/shopify/types.ts index e3fc78902..9441d78af 100644 --- a/lib/shopify/types.ts +++ b/lib/shopify/types.ts @@ -98,6 +98,7 @@ export type ProductVariant = { value: string; }[]; price: Money; + image: Image; }; export type SEO = { From f43226198d0b00902bef762d175c660649d9fc02 Mon Sep 17 00:00:00 2001 From: Sol Irvine Date: Wed, 23 Aug 2023 22:57:35 -0700 Subject: [PATCH 05/13] improved product page layout --- app/[locale]/product/[handle]/page.tsx | 41 ++++++++++++++++++-------- components/grid/product-grid.tsx | 1 - 2 files changed, 28 insertions(+), 14 deletions(-) diff --git a/app/[locale]/product/[handle]/page.tsx b/app/[locale]/product/[handle]/page.tsx index 2b8a97e2c..0d19171fa 100644 --- a/app/[locale]/product/[handle]/page.tsx +++ b/app/[locale]/product/[handle]/page.tsx @@ -2,6 +2,7 @@ import type { Metadata } from 'next'; import { notFound } from 'next/navigation'; import { Suspense } from 'react'; +import clsx from 'clsx'; import { AddToCart } from 'components/cart/add-to-cart'; import { GridTileImage } from 'components/grid/tile'; import Label from 'components/label'; @@ -64,13 +65,16 @@ export default async function ProductPage({ }: { params: { handle: string; locale?: SupportedLocale }; }) { + const numberOfOtherImages = 3; const product = await getProduct({ handle: params.handle, language: params?.locale?.toUpperCase() }); let otherImages: MediaImage[] = []; if (!!product) { - otherImages = product.images.filter((image) => image?.url !== product.featuredImage?.url); + otherImages = product.images + .slice(0, numberOfOtherImages + 1) // +1 to account for featured image + .filter((image) => image?.url !== product.featuredImage?.url); } if (!product) return notFound(); @@ -102,7 +106,7 @@ export default async function ProductPage({ />
-
+
{product.featuredImage?.altText} {!!otherImages && otherImages?.length > 0 && - otherImages.map((image) => ( -
- {image.altText} -
- ))} + otherImages.map((image, index) => { + const isOdd = otherImages.length % 2 != 0; + const isLast = index === otherImages.length - 1; + const isOddAndLast = isOdd && isLast; + return ( +
+ {image.altText} +
+ ); + })}
diff --git a/components/grid/product-grid.tsx b/components/grid/product-grid.tsx index 767a6eb4e..39c36ea3d 100644 --- a/components/grid/product-grid.tsx +++ b/components/grid/product-grid.tsx @@ -41,7 +41,6 @@ export async function ProductGrid({ lang }: { lang?: SupportedLocale }) { collection: 'hidden-products-page-items', language: lang?.toUpperCase() }); - console.debug({ productPageItems }); if (!productPageItems?.length) return null; From d9838f8807e6ee9b86a81fbbb367540a3bf1a9f8 Mon Sep 17 00:00:00 2001 From: Sol Irvine Date: Wed, 23 Aug 2023 23:24:03 -0700 Subject: [PATCH 06/13] fix: Add to cart buttons on homepage --- app/[locale]/globals.css | 2 +- app/[locale]/page.tsx | 4 +- components/cart/inline-add-to-cart.tsx | 75 +++++++++++++++++++ ...{three-items.tsx => homepage-products.tsx} | 22 ++++-- components/label.tsx | 4 +- components/layout/shoplist.tsx | 6 +- messages/en.json | 6 +- 7 files changed, 100 insertions(+), 19 deletions(-) create mode 100644 components/cart/inline-add-to-cart.tsx rename components/grid/{three-items.tsx => homepage-products.tsx} (68%) diff --git a/app/[locale]/globals.css b/app/[locale]/globals.css index dc3410eaf..155116088 100644 --- a/app/[locale]/globals.css +++ b/app/[locale]/globals.css @@ -25,5 +25,5 @@ button { } [lang='ja'] .font-multilingual { - @apply font-japan; + @apply font-japan tracking-widest; } diff --git a/app/[locale]/page.tsx b/app/[locale]/page.tsx index 4ec31feac..318b6768d 100644 --- a/app/[locale]/page.tsx +++ b/app/[locale]/page.tsx @@ -1,4 +1,3 @@ -import { ThreeItemGrid } from 'components/grid/three-items'; import Footer from 'components/layout/footer'; import { SupportedLocale } from 'components/layout/navbar/language-control'; @@ -11,6 +10,7 @@ import HomeImage006 from '@images/home-images/home-image-006.webp'; import HomeImage007 from '@images/home-images/home-image-007.webp'; import HomeImage008 from '@images/home-images/home-image-008.webp'; import clsx from 'clsx'; +import { HomepageProducts } from 'components/grid/homepage-products'; import AboutNaraiPreview from 'components/layout/about-narai-preview'; import ConceptPreview from 'components/layout/concept-preview'; import LocationPreview from 'components/layout/location-preview'; @@ -52,7 +52,7 @@ export default async function HomePage({
- +
diff --git a/components/cart/inline-add-to-cart.tsx b/components/cart/inline-add-to-cart.tsx new file mode 100644 index 000000000..573e68c67 --- /dev/null +++ b/components/cart/inline-add-to-cart.tsx @@ -0,0 +1,75 @@ +'use client'; + +import clsx from 'clsx'; +import { addItem } from 'components/cart/actions'; +import LoadingDots from 'components/loading-dots'; +import { ProductVariant } from 'lib/shopify/types'; +import { useTranslations } from 'next-intl'; +import { useRouter, useSearchParams } from 'next/navigation'; +import { useTransition } from 'react'; + +export function InlineAddToCart({ + variants, + availableForSale +}: { + variants: ProductVariant[]; + availableForSale: boolean; +}) { + const router = useRouter(); + const searchParams = useSearchParams(); + const t = useTranslations('Index'); + + const [isPending, startTransition] = useTransition(); + const defaultVariantId = variants.length === 1 ? variants[0]?.id : undefined; + const variant = variants.find((variant: ProductVariant) => + variant.selectedOptions.every( + (option) => option.value === searchParams.get(option.name.toLowerCase()) + ) + ); + const selectedVariantId = variant?.id || defaultVariantId; + const title = !availableForSale + ? 'Out of stock' + : !selectedVariantId + ? 'Please select options' + : undefined; + + return ( + + ); +} diff --git a/components/grid/three-items.tsx b/components/grid/homepage-products.tsx similarity index 68% rename from components/grid/three-items.tsx rename to components/grid/homepage-products.tsx index 02671f646..84391b945 100644 --- a/components/grid/three-items.tsx +++ b/components/grid/homepage-products.tsx @@ -1,4 +1,5 @@ import clsx from 'clsx'; +import { InlineAddToCart } from 'components/cart/inline-add-to-cart'; import { SupportedLocale } from 'components/layout/navbar/language-control'; import { getCollectionProducts } from 'lib/shopify'; import type { Product } from 'lib/shopify/types'; @@ -6,13 +7,17 @@ import Link from 'next/link'; import Label from '../label'; import { GridTileImage } from './tile'; -function ThreeItemGridItem({ item, priority }: { item: Product; priority?: boolean }) { +function HomepageProductsItem({ item, priority }: { item: Product; priority?: boolean }) { const size = item?.variants?.[0]?.selectedOptions?.find((option) => option.name === 'Size'); const image = item?.variants?.[0]?.image; return !!image ? ( -
- +
+
{item?.summary?.value}
+
) : null; } -export async function ThreeItemGrid({ lang }: { lang?: SupportedLocale }) { +export async function HomepageProducts({ lang }: { lang?: SupportedLocale }) { // Collections that start with `hidden-*` are hidden from the search page. const homepageItems = await getCollectionProducts({ collection: 'hidden-homepage-featured-items', @@ -50,14 +56,14 @@ export async function ThreeItemGrid({ lang }: { lang?: SupportedLocale }) { return (
- - - + + +
); } diff --git a/components/label.tsx b/components/label.tsx index 3fbcf3c33..e5af536cd 100644 --- a/components/label.tsx +++ b/components/label.tsx @@ -15,7 +15,9 @@ const Label = ({ return (
-

{title}

+

+ {title} +

+

shop list

-

- {t('shops.subtitle')} -

+

{t('shops.subtitle')}

Date: Thu, 24 Aug 2023 00:27:28 -0700 Subject: [PATCH 07/13] wip: Saving work --- app/[locale]/about/about-narai-detail.tsx | 31 +++++++++++------- app/[locale]/bar/sagyobar-detail.tsx | 38 +++++++++++++---------- app/[locale]/company/company-detail.tsx | 16 +++++----- app/[locale]/concept/concept-detail.tsx | 12 +++---- components/layout/sagyobar-preview.tsx | 5 +-- components/prose.tsx | 3 +- messages/en.json | 15 ++++++--- messages/ja.json | 33 ++++++++++++-------- tailwind.config.js | 8 +++++ 9 files changed, 99 insertions(+), 62 deletions(-) diff --git a/app/[locale]/about/about-narai-detail.tsx b/app/[locale]/about/about-narai-detail.tsx index 7b56a3bc9..32aea08bd 100644 --- a/app/[locale]/about/about-narai-detail.tsx +++ b/app/[locale]/about/about-narai-detail.tsx @@ -16,7 +16,7 @@ export default function AboutNaraiDetail({ awards }: { awards: string }) { return (
-
+

{t('about.001.title')}

{t('about.001.subtitle')}

@@ -78,7 +78,7 @@ export default function AboutNaraiDetail({ awards }: { awards: string }) { >

{t('about.awards.title')}

-

{t('about.awards.subtitle')}

+

{t('about.awards.subtitle')}

@@ -94,7 +94,10 @@ export default function AboutNaraiDetail({ awards }: { awards: string }) { >
-

{t('about.materials.title')}

+
+

{t('about.materials.title')}

+

{t('about.materials.subtitle')}

+
-

{t('about.materials.water.title')}

+

+ {t('about.materials.water.title')} +

-

{t('about.materials.water.body')}

+

{t('about.materials.water.body')}

@@ -124,10 +129,12 @@ export default function AboutNaraiDetail({ awards }: { awards: string }) {
-

{t('about.materials.rice.title')}

+

+ {t('about.materials.rice.title')} +

-

{t('about.materials.rice.body')}

+

{t('about.materials.rice.body')}

@@ -142,10 +149,12 @@ export default function AboutNaraiDetail({ awards }: { awards: string }) {
-

{t('about.materials.koji.title')}

+

+ {t('about.materials.koji.title')} +

-

{t('about.materials.koji.body')}

+

{t('about.materials.koji.body')}

@@ -156,8 +165,8 @@ export default function AboutNaraiDetail({ awards }: { awards: string }) {
-

{t('about.irie.title')}

-

{t('about.irie.body')}

+

{t('about.irie.title')}

+

{t('about.irie.body')}

-
-

{t('bar.001.title')}

-

{t('bar.001.subtitle')}

+
+

{t('bar.001.title.line001')}

+

{t('bar.001.title.line002')}

+

{t('bar.001.title.line003')}

{t('bar.001.para001')}

@@ -95,13 +96,13 @@ export default function SagyobarDetail() {

{t('bar.access.title')}

-

{t('bar.access.para001')}

-

{t('bar.access.para002')}

-

{t('bar.access.para003')}

-

{t('bar.access.para004')}

-

{t('bar.access.para005')}

-

{t('bar.access.para006')}

-

{t('bar.access.para007')}

+

{t('bar.access.para001')}

+

{t('bar.access.para002')}

+

{t('bar.access.para003')}

+

{t('bar.access.para004')}

+

{t('bar.access.para005')}

+

{t('bar.access.para006')}

+

{t('bar.access.para007')}

@@ -111,9 +112,9 @@ export default function SagyobarDetail() {

{t('bar.hours.title')}

-

{t('bar.hours.para001')}

-

{t('bar.hours.para002')}

-

{t('bar.hours.para003')}

+

{t('bar.hours.para001')}

+

{t('bar.hours.para002')}

+

{t('bar.hours.para003')}

@@ -123,8 +124,11 @@ export default function SagyobarDetail() {

{t('bar.menu.title')}

-

- +

+ {t('bar.menu.para001')}

@@ -136,8 +140,8 @@ export default function SagyobarDetail() {
-

{t('bar.clerk.title')}

-

{t('bar.clerk.body')}

+

{t('bar.clerk.title')}

+

{t('bar.clerk.body')}

{t('company.subtitle001')}

-
    +
    • {t('company.name.label')}
      @@ -67,7 +67,7 @@ export default function CompanyDetail() {

      {t('company.subtitle002')}

      -
      +
      {t('company.irie.japanese')}
      {t('company.irie.english')}
      -
      {t('company.irie.role')}
      +
      {t('company.irie.role')}
      @@ -92,7 +92,7 @@ export default function CompanyDetail() {
      {t('company.nishikawa.japanese')}
      {t('company.nishikawa.english')}
      -
      {t('company.nishikawa.role')}
      +
      {t('company.nishikawa.role')}
      @@ -106,7 +106,7 @@ export default function CompanyDetail() {
      {t('company.sundberg.japanese')}
      {t('company.sundberg.english')}
      -
      {t('company.sundberg.role')}
      +
      {t('company.sundberg.role')}
      @@ -120,7 +120,7 @@ export default function CompanyDetail() {
      {t('company.yamano.japanese')}
      {t('company.yamano.english')}
      -
      {t('company.yamano.role')}
      +
      {t('company.yamano.role')}
      @@ -134,7 +134,7 @@ export default function CompanyDetail() {
      {t('company.yoshida.japanese')}
      {t('company.yoshida.english')}
      -
      {t('company.yoshida.role')}
      +
      {t('company.yoshida.role')}
      @@ -148,7 +148,7 @@ export default function CompanyDetail() {
      {t('company.ikegaya.japanese')}
      {t('company.ikegaya.english')}
      -
      {t('company.ikegaya.role')}
      +
      {t('company.ikegaya.role')}
diff --git a/app/[locale]/concept/concept-detail.tsx b/app/[locale]/concept/concept-detail.tsx index d79f5e088..ec637649a 100644 --- a/app/[locale]/concept/concept-detail.tsx +++ b/app/[locale]/concept/concept-detail.tsx @@ -29,19 +29,19 @@ export default function ConceptDetail() { >

{t('concept.title')}

-

+

{t('concept.para001')} {t('concept.para002')} {t('concept.para003')}

{t('concept.subtitle001')}

-

{t('concept.para004')}

+

{t('concept.para004')}

{t('concept.subtitle002')}

-

{t('concept.para005')}

-

+

{t('concept.para005')}

+

{t('concept.para006')} {t('concept.para007')} {t('concept.para008')}

-

{t('concept.para009')}

-

{t('concept.para010')}

+

{t('concept.para009')}

+

{t('concept.para010')}

diff --git a/components/layout/sagyobar-preview.tsx b/components/layout/sagyobar-preview.tsx index 31485308b..9a9575c6f 100644 --- a/components/layout/sagyobar-preview.tsx +++ b/components/layout/sagyobar-preview.tsx @@ -8,8 +8,9 @@ export default function SagyobarPreview() { return (
-
{t('home.previews.bar.title')}
-
{t('home.previews.bar.subtitle')}
+
{t('home.previews.bar.title.line001')}
+
{t('home.previews.bar.title.line002')}
+
{t('home.previews.bar.title.line003')}
{t('home.previews.bar.body')}
diff --git a/components/prose.tsx b/components/prose.tsx index 9d4614789..249fb4f48 100644 --- a/components/prose.tsx +++ b/components/prose.tsx @@ -11,7 +11,7 @@ const Prose: FunctionComponent = ({ html, className }) => {
= ({ html, className }) => { 'prose-tr:border-subtle', 'prose-ol:mt-8 prose-ol:list-decimal prose-ol:pl-6 prose-ul:mt-8 prose-ul:list-disc prose-ul:pl-6', 'dark:text-white dark:prose-headings:text-white dark:prose-a:text-white dark:prose-strong:text-white', + '!tracking-normal', className )} dangerouslySetInnerHTML={{ __html: html as string }} diff --git a/messages/en.json b/messages/en.json index f08ce0a25..a190c0bba 100644 --- a/messages/en.json +++ b/messages/en.json @@ -41,8 +41,11 @@ "button": "about narai" }, "bar": { - "title": "sagyobar : a brewery-operated bar & workspace", - "subtitle": "", + "title": { + "line001": "sagyobar : a brewery-operated bar & workspace", + "line002": "", + "line003": "" + }, "body": "Introducing sagyobar: a place where brewery operations (sagyo) and drinking (bar) come together. We have combined our brewery workspace, where we pack boxes and fulfill orders, with a place to enjoy sake served from our very own suginomori wagon. It is a renovated warehouse located a one-minute walk from the brewery, just across the railway tracks.", "button": "about sagyobar" }, @@ -127,6 +130,7 @@ }, "materials": { "title": "materials", + "subtitle": "", "water": { "title": "water - the foundation", "body": "While most breweries use well water with stable properties, narai uses natural mountain water flowing from an altitude of over 1,000 meters. This mountain water, which springs near the divide between the Shinano and Kiso Rivers, is one of the clearest in Japan with a hardness of less than 25 and a round, smooth texture." @@ -147,8 +151,11 @@ }, "bar": { "001": { - "title": "sagyobar : a brewery-operated bar & workspace", - "subtitle": "", + "title": { + "line001": "sagyobar : a brewery-operated bar & workspace", + "line002": "", + "line003": "" + }, "para001": "Introducing sagyobar: a place where brewery operations (sagyo) and drinking (bar) come together. We have combined our brewery workspace, where we pack boxes and fulfill orders, with a place to enjoy sake served from our very own suginomori wagon.", "para002": "The renovated warehouse was originally used for storing equipment and business supplies left from the old Suginomori Shuzo, the precursor to suginomori brewery that was established in 1793. While maintaining its original structure, we have revamped its entrance and installed new systems such as lighting and air conditioning. We utilize “P-boxes” – containers used to transport sake bottles – that can be flexibly arranged to transform the space into standing bar." }, diff --git a/messages/ja.json b/messages/ja.json index 3f5082637..dd4947b54 100644 --- a/messages/ja.json +++ b/messages/ja.json @@ -5,13 +5,13 @@ }, "menu": { "title": "menu", - "products": "商品", - "shops": "取り扱い店", - "about": "naraiについて", + "products": "products", + "shops": "shop list", + "about": "about narai", "bar": "sagyobar", - "concept": "コンセプト", - "stories": "ストーリー", - "company": "会社概要", + "concept": "concept", + "stories": "stories", + "company": "company", "contact": "contact" }, "shopping-guide": { @@ -41,8 +41,11 @@ "button": "naraiについて" }, "bar": { - "title": "酒蔵直営の角打ち&作業場", - "subtitle": "sagyobar", + "title": { + "line001": "酒蔵直営の", + "line002": "角打ち&作業場", + "line003": "sagyobar" + }, "body": "ここは、ボトルの箱詰めや出荷などの酒蔵作業 (sagyo) と、日本酒移動販売車「suginomori wagon」から提供されるSAKEを楽しむこともできる場(bar)が融合した、弊蔵の直営店です。酒蔵から徒歩１分。線路を挟み向かいの倉庫をリノベーションしました。", "button": "sagyobarについて" }, @@ -126,7 +129,8 @@ "subtitle": "受賞歴" }, "materials": { - "title": "自然を紡ぐ – naraiの素材", + "title": "自然を紡ぐ", + "subtitle": " – naraiの素材", "water": { "title": "水 – 土台", "body": "多くの酒蔵が水の性質が安定している井戸水を使用しますが、naraiは標高1,000m以上から流れる天然の山水を使用。信濃川と木曽川の分水嶺付近の湧き水であるこの山水は、日本でも有数な「硬度25以下」の透明感と丸みのある滑らかな舌触りが特徴です。" @@ -136,7 +140,7 @@ "body": "長野県安曇野エリアで、日本アルプスの恵みで農家を営む「ファームいちまる」によって、丁寧に育てられた米を使用しています。地産米にこだわり、杜氏自ら農家に通い、田植えなどを行いながら相談し、米を厳選しています。" }, "koji": { - "title": "酵母と麹 (発酵) – 構成要素", + "title": "酵母と麹 - 構成要素（発酵）", "body": "酵母は発酵力が強く、香りを上品にまとめることができることが特徴だと考えている長野由来の協会第7号を使用しています。米を糖に変える麹菌は、酵素力価の良いバランスの取れたものを採用しています。" } }, @@ -147,8 +151,11 @@ }, "bar": { "001": { - "title": "酒蔵直営の角打ち&作業場", - "subtitle": "sagyobar", + "title": { + "line001": "酒蔵直営の", + "line002": "角打ち&作業場", + "line003": "sagyobar" + }, "para001": "ここは、ボトルの箱詰めや出荷などの酒蔵作業 (sagyo) と、日本酒移動販売車「suginomori wagon」から提供されるsakeを楽しむこともできる場(bar)が融合した、弊蔵の直営店です。", "para002": "リノベーションした倉庫は、元々は先代の頃の杉の森酒蔵の機材や業務備品の保管用の場所として利用されていました。倉庫の建築はそのままに、入り口部分のゲートを刷新し、照明や空調等の設備を新設。什器は酒蔵の作業でも使用する酒瓶を運ぶための外装容器「P箱」を活用しています。このP箱を自在にレイアウトすることで、角打ちのようなスペースとしても活用できます。" }, @@ -214,7 +221,7 @@ }, "address": { "label": "所在地", - "value": "〒399-6303長野県塩尻市奈良井551-1" + "value": "〒399-6303　長野県塩尻市奈良井551-1" }, "telephone": { "label": "電話番号", diff --git a/tailwind.config.js b/tailwind.config.js index 7b5938c94..462376316 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -17,10 +17,18 @@ module.exports = { title: ['var(--font-cinzel)', 'serif'], japan: ['var(--font-noto)', 'serif'] }, + fontSize: { + '6xl': '65px', + '5xl': '45px', + '3xs': '.5rem' + }, aspectRatio: { tall: '596 / 845', video: '1792 / 750' }, + maxWidth: { + title: '281px' + }, keyframes: { fadeIn: { from: { opacity: 0 }, From a5b31df45636b85b533106cf26ca4285c1f56baa Mon Sep 17 00:00:00 2001 From: Sol Irvine Date: Thu, 24 Aug 2023 00:36:51 -0700 Subject: [PATCH 08/13] wip: Saving work --- .env.example | 2 +- components/layout/menu/modal.tsx | 4 ++++ components/logo-square.tsx | 4 ++-- 3 files changed, 7 insertions(+), 3 deletions(-) diff --git a/.env.example b/.env.example index d6308787f..a81a1918c 100644 --- a/.env.example +++ b/.env.example @@ -1,4 +1,4 @@ -COMPANY_NAME="Suginomori Brewery" +COMPANY_NAME="suginomori brewery" TWITTER_SITE="https://narai.jp" SITE_NAME="suginomori brewery" SHOPIFY_REVALIDATION_SECRET= diff --git a/components/layout/menu/modal.tsx b/components/layout/menu/modal.tsx index e8a513159..7a67ce001 100644 --- a/components/layout/menu/modal.tsx +++ b/components/layout/menu/modal.tsx @@ -3,6 +3,7 @@ import { Dialog, Transition } from '@headlessui/react'; import clsx from 'clsx'; import CloseIcon from 'components/icons/close'; +import Logo from 'components/icons/logo'; import MenuIcon from 'components/icons/menu'; import { useLocale, useTranslations } from 'next-intl'; import Link from 'next/link'; @@ -55,6 +56,9 @@ export function MenuModal({ scrolled }: { scrolled: boolean }) {
+
+ +
Date: Thu, 24 Aug 2023 01:25:52 -0700 Subject: [PATCH 09/13] wip: Saving work --- app/[locale]/disclosures/disclosures.tsx | 4 ++-- app/[locale]/shop-list/page.tsx | 8 ++++---- .../shop-list/{ShopsTitle.tsx => shops-nav.tsx} | 6 +++--- components/grid/homepage-products.tsx | 13 +++++++++++-- components/label.tsx | 2 +- components/layout/about-narai-preview.tsx | 6 +++--- components/layout/concept-preview.tsx | 8 ++++---- components/layout/footer-menu.tsx | 4 ++-- components/layout/footer.tsx | 8 ++++---- components/layout/location-preview.tsx | 8 ++++---- components/layout/newsletter-signup.tsx | 6 +++--- components/layout/sagyobar-preview.tsx | 12 ++++++------ components/layout/stories-preview.tsx | 2 +- 13 files changed, 48 insertions(+), 39 deletions(-) rename app/[locale]/shop-list/{ShopsTitle.tsx => shops-nav.tsx} (66%) diff --git a/app/[locale]/disclosures/disclosures.tsx b/app/[locale]/disclosures/disclosures.tsx index c8b97dd96..872d87ed2 100644 --- a/app/[locale]/disclosures/disclosures.tsx +++ b/app/[locale]/disclosures/disclosures.tsx @@ -12,8 +12,8 @@ export default function Disclosures() { {t('disclosurePage.title')}
-
-
+
+
{t('disclosurePage.distributor.label')}
diff --git a/app/[locale]/shop-list/page.tsx b/app/[locale]/shop-list/page.tsx index 9f927d149..6b2ea663d 100644 --- a/app/[locale]/shop-list/page.tsx +++ b/app/[locale]/shop-list/page.tsx @@ -8,7 +8,7 @@ import { getCart, getPage } from 'lib/shopify'; import { cookies } from 'next/headers'; import { notFound } from 'next/navigation'; import { Suspense } from 'react'; -import ShopsTitle from './ShopsTitle'; +import ShopsNav from './shops-nav'; export const runtime = 'edge'; @@ -50,9 +50,9 @@ export default async function Page({ params }: { params: { locale?: SupportedLoc
- -

{page.title}

- + +

{page.title}

+
diff --git a/app/[locale]/shop-list/ShopsTitle.tsx b/app/[locale]/shop-list/shops-nav.tsx similarity index 66% rename from app/[locale]/shop-list/ShopsTitle.tsx rename to app/[locale]/shop-list/shops-nav.tsx index 252ed7807..08af18f65 100644 --- a/app/[locale]/shop-list/ShopsTitle.tsx +++ b/app/[locale]/shop-list/shops-nav.tsx @@ -3,11 +3,11 @@ import { useTranslations } from 'next-intl'; import Link from 'next/link'; -export default function ShopsTitle() { +export default function ShopsNav() { const t = useTranslations('Index'); return (
-
+
← @@ -15,7 +15,7 @@ export default function ShopsTitle() {
|
-
{t('shops.title')}
+
{t('shops.title')}
); diff --git a/components/grid/homepage-products.tsx b/components/grid/homepage-products.tsx index 84391b945..3d8a08e1f 100644 --- a/components/grid/homepage-products.tsx +++ b/components/grid/homepage-products.tsx @@ -1,3 +1,4 @@ +import { ChevronRightIcon } from '@heroicons/react/24/outline'; import clsx from 'clsx'; import { InlineAddToCart } from 'components/cart/inline-add-to-cart'; import { SupportedLocale } from 'components/layout/navbar/language-control'; @@ -17,7 +18,7 @@ function HomepageProductsItem({ item, priority }: { item: Product; priority?: bo 'col-span-1 row-span-1 flex flex-col justify-between space-y-6 md:col-span-2 md:row-span-1' )} > - +
-
{item?.summary?.value}
+
+ {item?.summary?.value}{' '} + + Read more. + + + + +
diff --git a/components/label.tsx b/components/label.tsx index e5af536cd..1f9e82bdf 100644 --- a/components/label.tsx +++ b/components/label.tsx @@ -18,7 +18,7 @@ const Label = ({

{title}

-
+
-
{t('home.previews.about-narai.title')}
-
{t('home.previews.about-narai.subtitle')}
+
{t('home.previews.about-narai.title')}
+
{t('home.previews.about-narai.subtitle')}
-
+
{t('home.previews.about-narai.body')}
diff --git a/components/layout/concept-preview.tsx b/components/layout/concept-preview.tsx index e915f93a6..5dafc36e5 100644 --- a/components/layout/concept-preview.tsx +++ b/components/layout/concept-preview.tsx @@ -8,14 +8,14 @@ export default function ConceptPreview() { return (
-
{t('home.previews.concept.title')}
-
{t('home.previews.concept.subtitle')}
+
{t('home.previews.concept.title')}
+
{t('home.previews.concept.subtitle')}
-
+
{t('home.previews.concept.body')}
{t('home.previews.concept.button')} diff --git a/components/layout/footer-menu.tsx b/components/layout/footer-menu.tsx index 585d3b1b1..7e1d043e8 100644 --- a/components/layout/footer-menu.tsx +++ b/components/layout/footer-menu.tsx @@ -10,7 +10,7 @@ export default function FooterMenu() {
{t('menu.title')}
-