initial commit with home, header, footer, react-page and builder.io
This commit is contained in:
commit
e3f62f1494
|
|
@ -0,0 +1,9 @@
|
|||
# Since .env is gitignored, you can use .env.example to build a new `.env` file when you clone the repo.
|
||||
# Keep this file up-to-date when you add new variables to `.env`.
|
||||
|
||||
# This file will be committed to version control, so make sure not to have any secrets in it.
|
||||
# If you are cloning this repo, create a copy of this file named `.env` and populate it with your secrets.
|
||||
|
||||
# When adding additional env variables, the schema in /env/schema.mjs should be updated accordingly
|
||||
# Prisma
|
||||
DATABASE_URL=file:./db.sqlite
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
{
|
||||
"overrides": [
|
||||
{
|
||||
"extends": [
|
||||
"plugin:@typescript-eslint/recommended-requiring-type-checking"
|
||||
],
|
||||
"files": ["*.ts", "*.tsx"],
|
||||
"parserOptions": {
|
||||
"project": "tsconfig.json"
|
||||
}
|
||||
}
|
||||
],
|
||||
"parser": "@typescript-eslint/parser",
|
||||
"parserOptions": {
|
||||
"project": "./tsconfig.json"
|
||||
},
|
||||
"plugins": ["@typescript-eslint"],
|
||||
"extends": ["next/core-web-vitals", "plugin:@typescript-eslint/recommended"],
|
||||
"rules": {
|
||||
"@typescript-eslint/consistent-type-imports": "warn"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
/.pnp
|
||||
.pnp.js
|
||||
|
||||
# testing
|
||||
/coverage
|
||||
|
||||
# database
|
||||
/prisma/db.sqlite
|
||||
/prisma/db.sqlite-journal
|
||||
|
||||
# next.js
|
||||
/.next/
|
||||
/out/
|
||||
next-env.d.ts
|
||||
|
||||
# production
|
||||
/build
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
*.pem
|
||||
|
||||
# debug
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
.pnpm-debug.log*
|
||||
|
||||
# local env files
|
||||
# do not commit any .env files to git, except for the .env.example file. https://create.t3.gg/en/usage/env-variables#using-environment-variables
|
||||
.env
|
||||
.env*.local
|
||||
|
||||
# vercel
|
||||
.vercel
|
||||
|
||||
# typescript
|
||||
*.tsbuildinfo
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
# Create T3 App
|
||||
|
||||
This is a [T3 Stack](https://create.t3.gg/) project bootstrapped with `create-t3-app`.
|
||||
|
||||
## What's next? How do I make an app with this?
|
||||
|
||||
We try to keep this project as simple as possible, so you can start with just the scaffolding we set up for you, and add additional things later when they become necessary.
|
||||
|
||||
If you are not familiar with the different technologies used in this project, please refer to the respective docs. If you still are in the wind, please join our [Discord](https://t3.gg/discord) and ask for help.
|
||||
|
||||
- [Next.js](https://nextjs.org)
|
||||
- [NextAuth.js](https://next-auth.js.org)
|
||||
- [Prisma](https://prisma.io)
|
||||
- [Tailwind CSS](https://tailwindcss.com)
|
||||
- [tRPC](https://trpc.io)
|
||||
|
||||
## Learn More
|
||||
|
||||
To learn more about the [T3 Stack](https://create.t3.gg/), take a look at the following resources:
|
||||
|
||||
- [Documentation](https://create.t3.gg/)
|
||||
- [Learn the T3 Stack](https://create.t3.gg/en/faq#what-learning-resources-are-currently-available) — Check out these awesome tutorials
|
||||
|
||||
You can check out the [create-t3-app GitHub repository](https://github.com/t3-oss/create-t3-app) — your feedback and contributions are welcome!
|
||||
|
||||
## How do I deploy this?
|
||||
|
||||
Follow our deployment guides for [Vercel](https://create.t3.gg/en/deployment/vercel), [Netlify](https://create.t3.gg/en/deployment/netlify) and [Docker](https://create.t3.gg/en/deployment/docker) for more information.
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
// @ts-check
|
||||
/**
|
||||
* Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation.
|
||||
* This is especially useful for Docker builds.
|
||||
*/
|
||||
!process.env.SKIP_ENV_VALIDATION && (await import("./src/env/server.mjs"));
|
||||
|
||||
/** @type {import("next").NextConfig} */
|
||||
const config = {
|
||||
reactStrictMode: true,
|
||||
/* If trying out the experimental appDir, comment the i18n config out
|
||||
* @see https://github.com/vercel/next.js/issues/41980 */
|
||||
i18n: {
|
||||
locales: ["en"],
|
||||
defaultLocale: "en",
|
||||
},
|
||||
};
|
||||
export default config;
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
{
|
||||
"name": "pchl",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build": "next build",
|
||||
"dev": "next dev",
|
||||
"postinstall": "prisma generate",
|
||||
"lint": "next lint",
|
||||
"start": "next start"
|
||||
},
|
||||
"dependencies": {
|
||||
"@builder.io/react": "^2.0.13",
|
||||
"@emotion/react": "^11.10.5",
|
||||
"@emotion/styled": "^11.10.5",
|
||||
"@prisma/client": "^4.8.0",
|
||||
"@react-page/editor": "^5.3.11",
|
||||
"@react-page/plugins-image": "^5.3.11",
|
||||
"@react-page/plugins-slate": "^5.3.11",
|
||||
"@tanstack/react-query": "^4.20.0",
|
||||
"@trpc/client": "^10.8.1",
|
||||
"@trpc/next": "^10.8.1",
|
||||
"@trpc/react-query": "^10.8.1",
|
||||
"@trpc/server": "^10.8.1",
|
||||
"add": "^2.0.6",
|
||||
"next": "13.1.2",
|
||||
"react": "18.2.0",
|
||||
"react-dom": "18.2.0",
|
||||
"react-icons": "^4.7.1",
|
||||
"superjson": "1.9.1",
|
||||
"zod": "^3.20.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^18.11.18",
|
||||
"@types/prettier": "^2.7.2",
|
||||
"@types/react": "^18.0.26",
|
||||
"@types/react-dom": "^18.0.10",
|
||||
"@typescript-eslint/eslint-plugin": "^5.47.1",
|
||||
"@typescript-eslint/parser": "^5.47.1",
|
||||
"autoprefixer": "^10.4.7",
|
||||
"eslint": "^8.30.0",
|
||||
"eslint-config-next": "13.1.2",
|
||||
"postcss": "^8.4.14",
|
||||
"prettier": "^2.8.1",
|
||||
"prettier-plugin-tailwindcss": "^0.2.1",
|
||||
"prisma": "^4.8.0",
|
||||
"tailwindcss": "^3.2.0",
|
||||
"typescript": "^4.9.4"
|
||||
},
|
||||
"ct3aMetadata": {
|
||||
"initVersion": "7.3.2"
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,6 @@
|
|||
module.exports = {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
};
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
/** @type {import("prettier").Config} */
|
||||
module.exports = {
|
||||
plugins: [require.resolve("prettier-plugin-tailwindcss")],
|
||||
};
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
// This is your Prisma schema file,
|
||||
// learn more about it in the docs: https://pris.ly/d/prisma-schema
|
||||
|
||||
generator client {
|
||||
provider = "prisma-client-js"
|
||||
}
|
||||
|
||||
datasource db {
|
||||
provider = "sqlite"
|
||||
url = env("DATABASE_URL")
|
||||
}
|
||||
|
||||
model Example {
|
||||
id String @id @default(cuid())
|
||||
createdAt DateTime @default(now())
|
||||
updatedAt DateTime @updatedAt
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 64 KiB |
|
|
@ -0,0 +1,35 @@
|
|||
// @ts-check
|
||||
import { clientEnv, clientSchema } from "./schema.mjs";
|
||||
|
||||
const _clientEnv = clientSchema.safeParse(clientEnv);
|
||||
|
||||
export const formatErrors = (
|
||||
/** @type {import('zod').ZodFormattedError<Map<string,string>,string>} */
|
||||
errors,
|
||||
) =>
|
||||
Object.entries(errors)
|
||||
.map(([name, value]) => {
|
||||
if (value && "_errors" in value)
|
||||
return `${name}: ${value._errors.join(", ")}\n`;
|
||||
})
|
||||
.filter(Boolean);
|
||||
|
||||
if (!_clientEnv.success) {
|
||||
console.error(
|
||||
"❌ Invalid environment variables:\n",
|
||||
...formatErrors(_clientEnv.error.format()),
|
||||
);
|
||||
throw new Error("Invalid environment variables");
|
||||
}
|
||||
|
||||
for (let key of Object.keys(_clientEnv.data)) {
|
||||
if (!key.startsWith("NEXT_PUBLIC_")) {
|
||||
console.warn(
|
||||
`❌ Invalid public environment variable name: ${key}. It must begin with 'NEXT_PUBLIC_'`,
|
||||
);
|
||||
|
||||
throw new Error("Invalid public environment variable name");
|
||||
}
|
||||
}
|
||||
|
||||
export const env = _clientEnv.data;
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
// @ts-check
|
||||
import { z } from "zod";
|
||||
|
||||
/**
|
||||
* Specify your server-side environment variables schema here.
|
||||
* This way you can ensure the app isn't built with invalid env vars.
|
||||
*/
|
||||
export const serverSchema = z.object({
|
||||
DATABASE_URL: z.string().url(),
|
||||
NODE_ENV: z.enum(["development", "test", "production"]),
|
||||
});
|
||||
|
||||
/**
|
||||
* You can't destruct `process.env` as a regular object in the Next.js
|
||||
* middleware, so you have to do it manually here.
|
||||
* @type {{ [k in keyof z.infer<typeof serverSchema>]: z.infer<typeof serverSchema>[k] | undefined }}
|
||||
*/
|
||||
export const serverEnv = {
|
||||
DATABASE_URL: process.env.DATABASE_URL,
|
||||
NODE_ENV: process.env.NODE_ENV,
|
||||
};
|
||||
|
||||
/**
|
||||
* Specify your client-side environment variables schema here.
|
||||
* This way you can ensure the app isn't built with invalid env vars.
|
||||
* To expose them to the client, prefix them with `NEXT_PUBLIC_`.
|
||||
*/
|
||||
export const clientSchema = z.object({
|
||||
// NEXT_PUBLIC_CLIENTVAR: z.string(),
|
||||
});
|
||||
|
||||
/**
|
||||
* You can't destruct `process.env` as a regular object, so you have to do
|
||||
* it manually here. This is because Next.js evaluates this at build time,
|
||||
* and only used environment variables are included in the build.
|
||||
* @type {{ [k in keyof z.infer<typeof clientSchema>]: z.infer<typeof clientSchema>[k] | undefined }}
|
||||
*/
|
||||
export const clientEnv = {
|
||||
// NEXT_PUBLIC_CLIENTVAR: process.env.NEXT_PUBLIC_CLIENTVAR,
|
||||
};
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
// @ts-check
|
||||
/**
|
||||
* This file is included in `/next.config.mjs` which ensures the app isn't built with invalid env vars.
|
||||
* It has to be a `.mjs`-file to be imported there.
|
||||
*/
|
||||
import { serverSchema, serverEnv } from "./schema.mjs";
|
||||
import { env as clientEnv, formatErrors } from "./client.mjs";
|
||||
|
||||
const _serverEnv = serverSchema.safeParse(serverEnv);
|
||||
|
||||
if (!_serverEnv.success) {
|
||||
console.error(
|
||||
"❌ Invalid environment variables:\n",
|
||||
...formatErrors(_serverEnv.error.format()),
|
||||
);
|
||||
throw new Error("Invalid environment variables");
|
||||
}
|
||||
|
||||
for (let key of Object.keys(_serverEnv.data)) {
|
||||
if (key.startsWith("NEXT_PUBLIC_")) {
|
||||
console.warn("❌ You are exposing a server-side env-variable:", key);
|
||||
|
||||
throw new Error("You are exposing a server-side env-variable");
|
||||
}
|
||||
}
|
||||
|
||||
export const env = { ..._serverEnv.data, ...clientEnv };
|
||||
|
|
@ -0,0 +1,115 @@
|
|||
import { useRouter } from 'next/router';
|
||||
import DefaultErrorPage from 'next/error';
|
||||
import Head from 'next/head';
|
||||
import React from 'react';
|
||||
import { BuilderComponent, builder, useIsPreviewing, Builder } from '@builder.io/react';
|
||||
|
||||
|
||||
// Initialize the Builder SDK with your organization's API Key
|
||||
// Find the API Key on: https://builder.io/account/settings
|
||||
builder.init("37b11147aa464a4d9525b2ab66c319f7");
|
||||
|
||||
export async function getStaticProps({ params }) {
|
||||
// Fetch the first page from Builder that matches the current URL.
|
||||
// Use the `userAttributes` field for targeting content.
|
||||
// For more, see https://www.builder.io/c/docs/targeting-with-builder
|
||||
const page = await builder
|
||||
.get('page', {
|
||||
userAttributes: {
|
||||
urlPath: '/' + (params?.page?.join('/') || ''),
|
||||
},
|
||||
})
|
||||
.toPromise();
|
||||
|
||||
return {
|
||||
props: {
|
||||
page: page || null,
|
||||
},
|
||||
revalidate: 5,
|
||||
};
|
||||
}
|
||||
|
||||
export async function getStaticPaths() {
|
||||
// Fetch all published pages for the current model.
|
||||
// Using the `fields` option will limit the size of the response
|
||||
// and only return the `data.url` field from the matching pages.
|
||||
const pages = await builder.getAll('page', {
|
||||
fields: 'data.url', // only request the `data.url` field
|
||||
options: { noTargeting: true },
|
||||
limit: 0,
|
||||
});
|
||||
|
||||
return {
|
||||
paths: pages.map(page => `${page.data?.url}`),
|
||||
fallback: true,
|
||||
};
|
||||
}
|
||||
|
||||
export default function Page({ page }) {
|
||||
const router = useRouter();
|
||||
// This flag indicates if you are viewing the page in the Builder editor.
|
||||
const isPreviewing = useIsPreviewing();
|
||||
|
||||
if (router.isFallback) {
|
||||
return <h1>Loading...</h1>;
|
||||
}
|
||||
|
||||
// Add your error page here to return if there are no matching
|
||||
// content entries published in Builder.
|
||||
if (!page && !isPreviewing) {
|
||||
return <DefaultErrorPage statusCode={404} />;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
{/* Add any relevant SEO metadata or open graph tags here */}
|
||||
<title>{page?.data.title}</title>
|
||||
<meta name="description" content={page?.data.descripton} />
|
||||
</Head>
|
||||
<div style={{ padding: 50, textAlign: 'center' }}>
|
||||
{/* Put your header or main layout here */}
|
||||
Your header
|
||||
</div>
|
||||
|
||||
{/* Render the Builder page */}
|
||||
<BuilderComponent model="page" content={page} />
|
||||
|
||||
<div style={{ padding: 50, textAlign: 'center' }}>
|
||||
{/* Put your footer or main layout here */}
|
||||
Your footer
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
// This is an example of registering a custom component to be used in Builder.io.
|
||||
// You would typically do this in the file where the component is defined.
|
||||
|
||||
const MyCustomComponent = props => (
|
||||
<div>
|
||||
<h1>{props.title}</h1>
|
||||
<p>{props.description}</p>
|
||||
</div>
|
||||
);
|
||||
|
||||
// This is a minimal example of a custom component, you can view more complex input types here:
|
||||
// https://www.builder.io/c/docs/custom-react-components#input-types
|
||||
Builder.registerComponent(MyCustomComponent, {
|
||||
name: 'ExampleCustomComponent',
|
||||
inputs: [
|
||||
{ name: 'title', type: 'string', defaultValue: 'I am a React component!' },
|
||||
{
|
||||
name: 'description',
|
||||
type: 'string',
|
||||
defaultValue: 'Find my source in /pages/[...page].js',
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
// Register a custom insert menu to organize your custom componnets
|
||||
// https://www.builder.io/c/docs/custom-components-visual-editor#:~:text=than%20this%20screenshot.-,organizing%20your%20components%20in%20custom%20sections,-You%20can%20create
|
||||
Builder.register('insertMenu', {
|
||||
name: 'My Components',
|
||||
items: [{ item: 'ExampleCustomComponent', name: 'My React Component' }],
|
||||
});
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
import { type AppType } from "next/app";
|
||||
|
||||
import { api } from "../utils/api";
|
||||
|
||||
import "../styles/globals.css";
|
||||
import '@react-page/editor/lib/index.css';
|
||||
|
||||
const MyApp: AppType = ({ Component, pageProps }) => {
|
||||
return <Component {...pageProps} />;
|
||||
};
|
||||
|
||||
export default api.withTRPC(MyApp);
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
import { createNextApiHandler } from "@trpc/server/adapters/next";
|
||||
|
||||
import { env } from "../../../env/server.mjs";
|
||||
import { createTRPCContext } from "../../../server/api/trpc";
|
||||
import { appRouter } from "../../../server/api/root";
|
||||
|
||||
// export API handler
|
||||
export default createNextApiHandler({
|
||||
router: appRouter,
|
||||
createContext: createTRPCContext,
|
||||
onError:
|
||||
env.NODE_ENV === "development"
|
||||
? ({ path, error }) => {
|
||||
console.error(
|
||||
`❌ tRPC failed on ${path ?? "<no-path>"}: ${error.message}`,
|
||||
);
|
||||
}
|
||||
: undefined,
|
||||
});
|
||||
|
|
@ -0,0 +1,95 @@
|
|||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { FaGithub } from "react-icons/fa";
|
||||
|
||||
function Header() {
|
||||
return (
|
||||
<header className="flex w-full items-center justify-between bg-slate-800 p-8 text-white">
|
||||
<Link href="/">
|
||||
<Image src="/logo.png" alt="My Site Logo" width={128} height={77} />
|
||||
</Link>
|
||||
<nav>
|
||||
<ul className="flex items-center gap-2 space-x-4">
|
||||
<li>
|
||||
<Link href="/le-club">Le club</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/galeries">Galeries</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/contact">Contact</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link
|
||||
href="/espace-membres"
|
||||
className="bg-white px-6 py-2 text-stone-900"
|
||||
>
|
||||
Espace membres
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
|
||||
function Footer() {
|
||||
return (
|
||||
<footer className="absolute bottom-0 w-full bg-neutral-800">
|
||||
<div className="container mx-auto p-8">
|
||||
<div className="flex flex-col items-center justify-between md:flex-row">
|
||||
<div className="flex items-center md:flex-row">
|
||||
<div className="flex items-center">
|
||||
<Image
|
||||
src="/logo.png"
|
||||
alt="My Site Logo"
|
||||
width={128}
|
||||
height={77}
|
||||
/>
|
||||
</div>
|
||||
<div className="ml-4 flex flex-col">
|
||||
<span className="text-neutral-300">
|
||||
© 2023 Photo Club de Haute Lozère
|
||||
</span>
|
||||
<span className="text-neutral-300">Tous droits réservés</span>
|
||||
</div>
|
||||
<div className="ml-4 flex">
|
||||
<span className="text-neutral-300">Développé par </span>
|
||||
<span className="text-neutral-300">
|
||||
<a
|
||||
href="https://github.com/polynux"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
polynux <FaGithub />
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
|
||||
function Layout({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<div>
|
||||
<Header />
|
||||
{children}
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Home() {
|
||||
return (
|
||||
<Layout>
|
||||
<h1>My Site</h1>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
||||
export default Home;
|
||||
|
||||
export { Layout };
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
import { createTRPCRouter } from "./trpc";
|
||||
import { exampleRouter } from "./routers/example";
|
||||
|
||||
/**
|
||||
* This is the primary router for your server.
|
||||
*
|
||||
* All routers added in /api/routers should be manually added here
|
||||
*/
|
||||
export const appRouter = createTRPCRouter({
|
||||
example: exampleRouter,
|
||||
});
|
||||
|
||||
// export type definition of API
|
||||
export type AppRouter = typeof appRouter;
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
import { z } from "zod";
|
||||
|
||||
import { createTRPCRouter, publicProcedure } from "../trpc";
|
||||
|
||||
export const exampleRouter = createTRPCRouter({
|
||||
hello: publicProcedure
|
||||
.input(z.object({ text: z.string() }))
|
||||
.query(({ input }) => {
|
||||
return {
|
||||
greeting: `Hello ${input.text}`,
|
||||
};
|
||||
}),
|
||||
getAll: publicProcedure.query(({ ctx }) => {
|
||||
return ctx.prisma.example.findMany();
|
||||
}),
|
||||
});
|
||||
|
|
@ -0,0 +1,85 @@
|
|||
/**
|
||||
* YOU PROBABLY DON'T NEED TO EDIT THIS FILE, UNLESS:
|
||||
* 1. You want to modify request context (see Part 1)
|
||||
* 2. You want to create a new middleware or type of procedure (see Part 3)
|
||||
*
|
||||
* tl;dr - this is where all the tRPC server stuff is created and plugged in.
|
||||
* The pieces you will need to use are documented accordingly near the end
|
||||
*/
|
||||
|
||||
/**
|
||||
* 1. CONTEXT
|
||||
*
|
||||
* This section defines the "contexts" that are available in the backend API
|
||||
*
|
||||
* These allow you to access things like the database, the session, etc, when
|
||||
* processing a request
|
||||
*
|
||||
*/
|
||||
import { type CreateNextContextOptions } from "@trpc/server/adapters/next";
|
||||
|
||||
import { prisma } from "../db";
|
||||
|
||||
type CreateContextOptions = Record<string, never>;
|
||||
|
||||
/**
|
||||
* This helper generates the "internals" for a tRPC context. If you need to use
|
||||
* it, you can export it from here
|
||||
*
|
||||
* Examples of things you may need it for:
|
||||
* - testing, so we dont have to mock Next.js' req/res
|
||||
* - trpc's `createSSGHelpers` where we don't have req/res
|
||||
* @see https://create.t3.gg/en/usage/trpc#-servertrpccontextts
|
||||
*/
|
||||
const createInnerTRPCContext = (_opts: CreateContextOptions) => {
|
||||
return {
|
||||
prisma,
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* This is the actual context you'll use in your router. It will be used to
|
||||
* process every request that goes through your tRPC endpoint
|
||||
* @link https://trpc.io/docs/context
|
||||
*/
|
||||
export const createTRPCContext = (_opts: CreateNextContextOptions) => {
|
||||
return createInnerTRPCContext({});
|
||||
};
|
||||
|
||||
/**
|
||||
* 2. INITIALIZATION
|
||||
*
|
||||
* This is where the trpc api is initialized, connecting the context and
|
||||
* transformer
|
||||
*/
|
||||
import { initTRPC } from "@trpc/server";
|
||||
import superjson from "superjson";
|
||||
|
||||
const t = initTRPC.context<typeof createTRPCContext>().create({
|
||||
transformer: superjson,
|
||||
errorFormatter({ shape }) {
|
||||
return shape;
|
||||
},
|
||||
});
|
||||
|
||||
/**
|
||||
* 3. ROUTER & PROCEDURE (THE IMPORTANT BIT)
|
||||
*
|
||||
* These are the pieces you use to build your tRPC API. You should import these
|
||||
* a lot in the /src/server/api/routers folder
|
||||
*/
|
||||
|
||||
/**
|
||||
* This is how you create new routers and subrouters in your tRPC API
|
||||
* @see https://trpc.io/docs/router
|
||||
*/
|
||||
export const createTRPCRouter = t.router;
|
||||
|
||||
/**
|
||||
* Public (unauthed) procedure
|
||||
*
|
||||
* This is the base piece you use to build new queries and mutations on your
|
||||
* tRPC API. It does not guarantee that a user querying is authorized, but you
|
||||
* can still access user session data if they are logged in
|
||||
*/
|
||||
export const publicProcedure = t.procedure;
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
import { PrismaClient } from "@prisma/client";
|
||||
|
||||
import { env } from "../env/server.mjs";
|
||||
|
||||
declare global {
|
||||
// eslint-disable-next-line no-var
|
||||
var prisma: PrismaClient | undefined;
|
||||
}
|
||||
|
||||
export const prisma =
|
||||
global.prisma ||
|
||||
new PrismaClient({
|
||||
log:
|
||||
env.NODE_ENV === "development" ? ["query", "error", "warn"] : ["error"],
|
||||
});
|
||||
|
||||
if (env.NODE_ENV !== "production") {
|
||||
global.prisma = prisma;
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700;900&display=swap');
|
||||
|
||||
body {
|
||||
font-family: 'Lato', sans-serif;
|
||||
}
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
/**
|
||||
* This is the client-side entrypoint for your tRPC API.
|
||||
* It's used to create the `api` object which contains the Next.js App-wrapper
|
||||
* as well as your typesafe react-query hooks.
|
||||
*
|
||||
* We also create a few inference helpers for input and output types
|
||||
*/
|
||||
import { httpBatchLink, loggerLink } from "@trpc/client";
|
||||
import { createTRPCNext } from "@trpc/next";
|
||||
import { type inferRouterInputs, type inferRouterOutputs } from "@trpc/server";
|
||||
import superjson from "superjson";
|
||||
|
||||
import { type AppRouter } from "../server/api/root";
|
||||
|
||||
const getBaseUrl = () => {
|
||||
if (typeof window !== "undefined") return ""; // browser should use relative url
|
||||
if (process.env.VERCEL_URL) return `https://${process.env.VERCEL_URL}`; // SSR should use vercel url
|
||||
return `http://localhost:${process.env.PORT ?? 3000}`; // dev SSR should use localhost
|
||||
};
|
||||
|
||||
/**
|
||||
* A set of typesafe react-query hooks for your tRPC API
|
||||
*/
|
||||
export const api = createTRPCNext<AppRouter>({
|
||||
config() {
|
||||
return {
|
||||
/**
|
||||
* Transformer used for data de-serialization from the server
|
||||
* @see https://trpc.io/docs/data-transformers
|
||||
**/
|
||||
transformer: superjson,
|
||||
|
||||
/**
|
||||
* Links used to determine request flow from client to server
|
||||
* @see https://trpc.io/docs/links
|
||||
* */
|
||||
links: [
|
||||
loggerLink({
|
||||
enabled: (opts) =>
|
||||
process.env.NODE_ENV === "development" ||
|
||||
(opts.direction === "down" && opts.result instanceof Error),
|
||||
}),
|
||||
httpBatchLink({
|
||||
url: `${getBaseUrl()}/api/trpc`,
|
||||
}),
|
||||
],
|
||||
};
|
||||
},
|
||||
/**
|
||||
* Whether tRPC should await queries when server rendering pages
|
||||
* @see https://trpc.io/docs/nextjs#ssr-boolean-default-false
|
||||
*/
|
||||
ssr: false,
|
||||
});
|
||||
|
||||
/**
|
||||
* Inference helper for inputs
|
||||
* @example type HelloInput = RouterInputs['example']['hello']
|
||||
**/
|
||||
export type RouterInputs = inferRouterInputs<AppRouter>;
|
||||
/**
|
||||
* Inference helper for outputs
|
||||
* @example type HelloOutput = RouterOutputs['example']['hello']
|
||||
**/
|
||||
export type RouterOutputs = inferRouterOutputs<AppRouter>;
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
content: ["./src/**/*.{js,ts,jsx,tsx}"],
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [],
|
||||
};
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "es2017",
|
||||
"lib": ["dom", "dom.iterable", "esnext"],
|
||||
"allowJs": true,
|
||||
"skipLibCheck": true,
|
||||
"strict": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"noEmit": true,
|
||||
"esModuleInterop": true,
|
||||
"module": "esnext",
|
||||
"moduleResolution": "node",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"jsx": "preserve",
|
||||
"incremental": true,
|
||||
"noUncheckedIndexedAccess": true
|
||||
},
|
||||
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "**/*.cjs", "**/*.mjs"],
|
||||
"exclude": ["node_modules"]
|
||||
}
|
||||
Loading…
Reference in New Issue