feat: Shop list working

app/[locale]/[page]/page.tsx

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

app/[locale]/page.tsx

@@ -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 (
     <>

app/[locale]/shops/[page]/ShopsTitle.tsx

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

app/[locale]/shops/[page]/layout.tsx

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

app/[locale]/shops/[page]/opengraph-image.tsx

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

app/[locale]/shops/[page]/page.tsx

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

components/grid/three-items.tsx

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

components/layout/menu/modal.tsx

@@ -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" />

components/layout/navbar/language-control.tsx

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

components/layout/shoplist.tsx

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

components/prose.tsx

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

messages/en.json

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

messages/ja.json

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