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

add fonts

Browse Source
This commit is contained in:
Sol Irvine 2023-08-13 19:17:53 +09:00
parent 2cb348259a
commit 7a4a7cf4ed
9 changed files with 46 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
app/[lang]/layout.tsx
View File

@ -1,7 +1,8 @@
import Navbar from 'components/layout/navbar'; import Navbar from 'components/layout/navbar';
import { i18n } from 'i18n-config'; import { Locale, i18n } from 'i18n-config';
import { Inter } from 'next/font/google'; import localFont from 'next/font/local';
import { ReactNode, Suspense } from 'react'; import { ReactNode, Suspense } from 'react';
import './globals.css'; import './globals.css';
const { TWITTER_CREATOR, TWITTER_SITE, SITE_NAME } = process.env; const { TWITTER_CREATOR, TWITTER_SITE, SITE_NAME } = process.env;
@ -29,10 +30,27 @@ export const metadata = {
}) })
}; };
const inter = Inter({ // Font files can be colocated inside of `app`
subsets: ['latin'], const cinzel = localFont({
src: '../fonts/Cinzel-Regular.ttf',
display: 'swap', display: 'swap',
variable: '--font-inter' variable: '--font-cinzel'
});
const alpina = localFont({
src: [
{
path: '../fonts/GT-Alpina-Regular-Trial.woff2',
weight: '400',
style: 'normal'
},
{
path: '../fonts/GT-Alpina-Bold-Trial.woff2',
weight: '700',
style: 'normal'
}
],
variable: '--font-alpina'
}); });
export async function generateStaticParams() { export async function generateStaticParams() {
@ -47,10 +65,10 @@ export default async function RootLayout({
params: { lang: string }; params: { lang: string };
}) { }) {
return ( return (
<html lang={params.lang} className={inter.variable}> <html lang={params.lang} className={`${cinzel.variable} ${alpina.variable}`}>
<body className="bg-dark text-white selection:bg-green-800 selection:text-green-400"> <body className="bg-dark text-white selection:bg-green-800 selection:text-green-400">
<div className="mx-auto max-w-screen-2xl"> <div className="mx-auto max-w-screen-2xl">
<Navbar lang={params.lang} /> <Navbar lang={params.lang as Locale} />
<Suspense> <Suspense>
<main>{children}</main> <main>{children}</main>
</Suspense> </Suspense>

2
app/[lang]/page.tsx
View File

@ -25,7 +25,7 @@ export default async function HomePage({ params: { lang } }: { params: { lang: L
<div className="invisible absolute right-40 top-12 md:visible"> <div className="invisible absolute right-40 top-12 md:visible">
<LanguageControl lang={lang} /> <LanguageControl lang={lang} />
</div> </div>
<div className="px-6 pb-12 pt-6 md:py-12 md:pl-6"> <div className="px-6 pb-12 pt-6 md:pb-48 md:pl-6 md:pt-12">
<Image <Image
src={Namemark} src={Namemark}
alt="narai by suginomori brewery" alt="narai by suginomori brewery"

BIN
app/fonts/Cinzel-Regular.ttf Normal file
View File

Binary file not shown.

BIN
app/fonts/GT-Alpina-Bold-Trial.woff2 Normal file
View File

Binary file not shown.

BIN
app/fonts/GT-Alpina-Regular-Trial.woff2 Normal file
View File

Binary file not shown.

19
components/grid/three-items.tsx
View File

@ -3,25 +3,30 @@ import { GridTileImage } from 'components/grid/tile';
import { getCollectionProducts } from 'lib/shopify'; import { getCollectionProducts } from 'lib/shopify';
import type { Product } from 'lib/shopify/types'; import type { Product } from 'lib/shopify/types';
import Link from 'next/link'; import Link from 'next/link';
import Label from '../label';
function ThreeItemGridItem({ item, priority }: { item: Product; priority?: boolean }) { function ThreeItemGridItem({ item, priority }: { item: Product; priority?: boolean }) {
return ( return (
<div className={clsx('md:col-span-2 md:row-span-1')}> <div className={clsx('md:col-span-2 md:row-span-1')}>
<Link className="relative block aspect-square h-full w-full" href={`/product/${item.handle}`}> <Link
className="relative block aspect-bottle h-full w-full overflow-hidden bg-black/30"
href={`/product/${item.handle}`}
>
<GridTileImage <GridTileImage
src={item.featuredImage.url} src={item.featuredImage.url}
fill fill
sizes={'(min-width: 768px) 33vw, 100vw'} sizes={'(min-width: 768px) 33vw, 100vw'}
priority={priority} priority={priority}
alt={item.title} alt={item.title}
label={{
position: 'bottom',
title: item.title as string,
amount: item.priceRange.maxVariantPrice.amount,
currencyCode: item.priceRange.maxVariantPrice.currencyCode
}}
/> />
</Link> </Link>
<div className="pt-4">
<Label
title={item.title as string}
amount={item.priceRange.maxVariantPrice.amount}
currencyCode={item.priceRange.maxVariantPrice.currencyCode}
/>
</div>
</div> </div>
); );
} }

4
components/grid/tile.tsx
View File

@ -1,6 +1,5 @@
import clsx from 'clsx'; import clsx from 'clsx';
import Image from 'next/image'; import Image from 'next/image';
import Label from '../label';
export function GridTileImage({ export function GridTileImage({
isInteractive = true, isInteractive = true,
@ -27,9 +26,6 @@ export function GridTileImage({
{...props} {...props}
/> />
) : null} ) : null}
{label ? (
<Label title={label.title} amount={label.amount} currencyCode={label.currencyCode} />
) : null}
</div> </div>
); );
} }

6
middleware.ts
View File

@ -28,9 +28,9 @@ export function middleware(request: NextRequest) {
// If you have one // If you have one
if ( if (
[ [
'/public/addets/images/logo.png', '/public/assets/images/logo.png',
'/public/addets/images/logo+namemark.png', '/public/assets/images/logo+namemark.png',
'/public/addets/images/namemark.png' '/public/assets/images/namemark.png'
// Your other files in `public` // Your other files in `public`
].includes(pathname) ].includes(pathname)
) )

6
tailwind.config.js
View File

@ -10,7 +10,11 @@ module.exports = {
dark: '#212720' dark: '#212720'
}, },
fontFamily: { fontFamily: {
sans: ['var(--font-inter)'] sans: ['var(--font-alpina)', 'sans-serif'],
title: ['var(--font-cinzel)', 'sans-serif']
},
aspectRatio: {
bottle: '0.7065217391'
}, },
keyframes: { keyframes: {
fadeIn: { fadeIn: {