t3-oss · juliusmarminge · May 7, 2024 · Apr 11, 2024 · Apr 11, 2024 · Apr 11, 2024
@@ -0,0 +1,5 @@
+---
+"create-t3-app": minor
+---
+
+change default font from Inter to Geist Sans
diff --git a/cli/package.json b/cli/package.json
@@ -94,5 +94,8 @@
     "type-fest": "^3.7.0",
     "typescript": "^5.4.2",
     "zod": "^3.23.3"
-  }
+  },
+  "trustedDependencies": [
+    "es5-ext"
+  ]
 }
diff --git a/cli/src/cli/index.ts b/cli/src/cli/index.ts
@@ -331,6 +331,7 @@ export const runCli = async (): Promise<CliResults> => {
     if (project.authentication === "next-auth") packages.push("nextAuth");
     if (project.database === "prisma") packages.push("prisma");
     if (project.database === "drizzle") packages.push("drizzle");
+    packages.push("geist");
 
     return {
       appName: project.name ?? cliResults.appName,

diff --git a/cli/src/installers/dependencyVersionMap.ts b/cli/src/installers/dependencyVersionMap.ts
@@ -37,5 +37,8 @@ export const dependencyVersionMap = {
   "@tanstack/react-query": "^5.25.0",
   superjson: "^2.2.1",
   "server-only": "^0.0.1",
+
+  // Geist
+  geist: "^1.3.0",
 } as const;
 export type AvailableDependencies = keyof typeof dependencyVersionMap;
diff --git a/cli/src/installers/geist.ts b/cli/src/installers/geist.ts
@@ -0,0 +1,10 @@
+import { type Installer } from "~/installers/index.js";
+import { addPackageDependency } from "~/utils/addPackageDependency.js";
+
+export const geistInstaller: Installer = ({ projectDir }) => {
+  addPackageDependency({
+    projectDir,
+    dependencies: ["geist"],
+    devMode: true,
+  });
+};
@@ -1,4 +1,5 @@
 import { envVariablesInstaller } from "~/installers/envVars.js";
+import { geistInstaller } from "~/installers/geist.js";
 import { nextAuthInstaller } from "~/installers/nextAuth.js";
 import { prismaInstaller } from "~/installers/prisma.js";
 import { tailwindInstaller } from "~/installers/tailwind.js";
@@ -8,14 +9,15 @@ import { dbContainerInstaller } from "./dbContainer.js";
 import { drizzleInstaller } from "./drizzle.js";
 import { dynamicEslintInstaller } from "./eslint.js";
 
-// Turning this into a const allows the list to be iterated over for programatically creating prompt options
-// Should increase extensability in the future
+// Turning this into a const allows the list to be iterated over for programmatically creating prompt options
+// Should increase extensibility in the future
 export const availablePackages = [
   "nextAuth",
   "prisma",
   "drizzle",
   "tailwind",
   "trpc",
+  "geist",
   "envVariables",
   "eslint",
   "dbContainer",
@@ -74,6 +76,10 @@ export const buildPkgInstallerMap = (
     inUse: packages.includes("trpc"),
     installer: trpcInstaller,
   },
+  geist: {
+    inUse: packages.includes("geist"),
+    installer: geistInstaller,
+  },
   dbContainer: {
     inUse: ["mysql", "postgres"].includes(databaseProvider),
     installer: dbContainerInstaller,

@@ -17,6 +17,7 @@ const config = {
     locales: ["en"],
     defaultLocale: "en",
   },
+  transpilePackages: ["geist"],
 };
 
 export default config;
@@ -1,12 +1,11 @@
 import { type Config } from "tailwindcss";
-import { fontFamily } from "tailwindcss/defaultTheme";
 
 export default {
   content: ["./src/**/*.tsx"],
   theme: {
     extend: {
       fontFamily: {
-        sans: ["var(--font-sans)", ...fontFamily.sans],
+        sans: ["var(--font-geist-sans)"],
       },
     },
   },

@@ -1,10 +1,6 @@
 import "~/styles/globals.css";
 
-import { Inter } from "next/font/google";
-
-const inter = Inter({
-  subsets: ["latin"],
-});
+import { GeistSans } from "geist/font/sans";
 
 export const metadata = {
   title: "Create T3 App",
@@ -19,7 +15,7 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en">
-      <body className={inter.className}>{children}</body>
+      <body className={GeistSans.className}>{children}</body>
     </html>
   );
 }
@@ -1,14 +1,9 @@
 import "~/styles/globals.css";
 
-import { Inter } from "next/font/google";
+import { GeistSans } from "geist/font/sans";
 
 import { TRPCReactProvider } from "~/trpc/react";
 
-const inter = Inter({
-  subsets: ["latin"],
-  variable: "--font-sans",
-});
-
 export const metadata = {
   title: "Create T3 App",
   description: "Generated by create-t3-app",
@@ -21,8 +16,8 @@ export default function RootLayout({
   children: React.ReactNode;
 }) {
   return (
-    <html lang="en">
-      <body className={`font-sans ${inter.variable}`}>
+    <html lang="en" className={`${GeistSans.variable}`}>
+      <body>
         <TRPCReactProvider>{children}</TRPCReactProvider>
       </body>
     </html>

@@ -1,13 +1,9 @@
 import "~/styles/globals.css";
 
-import { Inter } from "next/font/google";
+import { GeistSans } from "geist/font/sans";
 
 import { TRPCReactProvider } from "~/trpc/react";
 
-const inter = Inter({
-  subsets: ["latin"],
-});
-
 export const metadata = {
   title: "Create T3 App",
   description: "Generated by create-t3-app",
@@ -21,7 +17,7 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en">
-      <body className={inter.className}>
+      <body className={GeistSans.className}>
         <TRPCReactProvider>{children}</TRPCReactProvider>
       </body>
     </html>

@@ -1,11 +1,6 @@
 import "~/styles/globals.css";
 
-import { Inter } from "next/font/google";
-
-const inter = Inter({
-  subsets: ["latin"],
-  variable: "--font-sans",
-});
+import { GeistSans } from "geist/font/sans";
 
 export const metadata = {
   title: "Create T3 App",
@@ -19,8 +14,8 @@ export default function RootLayout({
   children: React.ReactNode;
 }) {
   return (
-    <html lang="en">
-      <body className={`font-sans ${inter.variable}`}>{children}</body>
+    <html lang="en" className={`${GeistSans.variable}`}>
+      <body>{children}</body>
     </html>
   );
 }
@@ -1,15 +1,11 @@
+import { GeistSans } from "geist/font/sans";
 import { type AppType } from "next/dist/shared/lib/utils";
-import { Inter } from "next/font/google";
 
 import "~/styles/globals.css";
 
-const inter = Inter({
-  subsets: ["latin"],
-});
-
 const MyApp: AppType = ({ Component, pageProps }) => {
   return (
-    <main className={inter.className}>
+    <main className={GeistSans.className}>
       <Component {...pageProps} />
     </main>
   );

@@ -1,24 +1,19 @@
+import { GeistSans } from "geist/font/sans";
 import { type Session } from "next-auth";
 import { SessionProvider } from "next-auth/react";
 import { type AppType } from "next/app";
-import { Inter } from "next/font/google";
 
 import { api } from "~/utils/api";
 
 import "~/styles/globals.css";
 
-const inter = Inter({
-  subsets: ["latin"],
-  variable: "--font-sans",
-});
-
 const MyApp: AppType<{ session: Session | null }> = ({
   Component,
   pageProps: { session, ...pageProps },
 }) => {
   return (
     <SessionProvider session={session}>
-      <main className={`font-sans ${inter.variable}`}>
+      <main className={GeistSans.className}>
         <Component {...pageProps} />
       </main>
     </SessionProvider>

@@ -1,23 +1,19 @@
+import { GeistSans } from "geist/font/sans";
 import { type Session } from "next-auth";
 import { SessionProvider } from "next-auth/react";
 import { type AppType } from "next/app";
-import { Inter } from "next/font/google";
 
 import { api } from "~/utils/api";
 
 import "~/styles/globals.css";
 
-const inter = Inter({
-  subsets: ["latin"],
-});
-
 const MyApp: AppType<{ session: Session | null }> = ({
   Component,
   pageProps: { session, ...pageProps },
 }) => {
   return (
     <SessionProvider session={session}>
-      <main className={inter.className}>
+      <main className={GeistSans.className}>
         <Component {...pageProps} />
       </main>
     </SessionProvider>

@@ -1,22 +1,17 @@
+import { GeistSans } from "geist/font/sans";
 import { type Session } from "next-auth";
 import { SessionProvider } from "next-auth/react";
 import { type AppType } from "next/app";
-import { Inter } from "next/font/google";
 
 import "~/styles/globals.css";
 
-const inter = Inter({
-  subsets: ["latin"],
-  variable: "--font-sans",
-});
-
 const MyApp: AppType<{ session: Session | null }> = ({
   Component,
   pageProps: { session, ...pageProps },
 }) => {
   return (
     <SessionProvider session={session}>
-      <main className={`font-sans ${inter.variable}`}>
+      <main className={GeistSans.className}>
         <Component {...pageProps} />
       </main>
     </SessionProvider>

@@ -1,21 +1,17 @@
+import { GeistSans } from "geist/font/sans";
 import { type Session } from "next-auth";
 import { SessionProvider } from "next-auth/react";
 import { type AppType } from "next/app";
-import { Inter } from "next/font/google";
 
 import "~/styles/globals.css";
 
-const inter = Inter({
-  subsets: ["latin"],
-});
-
 const MyApp: AppType<{ session: Session | null }> = ({
   Component,
   pageProps: { session, ...pageProps },
 }) => {
   return (
     <SessionProvider session={session}>
-      <main className={inter.className}>
+      <main className={GeistSans.className}>
         <Component {...pageProps} />
       </main>
     </SessionProvider>

@@ -1,17 +1,13 @@
+import { GeistSans } from "geist/font/sans";
 import { type AppType } from "next/app";
-import { Inter } from "next/font/google";
 
 import { api } from "~/utils/api";
 
 import "~/styles/globals.css";
 
-const inter = Inter({
-  subsets: ["latin"],
-  variable: "--font-sans",
-});
 const MyApp: AppType = ({ Component, pageProps }) => {
   return (
-    <main className={`font-sans ${inter.variable}`}>
+    <main className={GeistSans.className}>
       <Component {...pageProps} />
     </main>
   );

@@ -1,17 +1,13 @@
+import { GeistSans } from "geist/font/sans";
 import { type AppType } from "next/app";
-import { Inter } from "next/font/google";
 
 import { api } from "~/utils/api";
 
 import "~/styles/globals.css";
 
-const inter = Inter({
-  subsets: ["latin"],
-});
-
 const MyApp: AppType = ({ Component, pageProps }) => {
   return (
-    <main className={inter.className}>
+    <main className={GeistSans.className}>
       <Component {...pageProps} />
     </main>
   );

@@ -1,16 +1,11 @@
+import { GeistSans } from "geist/font/sans";
 import { type AppType } from "next/app";
-import { Inter } from "next/font/google";
 
 import "~/styles/globals.css";
 
-const inter = Inter({
-  subsets: ["latin"],
-  variable: "--font-sans",
-});
-
 const MyApp: AppType = ({ Component, pageProps }) => {
   return (
-    <main className={`font-sans ${inter.variable}`}>
+    <main className={GeistSans.className}>
       <Component {...pageProps} />
     </main>
   );

diff --git a/upgrade/src/app/api/og/route.tsx b/upgrade/src/app/api/og/route.tsx
@@ -131,6 +131,6 @@
   });
 
   // Object.fromEntries is typed as returning any *sigh*
-  // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+
   return Object.fromEntries(await Promise.all(promises));
 }
diff --git a/www/src/components/landingPage/ClipboardSelect.tsx b/www/src/components/landingPage/ClipboardSelect.tsx
@@ -42,7 +42,7 @@ export default function ClipboardSelect() {
     <div className="flex items-center gap-2">
       <Menu as="div">
         <div className="relative">
-          <Menu.Button className="relative flex cursor-pointer items-center justify-center rounded-lg border bg-t3-purple-200/50 p-2 text-left focus:outline-none hover:bg-t3-purple-200/75 dark:border-t3-purple-200/20 dark:bg-t3-purple-200/10 dark:hover:border-t3-purple-200/50 sm:text-sm">
+          <Menu.Button className="relative flex cursor-pointer items-center justify-center rounded-lg border bg-t3-purple-200/50 p-2 text-left hover:bg-t3-purple-200/75 focus:outline-none dark:border-t3-purple-200/20 dark:bg-t3-purple-200/10 dark:hover:border-t3-purple-200/50 sm:text-sm">
             <svg
               className={`h-[1em] w-[1em] ${coolDown && "hidden"}`}
               xmlns="http://www.w3.org/2000/svg"