From 95d237c4ac694fcd174f9e73c5f3f519f8cbb92e Mon Sep 17 00:00:00 2001 From: Sol Irvine Date: Fri, 18 Aug 2023 18:32:01 +0900 Subject: [PATCH] wip: Working on footer --- app/[locale]/[page]/page.tsx | 4 +- app/[locale]/layout.tsx | 14 +-- app/[locale]/page.tsx | 2 +- .../[page] => shop-list}/ShopsTitle.tsx | 0 .../{shops/[page] => shop-list}/layout.tsx | 0 .../[page] => shop-list}/opengraph-image.tsx | 0 .../{shops/[page] => shop-list}/page.tsx | 16 +-- components/grid/three-items.tsx | 2 +- components/layout/footer-menu.tsx | 114 ++++++++++++------ components/layout/footer.tsx | 21 +++- components/layout/menu/modal.tsx | 6 +- components/layout/navbar/language-control.tsx | 2 +- components/layout/newsletter-footer.tsx | 6 +- components/layout/shoplist.tsx | 12 +- messages/en.json | 8 ++ messages/index.ts | 4 +- messages/ja.json | 8 ++ tailwind.config.js | 2 +- 18 files changed, 141 insertions(+), 80 deletions(-) rename app/[locale]/{shops/[page] => shop-list}/ShopsTitle.tsx (100%) rename app/[locale]/{shops/[page] => shop-list}/layout.tsx (100%) rename app/[locale]/{shops/[page] => shop-list}/opengraph-image.tsx (100%) rename app/[locale]/{shops/[page] => shop-list}/page.tsx (71%) diff --git a/app/[locale]/[page]/page.tsx b/app/[locale]/[page]/page.tsx index 28ae490b2..8d3820714 100644 --- a/app/[locale]/[page]/page.tsx +++ b/app/[locale]/[page]/page.tsx @@ -12,7 +12,7 @@ export const revalidate = 43200; // 12 hours in seconds export async function generateMetadata({ params }: { - params: { page: string; locale: SupportedLocale }; + params: { page: string; locale?: SupportedLocale }; }): Promise { const page = await getPage({ handle: params.page, language: params?.locale?.toUpperCase() }); @@ -32,7 +32,7 @@ export async function generateMetadata({ export default async function Page({ params }: { - params: { page: string; locale: SupportedLocale }; + params: { page: string; locale?: SupportedLocale }; }) { const page = await getPage({ handle: params.page, language: params?.locale?.toUpperCase() }); diff --git a/app/[locale]/layout.tsx b/app/[locale]/layout.tsx index 72154a809..8d0736f5c 100644 --- a/app/[locale]/layout.tsx +++ b/app/[locale]/layout.tsx @@ -1,9 +1,9 @@ import Navbar from 'components/layout/navbar'; -import { Locale } from 'i18n-config'; -import { Noto_Sans_JP } from 'next/font/google'; +import { Noto_Serif_JP } from 'next/font/google'; import localFont from 'next/font/local'; import { ReactNode, Suspense } from 'react'; +import { SupportedLocale } from 'components/layout/navbar/language-control'; import { NextIntlClientProvider } from 'next-intl'; import { notFound } from 'next/navigation'; import './globals.css'; @@ -56,19 +56,13 @@ const alpina = localFont({ variable: '--font-alpina' }); -const noto = Noto_Sans_JP({ +const noto = Noto_Serif_JP({ subsets: ['latin'], display: 'swap', weight: ['300', '600'], variable: '--font-noto' }); -const mincho = localFont({ - src: '../fonts/A-OTF-A1MinchoStd-Bold.otf', - display: 'swap', - variable: '--font-mincho' -}); - export function generateStaticParams() { return [{ locale: 'en' }, { locale: 'ja' }]; } @@ -78,7 +72,7 @@ export default async function RootLayout({ params }: { children: ReactNode; - params: { locale: Locale }; + params: { locale?: SupportedLocale }; }) { let messages; try { diff --git a/app/[locale]/page.tsx b/app/[locale]/page.tsx index d30156ede..81f4d5f0f 100644 --- a/app/[locale]/page.tsx +++ b/app/[locale]/page.tsx @@ -25,7 +25,7 @@ export const metadata = { export default async function HomePage({ params: { locale } }: { - params: { locale: SupportedLocale }; + params: { locale?: SupportedLocale }; }) { return ( <> diff --git a/app/[locale]/shops/[page]/ShopsTitle.tsx b/app/[locale]/shop-list/ShopsTitle.tsx similarity index 100% rename from app/[locale]/shops/[page]/ShopsTitle.tsx rename to app/[locale]/shop-list/ShopsTitle.tsx diff --git a/app/[locale]/shops/[page]/layout.tsx b/app/[locale]/shop-list/layout.tsx similarity index 100% rename from app/[locale]/shops/[page]/layout.tsx rename to app/[locale]/shop-list/layout.tsx diff --git a/app/[locale]/shops/[page]/opengraph-image.tsx b/app/[locale]/shop-list/opengraph-image.tsx similarity index 100% rename from app/[locale]/shops/[page]/opengraph-image.tsx rename to app/[locale]/shop-list/opengraph-image.tsx diff --git a/app/[locale]/shops/[page]/page.tsx b/app/[locale]/shop-list/page.tsx similarity index 71% rename from app/[locale]/shops/[page]/page.tsx rename to app/[locale]/shop-list/page.tsx index 993f57965..99d7c8f2d 100644 --- a/app/[locale]/shops/[page]/page.tsx +++ b/app/[locale]/shop-list/page.tsx @@ -1,5 +1,6 @@ import type { Metadata } from 'next'; +import LogoNamemark from 'components/icons/namemark'; import { SupportedLocale } from 'components/layout/navbar/language-control'; import Prose from 'components/prose'; import { getPage } from 'lib/shopify'; @@ -13,9 +14,9 @@ export const revalidate = 43200; // 12 hours in seconds export async function generateMetadata({ params }: { - params: { page: string; locale: SupportedLocale }; + params: { locale?: SupportedLocale }; }): Promise { - const page = await getPage({ handle: params.page, language: params?.locale?.toUpperCase() }); + const page = await getPage({ handle: 'shop-list', language: params?.locale?.toUpperCase() }); if (!page) return notFound(); @@ -30,17 +31,16 @@ export async function generateMetadata({ }; } -export default async function Page({ - params -}: { - params: { page: string; locale: SupportedLocale }; -}) { - const page = await getPage({ handle: params.page, language: params?.locale?.toUpperCase() }); +export default async function Page({ params }: { params: { locale?: SupportedLocale } }) { + const page = await getPage({ handle: 'shop-list', language: params?.locale?.toUpperCase() }); if (!page) return notFound(); return (
+
+ +

{page.title}

diff --git a/components/grid/three-items.tsx b/components/grid/three-items.tsx index 20492d1e5..ba4c02fa5 100644 --- a/components/grid/three-items.tsx +++ b/components/grid/three-items.tsx @@ -35,7 +35,7 @@ function ThreeItemGridItem({ item, priority }: { item: Product; priority?: boole ); } -export async function ThreeItemGrid({ lang }: { lang: SupportedLocale }) { +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', diff --git a/components/layout/footer-menu.tsx b/components/layout/footer-menu.tsx index 4f6387edd..e9f697165 100644 --- a/components/layout/footer-menu.tsx +++ b/components/layout/footer-menu.tsx @@ -1,46 +1,88 @@ 'use client'; -import clsx from 'clsx'; -import { Menu } from 'lib/shopify/types'; +import { useTranslations } from 'next-intl'; import Link from 'next/link'; -import { usePathname } from 'next/navigation'; -import { useEffect, useState } from 'react'; -const FooterMenuItem = ({ item }: { item: Menu }) => { - const pathname = usePathname(); - const [active, setActive] = useState(pathname === item.path); - - useEffect(() => { - setActive(pathname === item.path); - }, [pathname, item.path]); +export default function FooterMenu() { + const t = useTranslations('Index'); return ( -
  • - - {item.title} - -
    • - ); -}; +
    +
    +
    {t('menu.title')}
    + +
    + +
    +
    {t('shopping-guide.title')}
    + +
    +
    ); } diff --git a/components/layout/footer.tsx b/components/layout/footer.tsx index 489250f7c..2759a93c8 100644 --- a/components/layout/footer.tsx +++ b/components/layout/footer.tsx @@ -1,4 +1,5 @@ -import { getMenu } from 'lib/shopify'; +import clsx from 'clsx'; +import FooterMenu from './footer-menu'; import NewsletterFooter from './newsletter-footer'; const { COMPANY_NAME, SITE_NAME } = process.env; @@ -6,16 +7,24 @@ const { COMPANY_NAME, SITE_NAME } = process.env; export default async function Footer() { const currentYear = new Date().getFullYear(); const copyrightDate = 2023 + (currentYear > 2023 ? `-${currentYear}` : ''); - const skeleton = 'w-full h-6 animate-pulse rounded bg-neutral-200 dark:bg-neutral-700'; - const menu = await getMenu('next-js-frontend-footer-menu'); const copyrightName = COMPANY_NAME || SITE_NAME || ''; return ( -