feat: homepage font (#145)

* feat: new fonts file

* chore: apply geist

* chore: use relaway font for 'I want to learn'

* chore: config font geist

* feat(util): suffle array

* feat: add geist
This commit is contained in:
Aslam
2024-09-07 01:48:51 +07:00
committed by GitHub
parent e7bd9a9d42
commit 3fe1f8012b
7 changed files with 30 additions and 12 deletions

7
web/app/fonts.ts Normal file
View File

@@ -0,0 +1,7 @@
import { Raleway } from "next/font/google"
export { GeistSans } from "geist/font/sans"
export { GeistMono } from "geist/font/mono"
// import { Inter } from "next/font/google"
// export const inter = Inter({ subsets: ["latin"] })
export const raleway = Raleway({ subsets: ["latin"] })

View File

@@ -1,19 +1,13 @@
import type { Metadata } from "next"
import { Inter as FontSans } from "next/font/google"
import { cn } from "@/lib/utils"
import { ThemeProvider } from "@/lib/providers/theme-provider"
import "./globals.css"
import { ClerkProviderClient } from "@/components/custom/clerk/clerk-provider-client"
import { JotaiProvider } from "@/lib/providers/jotai-provider"
import { Toaster } from "@/components/ui/sonner"
import { ConfirmProvider } from "@/lib/providers/confirm-provider"
import { DeepLinkProvider } from "@/lib/providers/deep-link-provider"
const fontSans = FontSans({
subsets: ["latin"],
variable: "--font-sans"
})
import { GeistMono, GeistSans } from "./fonts"
export const metadata: Metadata = {
title: "Learn Anything",
@@ -29,7 +23,7 @@ export default function RootLayout({
<html lang="en" className="h-full w-full" suppressHydrationWarning>
<ClerkProviderClient>
<DeepLinkProvider>
<body className={cn("h-full w-full font-sans antialiased", fontSans.variable)}>
<body className={cn("h-full w-full font-sans antialiased", GeistSans.variable, GeistMono.variable)}>
<ThemeProvider attribute="class" defaultTheme="system" enableSystem>
<JotaiProvider>
<ConfirmProvider>

View File

@@ -103,7 +103,7 @@ export function Autocomplete({ topics = [], onSelect, onInputChange }: Autocompl
return (
<Command
key={commandKey}
className={cn("relative overflow-visible", {
className={cn("relative mx-auto max-w-md overflow-visible shadow-md", {
"rounded-lg border": !open,
"rounded-none rounded-t-lg border-l border-r border-t": open
})}

View File

@@ -5,6 +5,8 @@ import dynamic from "next/dynamic"
import { motion } from "framer-motion"
import { Autocomplete } from "./Autocomplete"
import { useRouter } from "next/navigation"
import { cn } from "@/lib/utils"
import { raleway } from "@/app/fonts"
let graph_data_promise = import("./graph-data.json").then(a => a.default)
@@ -38,10 +40,13 @@ export function PublicHomeRoute() {
filter_query={filterQuery}
/>
<div className="absolute left-1/2 top-1/2 w-full max-w-md -translate-x-1/2 -translate-y-1/2 transform max-sm:px-5">
<div className="absolute left-1/2 top-1/2 w-full max-w-lg -translate-x-1/2 -translate-y-1/2 transform max-sm:px-5">
<motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.5 }}>
<motion.h1
className="mb-2 text-center text-3xl font-bold uppercase sm:mb-4 md:text-5xl"
className={cn(
"mb-2 text-center text-5xl font-bold tracking-tight sm:mb-4 md:text-7xl",
raleway.className
)}
initial={{ opacity: 0, y: -20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5, delay: 0.2 }}

View File

@@ -25,6 +25,15 @@ export const searchSafeRegExp = (inputValue: string) => {
return new RegExp(escapedChars.join(".*"), "i")
}
export function shuffleArray<T>(array: T[]): T[] {
const shuffled = [...array]
for (let i = shuffled.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1))
;[shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]]
}
return shuffled
}
export * from "./urls"
export * from "./slug"
export * from "./keyboard"

View File

@@ -69,6 +69,7 @@
"cmdk": "^1.0.0",
"date-fns": "^3.6.0",
"framer-motion": "^11.5.4",
"geist": "^1.3.1",
"jazz-react": "0.7.35-unique.2",
"jazz-react-auth-clerk": "0.7.33-new-auth.1",
"jazz-tools": "0.7.35-unique.2",

View File

@@ -79,7 +79,9 @@ const config = {
// learn anything custom
fontFamily: {
sans: ["var(--font-sans)", ...fontFamily.sans]
// sans: ["var(--font-sans)", ...fontFamily.sans],
sans: ["var(--font-geist-sans)"],
mono: ["var(--font-geist-mono)"]
},
backgroundImage: {