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

Merged main into revalidate

Browse Source
This commit is contained in:
Henrik Larsson 2023-07-03 14:10:53 +02:00
commit 7bde54435c
4 changed files with 62 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
app/[locale]/[[...slug]]/page.tsx
View File

@ -1,9 +1,12 @@
// Next
import type { Metadata } from 'next';
import { draftMode } from 'next/headers';
// Sanity
import PreviewSuspense from 'components/preview-suspense'; import PreviewSuspense from 'components/preview-suspense';
import getQueryFromSlug from 'helpers/getQueryFromSlug'; import getQueryFromSlug from 'helpers/getQueryFromSlug';
import { docQuery } from 'lib/sanity/queries'; import { docQuery } from 'lib/sanity/queries';
import { client } from 'lib/sanity/sanity.client'; import { clientFetch } from 'lib/sanity/sanity.client';
import type { Metadata } from 'next'; // Pages.
import { draftMode } from 'next/headers';
import CategoryPage from './category-page'; import CategoryPage from './category-page';
import CategoryPagePreview from './category-page-preview'; import CategoryPagePreview from './category-page-preview';
import HomePage from './home-page'; import HomePage from './home-page';
@ -23,7 +26,7 @@ export default async function Page({ params }: { params: { slug: string[]; local
const { query = '', queryParams, docType } = getQueryFromSlug(slug, locale); const { query = '', queryParams, docType } = getQueryFromSlug(slug, locale);
const pageData = await client.fetch(query, queryParams); const pageData = await clientFetch(query, queryParams);
const data = filterDataToSingleItem(pageData, isEnabled); const data = filterDataToSingleItem(pageData, isEnabled);
@ -55,7 +58,7 @@ export default async function Page({ params }: { params: { slug: string[]; local
* Get paths for each page. * Get paths for each page.
*/ */
export async function generateStaticParams() { export async function generateStaticParams() {
const paths = await client.fetch(docQuery); const paths = await clientFetch(docQuery);
return paths.map((path: { slug: string; locale: string }) => ({ return paths.map((path: { slug: string; locale: string }) => ({
slug: path.slug.split('/').filter((p) => p), slug: path.slug.split('/').filter((p) => p),
@ -95,7 +98,7 @@ export async function generateMetadata({
const { query = '', queryParams } = getQueryFromSlug(slug, locale); const { query = '', queryParams } = getQueryFromSlug(slug, locale);
const pageData = await client.fetch(query, queryParams); const pageData = await clientFetch(query, queryParams);
const data = filterDataToSingleItem(pageData, false); const data = filterDataToSingleItem(pageData, false);

34
app/[locale]/layout.tsx
View File

@ -6,12 +6,12 @@ import { notFound } from 'next/navigation';
import { ReactNode } from 'react'; import { ReactNode } from 'react';
import './globals.css'; import './globals.css';
const SITE_NAME = "KM Storefront" const SITE_NAME = 'KM Storefront';
const SITE_DESCRIPTION = "Webb och digitalbyrå från Göteborg" const SITE_DESCRIPTION = 'Webb och digitalbyrå från Göteborg';
const TWITTER_CREATOR = "@kodamera.se" const TWITTER_CREATOR = '@kodamera.se';
const TWITTER_SITE = "https://kodamera.se" const TWITTER_SITE = 'https://kodamera.se';
const OG_IMAGE_URL = "/og-image.jpg" const OG_IMAGE_URL = '/og-image.jpg';
const OG_IMAGE_ALT = "Kodamera" const OG_IMAGE_ALT = 'Kodamera';
export const metadata = { export const metadata = {
title: { title: {
@ -26,8 +26,8 @@ export const metadata = {
width: 1200, width: 1200,
height: 630, height: 630,
alt: OG_IMAGE_ALT alt: OG_IMAGE_ALT
}, }
], ]
}, },
robots: { robots: {
follow: true, follow: true,
@ -50,17 +50,17 @@ const inter = Inter({
}); });
export function generateStaticParams() { export function generateStaticParams() {
return [{locale: 'sv'}, {locale: 'en'}]; return [{ locale: 'sv' }, { locale: 'en' }];
} }
interface LocaleLayoutProps { interface LocaleLayoutProps {
children: ReactNode children: ReactNode;
params: { params: {
locale: string locale: string;
} };
} }
export default async function LocaleLayout({children, params: {locale}}: LocaleLayoutProps) { export default async function LocaleLayout({ children, params: { locale } }: LocaleLayoutProps) {
let messages; let messages;
try { try {
@ -71,17 +71,13 @@ export default async function LocaleLayout({children, params: {locale}}: LocaleL
return ( return (
<html lang={locale} className={inter.variable}> <html lang={locale} className={inter.variable}>
<body className="flex flex-col min-h-screen"> <body className="flex min-h-screen flex-col">
<NextIntlClientProvider locale={locale} messages={messages}> <NextIntlClientProvider locale={locale} messages={messages}>
<Header /> <Header />
<main className="flex-1"> <main className="flex-1">{children}</main>
{children}
</main>
<Footer /> <Footer />
</NextIntlClientProvider> </NextIntlClientProvider>
</body> </body>
</html> </html>
); );
} }

61
components/ui/text/text.tsx
View File

@ -1,19 +1,15 @@
'use client' 'use client';
import { cn } from 'lib/utils' import { cn } from 'lib/utils';
import React, { import React, { CSSProperties, FunctionComponent, JSXElementConstructor } from 'react';
CSSProperties,
FunctionComponent,
JSXElementConstructor,
} from 'react'
interface TextProps { interface TextProps {
variant?: Variant variant?: Variant;
className?: string className?: string;
style?: CSSProperties style?: CSSProperties;
children?: React.ReactNode | any children?: React.ReactNode | any;
html?: string html?: string;
onClick?: () => any onClick?: () => any;
} }
type Variant = type Variant =
@ -24,7 +20,7 @@ type Variant =
| 'sectionHeading' | 'sectionHeading'
| 'label' | 'label'
| 'paragraph' | 'paragraph'
| 'listChildHeading' | 'listChildHeading';
const Text: FunctionComponent<TextProps> = ({ const Text: FunctionComponent<TextProps> = ({
style, style,
@ -32,10 +28,10 @@ const Text: FunctionComponent<TextProps> = ({
variant = 'body', variant = 'body',
children, children,
html, html,
onClick, onClick
}) => { }) => {
const componentsMap: { const componentsMap: {
[P in Variant]: React.ComponentType<any> | string [P in Variant]: React.ComponentType<any> | string;
} = { } = {
body: 'div', body: 'div',
heading: 'h1', heading: 'h1',
@ -44,39 +40,38 @@ const Text: FunctionComponent<TextProps> = ({
sectionHeading: 'h2', sectionHeading: 'h2',
listChildHeading: 'h3', listChildHeading: 'h3',
label: 'div', label: 'div',
paragraph: 'p', paragraph: 'p'
} };
const Component: const Component:
| JSXElementConstructor<any> | JSXElementConstructor<any>
| React.ReactElement<any> | React.ReactElement<any>
| React.ComponentType<any> | React.ComponentType<any>
| string = componentsMap![variant!] | string = componentsMap![variant!];
const htmlContentProps = html const htmlContentProps = html
? { ? {
dangerouslySetInnerHTML: { __html: html }, dangerouslySetInnerHTML: { __html: html }
} }
: {} : {};
return ( return (
<Component <Component
className={cn( className={cn(
'', '',
{ {
['text-base max-w-prose']: variant === 'body', ['max-w-prose text-base']: variant === 'body',
['max-w-prose text-4xl font-display font-bold leading-none md:text-5xl md:leading-none lg:leading-none lg:text-6xl']: ['max-w-prose font-display text-4xl font-extrabold leading-none md:text-5xl md:leading-none lg:text-6xl lg:leading-none']:
variant === 'heading', variant === 'heading',
['max-w-prose text-3xl font-display font-bold leading-none md:text-4xl md:leading-none lg:leading-none lg:text-5xl']: ['extrabold max-w-prose font-display text-3xl leading-none md:text-4xl md:leading-none lg:text-5xl lg:leading-none']:
variant === 'pageHeading', variant === 'pageHeading',
['max-w-prose text-2xl font-display leading-none md:text-3xl md:leading-none lg:leading-none lg:text-4xl']: ['max-w-prose font-display text-2xl leading-none md:text-3xl md:leading-none lg:text-4xl lg:leading-none']:
variant === 'productHeading', variant === 'productHeading',
['max-w-prose text-2xl font-display font-bold leading-none md:text-3xl md:leading-none lg:leading-none lg:text-4xl']: ['max-w-prose font-display text-2xl font-extrabold leading-none md:text-3xl md:leading-none lg:text-4xl lg:leading-none']:
variant === 'sectionHeading', variant === 'sectionHeading',
['text-sm font-medium leading-tight lg:text-base']: ['text-sm font-medium leading-tight lg:text-base']: variant === 'listChildHeading',
variant === 'listChildHeading', ['max-w-prose text-sm lg:text-base 2xl:text-lg']: variant === 'label',
['text-sm max-w-prose lg:text-base 2xl:text-lg']: variant === 'label', ['max-w-prose lg:text-lg 2xl:text-xl']: variant === 'paragraph'
['max-w-prose lg:text-lg 2xl:text-xl']: variant === 'paragraph',
}, },
className className
)} )}
@ -86,7 +81,7 @@ const Text: FunctionComponent<TextProps> = ({
> >
{children} {children}
</Component> </Component>
) );
} };
export default Text export default Text;

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

@ -1,4 +1,5 @@
import { createClient } from "next-sanity"; import { createClient } from "next-sanity";
import { cache } from 'react';
export const projectId = process.env.NEXT_PUBLIC_SANITY_PROJECT_ID!; export const projectId = process.env.NEXT_PUBLIC_SANITY_PROJECT_ID!;
export const dataset = process.env.NEXT_PUBLIC_SANITY_DATASET!; export const dataset = process.env.NEXT_PUBLIC_SANITY_DATASET!;
@ -10,3 +11,5 @@ export const client = createClient({
apiVersion, apiVersion,
useCdn: false, useCdn: false,
}); });
export const clientFetch = cache(client.fetch.bind(client));