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 tseslint from "typescript-eslint";
import { FlatCompat } from '@eslint/eslintrc';
import tseslint from 'typescript-eslint';
const compat = new FlatCompat({
baseDirectory: import.meta.dirname,
@ -7,30 +7,30 @@ const compat = new FlatCompat({
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: [
...tseslint.configs.recommended,
...tseslint.configs.recommendedTypeChecked,
...tseslint.configs.stylisticTypeChecked,
],
rules: {
"@typescript-eslint/array-type": "off",
"@typescript-eslint/consistent-type-definitions": "off",
"@typescript-eslint/consistent-type-imports": [
"warn",
{ prefer: "type-imports", fixStyle: "inline-type-imports" },
'@typescript-eslint/array-type': 'off',
'@typescript-eslint/consistent-type-definitions': 'off',
'@typescript-eslint/consistent-type-imports': [
'warn',
{ prefer: 'type-imports', fixStyle: 'inline-type-imports' },
],
"@typescript-eslint/no-unused-vars": [
"warn",
{ argsIgnorePattern: "^_" },
'@typescript-eslint/no-unused-vars': [
'warn',
{ argsIgnorePattern: '^_' },
],
"@typescript-eslint/require-await": "off",
"@typescript-eslint/no-misused-promises": [
"error",
'@typescript-eslint/require-await': 'off',
'@typescript-eslint/no-misused-promises': [
'error',
{ 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
* for Docker builds.
*/
import "./src/env.js";
import './src/env.js';
/** @type {import("next").NextConfig} */
const config = {};

2
postcss.config.js
View File

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

2
prettier.config.js
View File

@ -1,4 +1,4 @@
/** @type {import('prettier').Config & import('prettier-plugin-tailwindcss').PluginOptions} */
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 "@/styles/globals.css";
import { Geist } from "next/font/google";
import { cn } from "@/lib/utils";
import { ThemeProvider } from '@/components/context/theme'
import { type Metadata } from 'next';
import '@/styles/globals.css';
import { Geist } from 'next/font/google';
import { cn } from '@/lib/utils';
import { ThemeProvider } from '@/components/context/theme';
export const metadata: Metadata = {
title: "T3 Template with Supabase",
description:
"Generated by create-t3-app",
title: 'T3 Template with Supabase',
description: 'Generated by create-t3-app',
icons: [
{
rel: "icon",
url: "/images/favicon.ico",
rel: 'icon',
url: '/images/favicon.ico',
},
{
rel: 'icon',
@ -22,29 +20,21 @@ export const metadata: Metadata = {
},
{
rel: 'apple-touch-icon',
url: '/images/appicon.png'
url: '/images/appicon.png',
},
],
};
const geist = Geist({
subsets: ["latin"],
variable: "--font-geist-sans",
subsets: ['latin'],
variable: '--font-geist-sans',
});
const RootLayout = ({
children,
}: Readonly<{ children: React.ReactNode }>) => {
const RootLayout = ({ children }: Readonly<{ children: React.ReactNode }>) => {
return (
<html
lang="en"
className={`${geist.variable}`}
suppressHydrationWarning
>
<html lang='en' className={`${geist.variable}`} suppressHydrationWarning>
<body
className={cn(
'bg-background text-foreground font-sans antialiased'
)}
className={cn('bg-background text-foreground font-sans antialiased')}
>
<ThemeProvider
attribute='class'
@ -54,14 +44,12 @@ const RootLayout = ({
>
<main className='min-h-screen flex flex-col items-center'>
<div className='flex-1 w-full flex flex-col gap-20 items-center'>
<nav className=''>
{children}
</nav>
<nav className=''>{children}</nav>
</div>
</main>
</ThemeProvider>
</body>
</html>
);
}
};
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() {
return (
<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">
<h1 className="text-5xl font-extrabold tracking-tight text-white sm:text-[5rem]">
Create <span className="text-[hsl(280,100%,70%)]">T3</span> App
<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'>
<h1 className='text-5xl font-extrabold tracking-tight text-white sm:text-[5rem]'>
Create <span className='text-[hsl(280,100%,70%)]'>T3</span> App
</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
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"
target="_blank"
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'
target='_blank'
>
<h3 className="text-2xl font-bold">First Steps →</h3>
<div className="text-lg">
<h3 className='text-2xl font-bold'>First Steps →</h3>
<div className='text-lg'>
Just the basics - Everything you need to know to set up your
database and authentication.
</div>
</Link>
<Link
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"
target="_blank"
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'
target='_blank'
>
<h3 className="text-2xl font-bold">Documentation →</h3>
<div className="text-lg">
<h3 className='text-2xl font-bold'>Documentation →</h3>
<div className='text-lg'>
Learn more about Create T3 App, the libraries it uses, and how to
deploy it.
</div>

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

@ -43,10 +43,12 @@ export const ThemeToggle = () => {
return (
<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'
/>
<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'
/>
<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 { Slot } from "@radix-ui/react-slot"
import { cva, type VariantProps } from "class-variance-authority"
import * as React from 'react';
import { Slot } from '@radix-ui/react-slot';
import { cva, type VariantProps } from 'class-variance-authority';
import { cn } from "@/lib/utils"
import { cn } from '@/lib/utils';
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",
@ -10,30 +10,30 @@ const buttonVariants = cva(
variants: {
variant: {
default:
"bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
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:
"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:
"bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
ghost:
"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
link: "text-primary underline-offset-4 hover:underline",
'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
link: 'text-primary underline-offset-4 hover:underline',
},
size: {
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",
lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
icon: "size-9",
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',
lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
icon: 'size-9',
},
},
defaultVariants: {
variant: "default",
size: "default",
variant: 'default',
size: 'default',
},
}
)
},
);
function Button({
className,
@ -41,19 +41,19 @@ function Button({
size,
asChild = false,
...props
}: React.ComponentProps<"button"> &
}: React.ComponentProps<'button'> &
VariantProps<typeof buttonVariants> & {
asChild?: boolean
asChild?: boolean;
}) {
const Comp = asChild ? Slot : "button"
const Comp = asChild ? Slot : 'button';
return (
<Comp
data-slot="button"
data-slot='button'
className={cn(buttonVariants({ variant, size, className }))}
{...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 { z } from "zod";
import { createEnv } from '@t3-oss/env-nextjs';
import { z } from 'zod';
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.
*/
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 { twMerge } from "tailwind-merge"
import { clsx, type ClassValue } from 'clsx';
import { twMerge } from 'tailwind-merge';
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 { updateSession } from "@/utils/supabase/middleware";
import { type NextRequest } from 'next/server';
import { updateSession } from '@/utils/supabase/middleware';
export const middleware = async (request: NextRequest) => {
return await updateSession(request);
}
};
export const config = {
matcher: [
@ -15,6 +15,6 @@ export const config = {
* - images - .svg, .png, .jpg, .jpeg, .gif, .webp
* 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 = () =>
createBrowserClient(

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

@ -1,5 +1,5 @@
import { createServerClient } from "@supabase/ssr";
import { type NextRequest, NextResponse } from "next/server";
import { createServerClient } from '@supabase/ssr';
import { type NextRequest, NextResponse } from 'next/server';
export const updateSession = async (request: NextRequest) => {
// 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();
// protected routes
if (request.nextUrl.pathname.startsWith("/protected") && user.error) {
return NextResponse.redirect(new URL("/sign-in", request.url));
if (request.nextUrl.pathname.startsWith('/protected') && user.error) {
return NextResponse.redirect(new URL('/sign-in', request.url));
}
if (request.nextUrl.pathname === "/" && !user.error) {
return NextResponse.redirect(new URL("/protected", request.url));
if (request.nextUrl.pathname === '/' && !user.error) {
return NextResponse.redirect(new URL('/protected', request.url));
}
return response;

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

@ -1,5 +1,5 @@
import { createServerClient } from "@supabase/ssr";
import { cookies } from "next/headers";
import { createServerClient } from '@supabase/ssr';
import { cookies } from 'next/headers';
export const createClient = async () => {
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.
@ -8,7 +8,7 @@ import { redirect } from "next/navigation";
* @returns {never} This function doesn't return as it triggers a redirect.
*/
export function encodedRedirect(
type: "error" | "success",
type: 'error' | 'success',
path: string,
message: string,
) {