Refactor to app/ directory

.env.default

@@ -0,0 +1,35 @@
+DATABASE_URL=postgresql://user:password@localhost:5432/dbname
+
+# Optional if you use Vercel (defaults to VERCEL_URL).
+# Necessary in development unless you use the vercel CLI (`vc dev`)
+DRIFT_URL=http://localhost:3000
+
+# Optional: The first user becomes an admin. Defaults to false
+ENABLE_ADMIN=false
+
+# Required: Next auth secret is a required valid JWT secret. You can generate one with `openssl rand -hex 32`
+NEXTAUTH_SECRET=7f8b8b5c5e5f5e5f5e5f5e5f5e5f5e5f5e5f5e5f5e5f5e5f5e5f5e5f5e5f5f5
+
+# Required: but unnecessary if you use a supported host like Vercel
+NEXTAUTH_URL=http://localhost:3000
+
+# Optional: for locking your instance
+REGISTRATION_PASSWORD=
+
+# Optional: for if you want GitHub oauth. Currently incompatible with the registration password
+GITHUB_CLIENT_ID=
+GITHUB_CLIENT_SECRET=
+
+# Optional: if you want Keycloak oauth. Currently incompatible with the registration password
+KEYCLOAK_ID=
+KEYCLOAK_SECRET=
+KEYCLOAK_ISSUER=  # keycloak path including realm
+KEYCLOAK_NAME=
+
+# Optional: if you want to support credential auth (username/password, supports registration password)
+# Defaults to true
+CREDENTIAL_AUTH=true
+
+# Optional:
+WELCOME_CONTENT=
+WELCOME_TITLE=

.eslintrc.json

@@ -0,0 +1,14 @@
+{
+	"extends": ["next/core-web-vitals", "plugin:@typescript-eslint/recommended"],
+	"ignorePatterns": [
+		"node_modules/",
+		"__tests__/",
+		"coverage/",
+		".next/",
+		"public"
+	],
+	"rules": {
+		"@typescript-eslint/no-unused-vars": "error",
+		"@typescript-eslint/no-explicit-any": "error"
+	}
+}

.gitignore

@@ -1,2 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+analyze
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# production env
+.env
+
+# vercel
 .vercel
-drift.sqlite
+
+# typescript
+*.tsbuildinfo

server/.prettierrc → .prettierrc

@@ -3,5 +3,6 @@
   "trailingComma": "none",
   "singleQuote": false,
   "printWidth": 80,
-  "useTabs": true
+  "useTabs": true,
+  "plugins": ["prettier-plugin-tailwindcss"]
 }

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+  "typescript.tsdk": "node_modules/.pnpm/[email protected]/node_modules/typescript/lib",
+  "typescript.enablePromptUseWorkspaceTsdk": true,
+  "dotenv.enableAutocloaking": false
+}

README.md

@@ -1,13 +1,19 @@
-# <img src="client/public/assets/logo.png" height="32px" alt="" /> Drift
+# <img src="src/public/assets/logo.png" height="32px" alt="" /> Drift
 
-Drift is a self-hostable Gist clone. It's also a major work-in-progress, but is completely functional.
+> **Note:** This branch is where all work is being done to refactor to the Next.js 13 app directory and React Server Components.
 
-You can try a demo at https://drift.maxleiter.com. The demo is built on master but has no database, so files and accounts can be wiped at any time.
+Drift is a self-hostable Gist clone. It's in beta, but is completely functional.
+
+You can try a demo at https://drift.lol. The demo is built on main but has no database, so files and accounts can be wiped at any time.
+
+If you want to contribute, need support, or want to stay updated, you can join the IRC channel at #drift on irc.libera.chat or [reach me on twitter](https://twitter.com/Max_Leiter). If you don't have an IRC client yet, you can use a webclient [here](https://demo.thelounge.chat/#/connect?join=%23drift&nick=drift-user&realname=Drift%20User).
+
+Drift is built with Next.js 13, React Server Components, [shadcn/ui](https://github.com/shadcn/ui), and [Prisma](https://prisma.io/).
 
-If you want to contribute, need support, or want to stay updated, you can join the IRC channel at #drift on irc.libera.chat or [reach me on twitter](https://twitter.com/Max_Leiter). If you don't have an IRC client yet, you can use a webclient [here](https://demo.thelounge.chat/#/connect?join=%23drift&nick=drift-user&realname=Drift%20User). 
 <hr />
 
 **Contents:**
+
 - [Setup](#setup)
   - [Development](#development)
   - [Production](#production)
@@ -20,75 +26,122 @@ If you want to contribute, need support, or want to stay updated, you can join t
 
 ### Development
 
-In both `server` and `client`, run `yarn` (if you need yarn, you can download it [here](https://yarnpkg.com/).)
-You can run `yarn dev` in either / both folders to start the server and client with file watching / live reloading.
+In the root directory, run `pnpm i`. If you need `pnpm`, you can download it [here](https://pnpm.io/installation).
+You can run `pnpm dev` in `client` for file watching and live reloading.
 
-To migrate the sqlite database in development, you can use `yarn migrate` to see a list of options.
+To work with [prisma](prisma.io/), you can use `pnpm prisma` or `pnpm exec prisma` to interact with the database.
 
 ### Production
 
-`yarn build` in both `client/` and `server/` will produce production code for the client and server respectively. 
-
-If you're deploying the front-end to something like Vercel, you'll need to set the root folder to `client/`.
-
-In production the sqlite database will be automatically migrated to the latest version.
+`pnpm build` will produce production code. `pnpm start` will start the Next.js server.
 
 ### Environment Variables
 
 You can change these to your liking.
 
-`client/.env`:
-
-- `API_URL`: defaults to localhost:3001, but allows you to host the front-end separately from the backend on a service like Vercel or Netlify
-- `SECRET_KEY`: a secret key used for validating API requests that is never exposed to the browser
-
-`server/.env`:
+`.env`:
 
-- `PORT`: the default port to start the server on (3000 by default)
-- `NODE_ENV`: defaults to development, can be `production`
-- `JWT_SECRET`: a secure token for JWT tokens. You can generate one [here](https://www.grc.com/passwords.htm).
-- `MEMORY_DB`: if `true`, a sqlite database will not be created and changes will only exist in memory. Mainly for the demo.
-- `REGISTRATION_PASSWORD`: if `true`, the user will be required to provide this password to sign-up, in addition to their username and account password. If it's not set, no additional password will be required.
-- `SECRET_KEY`: the same secret key as the client
+- `DRIFT_URL`: the URL of the drift instance.
+- `DATABASE_URL`: the URL to connect to your postgres instance. For example, `postgresql://user:password@localhost:5432/drift`.
 - `WELCOME_CONTENT`: a markdown string that's rendered on the home page
 - `WELCOME_TITLE`: the file title for the post on the homepage.
 - `ENABLE_ADMIN`: the first account created is an administrator account
-- `DRIFT_HOME`: defaults to ~/.drift, the directory for storing the database and eventually images
+- `REGISTRATION_PASSWORD`: the password required to register an account. If not set, no password is required.
+- `NODE_ENV`: defaults to development, can be `production`
+
+#### Auth environment variables
+
+**Note:** Only credential auth currently supports the registration password, so if you want to secure registration, you must use only credential auth.
+
+- `GITHUB_CLIENT_ID`: the client ID for GitHub OAuth.
+- `GITHUB_CLIENT_SECRET`: the client secret for GitHub OAuth.
+- `NEXTAUTH_URL`: the URL of the drift instance. Not required if hosting on Vercel.
+- `CREDENTIAL_AUTH`: whether to allow username/password authentication. Defaults to `true`.
 
 ## Running with pm2
 
 It's easy to start Drift using [pm2](https://pm2.keymetrics.io/).
-First, add `.env` files to `client/` and `server/` with the values you want (see the above section for possible values).
-Then, use the following commands to start the client and server:
+First, add the `.env` file with your values (see the above section for the required options).
 
-- `cd server && yarn build && pm2 start yarn --name drift-server --interpreter bash -- start`
-- `cd ..`
-- `cd client && yarn build && pm2 start yarn --name drift-client --interpreter bash -- start`
+Then, use the following command to start the server:
 
-You now use `pm2 ls` to see their statuses. Refer to pm2's docs or `pm2 help` for more information.
+- `pnpm build && pm2 start pnpm --name drift --interpreter bash -- start`
 
-## Running with Docker
+Refer to pm2's docs or `pm2 help` for more information.
 
-The client and server each have Dockerfiles ([client](https://github.com/MaxLeiter/Drift/blob/main/client/Dockerfile), [server](https://github.com/MaxLeiter/Drift/blob/main/server/Dockerfile)) you can use with a docker-compose; an example compose [is provided in the repository](https://github.com/MaxLeiter/Drift/blob/main/docker-compose.yml). It's recommended you pair running them with nginx or another reverse proxy. Also review the environment variables above and configure them to your liking.
+## Running with Docker
 
+## Running with systemd
+
+_**NOTE:** We assume that you know how to enable user lingering if you don't want to use the systemd unit as root_
+
+- As root
+  - Place the following systemd unit in ___/etc/systemd/system___ and name it _drift.service_
+  - Replace any occurrence of ___`$USERNAME`___ with the shell username of the user that will be running the Drift server
+
+  ```
+  ##########
+  # Drift Systemd Unit (Global)
+  ##########
+  [Unit]
+  Description=Drift Server (Global)
+  After=default.target
+
+  [Service]
+  User=$USERNAME
+  Group=$USERNAME
+  Type=simple
+  WorkingDirectory=/home/$USERNAME/Drift
+  ExecStart=/usr/bin/pnpm start
+  Restart=on-failure
+
+  [Install]
+  WantedBy=default.target
+  ```
+- As a nomal user
+  - Place the following systemd unit inside ___/home/user/.config/systemd/user___ and name it _drift_user.service_
+  - Replace any occurrence of ___`$USERNAME`___ with the shell username of the user that will be running the Drift server
+
+  ```
+  ##########
+  # Drift Systemd Unit (User)
+  ##########
+  [Unit]
+  Description=Drift Server (User)
+  After=default.target
+
+  [Service]
+  Type=simple
+  WorkingDirectory=/home/$USERNAME/Drift
+  ExecStart=/usr/bin/pnpm start
+  Restart=on-failure
+
+  [Install]
+  WantedBy=default.target
+  ```
+
 ## Current status
 
-Drift is a major work in progress. Below is a (rough) list of completed and envisioned features. If you want to help address any of them, please let me know regardless of your experience and I'll be happy to assist.
+Drift is a work in progress. Below is a (rough) list of completed and envisioned features. If you want to help address any of them, please let me know regardless of your experience and I'll be happy to assist.
 
-- [x] creating and sharing private, public, unlisted posts
-  - [x] syntax highlighting (detected by file extension)
-  - [x] multiple files per post
-  - [x] uploading files via drag-and-drop
+- [x] Next.js 13 `app` directory
+- [x] creating and sharing private, public, password-protected, and unlisted posts
+  - [x] syntax highlighting
+  - [x] expiring posts
 - [x] responsive UI
 - [x] user auth
   - [ ] SSO via HTTP header (Issue: [#11](https://github.com/MaxLeiter/Drift/issues/11))
+  - [x] SSO via GitHub OAuth
 - [x] downloading files (individually and entire posts)
 - [x] password protected posts
-- [x] sqlite database
-- [ ] administrator account / settings
+- [x] postgres database
+- [x] administrator account / settings
 - [x] docker-compose (PRs: [#13](https://github.com/MaxLeiter/Drift/pull/13), [#75](https://github.com/MaxLeiter/Drift/pull/75))
   - [ ] publish docker builds
 - [ ] user settings
 - [ ] works enough with JavaScript disabled
-- [x] documentation
+- [ ] in-depth documentation
 - [x] customizable homepage, so the demo can exist as-is but other instances can be built from the same source. Environment variable for the file contents?
+- [ ] fleshed out API
+- [ ] Swappable database backends
+- [ ] More OAuth providers