gib/T3-Template
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Formatting

Browse Source
This commit is contained in:
Gabriel Brown 2025-05-13 09:28:44 -05:00
parent 6b667c2dad
commit a2f61ece94
15 changed files with 101 additions and 111 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
eslint.config.js
View File

@ -1,5 +1,5 @@
import { FlatCompat } from "@eslint/eslintrc"; import { FlatCompat } from '@eslint/eslintrc';
import tseslint from "typescript-eslint"; import tseslint from 'typescript-eslint';
const compat = new FlatCompat({ const compat = new FlatCompat({
baseDirectory: import.meta.dirname, baseDirectory: import.meta.dirname,
@ -7,30 +7,30 @@ const compat = new FlatCompat({
export default tseslint.config( export default tseslint.config(
{ {
ignores: [".next"], ignores: ['.next'],
}, },
...compat.extends("next/core-web-vitals"), ...compat.extends('next/core-web-vitals'),
{ {
files: ["**/*.ts", "**/*.tsx"], files: ['**/*.ts', '**/*.tsx'],
extends: [ extends: [
...tseslint.configs.recommended, ...tseslint.configs.recommended,
...tseslint.configs.recommendedTypeChecked, ...tseslint.configs.recommendedTypeChecked,
...tseslint.configs.stylisticTypeChecked, ...tseslint.configs.stylisticTypeChecked,
], ],
rules: { rules: {
"@typescript-eslint/array-type": "off", '@typescript-eslint/array-type': 'off',
"@typescript-eslint/consistent-type-definitions": "off", '@typescript-eslint/consistent-type-definitions': 'off',
"@typescript-eslint/consistent-type-imports": [ '@typescript-eslint/consistent-type-imports': [
"warn", 'warn',
{ prefer: "type-imports", fixStyle: "inline-type-imports" }, { prefer: 'type-imports', fixStyle: 'inline-type-imports' },
], ],
"@typescript-eslint/no-unused-vars": [ '@typescript-eslint/no-unused-vars': [
"warn", 'warn',
{ argsIgnorePattern: "^_" }, { argsIgnorePattern: '^_' },
], ],
"@typescript-eslint/require-await": "off", '@typescript-eslint/require-await': 'off',
"@typescript-eslint/no-misused-promises": [ '@typescript-eslint/no-misused-promises': [
"error", 'error',
{ checksVoidReturn: { attributes: false } }, { checksVoidReturn: { attributes: false } },
], ],
}, },

2
next.config.js
View File

@ -2,7 +2,7 @@
* Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation. This is especially useful * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation. This is especially useful
* for Docker builds. * for Docker builds.
*/ */
import "./src/env.js"; import './src/env.js';
/** @type {import("next").NextConfig} */ /** @type {import("next").NextConfig} */
const config = {}; const config = {};

2
postcss.config.js
View File

@ -1,5 +1,5 @@
export default { export default {
plugins: { plugins: {
"@tailwindcss/postcss": {}, '@tailwindcss/postcss': {},
}, },
}; };

2
prettier.config.js
View File

@ -1,4 +1,4 @@
/** @type {import('prettier').Config & import('prettier-plugin-tailwindcss').PluginOptions} */ /** @type {import('prettier').Config & import('prettier-plugin-tailwindcss').PluginOptions} */
export default { export default {
plugins: ["prettier-plugin-tailwindcss"], plugins: ['prettier-plugin-tailwindcss'],
}; };

46
src/app/layout.tsx
View File

@ -1,18 +1,16 @@
import { type Metadata } from "next"; import { type Metadata } from 'next';
import "@/styles/globals.css"; import '@/styles/globals.css';
import { Geist } from "next/font/google"; import { Geist } from 'next/font/google';
import { cn } from "@/lib/utils"; import { cn } from '@/lib/utils';
import { ThemeProvider } from '@/components/context/theme' import { ThemeProvider } from '@/components/context/theme';
export const metadata: Metadata = { export const metadata: Metadata = {
title: "T3 Template with Supabase", title: 'T3 Template with Supabase',
description: description: 'Generated by create-t3-app',
"Generated by create-t3-app",
icons: [ icons: [
{ {
rel: "icon", rel: 'icon',
url: "/images/favicon.ico", url: '/images/favicon.ico',
}, },
{ {
rel: 'icon', rel: 'icon',
@ -22,29 +20,21 @@ export const metadata: Metadata = {
}, },
{ {
rel: 'apple-touch-icon', rel: 'apple-touch-icon',
url: '/images/appicon.png' url: '/images/appicon.png',
}, },
], ],
}; };
const geist = Geist({ const geist = Geist({
subsets: ["latin"], subsets: ['latin'],
variable: "--font-geist-sans", variable: '--font-geist-sans',
}); });
const RootLayout = ({ const RootLayout = ({ children }: Readonly<{ children: React.ReactNode }>) => {
children,
}: Readonly<{ children: React.ReactNode }>) => {
return ( return (
<html <html lang='en' className={`${geist.variable}`} suppressHydrationWarning>
lang="en"
className={`${geist.variable}`}
suppressHydrationWarning
>
<body <body
className={cn( className={cn('bg-background text-foreground font-sans antialiased')}
'bg-background text-foreground font-sans antialiased'
)}
> >
<ThemeProvider <ThemeProvider
attribute='class' attribute='class'
@ -54,14 +44,12 @@ const RootLayout = ({
> >
<main className='min-h-screen flex flex-col items-center'> <main className='min-h-screen flex flex-col items-center'>
<div className='flex-1 w-full flex flex-col gap-20 items-center'> <div className='flex-1 w-full flex flex-col gap-20 items-center'>
<nav className=''> <nav className=''>{children}</nav>
{children}
</nav>
</div> </div>
</main> </main>
</ThemeProvider> </ThemeProvider>
</body> </body>
</html> </html>
); );
} };
export default RootLayout; export default RootLayout;

32
src/app/page.tsx
View File

@ -1,31 +1,31 @@
import Link from "next/link"; import Link from 'next/link';
export default function HomePage() { export default function HomePage() {
return ( return (
<main className="flex min-h-screen flex-col items-center justify-center bg-gradient-to-b from-[#2e026d] to-[#15162c] text-white"> <main className='flex min-h-screen flex-col items-center justify-center bg-gradient-to-b from-[#2e026d] to-[#15162c] text-white'>
<div className="container flex flex-col items-center justify-center gap-12 px-4 py-16"> <div className='container flex flex-col items-center justify-center gap-12 px-4 py-16'>
<h1 className="text-5xl font-extrabold tracking-tight text-white sm:text-[5rem]"> <h1 className='text-5xl font-extrabold tracking-tight text-white sm:text-[5rem]'>
Create <span className="text-[hsl(280,100%,70%)]">T3</span> App Create <span className='text-[hsl(280,100%,70%)]'>T3</span> App
</h1> </h1>
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:gap-8"> <div className='grid grid-cols-1 gap-4 sm:grid-cols-2 md:gap-8'>
<Link <Link
className="flex max-w-xs flex-col gap-4 rounded-xl bg-white/10 p-4 text-white hover:bg-white/20" className='flex max-w-xs flex-col gap-4 rounded-xl bg-white/10 p-4 text-white hover:bg-white/20'
href="https://create.t3.gg/en/usage/first-steps" href='https://create.t3.gg/en/usage/first-steps'
target="_blank" target='_blank'
> >
<h3 className="text-2xl font-bold">First Steps →</h3> <h3 className='text-2xl font-bold'>First Steps →</h3>
<div className="text-lg"> <div className='text-lg'>
Just the basics - Everything you need to know to set up your Just the basics - Everything you need to know to set up your
database and authentication. database and authentication.
</div> </div>
</Link> </Link>
<Link <Link
className="flex max-w-xs flex-col gap-4 rounded-xl bg-white/10 p-4 text-white hover:bg-white/20" className='flex max-w-xs flex-col gap-4 rounded-xl bg-white/10 p-4 text-white hover:bg-white/20'
href="https://create.t3.gg/en/introduction" href='https://create.t3.gg/en/introduction'
target="_blank" target='_blank'
> >
<h3 className="text-2xl font-bold">Documentation →</h3> <h3 className='text-2xl font-bold'>Documentation →</h3>
<div className="text-lg"> <div className='text-lg'>
Learn more about Create T3 App, the libraries it uses, and how to Learn more about Create T3 App, the libraries it uses, and how to
deploy it. deploy it.
</div> </div>

6
src/components/context/theme.tsx
View File

@ -43,10 +43,12 @@ export const ThemeToggle = () => {
return ( return (
<Button variant='outline' size='icon' onClick={toggleTheme}> <Button variant='outline' size='icon' onClick={toggleTheme}>
<Sun className='h-[1.2rem] w-[1.2rem] rotate-0 scale-100 <Sun
className='h-[1.2rem] w-[1.2rem] rotate-0 scale-100
transition-all dark:-rotate-90 dark:scale-0' transition-all dark:-rotate-90 dark:scale-0'
/> />
<Moon className='absolute h-[1.2rem] w-[1.2rem] rotate-90 <Moon
className='absolute h-[1.2rem] w-[1.2rem] rotate-90
scale-0 transition-all dark:rotate-0 dark:scale-100' scale-0 transition-all dark:rotate-0 dark:scale-100'
/> />
<span className='sr-only'>Toggle theme</span> <span className='sr-only'>Toggle theme</span>

48
src/components/ui/button.tsx
View File

@ -1,8 +1,8 @@
import * as React from "react" import * as React from 'react';
import { Slot } from "@radix-ui/react-slot" import { Slot } from '@radix-ui/react-slot';
import { cva, type VariantProps } from "class-variance-authority" import { cva, type VariantProps } from 'class-variance-authority';
import { cn } from "@/lib/utils" import { cn } from '@/lib/utils';
const buttonVariants = cva( const buttonVariants = cva(
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
@ -10,30 +10,30 @@ const buttonVariants = cva(
variants: { variants: {
variant: { variant: {
default: default:
"bg-primary text-primary-foreground shadow-xs hover:bg-primary/90", 'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
destructive: destructive:
"bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60", 'bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
outline: outline:
"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50", 'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
secondary: secondary:
"bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80", 'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
ghost: ghost:
"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50", 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
link: "text-primary underline-offset-4 hover:underline", link: 'text-primary underline-offset-4 hover:underline',
}, },
size: { size: {
default: "h-9 px-4 py-2 has-[>svg]:px-3", default: 'h-9 px-4 py-2 has-[>svg]:px-3',
sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5", sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
lg: "h-10 rounded-md px-6 has-[>svg]:px-4", lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
icon: "size-9", icon: 'size-9',
}, },
}, },
defaultVariants: { defaultVariants: {
variant: "default", variant: 'default',
size: "default", size: 'default',
}, },
} },
) );
function Button({ function Button({
className, className,
@ -41,19 +41,19 @@ function Button({
size, size,
asChild = false, asChild = false,
...props ...props
}: React.ComponentProps<"button"> & }: React.ComponentProps<'button'> &
VariantProps<typeof buttonVariants> & { VariantProps<typeof buttonVariants> & {
asChild?: boolean asChild?: boolean;
}) { }) {
const Comp = asChild ? Slot : "button" const Comp = asChild ? Slot : 'button';
return ( return (
<Comp <Comp
data-slot="button" data-slot='button'
className={cn(buttonVariants({ variant, size, className }))} className={cn(buttonVariants({ variant, size, className }))}
{...props} {...props}
/> />
) );
} }
export { Button, buttonVariants } export { Button, buttonVariants };

6
src/env.js
View File

@ -1,5 +1,5 @@
import { createEnv } from "@t3-oss/env-nextjs"; import { createEnv } from '@t3-oss/env-nextjs';
import { z } from "zod"; import { z } from 'zod';
export const env = createEnv({ export const env = createEnv({
/** /**
@ -7,7 +7,7 @@ export const env = createEnv({
* This way you can ensure the app isn't built with invalid env vars. * This way you can ensure the app isn't built with invalid env vars.
*/ */
server: { server: {
NODE_ENV: z.enum(["development", "test", "production"]), NODE_ENV: z.enum(['development', 'test', 'production']),
}, },
/** /**

6
src/lib/utils.ts
View File

@ -1,6 +1,6 @@
import { clsx, type ClassValue } from "clsx" import { clsx, type ClassValue } from 'clsx';
import { twMerge } from "tailwind-merge" import { twMerge } from 'tailwind-merge';
export function cn(...inputs: ClassValue[]) { export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs)) return twMerge(clsx(inputs));
} }

8
src/middleware.ts
View File

@ -1,9 +1,9 @@
import { type NextRequest } from "next/server"; import { type NextRequest } from 'next/server';
import { updateSession } from "@/utils/supabase/middleware"; import { updateSession } from '@/utils/supabase/middleware';
export const middleware = async (request: NextRequest) => { export const middleware = async (request: NextRequest) => {
return await updateSession(request); return await updateSession(request);
} };
export const config = { export const config = {
matcher: [ matcher: [
@ -15,6 +15,6 @@ export const config = {
* - images - .svg, .png, .jpg, .jpeg, .gif, .webp * - images - .svg, .png, .jpg, .jpeg, .gif, .webp
* Feel free to modify this pattern to include more paths. * Feel free to modify this pattern to include more paths.
*/ */
"/((?!_next/static|_next/image|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)", '/((?!_next/static|_next/image|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)',
], ],
}; };

2
src/utils/supabase/client.ts
View File

@ -1,4 +1,4 @@
import { createBrowserClient } from "@supabase/ssr"; import { createBrowserClient } from '@supabase/ssr';
export const createClient = () => export const createClient = () =>
createBrowserClient( createBrowserClient(

12
src/utils/supabase/middleware.ts
View File

@ -1,5 +1,5 @@
import { createServerClient } from "@supabase/ssr"; import { createServerClient } from '@supabase/ssr';
import { type NextRequest, NextResponse } from "next/server"; import { type NextRequest, NextResponse } from 'next/server';
export const updateSession = async (request: NextRequest) => { export const updateSession = async (request: NextRequest) => {
// This `try/catch` block is only here for the interactive tutorial. // This `try/catch` block is only here for the interactive tutorial.
@ -40,12 +40,12 @@ export const updateSession = async (request: NextRequest) => {
const user = await supabase.auth.getUser(); const user = await supabase.auth.getUser();
// protected routes // protected routes
if (request.nextUrl.pathname.startsWith("/protected") && user.error) { if (request.nextUrl.pathname.startsWith('/protected') && user.error) {
return NextResponse.redirect(new URL("/sign-in", request.url)); return NextResponse.redirect(new URL('/sign-in', request.url));
} }
if (request.nextUrl.pathname === "/" && !user.error) { if (request.nextUrl.pathname === '/' && !user.error) {
return NextResponse.redirect(new URL("/protected", request.url)); return NextResponse.redirect(new URL('/protected', request.url));
} }
return response; return response;

4
src/utils/supabase/server.ts
View File

@ -1,5 +1,5 @@
import { createServerClient } from "@supabase/ssr"; import { createServerClient } from '@supabase/ssr';
import { cookies } from "next/headers"; import { cookies } from 'next/headers';
export const createClient = async () => { export const createClient = async () => {
const cookieStore = await cookies(); const cookieStore = await cookies();

4
src/utils/utils.ts
View File

@ -1,4 +1,4 @@
import { redirect } from "next/navigation"; import { redirect } from 'next/navigation';
/** /**
* Redirects to a specified path with an encoded message as a query parameter. * Redirects to a specified path with an encoded message as a query parameter.
@ -8,7 +8,7 @@ import { redirect } from "next/navigation";
* @returns {never} This function doesn't return as it triggers a redirect. * @returns {never} This function doesn't return as it triggers a redirect.
*/ */
export function encodedRedirect( export function encodedRedirect(
type: "error" | "success", type: 'error' | 'success',
path: string, path: string,
message: string, message: string,
) { ) {