feat: Shop list working

This commit is contained in:
Sol Irvine 2023-08-17 16:47:47 +09:00
parent c1d06e90bb
commit 31ee315cfc
13 changed files with 153 additions and 28 deletions

View File

@ -1,5 +1,6 @@
import type { Metadata } from 'next';
import { SupportedLocale } from 'components/layout/navbar/language-control';
import Prose from 'components/prose';
import { getPage } from 'lib/shopify';
import { notFound } from 'next/navigation';
@ -11,9 +12,9 @@ export const revalidate = 43200; // 12 hours in seconds
export async function generateMetadata({
params
}: {
params: { page: string };
params: { page: string; locale: SupportedLocale };
}): Promise<Metadata> {
const page = await getPage({ handle: params.page });
const page = await getPage({ handle: params.page, language: params?.locale?.toUpperCase() });
if (!page) return notFound();
@ -28,13 +29,17 @@ export async function generateMetadata({
};
}
export default async function Page({ params }: { params: { page: string } }) {
const page = await getPage({ handle: params.page });
export default async function Page({
params
}: {
params: { page: string; locale: SupportedLocale };
}) {
const page = await getPage({ handle: params.page, language: params?.locale?.toUpperCase() });
if (!page) return notFound();
return (
<>
<div className="text-white">
<h1 className="mb-8 text-5xl font-bold">{page.title}</h1>
<Prose className="mb-8" html={page.body as string} />
<p className="text-sm italic">
@ -44,6 +49,6 @@ export default async function Page({ params }: { params: { page: string } }) {
day: 'numeric'
}).format(new Date(page.updatedAt))}.`}
</p>
</>
</div>
);
}

View File

@ -1,7 +1,7 @@
import { Carousel } from 'components/carousel';
import { ThreeItemGrid } from 'components/grid/three-items';
import Footer from 'components/layout/footer';
import { LanguageControl, SupportedLocales } from 'components/layout/navbar/language-control';
import { LanguageControl, SupportedLocale } from 'components/layout/navbar/language-control';
import clsx from 'clsx';
import LogoNamemark from 'components/icons/namemark';
@ -25,7 +25,7 @@ export const metadata = {
export default async function HomePage({
params: { locale }
}: {
params: { locale: SupportedLocales };
params: { locale: SupportedLocale };
}) {
return (
<>

View File

@ -0,0 +1,22 @@
'use client';
import { useTranslations } from 'next-intl';
import Link from 'next/link';
export default function ShopsTitle() {
const t = useTranslations('Index');
return (
<div>
<div className="flex flex-row items-baseline space-x-6 pb-12">
<Link href="/#shops">
<span className="flex flex-row items-center space-x-1.5">
<span></span>
<span>{t('shops.all')}</span>
</span>
</Link>
<div>|</div>
<div className="font-medium">{t('shops.title')}</div>
</div>
</div>
);
}

View File

@ -0,0 +1,15 @@
import Footer from 'components/layout/footer';
import { Suspense } from 'react';
export default function Layout({ children }: { children: React.ReactNode }) {
return (
<Suspense>
<div className="w-full">
<div className="mx-8 max-w-screen-2xl py-20 sm:mx-auto">
<Suspense>{children}</Suspense>
</div>
</div>
<Footer />
</Suspense>
);
}

View File

@ -0,0 +1,11 @@
import OpengraphImage from 'components/opengraph-image';
import { getPage } from 'lib/shopify';
export const runtime = 'edge';
export default async function Image({ params }: { params: { page: string } }) {
const page = await getPage({ handle: params.page });
const title = page.seo?.title || page.title;
return await OpengraphImage({ title });
}

View File

@ -0,0 +1,49 @@
import type { Metadata } from 'next';
import { SupportedLocale } from 'components/layout/navbar/language-control';
import Prose from 'components/prose';
import { getPage } from 'lib/shopify';
import { notFound } from 'next/navigation';
import ShopsTitle from './ShopsTitle';
export const runtime = 'edge';
export const revalidate = 43200; // 12 hours in seconds
export async function generateMetadata({
params
}: {
params: { page: string; locale: SupportedLocale };
}): Promise<Metadata> {
const page = await getPage({ handle: params.page, language: params?.locale?.toUpperCase() });
if (!page) return notFound();
return {
title: page.seo?.title || page.title,
description: page.seo?.description || page.bodySummary,
openGraph: {
publishedTime: page.createdAt,
modifiedTime: page.updatedAt,
type: 'article'
}
};
}
export default async function Page({
params
}: {
params: { page: string; locale: SupportedLocale };
}) {
const page = await getPage({ handle: params.page, language: params?.locale?.toUpperCase() });
if (!page) return notFound();
return (
<div className="font-multilingual min-h-screen px-4 text-white">
<ShopsTitle />
<h2 className="mb-8 text-3xl font-medium">{page.title}</h2>
<Prose className="mb-8" html={page.body as string} />
</div>
);
}

View File

@ -1,5 +1,5 @@
import clsx from 'clsx';
import { SupportedLocales } from 'components/layout/navbar/language-control';
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';
@ -35,15 +35,13 @@ function ThreeItemGridItem({ item, priority }: { item: Product; priority?: boole
);
}
export async function ThreeItemGrid({ lang }: { lang: SupportedLocales }) {
export async function ThreeItemGrid({ lang }: { lang: SupportedLocale }) {
// Collections that start with `hidden-*` are hidden from the search page.
const homepageItems = await getCollectionProducts({
collection: 'hidden-homepage-featured-items',
language: lang?.toUpperCase()
});
console.debug({ lang });
if (!homepageItems[0] || !homepageItems[1] || !homepageItems[2]) return null;
const [firstProduct, secondProduct, thirdProduct] = homepageItems;

View File

@ -6,7 +6,7 @@ import MenuIcon from 'components/icons/menu';
import { useLocale, useTranslations } from 'next-intl';
import Link from 'next/link';
import { Fragment, useRef, useState } from 'react';
import { LanguageControl, SupportedLocales } from '../navbar/language-control';
import { LanguageControl, SupportedLocale } from '../navbar/language-control';
export function MenuModal() {
const t = useTranslations('Index');
@ -58,7 +58,7 @@ export function MenuModal() {
<Dialog.Panel>
<div className="fixed right-5 top-6 z-40 px-2 py-1 md:top-11">
<div className="flex flex-row space-x-6">
<LanguageControl lang={locale as SupportedLocales} />
<LanguageControl lang={locale as SupportedLocale} />
<button ref={closeButtonRef} onClick={close} className="">
<CloseIcon className="h-10 w-10 stroke-current transition-opacity duration-150 hover:opacity-50" />

View File

@ -1,30 +1,39 @@
'use client';
import clsx from 'clsx';
import Link from 'next/link';
import Link from 'next-intl/link';
import { usePathname } from 'next/navigation';
export type SupportedLocales = 'en' | 'ja' | undefined;
export type SupportedLocale = 'en' | 'ja' | undefined;
export const LanguageControl = ({ lang }: { lang?: SupportedLocales }) => {
function removeItem<T>(arr: Array<T>, value: T): Array<T> {
const index = arr.indexOf(value);
if (index > -1) {
arr.splice(index, 1);
}
return arr;
}
export const LanguageControl = ({ lang }: { lang?: SupportedLocale }) => {
const pathName = usePathname();
const redirectedPathName = (locale: string) => {
if (!pathName) return '/';
const segments = pathName.split('/');
segments[1] = locale;
return segments.join('/');
const basePathName = () => {
const unjoined = pathName.split('/');
const unjoinedWithoutLocale = removeItem(unjoined, 'ja');
return unjoinedWithoutLocale.join('/') || '/';
};
return (
<div className="flex flex-row space-x-0">
<span className="px-2 py-4">
<Link
href={redirectedPathName('ja')}
href={basePathName()}
className={clsx(
lang === 'ja' ? 'opacity-100' : 'opacity-50 hover:opacity-70',
'transition-opacity duration-150'
)}
scroll={false}
locale="ja"
>
JP
</Link>
@ -32,12 +41,13 @@ export const LanguageControl = ({ lang }: { lang?: SupportedLocales }) => {
<span className="py-4">/</span>
<span className="px-2 py-4">
<Link
href={redirectedPathName('en')}
href={basePathName()}
className={clsx(
lang === 'en' ? 'opacity-100' : 'opacity-50 hover:opacity-70',
'transition-opacity duration-150'
)}
scroll={false}
locale="en"
>
EN
</Link>

View File

@ -6,10 +6,12 @@ import Link from 'next/link';
export default function Shoplist() {
const t = useTranslations('Index');
return (
<div className="mx-auto max-w-screen-2xl space-y-4 px-2">
<div className="mx-auto max-w-screen-2xl space-y-4 px-2" id="shops">
<div className="flex w-full flex-row items-baseline space-x-12 pb-6">
<h2 className="font-serif text-6xl tracking-wider">shop list</h2>
<h3 className="font-multilingual font-serif text-2xl tracking-wider">{t('shops.title')}</h3>
<h3 className="font-multilingual font-serif text-2xl tracking-wider">
{t('shops.subtitle')}
</h3>
</div>
<div className="grid w-full grid-cols-2 gap-px">
<Link

View File

@ -10,7 +10,16 @@ const Prose: FunctionComponent<TextProps> = ({ html, className }) => {
return (
<div
className={clsx(
'prose mx-auto max-w-6xl text-base leading-7 text-black prose-headings:mt-8 prose-headings:font-semibold prose-headings:tracking-wide prose-headings:text-black prose-h1:text-5xl prose-h2:text-4xl prose-h3:text-3xl prose-h4:text-2xl prose-h5:text-xl prose-h6:text-lg prose-a:text-black prose-a:underline hover:prose-a:text-neutral-300 prose-strong:text-black 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',
'prose mx-auto max-w-screen-2xl text-lg leading-7',
'font-multilingual font-normal text-white',
'prose-headings:mt-8 prose-headings:font-semibold prose-headings:tracking-wide prose-headings:text-white',
'prose-h1:text-5xl prose-h2:text-4xl prose-h3:text-3xl prose-h4:text-2xl prose-h5:text-xl prose-h6:text-lg',
'prose-a:text-white/50 prose-a:underline hover:prose-a:text-white',
'prose-strong:text-white',
'prose-td:border-opacity-20 prose-td:py-4 prose-td:font-normal',
'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',
className
)}
dangerouslySetInnerHTML={{ __html: html as string }}

View File

@ -17,7 +17,9 @@
"button": "Notify me"
},
"shops": {
"title": "",
"title": "Shop list",
"subtitle": "",
"all": "All shops",
"hokkaido": "Hokkaido / North",
"kanto": "Kanto",
"chubu": "Chubu",

View File

@ -18,6 +18,8 @@
},
"shops": {
"title": "取り扱い店",
"subtitle": "取り扱い店",
"all": "全店",
"hokkaido": "北海道・東北",
"kanto": "関東",
"chubu": "中部",