add geist font as option

cli/src/cli/index.ts

@@ -34,6 +34,8 @@ interface CliFlags {
  /** @internal Used in CI. */
  nextAuth: boolean;
  /** @internal Used in CI. */
+ geist: boolean;
+ /** @internal Used in CI. */
  appRouter: boolean;
 }
 
@@ -57,6 +59,7 @@ const defaultOptions: CliResults = {
  prisma: false,
  drizzle: false,
  nextAuth: false,
+ geist: false,
  importAlias: "~/",
  appRouter: false,
  },
@@ -125,6 +128,12 @@ export const runCli = async (): Promise<CliResults> => {
  (value) => !!value && value !== "false"
  )
  /** @experimental - Used for CI E2E tests. Used in conjunction with `--CI` to skip prompting. */
+ .option(
+ "--geist [boolean]",
+ "Experimental: Boolean value if we should install Geist. Must be used in conjunction with `--CI`.",
+ (value) => !!value && value !== "false"
+ )
+ /** @experimental - Used for CI E2E tests. Used in conjunction with `--CI` to skip prompting. */
  .option(
  "-i, --import-alias",
  "Explicitly tell the CLI to use a custom import alias",
@@ -180,6 +189,7 @@ export const runCli = async (): Promise<CliResults> => {
  if (cliResults.flags.prisma) cliResults.packages.push("prisma");
  if (cliResults.flags.drizzle) cliResults.packages.push("drizzle");
  if (cliResults.flags.nextAuth) cliResults.packages.push("nextAuth");
+ if (cliResults.flags.geist) cliResults.packages.push("geist");
 
  if (cliResults.flags.prisma && cliResults.flags.drizzle) {
  // We test a matrix of all possible combination of packages in CI. Checking for impossible
@@ -292,6 +302,16 @@ export const runCli = async (): Promise<CliResults> => {
  initialValue: "sqlite",
  });
  },
+ font: () => {
+ return p.select({
+ message: "What font would you like to use?",
+ options: [
+ { value: "inter", label: "Inter" },
+ { value: "geist", label: "Geist" },
+ ],
+ initialValue: "inter",
+ });
+ },
  ...(!cliResults.flags.noGit && {
  git: () => {
  return p.confirm({
@@ -333,6 +353,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");
+ if (project.font === "geist") packages.push("geist");
 
  return {
  appName: project.name ?? cliResults.appName,

cli/src/helpers/selectBoilerplate.ts

@@ -17,9 +17,26 @@ export const selectAppFile = ({
  const usingTw = packages.tailwind.inUse;
  const usingTRPC = packages.trpc.inUse;
  const usingNextAuth = packages.nextAuth.inUse;
+ const usingGeist = packages.geist.inUse;
 
  let appFile = "base.tsx";
- if (usingTRPC && usingTw && usingNextAuth) {
+ if (usingTRPC && usingTw && usingNextAuth && usingGeist) {
+ appFile = "with-auth-trpc-tw-geist.tsx";
+ } else if (usingTRPC && !usingTw && usingNextAuth && usingGeist) {
+ appFile = "with-auth-trpc-geist.tsx";
+ } else if (usingTRPC && usingTw && usingGeist) {
+ appFile = "with-trpc-tw-geist.tsx";
+ } else if (usingTRPC && !usingTw && usingGeist) {
+ appFile = "with-trpc-geist.tsx";
+ } else if (!usingTRPC && usingTw && usingGeist) {
+ appFile = "with-tw-geist.tsx";
+ } else if (usingNextAuth && usingTw && usingGeist) {
+ appFile = "with-auth-tw-geist.tsx";
+ } else if (usingNextAuth && !usingTw && usingGeist) {
+ appFile = "with-auth-geist.tsx";
+ } else if (!usingTw && usingGeist) {
+ appFile = "with-geist.tsx";
+ } else if (usingTRPC && usingTw && usingNextAuth) {
  appFile = "with-auth-trpc-tw.tsx";
  } else if (usingTRPC && !usingTw && usingNextAuth) {
  appFile = "with-auth-trpc.tsx";
@@ -49,12 +66,21 @@ export const selectLayoutFile = ({
 
  const usingTw = packages.tailwind.inUse;
  const usingTRPC = packages.trpc.inUse;
+ const usingGeist = packages.geist.inUse;
  let layoutFile = "base.tsx";
- if (usingTRPC && usingTw) {
+ if (usingTRPC && usingTw && usingGeist) {
+ layoutFile = "with-trpc-tw-geist.tsx";
+ } else if (usingTRPC && !usingTw && usingGeist) {
+ layoutFile = "with-trpc-geist.tsx";
+ } else if (!usingTRPC && usingTw && usingGeist) {
+ layoutFile = "with-tw-geist.tsx";
+ } else if (!usingTRPC && !usingTw && usingGeist) {
+ layoutFile = "with-geist.tsx";
+ } else if (usingTRPC && usingTw && !usingGeist) {
  layoutFile = "with-trpc-tw.tsx";
- } else if (usingTRPC && !usingTw) {
+ } else if (usingTRPC && !usingTw && !usingGeist) {
  layoutFile = "with-trpc.tsx";
- } else if (!usingTRPC && usingTw) {
+ } else if (!usingTRPC && usingTw && !usingGeist) {
  layoutFile = "with-tw.tsx";
  }
 

cli/src/installers/dependencyVersionMap.ts

@@ -38,5 +38,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;

cli/src/installers/geist.ts

@@ -0,0 +1,16 @@
+import path from "path";
+import fs from "fs-extra";
+
+import { PKG_ROOT } from "~/consts.js";
+import { type Installer } from "~/installers/index.js";
+import { addPackageDependency } from "~/utils/addPackageDependency.js";
+
+export const geistInstaller: Installer = ({ projectDir }) => {
+ addPackageDependency({
+ projectDir,
+ dependencies: [
+ "geist",
+ ],
+ devMode: false,
+ });
+};

cli/src/installers/index.ts

@@ -3,6 +3,7 @@ import { nextAuthInstaller } from "~/installers/nextAuth.js";
 import { prismaInstaller } from "~/installers/prisma.js";
 import { tailwindInstaller } from "~/installers/tailwind.js";
 import { trpcInstaller } from "~/installers/trpc.js";
+import { geistInstaller } from "~/installers/geist.js";
 import { type PackageManager } from "~/utils/getUserPkgManager.js";
 import { dbContainerInstaller } from "./dbContainer.js";
 import { drizzleInstaller } from "./drizzle.js";
@@ -16,6 +17,7 @@ export const availablePackages = [
  "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,

cli/template/extras/src/app/layout/with-geist.tsx

@@ -0,0 +1,21 @@
+import "~/styles/globals.css";
+
+import { GeistSans } from 'geist/font/sans';
+
+export const metadata = {
+ title: "Create T3 App",
+ description: "Generated by create-t3-app",
+ icons: [{ rel: "icon", url: "/favicon.ico" }],
+};
+
+export default function RootLayout({
+ children,
+}: {
+ children: React.ReactNode;
+}) {
+ return (
+ <html lang="en">
+ <body className={GeistSans.className}>{children}</body>
+ </html>
+ );
+}

cli/template/extras/src/app/layout/with-trpc-geist.tsx

@@ -0,0 +1,25 @@
+import "~/styles/globals.css";
+
+import { GeistSans } from 'geist/font/sans';
+
+import { TRPCReactProvider } from "~/trpc/react";
+
+export const metadata = {
+ title: "Create T3 App",
+ description: "Generated by create-t3-app",
+ icons: [{ rel: "icon", url: "/favicon.ico" }],
+};
+
+export default function RootLayout({
+ children,
+}: {
+ children: React.ReactNode;
+}) {
+ return (
+ <html lang="en">
+ <body className={GeistSans.className}>
+ <TRPCReactProvider>{children}</TRPCReactProvider>
+ </body>
+ </html>
+ );
+}

cli/template/extras/src/app/layout/with-trpc-tw-geist.tsx

@@ -0,0 +1,25 @@
+import "~/styles/globals.css";
+
+import { GeistSans } from 'geist/font/sans';
+
+import { TRPCReactProvider } from "~/trpc/react";
+
+export const metadata = {
+ title: "Create T3 App",
+ description: "Generated by create-t3-app",
+ icons: [{ rel: "icon", url: "/favicon.ico" }],
+};
+
+export default function RootLayout({
+ children,
+}: {
+ children: React.ReactNode;
+}) {
+ return (
+ <html lang="en">
+ <body className={GeistSans.className}>
+ <TRPCReactProvider>{children}</TRPCReactProvider>
+ </body>
+ </html>
+ );
+}

cli/template/extras/src/app/layout/with-tw-geist.tsx

@@ -0,0 +1,21 @@
+import "~/styles/globals.css";
+
+import { GeistSans } from 'geist/font/sans';
+
+export const metadata = {
+ title: "Create T3 App",
+ description: "Generated by create-t3-app",
+ icons: [{ rel: "icon", url: "/favicon.ico" }],
+};
+
+export default function RootLayout({
+ children,
+}: {
+ children: React.ReactNode;
+}) {
+ return (
+ <html lang="en">
+ <body className={GeistSans.className}>{children}</body>
+ </html>
+ );
+}

cli/template/extras/src/pages/_app/with-auth-geist.tsx

@@ -0,0 +1,21 @@
+import { type Session } from "next-auth";
+import { SessionProvider } from "next-auth/react";
+import { type AppType } from "next/app";
+import { GeistSans } from 'geist/font/sans';
+
+import "~/styles/globals.css";
+
+const MyApp: AppType<{ session: Session | null }> = ({
+ Component,
+ pageProps: { session, ...pageProps },
+}) => {
+ return (
+ <SessionProvider session={session}>
+ <main className={GeistSans.className}>
+ <Component {...pageProps} />
+ </main>
+ </SessionProvider>
+ );
+};
+
+export default MyApp;

cli/template/extras/src/pages/_app/with-auth-trpc-geist.tsx

@@ -0,0 +1,23 @@
+import { type Session } from "next-auth";
+import { SessionProvider } from "next-auth/react";
+import { type AppType } from "next/app";
+import { GeistSans } from 'geist/font/sans';
+
+import { api } from "~/utils/api";
+
+import "~/styles/globals.css";
+
+const MyApp: AppType<{ session: Session | null }> = ({
+ Component,
+ pageProps: { session, ...pageProps },
+}) => {
+ return (
+ <SessionProvider session={session}>
+ <main className={GeistSans.className}>
+ <Component {...pageProps} />
+ </main>
+ </SessionProvider>
+ );
+};
+
+export default api.withTRPC(MyApp);

cli/template/extras/src/pages/_app/with-auth-trpc-tw-geist.tsx

@@ -0,0 +1,23 @@
+import { type Session } from "next-auth";
+import { SessionProvider } from "next-auth/react";
+import { type AppType } from "next/app";
+import { GeistSans } from 'geist/font/sans';
+
+import { api } from "~/utils/api";
+
+import "~/styles/globals.css";
+
+const MyApp: AppType<{ session: Session | null }> = ({
+ Component,
+ pageProps: { session, ...pageProps },
+}) => {
+ return (
+ <SessionProvider session={session}>
+ <main className={GeistSans.className}>
+ <Component {...pageProps} />
+ </main>
+ </SessionProvider>
+ );
+};
+
+export default api.withTRPC(MyApp);

cli/template/extras/src/pages/_app/with-auth-tw-geist.tsx

@@ -0,0 +1,21 @@
+import { type Session } from "next-auth";
+import { SessionProvider } from "next-auth/react";
+import { type AppType } from "next/app";
+import { GeistSans } from 'geist/font/sans';
+
+import "~/styles/globals.css";
+
+const MyApp: AppType<{ session: Session | null }> = ({
+ Component,
+ pageProps: { session, ...pageProps },
+}) => {
+ return (
+ <SessionProvider session={session}>
+ <main className={GeistSans.className}>
+ <Component {...pageProps} />
+ </main>
+ </SessionProvider>
+ );
+};
+
+export default MyApp;

cli/template/extras/src/pages/_app/with-geist.tsx

@@ -0,0 +1,14 @@
+import { type AppType } from "next/dist/shared/lib/utils";
+import { GeistSans } from 'geist/font/sans';
+
+import "~/styles/globals.css";
+
+const MyApp: AppType = ({ Component, pageProps }) => {
+ return (
+ <main className={GeistSans.className}>
+ <Component {...pageProps} />
+ </main>
+ );
+};
+
+export default MyApp;

cli/template/extras/src/pages/_app/with-trpc-geist.tsx

@@ -0,0 +1,16 @@
+import { type AppType } from "next/app";
+import { GeistSans } from 'geist/font/sans';
+
+import { api } from "~/utils/api";
+
+import "~/styles/globals.css";
+
+const MyApp: AppType = ({ Component, pageProps }) => {
+ return (
+ <main className={GeistSans.className}>
+ <Component {...pageProps} />
+ </main>
+ );
+};
+
+export default api.withTRPC(MyApp);