updated website
This commit is contained in:
@@ -1,25 +0,0 @@
|
|||||||
# Since the ".env" file is gitignored, you can use the ".env.example" file 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 environment variables, the schema in "/src/env.mjs"
|
|
||||||
# should be updated accordingly.
|
|
||||||
|
|
||||||
# Prisma
|
|
||||||
# https://www.prisma.io/docs/reference/database-reference/connection-urls#env
|
|
||||||
DATABASE_URL="file:./db.sqlite"
|
|
||||||
|
|
||||||
# Next Auth
|
|
||||||
# You can generate a new secret on the command line with:
|
|
||||||
# openssl rand -base64 32
|
|
||||||
# https://next-auth.js.org/configuration/options#secret
|
|
||||||
# NEXTAUTH_SECRET=""
|
|
||||||
NEXTAUTH_URL="http://localhost:3000"
|
|
||||||
|
|
||||||
# Next Auth Discord Provider
|
|
||||||
DISCORD_CLIENT_ID=""
|
|
||||||
DISCORD_CLIENT_SECRET=""
|
|
||||||
+13
-31
@@ -1,36 +1,18 @@
|
|||||||
/** @type {import("eslint").Linter.Config} */
|
module.exports = {
|
||||||
const config = {
|
root: true,
|
||||||
parser: "@typescript-eslint/parser",
|
env: { browser: true, es2020: true },
|
||||||
parserOptions: {
|
|
||||||
project: true,
|
|
||||||
},
|
|
||||||
plugins: ["@typescript-eslint"],
|
|
||||||
extends: [
|
extends: [
|
||||||
"next/core-web-vitals",
|
'eslint:recommended',
|
||||||
"plugin:@typescript-eslint/recommended-type-checked",
|
'plugin:@typescript-eslint/recommended',
|
||||||
"plugin:@typescript-eslint/stylistic-type-checked",
|
'plugin:react-hooks/recommended',
|
||||||
],
|
],
|
||||||
|
ignorePatterns: ['dist', '.eslintrc.cjs'],
|
||||||
|
parser: '@typescript-eslint/parser',
|
||||||
|
plugins: ['react-refresh'],
|
||||||
rules: {
|
rules: {
|
||||||
// These opinionated rules are enabled in stylistic-type-checked above.
|
'react-refresh/only-export-components': [
|
||||||
// Feel free to reconfigure them to your own preference.
|
'warn',
|
||||||
"@typescript-eslint/array-type": "off",
|
{ allowConstantExport: true },
|
||||||
"@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-misused-promises": [
|
|
||||||
2,
|
|
||||||
{
|
|
||||||
checksVoidReturn: { attributes: false },
|
|
||||||
},
|
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
};
|
}
|
||||||
|
|
||||||
module.exports = config;
|
|
||||||
|
|||||||
+19
-38
@@ -1,43 +1,24 @@
|
|||||||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
# Logs
|
||||||
|
logs
|
||||||
# dependencies
|
*.log
|
||||||
/node_modules
|
|
||||||
/.pnp
|
|
||||||
.pnp.js
|
|
||||||
|
|
||||||
# testing
|
|
||||||
/coverage
|
|
||||||
|
|
||||||
# database
|
|
||||||
/prisma/*.db
|
|
||||||
/prisma/*.sqlite
|
|
||||||
/prisma/db.sqlite-journal
|
|
||||||
|
|
||||||
# next.js
|
|
||||||
/.next/
|
|
||||||
/out/
|
|
||||||
next-env.d.ts
|
|
||||||
|
|
||||||
# production
|
|
||||||
/build
|
|
||||||
|
|
||||||
# misc
|
|
||||||
.DS_Store
|
|
||||||
*.pem
|
|
||||||
|
|
||||||
# debug
|
|
||||||
npm-debug.log*
|
npm-debug.log*
|
||||||
yarn-debug.log*
|
yarn-debug.log*
|
||||||
yarn-error.log*
|
yarn-error.log*
|
||||||
.pnpm-debug.log*
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
# local env files
|
node_modules
|
||||||
# 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
|
dist
|
||||||
.env
|
dist-ssr
|
||||||
.env*.local
|
*.local
|
||||||
|
|
||||||
# vercel
|
# Editor directories and files
|
||||||
.vercel
|
.vscode/*
|
||||||
|
!.vscode/extensions.json
|
||||||
# typescript
|
.idea
|
||||||
*.tsbuildinfo
|
.DS_Store
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
|
|||||||
@@ -1,2 +1,2 @@
|
|||||||
# Website
|
# Website
|
||||||
This is my website, [alexavfrantz.com](https://alexavfrantz.com)!
|
This is my website, [alexav.gg](https://alexav.gg)!
|
||||||
+12
@@ -0,0 +1,12 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Alex's Website</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="root"></div>
|
||||||
|
<script type="module" src="/src/main.tsx"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -1,35 +0,0 @@
|
|||||||
/**
|
|
||||||
* Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation. This is especially useful
|
|
||||||
* for Docker builds.
|
|
||||||
*/
|
|
||||||
await import("./src/env.mjs");
|
|
||||||
|
|
||||||
/** @type {import("next").NextConfig} */
|
|
||||||
const config = {
|
|
||||||
reactStrictMode: true,
|
|
||||||
i18n: {
|
|
||||||
locales: ["en"],
|
|
||||||
defaultLocale: "en",
|
|
||||||
},
|
|
||||||
images: {
|
|
||||||
remotePatterns: [
|
|
||||||
{
|
|
||||||
protocol: "https",
|
|
||||||
port: '',
|
|
||||||
hostname: "m.media-amazon.com"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
protocol: "https",
|
|
||||||
port: '',
|
|
||||||
hostname: "storage.thatalex.dev"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
protocol: "https",
|
|
||||||
port: '',
|
|
||||||
hostname: "lastfm.freetls.fastly.net"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
export default config;
|
|
||||||
Generated
+2037
-4178
File diff suppressed because it is too large
Load Diff
+22
-45
@@ -1,55 +1,32 @@
|
|||||||
{
|
{
|
||||||
"name": "website",
|
"name": "website",
|
||||||
"version": "0.1.0",
|
|
||||||
"private": true,
|
"private": true,
|
||||||
|
"version": "0.0.0",
|
||||||
|
"type": "module",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"build": "next build",
|
"dev": "vite",
|
||||||
"db:push": "prisma db push",
|
"build": "tsc && vite build",
|
||||||
"db:studio": "prisma studio",
|
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
|
||||||
"dev": "next dev",
|
"preview": "vite preview"
|
||||||
"postinstall": "prisma generate",
|
|
||||||
"lint": "next lint",
|
|
||||||
"start": "next start -p 8099"
|
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@next-auth/prisma-adapter": "^1.0.7",
|
|
||||||
"@prisma/client": "^5.1.1",
|
|
||||||
"@t3-oss/env-nextjs": "^0.7.0",
|
|
||||||
"@tanstack/react-query": "^4.32.6",
|
|
||||||
"@trpc/client": "^10.37.1",
|
|
||||||
"@trpc/next": "^10.37.1",
|
|
||||||
"@trpc/react-query": "^10.37.1",
|
|
||||||
"@trpc/server": "^10.37.1",
|
|
||||||
"axios": "^1.6.2",
|
|
||||||
"grommet-icons": "^4.12.1",
|
"grommet-icons": "^4.12.1",
|
||||||
"next": "^13.5.4",
|
"react": "^18.2.0",
|
||||||
"next-auth": "^4.23.0",
|
"react-dom": "^18.2.0"
|
||||||
"react": "18.2.0",
|
|
||||||
"react-dom": "18.2.0",
|
|
||||||
"react-markdown": "^9.0.1",
|
|
||||||
"remark-gfm": "^4.0.0",
|
|
||||||
"superjson": "^1.13.1",
|
|
||||||
"zod": "^3.22.4"
|
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@types/eslint": "^8.44.2",
|
"@types/react": "^18.2.66",
|
||||||
"@types/node": "^18.16.0",
|
"@types/react-dom": "^18.2.22",
|
||||||
"@types/react": "^18.2.20",
|
"@typescript-eslint/eslint-plugin": "^7.2.0",
|
||||||
"@types/react-dom": "^18.2.7",
|
"@typescript-eslint/parser": "^7.2.0",
|
||||||
"@typescript-eslint/eslint-plugin": "^6.3.0",
|
"@vitejs/plugin-react": "^4.2.1",
|
||||||
"@typescript-eslint/parser": "^6.3.0",
|
"autoprefixer": "^10.4.19",
|
||||||
"autoprefixer": "^10.4.14",
|
"eslint": "^8.57.0",
|
||||||
"eslint": "^8.47.0",
|
"eslint-plugin-react-hooks": "^4.6.0",
|
||||||
"eslint-config-next": "^13.5.4",
|
"eslint-plugin-react-refresh": "^0.4.6",
|
||||||
"postcss": "^8.4.27",
|
"postcss": "^8.4.38",
|
||||||
"prettier": "^3.0.0",
|
"tailwindcss": "^3.4.3",
|
||||||
"prettier-plugin-tailwindcss": "^0.5.1",
|
"typescript": "^5.2.2",
|
||||||
"prisma": "^5.1.1",
|
"vite": "^5.2.0"
|
||||||
"tailwindcss": "^3.3.3",
|
}
|
||||||
"typescript": "^5.1.6"
|
|
||||||
},
|
|
||||||
"ct3aMetadata": {
|
|
||||||
"initVersion": "7.22.0"
|
|
||||||
},
|
|
||||||
"packageManager": "npm@10.0.0"
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,8 +1,6 @@
|
|||||||
const config = {
|
export default {
|
||||||
plugins: {
|
plugins: {
|
||||||
tailwindcss: {},
|
tailwindcss: {},
|
||||||
autoprefixer: {},
|
autoprefixer: {},
|
||||||
},
|
},
|
||||||
};
|
}
|
||||||
|
|
||||||
module.exports = config;
|
|
||||||
@@ -1,6 +0,0 @@
|
|||||||
/** @type {import('prettier').Config & import('prettier-plugin-tailwindcss').options} */
|
|
||||||
const config = {
|
|
||||||
plugins: ["prettier-plugin-tailwindcss"],
|
|
||||||
};
|
|
||||||
|
|
||||||
export default config;
|
|
||||||
@@ -1,94 +0,0 @@
|
|||||||
generator client {
|
|
||||||
provider = "prisma-client-js"
|
|
||||||
}
|
|
||||||
|
|
||||||
datasource db {
|
|
||||||
provider = "postgresql"
|
|
||||||
url = env("DATABASE_URL")
|
|
||||||
}
|
|
||||||
|
|
||||||
model BlogPost {
|
|
||||||
id Int @id @default(autoincrement())
|
|
||||||
name String
|
|
||||||
image String
|
|
||||||
contents String
|
|
||||||
tagline String
|
|
||||||
createdAt DateTime @default(now())
|
|
||||||
updatedAt DateTime @updatedAt
|
|
||||||
|
|
||||||
createdBy User @relation(fields: [createdById], references: [id])
|
|
||||||
createdById String
|
|
||||||
|
|
||||||
@@index([name])
|
|
||||||
}
|
|
||||||
|
|
||||||
model Post {
|
|
||||||
id Int @id @default(autoincrement())
|
|
||||||
type String
|
|
||||||
name String
|
|
||||||
reviewContents String
|
|
||||||
image String
|
|
||||||
createdAt DateTime @default(now())
|
|
||||||
updatedAt DateTime @updatedAt
|
|
||||||
|
|
||||||
createdBy User @relation(fields: [createdById], references: [id])
|
|
||||||
createdById String
|
|
||||||
|
|
||||||
@@index([name])
|
|
||||||
}
|
|
||||||
|
|
||||||
model SocialLink {
|
|
||||||
id Int @id @default(autoincrement())
|
|
||||||
name String
|
|
||||||
url String
|
|
||||||
orderNumber Int @default(0)
|
|
||||||
|
|
||||||
@@index([name])
|
|
||||||
}
|
|
||||||
|
|
||||||
// Necessary for Next auth
|
|
||||||
model Account {
|
|
||||||
id String @id @default(cuid()) @map("_id")
|
|
||||||
userId String
|
|
||||||
type String
|
|
||||||
provider String
|
|
||||||
providerAccountId String
|
|
||||||
refresh_token String? // @db.Text
|
|
||||||
access_token String? // @db.Text
|
|
||||||
expires_at Int?
|
|
||||||
token_type String?
|
|
||||||
scope String?
|
|
||||||
id_token String? // @db.Text
|
|
||||||
session_state String?
|
|
||||||
user User @relation(fields: [userId], references: [id], onDelete: Cascade)
|
|
||||||
|
|
||||||
@@unique([provider, providerAccountId])
|
|
||||||
}
|
|
||||||
|
|
||||||
model Session {
|
|
||||||
id String @id @default(cuid()) @map("_id")
|
|
||||||
sessionToken String @unique
|
|
||||||
userId String
|
|
||||||
expires DateTime
|
|
||||||
user User @relation(fields: [userId], references: [id], onDelete: Cascade)
|
|
||||||
}
|
|
||||||
|
|
||||||
model User {
|
|
||||||
id String @id @default(cuid()) @map("_id")
|
|
||||||
name String?
|
|
||||||
email String? @unique
|
|
||||||
emailVerified DateTime?
|
|
||||||
image String?
|
|
||||||
accounts Account[]
|
|
||||||
sessions Session[]
|
|
||||||
posts Post[]
|
|
||||||
BlogPost BlogPost[]
|
|
||||||
}
|
|
||||||
|
|
||||||
model VerificationToken {
|
|
||||||
identifier String
|
|
||||||
token String @unique
|
|
||||||
expires DateTime
|
|
||||||
|
|
||||||
@@unique([identifier, token])
|
|
||||||
}
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 23 KiB |
@@ -0,0 +1,3 @@
|
|||||||
|
@tailwind base;
|
||||||
|
@tailwind components;
|
||||||
|
@tailwind utilities;
|
||||||
@@ -1,12 +0,0 @@
|
|||||||
import Head from 'next/head';
|
|
||||||
|
|
||||||
export default function HeadTags() {
|
|
||||||
return (
|
|
||||||
<Head>
|
|
||||||
<title>Alex Frantz</title>
|
|
||||||
<meta property="og:title" content="alexavfrantz.com" />
|
|
||||||
<meta property="og:description" content="Welcome to my personal website! See my favorite music, read my reviews on games and more!" />
|
|
||||||
<link rel="me" href="https://mast.thatalex.dev/@alex" />
|
|
||||||
</Head>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,29 +0,0 @@
|
|||||||
import Link from "next/link"
|
|
||||||
|
|
||||||
type HeaderItemProps = {
|
|
||||||
content: string,
|
|
||||||
linkTo: string,
|
|
||||||
newWindow?: boolean
|
|
||||||
}
|
|
||||||
export default function HeaderItem({
|
|
||||||
content,
|
|
||||||
linkTo,
|
|
||||||
newWindow
|
|
||||||
}: HeaderItemProps) {
|
|
||||||
return (
|
|
||||||
<Link
|
|
||||||
className="inline text-green-500 hover:underline font-bold text-3xl text-center"
|
|
||||||
href={linkTo}
|
|
||||||
target={newWindow ? "_blank" : "_self"}
|
|
||||||
>
|
|
||||||
{content}
|
|
||||||
</Link>
|
|
||||||
// <>
|
|
||||||
// <button className="inline text-green-500 hover:underline font-bold text-3xl pr-2"
|
|
||||||
// onClick={props.onClick}
|
|
||||||
// >
|
|
||||||
// {props.content}
|
|
||||||
// </button>
|
|
||||||
// </>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,33 +0,0 @@
|
|||||||
// component imports
|
|
||||||
import Head from "./Head"
|
|
||||||
import Header from "./header";
|
|
||||||
import Footer from "./footer";
|
|
||||||
|
|
||||||
// react imports
|
|
||||||
import React from 'react';
|
|
||||||
|
|
||||||
type LayoutProps = {
|
|
||||||
children: React.ReactNode
|
|
||||||
protectedPage?: boolean,
|
|
||||||
showHeader: boolean,
|
|
||||||
isHomePage: boolean
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function RootLayout({
|
|
||||||
children,
|
|
||||||
showHeader = true,
|
|
||||||
isHomePage = true
|
|
||||||
}: LayoutProps) {
|
|
||||||
return (
|
|
||||||
<main className="bg-black h-screen flex flex-col justify-center items-center overflow-y-hidden">
|
|
||||||
{ showHeader && <Header isHomePage={isHomePage} />}
|
|
||||||
|
|
||||||
<Head />
|
|
||||||
<div className="flicker">
|
|
||||||
{children}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{ showHeader && <Footer /> }
|
|
||||||
</main>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,11 +0,0 @@
|
|||||||
export default function Footer() {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<div className="absolute bottom-0 rounded-t-sm p-2 text-white opacity-50">
|
|
||||||
<p className="text-center">
|
|
||||||
The 'PipBoy' is owned by Bethesda, I'm just doing this for fun!
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,27 +0,0 @@
|
|||||||
import HeaderItem from "./HeaderItem";
|
|
||||||
|
|
||||||
type HeaderProps = {
|
|
||||||
isHomePage: boolean
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function Header({
|
|
||||||
isHomePage = false
|
|
||||||
}: HeaderProps) {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<div className="text-white mx-auto my-4 lg:max-w-md">
|
|
||||||
<div className="inline-block pb-2 space-x-2">
|
|
||||||
<HeaderItem content="HOME" linkTo={
|
|
||||||
!isHomePage ? "/?noAnimation"
|
|
||||||
: "/"
|
|
||||||
} />
|
|
||||||
<HeaderItem content="LINKS" linkTo="/links" />
|
|
||||||
<HeaderItem content="PROJECTS" linkTo="/projects" />
|
|
||||||
<HeaderItem content="RADIO" linkTo="/radio" />
|
|
||||||
<HeaderItem content="ABOUT" linkTo="/about" />
|
|
||||||
</div>
|
|
||||||
<hr className="border-green-500" />
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
-67
@@ -1,67 +0,0 @@
|
|||||||
import { createEnv } from "@t3-oss/env-nextjs";
|
|
||||||
import { z } from "zod";
|
|
||||||
|
|
||||||
export const env = createEnv({
|
|
||||||
/**
|
|
||||||
* Specify your server-side environment variables schema here. This way you can ensure the app
|
|
||||||
* isn't built with invalid env vars.
|
|
||||||
*/
|
|
||||||
server: {
|
|
||||||
DATABASE_URL: z
|
|
||||||
.string()
|
|
||||||
.url()
|
|
||||||
.refine(
|
|
||||||
(str) => !str.includes("YOUR_MYSQL_URL_HERE"),
|
|
||||||
"You forgot to change the default URL"
|
|
||||||
),
|
|
||||||
NODE_ENV: z
|
|
||||||
.enum(["development", "test", "production"])
|
|
||||||
.default("development"),
|
|
||||||
NEXTAUTH_SECRET:
|
|
||||||
process.env.NODE_ENV === "production"
|
|
||||||
? z.string()
|
|
||||||
: z.string().optional(),
|
|
||||||
NEXTAUTH_URL: z.preprocess(
|
|
||||||
// This makes Vercel deployments not fail if you don't set NEXTAUTH_URL
|
|
||||||
// Since NextAuth.js automatically uses the VERCEL_URL if present.
|
|
||||||
(str) => process.env.VERCEL_URL ?? str,
|
|
||||||
// VERCEL_URL doesn't include `https` so it cant be validated as a URL
|
|
||||||
process.env.VERCEL ? z.string() : z.string().url()
|
|
||||||
),
|
|
||||||
// Add ` on ID and SECRET if you want to make sure they're not empty
|
|
||||||
DISCORD_CLIENT_ID: z.string(),
|
|
||||||
DISCORD_CLIENT_SECRET: z.string(),
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 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_`.
|
|
||||||
*/
|
|
||||||
client: {
|
|
||||||
// NEXT_PUBLIC_CLIENTVAR: z.string(),
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* You can't destruct `process.env` as a regular object in the Next.js edge runtimes (e.g.
|
|
||||||
* middlewares) or client-side so we need to destruct manually.
|
|
||||||
*/
|
|
||||||
runtimeEnv: {
|
|
||||||
DATABASE_URL: process.env.DATABASE_URL,
|
|
||||||
NODE_ENV: process.env.NODE_ENV,
|
|
||||||
NEXTAUTH_SECRET: process.env.NEXTAUTH_SECRET,
|
|
||||||
NEXTAUTH_URL: process.env.NEXTAUTH_URL,
|
|
||||||
DISCORD_CLIENT_ID: process.env.DISCORD_CLIENT_ID,
|
|
||||||
DISCORD_CLIENT_SECRET: process.env.DISCORD_CLIENT_SECRET,
|
|
||||||
},
|
|
||||||
/**
|
|
||||||
* Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation. This is especially
|
|
||||||
* useful for Docker builds.
|
|
||||||
*/
|
|
||||||
skipValidation: !!process.env.SKIP_ENV_VALIDATION,
|
|
||||||
/**
|
|
||||||
* Makes it so that empty strings are treated as undefined.
|
|
||||||
* `SOME_VAR: z.string()` and `SOME_VAR=''` will throw an error.
|
|
||||||
*/
|
|
||||||
emptyStringAsUndefined: true,
|
|
||||||
});
|
|
||||||
@@ -0,0 +1,52 @@
|
|||||||
|
import {
|
||||||
|
Twitter,
|
||||||
|
BlockQuote,
|
||||||
|
Desktop
|
||||||
|
} from 'grommet-icons'
|
||||||
|
|
||||||
|
export default function Home() {
|
||||||
|
return (
|
||||||
|
<div className="flex justify-center items-center flex-col bg-black min-h-screen text-white">
|
||||||
|
<div className="inline-block space-x-2 text-center my-2">
|
||||||
|
<p className="inline hover:cursor-pointer hover:underline hover:text-gray-300">
|
||||||
|
<a href="https://watch.alexav.gg" target="_blank">
|
||||||
|
Watchlist
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
<p className="inline hover:cursor-pointer hover:underline hover:text-gray-300">
|
||||||
|
<a href="https://nobro.alexav.gg" target="_blank">
|
||||||
|
NoBro
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
<p className="inline hover:cursor-pointer hover:underline hover:text-gray-300">
|
||||||
|
Blog
|
||||||
|
</p>
|
||||||
|
<p className="inline hover:cursor-pointer hover:underline hover:text-gray-300">
|
||||||
|
Radio
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="max-w-fit">
|
||||||
|
<h1 className="text-5xl font-bold">Alex's<br />Website</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="inline-block space-x-2 text-center my-2">
|
||||||
|
<p className="inline hover:cursor-pointer hover:underline hover:text-gray-300">
|
||||||
|
<a href="https://twitter.com/avvex__" target="_blank">
|
||||||
|
<Twitter size="small" /> Twitter
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
<p className="inline hover:cursor-pointer hover:underline hover:text-gray-300">
|
||||||
|
<a href="https://mast.thatalex.dev" target="_blank">
|
||||||
|
<BlockQuote size="small" /> Mastodon
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
<p className="inline hover:cursor-pointer hover:underline hover:text-gray-300">
|
||||||
|
<a href="https://medal.tv/u/alexav" target="_blank">
|
||||||
|
<Desktop size="small" /> Medal
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,12 @@
|
|||||||
|
import React from 'react'
|
||||||
|
import ReactDOM from 'react-dom/client'
|
||||||
|
import './assets/main.css'
|
||||||
|
|
||||||
|
// pages
|
||||||
|
import MainPage from './index';
|
||||||
|
|
||||||
|
ReactDOM.createRoot(document.getElementById('root')!).render(
|
||||||
|
<React.StrictMode>
|
||||||
|
<MainPage />
|
||||||
|
</React.StrictMode>,
|
||||||
|
)
|
||||||
@@ -1,20 +0,0 @@
|
|||||||
import { type Session } from "next-auth";
|
|
||||||
import { SessionProvider } from "next-auth/react";
|
|
||||||
import { type AppType } from "next/app";
|
|
||||||
|
|
||||||
import { api } from "@/utils/api";
|
|
||||||
|
|
||||||
import "@/styles/globals.css";
|
|
||||||
|
|
||||||
const MyApp: AppType<{ session: Session | null }> = ({
|
|
||||||
Component,
|
|
||||||
pageProps: { session, ...pageProps },
|
|
||||||
}) => {
|
|
||||||
return (
|
|
||||||
<SessionProvider session={session}>
|
|
||||||
<Component {...pageProps} />
|
|
||||||
</SessionProvider>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default api.withTRPC(MyApp);
|
|
||||||
@@ -1,17 +0,0 @@
|
|||||||
import { Html, Head, Main, NextScript } from 'next/document'
|
|
||||||
|
|
||||||
export default function Document() {
|
|
||||||
return (
|
|
||||||
<Html>
|
|
||||||
<Head>
|
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" />
|
|
||||||
<link href="https://fonts.googleapis.com/css2?family=VT323&display=swap" rel="stylesheet" />
|
|
||||||
</Head>
|
|
||||||
<body>
|
|
||||||
<Main />
|
|
||||||
<NextScript />
|
|
||||||
</body>
|
|
||||||
</Html>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,12 +0,0 @@
|
|||||||
import RootLayout from "@/components/RootLayout";
|
|
||||||
|
|
||||||
export default function AboutPage() {
|
|
||||||
return (
|
|
||||||
<RootLayout isHomePage={false} showHeader={true}>
|
|
||||||
<div className="text-center text-green-500">
|
|
||||||
<h1 className="font-bold text-2xl">About this website</h1>
|
|
||||||
<p className="max-w-10">This is just a hobby project I thought was cool!<br /> I plan to play with it a bit to grasp more CSS, but so far, pretty cool right?</p>
|
|
||||||
</div>
|
|
||||||
</RootLayout>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,5 +0,0 @@
|
|||||||
import NextAuth from "next-auth";
|
|
||||||
|
|
||||||
import { authOptions } from "@/server/auth";
|
|
||||||
|
|
||||||
export default NextAuth(authOptions);
|
|
||||||
@@ -1,19 +0,0 @@
|
|||||||
import { createNextApiHandler } from "@trpc/server/adapters/next";
|
|
||||||
|
|
||||||
import { env } from "@/env.mjs";
|
|
||||||
import { appRouter } from "@/server/api/root";
|
|
||||||
import { createTRPCContext } from "@/server/api/trpc";
|
|
||||||
|
|
||||||
// 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,
|
|
||||||
});
|
|
||||||
@@ -1,91 +0,0 @@
|
|||||||
import RootLayout from '@/components/RootLayout';
|
|
||||||
import { useState, useEffect } from 'react';
|
|
||||||
|
|
||||||
export default function Home() {
|
|
||||||
const [doAnimation, setDoAnimation] = useState<boolean>(false);
|
|
||||||
const [pastLogo, setPastLogo] = useState<boolean>(false);
|
|
||||||
const [pastAnim, setPastAnim] = useState<boolean>(false);
|
|
||||||
const [text, setText] = useState<string[]>([]);
|
|
||||||
|
|
||||||
const generateRandomTextString = () => {
|
|
||||||
const characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz"
|
|
||||||
const length = 66;
|
|
||||||
let result = "";
|
|
||||||
|
|
||||||
for (let i = 0; i < length; i++) {
|
|
||||||
result += characters.charAt(Math.floor(Math.random() * characters.length)) + " "
|
|
||||||
}
|
|
||||||
|
|
||||||
return result;
|
|
||||||
}
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (location.href.includes("?noAnimation")) {
|
|
||||||
setPastAnim(true)
|
|
||||||
const logoElement = document.getElementById("pipboy");
|
|
||||||
const textElement = document.getElementById("textwall");
|
|
||||||
const mainElement = document.getElementById("mainelement");
|
|
||||||
|
|
||||||
if (logoElement && textElement && mainElement) {
|
|
||||||
logoElement.style.display = "none";
|
|
||||||
textElement.style.display = "none";
|
|
||||||
mainElement.style.display = "block";
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
setDoAnimation(true)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (doAnimation) {
|
|
||||||
const element = document.getElementById("pipboy")
|
|
||||||
if (element) {
|
|
||||||
setTimeout(() => {
|
|
||||||
element.style.display = "none";
|
|
||||||
setPastLogo(true)
|
|
||||||
}, 4000)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}, [doAnimation])
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const textElement = document.getElementById("textwall");
|
|
||||||
const mainElement = document.getElementById("mainelement");
|
|
||||||
if (pastLogo && doAnimation) {
|
|
||||||
const interval = setInterval(() => {
|
|
||||||
setText((prevState) => {
|
|
||||||
return [...prevState, generateRandomTextString()]
|
|
||||||
})
|
|
||||||
}, 50)
|
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
clearInterval(interval)
|
|
||||||
if (textElement && mainElement) {
|
|
||||||
setPastAnim(true)
|
|
||||||
textElement.style.display = "none"
|
|
||||||
mainElement.style.display = "block"
|
|
||||||
}
|
|
||||||
}, 5000)
|
|
||||||
}
|
|
||||||
}, [pastLogo, doAnimation])
|
|
||||||
|
|
||||||
return (
|
|
||||||
<RootLayout isHomePage={true} showHeader={pastAnim}>
|
|
||||||
{/* "logo", hidden after 4 seconds */}
|
|
||||||
<h1 className="text-green-500 text-9xl font-bold italic select-none" id="pipboy">Pip-Boy</h1>
|
|
||||||
|
|
||||||
{/* text wall, hidden until pastLogo */}
|
|
||||||
<p className="text-green-500 text-2xl max-w-10 flex-shrink-0 select-none" id="textwall">{text}</p>
|
|
||||||
|
|
||||||
{/* and the content :) */}
|
|
||||||
<div className="text-green-500 flicker max-w-1/2 hidden" id="mainelement">
|
|
||||||
<div className="text-center">
|
|
||||||
<p className="text-md">
|
|
||||||
<span className="font-bold text-2xl">Hello traveller!</span>
|
|
||||||
</p>
|
|
||||||
<p>Welcome to my website! Feel free to explore & learn more about me :)</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</RootLayout>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,33 +0,0 @@
|
|||||||
import RootLayout from "@/components/RootLayout";
|
|
||||||
import Link from "next/link";
|
|
||||||
|
|
||||||
export default function LinksPage() {
|
|
||||||
return (
|
|
||||||
<RootLayout showHeader={true} isHomePage={false}>
|
|
||||||
<div className="text-green-500">
|
|
||||||
<h1 className="text-3xl font-bold">
|
|
||||||
My Links!
|
|
||||||
</h1>
|
|
||||||
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Link
|
|
||||||
href="https://twitter.com/avvex__"
|
|
||||||
target="_blank"
|
|
||||||
>
|
|
||||||
<div className="hover:bg-green-500 hover:text-black">
|
|
||||||
<h1 className="text-2xl text-center">Twitter</h1>
|
|
||||||
</div>
|
|
||||||
</Link>
|
|
||||||
<Link
|
|
||||||
href="https://mast.thatalex.dev/@alex"
|
|
||||||
target="_blank"
|
|
||||||
>
|
|
||||||
<div className="hover:bg-green-500 hover:text-black">
|
|
||||||
<h1 className="text-2xl text-center">Mastodon</h1>
|
|
||||||
</div>
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</RootLayout>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,31 +0,0 @@
|
|||||||
import RootLayout from "@/components/RootLayout";
|
|
||||||
import Link from "next/link";
|
|
||||||
|
|
||||||
export default function ProjectsPage() {
|
|
||||||
return (
|
|
||||||
<RootLayout showHeader={true} isHomePage={false}>
|
|
||||||
<div className="space-y-2 text-center">
|
|
||||||
<Link href="https://github.com/azpha/splitstat" target="_blank">
|
|
||||||
<div className="hover:bg-green-500 hover:text-black text-green-500">
|
|
||||||
<h1 className=" text-2xl mx-32">SplitStat</h1>
|
|
||||||
</div>
|
|
||||||
</Link>
|
|
||||||
<Link href="https://github.com/azpha/mcsrvstat-js" target="_blank">
|
|
||||||
<div className="hover:bg-green-500 hover:text-black text-green-500">
|
|
||||||
<h1 className=" text-2xl mx-32">MCSRVSTAT Wrapper</h1>
|
|
||||||
</div>
|
|
||||||
</Link>
|
|
||||||
<Link href="https://github.com/azpha/pmanager" target="_blank">
|
|
||||||
<div className="hover:bg-green-500 hover:text-black text-green-500">
|
|
||||||
<h1 className=" text-2xl mx-32">PManager</h1>
|
|
||||||
</div>
|
|
||||||
</Link>
|
|
||||||
<Link href="https://github.com/azpha/tv-watchlist" target="_blank">
|
|
||||||
<div className="hover:bg-green-500 hover:text-black text-green-500">
|
|
||||||
<h1 className=" text-2xl mx-32">Watchlist</h1>
|
|
||||||
</div>
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
</RootLayout>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,50 +0,0 @@
|
|||||||
import RootLayout from "@/components/RootLayout";
|
|
||||||
import { api } from "@/utils/api";
|
|
||||||
|
|
||||||
// next components
|
|
||||||
import Link from 'next/link';
|
|
||||||
import Image from "next/image";
|
|
||||||
|
|
||||||
export default function MusicPage() {
|
|
||||||
const { data: musicData, fetchStatus} = api.misc.song.useQuery();
|
|
||||||
|
|
||||||
return (
|
|
||||||
<RootLayout showHeader={true} isHomePage={false}>
|
|
||||||
<div className="text-green-500 flicker max-w-1/2">
|
|
||||||
<div className="float-left mr-10">
|
|
||||||
{
|
|
||||||
fetchStatus === "idle" ?
|
|
||||||
musicData?.data.tracks.map((v,k) => {
|
|
||||||
return <div key={k}>
|
|
||||||
<div className={`text-lg ${k === 0 ? "bg-green-500 text-black" : "hover:bg-green-500 hover:text-black"}`}>
|
|
||||||
<Link href={v.url} target="_blank">
|
|
||||||
<h1 className="ml-2 mr-10 truncate max-w-10">{k === 0 && "■"} {v.name}</h1>
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
})
|
|
||||||
: <h1 className="font-bold text-green-500">Fetching..</h1>
|
|
||||||
}
|
|
||||||
<Link
|
|
||||||
href="https://last.fm/user/lulawex"
|
|
||||||
target="_blank"
|
|
||||||
className="hover:underline"
|
|
||||||
>
|
|
||||||
<p>Powered by Last.fm</p>
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
<div className="float-right">
|
|
||||||
{
|
|
||||||
fetchStatus === "idle" &&
|
|
||||||
<Image
|
|
||||||
src={musicData?.data.tracks[0]?.image[2]?.["#text"] ?? "https://storage.thatalex.dev"}
|
|
||||||
alt="Cover Art"
|
|
||||||
width="160"
|
|
||||||
height="160"
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</RootLayout>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,20 +0,0 @@
|
|||||||
import { postRouter } from "@/server/api/routers/post";
|
|
||||||
import { linksRouter } from "./routers/links";
|
|
||||||
import { blogRouter } from "./routers/blog";
|
|
||||||
import { miscRouter } from "./routers/misc";
|
|
||||||
import { createTRPCRouter } from "@/server/api/trpc";
|
|
||||||
|
|
||||||
/**
|
|
||||||
* This is the primary router for your server.
|
|
||||||
*
|
|
||||||
* All routers added in /api/routers should be manually added here.
|
|
||||||
*/
|
|
||||||
export const appRouter = createTRPCRouter({
|
|
||||||
post: postRouter,
|
|
||||||
links: linksRouter,
|
|
||||||
blog: blogRouter,
|
|
||||||
misc: miscRouter
|
|
||||||
});
|
|
||||||
|
|
||||||
// export type definition of API
|
|
||||||
export type AppRouter = typeof appRouter;
|
|
||||||
@@ -1,53 +0,0 @@
|
|||||||
import {z} from 'zod';
|
|
||||||
import {
|
|
||||||
createTRPCRouter,
|
|
||||||
protectedProcedure,
|
|
||||||
publicProcedure
|
|
||||||
} from "@/server/api/trpc";
|
|
||||||
|
|
||||||
export const blogRouter = createTRPCRouter({
|
|
||||||
create: protectedProcedure
|
|
||||||
.input(
|
|
||||||
z.object({
|
|
||||||
name: z.string().min(1).max(100),
|
|
||||||
contents: z.string().min(1),
|
|
||||||
tagline: z.string().min(1).max(30),
|
|
||||||
image: z.string().min(1)
|
|
||||||
})
|
|
||||||
)
|
|
||||||
.mutation(async ({ ctx, input }) => {
|
|
||||||
return ctx.db.blogPost.create({
|
|
||||||
data: {
|
|
||||||
name: input.name,
|
|
||||||
contents: input.contents,
|
|
||||||
tagline: input.tagline,
|
|
||||||
image: input.image,
|
|
||||||
createdBy: { connect: { id: ctx.session.user.id } },
|
|
||||||
},
|
|
||||||
});
|
|
||||||
}),
|
|
||||||
delete: protectedProcedure
|
|
||||||
.input(
|
|
||||||
z.number().min(1)
|
|
||||||
)
|
|
||||||
.mutation(async ({ctx, input}) => {
|
|
||||||
return ctx.db.blogPost.delete({
|
|
||||||
where: {
|
|
||||||
id: input
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}),
|
|
||||||
getOne: publicProcedure
|
|
||||||
.input(
|
|
||||||
z.number()
|
|
||||||
)
|
|
||||||
.query(({ ctx, input }) => {
|
|
||||||
return ctx.db.blogPost.findFirst({
|
|
||||||
where: { id: input },
|
|
||||||
});
|
|
||||||
}),
|
|
||||||
getAll: publicProcedure
|
|
||||||
.query(({ctx}) => {
|
|
||||||
return ctx.db.blogPost.findMany()
|
|
||||||
}),
|
|
||||||
})
|
|
||||||
@@ -1,62 +0,0 @@
|
|||||||
import {z} from "zod";
|
|
||||||
import {
|
|
||||||
createTRPCRouter,
|
|
||||||
publicProcedure,
|
|
||||||
protectedProcedure
|
|
||||||
} from "@/server/api/trpc";
|
|
||||||
|
|
||||||
export const linksRouter = createTRPCRouter({
|
|
||||||
create: protectedProcedure
|
|
||||||
.input(
|
|
||||||
z.object({
|
|
||||||
name: z.string().min(1),
|
|
||||||
url: z.string().min(1),
|
|
||||||
orderNumber: z.number().optional()
|
|
||||||
})
|
|
||||||
)
|
|
||||||
.mutation(async ({ctx, input}) => {
|
|
||||||
return ctx.db.socialLink.create({
|
|
||||||
data: {
|
|
||||||
name: input.name,
|
|
||||||
url: input.url,
|
|
||||||
orderNumber: input.orderNumber
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}),
|
|
||||||
update: protectedProcedure
|
|
||||||
.input(
|
|
||||||
z.object({
|
|
||||||
id: z.number(),
|
|
||||||
name: z.string().min(1).optional(),
|
|
||||||
url: z.string().min(1).optional(),
|
|
||||||
orderNumber: z.number().optional(),
|
|
||||||
})
|
|
||||||
)
|
|
||||||
.mutation(async ({ctx, input}) => {
|
|
||||||
return ctx.db.socialLink.update({
|
|
||||||
data: {
|
|
||||||
name: input.name,
|
|
||||||
url: input.url,
|
|
||||||
orderNumber: input.orderNumber
|
|
||||||
},
|
|
||||||
where: {
|
|
||||||
id: input.id
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}),
|
|
||||||
delete: protectedProcedure
|
|
||||||
.input(
|
|
||||||
z.number().min(1)
|
|
||||||
)
|
|
||||||
.mutation(async ({ctx, input}) => {
|
|
||||||
return ctx.db.socialLink.delete({
|
|
||||||
where: {
|
|
||||||
id: input
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}),
|
|
||||||
getAll: publicProcedure
|
|
||||||
.query(async ({ctx}) => {
|
|
||||||
return ctx.db.socialLink.findMany()
|
|
||||||
})
|
|
||||||
})
|
|
||||||
@@ -1,44 +0,0 @@
|
|||||||
import axios from 'axios';
|
|
||||||
import {
|
|
||||||
createTRPCRouter,
|
|
||||||
publicProcedure
|
|
||||||
} from '@/server/api/trpc';
|
|
||||||
|
|
||||||
type ImageListType = {
|
|
||||||
"size": string,
|
|
||||||
"#text": string
|
|
||||||
}
|
|
||||||
|
|
||||||
type TrackResponseType = {
|
|
||||||
status: number,
|
|
||||||
data: {
|
|
||||||
tracks: LastTrackType[]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
type LastTrackType = {
|
|
||||||
"@attr": {
|
|
||||||
"nowplaying": string
|
|
||||||
},
|
|
||||||
"album": {
|
|
||||||
"mbid": string,
|
|
||||||
"#text": string
|
|
||||||
},
|
|
||||||
"artist": {
|
|
||||||
"mbid": string,
|
|
||||||
"#text": string,
|
|
||||||
},
|
|
||||||
"image": ImageListType[],
|
|
||||||
"mbid": string,
|
|
||||||
"name": string,
|
|
||||||
"streamable": number,
|
|
||||||
"url": string
|
|
||||||
}
|
|
||||||
|
|
||||||
export const miscRouter = createTRPCRouter({
|
|
||||||
song: publicProcedure
|
|
||||||
.query(async () => {
|
|
||||||
const response = await axios.get<TrackResponseType>("https://api.thatalex.dev/v4/social/music")
|
|
||||||
return response.data
|
|
||||||
}),
|
|
||||||
})
|
|
||||||
@@ -1,63 +0,0 @@
|
|||||||
import { z } from "zod";
|
|
||||||
|
|
||||||
import {
|
|
||||||
createTRPCRouter,
|
|
||||||
protectedProcedure,
|
|
||||||
publicProcedure,
|
|
||||||
} from "@/server/api/trpc";
|
|
||||||
|
|
||||||
export const postRouter = createTRPCRouter({
|
|
||||||
create: protectedProcedure
|
|
||||||
.input(
|
|
||||||
z.object({
|
|
||||||
name: z.string().min(1),
|
|
||||||
reviewContents: z.string().min(1),
|
|
||||||
type: z.string().min(1),
|
|
||||||
image: z.string().min(1)
|
|
||||||
})
|
|
||||||
)
|
|
||||||
.mutation(async ({ ctx, input }) => {
|
|
||||||
return ctx.db.post.create({
|
|
||||||
data: {
|
|
||||||
name: input.name,
|
|
||||||
reviewContents: input.reviewContents,
|
|
||||||
type: input.type,
|
|
||||||
image: input.image,
|
|
||||||
createdBy: { connect: { id: ctx.session.user.id } },
|
|
||||||
},
|
|
||||||
});
|
|
||||||
}),
|
|
||||||
|
|
||||||
delete: protectedProcedure
|
|
||||||
.input(
|
|
||||||
z.number().min(1)
|
|
||||||
)
|
|
||||||
.mutation(async ({ctx, input}) => {
|
|
||||||
return ctx.db.post.delete({
|
|
||||||
where: {
|
|
||||||
id: input
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}),
|
|
||||||
|
|
||||||
getOne: publicProcedure
|
|
||||||
.input(String)
|
|
||||||
.query(({ ctx, input }) => {
|
|
||||||
return ctx.db.post.findFirst({
|
|
||||||
where: { name: input },
|
|
||||||
});
|
|
||||||
}),
|
|
||||||
|
|
||||||
getAll: publicProcedure
|
|
||||||
.query(({ctx}) => {
|
|
||||||
return ctx.db.post.findMany()
|
|
||||||
}),
|
|
||||||
|
|
||||||
getAllOfType: publicProcedure
|
|
||||||
.input(String)
|
|
||||||
.query(({ctx, input}) => {
|
|
||||||
return ctx.db.post.findMany({
|
|
||||||
where: { type: input }
|
|
||||||
})
|
|
||||||
})
|
|
||||||
});
|
|
||||||
@@ -1,131 +0,0 @@
|
|||||||
/**
|
|
||||||
* 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.
|
|
||||||
*/
|
|
||||||
|
|
||||||
import { initTRPC, TRPCError } from "@trpc/server";
|
|
||||||
import { type CreateNextContextOptions } from "@trpc/server/adapters/next";
|
|
||||||
import { type Session } from "next-auth";
|
|
||||||
import superjson from "superjson";
|
|
||||||
import { ZodError } from "zod";
|
|
||||||
|
|
||||||
import { getServerAuthSession } from "@/server/auth";
|
|
||||||
import { db } from "@/server/db";
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 1. CONTEXT
|
|
||||||
*
|
|
||||||
* This section defines the "contexts" that are available in the backend API.
|
|
||||||
*
|
|
||||||
* These allow you to access things when processing a request, like the database, the session, etc.
|
|
||||||
*/
|
|
||||||
|
|
||||||
interface CreateContextOptions {
|
|
||||||
session: Session | null;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 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 don't 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#-serverapitrpcts
|
|
||||||
*/
|
|
||||||
const createInnerTRPCContext = (opts: CreateContextOptions) => {
|
|
||||||
return {
|
|
||||||
session: opts.session,
|
|
||||||
db,
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* This is the actual context you will use in your router. It will be used to process every request
|
|
||||||
* that goes through your tRPC endpoint.
|
|
||||||
*
|
|
||||||
* @see https://trpc.io/docs/context
|
|
||||||
*/
|
|
||||||
export const createTRPCContext = async (opts: CreateNextContextOptions) => {
|
|
||||||
const { req, res } = opts;
|
|
||||||
|
|
||||||
// Get the session from the server using the getServerSession wrapper function
|
|
||||||
const session = await getServerAuthSession({ req, res });
|
|
||||||
|
|
||||||
return createInnerTRPCContext({
|
|
||||||
session,
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 2. INITIALIZATION
|
|
||||||
*
|
|
||||||
* This is where the tRPC API is initialized, connecting the context and transformer. We also parse
|
|
||||||
* ZodErrors so that you get typesafety on the frontend if your procedure fails due to validation
|
|
||||||
* errors on the backend.
|
|
||||||
*/
|
|
||||||
|
|
||||||
const t = initTRPC.context<typeof createTRPCContext>().create({
|
|
||||||
transformer: superjson,
|
|
||||||
errorFormatter({ shape, error }) {
|
|
||||||
return {
|
|
||||||
...shape,
|
|
||||||
data: {
|
|
||||||
...shape.data,
|
|
||||||
zodError:
|
|
||||||
error.cause instanceof ZodError ? error.cause.flatten() : null,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 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" directory.
|
|
||||||
*/
|
|
||||||
|
|
||||||
/**
|
|
||||||
* This is how you create new routers and sub-routers in your tRPC API.
|
|
||||||
*
|
|
||||||
* @see https://trpc.io/docs/router
|
|
||||||
*/
|
|
||||||
export const createTRPCRouter = t.router;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Public (unauthenticated) 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;
|
|
||||||
|
|
||||||
/** Reusable middleware that enforces users are logged in before running the procedure. */
|
|
||||||
const enforceUserIsAuthed = t.middleware(({ ctx, next }) => {
|
|
||||||
if (!ctx.session?.user) {
|
|
||||||
throw new TRPCError({ code: "UNAUTHORIZED" });
|
|
||||||
}
|
|
||||||
return next({
|
|
||||||
ctx: {
|
|
||||||
// infers the `session` as non-nullable
|
|
||||||
session: { ...ctx.session, user: ctx.session.user },
|
|
||||||
},
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Protected (authenticated) procedure
|
|
||||||
*
|
|
||||||
* If you want a query or mutation to ONLY be accessible to logged in users, use this. It verifies
|
|
||||||
* the session is valid and guarantees `ctx.session.user` is not null.
|
|
||||||
*
|
|
||||||
* @see https://trpc.io/docs/procedures
|
|
||||||
*/
|
|
||||||
export const protectedProcedure = t.procedure.use(enforceUserIsAuthed);
|
|
||||||
@@ -1,80 +0,0 @@
|
|||||||
import { PrismaAdapter } from "@next-auth/prisma-adapter";
|
|
||||||
import { type GetServerSidePropsContext } from "next";
|
|
||||||
import {
|
|
||||||
getServerSession,
|
|
||||||
type DefaultSession,
|
|
||||||
type NextAuthOptions,
|
|
||||||
} from "next-auth";
|
|
||||||
import DiscordProvider from "next-auth/providers/discord";
|
|
||||||
|
|
||||||
import { env } from "@/env.mjs";
|
|
||||||
import { db } from "@/server/db";
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Module augmentation for `next-auth` types. Allows us to add custom properties to the `session`
|
|
||||||
* object and keep type safety.
|
|
||||||
*
|
|
||||||
* @see https://next-auth.js.org/getting-started/typescript#module-augmentation
|
|
||||||
*/
|
|
||||||
declare module "next-auth" {
|
|
||||||
interface Session extends DefaultSession {
|
|
||||||
user: DefaultSession["user"] & {
|
|
||||||
id: string;
|
|
||||||
// ...other properties
|
|
||||||
// role: UserRole;
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
// interface User {
|
|
||||||
// // ...other properties
|
|
||||||
// // role: UserRole;
|
|
||||||
// }
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Options for NextAuth.js used to configure adapters, providers, callbacks, etc.
|
|
||||||
*
|
|
||||||
* @see https://next-auth.js.org/configuration/options
|
|
||||||
*/
|
|
||||||
export const authOptions: NextAuthOptions = {
|
|
||||||
callbacks: {
|
|
||||||
session: ({ session, user }) => ({
|
|
||||||
...session,
|
|
||||||
user: {
|
|
||||||
...session.user,
|
|
||||||
id: user.id,
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
signIn: ({ user, account, profile, email, credentials }) => {
|
|
||||||
return account?.providerAccountId === '288101780074528768'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
adapter: PrismaAdapter(db),
|
|
||||||
providers: [
|
|
||||||
DiscordProvider({
|
|
||||||
clientId: env.DISCORD_CLIENT_ID,
|
|
||||||
clientSecret: env.DISCORD_CLIENT_SECRET,
|
|
||||||
}),
|
|
||||||
/**
|
|
||||||
* ...add more providers here.
|
|
||||||
*
|
|
||||||
* Most other providers require a bit more work than the Discord provider. For example, the
|
|
||||||
* GitHub provider requires you to add the `refresh_token_expires_in` field to the Account
|
|
||||||
* model. Refer to the NextAuth.js docs for the provider you want to use. Example:
|
|
||||||
*
|
|
||||||
* @see https://next-auth.js.org/providers/github
|
|
||||||
*/
|
|
||||||
],
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Wrapper for `getServerSession` so that you don't need to import the `authOptions` in every file.
|
|
||||||
*
|
|
||||||
* @see https://next-auth.js.org/configuration/nextjs
|
|
||||||
*/
|
|
||||||
export const getServerAuthSession = (ctx: {
|
|
||||||
req: GetServerSidePropsContext["req"];
|
|
||||||
res: GetServerSidePropsContext["res"];
|
|
||||||
}) => {
|
|
||||||
return getServerSession(ctx.req, ctx.res, authOptions);
|
|
||||||
};
|
|
||||||
@@ -1,16 +0,0 @@
|
|||||||
import { PrismaClient } from "@prisma/client";
|
|
||||||
|
|
||||||
import { env } from "@/env.mjs";
|
|
||||||
|
|
||||||
const globalForPrisma = globalThis as unknown as {
|
|
||||||
prisma: PrismaClient | undefined;
|
|
||||||
};
|
|
||||||
|
|
||||||
export const db =
|
|
||||||
globalForPrisma.prisma ??
|
|
||||||
new PrismaClient({
|
|
||||||
log:
|
|
||||||
env.NODE_ENV === "development" ? ["query", "error", "warn"] : ["error"],
|
|
||||||
});
|
|
||||||
|
|
||||||
if (env.NODE_ENV !== "production") globalForPrisma.prisma = db;
|
|
||||||
@@ -1,25 +0,0 @@
|
|||||||
@tailwind base;
|
|
||||||
@tailwind components;
|
|
||||||
@tailwind utilities;
|
|
||||||
|
|
||||||
body {
|
|
||||||
font-family: "VT323", monospace;
|
|
||||||
font-weight: 400;
|
|
||||||
font-style: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes flicker {
|
|
||||||
0% {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
50% {
|
|
||||||
opacity: 0.5;
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.flicker {
|
|
||||||
animation: flicker 0.5s alternate;
|
|
||||||
}
|
|
||||||
@@ -1,68 +0,0 @@
|
|||||||
/**
|
|
||||||
* This is the client-side entrypoint for your tRPC API. It is used to create the `api` object which
|
|
||||||
* contains the Next.js App-wrapper, as well as your type-safe 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 type-safe 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>;
|
|
||||||
Vendored
+1
@@ -0,0 +1 @@
|
|||||||
|
/// <reference types="vite/client" />
|
||||||
@@ -0,0 +1,12 @@
|
|||||||
|
/** @type {import('tailwindcss').Config} */
|
||||||
|
export default {
|
||||||
|
content: [
|
||||||
|
"./index.html",
|
||||||
|
"./src/**/*.{js,ts,tsx,jsx}"
|
||||||
|
],
|
||||||
|
theme: {
|
||||||
|
extend: {},
|
||||||
|
},
|
||||||
|
plugins: [],
|
||||||
|
}
|
||||||
|
|
||||||
@@ -1,19 +0,0 @@
|
|||||||
import { type Config } from "tailwindcss";
|
|
||||||
import { fontFamily } from "tailwindcss/defaultTheme";
|
|
||||||
|
|
||||||
export default {
|
|
||||||
content: ["./src/**/*.tsx"],
|
|
||||||
theme: {
|
|
||||||
extend: {
|
|
||||||
colors: {
|
|
||||||
"terminalbar": "#333333",
|
|
||||||
"terminalback": "#0c0c0c",
|
|
||||||
"medal": "#ffb84b"
|
|
||||||
},
|
|
||||||
fontFamily: {
|
|
||||||
sans: ["var(--font-sans)", ...fontFamily.sans],
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
plugins: [],
|
|
||||||
} satisfies Config;
|
|
||||||
+18
-28
@@ -1,35 +1,25 @@
|
|||||||
{
|
{
|
||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
"target": "es2017",
|
"target": "ES2020",
|
||||||
"lib": ["dom", "dom.iterable", "esnext"],
|
"useDefineForClassFields": true,
|
||||||
"allowJs": true,
|
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||||
"checkJs": true,
|
"module": "ESNext",
|
||||||
"skipLibCheck": true,
|
"skipLibCheck": true,
|
||||||
"strict": true,
|
|
||||||
"forceConsistentCasingInFileNames": true,
|
/* Bundler mode */
|
||||||
"noEmit": true,
|
"moduleResolution": "bundler",
|
||||||
"esModuleInterop": true,
|
"allowImportingTsExtensions": true,
|
||||||
"module": "esnext",
|
|
||||||
"moduleResolution": "node",
|
|
||||||
"resolveJsonModule": true,
|
"resolveJsonModule": true,
|
||||||
"isolatedModules": true,
|
"isolatedModules": true,
|
||||||
"jsx": "preserve",
|
"noEmit": true,
|
||||||
"incremental": true,
|
"jsx": "react-jsx",
|
||||||
"noUncheckedIndexedAccess": true,
|
|
||||||
"baseUrl": ".",
|
/* Linting */
|
||||||
"paths": {
|
"strict": true,
|
||||||
"@/*": ["./src/*"]
|
"noUnusedLocals": true,
|
||||||
},
|
"noUnusedParameters": true,
|
||||||
"plugins": [{ "name": "next" }]
|
"noFallthroughCasesInSwitch": true
|
||||||
},
|
},
|
||||||
"include": [
|
"include": ["src"],
|
||||||
".eslintrc.cjs",
|
"references": [{ "path": "./tsconfig.node.json" }]
|
||||||
"next-env.d.ts",
|
|
||||||
"**/*.ts",
|
|
||||||
"**/*.tsx",
|
|
||||||
"**/*.cjs",
|
|
||||||
"**/*.mjs",
|
|
||||||
".next/types/**/*.ts"
|
|
||||||
],
|
|
||||||
"exclude": ["node_modules"]
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -0,0 +1,11 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"composite": true,
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"module": "ESNext",
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"allowSyntheticDefaultImports": true,
|
||||||
|
"strict": true
|
||||||
|
},
|
||||||
|
"include": ["vite.config.ts"]
|
||||||
|
}
|
||||||
@@ -0,0 +1,7 @@
|
|||||||
|
import { defineConfig } from 'vite'
|
||||||
|
import react from '@vitejs/plugin-react'
|
||||||
|
|
||||||
|
// https://vitejs.dev/config/
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [react()],
|
||||||
|
})
|
||||||
Reference in New Issue
Block a user