fix: fonts + og image

withgraphite · Jan 22, 2025 · 7751ec0 · 7751ec0
1 parent 5c91f73
commit 7751ec0
Show file tree

Hide file tree

Showing 11 changed files with 10 additions and 23 deletions.
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -2,30 +2,16 @@ import {Analytics} from '@vercel/analytics/react'
 import {SpeedInsights} from '@vercel/speed-insights/next'
 import 'devicon'
 import {Metadata} from 'next'
-import localFont from 'next/font/local'
 import {Toaster} from 'sonner'
 
 import {Background} from '~/3d/Background'
 import Nav from '~/components/Nav'
 import {DEFAULT_META} from '~/constants/metadata'
 import './styles.css'
 
-const font = localFont({
-	src: [
-		{
-			path: '../public/fonts/Geist-Light.woff2',
-			weight: '100'
-		},
-		{
-			path: '../public/fonts/Geist-Regular.woff2',
-			weight: '400'
-		},
-		{
-			path: '../public/fonts/Geist-Bold.woff2',
-			weight: '700'
-		}
-	]
-})
+import { GeistSans } from 'geist/font/sans'
+import { GeistMono } from 'geist/font/mono'
+
 
 export const metadata: Metadata = {
 	...DEFAULT_META,
@@ -39,9 +25,9 @@ export const metadata: Metadata = {
 
 export default function RootLayout({children}: {children: React.ReactNode}) {
 	return (
-		<html lang='en'>
+		<html lang='en' className={`${GeistSans.variable} ${GeistMono.variable}`}>
 			<body
-				className={`${font.className} relative flex h-full min-h-screen w-full flex-col items-center bg-white dark:bg-black`}>
+				className={`relative flex h-full min-h-screen w-full flex-col items-center bg-white dark:bg-black`}>
 				<Background />
 				<Nav />
 				<Toaster />

diff --git a/app/opengraph-image.jpg b/app/opengraph-image.jpg
diff --git a/bun.lockb b/bun.lockb
diff --git a/lib/components/DownloadControls.tsx b/lib/components/DownloadControls.tsx
@@ -157,7 +157,7 @@ export default function DownloadControls({
 		)
 
 	return (
-		<div className='flex flex-col items-center justify-center overflow-hidden rounded-lg border border-white/10'>
+		<div className='flex flex-col items-center justify-center overflow-hidden rounded-lg border border-white/10 backdrop-blur'>
 			<div className='flex w-full items-center justify-center gap-1 border-b border-white/10 p-1 text-gray-400'>
 				<ArrowDownToLine className='h-[16px] w-[16px]' /> Download
 			</div>

diff --git a/lib/components/Toolbar.tsx b/lib/components/Toolbar.tsx
@@ -76,7 +76,7 @@ export default function Toolbar({
 		)
 
 	return (
-		<div className='flex w-full flex-row items-center justify-between overflow-hidden rounded border border-white/10'>
+		<div className='flex w-full flex-row items-center justify-between rounded border border-white/10 backdrop-blur'>
 			<div className='flex flex-1 flex-col'>
 				<div className={labelClassNames}>
 					<User className='h-[16px] w-[16px]' /> Username

diff --git a/package.json b/package.json
@@ -23,6 +23,7 @@
 		"dom-to-image": "^2.6.0",
 		"file-saver": "^2.0.5",
 		"framer-motion": "^10.16.16",
+		"geist": "^1.3.1",
 		"graphql": "^16.8.1",
 		"graphql-request": "^6.1.0",
 		"langchain": "^0.0.203",

diff --git a/public/fonts/Geist-Bold.woff2 b/public/fonts/Geist-Bold.woff2
diff --git a/public/fonts/Geist-Light.woff2 b/public/fonts/Geist-Light.woff2
diff --git a/public/fonts/Geist-Regular.woff2 b/public/fonts/Geist-Regular.woff2
diff --git a/public/fonts/GeistMono-Regular.woff2 b/public/fonts/GeistMono-Regular.woff2
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -4,8 +4,8 @@ const tailwindConfig = {
 	content: ['**/*.tsx'],
 	theme: {
 		fontFamily: {
-			sans: ['Geist', 'ui-sans-serif', 'system-ui'],
-			mono: ['Geist Mono', 'ui-monospace', 'SFMono-Regular']
+			sans: ['var(--font-geist-sans)', 'ui-sans-serif', 'system-ui'],
+        	mono: ['var(--font-geist-mono)',  'ui-monospace', 'SFMono-Regular'],
 		},
 		extend: {
 			animation: {