From 8f0801689cd8bd6f19df8a3a075ffd07f55dae7f Mon Sep 17 00:00:00 2001 From: Chloe Date: Mon, 27 May 2024 16:48:22 +0700 Subject: [PATCH] feat: homepage and integrate with shopify page Signed-off-by: Chloe --- app/page.tsx | 39 +++++----- app/product/[handle]/page.tsx | 2 +- app/search/[collection]/opengraph-image.tsx | 2 +- app/search/[collection]/page.tsx | 8 +- app/search/layout.tsx | 2 +- components/breadcrumb/index.tsx | 2 +- components/filters/field.tsx | 7 +- components/filters/filters-list.tsx | 26 +++++-- components/filters/hompage-filters.tsx | 29 ++++++++ components/hero.tsx | 78 ++++++++++++++++++++ components/home-page-content.tsx | 19 +++++ components/layout/navbar/index.tsx | 2 +- components/layout/navbar/main-menu.tsx | 6 +- components/layout/search/header.tsx | 2 +- components/page/accordion-block.tsx | 2 +- components/page/category-preview.tsx | 68 +++++++++++++++++ components/page/icon-with-text-block.tsx | 71 +++++------------- components/page/image-display.tsx | 13 +++- components/page/image-with-text-block.tsx | 2 +- components/page/layout.ts | 59 +++++++++++++++ components/page/page-content.tsx | 8 +- lib/shopify/index.ts | 11 ++- lib/shopify/queries/collection.ts | 4 +- lib/shopify/types.ts | 11 ++- public/hero-image.jpeg | Bin 0 -> 529177 bytes tailwind.config.js | 3 +- 26 files changed, 369 insertions(+), 107 deletions(-) create mode 100644 components/filters/hompage-filters.tsx create mode 100644 components/hero.tsx create mode 100644 components/home-page-content.tsx create mode 100644 components/page/category-preview.tsx create mode 100644 components/page/layout.ts create mode 100644 public/hero-image.jpeg diff --git a/app/page.tsx b/app/page.tsx index fad56a392..92fd26864 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,32 +1,35 @@ -import { Carousel } from 'components/carousel'; -import YMMFilters, { YMMFiltersPlaceholder } from 'components/filters'; -import { ThreeItemGrid } from 'components/grid/three-items'; +import Hero from 'components/hero'; +import HomePageContent from 'components/home-page-content'; import Footer from 'components/layout/footer'; +import { getPage } from 'lib/shopify'; +import { Metadata } from 'next'; import { Suspense } from 'react'; export const runtime = 'edge'; -export const metadata = { - description: 'High-performance ecommerce store built with Next.js, Vercel, and Shopify.', - openGraph: { - type: 'website' - } -}; +export async function generateMetadata(): Promise { + const page = await getPage('home-page'); + + return { + title: page?.seo?.title || page?.title, + description: page?.seo?.description || page?.bodySummary, + openGraph: { + type: 'website' + } + }; +} export default async function HomePage() { return ( <> -
- }> - - -
- - - + +
-
+ +
+ +