crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-05-14 13:47:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

Intitial commit

Browse Source
This commit is contained in:
Henrik Larsson 2023-08-18 15:31:44 +02:00
parent 4245628da1
commit f8183a5a69
13 changed files with 268 additions and 141 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
app/(site)/[locale]/page.tsx
View File

@ -1,9 +1,9 @@
import HomePage from '@/components/pages/home-page';
import HomePagePreview from '@/components/pages/home-page-preview';
import PreviewProvider from '@/components/preview-provider';
import { homePageQuery } from 'lib/sanity/queries';
import { getCachedClient } from 'lib/sanity/sanity.client';
import { homePageQuery } from '@/lib/sanity/queries';
import { getHomePage } from '@/lib/sanity/sanity.fetch';
import { Metadata } from 'next';
import { LiveQuery } from 'next-sanity/preview/live-query';
import { draftMode } from 'next/headers';
import { notFound } from 'next/navigation';
@ -13,15 +13,15 @@ export const dynamic = 'force-dynamic';
export async function generateMetadata({
params
}: {
params: { slug: string; locale: string };
params: { locale: string };
}): Promise<Metadata> {
const homePage = await getCachedClient()(homePageQuery, params);
const homePage = await getHomePage(params.locale);
if (!homePage) return notFound();
return {
title: homePage.seo.title || homePage.title,
description: homePage.seo.description || homePage.description
title: homePage?.seo?.title || homePage.title,
description: homePage?.seo?.description
};
}
interface HomePageParams {
@ -31,19 +31,22 @@ interface HomePageParams {
}
export default async function IndexPage({ params }: HomePageParams) {
const preview = draftMode().isEnabled ? { token: process.env.SANITY_API_READ_TOKEN } : undefined;
// const preview = draftMode().isEnabled ? { token: process.env.SANITY_API_READ_TOKEN } : undefined;
const data = await getCachedClient(preview)(homePageQuery, params);
const data = await getHomePage(params.locale);
if (!data) return notFound();
if (preview && preview.token) {
return (
<PreviewProvider token={preview.token}>
<HomePagePreview initialData={data} params={params} />
</PreviewProvider>
);
if (!data && !draftMode().isEnabled) {
notFound();
}
return <HomePage data={data} />;
return (
<LiveQuery
enabled={draftMode().isEnabled}
query={homePageQuery}
initialData={data}
as={HomePagePreview}
>
<HomePage data={data} />
</LiveQuery>
);
}

11
components/layout/footer/footer.tsx
View File

@ -1,6 +1,5 @@
import Text from '@/components/ui/text';
import { footerMenusQuery } from '@/lib/sanity/queries';
import { getCachedClient } from '@/lib/sanity/sanity.client';
// import { footerMenusQuery } from '@/lib/sanity/queries';
// import { getCachedClient } from '@/lib/sanity/sanity.client';
import LocaleSwitcher from 'components/ui/locale-switcher/locale-switcher';
import Logo from 'components/ui/logo/logo';
import Link from 'next/link';
@ -15,7 +14,7 @@ export default async function Footer({ locale }: FooterProps) {
locale: locale
};
const footerMenus = await getCachedClient()(footerMenusQuery, params);
// const footerMenus = await getCachedClient()(footerMenusQuery, params);
return (
<footer className="border-t border-ui-border bg-app">
@ -27,7 +26,7 @@ export default async function Footer({ locale }: FooterProps) {
<LocaleSwitcher />
</div>
{footerMenus.length > 0 && (
{/* {footerMenus.length > 0 && (
<div className="grid w-full grid-cols-2 gap-4 p-4 lg:grid-cols-4 lg:gap-8 lg:px-8 lg:py-6 2xl:px-16 2xl:py-8">
{footerMenus.map((menu: object | any, index: number) => {
return (
@ -61,7 +60,7 @@ export default async function Footer({ locale }: FooterProps) {
);
})}
</div>
)}
)} */}
<div className="flex items-center justify-center border-t border-ui-border bg-black px-4 py-3 lg:px-8 2xl:px-16">
<CopyRight />

18
components/layout/header/header.tsx
View File

@ -1,14 +1,10 @@
import { categoriesQuery } from '@/lib/sanity/queries';
import { getCachedClient } from '@/lib/sanity/sanity.client';
import Cart from 'components/cart';
import OpenCart from 'components/cart/open-cart';
import Logo from 'components/ui/logo/logo';
import Link from 'next/link';
import { Suspense } from 'react';
import DesktopMenu from './desktop-menu/desktop-menu';
import HeaderRoot from './header-root';
import MobileMenuModal from './mobile-menu/modal';
import OpenMobileMenu from './mobile-menu/open-mobile-menu';
import SearchModal from './search/modal';
import OpenSearch from './search/open-search';
@ -18,10 +14,10 @@ interface HeaderProps {
locale: string;
}
export default async function Header({ locale }: HeaderProps) {
const params = {
locale: locale
};
const mainMenu = await getCachedClient()(categoriesQuery, params);
// const params = {
// locale: locale
// };
// const mainMenu = await getCachedClient()(categoriesQuery, params);
return (
<HeaderRoot>
@ -29,7 +25,7 @@ export default async function Header({ locale }: HeaderProps) {
<div className="relative flex w-full items-center justify-between px-4 py-2 lg:px-8 2xl:px-16">
<div className="-translate-x-2 transform md:hidden">
<Suspense fallback={<OpenMobileMenu />}>
<MobileMenuModal items={mainMenu} />
{/* <MobileMenuModal items={mainMenu} /> */}
</Suspense>
</div>
@ -44,9 +40,7 @@ export default async function Header({ locale }: HeaderProps) {
</div>
<div className="absolute left-1/2 top-1/2 hidden -translate-x-1/2 -translate-y-1/2 transform md:flex">
<Suspense>
<DesktopMenu items={mainMenu} />
</Suspense>
<Suspense>{/* <DesktopMenu items={mainMenu} /> */}</Suspense>
</div>
<div className="flex translate-x-2 transform justify-end space-x-1">
<Suspense fallback={<OpenSearch />}>

7
components/modules/hero/hero.tsx
View File

@ -7,7 +7,7 @@ interface HeroProps {
text?: string;
label?: string;
title: string;
image: object | any;
image?: { asset?: any };
color?: string;
overlay?: boolean;
link: {
@ -31,6 +31,8 @@ const heroSize = {
const Hero = ({ variant, title, text, label, image, link, color, overlay }: HeroProps) => {
const heroClass = heroSize[variant as HeroSize] || heroSize.fullScreen;
console.log(image);
return (
<div
className={`relative w-screen ${heroClass} relative flex flex-col justify-end bg-neutral-300 text-high-contrast`}
@ -38,10 +40,9 @@ const Hero = ({ variant, title, text, label, image, link, color, overlay }: Hero
{image && (
<SanityImage
image={image}
alt={image.alt}
priority={true}
className="absolute inset-0 z-10 h-full w-full object-cover"
sizes="100vw"
size="100vw"
fill
/>
)}

6
components/pages/home-page.tsx
View File

@ -1,10 +1,12 @@
import DynamicContentManager from '@/components/layout/dynamic-content-manager/dynamic-content-manager';
import type { HomePagePayload } from '@/lib/sanity/sanity.types';
interface IndexPageParams {
data: object | any;
data: HomePagePayload | null;
}
export default function HomePage({ data }: IndexPageParams) {
// console.log(data);
return (
<>
<DynamicContentManager content={data?.content} />;

150
components/ui/sanity-image/sanity-image.tsx
View File

@ -1,78 +1,112 @@
'use client';
import { urlForImage } from 'lib/sanity/sanity.image';
import { cn } from 'lib/utils';
import Image from 'next/image';
interface SanityImageProps {
image: object | any;
alt: string;
alt?: string;
priority?: boolean;
width?: number;
height?: number;
quality?: number;
sizes?: string;
size?: string;
className?: string;
fill?: boolean;
}
const placeholderImg = '/product-img-placeholder.svg';
// const placeholderImg = '/product-img-placeholder.svg';
export default function SanityImage(props: SanityImageProps) {
const {
image: source,
priority = false,
quality = 75,
alt = '',
height = 1080,
width = 1080,
sizes = '100vw',
className,
fill = false
} = props;
export default function SanityImage({
image,
alt = 'Cover image',
width = 3500,
height = 2000,
size = '100vw',
fill = false,
className
}: SanityImageProps) {
const imageUrl = image && urlForImage(image)?.height(height).width(width).fit('crop').url();
const rootClassName = cn('w-full h-auto', className);
console.log(imageUrl);
const image = source?.asset?._rev ? (
<>
{fill ? (
return (
<div className={`w-full overflow-hidden rounded-[3px] bg-gray-50 ${className}`}>
{fill && imageUrl && (
<Image
className={`${rootClassName}`}
placeholder="blur"
fill
alt={alt}
src={urlForImage(source).quality(quality).url()}
sizes={sizes}
priority={priority}
blurDataURL={source.asset.metadata.lqip}
/>
) : (
<Image
className={`${rootClassName}`}
placeholder="blur"
width={width}
height={height}
alt={alt}
src={urlForImage(source).width(width).height(height).quality(quality).url()}
sizes={sizes}
priority={priority}
blurDataURL={source.asset.metadata.lqip}
fill={fill}
className="absolute h-full w-full object-cover"
alt={alt ? alt : ''}
sizes={size}
src={imageUrl}
/>
)}
</>
) : (
<>
<Image
className={`${rootClassName}`}
width={width}
height={height}
alt={alt}
src={placeholderImg}
sizes={sizes}
priority={false}
/>
</>
);
return image;
{imageUrl && (
<Image
className="absolute h-full w-full object-cover"
alt={alt ? alt : ''}
width={width}
height={height}
sizes={size}
src={imageUrl}
/>
)}
</div>
);
}
// export default function SanityImage(props: SanityImageProps) {
// const {
// image: source,
// priority = false,
// alt = '',
// height = 1080,
// width = 1080,
// sizes = '100vw',
// className,
// fill = false
// } = props;
// const rootClassName = cn('w-full h-auto', className);
// const image = source?.asset ? (
// <>
// {fill ? (
// <Image
// className={`${rootClassName}`}
// placeholder="blur"
// fill
// alt={alt}
// src={urlForImage(source).url()}
// sizes={sizes}
// priority={priority}
// blurDataURL={source.asset.metadata.lqip}
// />
// ) : (
// <Image
// className={`${rootClassName}`}
// placeholder="blur"
// width={width}
// height={height}
// alt={alt}
// src={urlForImage(source).width(width).height(height).url()}
// sizes={sizes}
// priority={priority}
// blurDataURL={source.asset.metadata.lqip}
// />
// )}
// </>
// ) : (
// <>
// <Image
// className={`${rootClassName}`}
// width={width}
// height={height}
// alt={alt}
// src={placeholderImg}
// sizes={sizes}
// priority={false}
// />
// </>
// );
// return image;
// }

33
lib/sanity/sanity.api.ts Normal file
View File

@ -0,0 +1,33 @@
/**
* As this file is reused in several other files, try to keep it lean and small.
* Importing other npm packages here could lead to needlessly increasing the client bundle size, or end up in a server-only function that don't need it.
*/
export const dataset = assertValue(
process.env.NEXT_PUBLIC_SANITY_DATASET,
'Missing environment variable: NEXT_PUBLIC_SANITY_DATASET',
)
export const projectId = assertValue(
process.env.NEXT_PUBLIC_SANITY_PROJECT_ID,
'Missing environment variable: NEXT_PUBLIC_SANITY_PROJECT_ID',
)
// see https://www.sanity.io/docs/api-versioning for how versioning works
export const apiVersion =
process.env.NEXT_PUBLIC_SANITY_API_VERSION || '2023-06-21'
// This is the document id used for the preview secret that's stored in your dataset.
// The secret protects against unauthorized access to your draft content and have a lifetime of 60 minutes, to protect against bruteforcing.
export const previewSecretId: `${string}.${string}` = 'preview.secret'
// See the app/api/revalidate/route.ts for how this is used
export const revalidateSecret = process.env.SANITY_REVALIDATE_SECRET
function assertValue<T>(v: T | undefined, errorMessage: string): T {
if (v === undefined) {
throw new Error(errorMessage)
}
return v
}

45
lib/sanity/sanity.client.ts
View File

@ -1,31 +1,16 @@
import type { SanityClient } from "@sanity/client";
import { createClient } from "@sanity/client";
import { cache } from "react";
import { createClient } from 'next-sanity'
import {
apiVersion,
dataset,
projectId,
revalidateSecret,
} from './sanity.api'
export function getClient(preview?: {token?: string}): SanityClient {
const client = createClient({
projectId: process.env.NEXT_PUBLIC_SANITY_PROJECT_ID,
dataset: process.env.NEXT_PUBLIC_SANITY_DATASET,
apiVersion: process.env.NEXT_PUBLIC_SANITY_API_VERSION,
useCdn: true,
perspective: 'published',
})
if (preview) {
if (!preview.token) {
throw new Error('You must provide a token to preview drafts')
}
return client.withConfig({
token: preview.token,
useCdn: false,
ignoreBrowserTokenWarning: true,
perspective: 'previewDrafts',
})
}
return client
}
export const getCachedClient = (preview?: {token?: string}) => {
const client = getClient(preview);
return cache(client.fetch.bind(client));
};
export const client = createClient({
projectId,
dataset,
apiVersion,
// If webhook revalidation is setup we want the freshest content, if not then it's best to use the speedy CDN
useCdn: revalidateSecret ? false : true,
perspective: 'published',
})

61
lib/sanity/sanity.fetch.ts Normal file
View File

@ -0,0 +1,61 @@
import 'server-only'
import type { QueryParams } from '@sanity/client'
import { client } from './sanity.client'
import { draftMode } from 'next/headers'
import { revalidateSecret } from './sanity.api'
import { homePageQuery } from './queries'
import { HomePagePayload } from './sanity.types'
export const token = process.env.SANITY_API_READ_TOKEN
const DEFAULT_PARAMS = {} as QueryParams
const DEFAULT_TAGS = [] as string[]
export async function sanityFetch<QueryResponse>({
query,
params = DEFAULT_PARAMS,
tags = DEFAULT_TAGS,
}: {
query: string
params?: QueryParams
tags: string[]
}): Promise<QueryResponse> {
const isDraftMode = draftMode().isEnabled
if (isDraftMode && !token) {
throw new Error(
'The `SANITY_API_READ_TOKEN` environment variable is required.',
)
}
// @TODO this won't be necessary after https://github.com/sanity-io/client/pull/299 lands
const sanityClient =
client.config().useCdn && isDraftMode
? client.withConfig({ useCdn: false })
: client
return sanityClient.fetch<QueryResponse>(query, params, {
// We only cache if there's a revalidation webhook setup
cache: revalidateSecret ? 'force-cache' : 'no-store',
...(isDraftMode && {
cache: undefined,
token: token,
perspective: 'previewDrafts',
}),
next: {
...(isDraftMode && { revalidate: 30 }),
tags,
},
})
}
export function getHomePage(locale: string) {
return sanityFetch<HomePagePayload | null>({
query: homePageQuery,
params: { locale },
tags: ['home', 'products', 'categories'],
})
}

7
lib/sanity/sanity.image.ts
View File

@ -1,7 +1,10 @@
import createImageUrlBuilder from '@sanity/image-url'
import { getClient } from './sanity.client'
import { dataset, projectId } from './sanity.api'
export const imageBuilder = createImageUrlBuilder(getClient())
const imageBuilder = createImageUrlBuilder({
projectId: projectId || '',
dataset: dataset || '',
})
export const urlForImage = (source: any) =>
imageBuilder.image(source).auto('format').fit('crop')

12
lib/sanity/sanity.types.ts Normal file
View File

@ -0,0 +1,12 @@
import type { Image } from 'sanity'
export interface HomePagePayload {
content?: []
title?: string
_type?: string
seo?: {
title?: string;
description?: string;
image: Image
}
}

2
package.json
View File

@ -44,7 +44,7 @@
"is-empty-iterable": "^3.0.0",
"next": "13.4.13",
"next-intl": "2.19.1",
"next-sanity": "^5.3.0",
"next-sanity": "^5.4.2",
"react": "18.2.0",
"react-cookie": "^4.1.1",
"react-dom": "18.2.0",

18
pnpm-lock.yaml generated
View File

@ -81,8 +81,8 @@ dependencies:
specifier: 2.19.1
version: 2.19.1(next@13.4.13)(react@18.2.0)
next-sanity:
specifier: ^5.3.0
version: 5.3.0(@sanity/client@6.4.4)(@sanity/icons@2.4.1)(@sanity/types@3.15.0)(@sanity/ui@1.7.4)(@types/styled-components@5.1.26)(next@13.4.13)(react@18.2.0)(sanity@3.15.0)(styled-components@5.3.11)
specifier: ^5.4.2
version: 5.4.2(@sanity/client@6.4.4)(@sanity/icons@2.4.1)(@sanity/types@3.15.0)(@sanity/ui@1.7.4)(@types/styled-components@5.1.26)(next@13.4.13)(react@18.2.0)(sanity@3.15.0)(styled-components@5.3.11)
react:
specifier: 18.2.0
version: 18.2.0
@ -2409,11 +2409,11 @@ packages:
- supports-color
dev: false
/@sanity/preview-kit@3.0.0(@sanity/client@6.4.4)(react@18.2.0):
resolution: {integrity: sha512-LF83FQJ0kZgB8Dz8nolseiXh+AsX0UaNd3GhNLMrsmSjy6GCagNyQzCpadysQyuBZHftXgMN/fQ0/gfoMjNSDA==}
/@sanity/preview-kit@3.1.3(@sanity/client@6.4.4)(react@18.2.0):
resolution: {integrity: sha512-v8zqm4uxE42RXmYySrULfscvdIFPjLwIrBbhRb+qumZNdGkTZph3y0Zo9rdW9MnOEYwew0pz6BUq+n7y/NoRwA==}
engines: {node: '>=14'}
peerDependencies:
'@sanity/client': ^6.4.6
'@sanity/client': ^6.4.8
react: ^18.0.0
peerDependenciesMeta:
react:
@ -6101,11 +6101,11 @@ packages:
use-intl: 2.19.1(react@18.2.0)
dev: false
/next-sanity@5.3.0(@sanity/client@6.4.4)(@sanity/icons@2.4.1)(@sanity/types@3.15.0)(@sanity/ui@1.7.4)(@types/styled-components@5.1.26)(next@13.4.13)(react@18.2.0)(sanity@3.15.0)(styled-components@5.3.11):
resolution: {integrity: sha512-cBeO3QgIjR9UPjDedNfLT4m6vmeFlDn9HAVT/6q8CbMMf+bcpxQ94jpLGGkaPRzoeCy/XWKK4IXNQYDSs4ApIA==}
/next-sanity@5.4.2(@sanity/client@6.4.4)(@sanity/icons@2.4.1)(@sanity/types@3.15.0)(@sanity/ui@1.7.4)(@types/styled-components@5.1.26)(next@13.4.13)(react@18.2.0)(sanity@3.15.0)(styled-components@5.3.11):
resolution: {integrity: sha512-gLpS0GlapXtDjRUaPcZ9DUeiNSznhtqh0kyxygQS9MDtecCiphVAhXYwvJMQcxfY1u5KVWAxZMyy+Bs6h8G+jA==}
engines: {node: '>=16.14'}
peerDependencies:
'@sanity/client': ^6.4.6
'@sanity/client': ^6.4.8
'@sanity/icons': ^2.0.0
'@sanity/types': ^3.0.0
'@sanity/ui': ^1.0.0
@ -6117,7 +6117,7 @@ packages:
dependencies:
'@sanity/client': 6.4.4
'@sanity/icons': 2.4.1(react@18.2.0)
'@sanity/preview-kit': 3.0.0(@sanity/client@6.4.4)(react@18.2.0)
'@sanity/preview-kit': 3.1.3(@sanity/client@6.4.4)(react@18.2.0)
'@sanity/types': 3.15.0
'@sanity/ui': 1.7.4(react-dom@18.2.0)(react-is@18.2.0)(react@18.2.0)(styled-components@5.3.11)
'@sanity/webhook': 2.0.0