Burn it all to the ground and start with bun and a reorg
This commit is contained in:
@@ -1,68 +0,0 @@
|
||||
{
|
||||
"parser": "@typescript-eslint/parser",
|
||||
"parserOptions": {
|
||||
"project": "./tsconfig.json"
|
||||
},
|
||||
"plugins": [
|
||||
"@typescript-eslint"
|
||||
],
|
||||
"extends": [
|
||||
"plugin:import/recommended",
|
||||
"plugin:@typescript-eslint/recommended",
|
||||
"plugin:@typescript-eslint/recommended-requiring-type-checking",
|
||||
"next/core-web-vitals"
|
||||
],
|
||||
"rules": {
|
||||
"semi": [
|
||||
"error",
|
||||
"always"
|
||||
],
|
||||
"arrow-spacing": [
|
||||
"error",
|
||||
{
|
||||
"before": true,
|
||||
"after": true
|
||||
}
|
||||
],
|
||||
"block-spacing": [
|
||||
"error"
|
||||
],
|
||||
"semi-spacing": [
|
||||
"error"
|
||||
],
|
||||
"computed-property-spacing": [
|
||||
"error"
|
||||
],
|
||||
"comma-spacing": [
|
||||
"error"
|
||||
],
|
||||
"keyword-spacing": [
|
||||
"error"
|
||||
],
|
||||
"func-call-spacing": [
|
||||
"error"
|
||||
],
|
||||
"template-curly-spacing": [
|
||||
"error"
|
||||
],
|
||||
"array-bracket-spacing": [
|
||||
"error"
|
||||
],
|
||||
"@typescript-eslint/explicit-function-return-type": [
|
||||
"error"
|
||||
],
|
||||
"indent": [
|
||||
"error",
|
||||
2
|
||||
],
|
||||
"@typescript-eslint/no-inferrable-types": [
|
||||
"off"
|
||||
],
|
||||
"@typescript-eslint/no-empty-function": [
|
||||
"off"
|
||||
],
|
||||
"jsx-a11y/alt-text": [
|
||||
"off"
|
||||
]
|
||||
}
|
||||
}
|
||||
14
.gitignore
vendored
14
.gitignore
vendored
@@ -4,14 +4,19 @@
|
||||
/node_modules
|
||||
/.pnp
|
||||
.pnp.js
|
||||
.yarn/install-state.gz
|
||||
|
||||
# testing
|
||||
/coverage
|
||||
|
||||
# database
|
||||
/prisma/db.sqlite
|
||||
/prisma/db.sqlite-journal
|
||||
db.sqlite
|
||||
|
||||
# next.js
|
||||
/.next/
|
||||
/out/
|
||||
next-env.d.ts
|
||||
|
||||
# production
|
||||
/build
|
||||
@@ -24,8 +29,11 @@
|
||||
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
|
||||
@@ -33,4 +41,6 @@ yarn-error.log*
|
||||
|
||||
# typescript
|
||||
*.tsbuildinfo
|
||||
next-env.d.ts
|
||||
|
||||
# idea files
|
||||
.idea
|
||||
62
.vscode/launch.json
vendored
62
.vscode/launch.json
vendored
@@ -1,32 +1,32 @@
|
||||
{
|
||||
"version": "0.2.0",
|
||||
"configurations": [
|
||||
{
|
||||
"name": "Next.js: debug server-side",
|
||||
"type": "node-terminal",
|
||||
"request": "launch",
|
||||
"command": "npm run dev"
|
||||
},
|
||||
{
|
||||
"name": "Next.js: debug client-side",
|
||||
"type": "chrome",
|
||||
"request": "launch",
|
||||
"url": "https://3000.vscode.home.joemonk.co.uk/"
|
||||
},
|
||||
{
|
||||
"name": "Next.js: debug full stack",
|
||||
"type": "node",
|
||||
"request": "launch",
|
||||
"program": "${workspaceFolder}/node_modules/.bin/next",
|
||||
"runtimeArgs": ["--inspect"],
|
||||
"skipFiles": ["<node_internals>/**"],
|
||||
"serverReadyAction": {
|
||||
"action": "debugWithEdge",
|
||||
"killOnServerStop": true,
|
||||
"pattern": "- Local:.+(https?://.+)",
|
||||
"uriFormat": "%s",
|
||||
"webRoot": "${workspaceFolder}"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
"version": "0.2.0",
|
||||
"configurations": [
|
||||
{
|
||||
"name": "Next.js: debug server-side",
|
||||
"type": "node-terminal",
|
||||
"request": "launch",
|
||||
"command": "npm run dev"
|
||||
},
|
||||
{
|
||||
"name": "Next.js: debug client-side",
|
||||
"type": "chrome",
|
||||
"request": "launch",
|
||||
"url": "https://3000.vscode.home.joemonk.co.uk/"
|
||||
},
|
||||
{
|
||||
"name": "Next.js: debug full stack",
|
||||
"type": "node",
|
||||
"request": "launch",
|
||||
"program": "${workspaceFolder}/node_modules/.bin/next",
|
||||
"runtimeArgs": ["--inspect"],
|
||||
"skipFiles": ["<node_internals>/**"],
|
||||
"serverReadyAction": {
|
||||
"action": "debugWithEdge",
|
||||
"killOnServerStop": true,
|
||||
"pattern": "- Local:.+(https?://.+)",
|
||||
"uriFormat": "%s",
|
||||
"webRoot": "${workspaceFolder}"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
41
README.md
41
README.md
@@ -1,36 +1,29 @@
|
||||
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
|
||||
# Create T3 App
|
||||
|
||||
## Getting Started
|
||||
This is a [T3 Stack](https://create.t3.gg/) project bootstrapped with `create-t3-app`.
|
||||
|
||||
First, run the development server:
|
||||
## What's next? How do I make an app with this?
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
# or
|
||||
yarn dev
|
||||
# or
|
||||
pnpm dev
|
||||
# or
|
||||
bun dev
|
||||
```
|
||||
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.
|
||||
|
||||
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
|
||||
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.
|
||||
|
||||
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
|
||||
|
||||
This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
|
||||
- [Next.js](https://nextjs.org)
|
||||
- [NextAuth.js](https://next-auth.js.org)
|
||||
- [Prisma](https://prisma.io)
|
||||
- [Drizzle](https://orm.drizzle.team)
|
||||
- [Tailwind CSS](https://tailwindcss.com)
|
||||
- [tRPC](https://trpc.io)
|
||||
|
||||
## Learn More
|
||||
|
||||
To learn more about Next.js, take a look at the following resources:
|
||||
To learn more about the [T3 Stack](https://create.t3.gg/), take a look at the following resources:
|
||||
|
||||
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
|
||||
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
|
||||
- [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 Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
|
||||
You can check out the [create-t3-app GitHub repository](https://github.com/t3-oss/create-t3-app) — your feedback and contributions are welcome!
|
||||
|
||||
## Deploy on Vercel
|
||||
## How do I deploy this?
|
||||
|
||||
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
|
||||
|
||||
Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
|
||||
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.
|
||||
|
||||
26
biome.jsonc
Normal file
26
biome.jsonc
Normal file
@@ -0,0 +1,26 @@
|
||||
{
|
||||
"$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
|
||||
"vcs": {
|
||||
"enabled": true,
|
||||
"clientKind": "git",
|
||||
"useIgnoreFile": true
|
||||
},
|
||||
"files": { "ignoreUnknown": false, "ignore": [] },
|
||||
"formatter": { "enabled": true },
|
||||
"organizeImports": { "enabled": true },
|
||||
"linter": {
|
||||
"enabled": true,
|
||||
"rules": {
|
||||
"nursery": {
|
||||
"useSortedClasses": {
|
||||
"level": "warn",
|
||||
"fix": "safe",
|
||||
"options": {
|
||||
"functions": ["clsx", "cva", "cn"]
|
||||
}
|
||||
}
|
||||
},
|
||||
"recommended": true
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,10 +1,11 @@
|
||||
import { defineConfig } from 'drizzle-kit';
|
||||
import type { Config } from "drizzle-kit";
|
||||
|
||||
export default defineConfig({
|
||||
out: './drizzle',
|
||||
schema: './src/db/schema',
|
||||
dialect: 'sqlite',
|
||||
dbCredentials: {
|
||||
url: `${process.cwd()}/db.sql`,
|
||||
},
|
||||
});
|
||||
import { env } from "@/env";
|
||||
|
||||
export default {
|
||||
schema: "./src/server/db/schema.ts",
|
||||
dialect: "sqlite",
|
||||
dbCredentials: {
|
||||
url: env.DATABASE_URL,
|
||||
},
|
||||
} satisfies Config;
|
||||
|
||||
18
drizzle/0000_harsh_toad_men.sql
Normal file
18
drizzle/0000_harsh_toad_men.sql
Normal file
@@ -0,0 +1,18 @@
|
||||
CREATE TABLE `photo` (
|
||||
`id` integer PRIMARY KEY AUTOINCREMENT NOT NULL,
|
||||
`src` text(256) NOT NULL,
|
||||
`width` integer NOT NULL,
|
||||
`height` integer NOT NULL,
|
||||
`blur` blob NOT NULL,
|
||||
`camera` text(128),
|
||||
`title` text(128),
|
||||
`description` text(1024),
|
||||
`exposureBiasValue` integer,
|
||||
`fNumber` real,
|
||||
`isoSpeedRatings` integer,
|
||||
`focalLength` integer,
|
||||
`takenAt` integer,
|
||||
`lensModel` text(128)
|
||||
);
|
||||
--> statement-breakpoint
|
||||
CREATE UNIQUE INDEX `photo_src_unique` ON `photo` (`src`);
|
||||
134
drizzle/meta/0000_snapshot.json
Normal file
134
drizzle/meta/0000_snapshot.json
Normal file
@@ -0,0 +1,134 @@
|
||||
{
|
||||
"version": "6",
|
||||
"dialect": "sqlite",
|
||||
"id": "246363f6-a664-4ec6-b43d-0033fe21ff8c",
|
||||
"prevId": "00000000-0000-0000-0000-000000000000",
|
||||
"tables": {
|
||||
"photo": {
|
||||
"name": "photo",
|
||||
"columns": {
|
||||
"id": {
|
||||
"name": "id",
|
||||
"type": "integer",
|
||||
"primaryKey": true,
|
||||
"notNull": true,
|
||||
"autoincrement": true
|
||||
},
|
||||
"src": {
|
||||
"name": "src",
|
||||
"type": "text(256)",
|
||||
"primaryKey": false,
|
||||
"notNull": true,
|
||||
"autoincrement": false
|
||||
},
|
||||
"width": {
|
||||
"name": "width",
|
||||
"type": "integer",
|
||||
"primaryKey": false,
|
||||
"notNull": true,
|
||||
"autoincrement": false
|
||||
},
|
||||
"height": {
|
||||
"name": "height",
|
||||
"type": "integer",
|
||||
"primaryKey": false,
|
||||
"notNull": true,
|
||||
"autoincrement": false
|
||||
},
|
||||
"blur": {
|
||||
"name": "blur",
|
||||
"type": "blob",
|
||||
"primaryKey": false,
|
||||
"notNull": true,
|
||||
"autoincrement": false
|
||||
},
|
||||
"camera": {
|
||||
"name": "camera",
|
||||
"type": "text(128)",
|
||||
"primaryKey": false,
|
||||
"notNull": false,
|
||||
"autoincrement": false
|
||||
},
|
||||
"title": {
|
||||
"name": "title",
|
||||
"type": "text(128)",
|
||||
"primaryKey": false,
|
||||
"notNull": false,
|
||||
"autoincrement": false
|
||||
},
|
||||
"description": {
|
||||
"name": "description",
|
||||
"type": "text(1024)",
|
||||
"primaryKey": false,
|
||||
"notNull": false,
|
||||
"autoincrement": false
|
||||
},
|
||||
"exposureBiasValue": {
|
||||
"name": "exposureBiasValue",
|
||||
"type": "integer",
|
||||
"primaryKey": false,
|
||||
"notNull": false,
|
||||
"autoincrement": false
|
||||
},
|
||||
"fNumber": {
|
||||
"name": "fNumber",
|
||||
"type": "real",
|
||||
"primaryKey": false,
|
||||
"notNull": false,
|
||||
"autoincrement": false
|
||||
},
|
||||
"isoSpeedRatings": {
|
||||
"name": "isoSpeedRatings",
|
||||
"type": "integer",
|
||||
"primaryKey": false,
|
||||
"notNull": false,
|
||||
"autoincrement": false
|
||||
},
|
||||
"focalLength": {
|
||||
"name": "focalLength",
|
||||
"type": "integer",
|
||||
"primaryKey": false,
|
||||
"notNull": false,
|
||||
"autoincrement": false
|
||||
},
|
||||
"takenAt": {
|
||||
"name": "takenAt",
|
||||
"type": "integer",
|
||||
"primaryKey": false,
|
||||
"notNull": false,
|
||||
"autoincrement": false
|
||||
},
|
||||
"lensModel": {
|
||||
"name": "lensModel",
|
||||
"type": "text(128)",
|
||||
"primaryKey": false,
|
||||
"notNull": false,
|
||||
"autoincrement": false
|
||||
}
|
||||
},
|
||||
"indexes": {
|
||||
"photo_src_unique": {
|
||||
"name": "photo_src_unique",
|
||||
"columns": [
|
||||
"src"
|
||||
],
|
||||
"isUnique": true
|
||||
}
|
||||
},
|
||||
"foreignKeys": {},
|
||||
"compositePrimaryKeys": {},
|
||||
"uniqueConstraints": {},
|
||||
"checkConstraints": {}
|
||||
}
|
||||
},
|
||||
"views": {},
|
||||
"enums": {},
|
||||
"_meta": {
|
||||
"schemas": {},
|
||||
"tables": {},
|
||||
"columns": {}
|
||||
},
|
||||
"internal": {
|
||||
"indexes": {}
|
||||
}
|
||||
}
|
||||
13
drizzle/meta/_journal.json
Normal file
13
drizzle/meta/_journal.json
Normal file
@@ -0,0 +1,13 @@
|
||||
{
|
||||
"version": "7",
|
||||
"dialect": "sqlite",
|
||||
"entries": [
|
||||
{
|
||||
"idx": 0,
|
||||
"version": "6",
|
||||
"when": 1746743224792,
|
||||
"tag": "0000_harsh_toad_men",
|
||||
"breakpoints": true
|
||||
}
|
||||
]
|
||||
}
|
||||
31
next.config.js
Normal file
31
next.config.js
Normal file
@@ -0,0 +1,31 @@
|
||||
/**
|
||||
* Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation. This is especially useful
|
||||
* for Docker builds.
|
||||
*/
|
||||
import "./src/env.js";
|
||||
import createMDX from "@next/mdx";
|
||||
|
||||
/** @type {import("next").NextConfig} */
|
||||
const config = {
|
||||
pageExtensions: ["js", "jsx", "md", "mdx", "ts", "tsx"],
|
||||
allowedDevOrigins: ["*.vscode.home.joemonk.co.uk"],
|
||||
experimental: {
|
||||
reactCompiler: true,
|
||||
},
|
||||
reactStrictMode: true,
|
||||
output: "standalone",
|
||||
images: {
|
||||
remotePatterns: [
|
||||
{
|
||||
protocol: "https",
|
||||
hostname: "fly.storage.tigris.dev",
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
const withMDX = createMDX({
|
||||
// Add markdown plugins here, as desired
|
||||
});
|
||||
|
||||
export default withMDX(config);
|
||||
@@ -1,33 +0,0 @@
|
||||
import million from "million/compiler";
|
||||
import createMDX from "@next/mdx";
|
||||
|
||||
/** @type {import('next').NextConfig} */
|
||||
const nextConfig = {
|
||||
pageExtensions: ["js", "jsx", "md", "mdx", "ts", "tsx"],
|
||||
experimental: {
|
||||
reactCompiler: true,
|
||||
ppr: "incremental",
|
||||
},
|
||||
serverExternalPackages: ["typeorm", "better-sqlite3"],
|
||||
reactStrictMode: true,
|
||||
output: "standalone",
|
||||
images: {
|
||||
remotePatterns: [
|
||||
{
|
||||
protocol: "https",
|
||||
hostname: "fly.storage.tigris.dev",
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
const millionConfig = {
|
||||
auto: { rsc: true },
|
||||
rsc: true,
|
||||
};
|
||||
|
||||
const withMDX = createMDX({
|
||||
// Add markdown plugins here, as desired
|
||||
});
|
||||
|
||||
export default withMDX(million.next(nextConfig, millionConfig));
|
||||
11586
package-lock.json
generated
11586
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
95
package.json
95
package.json
@@ -2,60 +2,67 @@
|
||||
"name": "next-portfolio",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "next dev",
|
||||
"build": "next build",
|
||||
"build:analyse": "ANALYZE=true npm run build",
|
||||
"check": "biome check .",
|
||||
"check:unsafe": "biome check --fix --unsafe .",
|
||||
"check:write": "biome check --write .",
|
||||
"db:generate": "drizzle-kit generate",
|
||||
"db:migrate": "drizzle-kit migrate",
|
||||
"db:push": "drizzle-kit push",
|
||||
"db:studio": "drizzle-kit studio",
|
||||
"dev": "next dev --turbopack",
|
||||
"preview": "next build && next start",
|
||||
"start": "next start",
|
||||
"lint": "next lint",
|
||||
"lint:fix": "next lint --fix"
|
||||
"typecheck": "tsc --noEmit"
|
||||
},
|
||||
"dependencies": {
|
||||
"@aws-sdk/client-s3": "^3.712.0",
|
||||
"@auth/drizzle-adapter": "^1.9.0",
|
||||
"@aws-sdk/client-s3": "^3.800.0",
|
||||
"@heroicons/react": "^2.2.0",
|
||||
"@libsql/client": "^0.15.4",
|
||||
"@mdx-js/loader": "^3.1.0",
|
||||
"@mdx-js/react": "^3.1.0",
|
||||
"@next/bundle-analyzer": "^15.1.0",
|
||||
"@next/mdx": "^15.1.0",
|
||||
"@tailwindcss/typography": "^0.5.15",
|
||||
"@tanstack/react-query": "^5.62.7",
|
||||
"@tanstack/react-virtual": "^3.11.1",
|
||||
"@trpc/client": "^11.0.0-rc.660",
|
||||
"@trpc/react-query": "^11.0.0-rc.660",
|
||||
"@trpc/server": "^11.0.0-rc.660",
|
||||
"@types/better-sqlite3": "^7.6.12",
|
||||
"@next/mdx": "^15.3.1",
|
||||
"@t3-oss/env-nextjs": "^0.13.0",
|
||||
"@tailwindcss/typography": "^0.5.16",
|
||||
"@tanstack/react-query": "^5.74.11",
|
||||
"@trpc/client": "^11.1.2",
|
||||
"@trpc/react-query": "^11.1.2",
|
||||
"@trpc/server": "^11.1.2",
|
||||
"@types/bun": "^1.2.11",
|
||||
"@types/mdx": "^2.0.13",
|
||||
"@types/node": "^22.10.2",
|
||||
"@types/react": "^19.0.1",
|
||||
"@types/react-dom": "^19.0.2",
|
||||
"@typescript-eslint/eslint-plugin": "^8.18.0",
|
||||
"autoprefixer": "^10.4.20",
|
||||
"babel-plugin-react-compiler": "beta",
|
||||
"better-sqlite3": "^11.7.0",
|
||||
"client-only": "^0.0.1",
|
||||
"drizzle-kit": "^0.30.1",
|
||||
"drizzle-orm": "^0.38.2",
|
||||
"eslint": "^9.17.0",
|
||||
"eslint-config-next": "^15.1.0",
|
||||
"exif-reader": "^2.0.1",
|
||||
"framer-motion": "^11.14.4",
|
||||
"glob": "^11.0.0",
|
||||
"million": "^3.1.11",
|
||||
"next": "15.1.1-canary.5",
|
||||
"next-auth": "5.0.0-beta.25",
|
||||
"postcss": "^8.4.49",
|
||||
"babel-plugin-react-compiler": "^19.1.0-rc.1",
|
||||
"daisyui": "^5.0.35",
|
||||
"drizzle-orm": "^0.43.1",
|
||||
"exif-reader": "^2.0.2",
|
||||
"framer-motion": "^12.9.4",
|
||||
"glob": "^11.0.2",
|
||||
"next": "^15.3.1",
|
||||
"next-auth": "5.0.0-beta.27",
|
||||
"radash": "^12.1.0",
|
||||
"react": "19.0.0",
|
||||
"react-dom": "19.0.0",
|
||||
"react-zoom-pan-pinch": "^3.6.1",
|
||||
"reflect-metadata": "^0.2.2",
|
||||
"react": "^19.1.0",
|
||||
"react-dom": "^19.1.0",
|
||||
"react-zoom-pan-pinch": "^3.7.0",
|
||||
"server-only": "^0.0.1",
|
||||
"sharp": "^0.33.5",
|
||||
"sharp": "^0.34.1",
|
||||
"superjson": "^2.2.2",
|
||||
"tailwind-scrollbar": "^3.1.0",
|
||||
"tailwindcss": "^3.4.16",
|
||||
"typescript": "^5.7.2",
|
||||
"yet-another-react-lightbox": "^3.21.7",
|
||||
"zod": "^3.24.1"
|
||||
"yet-another-react-lightbox": "^3.23.0",
|
||||
"zod": "^3.24.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@biomejs/biome": "1.9.4",
|
||||
"@tailwindcss/postcss": "^4.1.4",
|
||||
"@types/node": "^22.15.3",
|
||||
"@types/react": "^19.1.2",
|
||||
"@types/react-dom": "^19.1.2",
|
||||
"drizzle-kit": "^0.31.0",
|
||||
"postcss": "^8.5.3",
|
||||
"tailwindcss": "^4.1.4",
|
||||
"typescript": "^5.8.3"
|
||||
},
|
||||
"ct3aMetadata": {
|
||||
"initVersion": "7.39.3"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,6 +1,5 @@
|
||||
module.exports = {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
export default {
|
||||
plugins: {
|
||||
"@tailwindcss/postcss": {},
|
||||
},
|
||||
};
|
||||
|
||||
BIN
public/favicon.ico
Normal file
BIN
public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
@@ -1,24 +1,27 @@
|
||||
import { signIn } from "@/lib/auth";
|
||||
import type React from "react";
|
||||
|
||||
|
||||
export default function Auth(props: {
|
||||
searchParams: Promise<{ callbackUrl: string | undefined }>
|
||||
searchParams: Promise<{ callbackUrl: string | undefined }>;
|
||||
}): React.JSX.Element {
|
||||
return (
|
||||
<form
|
||||
className="w-40 mx-auto"
|
||||
action={async () => {
|
||||
"use server";
|
||||
await signIn("authelia", {
|
||||
redirectTo: (await props.searchParams)?.callbackUrl ?? "",
|
||||
});
|
||||
}}
|
||||
>
|
||||
<button type="submit"
|
||||
className={`rounded-lg dark:bg-dracula-bg-light transition-colors duration-100 dark:text-white px-2 py-2 font-normal border-transparent`}
|
||||
>
|
||||
<span>Sign in with Authelia</span>
|
||||
</button>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<form
|
||||
className="mx-auto w-40"
|
||||
action={async () => {
|
||||
"use server";
|
||||
await signIn("authelia", {
|
||||
redirectTo: (await props.searchParams)?.callbackUrl ?? "",
|
||||
});
|
||||
}}
|
||||
>
|
||||
<button
|
||||
type="submit"
|
||||
className={
|
||||
"rounded-lg border-transparent px-2 py-2 font-normal transition-colors duration-100 dark:bg-dracula-bg-light dark:text-white"
|
||||
}
|
||||
>
|
||||
<span>Sign in with Authelia</span>
|
||||
</button>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,15 +1,13 @@
|
||||
import React from 'react';
|
||||
import Cv from '@/components/cv';
|
||||
import Cv from "@/app/_components/cv";
|
||||
import type React from "react";
|
||||
|
||||
export default function CvPage(): React.JSX.Element {
|
||||
return (
|
||||
<div>
|
||||
<div className='flex flex-row justify-center pb-4'>
|
||||
<button className='py-2 px-4 border'>
|
||||
Download
|
||||
</button>
|
||||
</div>
|
||||
<Cv/>
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<div>
|
||||
<div className="flex flex-row justify-center pb-4">
|
||||
<button type="button" className="border px-4 py-2">Download</button>
|
||||
</div>
|
||||
<Cv />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,22 +1,24 @@
|
||||
import NavBar from '@/components/navbar';
|
||||
import Footer from '@/components/footer';
|
||||
|
||||
import "../globals.css";
|
||||
import Footer from "@/app/_components/footer";
|
||||
import NavBar from "@/app/_components/navbar";
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
children,
|
||||
}: Readonly<{
|
||||
children: React.ReactNode;
|
||||
children: React.ReactNode;
|
||||
}>): React.JSX.Element {
|
||||
return (
|
||||
<>
|
||||
<NavBar/>
|
||||
<main className="px-6 py-4 w-full flex-1 align-middle overflow-y-scroll scrollbar scrollbar-thumb-dracula-purple scrollbar-track-dracula-bg-light">
|
||||
return (
|
||||
<>
|
||||
<NavBar />
|
||||
|
||||
<main className="mx-auto w-full flex-1 px-6 py-4 align-middle lg:max-w-5xl">
|
||||
{children}
|
||||
</main>
|
||||
<Footer />
|
||||
|
||||
{/* <main className="px-6 py-4 w-full flex-1 align-middle overflow-y-scroll scrollbar scrollbar-thumb-dracula-purple scrollbar-track-dracula-bg-light">
|
||||
<div className="mx-auto w-full align-middle lg:max-w-5xl ">
|
||||
{children}
|
||||
</div>
|
||||
</main>
|
||||
<Footer/>
|
||||
</>
|
||||
);
|
||||
</main> */}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,9 +1,27 @@
|
||||
import HomeMdx from '@/markdown/page.mdx';
|
||||
import HomeMdx from "@/markdown/page.mdx";
|
||||
|
||||
export default function Home(): React.JSX.Element {
|
||||
return (
|
||||
<>
|
||||
<HomeMdx/>
|
||||
</>
|
||||
);
|
||||
return (
|
||||
<>
|
||||
<HomeMdx />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
// import { auth } from "@/server/auth";
|
||||
// import { HydrateClient } from "@/trpc/server";
|
||||
|
||||
// export default async function Home() {
|
||||
// const session = await auth();
|
||||
|
||||
// if (session?.user) {
|
||||
// // void api.post.getLatest.prefetch();
|
||||
// }
|
||||
|
||||
// return (
|
||||
// <HydrateClient>
|
||||
// <main className="flex min-h-screen flex-col items-center justify-center">
|
||||
// </main>
|
||||
// </HydrateClient>
|
||||
// );
|
||||
// }
|
||||
|
||||
@@ -1,31 +1,28 @@
|
||||
import Image from "next/image";
|
||||
import FilteredLightbox from "@/components/lightbox";
|
||||
import { trpc } from "@/trpc/server";
|
||||
import { TRPCProvider } from "@/trpc/client";
|
||||
import FilteredLightbox from "@/app/_components/lightbox";
|
||||
import { api } from "@/trpc/server";
|
||||
|
||||
export default async function Photos(): Promise<React.JSX.Element> {
|
||||
const { data: images } = await trpc.photos.list();
|
||||
const { data: images } = await api.photos.list();
|
||||
|
||||
return (
|
||||
<div className="mx-auto">
|
||||
<TRPCProvider>
|
||||
<FilteredLightbox imageData={images}>
|
||||
{images.map((image) => (
|
||||
<Image
|
||||
key={image.src}
|
||||
alt={image.src}
|
||||
src={image.src}
|
||||
className="object-contain h-60 w-80"
|
||||
sizes="100vw"
|
||||
loading="lazy"
|
||||
width={image.width}
|
||||
height={image.height}
|
||||
blurDataURL={image.blur}
|
||||
placeholder="blur"
|
||||
return (
|
||||
<div className="mx-auto">
|
||||
<FilteredLightbox imageData={images}>
|
||||
{images.map((image) => (
|
||||
<Image
|
||||
key={image.src}
|
||||
alt={image.src}
|
||||
src={image.src}
|
||||
className="h-60 w-80 object-contain"
|
||||
sizes="100vw"
|
||||
loading="lazy"
|
||||
width={image.width}
|
||||
height={image.height}
|
||||
blurDataURL={image.blur}
|
||||
placeholder="blur"
|
||||
/>
|
||||
))}
|
||||
</FilteredLightbox>
|
||||
</TRPCProvider>
|
||||
</div>
|
||||
);
|
||||
</FilteredLightbox>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,32 +1,32 @@
|
||||
import { glob } from "glob";
|
||||
import dynamic, { LoaderComponent } from "next/dynamic";
|
||||
import React from "react";
|
||||
import dynamic, { type LoaderComponent } from "next/dynamic";
|
||||
import type React from "react";
|
||||
|
||||
export const dynamicParams = false;
|
||||
|
||||
export async function generateStaticParams(): Promise<{ slug: string[] }[]> {
|
||||
const posts = await glob(
|
||||
`${process.cwd()}/src/markdown/posts/[[]...slug[]]/**/*.mdx`,
|
||||
{
|
||||
nodir: true,
|
||||
}
|
||||
);
|
||||
const posts = await glob(
|
||||
`${process.cwd()}/src/markdown/posts/[[]...slug[]]/**/*.mdx`,
|
||||
{
|
||||
nodir: true,
|
||||
},
|
||||
);
|
||||
|
||||
const slugs = posts.map((post) => ({
|
||||
slug: [post.split("/").at(-1)!.slice(0, -4)],
|
||||
}));
|
||||
const slugs = posts.map((post) => ({
|
||||
slug: [post.split("/").at(-1)?.slice(0, -4)],
|
||||
}));
|
||||
|
||||
return slugs;
|
||||
return slugs;
|
||||
}
|
||||
|
||||
export default async function Post({
|
||||
params,
|
||||
params,
|
||||
}: {
|
||||
params: Promise<{ slug: string[] }>;
|
||||
params: Promise<{ slug: string[] }>;
|
||||
}): Promise<React.JSX.Element> {
|
||||
const mdxFile = await import(
|
||||
`../../../../markdown/posts/[...slug]/${(await params).slug.join("/")}.mdx`
|
||||
) as LoaderComponent<unknown>;
|
||||
const Post = dynamic(() => mdxFile);
|
||||
return <Post />;
|
||||
const mdxFile = (await import(
|
||||
`../../../../markdown/posts/[...slug]/${(await params).slug.join("/")}.mdx`
|
||||
)) as LoaderComponent<unknown>;
|
||||
const Post = dynamic(() => mdxFile);
|
||||
return <Post />;
|
||||
}
|
||||
|
||||
@@ -1,9 +1,7 @@
|
||||
import React from 'react';
|
||||
import type React from "react";
|
||||
|
||||
export default function Post({children}: {children: React.JSX.Element}): React.JSX.Element {
|
||||
return (
|
||||
<>
|
||||
{children}
|
||||
</>
|
||||
);
|
||||
export default function Post({
|
||||
children,
|
||||
}: { children: React.JSX.Element }): React.JSX.Element {
|
||||
return <>{children}</>;
|
||||
}
|
||||
|
||||
@@ -1,74 +1,74 @@
|
||||
import { getBaseUrl } from "@/lib/base-url";
|
||||
import { glob } from "glob";
|
||||
import { getCurrentUrl } from "@/lib/current-url";
|
||||
import { unstable_cache } from "next/cache";
|
||||
import Link from "next/link";
|
||||
|
||||
type postDetails = {
|
||||
link: string;
|
||||
metadata: {
|
||||
title: string;
|
||||
date: string;
|
||||
coverImage: string;
|
||||
blurb: string;
|
||||
shortBlurb: string;
|
||||
tags: string[];
|
||||
};
|
||||
link: string;
|
||||
metadata: {
|
||||
title: string;
|
||||
date: string;
|
||||
coverImage: string;
|
||||
blurb: string;
|
||||
shortBlurb: string;
|
||||
tags: string[];
|
||||
};
|
||||
};
|
||||
|
||||
async function loadPostDetails(): Promise<postDetails[]> {
|
||||
const posts = await glob(
|
||||
`${process.cwd()}/src/markdown/posts/[[]...slug[]]/**/*.mdx`,
|
||||
{
|
||||
nodir: true,
|
||||
}
|
||||
);
|
||||
const posts = await glob(
|
||||
`${process.cwd()}/src/markdown/posts/[[]...slug[]]/**/*.mdx`,
|
||||
{
|
||||
nodir: true,
|
||||
},
|
||||
);
|
||||
|
||||
const loadPostData = posts.map(async (post) => {
|
||||
const slug = [post.split("/").at(-1)!.slice(0, -4)];
|
||||
const mdxFile = await import(
|
||||
`../../../../src/markdown/posts/[...slug]/${slug.join("/")}.mdx`
|
||||
) as postDetails;
|
||||
return {
|
||||
link: getCurrentUrl() + "/posts/" + slug.join("/"),
|
||||
metadata: mdxFile.metadata,
|
||||
};
|
||||
});
|
||||
const loadPostData = posts.map(async (post: string) => {
|
||||
const slug = [post.split("/").at(-1)?.slice(0, -4)];
|
||||
const mdxFile = (await import(
|
||||
`../../../../src/markdown/posts/[...slug]/${slug.join("/")}.mdx`
|
||||
)) as postDetails;
|
||||
return {
|
||||
link: `${getBaseUrl()}/posts/${slug.join("/")}`,
|
||||
metadata: mdxFile.metadata,
|
||||
};
|
||||
});
|
||||
|
||||
const postData = await Promise.all(loadPostData);
|
||||
return postData;
|
||||
const postData = await Promise.all(loadPostData);
|
||||
return postData;
|
||||
}
|
||||
|
||||
const getPosts = unstable_cache(loadPostDetails, ["posts"], {
|
||||
revalidate: false,
|
||||
revalidate: false,
|
||||
});
|
||||
|
||||
export default async function Posts(): Promise<React.JSX.Element> {
|
||||
const postDetails = await getPosts();
|
||||
return (
|
||||
<div className="flex flex-col gap-6">
|
||||
{postDetails.map((post) => {
|
||||
return (
|
||||
<div key={post.link}>
|
||||
<div className="prose dark:prose-invert mx-auto">
|
||||
<h2>
|
||||
<Link href={post.link}>{post.metadata.title}</Link>
|
||||
</h2>
|
||||
<div className="flex flex-row">
|
||||
{post.metadata.tags.map((tag) => {
|
||||
return (
|
||||
<div key={`${post.link}_${tag}`}>
|
||||
<span className="select-none text-sm me-2 px-2.5 py-1 rounded border border-dracula-pink dark:bg-dracula-bg-darker dark:text-dracula-pink">
|
||||
{tag}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<p>{post.metadata.blurb}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
const postDetails = await getPosts();
|
||||
return (
|
||||
<div className="flex flex-col gap-6">
|
||||
{postDetails.map((post) => {
|
||||
return (
|
||||
<div key={post.link}>
|
||||
<div className="prose dark:prose-invert mx-auto">
|
||||
<h2>
|
||||
<Link href={post.link}>{post.metadata.title}</Link>
|
||||
</h2>
|
||||
<div className="flex flex-row">
|
||||
{post.metadata.tags.map((tag) => {
|
||||
return (
|
||||
<div key={`${post.link}_${tag}`}>
|
||||
<span className="me-2 select-none rounded border border-dracula-pink px-2.5 py-1 text-sm dark:bg-dracula-bg-darker dark:text-dracula-pink">
|
||||
{tag}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<p>{post.metadata.blurb}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,9 +1,7 @@
|
||||
import React from 'react';
|
||||
import type React from "react";
|
||||
|
||||
import Cv from '@/components/cv';
|
||||
import Cv from "@/components/cv";
|
||||
|
||||
export default function CvPrint(): React.JSX.Element {
|
||||
return (
|
||||
<Cv/>
|
||||
);
|
||||
return <Cv />;
|
||||
}
|
||||
|
||||
37
src/app/_components/auth/login.tsx
Normal file
37
src/app/_components/auth/login.tsx
Normal file
@@ -0,0 +1,37 @@
|
||||
import { getBaseUrl } from "@/lib/base-url";
|
||||
import { auth, signIn, signOut } from "@/server/auth";
|
||||
import UserCircleIcon from "@heroicons/react/24/outline/UserCircleIcon";
|
||||
|
||||
// TODO
|
||||
export default async function LogIn(): Promise<React.JSX.Element | undefined> {
|
||||
const session = await auth();
|
||||
|
||||
return (
|
||||
<form
|
||||
action={async () => {
|
||||
"use server";
|
||||
if (session?.user) {
|
||||
await signOut({
|
||||
redirectTo: `${getBaseUrl()}/`,
|
||||
});
|
||||
} else {
|
||||
await signIn("authelia");
|
||||
}
|
||||
}}
|
||||
>
|
||||
<button
|
||||
type="submit"
|
||||
className="group rounded-3xl p-1 transition-colors dark:hover:bg-dracula-bg-light"
|
||||
>
|
||||
<UserCircleIcon
|
||||
className={`h-8 w-auto transition-colors ${
|
||||
session?.user
|
||||
? "dark:stroke-dracula-red dark:group-hover:stroke-dracula-green"
|
||||
: "dark:stroke-dracula-cyan dark:group-hover:stroke-dracula-orange"
|
||||
}`}
|
||||
/>
|
||||
<span className="sr-only">{session?.user ? "Log out" : "Log in"}</span>
|
||||
</button>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
187
src/app/_components/cv.tsx
Normal file
187
src/app/_components/cv.tsx
Normal file
@@ -0,0 +1,187 @@
|
||||
import { PaperAirplaneIcon } from "@heroicons/react/24/outline";
|
||||
import type React from "react";
|
||||
|
||||
type ExperienceContent = {
|
||||
startDate: string;
|
||||
endDate: string;
|
||||
title: string;
|
||||
tech: string;
|
||||
company: string;
|
||||
content: string | React.JSX.Element;
|
||||
};
|
||||
|
||||
function PrintBreak({ count }: { count?: number }): React.JSX.Element {
|
||||
return (
|
||||
<>
|
||||
{Array.from({ length: count ?? 1 }).map(() => (
|
||||
<br key={"break"} className="hidden print:block" />
|
||||
))}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
const content: ExperienceContent[] = [
|
||||
{
|
||||
company: "Tes",
|
||||
endDate: "Present",
|
||||
startDate: "Feb 2023",
|
||||
tech: "TS/NodeJS/React/DotNet/AWS/K8s/GitOps",
|
||||
title: "Technical Lead",
|
||||
content: (
|
||||
<>
|
||||
As a technical lead, my role moved mostly into communicating with the
|
||||
wider business to ensure my team has clear, achievable objectives, then
|
||||
helping them release those objectives. I have been particularly involved
|
||||
with cross-team collaboration to continue pushing improvements to our
|
||||
development process, being part of frontend and backend guilds as well
|
||||
as having a constant input into our service architecture to set
|
||||
development-wide architectural decisions. During this time, I have
|
||||
worked in multiple tech stacks, swiftly becoming proficient with
|
||||
frameworks and languages in order to upskill my team.
|
||||
<br />
|
||||
Projects I have led include: rebuilding of some of the most used pages
|
||||
we have, releasing new web apps to millions of monthly users which
|
||||
included complex searching with filters and via a map, and user specific
|
||||
context while retaining high SEO scores and high levels of accessibility
|
||||
compliance; creating a new email workflow, that can utilizes multiple
|
||||
accounts and services to protect reputation; and creating a genetic
|
||||
algorithm built to scale with which users can track their progress when
|
||||
crunching complex sets of data.
|
||||
</>
|
||||
),
|
||||
},
|
||||
{
|
||||
company: "Tes",
|
||||
endDate: "Feb 2023",
|
||||
startDate: "Jun 2022",
|
||||
tech: "TS/JS/NodeJS/React",
|
||||
title: "Senior Developer",
|
||||
content:
|
||||
"Changing fields into web development, I utilised my previous knowledge to pivot quickly into the technologies needed for full stack development. I have since worked on and improved many products across multiple teams, while using my experience to provide individual support within my team. I have also created internal initiatives to improve our developer experience as well as getting involved in architecture discussions to keep pushing our development forwards.",
|
||||
},
|
||||
{
|
||||
company: "Live 5",
|
||||
endDate: "Jun 2022",
|
||||
startDate: "Oct 2019",
|
||||
tech: "TS/JS/WebGL/NodeJS",
|
||||
title: "Development Manager",
|
||||
content: (
|
||||
<>
|
||||
As development manager, I oversaw all of the developers at Live 5 and
|
||||
had a responsibility to oversee production of over 20 games a year from
|
||||
my teams. I kept each stage of game development on track to meet both
|
||||
internal and external deadlines, able to work with my teams to either
|
||||
change the scope of the project or move developers to get the games back
|
||||
on target. <PrintBreak count={4} /> By implementing a proper code review
|
||||
process, frequent stand ups and additional tooling for developers, qa
|
||||
and artists, we produced far more complex games in less time with fewer
|
||||
bugs. In addition, I mentored both junior and senior members of my team
|
||||
to develop their technical skills, knowledge and soft skills.
|
||||
<br />
|
||||
While managing the team was my foremost responsibility, I was still
|
||||
heavily involved with development. I tackled any particularly difficult
|
||||
coding problems for the team and architecture large-scale changes within
|
||||
the codebase. For example, I integrated new business vital services and
|
||||
rebuilt our base renderer and loading core in TypeScript. One of the
|
||||
more interesting projects I directed was to rebuild our backend,
|
||||
focusing on providing local and remote interfaces to the data generation
|
||||
that allowed for faster development of more reliable game backends. The
|
||||
deployment process was also rebuilt to allow deploying into AWS for
|
||||
browser game access, as a package for a separate serverless game build
|
||||
and to run a statistical analysis on a bare metal local kubernetes
|
||||
cluster which I also administered.
|
||||
</>
|
||||
),
|
||||
},
|
||||
{
|
||||
company: "Live 5",
|
||||
endDate: "Oct 2019",
|
||||
startDate: "Sept 2018",
|
||||
tech: "TS/JS/WebGL/NodeJS",
|
||||
title: "Game Developer",
|
||||
content:
|
||||
"I was hired to continue as a C++ Developer, but soon transitioned to the mobile team due to company priorities. Despite having no prior experience with JavaScript, I quickly became proficient in the language and its ecosystem, which enabled me to promptly integrate into my new role.I started with creating games, but similar to my time at Inspired, I wrote extra scripts and improved the game libraries to assist development across the team.",
|
||||
},
|
||||
{
|
||||
company: "Inspired Gaming",
|
||||
endDate: "Sept 2018",
|
||||
startDate: "Mar 2016",
|
||||
tech: "C++/DirectX/Python",
|
||||
title: "Engine/Game Developer",
|
||||
content:
|
||||
"My initial responsibilities involved converting existing games to work on a variety of hardware, though I quickly moved up to work on building some of the more complex games and tooling myself, before going on to mentor new starters.Soon after, I advanced into the game engine development team, which explored ways of improving the development cycle and coding efficiency for other developers. We improved the libraries, build steps and used middleware such as Conan and custom VS plugins to provide prebuilt binaries and improve cohesion and standards across the teams.",
|
||||
},
|
||||
];
|
||||
|
||||
function Experience({
|
||||
content,
|
||||
}: { content: ExperienceContent }): React.JSX.Element {
|
||||
return (
|
||||
<div className="flex flex-row gap-4 border-b-2 border-b-dracula-bg-light last:border-b-0 dark:border-b-dracula-orange">
|
||||
<div className="w-20 justify-center text-center">
|
||||
{content.endDate}
|
||||
<br />
|
||||
-
|
||||
<br />
|
||||
{content.startDate}
|
||||
</div>
|
||||
<div className="flex w-full flex-col">
|
||||
<div className="mb-2 flex w-full flex-row border-dracula-bg-light border-b-[1px] pb-1">
|
||||
<div className="self-start text-left">{content.title}</div>
|
||||
<div className="flex-grow self-start text-right">{content.tech}</div>
|
||||
<div className="ml-3 w-20 border-dracula-bg-light border-l-[1px] pr-2 text-right">
|
||||
{content.company}
|
||||
</div>
|
||||
</div>
|
||||
<div className="pr-2 pb-2 text-justify">{content.content}</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// TODO
|
||||
export default function Cv(): React.JSX.Element {
|
||||
return (
|
||||
<div className="mx-auto w-[20cm] dark:text-white print:pt-[0.5cm]">
|
||||
<div className="flex flex-col justify-center">
|
||||
<h1 className="bg-dracula-bg-light py-1 text-center font-medium text-2xl text-white uppercase">
|
||||
Joe Lewis Monk
|
||||
</h1>
|
||||
<div className="flex flex-col gap-2 p-2">
|
||||
<div className="grid grid-cols-3 border-dracula-bg-light border-b-2 pb-2">
|
||||
<span className="border-dracula-bg-light border-r-[1px] text-left">
|
||||
joemonk.co.uk
|
||||
</span>
|
||||
<span className="border-dracula-bg-light border-x-[1px] text-center">
|
||||
07757 017587
|
||||
</span>
|
||||
<span className="border-dracula-bg-light border-l-[1px] text-right">
|
||||
joemonk@hotmail.co.uk
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-justify">
|
||||
As a highly motivated and adaptive developer, my enthusiasm for
|
||||
learning new technologies, along with years of rapid game and web
|
||||
development, has driven my proficiency with many languages and
|
||||
tools. This allows me to be flexible when tackling problems. Over
|
||||
the last few years I have enjoyed expanding my role to include
|
||||
management of multiple teams, and have picked up new tech stacks
|
||||
while moving between roles.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-row gap-2 bg-dracula-bg-light px-2 py-1 text-white">
|
||||
<PaperAirplaneIcon className="my-[2px] h-5" />
|
||||
<h2 className="font-medium">Experience</h2>
|
||||
</div>
|
||||
<div className="flex flex-col gap-4 py-2">
|
||||
{content.map((expContent) => (
|
||||
<Experience
|
||||
content={expContent}
|
||||
key={`${expContent.company}_${expContent.title}`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
12
src/app/_components/footer.tsx
Normal file
12
src/app/_components/footer.tsx
Normal file
@@ -0,0 +1,12 @@
|
||||
// TODO
|
||||
export default function NavBar(): React.JSX.Element {
|
||||
return (
|
||||
<footer className="border-t-2 dark:border-dracula-purple dark:bg-dracula-bg-darker">
|
||||
<div className="mx-auto max-w-7xl px-4">
|
||||
<div className="relative flex h-12 flex-row-reverse items-center justify-between">
|
||||
<span className="select-none dark:text-white">© Joe Monk 2024</span>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
211
src/app/_components/lightbox.tsx
Normal file
211
src/app/_components/lightbox.tsx
Normal file
@@ -0,0 +1,211 @@
|
||||
"use client";
|
||||
import Image from "next/image";
|
||||
import type React from "react";
|
||||
import { useState } from "react";
|
||||
|
||||
import YARL, {
|
||||
isImageFitCover,
|
||||
isImageSlide,
|
||||
useLightboxProps,
|
||||
useLightboxState,
|
||||
} from "yet-another-react-lightbox";
|
||||
import Captions from "yet-another-react-lightbox/plugins/captions";
|
||||
import Thumbnails from "yet-another-react-lightbox/plugins/thumbnails";
|
||||
import Zoom from "yet-another-react-lightbox/plugins/zoom";
|
||||
import "yet-another-react-lightbox/styles.css";
|
||||
import "yet-another-react-lightbox/plugins/thumbnails.css";
|
||||
import "yet-another-react-lightbox/plugins/captions.css";
|
||||
import { api, type RouterOutputs } from "@/trpc/react";
|
||||
|
||||
type ImageData = RouterOutputs["photos"]["list"]["data"][number];
|
||||
|
||||
function NextJsImage({
|
||||
slide,
|
||||
offset,
|
||||
rect,
|
||||
unoptimized = false,
|
||||
}: {
|
||||
slide: ImageData;
|
||||
offset: number;
|
||||
rect: { width: number; height: number };
|
||||
unoptimized: boolean;
|
||||
}): React.JSX.Element {
|
||||
const {
|
||||
on: { click },
|
||||
carousel: { imageFit },
|
||||
} = useLightboxProps();
|
||||
|
||||
const { currentIndex } = useLightboxState();
|
||||
|
||||
const cover = isImageSlide(slide) && isImageFitCover(slide, imageFit);
|
||||
|
||||
const width = !cover
|
||||
? Math.round(
|
||||
Math.min(rect.width, (rect.height / slide.height) * slide.width),
|
||||
)
|
||||
: rect.width;
|
||||
|
||||
const height = !cover
|
||||
? Math.round(
|
||||
Math.min(rect.height, (rect.width / slide.width) * slide.height),
|
||||
)
|
||||
: rect.height;
|
||||
|
||||
return (
|
||||
<div style={{ position: "relative", width, height }}>
|
||||
<Image
|
||||
fill
|
||||
alt=""
|
||||
src={slide}
|
||||
loading="eager"
|
||||
unoptimized={unoptimized}
|
||||
draggable={false}
|
||||
blurDataURL={slide.blur}
|
||||
placeholder="blur"
|
||||
style={{
|
||||
objectFit: cover ? "cover" : "contain",
|
||||
cursor: click ? "pointer" : undefined,
|
||||
}}
|
||||
sizes={`${Math.ceil((width / window.innerWidth) * 100)}vw`}
|
||||
onClick={
|
||||
offset === 0
|
||||
? (): void => click?.({ index: currentIndex })
|
||||
: undefined
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function Lightbox({
|
||||
imageData,
|
||||
children,
|
||||
}: {
|
||||
imageData: ImageData[];
|
||||
children: React.JSX.Element[];
|
||||
}): React.JSX.Element {
|
||||
const [active, setActive] = useState<number | null>(null);
|
||||
|
||||
return (
|
||||
<div className="mx-auto">
|
||||
<div className="flex flex-row flex-wrap justify-center">
|
||||
{children.map((image, index) => {
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
key={"lightbox_img"}
|
||||
onClick={() => {
|
||||
setActive(index);
|
||||
}}
|
||||
>
|
||||
<div className="relative">{image}</div>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<YARL
|
||||
open={typeof active === "number"}
|
||||
close={() => setActive(null)}
|
||||
index={active ?? undefined}
|
||||
slides={imageData}
|
||||
render={{
|
||||
// @ts-expect-error - Todo
|
||||
slide: (args) => NextJsImage({ ...args, unoptimized: true }),
|
||||
// @ts-expect-error - Todo - This just passes the slide through, but it doesn't know the type
|
||||
thumbnail: NextJsImage,
|
||||
}}
|
||||
plugins={[Thumbnails, Zoom, Captions]}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
interface FormElements extends HTMLFormControlsCollection {
|
||||
src: HTMLInputElement;
|
||||
}
|
||||
interface UsernameFormElement extends HTMLFormElement {
|
||||
readonly elements: FormElements;
|
||||
}
|
||||
|
||||
// TODO
|
||||
export default function FilteredLightbox(props: {
|
||||
imageData: ImageData[];
|
||||
children: React.JSX.Element[];
|
||||
}): React.JSX.Element {
|
||||
//const [imageData, setImageData] = useState(props.imageData);
|
||||
const [imageData] = useState(props.imageData);
|
||||
const photoQuery = api.photos.list.useInfiniteQuery(
|
||||
{
|
||||
limit: 1,
|
||||
},
|
||||
{
|
||||
initialData: {
|
||||
pages: [
|
||||
{
|
||||
data: props.imageData,
|
||||
next: props.imageData.length,
|
||||
},
|
||||
],
|
||||
pageParams: [0],
|
||||
},
|
||||
getNextPageParam: (lastPage) => lastPage.next,
|
||||
},
|
||||
);
|
||||
|
||||
const refreshQuery = api.photos.update.useQuery(undefined, {
|
||||
enabled: false,
|
||||
retry: false,
|
||||
});
|
||||
|
||||
function handleSubmit(event: React.FormEvent<UsernameFormElement>): void {
|
||||
event.preventDefault();
|
||||
// const imageData = props.imageData;
|
||||
// setImageData(
|
||||
// imageData.filter(
|
||||
// (data) => data.src === event.currentTarget.elements.src.value
|
||||
// )
|
||||
// );
|
||||
void photoQuery.fetchNextPage();
|
||||
}
|
||||
|
||||
const children = photoQuery.data.pages
|
||||
.flatMap((data) => data.data)
|
||||
.map((data) => (
|
||||
<Image
|
||||
key={data.src}
|
||||
alt={data.src}
|
||||
src={data.src}
|
||||
className="h-60 w-80 object-contain"
|
||||
sizes="100vw"
|
||||
loading="lazy"
|
||||
width={data.width}
|
||||
height={data.height}
|
||||
blurDataURL={data.blur}
|
||||
placeholder="blur"
|
||||
/>
|
||||
))
|
||||
.filter((data) => !!data);
|
||||
|
||||
return (
|
||||
<>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div>
|
||||
<label htmlFor="src">Src:</label>
|
||||
<input id="src" type="text" />
|
||||
</div>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
void refreshQuery.refetch();
|
||||
}}
|
||||
>
|
||||
Refresh
|
||||
</button>
|
||||
{refreshQuery.data ? JSON.stringify(refreshQuery.data) : "\nNot"}
|
||||
{refreshQuery.error ? JSON.stringify(refreshQuery.error) : "\nNo Error"}
|
||||
<Lightbox imageData={imageData}>{...children}</Lightbox>
|
||||
</>
|
||||
);
|
||||
}
|
||||
118
src/app/_components/navbar-client.tsx
Normal file
118
src/app/_components/navbar-client.tsx
Normal file
@@ -0,0 +1,118 @@
|
||||
"use client";
|
||||
import {
|
||||
Bars3Icon,
|
||||
HomeModernIcon,
|
||||
XMarkIcon,
|
||||
} from "@heroicons/react/24/outline";
|
||||
import {
|
||||
AnimatePresence,
|
||||
LazyMotion,
|
||||
domAnimation,
|
||||
motion,
|
||||
} from "framer-motion";
|
||||
import Link from "next/link";
|
||||
import { usePathname } from "next/navigation";
|
||||
import { useMemo, useState } from "react";
|
||||
import ThemeSwitcher from "./theme-switcher";
|
||||
|
||||
type NavBarClientProps = {
|
||||
LogIn: React.JSX.Element;
|
||||
navigation: {
|
||||
name: string;
|
||||
href: string;
|
||||
current: boolean;
|
||||
}[];
|
||||
};
|
||||
|
||||
// TODO
|
||||
export default function NavBarClient({
|
||||
LogIn,
|
||||
navigation,
|
||||
}: NavBarClientProps): React.JSX.Element {
|
||||
const [open, setOpen] = useState(false);
|
||||
const pathname = usePathname();
|
||||
|
||||
const activeNavigation = useMemo((): typeof navigation => {
|
||||
const nav = structuredClone(navigation);
|
||||
|
||||
const current = nav.find((nav) => nav.href === pathname);
|
||||
if (current) {
|
||||
current.current = true;
|
||||
}
|
||||
return nav;
|
||||
}, [pathname, navigation]);
|
||||
|
||||
return (
|
||||
<nav className="border-accent border-b-2">
|
||||
<LazyMotion features={domAnimation}>
|
||||
<div className="mx-auto max-w-5xl px-4">
|
||||
<div className="relative flex h-16 items-center justify-between">
|
||||
<div className="flex">
|
||||
<button
|
||||
type="button"
|
||||
className="btn rounded-sm border-2 border-primary/75 p-1 transition-colors duration-100 sm:hidden"
|
||||
onClick={() => setOpen(!open)}
|
||||
>
|
||||
{open ? (
|
||||
<XMarkIcon className="h-8 w-auto rounded-sm" />
|
||||
) : (
|
||||
<Bars3Icon className="h-8 w-auto rounded-sm" />
|
||||
)}
|
||||
</button>
|
||||
<Link
|
||||
className="btn hidden items-center rounded border-2 border-primary/75 p-1 transition-colors hover:bg-primary/25 sm:flex"
|
||||
href="/"
|
||||
>
|
||||
<HomeModernIcon className="h-8 w-auto rounded-sm" />
|
||||
</Link>
|
||||
<div className="ml-12 hidden gap-4 sm:flex">
|
||||
{activeNavigation.map((item) => (
|
||||
<Link
|
||||
key={item.name}
|
||||
href={item.href}
|
||||
className={`btn min-w-20 rounded-lg rounded-b-none border-transparent border-b-2 px-3 pt-2.5 pb-1 text-center text-lg outline-0 hover:border-primary hover:bg-primary/25 ${
|
||||
item.current ? "border-b-accent/75" : ""
|
||||
}`}
|
||||
aria-current={item.current ? "page" : undefined}
|
||||
>
|
||||
{item.name}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-4">
|
||||
<ThemeSwitcher />
|
||||
{LogIn}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<AnimatePresence>
|
||||
{open ? (
|
||||
<motion.div
|
||||
initial={{ height: 0 }}
|
||||
animate={{ height: "auto" }}
|
||||
transition={{ duration: 0.15, ease: "linear" }}
|
||||
exit={{ height: 0 }}
|
||||
className="overflow-hidden sm:hidden"
|
||||
>
|
||||
<div className="flex flex-col space-y-1 py-1">
|
||||
{activeNavigation.map((item) => (
|
||||
<Link
|
||||
key={item.name}
|
||||
href={item.href}
|
||||
className={`btn border-transparent border-l-4 px-4 py-2 transition-colors duration-100 hover:border-primary hover:bg-primary/25 ${
|
||||
item.current ? "" : "border-primary"
|
||||
}`}
|
||||
aria-current={item.current ? "page" : undefined}
|
||||
>
|
||||
{item.name}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
) : null}
|
||||
</AnimatePresence>
|
||||
</LazyMotion>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
24
src/app/_components/navbar.tsx
Normal file
24
src/app/_components/navbar.tsx
Normal file
@@ -0,0 +1,24 @@
|
||||
"use server";
|
||||
|
||||
import { auth } from "@/server/auth";
|
||||
import LogIn from "./auth/login";
|
||||
import NavBarClient from "./navbar-client";
|
||||
|
||||
const defaultNavigation = [
|
||||
{ name: "Posts", href: "/posts", current: false },
|
||||
{ name: "Photos", href: "/photos", current: false },
|
||||
{ name: "CV", href: "/cv", current: false },
|
||||
];
|
||||
|
||||
const authedNavigation = [{ name: "Manage", href: "/manage", current: false }];
|
||||
|
||||
export default async function NavBar(): Promise<React.JSX.Element> {
|
||||
const session = await auth();
|
||||
let nav = structuredClone(defaultNavigation);
|
||||
|
||||
if (session?.user) {
|
||||
nav = nav.concat(structuredClone(authedNavigation));
|
||||
}
|
||||
|
||||
return <NavBarClient LogIn={<LogIn />} navigation={nav} />;
|
||||
}
|
||||
35
src/app/_components/post-header.tsx
Normal file
35
src/app/_components/post-header.tsx
Normal file
@@ -0,0 +1,35 @@
|
||||
type postMetadata = {
|
||||
title: string;
|
||||
date: string;
|
||||
coverImage: string;
|
||||
blurb: string;
|
||||
shortBlurb: string;
|
||||
tags: string[];
|
||||
};
|
||||
|
||||
type PostHeaderProps = {
|
||||
metadata: postMetadata;
|
||||
};
|
||||
|
||||
// TODO
|
||||
export default function PostHeader({
|
||||
metadata,
|
||||
}: PostHeaderProps): React.JSX.Element {
|
||||
return (
|
||||
<>
|
||||
<h1>{metadata.title}</h1>
|
||||
<div className="mb-2">{metadata.date}</div>
|
||||
<div className="mb-6">
|
||||
{metadata.tags.map((tag) => {
|
||||
return (
|
||||
<>
|
||||
<span className="me-2 select-none rounded border border-dracula-pink px-2.5 py-1 text-sm dark:bg-dracula-bg-darker dark:text-dracula-pink">
|
||||
{tag}
|
||||
</span>
|
||||
</>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
26
src/app/_components/theme-switcher.tsx
Normal file
26
src/app/_components/theme-switcher.tsx
Normal file
@@ -0,0 +1,26 @@
|
||||
"use client";
|
||||
|
||||
import { MoonIcon, SunIcon } from "@heroicons/react/24/outline";
|
||||
import type React from "react";
|
||||
|
||||
export default function ThemeSwitcher(): React.JSX.Element {
|
||||
const toggleTheme = (): void => {
|
||||
const currentTheme = document.documentElement.getAttribute('data-theme');
|
||||
if (currentTheme === 'light') {
|
||||
localStorage.theme = 'dark';
|
||||
document.documentElement.setAttribute('data-theme', 'dark');
|
||||
} else {
|
||||
localStorage.theme = 'light';
|
||||
document.documentElement.setAttribute('data-theme', 'light');
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<button type="button" className="m-1 h-8 w-8 rounded-full" onClick={toggleTheme}>
|
||||
<MoonIcon className="block dark:hidden" />
|
||||
<SunIcon className="hidden dark:block" />
|
||||
</button>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,22 +1,3 @@
|
||||
import { NextRequest } from "next/server";
|
||||
import { handlers } from "@/lib/auth";
|
||||
import { handlers } from "@/server/auth";
|
||||
|
||||
const reqWithTrustedOrigin = (req: NextRequest): NextRequest => {
|
||||
const proto = req.headers.get('x-forwarded-proto');
|
||||
const host = req.headers.get('x-forwarded-host');
|
||||
if (!proto || !host) {
|
||||
console.warn("Missing x-forwarded-proto or x-forwarded-host headers.");
|
||||
return req;
|
||||
}
|
||||
const envOrigin = `${proto}://${host}`;
|
||||
const { href, origin } = req.nextUrl;
|
||||
return new NextRequest(href.replace(origin, envOrigin), req);
|
||||
};
|
||||
|
||||
export const GET = (req: NextRequest): Promise<Response> => {
|
||||
return handlers.GET(reqWithTrustedOrigin(req));
|
||||
};
|
||||
|
||||
export const POST = (req: NextRequest): Promise<Response> => {
|
||||
return handlers.POST(reqWithTrustedOrigin(req));
|
||||
};
|
||||
export const { GET, POST } = handlers;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { NextResponse } from 'next/server';
|
||||
import { NextResponse } from "next/server";
|
||||
|
||||
export function GET(): Response {
|
||||
return NextResponse.json({ status: 200 }, { status: 200 });
|
||||
}
|
||||
return NextResponse.json({ status: 200 }, { status: 200 });
|
||||
}
|
||||
|
||||
@@ -1,11 +1,34 @@
|
||||
import { fetchRequestHandler } from '@trpc/server/adapters/fetch';
|
||||
import { createTRPCContext } from '@/trpc/init';
|
||||
import { appRouter } from '@/trpc/routers/_app';
|
||||
const handler = (req: Request): Promise<Response> =>
|
||||
fetchRequestHandler({
|
||||
endpoint: '/api/trpc',
|
||||
req,
|
||||
router: appRouter,
|
||||
createContext: createTRPCContext,
|
||||
});
|
||||
export { handler as GET, handler as POST };
|
||||
import { fetchRequestHandler } from "@trpc/server/adapters/fetch";
|
||||
import type { NextRequest } from "next/server";
|
||||
|
||||
import { env } from "@/env";
|
||||
import { appRouter } from "@/server/api/root";
|
||||
import { createTRPCContext } from "@/server/api/trpc";
|
||||
|
||||
/**
|
||||
* This wraps the `createTRPCContext` helper and provides the required context for the tRPC API when
|
||||
* handling a HTTP request (e.g. when you make requests from Client Components).
|
||||
*/
|
||||
const createContext = async (req: NextRequest) => {
|
||||
return createTRPCContext({
|
||||
headers: req.headers,
|
||||
});
|
||||
};
|
||||
|
||||
const handler = (req: NextRequest) =>
|
||||
fetchRequestHandler({
|
||||
endpoint: "/api/trpc",
|
||||
req,
|
||||
router: appRouter,
|
||||
createContext: () => createContext(req),
|
||||
onError:
|
||||
env.NODE_ENV === "development"
|
||||
? ({ path, error }) => {
|
||||
console.error(
|
||||
`❌ tRPC failed on ${path ?? "<no-path>"}: ${error.message}`,
|
||||
);
|
||||
}
|
||||
: undefined,
|
||||
});
|
||||
|
||||
export { handler as GET, handler as POST };
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB |
@@ -1,9 +0,0 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer utilities {
|
||||
.text-balance {
|
||||
text-wrap: balance;
|
||||
}
|
||||
}
|
||||
@@ -1,41 +1,49 @@
|
||||
import "reflect-metadata";
|
||||
import type { Metadata } from "next";
|
||||
import { Inter } from "next/font/google";
|
||||
import "./globals.css";
|
||||
import "@/styles/globals.css";
|
||||
|
||||
const inter = Inter({
|
||||
subsets: ['latin'],
|
||||
variable: '--font-inter',
|
||||
});
|
||||
import type { Metadata } from "next";
|
||||
import { Fira_Sans } from "next/font/google";
|
||||
|
||||
import { TRPCReactProvider } from "@/trpc/react";
|
||||
import { HydrateClient } from "@/trpc/server";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Joe Monk",
|
||||
description: "A portfolio page showing some of the things I've done",
|
||||
title: "Joe Monk",
|
||||
description: "A portfolio page showing some of the things I've done",
|
||||
icons: [{ rel: "icon", url: "/favicon.ico" }],
|
||||
};
|
||||
|
||||
const fira = Fira_Sans({
|
||||
subsets: ["latin"],
|
||||
variable: "--font-fira-sans",
|
||||
weight: ["400", "500", "600"]
|
||||
});
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: Readonly<{
|
||||
children: React.ReactNode;
|
||||
}>): React.JSX.Element {
|
||||
return (
|
||||
// Use suppress hydration warnings to add the dark theme class on client
|
||||
<html className={`${inter.variable} font-sans`} lang="en" suppressHydrationWarning>
|
||||
children,
|
||||
}: Readonly<{ children: React.ReactNode }>) {
|
||||
return (
|
||||
<html lang="en" className={`${fira.variable}`} suppressHydrationWarning>
|
||||
<head>
|
||||
<script id="SetTheme"
|
||||
// biome-ignore lint/security/noDangerouslySetInnerHtml: Doing some pre-render theming
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: `
|
||||
if (localStorage.theme !== 'dark' || (!('theme' in localStorage) && !window.matchMedia('(prefers-color-scheme: dark)').matches)) {
|
||||
document.documentElement.classList.remove('dark');
|
||||
if ('theme' in localStorage) {
|
||||
document.documentElement.setAttribute('data-theme', localStorage.theme)
|
||||
} else {
|
||||
document.documentElement.classList.add('dark');
|
||||
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
document.documentElement.setAttribute('data-theme', 'dark')
|
||||
} else {
|
||||
document.documentElement.setAttribute('data-theme', 'light')
|
||||
}
|
||||
}`,
|
||||
}}>
|
||||
</script>
|
||||
}}/>
|
||||
</head>
|
||||
<body className="min-h-screen flex flex-col bg-dracula-bg-lightest dark:bg-dracula-bg print:white max-h-screen">
|
||||
{children}
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
<body className="flex min-h-screen flex-col">
|
||||
<TRPCReactProvider>
|
||||
<HydrateClient>{children}</HydrateClient>
|
||||
</TRPCReactProvider>
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,29 +0,0 @@
|
||||
import { auth, signIn, signOut } from "@/lib/auth";
|
||||
import { getCurrentUrl } from "@/lib/current-url";
|
||||
import UserCircleIcon from "@heroicons/react/24/outline/UserCircleIcon";
|
||||
|
||||
export default async function LogIn(): Promise<React.JSX.Element | undefined> {
|
||||
const session = await auth();
|
||||
|
||||
return (
|
||||
<form
|
||||
action={async () => {
|
||||
"use server";
|
||||
if (session?.user) {
|
||||
await signOut({
|
||||
redirectTo: `${getCurrentUrl()}/`
|
||||
});
|
||||
} else {
|
||||
await signIn("authelia");
|
||||
}
|
||||
}}
|
||||
>
|
||||
<button type="submit" className="p-1 dark:hover:bg-dracula-bg-light rounded-3xl transition-colors group">
|
||||
<UserCircleIcon className={`h-8 w-auto transition-colors ${
|
||||
session?.user ? "dark:stroke-dracula-red dark:group-hover:stroke-dracula-green" : "dark:stroke-dracula-cyan dark:group-hover:stroke-dracula-orange"
|
||||
}`}/>
|
||||
<span className="sr-only">{session?.user ? "Log out" : "Log in"}</span>
|
||||
</button>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
@@ -1,129 +0,0 @@
|
||||
import { PaperAirplaneIcon } from "@heroicons/react/24/outline";
|
||||
import React from "react";
|
||||
|
||||
type ExperienceContent = {
|
||||
startDate: string,
|
||||
endDate: string,
|
||||
title: string,
|
||||
tech: string,
|
||||
company: string,
|
||||
content: string | React.JSX.Element
|
||||
}
|
||||
|
||||
function PrintBreak({count}: {count?: number}): React.JSX.Element {
|
||||
return (
|
||||
<>
|
||||
{Array.from({length: count ?? 1}).map((_, i) => <br key={i} className="hidden print:block"/>)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
const content: ExperienceContent[] = [
|
||||
{
|
||||
company: "Tes",
|
||||
endDate: "Present",
|
||||
startDate: "Feb 2023",
|
||||
tech: "TS/NodeJS/React/DotNet/AWS/K8s/GitOps",
|
||||
title: "Technical Lead",
|
||||
content: <>
|
||||
As a technical lead, my role moved mostly into communicating with the wider business to ensure my team has clear, achievable objectives, then helping them release those objectives. I have been particularly involved with cross-team collaboration to continue pushing improvements to our development process, being part of frontend and backend guilds as well as having a constant input into our service architecture to set development-wide architectural decisions. During this time, I have worked in multiple tech stacks, swiftly becoming proficient with frameworks and languages in order to upskill my team.
|
||||
<br/>
|
||||
Projects I have led include: rebuilding of some of the most used pages we have, releasing new web apps to millions of monthly users which included complex searching with filters and via a map, and user specific context while retaining high SEO scores and high levels of accessibility compliance; creating a new email workflow, that can utilizes multiple accounts and services to protect reputation; and creating a genetic algorithm built to scale with which users can track their progress when crunching complex sets of data.
|
||||
</>
|
||||
},
|
||||
{
|
||||
company: "Tes",
|
||||
endDate: "Feb 2023",
|
||||
startDate: "Jun 2022",
|
||||
tech: "TS/JS/NodeJS/React",
|
||||
title: "Senior Developer",
|
||||
content: "Changing fields into web development, I utilised my previous knowledge to pivot quickly into the technologies needed for full stack development. I have since worked on and improved many products across multiple teams, while using my experience to provide individual support within my team. I have also created internal initiatives to improve our developer experience as well as getting involved in architecture discussions to keep pushing our development forwards."
|
||||
},
|
||||
{
|
||||
company: "Live 5",
|
||||
endDate: "Jun 2022",
|
||||
startDate: "Oct 2019",
|
||||
tech: "TS/JS/WebGL/NodeJS",
|
||||
title: "Development Manager",
|
||||
content: <>
|
||||
As development manager, I oversaw all of the developers at Live 5 and had a responsibility to oversee production of over 20 games a year from my teams. I kept each stage of game development on track to meet both internal and external deadlines, able to work with my teams to either change the scope of the project or move developers to get the games back on target. <PrintBreak count={4}/> By implementing a proper code review process, frequent stand ups and additional tooling for developers, qa and artists, we produced far more complex games in less time with fewer bugs. In addition, I mentored both junior and senior members of my team to develop their technical skills, knowledge and soft skills.
|
||||
<br/>
|
||||
While managing the team was my foremost responsibility, I was still heavily involved with development. I tackled any particularly difficult coding problems for the team and architecture large-scale changes within the codebase. For example, I integrated new business vital services and rebuilt our base renderer and loading core in TypeScript. One of the more interesting projects I directed was to rebuild our backend, focusing on providing local and remote interfaces to the data generation that allowed for faster development of more reliable game backends. The deployment process was also rebuilt to allow deploying into AWS for browser game access, as a package for a separate serverless game build and to run a statistical analysis on a bare metal local kubernetes cluster which I also administered.
|
||||
</>
|
||||
},
|
||||
{
|
||||
company: "Live 5",
|
||||
endDate: "Oct 2019",
|
||||
startDate: "Sept 2018",
|
||||
tech: "TS/JS/WebGL/NodeJS",
|
||||
title: "Game Developer",
|
||||
content: "I was hired to continue as a C++ Developer, but soon transitioned to the mobile team due to company priorities. Despite having no prior experience with JavaScript, I quickly became proficient in the language and its ecosystem, which enabled me to promptly integrate into my new role.I started with creating games, but similar to my time at Inspired, I wrote extra scripts and improved the game libraries to assist development across the team."
|
||||
},
|
||||
{
|
||||
company: "Inspired Gaming",
|
||||
endDate: "Sept 2018",
|
||||
startDate: "Mar 2016",
|
||||
tech: "C++/DirectX/Python",
|
||||
title: "Engine/Game Developer",
|
||||
content: "My initial responsibilities involved converting existing games to work on a variety of hardware, though I quickly moved up to work on building some of the more complex games and tooling myself, before going on to mentor new starters.Soon after, I advanced into the game engine development team, which explored ways of improving the development cycle and coding efficiency for other developers. We improved the libraries, build steps and used middleware such as Conan and custom VS plugins to provide prebuilt binaries and improve cohesion and standards across the teams."
|
||||
}
|
||||
];
|
||||
|
||||
function Experience({content}: {content: ExperienceContent}): React.JSX.Element {
|
||||
return (
|
||||
<div className="flex flex-row gap-4 dark:border-b-dracula-orange border-b-dracula-bg-light border-b-2 last:border-b-0">
|
||||
<div className="w-20 justify-center text-center">
|
||||
{content.endDate}
|
||||
<br/>
|
||||
-
|
||||
<br/>
|
||||
{content.startDate}
|
||||
</div>
|
||||
<div className="flex flex-col w-full">
|
||||
<div className="flex flex-row w-full pb-1 mb-2 border-b-[1px] border-dracula-bg-light">
|
||||
<div className="text-left self-start">
|
||||
{content.title}
|
||||
</div>
|
||||
<div className="text-right flex-grow self-start">
|
||||
{content.tech}
|
||||
</div>
|
||||
<div className="w-20 ml-3 text-right border-l-[1px] border-dracula-bg-light pr-2">
|
||||
{content.company}
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-justify pb-2 pr-2">
|
||||
{content.content}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function Cv(): React.JSX.Element {
|
||||
return (
|
||||
<div className='w-[20cm] print:pt-[0.5cm] mx-auto dark:text-white'>
|
||||
<div className='flex flex-col justify-center'>
|
||||
<h1 className='text-center py-1 text-2xl font-medium uppercase text-white bg-dracula-bg-light'>Joe Lewis Monk</h1>
|
||||
<div className="p-2 flex flex-col gap-2">
|
||||
<div className="grid grid-cols-3 border-b-2 border-dracula-bg-light pb-2">
|
||||
<span className="border-r-[1px] border-dracula-bg-light text-left">joemonk.co.uk</span>
|
||||
<span className="border-x-[1px] border-dracula-bg-light text-center">07757 017587</span>
|
||||
<span className="border-l-[1px] border-dracula-bg-light text-right">joemonk@hotmail.co.uk</span>
|
||||
</div>
|
||||
<p className="text-justify">
|
||||
As a highly motivated and adaptive developer, my enthusiasm for learning new technologies, along with years of rapid game and web development, has driven my proficiency with many languages and tools. This allows me to be flexible when tackling problems. Over the last few years I have enjoyed expanding my role to include management of multiple teams, and have picked up new tech stacks while moving between roles.
|
||||
</p>
|
||||
</div>
|
||||
<div className="bg-dracula-bg-light flex flex-row px-2 py-1 gap-2 text-white">
|
||||
<PaperAirplaneIcon className="h-5 my-[2px]"/>
|
||||
<h2 className="font-medium">Experience</h2>
|
||||
</div>
|
||||
<div className="flex flex-col gap-4 py-2">
|
||||
{content.map((expContent) => (
|
||||
<Experience content={expContent} key={`${expContent.company}_${expContent.title}`}/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,11 +0,0 @@
|
||||
export default function NavBar(): React.JSX.Element {
|
||||
return (
|
||||
<footer className="dark:bg-dracula-bg-darker border-t-2 dark:border-dracula-purple">
|
||||
<div className="mx-auto max-w-7xl px-4">
|
||||
<div className="relative flex flex-row-reverse h-12 items-center justify-between">
|
||||
<span className='dark:text-white select-none'>© Joe Monk 2024</span>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
@@ -1,209 +0,0 @@
|
||||
"use client";
|
||||
import React, { useState } from "react";
|
||||
import Image from "next/image";
|
||||
|
||||
import YARL, {
|
||||
isImageFitCover,
|
||||
isImageSlide,
|
||||
useLightboxProps,
|
||||
useLightboxState,
|
||||
} from "yet-another-react-lightbox";
|
||||
import Thumbnails from "yet-another-react-lightbox/plugins/thumbnails";
|
||||
import Zoom from "yet-another-react-lightbox/plugins/zoom";
|
||||
import Captions from "yet-another-react-lightbox/plugins/captions";
|
||||
import "yet-another-react-lightbox/styles.css";
|
||||
import "yet-another-react-lightbox/plugins/thumbnails.css";
|
||||
import "yet-another-react-lightbox/plugins/captions.css";
|
||||
|
||||
import type { RouterOutput } from "@/trpc/routers/_app";
|
||||
import { trpc } from "@/trpc/client";
|
||||
|
||||
type ImageData = RouterOutput["photos"]["list"]["data"][number];
|
||||
|
||||
function NextJsImage({
|
||||
slide,
|
||||
offset,
|
||||
rect,
|
||||
unoptimized = false,
|
||||
}: {
|
||||
slide: ImageData;
|
||||
offset: number;
|
||||
rect: { width: number; height: number };
|
||||
unoptimized: boolean;
|
||||
}): React.JSX.Element {
|
||||
const {
|
||||
on: { click },
|
||||
carousel: { imageFit },
|
||||
} = useLightboxProps();
|
||||
|
||||
const { currentIndex } = useLightboxState();
|
||||
|
||||
const cover = isImageSlide(slide) && isImageFitCover(slide, imageFit);
|
||||
|
||||
const width = !cover
|
||||
? Math.round(
|
||||
Math.min(rect.width, (rect.height / slide.height) * slide.width)
|
||||
)
|
||||
: rect.width;
|
||||
|
||||
const height = !cover
|
||||
? Math.round(
|
||||
Math.min(rect.height, (rect.width / slide.width) * slide.height)
|
||||
)
|
||||
: rect.height;
|
||||
|
||||
return (
|
||||
<div style={{ position: "relative", width, height }}>
|
||||
<Image
|
||||
fill
|
||||
alt=""
|
||||
src={slide}
|
||||
loading="eager"
|
||||
unoptimized={unoptimized}
|
||||
draggable={false}
|
||||
blurDataURL={slide.blur}
|
||||
placeholder="blur"
|
||||
style={{
|
||||
objectFit: cover ? "cover" : "contain",
|
||||
cursor: click ? "pointer" : undefined,
|
||||
}}
|
||||
sizes={`${Math.ceil((width / window.innerWidth) * 100)}vw`}
|
||||
onClick={
|
||||
offset === 0
|
||||
? (): void => click?.({ index: currentIndex })
|
||||
: undefined
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function Lightbox({
|
||||
imageData,
|
||||
children,
|
||||
}: {
|
||||
imageData: ImageData[];
|
||||
children: React.JSX.Element[];
|
||||
}): React.JSX.Element {
|
||||
const [active, setActive] = useState<number | null>(null);
|
||||
|
||||
return (
|
||||
<div className="mx-auto">
|
||||
<div className="flex flex-row flex-wrap justify-center">
|
||||
{children.map((image, index) => {
|
||||
return (
|
||||
<button
|
||||
key={`lightbox_img_${index}`}
|
||||
onClick={() => {
|
||||
setActive(index);
|
||||
}}
|
||||
>
|
||||
<div className="relative">{image}</div>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<YARL
|
||||
open={typeof active === "number"}
|
||||
close={() => setActive(null)}
|
||||
index={active ?? undefined}
|
||||
slides={imageData}
|
||||
render={{
|
||||
// @ts-expect-error - Todo
|
||||
slide: (args) => NextJsImage({ ...args, unoptimized: true }),
|
||||
// @ts-expect-error - Todo - This just passes the slide through, but it doesn't know the type
|
||||
thumbnail: NextJsImage,
|
||||
}}
|
||||
plugins={[Thumbnails, Zoom, Captions]}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
interface FormElements extends HTMLFormControlsCollection {
|
||||
src: HTMLInputElement;
|
||||
}
|
||||
interface UsernameFormElement extends HTMLFormElement {
|
||||
readonly elements: FormElements;
|
||||
}
|
||||
|
||||
export default function FilteredLightbox(props: {
|
||||
imageData: ImageData[];
|
||||
children: React.JSX.Element[];
|
||||
}): React.JSX.Element {
|
||||
//const [imageData, setImageData] = useState(props.imageData);
|
||||
const [imageData] = useState(props.imageData);
|
||||
const photoQuery = trpc.photos.list.useInfiniteQuery(
|
||||
{
|
||||
limit: 1,
|
||||
},
|
||||
{
|
||||
initialData: {
|
||||
pages: [
|
||||
{
|
||||
data: props.imageData,
|
||||
next: props.imageData.length,
|
||||
},
|
||||
],
|
||||
pageParams: [0],
|
||||
},
|
||||
getNextPageParam: (lastPage) => lastPage.next,
|
||||
}
|
||||
);
|
||||
|
||||
const refreshQuery = trpc.photos.update.useQuery(undefined, {
|
||||
enabled: false,
|
||||
retry: false,
|
||||
});
|
||||
|
||||
function handleSubmit(event: React.FormEvent<UsernameFormElement>): void {
|
||||
event.preventDefault();
|
||||
// const imageData = props.imageData;
|
||||
// setImageData(
|
||||
// imageData.filter(
|
||||
// (data) => data.src === event.currentTarget.elements.src.value
|
||||
// )
|
||||
// );
|
||||
void photoQuery.fetchNextPage();
|
||||
}
|
||||
|
||||
const children = photoQuery.data.pages
|
||||
.flatMap((data) => data.data)
|
||||
.map((data) => (
|
||||
<Image
|
||||
key={data.src}
|
||||
alt={data.src}
|
||||
src={data.src}
|
||||
className="object-contain h-60 w-80"
|
||||
sizes="100vw"
|
||||
loading="lazy"
|
||||
width={data.width}
|
||||
height={data.height}
|
||||
blurDataURL={data.blur}
|
||||
placeholder="blur"
|
||||
/>
|
||||
))
|
||||
.filter((data) => !!data);
|
||||
|
||||
return (
|
||||
<>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div>
|
||||
<label htmlFor="src">Src:</label>
|
||||
<input id="src" type="text" />
|
||||
</div>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
<button
|
||||
onClick={() => {
|
||||
void refreshQuery.refetch();
|
||||
}}
|
||||
>
|
||||
Refresh
|
||||
</button>
|
||||
{refreshQuery.data ? JSON.stringify(refreshQuery.data) : "\nNot"}
|
||||
{refreshQuery.error ? JSON.stringify(refreshQuery.error) : "\nNo Error"}
|
||||
<Lightbox imageData={imageData}>{...children}</Lightbox>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,116 +0,0 @@
|
||||
"use client";
|
||||
import { useMemo, useState } from "react";
|
||||
import Link from "next/link";
|
||||
import {
|
||||
HomeModernIcon,
|
||||
Bars3Icon,
|
||||
XMarkIcon,
|
||||
} from "@heroicons/react/24/outline";
|
||||
import {
|
||||
AnimatePresence,
|
||||
motion,
|
||||
LazyMotion,
|
||||
domAnimation,
|
||||
} from "framer-motion";
|
||||
import { usePathname } from "next/navigation";
|
||||
import ThemeSwitcher from "./theme-switcher";
|
||||
|
||||
type NavBarClientProps = {
|
||||
LogIn: React.JSX.Element;
|
||||
navigation: {
|
||||
name: string;
|
||||
href: string;
|
||||
current: boolean;
|
||||
}[];
|
||||
};
|
||||
|
||||
export default function NavBarClient({
|
||||
LogIn,
|
||||
navigation,
|
||||
}: NavBarClientProps): React.JSX.Element {
|
||||
const [open, setOpen] = useState(false);
|
||||
const pathname = usePathname();
|
||||
|
||||
const activeNavigation = useMemo((): typeof navigation => {
|
||||
const nav = structuredClone(navigation);
|
||||
|
||||
const current = nav.find((nav) => nav.href === pathname);
|
||||
if (current) {
|
||||
current.current = true;
|
||||
}
|
||||
return nav;
|
||||
}, [pathname, navigation]);
|
||||
|
||||
return (
|
||||
<nav className="dark:bg-dracula-bg-darker border-b-2 dark:border-dracula-purple">
|
||||
<LazyMotion features={domAnimation}>
|
||||
<div className="mx-auto max-w-7xl px-4">
|
||||
<div className="relative flex h-16 items-center justify-between">
|
||||
<div className="flex">
|
||||
<button
|
||||
className="sm:hidden dark:hover:bg-dracula-bg-light transition-colors duration-100 rounded-sm p-1"
|
||||
onClick={() => setOpen(!open)}
|
||||
>
|
||||
{open ? (
|
||||
<XMarkIcon className="rounded-sm dark:stroke-dracula-cyan h-8 w-auto" />
|
||||
) : (
|
||||
<Bars3Icon className="rounded-sm dark:stroke-dracula-cyan h-8 w-auto" />
|
||||
)}
|
||||
</button>
|
||||
<Link
|
||||
className="hidden sm:flex items-center p-1 dark:hover:bg-dracula-bg-light transition-colors"
|
||||
href="/"
|
||||
>
|
||||
<HomeModernIcon className="dark:stroke-dracula-cyan rounded-sm h-8 w-auto" />
|
||||
</Link>
|
||||
<div className="space-x-5 hidden sm:flex ml-10">
|
||||
{activeNavigation.map((item) => (
|
||||
<Link
|
||||
key={item.name}
|
||||
href={item.href}
|
||||
className={`dark:hover:bg-dracula-bg-light transition-colors duration-100 dark:text-white rounded-sm px-3 pt-2 pb-1.5 font-normal border-b-2 border-transparent ${
|
||||
item.current ? "dark:border-b-dracula-pink" : ""
|
||||
}`}
|
||||
aria-current={item.current ? "page" : undefined}
|
||||
>
|
||||
{item.name}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-x-4 flex">
|
||||
<ThemeSwitcher />
|
||||
{LogIn}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<AnimatePresence>
|
||||
{open ? (
|
||||
<motion.div
|
||||
initial={{ height: 0 }}
|
||||
animate={{ height: "auto" }}
|
||||
transition={{ duration: 0.15, ease: "linear" }}
|
||||
exit={{ height: 0 }}
|
||||
className="sm:hidden overflow-hidden"
|
||||
>
|
||||
<div className="flex flex-col space-y-1 py-1">
|
||||
{activeNavigation.map((item) => (
|
||||
<Link
|
||||
key={item.name}
|
||||
href={item.href}
|
||||
className={`dark:hover:bg-dracula-bg-light transition-colors duration-100 dark:text-white px-2 py-2 font-normal border-l-4 border-transparent ${
|
||||
item.current ? "dark:border-l-dracula-pink" : ""
|
||||
}`}
|
||||
aria-current={item.current ? "page" : undefined}
|
||||
>
|
||||
{item.name}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
) : null}
|
||||
</AnimatePresence>
|
||||
</LazyMotion>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
@@ -1,28 +0,0 @@
|
||||
"use server";
|
||||
|
||||
import { auth } from "@/lib/auth";
|
||||
import NavBarClient from "./navbar-client";
|
||||
import LogIn from "./auth/login";
|
||||
|
||||
const defaultNavigation = [
|
||||
{ name: 'Posts', href: '/posts', current: false },
|
||||
{ name: 'Photos', href: '/photos', current: false },
|
||||
{ name: 'CV', href: '/cv', current: false },
|
||||
];
|
||||
|
||||
const authedNavigation = [
|
||||
{ name: 'Manage', href: '/manage', current: false },
|
||||
];
|
||||
|
||||
export default async function NavBar(): Promise<React.JSX.Element> {
|
||||
const session = await auth();
|
||||
let nav = structuredClone(defaultNavigation);
|
||||
|
||||
if (session?.user) {
|
||||
nav = nav.concat(structuredClone(authedNavigation));
|
||||
}
|
||||
|
||||
return (
|
||||
<NavBarClient LogIn={<LogIn/>} navigation={nav}/>
|
||||
);
|
||||
}
|
||||
@@ -1,30 +0,0 @@
|
||||
type postMetadata = {
|
||||
title: string,
|
||||
date: string,
|
||||
coverImage: string,
|
||||
blurb: string,
|
||||
shortBlurb: string,
|
||||
tags: string[]
|
||||
}
|
||||
|
||||
type PostHeaderProps = {
|
||||
metadata: postMetadata
|
||||
}
|
||||
|
||||
export default function PostHeader({metadata}: PostHeaderProps): React.JSX.Element {
|
||||
return (
|
||||
<>
|
||||
<h1>{metadata.title}</h1>
|
||||
<div className="mb-2">{metadata.date}</div>
|
||||
<div className="mb-6">
|
||||
{metadata.tags.map((tag) => {
|
||||
return (
|
||||
<>
|
||||
<span className="select-none text-sm me-2 px-2.5 py-1 rounded border border-dracula-pink dark:bg-dracula-bg-darker dark:text-dracula-pink">{tag}</span>
|
||||
</>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,24 +0,0 @@
|
||||
"use client";
|
||||
import { MoonIcon, SunIcon } from "@heroicons/react/24/outline";
|
||||
import React from "react";
|
||||
|
||||
export default function ThemeSwitcher(): React.JSX.Element {
|
||||
const toggleTheme = function(): void {
|
||||
if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
|
||||
document.documentElement.classList.remove('dark');
|
||||
localStorage.theme = 'light';
|
||||
} else {
|
||||
document.documentElement.classList.add('dark');
|
||||
localStorage.theme = 'dark';
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<button className="h-8 w-8 m-1" onClick={toggleTheme}>
|
||||
<MoonIcon className="dark:hidden block"/>
|
||||
<SunIcon className="hidden dark:block dark:stroke-dracula-cyan"/>
|
||||
</button>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,3 +0,0 @@
|
||||
import { drizzle } from 'drizzle-orm/better-sqlite3';
|
||||
|
||||
export default drizzle(`${process.cwd()}/db.sql`);
|
||||
@@ -1,22 +0,0 @@
|
||||
import { int, sqliteTable, text, blob, real } from "drizzle-orm/sqlite-core";
|
||||
|
||||
export const photosTable = sqliteTable(
|
||||
"photo",
|
||||
{
|
||||
id: int().primaryKey({ autoIncrement: true }),
|
||||
src: text().notNull().unique(),
|
||||
width: int().notNull(),
|
||||
height: int().notNull(),
|
||||
blur: blob().notNull(),
|
||||
|
||||
camera: text(),
|
||||
title: text(),
|
||||
description: text(),
|
||||
exposureBiasValue: int(),
|
||||
fNumber: real(),
|
||||
isoSpeedRatings: int(),
|
||||
focalLength: int(),
|
||||
dateTimeOriginal: int({ mode: 'timestamp' }),
|
||||
lensModel: text(),
|
||||
}
|
||||
);
|
||||
58
src/env.js
Normal file
58
src/env.js
Normal file
@@ -0,0 +1,58 @@
|
||||
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: {
|
||||
AUTH_SECRET:
|
||||
process.env.NODE_ENV === "production"
|
||||
? z.string()
|
||||
: z.string().optional(),
|
||||
AUTH_CLIENT_ID: z.string(),
|
||||
AUTH_CLIENT_SECRET: z.string(),
|
||||
DATABASE_URL: z.string().url(),
|
||||
NODE_ENV: z
|
||||
.enum(["development", "test", "production"])
|
||||
.default("development"),
|
||||
AWS_ACCESS_KEY_ID: z.string(),
|
||||
AWS_SECRET_ACCESS_KEY: z.string(),
|
||||
PORT: z.number({ coerce: true }).int().default(3000),
|
||||
},
|
||||
|
||||
/**
|
||||
* 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: {
|
||||
AUTH_SECRET: process.env.AUTH_SECRET,
|
||||
AUTH_CLIENT_ID: process.env.AUTH_CLIENT_ID,
|
||||
AUTH_CLIENT_SECRET: process.env.AUTH_CLIENT_SECRET,
|
||||
DATABASE_URL: process.env.DATABASE_URL,
|
||||
NODE_ENV: process.env.NODE_ENV,
|
||||
AWS_ACCESS_KEY_ID: process.env.AWS_ACCESS_KEY_ID,
|
||||
AWS_SECRET_ACCESS_KEY: process.env.AWS_SECRET_ACCESS_KEY,
|
||||
PORT: process.env.PORT,
|
||||
},
|
||||
/**
|
||||
* 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,
|
||||
});
|
||||
@@ -1,16 +0,0 @@
|
||||
import "server-only";
|
||||
import NextAuth from "next-auth";
|
||||
import { getCurrentUrl } from "./current-url";
|
||||
|
||||
export const { handlers, signIn, signOut, auth } = NextAuth({
|
||||
providers: [{
|
||||
id: "authelia",
|
||||
name: "Authelia",
|
||||
type: "oidc",
|
||||
issuer: "https://auth.home.joemonk.co.uk",
|
||||
clientId: process.env.AUTH_CLIENT_ID,
|
||||
clientSecret: process.env.AUTH_CLIENT_SECRET,
|
||||
}],
|
||||
trustHost: true,
|
||||
redirectProxyUrl: `${getCurrentUrl()}/api/auth`,
|
||||
});
|
||||
6
src/lib/base-url.ts
Normal file
6
src/lib/base-url.ts
Normal file
@@ -0,0 +1,6 @@
|
||||
import { env } from "@/env";
|
||||
|
||||
export function getBaseUrl() {
|
||||
if (typeof window !== "undefined") return window.location.origin;
|
||||
return `http://localhost:${env.PORT ?? 3000}`;
|
||||
}
|
||||
@@ -1,7 +0,0 @@
|
||||
export function getCurrentUrl(): string {
|
||||
if (process.env.NODE_ENV === 'production') {
|
||||
return "https://joemonk.co.uk";
|
||||
} else {
|
||||
return "https://3000.vscode.home.joemonk.co.uk";
|
||||
}
|
||||
}
|
||||
@@ -1,6 +1,6 @@
|
||||
A small personal site I use to practice and try things out. When I remember I'll use it to log interesting or difficult projects.
|
||||
|
||||
Built to try and use multiple modern web tecnologies in tandem to produce a great user experience from real data. Most parts have been built in a way in which I can swap it out with more interesting methods and projects.
|
||||
Built to try and use multiple modern web technologies in tandem to produce a great user experience from real data. Most parts have been built in a way in which I can swap it out with more interesting methods and projects.
|
||||
|
||||
I'm using Next.js with react query to make the pages load nicely and tailwindcss to make them look good easily. Page content is loaded from mdx files, including preview pages locked behind AWS Cognito. The thought being I'll offload them to load from a database instead of direct files, inserting via a wysiwyg editor behind the auth.
|
||||
Photos are currently loaded from the filesystem, the metadata and EXIF data is read and a small image created which are all passed back as part of the page. This allows the initial page to have a small blur image, correctly sorted, allowing the page to be loaded quickly. When the page is loaded, the images can then be lazy loaded and optimized to reduce the impact on the server and the data to the client. Opening a full image will then load an unoptimized version to allow detail to be viewed.
|
||||
@@ -1,4 +1,4 @@
|
||||
import PostHeader from '@/components/post-header';
|
||||
import PostHeader from '@/app/_components/post-header';
|
||||
|
||||
export const metadata = {
|
||||
title: "Being a Developer",
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import PostHeader from '@/components/post-header';
|
||||
import PostHeader from '@/app/_components/post-header';
|
||||
|
||||
export const metadata = {
|
||||
title: "Learning Kubernetes",
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import PostHeader from '@/components/post-header';
|
||||
import PostHeader from '@/app/_components/post-header';
|
||||
|
||||
export const metadata = {
|
||||
title: "Managing a Team Remotely",
|
||||
|
||||
@@ -1,15 +1,15 @@
|
||||
import type { MDXComponents } from 'mdx/types';
|
||||
import React from 'react';
|
||||
|
||||
import type { MDXComponents } from "mdx/types";
|
||||
import type React from "react";
|
||||
|
||||
export function useMDXComponents(components: MDXComponents): MDXComponents {
|
||||
return {
|
||||
wrapper: ({children}: { children: React.JSX.Element[]}): React.JSX.Element => {
|
||||
return (
|
||||
<article className='prose prose-slate dark:prose-invert mx-auto'>
|
||||
{children}
|
||||
</article>
|
||||
);
|
||||
},
|
||||
...components,
|
||||
};
|
||||
}
|
||||
return {
|
||||
wrapper: ({
|
||||
children,
|
||||
}: { children: React.JSX.Element[] }): React.JSX.Element => {
|
||||
return (
|
||||
<article className="prose mx-auto">{children}</article>
|
||||
);
|
||||
},
|
||||
...components,
|
||||
};
|
||||
}
|
||||
|
||||
@@ -1 +0,0 @@
|
||||
export { auth as middleware } from "@/lib/auth";
|
||||
23
src/server/api/root.ts
Normal file
23
src/server/api/root.ts
Normal file
@@ -0,0 +1,23 @@
|
||||
import { createCallerFactory, createTRPCRouter } from "@/server/api/trpc";
|
||||
import { photosRouter } from "./routers/photos/photos";
|
||||
|
||||
/**
|
||||
* This is the primary router for your server.
|
||||
*
|
||||
* All routers added in /api/routers should be manually added here.
|
||||
*/
|
||||
export const appRouter = createTRPCRouter({
|
||||
photos: photosRouter,
|
||||
});
|
||||
|
||||
// export type definition of API
|
||||
export type AppRouter = typeof appRouter;
|
||||
|
||||
/**
|
||||
* Create a server-side caller for the tRPC API.
|
||||
* @example
|
||||
* const trpc = createCaller(createContext);
|
||||
* const res = await trpc.post.all();
|
||||
* ^? Post[]
|
||||
*/
|
||||
export const createCaller = createCallerFactory(appRouter);
|
||||
56
src/server/api/routers/photos/list/index.ts
Normal file
56
src/server/api/routers/photos/list/index.ts
Normal file
@@ -0,0 +1,56 @@
|
||||
import { db } from "@/server/db";
|
||||
import { photos } from "@/server/db/schema";
|
||||
import { shake } from "radash";
|
||||
|
||||
export type ImageData = {
|
||||
width: number;
|
||||
height: number;
|
||||
blur: `data:image/${string}`;
|
||||
src: string;
|
||||
camera?: string;
|
||||
exif: Partial<{
|
||||
exposureBiasValue: number;
|
||||
fNumber: number;
|
||||
isoSpeedRatings: number;
|
||||
focalLength: number;
|
||||
takenAt: Date;
|
||||
LensModel: string;
|
||||
}>;
|
||||
title?: string;
|
||||
description?: string;
|
||||
};
|
||||
|
||||
export type ListOptions = {
|
||||
cursor: number;
|
||||
limit: number;
|
||||
};
|
||||
|
||||
export async function list(options: ListOptions): Promise<ImageData[]> {
|
||||
const currentSources = await db
|
||||
.select()
|
||||
.from(photos)
|
||||
.limit(options.limit)
|
||||
.offset(options.cursor);
|
||||
|
||||
const images = currentSources.map((photo) => {
|
||||
return {
|
||||
width: photo.width,
|
||||
height: photo.height,
|
||||
blur: `data:image/jpeg;base64,${photo.blur.toString("base64")}` as `data:image/${string}`,
|
||||
src: photo.src,
|
||||
camera: photo.camera ?? undefined,
|
||||
exif: shake({
|
||||
exposureBiasValue: photo.exposureBiasValue,
|
||||
fNumber: photo.fNumber,
|
||||
isoSpeedRatings: photo.isoSpeedRatings,
|
||||
focalLength: photo.focalLength,
|
||||
takenAt: photo.takenAt,
|
||||
lensModel: photo.lensModel,
|
||||
}),
|
||||
title: photo.title ?? undefined,
|
||||
description: photo.description ?? undefined,
|
||||
};
|
||||
});
|
||||
|
||||
return images;
|
||||
}
|
||||
40
src/server/api/routers/photos/photos.ts
Normal file
40
src/server/api/routers/photos/photos.ts
Normal file
@@ -0,0 +1,40 @@
|
||||
import { z } from "zod";
|
||||
|
||||
import {
|
||||
createTRPCRouter,
|
||||
protectedProcedure,
|
||||
publicProcedure,
|
||||
} from "@/server/api/trpc";
|
||||
import { list } from "./list";
|
||||
import { update } from "./update";
|
||||
|
||||
export const photosRouter = createTRPCRouter({
|
||||
list: publicProcedure
|
||||
.input(
|
||||
z
|
||||
.object({
|
||||
limit: z.number().nonnegative().default(1),
|
||||
cursor: z.number().nonnegative().default(0),
|
||||
})
|
||||
.optional()
|
||||
.default({}),
|
||||
)
|
||||
.query(async ({ input }) => {
|
||||
const ret = await list({
|
||||
limit: input.limit + 1,
|
||||
cursor: input.cursor,
|
||||
});
|
||||
|
||||
let next: number | undefined;
|
||||
if (ret.length > input.limit) {
|
||||
next = input.limit;
|
||||
ret.pop();
|
||||
}
|
||||
|
||||
return {
|
||||
data: ret,
|
||||
next,
|
||||
};
|
||||
}),
|
||||
update: protectedProcedure.query(update),
|
||||
});
|
||||
90
src/server/api/routers/photos/update/index.ts
Normal file
90
src/server/api/routers/photos/update/index.ts
Normal file
@@ -0,0 +1,90 @@
|
||||
import {
|
||||
GetObjectCommand,
|
||||
ListObjectsV2Command,
|
||||
S3Client,
|
||||
} from "@aws-sdk/client-s3";
|
||||
import exifReader from "exif-reader";
|
||||
import { diff, sift } from "radash";
|
||||
import sharp from "sharp";
|
||||
|
||||
import { db } from "@/server/db";
|
||||
import { photos } from "@/server/db/schema";
|
||||
import { TRPCError } from "@trpc/server";
|
||||
|
||||
export async function update(): Promise<string[]> {
|
||||
const allPhotos = await db.select().from(photos);
|
||||
const currentSources = allPhotos.map((photo) => photo.src);
|
||||
|
||||
const s3Client = new S3Client({
|
||||
region: "auto",
|
||||
endpoint: "https://fly.storage.tigris.dev",
|
||||
});
|
||||
|
||||
const listObjCmd = new ListObjectsV2Command({
|
||||
Bucket: "joemonk-photos",
|
||||
});
|
||||
|
||||
const s3Res = await s3Client.send(listObjCmd);
|
||||
|
||||
if (!s3Res.Contents) {
|
||||
throw new TRPCError({
|
||||
code: "GATEWAY_TIMEOUT",
|
||||
message: "Could not get contents from Tigris",
|
||||
});
|
||||
}
|
||||
const s3Photos = sift(
|
||||
s3Res.Contents.map((obj) => {
|
||||
if (!obj.Key?.endsWith("/")) {
|
||||
return `https://fly.storage.tigris.dev/joemonk-photos/${obj.Key}`;
|
||||
}
|
||||
return null;
|
||||
}),
|
||||
);
|
||||
|
||||
const newPhotos = diff(s3Photos, currentSources);
|
||||
|
||||
if (newPhotos.length === 0) {
|
||||
return [];
|
||||
}
|
||||
|
||||
const imageData = newPhotos.map(async (fileName: string) => {
|
||||
const getImageCmd = new GetObjectCommand({
|
||||
Bucket: "joemonk-photos",
|
||||
Key: fileName.replace(
|
||||
"https://fly.storage.tigris.dev/joemonk-photos/",
|
||||
"",
|
||||
),
|
||||
});
|
||||
const imgRes = await s3Client.send(getImageCmd);
|
||||
const image = await imgRes.Body?.transformToByteArray();
|
||||
|
||||
const { width, height, exif } = await sharp(image).metadata();
|
||||
const blur = await sharp(image)
|
||||
.resize({ width: 12, height: 12, fit: "inside" })
|
||||
.toBuffer();
|
||||
const exifData = exif ? exifReader(exif) : undefined;
|
||||
|
||||
const photo: typeof photos.$inferInsert = {
|
||||
src: fileName,
|
||||
width: width ?? 10,
|
||||
height: height ?? 10,
|
||||
blur: blur,
|
||||
camera: exifData?.Image?.Model ?? null,
|
||||
|
||||
exposureBiasValue: exifData?.Photo?.ExposureBiasValue ?? null,
|
||||
fNumber: exifData?.Photo?.FNumber ?? null,
|
||||
isoSpeedRatings: exifData?.Photo?.ISOSpeedRatings ?? null,
|
||||
focalLength: exifData?.Photo?.FocalLength ?? null,
|
||||
takenAt: exifData?.Photo?.DateTimeOriginal ?? null,
|
||||
lensModel: exifData?.Photo?.LensModel ?? null,
|
||||
};
|
||||
|
||||
return photo;
|
||||
});
|
||||
|
||||
const images = await Promise.all(imageData);
|
||||
|
||||
await db.insert(photos).values(images);
|
||||
|
||||
return newPhotos;
|
||||
}
|
||||
133
src/server/api/trpc.ts
Normal file
133
src/server/api/trpc.ts
Normal file
@@ -0,0 +1,133 @@
|
||||
/**
|
||||
* 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 { TRPCError, initTRPC } from "@trpc/server";
|
||||
import superjson from "superjson";
|
||||
import { ZodError } from "zod";
|
||||
|
||||
import { auth } 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.
|
||||
*
|
||||
* This helper generates the "internals" for a tRPC context. The API handler and RSC clients each
|
||||
* wrap this and provides the required context.
|
||||
*
|
||||
* @see https://trpc.io/docs/server/context
|
||||
*/
|
||||
export const createTRPCContext = async (opts: { headers: Headers }) => {
|
||||
const session = await auth();
|
||||
|
||||
return {
|
||||
db,
|
||||
session,
|
||||
...opts,
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* 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,
|
||||
},
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
/**
|
||||
* Create a server-side caller.
|
||||
*
|
||||
* @see https://trpc.io/docs/server/server-side-calls
|
||||
*/
|
||||
export const createCallerFactory = t.createCallerFactory;
|
||||
|
||||
/**
|
||||
* 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;
|
||||
|
||||
/**
|
||||
* Middleware for timing procedure execution and adding an artificial delay in development.
|
||||
*
|
||||
* You can remove this if you don't like it, but it can help catch unwanted waterfalls by simulating
|
||||
* network latency that would occur in production but not in local development.
|
||||
*/
|
||||
const timingMiddleware = t.middleware(async ({ next, path }) => {
|
||||
const start = Date.now();
|
||||
|
||||
if (t._config.isDev) {
|
||||
// artificial delay in dev
|
||||
const waitMs = Math.floor(Math.random() * 400) + 100;
|
||||
await new Promise((resolve) => setTimeout(resolve, waitMs));
|
||||
}
|
||||
|
||||
const result = await next();
|
||||
|
||||
const end = Date.now();
|
||||
console.log(`[TRPC] ${path} took ${end - start}ms to execute`);
|
||||
|
||||
return result;
|
||||
});
|
||||
|
||||
/**
|
||||
* 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.use(timingMiddleware);
|
||||
|
||||
/**
|
||||
* 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(timingMiddleware)
|
||||
.use(({ 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 },
|
||||
},
|
||||
});
|
||||
});
|
||||
53
src/server/auth/config.ts
Normal file
53
src/server/auth/config.ts
Normal file
@@ -0,0 +1,53 @@
|
||||
import { env } from "@/env";
|
||||
import { getBaseUrl } from "@/lib/base-url";
|
||||
import type { DefaultSession, NextAuthConfig } from "next-auth";
|
||||
|
||||
/**
|
||||
* 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: {
|
||||
id: string;
|
||||
// ...other properties
|
||||
// role: UserRole;
|
||||
} & DefaultSession["user"];
|
||||
}
|
||||
|
||||
// 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 authConfig = {
|
||||
providers: [
|
||||
{
|
||||
id: "authelia",
|
||||
name: "Authelia",
|
||||
type: "oidc",
|
||||
issuer: "https://auth.home.joemonk.co.uk",
|
||||
clientId: env.AUTH_CLIENT_ID,
|
||||
clientSecret: env.AUTH_CLIENT_SECRET,
|
||||
},
|
||||
],
|
||||
trustHost: true,
|
||||
redirectProxyUrl: `${getBaseUrl()}/api/auth`,
|
||||
callbacks: {
|
||||
session: ({ session, user }) => ({
|
||||
...session,
|
||||
user: {
|
||||
...session.user,
|
||||
id: user.id,
|
||||
},
|
||||
}),
|
||||
},
|
||||
} satisfies NextAuthConfig;
|
||||
10
src/server/auth/index.ts
Normal file
10
src/server/auth/index.ts
Normal file
@@ -0,0 +1,10 @@
|
||||
import NextAuth from "next-auth";
|
||||
import { cache } from "react";
|
||||
|
||||
import { authConfig } from "./config";
|
||||
|
||||
const { auth: uncachedAuth, handlers, signIn, signOut } = NextAuth(authConfig);
|
||||
|
||||
const auth = cache(uncachedAuth);
|
||||
|
||||
export { auth, handlers, signIn, signOut };
|
||||
19
src/server/db/index.ts
Normal file
19
src/server/db/index.ts
Normal file
@@ -0,0 +1,19 @@
|
||||
import { type Client, createClient } from "@libsql/client";
|
||||
import { drizzle } from "drizzle-orm/libsql";
|
||||
|
||||
import { env } from "@/env";
|
||||
import * as schema from "./schema";
|
||||
|
||||
/**
|
||||
* Cache the database connection in development. This avoids creating a new connection on every HMR
|
||||
* update.
|
||||
*/
|
||||
const globalForDb = globalThis as unknown as {
|
||||
client: Client | undefined;
|
||||
};
|
||||
|
||||
export const client =
|
||||
globalForDb.client ?? createClient({ url: env.DATABASE_URL });
|
||||
if (env.NODE_ENV !== "production") globalForDb.client = client;
|
||||
|
||||
export const db = drizzle(client, { schema });
|
||||
20
src/server/db/schema.ts
Normal file
20
src/server/db/schema.ts
Normal file
@@ -0,0 +1,20 @@
|
||||
import { sqliteTable } from "drizzle-orm/sqlite-core";
|
||||
|
||||
export const photos = sqliteTable("photo", (d) => ({
|
||||
id: d.integer({ mode: "number" }).primaryKey({ autoIncrement: true }),
|
||||
|
||||
src: d.text({ length: 256 }).notNull().unique(),
|
||||
width: d.integer({ mode: "number" }).notNull(),
|
||||
height: d.integer({ mode: "number" }).notNull(),
|
||||
blur: d.blob({ mode: "buffer" }).notNull(),
|
||||
|
||||
camera: d.text({ length: 128 }),
|
||||
title: d.text({ length: 128 }),
|
||||
description: d.text({ length: 1024 }),
|
||||
exposureBiasValue: d.integer({ mode: "number" }),
|
||||
fNumber: d.real(),
|
||||
isoSpeedRatings: d.integer({ mode: "number" }),
|
||||
focalLength: d.integer({ mode: "number" }),
|
||||
takenAt: d.integer({ mode: "timestamp" }),
|
||||
lensModel: d.text({ length: 128 }),
|
||||
}));
|
||||
17
src/styles/globals.css
Normal file
17
src/styles/globals.css
Normal file
@@ -0,0 +1,17 @@
|
||||
@import "tailwindcss";
|
||||
@plugin "@tailwindcss/typography";
|
||||
|
||||
@plugin "daisyui" {
|
||||
themes: light --default, dark --prefersdark;
|
||||
}
|
||||
|
||||
@theme {
|
||||
--font-sans: var(--font-fira-sans), ui-sans-serif, system-ui, sans-serif,
|
||||
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
}
|
||||
|
||||
@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
|
||||
|
||||
@utility btn {
|
||||
@apply shadow-none bg-transparent;
|
||||
}
|
||||
@@ -1,60 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState } from "react";
|
||||
import superjson from "superjson";
|
||||
import { httpBatchLink } from "@trpc/client";
|
||||
import { createTRPCReact } from "@trpc/react-query";
|
||||
import { getCurrentUrl } from "@/lib/current-url";
|
||||
import { makeQueryClient } from "./query-client";
|
||||
|
||||
import { QueryClientProvider, type QueryClient } from "@tanstack/react-query";
|
||||
import type { appRouter } from "./routers/_app";
|
||||
|
||||
export const trpc = createTRPCReact<typeof appRouter>();
|
||||
|
||||
let clientQueryClientSingleton: QueryClient;
|
||||
|
||||
function getQueryClient(): QueryClient {
|
||||
if (typeof window === "undefined") {
|
||||
// Server: always make a new query client
|
||||
return makeQueryClient();
|
||||
}
|
||||
// Browser: use singleton pattern to keep the same query client
|
||||
return (clientQueryClientSingleton ??= makeQueryClient());
|
||||
}
|
||||
function getUrl(): string {
|
||||
const base = ((): string => {
|
||||
if (typeof window !== "undefined") return "";
|
||||
return getCurrentUrl();
|
||||
})();
|
||||
return `${base}/api/trpc`;
|
||||
}
|
||||
export function TRPCProvider(
|
||||
props: Readonly<{
|
||||
children: React.ReactNode;
|
||||
}>
|
||||
): React.JSX.Element {
|
||||
// NOTE: Avoid useState when initializing the query client if you don't
|
||||
// have a suspense boundary between this and the code that may
|
||||
// suspend because React will throw away the client on the initial
|
||||
// render if it suspends and there is no boundary
|
||||
const queryClient = getQueryClient();
|
||||
const [trpcClient] = useState(() =>
|
||||
trpc.createClient({
|
||||
links: [
|
||||
httpBatchLink({
|
||||
transformer: superjson,
|
||||
url: getUrl(),
|
||||
}),
|
||||
]
|
||||
})
|
||||
);
|
||||
|
||||
return (
|
||||
<trpc.Provider client={trpcClient} queryClient={queryClient}>
|
||||
<QueryClientProvider client={queryClient}>
|
||||
{props.children}
|
||||
</QueryClientProvider>
|
||||
</trpc.Provider>
|
||||
);
|
||||
}
|
||||
@@ -1,49 +0,0 @@
|
||||
import { cache } from 'react';
|
||||
import superjson from 'superjson';
|
||||
import { initTRPC, TRPCError } from '@trpc/server';
|
||||
import { auth } from '@/lib/auth';
|
||||
|
||||
interface Context {
|
||||
user?: {
|
||||
id?: string
|
||||
name?: string | null
|
||||
email?: string | null
|
||||
image?: string | null
|
||||
};
|
||||
}
|
||||
|
||||
export const createTRPCContext = cache(async (): Promise<Context> => {
|
||||
/**
|
||||
* @see: https://trpc.io/docs/server/context
|
||||
*/
|
||||
const session = await auth();
|
||||
return { user: session?.user };
|
||||
});
|
||||
|
||||
// Avoid exporting the entire t-object
|
||||
// since it's not very descriptive.
|
||||
// For instance, the use of a t variable
|
||||
// is common in i18n libraries.
|
||||
const t = initTRPC.context<Context>().create({
|
||||
/**
|
||||
* @see https://trpc.io/docs/server/data-transformers
|
||||
*/
|
||||
transformer: superjson,
|
||||
});
|
||||
|
||||
const authMiddleware = t.middleware(({ ctx, next }) => {
|
||||
if (ctx.user?.name !== 'Joe') {
|
||||
throw new TRPCError({ code: 'UNAUTHORIZED' });
|
||||
}
|
||||
return next({
|
||||
ctx: {
|
||||
user: ctx.user,
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
// Base router and procedure helpers
|
||||
export const createTRPCRouter = t.router;
|
||||
export const createCallerFactory = t.createCallerFactory;
|
||||
export const publicProcedure = t.procedure;
|
||||
export const privateProcedure = t.procedure.use(authMiddleware);
|
||||
@@ -1,27 +1,25 @@
|
||||
import {
|
||||
defaultShouldDehydrateQuery,
|
||||
QueryClient,
|
||||
} from '@tanstack/react-query';
|
||||
import { serialize, deserialize } from 'superjson';
|
||||
QueryClient,
|
||||
defaultShouldDehydrateQuery,
|
||||
} from "@tanstack/react-query";
|
||||
import SuperJSON from "superjson";
|
||||
|
||||
export function makeQueryClient(): QueryClient {
|
||||
return new QueryClient({
|
||||
defaultOptions: {
|
||||
queries: {
|
||||
refetchOnMount: false,
|
||||
refetchOnWindowFocus: false,
|
||||
refetchOnReconnect: false,
|
||||
staleTime: 30 * 1000,
|
||||
},
|
||||
dehydrate: {
|
||||
serializeData: serialize,
|
||||
shouldDehydrateQuery: (query) =>
|
||||
defaultShouldDehydrateQuery(query) ||
|
||||
query.state.status === 'pending',
|
||||
},
|
||||
hydrate: {
|
||||
deserializeData: deserialize,
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
export const createQueryClient = () =>
|
||||
new QueryClient({
|
||||
defaultOptions: {
|
||||
queries: {
|
||||
// With SSR, we usually want to set some default staleTime
|
||||
// above 0 to avoid refetching immediately on the client
|
||||
staleTime: 30 * 1000,
|
||||
},
|
||||
dehydrate: {
|
||||
serializeData: SuperJSON.serialize,
|
||||
shouldDehydrateQuery: (query) =>
|
||||
defaultShouldDehydrateQuery(query) ||
|
||||
query.state.status === "pending",
|
||||
},
|
||||
hydrate: {
|
||||
deserializeData: SuperJSON.deserialize,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
74
src/trpc/react.tsx
Normal file
74
src/trpc/react.tsx
Normal file
@@ -0,0 +1,74 @@
|
||||
"use client";
|
||||
|
||||
import { type QueryClient, QueryClientProvider } from "@tanstack/react-query";
|
||||
import { httpBatchStreamLink, loggerLink } from "@trpc/client";
|
||||
import { createTRPCReact } from "@trpc/react-query";
|
||||
import type { inferRouterInputs, inferRouterOutputs } from "@trpc/server";
|
||||
import { useState } from "react";
|
||||
import SuperJSON from "superjson";
|
||||
|
||||
import { env } from "@/env";
|
||||
import { getBaseUrl } from "@/lib/base-url";
|
||||
import type { AppRouter } from "@/server/api/root";
|
||||
import { createQueryClient } from "./query-client";
|
||||
|
||||
let clientQueryClientSingleton: QueryClient | undefined = undefined;
|
||||
const getQueryClient = () => {
|
||||
if (typeof window === "undefined") {
|
||||
// Server: always make a new query client
|
||||
return createQueryClient();
|
||||
}
|
||||
// Browser: use singleton pattern to keep the same query client
|
||||
clientQueryClientSingleton ??= createQueryClient();
|
||||
|
||||
return clientQueryClientSingleton;
|
||||
};
|
||||
|
||||
export const api = createTRPCReact<AppRouter>();
|
||||
|
||||
/**
|
||||
* 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>;
|
||||
|
||||
export function TRPCReactProvider(props: { children: React.ReactNode }) {
|
||||
const queryClient = getQueryClient();
|
||||
|
||||
const [trpcClient] = useState(() =>
|
||||
api.createClient({
|
||||
links: [
|
||||
loggerLink({
|
||||
enabled: (op) =>
|
||||
env.NODE_ENV === "development" ||
|
||||
(op.direction === "down" && op.result instanceof Error),
|
||||
}),
|
||||
httpBatchStreamLink({
|
||||
transformer: SuperJSON,
|
||||
url: `${getBaseUrl()}/api/trpc`,
|
||||
headers: () => {
|
||||
const headers = new Headers();
|
||||
headers.set("x-trpc-source", "nextjs-react");
|
||||
return headers;
|
||||
},
|
||||
}),
|
||||
],
|
||||
}),
|
||||
);
|
||||
|
||||
return (
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<api.Provider client={trpcClient} queryClient={queryClient}>
|
||||
{props.children}
|
||||
</api.Provider>
|
||||
</QueryClientProvider>
|
||||
);
|
||||
}
|
||||
@@ -1,11 +0,0 @@
|
||||
// eslint-disable-next-line import/named
|
||||
import { inferRouterInputs, inferRouterOutputs } from '@trpc/server';
|
||||
import { createTRPCRouter } from '../init';
|
||||
import { photosRouter } from './photos';
|
||||
|
||||
export const appRouter = createTRPCRouter({
|
||||
photos: photosRouter,
|
||||
});
|
||||
|
||||
export type RouterInput = inferRouterInputs<typeof appRouter>;
|
||||
export type RouterOutput = inferRouterOutputs<typeof appRouter>;
|
||||
@@ -1,35 +0,0 @@
|
||||
import { z } from 'zod';
|
||||
import { createTRPCRouter, privateProcedure, publicProcedure } from '../init';
|
||||
|
||||
import { list } from './photos/list';
|
||||
import { update } from './photos/update';
|
||||
|
||||
export const photosRouter = createTRPCRouter({
|
||||
list: publicProcedure
|
||||
.input(
|
||||
z.object({
|
||||
limit: z.number().nonnegative().default(1),
|
||||
cursor: z.number().nonnegative().default(0),
|
||||
})
|
||||
.optional()
|
||||
.default({}),
|
||||
)
|
||||
.query(async ({ input }) => {
|
||||
const ret = await list({
|
||||
limit: input.limit + 1,
|
||||
cursor: input.cursor,
|
||||
});
|
||||
|
||||
let next;
|
||||
if (ret.length > input.limit) {
|
||||
next = input.limit;
|
||||
ret.pop();
|
||||
}
|
||||
|
||||
return {
|
||||
data: ret,
|
||||
next
|
||||
};
|
||||
}),
|
||||
update: privateProcedure.query(update)
|
||||
});
|
||||
@@ -1,54 +0,0 @@
|
||||
import { shake } from "radash";
|
||||
import db from "@/db/db";
|
||||
import { photosTable } from "@/db/schema/photo";
|
||||
|
||||
export type ImageData = {
|
||||
width: number,
|
||||
height: number,
|
||||
blur: `data:image/${string}`,
|
||||
src: string,
|
||||
camera?: string,
|
||||
exif: Partial<{
|
||||
ExposureBiasValue: number,
|
||||
FNumber: number,
|
||||
ISOSpeedRatings: number,
|
||||
FocalLength: number,
|
||||
DateTimeOriginal: Date,
|
||||
LensModel: string
|
||||
}>,
|
||||
title?: string,
|
||||
description?: string
|
||||
}
|
||||
|
||||
export type ListOptions = {
|
||||
cursor: number,
|
||||
limit: number
|
||||
}
|
||||
|
||||
export async function list(options: ListOptions): Promise<ImageData[]> {
|
||||
const currentSources = await db.select().from(photosTable)
|
||||
.limit(options.limit)
|
||||
.offset(options.cursor);
|
||||
|
||||
const images = currentSources.map((photo) => {
|
||||
return {
|
||||
width: photo.width,
|
||||
height: photo.height,
|
||||
blur: photo.blur as `data:image/${string}`,
|
||||
src: photo.src,
|
||||
camera: photo.camera ?? undefined,
|
||||
exif: shake({
|
||||
ExposureBiasValue: photo.exposureBiasValue,
|
||||
FNumber: photo.fNumber,
|
||||
ISOSpeedRatings: photo.isoSpeedRatings,
|
||||
FocalLength: photo.focalLength,
|
||||
DateTimeOriginal: photo.dateTimeOriginal,
|
||||
LensModel: photo.lensModel
|
||||
}),
|
||||
title: photo.title ?? undefined,
|
||||
description: photo.description ?? undefined
|
||||
};
|
||||
});
|
||||
|
||||
return images;
|
||||
}
|
||||
@@ -1,82 +0,0 @@
|
||||
import { S3Client, ListObjectsV2Command, GetObjectCommand } from "@aws-sdk/client-s3";
|
||||
import exifReader from "exif-reader";
|
||||
import { diff, sift } from "radash";
|
||||
import sharp from "sharp";
|
||||
|
||||
import db from "@/db/db";
|
||||
import { photosTable } from "@/db/schema/photo";
|
||||
import { TRPCError } from "@trpc/server";
|
||||
|
||||
export async function update(): Promise<string[]> {
|
||||
const photos = await db.select().from(photosTable);
|
||||
const currentSources = photos.map((photo) => photo.src);
|
||||
|
||||
const s3Client = new S3Client({
|
||||
region: "auto",
|
||||
endpoint: `https://fly.storage.tigris.dev`,
|
||||
});
|
||||
|
||||
const listObjCmd = new ListObjectsV2Command({
|
||||
Bucket: "joemonk-photos"
|
||||
});
|
||||
|
||||
const s3Res = await s3Client.send(listObjCmd);
|
||||
|
||||
if (!s3Res.Contents) {
|
||||
throw new TRPCError({
|
||||
code: "GATEWAY_TIMEOUT",
|
||||
message: "Could not get contents from Tigris"
|
||||
});
|
||||
}
|
||||
const s3Photos = sift(s3Res.Contents.map((obj) => {
|
||||
if (!obj.Key?.endsWith('/')) {
|
||||
return `https://fly.storage.tigris.dev/joemonk-photos/${obj.Key}`;
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
}));
|
||||
|
||||
const newPhotos = diff(s3Photos, currentSources);
|
||||
|
||||
if (newPhotos.length === 0) {
|
||||
return [];
|
||||
}
|
||||
|
||||
const imageData = newPhotos.map(async (fileName: string) => {
|
||||
const getImageCmd = new GetObjectCommand({
|
||||
Bucket: "joemonk-photos",
|
||||
Key: fileName.replace("https://fly.storage.tigris.dev/joemonk-photos/", "")
|
||||
});
|
||||
const imgRes = await s3Client.send(getImageCmd);
|
||||
const image = await imgRes.Body?.transformToByteArray();
|
||||
|
||||
const { width, height, exif } = await sharp(image).metadata();
|
||||
const blur = await sharp(image)
|
||||
.resize({ width: 12, height: 12, fit: 'inside' })
|
||||
.toBuffer();
|
||||
const exifData = exif ? exifReader(exif) : undefined;
|
||||
|
||||
const photo: typeof photosTable.$inferInsert = {
|
||||
src: fileName,
|
||||
width: width ?? 10,
|
||||
height: height ?? 10,
|
||||
blur: `data:image/jpeg;base64,${blur.toString('base64')}` as `data:image/${string}`,
|
||||
camera: exifData?.Image?.Model ?? null,
|
||||
|
||||
exposureBiasValue: exifData?.Photo?.ExposureBiasValue ?? null,
|
||||
fNumber: exifData?.Photo?.FNumber ?? null,
|
||||
isoSpeedRatings: exifData?.Photo?.ISOSpeedRatings ?? null,
|
||||
focalLength: exifData?.Photo?.FocalLength ?? null,
|
||||
dateTimeOriginal: exifData?.Photo?.DateTimeOriginal ?? null,
|
||||
lensModel: exifData?.Photo?.LensModel ?? null,
|
||||
};
|
||||
|
||||
return photo;
|
||||
});
|
||||
|
||||
const images = await Promise.all(imageData);
|
||||
|
||||
await db.insert(photosTable).values(images);
|
||||
|
||||
return newPhotos;
|
||||
};
|
||||
@@ -1,14 +1,30 @@
|
||||
import 'server-only'; // <-- ensure this file cannot be imported from the client
|
||||
import { createHydrationHelpers } from '@trpc/react-query/rsc';
|
||||
import { cache } from 'react';
|
||||
import { createCallerFactory, createTRPCContext } from './init';
|
||||
import { makeQueryClient } from './query-client';
|
||||
import { appRouter } from './routers/_app';
|
||||
// IMPORTANT: Create a stable getter for the query client that
|
||||
// will return the same client during the same request.
|
||||
export const getQueryClient = cache(makeQueryClient);
|
||||
const caller = createCallerFactory(appRouter)(createTRPCContext);
|
||||
export const { trpc, HydrateClient } = createHydrationHelpers<typeof appRouter>(
|
||||
caller,
|
||||
getQueryClient,
|
||||
);
|
||||
import "server-only";
|
||||
|
||||
import { createHydrationHelpers } from "@trpc/react-query/rsc";
|
||||
import { headers } from "next/headers";
|
||||
import { cache } from "react";
|
||||
|
||||
import { type AppRouter, createCaller } from "@/server/api/root";
|
||||
import { createTRPCContext } from "@/server/api/trpc";
|
||||
import { createQueryClient } from "./query-client";
|
||||
|
||||
/**
|
||||
* This wraps the `createTRPCContext` helper and provides the required context for the tRPC API when
|
||||
* handling a tRPC call from a React Server Component.
|
||||
*/
|
||||
const createContext = cache(async () => {
|
||||
const heads = new Headers(await headers());
|
||||
heads.set("x-trpc-source", "rsc");
|
||||
|
||||
return createTRPCContext({
|
||||
headers: heads,
|
||||
});
|
||||
});
|
||||
|
||||
const getQueryClient = cache(createQueryClient);
|
||||
const caller = createCaller(createContext);
|
||||
|
||||
export const { trpc: api, HydrateClient } = createHydrationHelpers<AppRouter>(
|
||||
caller,
|
||||
getQueryClient,
|
||||
);
|
||||
|
||||
@@ -1,56 +0,0 @@
|
||||
import type { Config } from "tailwindcss";
|
||||
|
||||
const config: Config = {
|
||||
darkMode: 'selector',
|
||||
content: [
|
||||
"./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
|
||||
"./src/components/**/*.{js,ts,jsx,tsx,mdx}",
|
||||
"./src/app/**/*.{js,ts,jsx,tsx,mdx}",
|
||||
"./src/*.{js,ts,jsx,tsx,mdx}",
|
||||
],
|
||||
theme: {
|
||||
extend: {
|
||||
fontFamily: {
|
||||
sans: ['var(--font-inter)'],
|
||||
mono: ['var(--font-roboto-mono)'],
|
||||
},
|
||||
colors: {
|
||||
// Nicked from the vs code version of the theme https://github.com/dracula/visual-studio-code/blob/master/src/dracula.yml
|
||||
dracula: {
|
||||
'bg-lightest': '#F8F8F2',
|
||||
'bg-lighter': '#424450',
|
||||
'bg-light': '#343746',
|
||||
'bg': '#282A36',
|
||||
'bg-dark': '#21222C',
|
||||
'bg-darker': '#191A21',
|
||||
'selection': '#44475A',
|
||||
'comment': '#6272A4',
|
||||
'cyan': '#8BE9FD',
|
||||
'green': '#50FA7B',
|
||||
'orange': '#FFB86C',
|
||||
'pink': '#FF79C6',
|
||||
'purple': '#BD93F9',
|
||||
'red': '#FF5555',
|
||||
'yellow': '#F1FA8C',
|
||||
}
|
||||
},
|
||||
typography: () => ({
|
||||
DEFAULT: {
|
||||
css: {
|
||||
h1: {
|
||||
"margin-bottom": "0.4444em", // Default is (32/36)em, this is (16/36)em
|
||||
},
|
||||
h2: {
|
||||
"margin-bottom": "0.4em", // Default is (16/20)em, this is (12/20)em
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
plugins: [
|
||||
require('@tailwindcss/typography'),
|
||||
require('tailwind-scrollbar')
|
||||
],
|
||||
};
|
||||
export default config;
|
||||
@@ -1,42 +1,42 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ESNext",
|
||||
"lib": [
|
||||
"dom",
|
||||
"dom.iterable",
|
||||
"esnext"
|
||||
],
|
||||
"emitDecoratorMetadata": true,
|
||||
"experimentalDecorators": true,
|
||||
"allowJs": true,
|
||||
"skipLibCheck": true,
|
||||
"strict": true,
|
||||
"noEmit": true,
|
||||
"esModuleInterop": true,
|
||||
"module": "esnext",
|
||||
"moduleResolution": "bundler",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"jsx": "preserve",
|
||||
"incremental": true,
|
||||
"plugins": [
|
||||
{
|
||||
"name": "next"
|
||||
}
|
||||
],
|
||||
"paths": {
|
||||
"@/*": [
|
||||
"./src/*"
|
||||
]
|
||||
}
|
||||
},
|
||||
"include": [
|
||||
"next-env.d.ts",
|
||||
"**/*.ts",
|
||||
"**/*.tsx",
|
||||
".next/types/**/*.ts"
|
||||
],
|
||||
"exclude": [
|
||||
"node_modules"
|
||||
]
|
||||
}
|
||||
"compilerOptions": {
|
||||
/* Base Options: */
|
||||
"esModuleInterop": true,
|
||||
"skipLibCheck": true,
|
||||
"target": "es2022",
|
||||
"allowJs": true,
|
||||
"resolveJsonModule": true,
|
||||
"moduleDetection": "force",
|
||||
"isolatedModules": true,
|
||||
"verbatimModuleSyntax": true,
|
||||
|
||||
/* Strictness */
|
||||
"strict": true,
|
||||
"noUncheckedIndexedAccess": true,
|
||||
"checkJs": true,
|
||||
|
||||
/* Bundled projects */
|
||||
"lib": ["dom", "dom.iterable", "ES2022"],
|
||||
"noEmit": true,
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "Bundler",
|
||||
"jsx": "preserve",
|
||||
"plugins": [{ "name": "next" }],
|
||||
"incremental": true,
|
||||
|
||||
/* Path Aliases */
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@/*": ["./src/*"]
|
||||
}
|
||||
},
|
||||
"include": [
|
||||
"next-env.d.ts",
|
||||
"**/*.ts",
|
||||
"**/*.tsx",
|
||||
"**/*.cjs",
|
||||
"**/*.js",
|
||||
".next/types/**/*.ts"
|
||||
],
|
||||
"exclude": ["node_modules"]
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user