/new page responsiveness

Bumps [word-wrap](https://github.com/jonschlinkert/word-wrap) from 1.2.3 to 1.2.4.
- [Release notes](https://github.com/jonschlinkert/word-wrap/releases)
- [Commits](https://github.com/jonschlinkert/word-wrap/compare/1.2.3...1.2.4)

---
updated-dependencies:
- dependency-name: word-wrap
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

.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"
+	}
+}

.github/FUNDING.yml

@@ -0,0 +1 @@
+github: MaxLeiter

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,38 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: ''
+labels: bug
+assignees: ''
+
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**Desktop (please complete the following information):**
+ - OS: [e.g. iOS]
+ - Browser [e.g. chrome, safari]
+ - Version [e.g. 22]
+
+**Smartphone (please complete the following information):**
+ - Device: [e.g. iPhone6]
+ - OS: [e.g. iOS8.1]
+ - Browser [e.g. stock browser, safari]
+ - Version [e.g. 22]
+
+**Additional context**
+Add any other context about the problem here.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,10 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: ''
+labels: Feature request
+assignees: ''
+
+---
+
+

.github/workflows/server-CI.yaml

@@ -0,0 +1,26 @@
+name: Server CI
+
+on:
+  push:
+    paths:
+    - 'server/**'
+    - '.github/workflows/**'
+
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: server
+
+    steps:
+      - uses: actions/checkout@v3
+      - name: Setup node
+        uses: actions/setup-node@v3
+        with:
+          node-version: '16'
+      - name: Install deps
+        run: yarn
+      - name: Run tests
+        run: yarn test

.gitignore

@@ -4,6 +4,7 @@
 /node_modules
 /.pnp
 .pnp.js
+analyze
 
 # testing
 /coverage

.prettierrc

@@ -0,0 +1,8 @@
+{
+  "semi": false,
+  "trailingComma": "none",
+  "singleQuote": false,
+  "printWidth": 80,
+  "useTabs": true,
+  "plugins": ["prettier-plugin-tailwindcss"]
+}

.vscode/settings.json

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

CONTRIBUTING.md

@@ -0,0 +1,16 @@
+## Contributing
+
+Thank you for your interest in Drift!
+
+### I want to report a bug
+
+Look at the open and closed issues to see if this was not already discussed before. If you can't see any, feel free to open a new issue.
+If you think you discovered a security vulnerability, do not open a public issue on GitHub. Please email maxwell.leiter@gmail.com in the interest of responsible disclosure.
+
+### I want to contribute to the code
+
+Make sure to discuss your ideas with the community in an issue or on the IRC channel.
+Take a look at the open issues labeled as help wanted or good first issue if you want to help without having a specific idea in mind.
+Make sure that your PRs do not contain unnecessary commits or merge commits. Squash commits whenever possible.
+Rebase (instead of merge) outdated PRs on the master branch.
+Give extra care to your commit messages. Use the imperative present tense and follow Tim Pope's guidelines.

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Max Leiter
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,29 +1,147 @@
-# 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 (almost, no database yet) 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.
 
-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). 
+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/).
+
+<hr />
+
+**Contents:**
+
+- [Setup](#setup)
+  - [Development](#development)
+  - [Production](#production)
+- [Environment variables](#environment-variables)
+- [Running with pm2](#running-with-pm2)
+- [Running with Docker](#running-with-docker)
+- [Current status](#current-status)
+
+## Setup
+
+### Development
+
+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 work with [prisma](prisma.io/), you can use `pnpm prisma` or `pnpm exec prisma` to interact with the database.
+
+### Production
+
+`pnpm build` will produce production code. `pnpm start` will start the Next.js server.
+
+### Environment Variables
+
+You can change these to your liking.
+
+`.env`:
+
+- `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
+- `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 the `.env` file with your values (see the above section for the required options).
+
+Then, use the following command to start the server:
+
+- `pnpm build && pm2 start pnpm --name drift --interpreter bash -- start`
+
+Refer to pm2's docs or `pm2 help` for more information.
+
+## 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
-Drit 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.
 
-- [x] creating and sharing private, public, unlisted posts
-  - [x] syntax highlighting (detected by file extension)
-  - [x] multiple files per post
-  - [ ] uploading files via drag-and-drop
+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] 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))
-- [ ] downloading files (individually and entire posts)
-- [ ] password protected posts
-- [ ] sqlite database (should be very easy to set-up; the ORM is just currently set to memory for ease of development)
-- [ ] non-node backend
-- [ ] administrator account / settings
-- [ ] docker-compose (PR: [#13](https://github.com/MaxLeiter/Drift/pull/13))
+  - [x] SSO via GitHub OAuth
+- [x] downloading files (individually and entire posts)
+- [x] password protected posts
+- [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
-- [ ] documentation
-- [ ] 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?
+- [ ] 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

client/.dockerignore

@@ -1 +0,0 @@
-node_modules/

client/.env.local

@@ -1 +0,0 @@
-API_URL=http://localhost:3000

client/.eslintrc.json

@@ -1,3 +0,0 @@
-{
-  "extends": "next/core-web-vitals"
-}

client/Dockerfile

@@ -1,56 +0,0 @@
-# Install dependencies only when needed
-FROM node:16-alpine AS deps
-# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
-RUN apk add --no-cache libc6-compat
-WORKDIR /app
-COPY package.json yarn.lock ./
-RUN yarn install --frozen-lockfile
-
-# If using npm with a `package-lock.json` comment out above and use below instead
-# COPY package.json package-lock.json ./ 
-# RUN npm ci
-
-# Rebuild the source code only when needed
-FROM node:16-alpine AS builder
-WORKDIR /app
-COPY --from=deps /app/node_modules ./node_modules
-COPY . .
-
-# Next.js collects completely anonymous telemetry data about general usage.
-# Learn more here: https://nextjs.org/telemetry
-# Uncomment the following line in case you want to disable telemetry during the build.
-ENV NEXT_TELEMETRY_DISABLED 1
-
-RUN yarn build
-
-# If using npm comment out above and use below instead
-# RUN npm run build
-
-# Production image, copy all the files and run next
-FROM node:16-alpine AS runner
-WORKDIR /app
-
-ENV NODE_ENV production
-
-ENV NEXT_TELEMETRY_DISABLED 1
-
-RUN addgroup --system --gid 1001 nodejs
-RUN adduser --system --uid 1001 nextjs
-
-# You only need to copy next.config.js if you are NOT using the default configuration
-COPY --from=builder /app/next.config.js ./
-COPY --from=builder /app/public ./public
-COPY --from=builder /app/package.json ./package.json
-
-# Automatically leverage output traces to reduce image size 
-# https://nextjs.org/docs/advanced-features/output-file-tracing
-COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
-COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
-
-USER nextjs
-
-EXPOSE 3001
-
-ENV PORT 3001
-
-CMD ["node", "server.js"]

client/README.md

@@ -1,34 +0,0 @@
-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).
-
-## Getting Started
-
-First, run the development server:
-
-```bash
-npm run dev
-# or
-yarn dev
-```
-
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-
-You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
-
-[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
-
-The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
-
-## Learn More
-
-To learn more about Next.js, 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.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
-
-## Deploy on Vercel
-
-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.

client/components/Link.tsx

@@ -1,12 +0,0 @@
-import { Link as GeistLink, LinkProps } from "@geist-ui/core"
-import { useRouter } from "next/router";
-
-const Link = (props: LinkProps) => {
-    const { basePath } = useRouter();
-    const propHrefWithoutLeadingSlash = props.href && props.href.startsWith("/") ? props.href.substr(1) : props.href;
-    const href = basePath ? `${basePath}/${propHrefWithoutLeadingSlash}` : props.href;
-    (href)
-    return <GeistLink {...props} href={href} />
-}
-
-export default Link

client/components/auth/auth.module.css

@@ -1,21 +0,0 @@
-.container {
-  padding: 2rem 2rem;
-  border-radius: var(--border-radius);
-  box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
-}
-
-.form {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-}
-
-.formGroup {
-  margin-bottom: 1rem;
-}
-
-.formHeader {
-  margin-bottom: 1rem;
-}

client/components/auth/index.tsx

@@ -1,100 +0,0 @@
-import { FormEvent, useState } from 'react'
-import { Button, Card, Input, Text } from '@geist-ui/core'
-import styles from './auth.module.css'
-import { useRouter } from 'next/router'
-import Link from '../Link'
-
-const Auth = ({ page }: { page: "signup" | "signin" }) => {
-    const router = useRouter();
-    const [username, setUsername] = useState('');
-    const [password, setPassword] = useState('');
-    const [error, setError] = useState('');
-
-    const signingIn = page === 'signin'
-
-    const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
-
-        const handleJson = (json: any) => {
-            if (json.error) {
-                setError(json.error.message)
-            } else {
-                localStorage.setItem('drift-token', json.token)
-                localStorage.setItem('drift-userid', json.userId)
-                router.push('/')
-            }
-        }
-
-        const reqOpts = {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json'
-            },
-            body: JSON.stringify({ username, password })
-        }
-
-        e.preventDefault()
-        if (signingIn) {
-            try {
-                const resp = await fetch('/api/auth/signin', reqOpts)
-                const json = await resp.json()
-                handleJson(json)
-            } catch (err: any) {
-                setError(err.message || "Something went wrong")
-            }
-        } else {
-            try {
-                const resp = await fetch('/api/auth/signup', reqOpts)
-                const json = await resp.json()
-                handleJson(json)
-            } catch (err: any) {
-                setError(err.message || "Something went wrong")
-            }
-        }
-    }
-
-    return (
-        <div className={styles.container}>
-            <div className={styles.form}>
-                <div className={styles.formHeader}>
-                    <h1>{signingIn ? 'Sign In' : 'Sign Up'}</h1>
-                </div>
-                <form onSubmit={handleSubmit}>
-                    <Card>
-                        <div className={styles.formGroup}>
-                            <Input
-                                htmlType="text"
-                                id="username"
-                                value={username}
-                                onChange={(event) => setUsername(event.target.value)}
-                                placeholder="Username"
-                                required
-                                label='Username'
-                            />
-                        </div>
-                        <div className={styles.formGroup}>
-                            <Input
-                                htmlType='password'
-                                id="password"
-                                value={password}
-                                onChange={(event) => setPassword(event.target.value)}
-                                placeholder="Password"
-                                required
-                                label='Password'
-                            />
-                        </div>
-                        <div style={{ display: 'flex', justifyContent: 'center' }}>
-                            <Button type="success" ghost htmlType="submit">{signingIn ? 'Sign In' : 'Sign Up'}</Button>
-                        </div>
-                        <div className={styles.formGroup}>
-                            {signingIn && <Text>Don&apos;t have an account? <Link color href="/signup" >Sign up</Link></Text>}
-                            {!signingIn && <Text>Already have an account? <Link color href="/signin" >Sign in</Link></Text>}
-                        </div>
-                        {error && <Text type='error'>{error}</Text>}
-                    </Card>
-                </form>
-            </div>
-        </div >
-    )
-}
-
-export default Auth

client/components/document/document.module.css

@@ -1,31 +0,0 @@
-.input {
-  background: #efefef;
-}
-
-.descriptionContainer {
-  display: flex;
-  flex-direction: column;
-  min-height: 400px;
-  overflow: scroll;
-}
-
-.fileNameContainer {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  height: 36px;
-}
-
-.fileNameContainer {
-  display: flex;
-  align-content: center;
-}
-
-.fileNameContainer > div {
-  /* Override geist-ui styling */
-  margin: 0 !important;
-}
-
-.textarea {
-  height: 100%;
-}

client/components/document/index.tsx

@@ -1,116 +0,0 @@
-import { Button, Card, Input, Spacer, Tabs, Textarea } from "@geist-ui/core"
-import { ChangeEvent, memo, useMemo, useRef, useState } from "react"
-import styles from './document.module.css'
-import MarkdownPreview from '../preview'
-import { Trash } from '@geist-ui/icons'
-import FormattingIcons from "../formatting-icons"
-import Skeleton from "react-loading-skeleton"
-type Props = {
-    editable?: boolean
-    remove?: () => void
-    title?: string
-    content?: string
-    setTitle?: (title: string) => void
-    setContent?: (content: string) => void
-    initialTab?: "edit" | "preview"
-    skeleton?: boolean
-}
-
-const Document = ({ remove, editable, title, content, setTitle, setContent, initialTab = 'edit', skeleton }: Props) => {
-    const codeEditorRef = useRef<HTMLTextAreaElement>(null)
-    const [tab, setTab] = useState(initialTab)
-    const height = editable ? "500px" : '100%'
-
-    const handleTabChange = (newTab: string) => {
-        if (newTab === 'edit') {
-            codeEditorRef.current?.focus()
-        }
-        setTab(newTab as 'edit' | 'preview')
-    }
-
-    const getType = useMemo(() => {
-        if (!title) return
-        const pathParts = title.split(".")
-        const language = pathParts.length > 1 ? pathParts[pathParts.length - 1] : ""
-        return language
-    }, [title])
-
-    const removeFile = (remove?: () => void) => {
-        if (remove) {
-            if (content && content.trim().length > 0) {
-                const confirmed = window.confirm("Are you sure you want to remove this file?")
-                if (confirmed) {
-                    remove()
-                }
-            } else {
-                remove()
-            }
-        }
-    }
-    if (skeleton) {
-        return <>
-            <Spacer height={1} />
-            <Card marginBottom={'var(--gap)'} marginTop={'var(--gap)'} style={{ maxWidth: 980, margin: "0 auto" }}>
-                <div className={styles.fileNameContainer}>
-                    <Skeleton width={275} height={36} />
-                    {editable && <Skeleton width={36} height={36} />}
-                </div>
-                <div className={styles.descriptionContainer}>
-                    <div style={{ flexDirection: 'row', display: 'flex' }}><Skeleton width={125} height={36} /></div>
-                    <Skeleton width={'100%'} height={350} />
-                </div >
-            </Card>
-        </>
-    }
-    return (
-        <>
-            <Spacer height={1} />
-            <Card marginBottom={'var(--gap)'} marginTop={'var(--gap)'} style={{ maxWidth: 980, margin: "0 auto" }}>
-                <div className={styles.fileNameContainer}>
-                    <Input
-                        placeholder="MyFile.md"
-                        value={title}
-                        onChange={(event: ChangeEvent<HTMLInputElement>) => setTitle ? setTitle(event.target.value) : null}
-                        marginTop="var(--gap-double)"
-                        size={1.2}
-                        font={1.2}
-                        label="Filename"
-                        disabled={!editable}
-                        width={"100%"}
-                    />
-                    {remove && editable && <Button type="abort" ghost icon={<Trash />} auto height={'36px'} width={'36px'} onClick={() => removeFile(remove)} />}
-                </div>
-                <div className={styles.descriptionContainer}>
-                    {tab === 'edit' && editable && <FormattingIcons setText={setContent} textareaRef={codeEditorRef} />}
-                    <Tabs onChange={handleTabChange} initialValue={initialTab} hideDivider leftSpace={0}>
-                        <Tabs.Item label={editable ? "Edit" : "Raw"} value="edit">
-                            {/* <textarea className={styles.lineCounter} wrap='off' readOnly ref={lineNumberRef}>1.</textarea> */}
-                            <div style={{ display: 'flex', flexDirection: 'column' }}>
-                                <Textarea
-                                    ref={codeEditorRef}
-                                    placeholder="Type some contents..."
-                                    value={content}
-                                    onChange={(event) => setContent ? setContent(event.target.value) : null}
-                                    width="100%"
-                                    disabled={!editable}
-                                    // TODO: Textarea should grow to fill parent if height == 100%
-                                    style={{ flex: 1, minHeight: 350 }}
-                                    resize="vertical"
-                                    className={styles.textarea}
-                                />
-                            </div>
-                        </Tabs.Item>
-                        <Tabs.Item label="Preview" value="preview">
-                            <MarkdownPreview height={height} content={content} type={getType} />
-                        </Tabs.Item>
-                    </Tabs>
-
-                </div >
-            </Card >
-            <Spacer height={1} />
-        </>
-    )
-}
-
-
-export default memo(Document)

client/components/formatting-icons/index.tsx

@@ -1,139 +0,0 @@
-import { ButtonGroup, Button } from "@geist-ui/core"
-import { Bold, Italic, Link, Image as ImageIcon } from '@geist-ui/icons'
-import { RefObject, useCallback, useMemo } from "react"
-
-// TODO: clean up
-
-const FormattingIcons = ({ textareaRef, setText }: { textareaRef?: RefObject<HTMLTextAreaElement>, setText?: (text: string) => void }) => {
-    // const { textBefore, textAfter, selectedText } = useMemo(() => {
-    //     if (textareaRef && textareaRef.current) {
-    //         const textarea = textareaRef.current
-    //         const text = textareaRef.current.value
-    //         const selectionStart = textarea.selectionStart
-    //         const selectionEnd = textarea.selectionEnd
-    //         const textBefore = text.substring(0, selectionStart)
-    //         const textAfter = text.substring(selectionEnd)
-    //         const selectedText = text.substring(selectionStart, selectionEnd)
-    //         return { textBefore, textAfter, selectedText }
-    //     }
-    //     return { textBefore: '', textAfter: '' }
-    // }, [textareaRef,])
-
-    const handleBoldClick = useCallback((e) => {
-        if (textareaRef?.current && setText) {
-            const selectionStart = textareaRef.current.selectionStart
-            const selectionEnd = textareaRef.current.selectionEnd
-            const text = textareaRef.current.value
-            const before = text.substring(0, selectionStart)
-            const after = text.substring(selectionEnd)
-            const selectedText = text.substring(selectionStart, selectionEnd)
-
-            const newText = `${before}**${selectedText}**${after}`
-            setText(newText)
-
-            // TODO; fails because settext async
-            textareaRef.current.setSelectionRange(before.length + 2, before.length + 2 + selectedText.length)
-        }
-    }, [setText, textareaRef])
-
-    const handleItalicClick = useCallback((e) => {
-        if (textareaRef?.current && setText) {
-            const selectionStart = textareaRef.current.selectionStart
-            const selectionEnd = textareaRef.current.selectionEnd
-            const text = textareaRef.current.value
-            const before = text.substring(0, selectionStart)
-            const after = text.substring(selectionEnd)
-            const selectedText = text.substring(selectionStart, selectionEnd)
-            const newText = `${before}*${selectedText}*${after}`
-            setText(newText)
-            textareaRef.current.focus()
-            textareaRef.current.setSelectionRange(before.length + 1, before.length + 1 + selectedText.length)
-        }
-    }, [setText, textareaRef])
-
-    const handleLinkClick = useCallback((e) => {
-        if (textareaRef?.current && setText) {
-            const selectionStart = textareaRef.current.selectionStart
-            const selectionEnd = textareaRef.current.selectionEnd
-            const text = textareaRef.current.value
-            const before = text.substring(0, selectionStart)
-            const after = text.substring(selectionEnd)
-            const selectedText = text.substring(selectionStart, selectionEnd)
-            let formattedText = '';
-            if (selectedText.includes('http')) {
-                formattedText = `[](${selectedText})`
-            } else {
-                formattedText = `[${selectedText}](https://)`
-            }
-            const newText = `${before}${formattedText}${after}`
-            setText(newText)
-            textareaRef.current.focus()
-            textareaRef.current.setSelectionRange(before.length + 1, before.length + 1 + selectedText.length)
-        }
-    }, [setText, textareaRef])
-
-    const handleImageClick = useCallback((e) => {
-        if (textareaRef?.current && setText) {
-            const selectionStart = textareaRef.current.selectionStart
-            const selectionEnd = textareaRef.current.selectionEnd
-            const text = textareaRef.current.value
-            const before = text.substring(0, selectionStart)
-            const after = text.substring(selectionEnd)
-            const selectedText = text.substring(selectionStart, selectionEnd)
-            let formattedText = '';
-            if (selectedText.includes('http')) {
-                formattedText = `![](${selectedText})`
-            } else {
-                formattedText = `![${selectedText}](https://)`
-            }
-            const newText = `${before}${formattedText}${after}`
-            setText(newText)
-            textareaRef.current.focus()
-            textareaRef.current.setSelectionRange(before.length + 1, before.length + 1 + selectedText.length)
-        }
-    }, [setText, textareaRef])
-
-    const formattingActions = useMemo(() => [
-        {
-            icon: <Bold />,
-            name: 'bold',
-            action: handleBoldClick
-        },
-        {
-            icon: <Italic />,
-            name: 'italic',
-            action: handleItalicClick
-        },
-        // {
-        //     icon: <Underline />,
-        //     name: 'underline',
-        //     action: handleUnderlineClick
-        // },
-        {
-            icon: <Link />,
-            name: 'hyperlink',
-            action: handleLinkClick
-        },
-        {
-            icon: <ImageIcon />,
-            name: 'image',
-            action: handleImageClick
-        }
-    ], [handleBoldClick, handleImageClick, handleItalicClick, handleLinkClick])
-
-    return (
-        <div style={{ position: 'relative', zIndex: 1 }}>
-            <ButtonGroup style={{
-                position: 'absolute',
-                right: 0,
-            }}>
-                {formattingActions.map(({ icon, name, action }) => (
-                    <Button auto scale={2 / 3} px={0.6} aria-label={name} key={name} icon={icon} onMouseDown={(e) => e.preventDefault()} onClick={action} />
-                ))}
-            </ButtonGroup>
-        </div>
-    )
-
-}
-
-export default FormattingIcons

client/components/header/controls.tsx

@@ -1,41 +0,0 @@
-import React from 'react'
-import MoonIcon from '@geist-ui/icons/moon'
-import SunIcon from '@geist-ui/icons/sun'
-import { Select } from '@geist-ui/core'
-import { ThemeProps } from '../../pages/_app'
-// import { useAllThemes, useTheme } from '@geist-ui/core'
-import styles from './header.module.css'
-
-const Controls = ({ changeTheme, theme }: ThemeProps) => {
-    const switchThemes = (type: string | string[]) => {
-        changeTheme()
-        if (typeof window === 'undefined' || !window.localStorage) return
-        window.localStorage.setItem('drift-theme', Array.isArray(type) ? type[0] : type)
-    }
-
-
-    return (
-        <div className={styles.wrapper}>
-            <Select
-                scale={0.5}
-                h="28px"
-                pure
-                onChange={switchThemes}
-                value={theme}
-            >
-                <Select.Option value="light">
-                    <span className={styles.selectContent}>
-                        <SunIcon size={14} /> Light
-                    </span>
-                </Select.Option>
-                <Select.Option value="dark">
-                    <span className={styles.selectContent}>
-                        <MoonIcon size={14} /> Dark
-                    </span>
-                </Select.Option>
-            </Select>
-        </div >
-    )
-}
-
-export default React.memo(Controls);

client/components/header/header.module.css

@@ -1,43 +0,0 @@
-.tabs {
-  flex: 1 1;
-  padding: 0 var(--gap);
-}
-
-.mobile {
-  position: relative;
-  z-index: 2;
-}
-
-.controls {
-  display: none !important;
-}
-
-@media only screen and (max-width: 650px) {
-  .tabs {
-    display: none;
-  }
-
-  .controls {
-    display: block !important;
-  }
-}
-
-.controls button:active,
-.controls button:focus,
-.controls button:hover {
-  outline: 1px solid rgba(0, 0, 0, 0.2);
-}
-
-.wrapper {
-  display: flex;
-  align-items: center;
-  width: min-content;
-}
-
-.selectContent {
-  width: auto;
-  height: 18px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}

client/components/header/index.tsx

@@ -1,221 +0,0 @@
-import { Page, ButtonGroup, Button, useBodyScroll, useMediaQuery, Tabs, Spacer } from "@geist-ui/core";
-import { Github as GitHubIcon, UserPlus as SignUpIcon, User as SignInIcon, Home as HomeIcon, Menu as MenuIcon, Tool as SettingsIcon, UserX as SignoutIcon, PlusCircle as NewIcon, List as YourIcon, Moon, Sun } from "@geist-ui/icons";
-import { DriftProps } from "../../pages/_app";
-import { useEffect, useMemo, useState } from "react";
-import styles from './header.module.css';
-import { useRouter } from "next/router";
-import useSignedIn from "../../lib/hooks/use-signed-in";
-
-type Tab = {
-    name: string
-    icon: JSX.Element
-    condition?: boolean
-    value: string
-    onClick?: () => void
-    href?: string
-}
-
-
-const Header = ({ changeTheme, theme }: DriftProps) => {
-    const router = useRouter();
-    const [selectedTab, setSelectedTab] = useState<string>();
-    const [expanded, setExpanded] = useState<boolean>(false)
-    const [, setBodyHidden] = useBodyScroll(null, { scrollLayer: true })
-    const isMobile = useMediaQuery('xs', { match: 'down' })
-    const { isLoading, isSignedIn, signout } = useSignedIn({ redirectIfNotAuthed: false })
-    const [pages, setPages] = useState<Tab[]>([])
-
-    useEffect(() => {
-        setBodyHidden(expanded)
-    }, [expanded, setBodyHidden])
-
-    useEffect(() => {
-        if (!isMobile) {
-            setExpanded(false)
-        }
-    }, [isMobile])
-
-    useEffect(() => {
-        const pageList: Tab[] = [
-            {
-                name: "Home",
-                href: "/",
-                icon: <HomeIcon />,
-                condition: true,
-                value: "home"
-            },
-            {
-                name: "New",
-                href: "/new",
-                icon: <NewIcon />,
-                condition: isSignedIn,
-                value: "new"
-            },
-            {
-                name: "Yours",
-                href: "/mine",
-                icon: <YourIcon />,
-                condition: isSignedIn,
-                value: "mine"
-            },
-            // {
-            //     name: "Settings",
-            //     href: "/settings",
-            //     icon: <SettingsIcon />,
-            //     condition: isSignedIn
-            // },
-            {
-                name: "Sign out",
-                onClick: () => {
-                    if (typeof window !== 'undefined') {
-                        localStorage.clear();
-
-                        // // send token to API blacklist
-                        // fetch('/api/auth/signout', {
-                        //     method: 'POST',
-                        //     headers: {
-                        //         'Content-Type': 'application/json'
-                        //     },
-                        //     body: JSON.stringify({
-                        //         token: localStorage.getItem("drift-token")
-                        //     })
-                        // })
-
-                        signout();
-                        router.push("/signin");
-                    }
-                },
-                href: "#signout",
-                icon: <SignoutIcon />,
-                condition: isSignedIn,
-                value: "signout"
-            },
-            {
-                name: "Sign in",
-                href: "/signin",
-                icon: <SignInIcon />,
-                condition: !isSignedIn,
-                value: "signin"
-            },
-            {
-                name: "Sign up",
-                href: "/signup",
-                icon: <SignUpIcon />,
-                condition: !isSignedIn,
-                value: "signup"
-            },
-            {
-                name: isMobile ? "GitHub" : "",
-                href: "https://github.com/maxleiter/drift",
-                icon: <GitHubIcon />,
-                condition: true,
-                value: "github"
-            },
-            {
-                name: isMobile ? "Change theme" : "",
-                onClick: function () {
-                    if (typeof window !== 'undefined') {
-                        changeTheme();
-                        setSelectedTab(undefined);
-                    }
-                },
-                icon: theme === 'light' ? <Moon /> : <Sun />,
-                condition: true,
-                value: "theme",
-            }
-        ]
-
-        if (isLoading) {
-            return setPages([])
-        }
-
-        setPages(pageList.filter(page => page.condition))
-    }, [changeTheme, isLoading, isMobile, isSignedIn, router, signout, theme])
-
-    // useEffect(() => {
-    //     setSelectedTab(pages.find((page) => {
-    //         console.log(page.href, router.asPath)
-    //         if (page.href && page.href === router.asPath) {
-    //             return true
-    //         }
-    //     })?.href)
-    // }, [pages, router, router.pathname])
-
-    const onTabChange = (tab: string) => {
-        const match = pages.find(page => page.value === tab)
-        if (match?.onClick) {
-            match.onClick()
-        } else if (match?.href) {
-            router.push(`${match.href}`)
-        }
-    }
-
-    return (
-        <Page.Header height={'var(--page-nav-height)'} margin={0} paddingBottom={0} paddingTop={"var(--gap)"}>
-            <div className={styles.tabs}>
-                <Tabs
-                    value={selectedTab}
-                    leftSpace={0}
-                    align="center"
-                    hideDivider
-                    hideBorder
-                    onChange={onTabChange}>
-                    {!isLoading && pages.map((tab) => {
-                        return <Tabs.Item
-                            font="14px"
-                            label={<>{tab.icon} {tab.name}</>}
-                            value={tab.value}
-                            key={`${tab.value}`}
-                        />
-                    })}
-                </Tabs>
-            </div>
-            <div className={styles.controls}>
-                <Button
-                    auto
-                    type="abort"
-                    onClick={() => setExpanded(!expanded)}
-                >
-                    <Spacer height={5 / 6} width={0} />
-                    <MenuIcon />
-                </Button>
-            </div>
-            {isMobile && expanded && (<div className={styles.mobile}>
-                <ButtonGroup vertical>
-                    {pages.map((tab, index) => {
-                        return <Button
-                            key={`${tab.name}-${index}`}
-                            onClick={() => onTabChange(tab.value)}
-                            icon={tab.icon}
-                        >
-                            {tab.name}
-                        </Button>
-                    })}
-                </ButtonGroup>
-            </div>)}
-        </Page.Header >
-    )
-}
-
-export default Header
-
-
-// {/* {/* <ButtonGroup>
-//                 <Button onClick={() => {
-
-//                 }}><Link href="/signin">Sign out</Link></Button>
-//                 <Button>
-//                     <Link href="/mine">
-//                         Yours
-//                     </Link>
-//                 </Button>
-//                 <Button>
-//                     {/* TODO: Link outside Button, but seems to break ButtonGroup */}
-// <Link href="/new">
-//     New
-// </Link>
-//                 </Button >
-//     <Button onClick={() => changeTheme()}>
-//         <ShiftBy y={6}>{theme.type === 'light' ? <Moon /> : <Sun />}</ShiftBy>
-//     </Button>
-//             </ButtonGroup > * /}

client/components/my-posts/index.tsx

@@ -1,16 +0,0 @@
-import useSWR from "swr"
-import PostList from "../post-list"
-
-const fetcher = (url: string) => fetch(url, {
-    headers: {
-        'Content-Type': 'application/json',
-        'Authorization': `Bearer ${localStorage.getItem("drift-token")}`
-    },
-}).then(r => r.json())
-
-const MyPosts = () => {
-    const { data, error } = useSWR('/api/users/mine', fetcher)
-    return <PostList posts={data} error={error} />
-}
-
-export default MyPosts

client/components/new-post/drag-and-drop/drag-and-drop.module.css

@@ -1,40 +0,0 @@
-.container {
-  display: flex;
-  flex-direction: column;
-}
-
-.container ul {
-  margin: 0;
-  margin-top: var(--gap-double);
-}
-
-.dropzone {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 20px;
-  border-width: 2px;
-  border-radius: 2px;
-  border-style: dashed;
-  outline: none;
-  transition: border 0.24s ease-in-out;
-}
-
-.error {
-  color: red;
-  font-size: 0.8rem;
-  transition: border 0.24s ease-in-out;
-  border: 2px solid red;
-  border-radius: 2px;
-  padding: 20px;
-}
-
-.error > li:before {
-  content: "";
-}
-
-.error ul {
-  margin: 0;
-  padding-left: var(--gap-double);
-}

client/components/new-post/drag-and-drop/index.tsx

@@ -1,178 +0,0 @@
-import { Button, Text, useTheme, useToasts } from '@geist-ui/core'
-import { useCallback, useEffect } from 'react'
-import { useDropzone } from 'react-dropzone'
-import styles from './drag-and-drop.module.css'
-import { Document } from '../'
-import generateUUID from '../../../lib/generate-uuid'
-import { XCircle } from '@geist-ui/icons'
-const allowedFileTypes = [
-    'application/json',
-    'application/x-javascript',
-    'application/xhtml+xml',
-    'application/xml',
-    'text/xml',
-    'text/plain',
-    'text/html',
-    'text/csv',
-    'text/tab-separated-values',
-    'text/x-c',
-    'text/x-c++',
-    'text/x-csharp',
-    'text/x-java',
-    'text/x-javascript',
-    'text/x-php',
-    'text/x-python',
-    'text/x-ruby',
-    'text/x-scala',
-    'text/x-swift',
-    'text/x-typescript',
-    'text/x-vb',
-    'text/x-vbscript',
-    'text/x-yaml',
-    'text/x-c++',
-    'text/x-c#',
-    'text/mathml',
-    'text/x-markdown',
-    'text/markdown',
-]
-
-// Files with no extension can't be easily detected as plain-text,
-// so instead of allowing all of them we'll just allow common ones
-const allowedFileNames = [
-    'Makefile',
-    'README',
-    'Dockerfile',
-    'Jenkinsfile',
-    'LICENSE',
-    '.env',
-    '.gitignore',
-    '.gitattributes',
-    '.env.example',
-    '.env.development',
-    '.env.production',
-    '.env.test',
-    '.env.staging',
-    '.env.development.local',
-    'yarn.lock',
-]
-
-const allowedFileExtensions = [
-    'json',
-    'js',
-    'jsx',
-    'ts',
-    'tsx',
-    'c',
-    'cpp',
-    'c++',
-    'c#',
-    'java',
-    'php',
-    'py',
-    'rb',
-    'scala',
-    'swift',
-    'vb',
-    'vbscript',
-    'yaml',
-    'less',
-    'stylus',
-    'styl',
-    'sass',
-    'scss',
-    'lock',
-    'md',
-    'markdown',
-    'txt',
-    'html',
-    'htm',
-    'css',
-    'csv',
-    'log',
-    'sql',
-    'xml',
-    'webmanifest',
-]
-
-// TODO: this shouldn't need to know about docs
-function FileDropzone({ setDocs, docs }: { setDocs: (docs: Document[]) => void, docs: Document[] }) {
-    const { palette } = useTheme()
-    const onDrop = useCallback((acceptedFiles) => {
-        acceptedFiles.forEach((file: File) => {
-            const reader = new FileReader()
-
-            reader.onabort = () => console.log('file reading was aborted')
-            reader.onerror = () => console.log('file reading has failed')
-            reader.onload = () => {
-                const content = reader.result as string
-                if (docs.length === 1 && docs[0].content === '') {
-                    setDocs([{
-                        title: file.name,
-                        content,
-                        id: generateUUID()
-                    }])
-                } else {
-                    setDocs([...docs, {
-                        title: file.name,
-                        content,
-                        id: generateUUID()
-                    }])
-                }
-            }
-            reader.readAsText(file)
-        })
-
-    }, [docs, setDocs])
-
-    const validator = (file: File) => {
-        // TODO: make this configurable
-        const maxFileSize = 1000000;
-        if (file.size > maxFileSize) {
-            return {
-                code: 'file-too-big',
-                message: 'File is too big. Maximum file size is ' + (maxFileSize).toFixed(2) + ' MB.',
-            }
-        }
-        // We initially try to use the browser provided mime type, and then fall back to file names and finally extensions
-        if (allowedFileTypes.includes(file.type) || allowedFileNames.includes(file.name) || allowedFileExtensions.includes(file.name?.split('.').pop() || '')) {
-            return null
-        } else {
-            return {
-                code: "not-plain-text",
-                message: `Only plain text files are allowed.`
-            };
-        }
-    }
-
-    const { getRootProps, getInputProps, isDragActive, fileRejections } = useDropzone({ onDrop, validator })
-
-    const fileRejectionItems = fileRejections.map(({ file, errors }) => (
-        <li key={file.name}>
-            {file.name}:
-            <ul>
-                {errors.map(e => (
-                    <li key={e.code}><Text>{e.message}</Text></li>
-                ))}
-            </ul>
-        </li>
-    ));
-
-    return (
-        <div className={styles.container}>
-            <div {...getRootProps()} className={styles.dropzone} style={{
-                borderColor: palette.accents_3,
-            }}>
-                <input {...getInputProps()} />
-                {!isDragActive && <Text p>Drag some files here, or click to select files</Text>}
-                {isDragActive && <Text p>Release to drop the files here</Text>}
-            </div>
-            {fileRejections.length > 0 && <ul className={styles.error}>
-                {/* <Button style={{ float: 'right' }} type="abort" onClick={() => fileRejections.splice(0, fileRejections.length)} auto iconRight={<XCircle />}></Button> */}
-                <Text h5>There was a problem with some of your files.</Text>
-                {fileRejectionItems}
-            </ul>}
-        </div>
-    )
-}
-
-export default FileDropzone

client/components/new-post/index.tsx

@@ -1,112 +0,0 @@
-import { Button, ButtonDropdown, useToasts } from '@geist-ui/core'
-import { useRouter } from 'next/router';
-import { useCallback, useState } from 'react'
-import generateUUID from '../../lib/generate-uuid';
-import Document from '../document';
-import FileDropzone from './drag-and-drop';
-import styles from './post.module.css'
-import Title from './title';
-
-export type Document = {
-    title: string
-    content: string
-    id: string
-}
-
-const Post = () => {
-    const { setToast } = useToasts()
-
-    const router = useRouter();
-    const [title, setTitle] = useState<string>()
-    const [docs, setDocs] = useState<Document[]>([{
-        title: '',
-        content: '',
-        id: generateUUID()
-    }])
-    const [isSubmitting, setSubmitting] = useState(false)
-
-    const remove = (id: string) => {
-        setDocs(docs.filter((doc) => doc.id !== id))
-    }
-
-    const onSubmit = async (visibility: string) => {
-        setSubmitting(true)
-        const response = await fetch('/api/posts/create', {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-                'Authorization': `Bearer ${localStorage.getItem("drift-token")}`
-            },
-            body: JSON.stringify({
-                title,
-                files: docs,
-                visibility,
-                userId: localStorage.getItem("drift-userid"),
-            })
-        })
-
-        const json = await response.json()
-        setSubmitting(false)
-        if (json.id)
-            router.push(`/post/${json.id}`)
-        else {
-            setToast({ text: json.error.message, type: "error" })
-        }
-    }
-
-    const updateTitle = useCallback((title: string, id: string) => {
-        setDocs(docs.map((doc) => doc.id === id ? { ...doc, title } : doc))
-    }, [docs])
-
-    const updateContent = useCallback((content: string, id: string) => {
-        setDocs(docs.map((doc) => doc.id === id ? { ...doc, content } : doc))
-    }, [docs])
-
-    return (
-        <div>
-            <Title title={title} setTitle={setTitle} />
-            <FileDropzone docs={docs} setDocs={setDocs} />
-            {
-                docs.map(({ id }) => {
-                    const doc = docs.find((doc) => doc.id === id)
-                    return (
-                        <Document
-                            remove={() => remove(id)}
-                            key={id}
-                            editable={true}
-                            setContent={(content) => updateContent(content, id)}
-                            setTitle={(title) => updateTitle(title, id)}
-                            content={doc?.content}
-                            title={doc?.title}
-                        />
-                    )
-                })
-            }
-
-            <div className={styles.buttons}>
-                <Button
-                    className={styles.button}
-                    onClick={() => {
-                        setDocs([...docs, {
-                            title: '',
-                            content: '',
-                            id: generateUUID()
-                        }])
-                    }}
-                    style={{ flex: .5, lineHeight: '40px' }}
-                    type="default"
-                >
-                    Add a File
-                </Button>
-
-                <ButtonDropdown loading={isSubmitting} type="success">
-                    <ButtonDropdown.Item main onClick={() => onSubmit('private')}>Create Private</ButtonDropdown.Item>
-                    <ButtonDropdown.Item onClick={() => onSubmit('public')} >Create Public</ButtonDropdown.Item>
-                    <ButtonDropdown.Item onClick={() => onSubmit('unlisted')} >Create Unlisted</ButtonDropdown.Item>
-                </ButtonDropdown>
-            </div>
-        </div >
-    )
-}
-
-export default Post

client/components/new-post/post.module.css

@@ -1,21 +0,0 @@
-.buttons {
-  position: relative;
-  display: flex;
-  justify-content: space-between;
-  width: 100%;
-  margin-top: var(--gap-double);
-}
-
-.title {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-}
-
-@media screen and (max-width: 650px) {
-  .title {
-    align-items: flex-start;
-    flex-direction: column;
-  }
-}

client/components/new-post/title/index.tsx

@@ -1,39 +0,0 @@
-import { Text, Input } from '@geist-ui/core'
-import { memo } from 'react'
-import ShiftBy from '../../shift-by'
-import styles from '../post.module.css'
-
-const titlePlaceholders = [
-    "How to...",
-    "Status update for ...",
-    "My new project",
-    "My new idea",
-    "Let's talk about...",
-    "What's up with ...",
-    "I'm thinking about ...",
-]
-
-type props = {
-    setTitle: (title: string) => void
-    title?: string
-}
-
-const Title = ({ setTitle, title }: props) => {
-    return (<div className={styles.title}>
-        <Text h1 width={"150px"} className={styles.drift}>Drift</Text>
-        <ShiftBy y={-3}>
-            <Input
-                placeholder={titlePlaceholders[Math.floor(Math.random() * titlePlaceholders.length)]}
-                value={title || ""}
-                onChange={(event) => setTitle(event.target.value)}
-                height={"55px"}
-                font={1.5}
-                label="Post title"
-                marginLeft={'var(--gap)'}
-                style={{ width: "100%" }}
-            />
-        </ShiftBy>
-    </div>)
-}
-
-export default memo(Title)

client/components/post-list/index.tsx

@@ -1,40 +0,0 @@
-import { Text } from "@geist-ui/core"
-import NextLink from "next/link"
-import Link from '../Link'
-
-import styles from './post-list.module.css'
-import ListItemSkeleton from "./list-item-skeleton"
-import ListItem from "./list-item"
-
-type Props = {
-    posts: any
-    error: any
-}
-
-const PostList = ({ posts, error }: Props) => {
-    return (
-        <div className={styles.container}>
-            {error && <Text type='error'>Failed to load.</Text>}
-            {!posts && <ul>
-                <li>
-                    <ListItemSkeleton />
-                </li>
-                <li>
-                    <ListItemSkeleton />
-                </li>
-            </ul>}
-            {posts?.length === 0 && <Text>You have no posts. Create one <NextLink passHref={true} href="/new"><Link color>here</Link></NextLink>.</Text>}
-            {
-                posts?.length > 0 && <div>
-                    <ul>
-                        {posts.map((post: any) => {
-                            return <ListItem post={post} key={post.id} />
-                        })}
-                    </ul>
-                </div>
-            }
-        </div >
-    )
-}
-
-export default PostList

client/components/post-list/list-item-skeleton.tsx

@@ -1,19 +0,0 @@
-import { Card, Spacer, Grid, Divider } from "@geist-ui/core";
-import Skeleton from "react-loading-skeleton";
-
-const ListItemSkeleton = () => (<Card>
-    <Spacer height={1 / 2} />
-    <Grid.Container justify={'space-between'} marginBottom={1 / 2}>
-        <Grid xs={8} paddingLeft={1 / 2}><Skeleton width={150} /></Grid>
-        <Grid xs={7}><Skeleton width={100} /></Grid>
-        <Grid xs={4}><Skeleton width={70} /></Grid>
-    </Grid.Container>
-
-    <Divider h="1px" my={0} />
-
-    <Card.Content >
-        <Skeleton width={200} />
-    </Card.Content>
-</Card>)
-
-export default ListItemSkeleton

client/components/post-list/list-item.tsx

@@ -1,58 +0,0 @@
-import { Card, Spacer, Grid, Divider, Link, Text, Input, Tooltip } from "@geist-ui/core"
-import NextLink from "next/link"
-import { useEffect, useMemo, useState } from "react"
-import timeAgo from "../../lib/time-ago"
-import ShiftBy from "../shift-by"
-import VisibilityBadge from "../visibility-badge"
-
-const FilenameInput = ({ title }: { title: string }) => <Input
-    value={title}
-    marginTop="var(--gap-double)"
-    size={1.2}
-    font={1.2}
-    label="Filename"
-    readOnly
-    width={"100%"}
-/>
-
-const ListItem = ({ post }: { post: any }) => {
-    const createdDate = useMemo(() => new Date(post.createdAt), [post.createdAt])
-    const [time, setTimeAgo] = useState(timeAgo(createdDate))
-
-    useEffect(() => {
-        const interval = setInterval(() => {
-            setTimeAgo(timeAgo(createdDate))
-        }, 10000)
-        return () => clearInterval(interval)
-    }, [createdDate])
-
-    const formattedTime = `${createdDate.toLocaleDateString()} ${createdDate.toLocaleTimeString()}`
-    return (<li key={post.id}>
-        <Card style={{ overflowY: 'scroll' }}>
-            <Spacer height={1 / 2} />
-            <Grid.Container justify={'space-between'}>
-                <Grid xs={8}>
-                    <Text h3 paddingLeft={1 / 2}>
-                        <NextLink passHref={true} href={`/post/${post.id}`}>
-                            <Link color>{post.title}
-                                <ShiftBy y={-1}><VisibilityBadge visibility={post.visibility} /></ShiftBy>
-                            </Link>
-                        </NextLink>
-                    </Text></Grid>
-                <Grid xs={7}><Text type="secondary" h5><Tooltip text={formattedTime}>{time}</Tooltip></Text></Grid>
-                <Grid xs={4}><Text type="secondary" h5>{post.files.length === 1 ? "1 file" : `${post.files.length} files`}</Text></Grid>
-            </Grid.Container>
-
-            <Divider h="1px" my={0} />
-
-            <Card.Content >
-                {post.files.map((file: any) => {
-                    return <FilenameInput key={file.id} title={file.title} />
-                })}
-            </Card.Content>
-
-        </Card>
-    </li>)
-}
-
-export default ListItem

client/components/post-list/post-list.module.css

@@ -1,26 +0,0 @@
-.container ul {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-
-.container ul li {
-  padding: 0.5rem 0;
-}
-
-.container ul li::before {
-  content: "";
-  padding: 0;
-  margin: 0;
-}
-
-.postHeader {
-  display: flex;
-  justify-content: space-between;
-  padding: var(--gap);
-  align-items: center;
-  position: sticky;
-  top: 0;
-  z-index: 1;
-  background: inherit;
-}

client/components/preview/index.tsx

@@ -1,28 +0,0 @@
-import { memo, useEffect, useState } from "react"
-import ReactMarkdownPreview from "./react-markdown-preview"
-
-type Props = {
-    content?: string
-    height?: number | string
-    //  file extensions we can highlight 
-    type?: string
-}
-
-const MarkdownPreview = ({ content = '', height = 500, type = 'markdown' }: Props) => {
-    const [contentToRender, setContent] = useState(content)
-    useEffect(() => {
-        // 'm' so it doesn't flash code when you change the type to md
-        const renderAsMarkdown = ['m', 'markdown', 'md', 'mdown', 'mkdn', 'mkd', 'mdwn', 'mdtxt', 'mdtext', 'text', '']
-        if (!renderAsMarkdown.includes(type)) {
-            setContent(`~~~${type}
-${content}
-~~~
-`)
-        } else {
-            setContent(content)
-        }
-    }, [type, content])
-    return (<ReactMarkdownPreview height={height} content={contentToRender} />)
-}
-
-export default memo(MarkdownPreview)

client/components/preview/preview.module.css

@@ -1,60 +0,0 @@
-.markdownPreview pre {
-  border-radius: 3px;
-  font-family: "Courier New", Courier, monospace;
-  font-size: 14px;
-  line-height: 1.42857143;
-  margin: 0;
-  padding: 10px;
-  white-space: pre-wrap;
-  word-wrap: break-word;
-}
-
-.markdownPreview h1,
-.markdownPreview h2,
-.markdownPreview h3,
-.markdownPreview h4,
-.markdownPreview h5,
-.markdownPreview h6 {
-  margin-top: 0;
-  margin-bottom: 0.5rem;
-}
-
-.markdownPreview h1 {
-  font-size: 2rem;
-}
-
-.markdownPreview h2 {
-  font-size: 1.5rem;
-}
-
-.markdownPreview h3 {
-  font-size: 1.25rem;
-}
-
-.markdownPreview h4 {
-  font-size: 1rem;
-}
-
-.markdownPreview h5 {
-  font-size: 0.875rem;
-}
-
-.markdownPreview h6 {
-  font-size: 0.75rem;
-}
-
-.markdownPreview ul {
-  list-style: inside;
-}
-
-.markdownPreview ul li::before {
-  content: "";
-}
-
-.markdownPreview ul ul {
-  list-style: circle;
-}
-
-.markdownPreview ul ul li {
-  margin-left: var(--gap);
-}

client/components/preview/react-markdown-preview.tsx

@@ -1,53 +0,0 @@
-import ReactMarkdown from "react-markdown"
-import remarkGfm from "remark-gfm"
-import { PrismAsyncLight as SyntaxHighlighter } from 'react-syntax-highlighter';
-
-// @ts-ignore because of no types in remark-a11y-emoji
-import a11yEmoji from '@fec/remark-a11y-emoji';
-import styles from './preview.module.css'
-import { duotoneDark, duotoneLight } from 'react-syntax-highlighter/dist/cjs/styles/prism'
-import useSharedState from "../../lib/hooks/use-shared-state";
-
-type Props = {
-    content: string | undefined
-    height: number | string
-}
-
-const ReactMarkdownPreview = ({ content, height }: Props) => {
-    const [themeType] = useSharedState<string>('theme')
-    return (<div style={{ height }}>
-        <ReactMarkdown className={styles.markdownPreview} remarkPlugins={[remarkGfm, a11yEmoji]}
-            components={{
-                code({ node, inline, className, children, ...props }) {
-                    const match = /language-(\w+)/.exec(className || '')
-                    return !inline && match ? (
-                        <SyntaxHighlighter
-                            lineNumberStyle={{
-                                minWidth: "2.25rem"
-                            }}
-                            customStyle={{
-                                padding: 0,
-                                margin: 0,
-                                background: 'transparent'
-                            }}
-                            codeTagProps={{
-                                style: { background: 'transparent' }
-                            }}
-                            style={themeType === 'dark' ? duotoneDark : duotoneLight}
-                            showLineNumbers={true}
-                            language={match[1]}
-                            PreTag="div"
-                            {...props}
-                        >{String(children).replace(/\n$/, '')}</SyntaxHighlighter>
-                    ) : (
-                        <code className={className} {...props}>
-                            {children}
-                        </code>
-                    )
-                }
-            }}>
-            {content || ""}
-        </ReactMarkdown></div>)
-}
-
-export default ReactMarkdownPreview

client/components/shift-by.tsx

@@ -1,20 +0,0 @@
-// https://www.joshwcomeau.com/snippets/react-components/shift-by/
-type Props = {
-    x?: number
-    y?: number
-    children: React.ReactNode
-}
-
-function ShiftBy({ x = 0, y = 0, children }: Props) {
-    return (
-        <div
-            style={{
-                transform: `translate(${x}px, ${y}px)`,
-                display: 'inline-block'
-            }}
-        >
-            {children}
-        </div>
-    )
-}
-export default ShiftBy

client/components/visibility-badge/index.tsx

@@ -1,24 +0,0 @@
-import { Badge } from "@geist-ui/core"
-
-type Visibility = "unlisted" | "private" | "public"
-
-type Props = {
-    visibility: Visibility
-}
-
-const VisibilityBadge = ({ visibility }: Props) => {
-    const getBadgeType = () => {
-        switch (visibility) {
-            case "public":
-                return "success"
-            case "private":
-                return "warning"
-            case "unlisted":
-                return "default"
-        }
-    }
-
-    return (<Badge marginLeft={'var(--gap)'} type={getBadgeType()}>{visibility}</Badge>)
-}
-
-export default VisibilityBadge

client/lib/generate-uuid.ts

@@ -1,30 +0,0 @@
-export default function generateUUID() {
-    if (typeof crypto === 'object') {
-        if (typeof crypto.randomUUID === 'function') {
-            // https://developer.mozilla.org/en-US/docs/Web/API/Crypto/randomUUID
-            return crypto.randomUUID();
-        }
-        if (typeof crypto.getRandomValues === 'function' && typeof Uint8Array === 'function') {
-            // https://stackoverflow.com/questions/105034/how-to-create-a-guid-uuid
-            const callback = (c: string) => {
-                const num = Number(c);
-                return (num ^ (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (num / 4)))).toString(16);
-            };
-            return '10000000-1000-4000-8000-100000000000'.replace(/[018]/g, callback);
-        }
-    }
-    let timestamp = new Date().getTime();
-    let perforNow = (typeof performance !== 'undefined' && performance.now && performance.now() * 1000) || 0;
-    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
-        let random = Math.random() * 16;
-        if (timestamp > 0) {
-            random = (timestamp + random) % 16 | 0;
-            timestamp = Math.floor(timestamp / 16);
-        } else {
-            random = (perforNow + random) % 16 | 0;
-            perforNow = Math.floor(perforNow / 16);
-        }
-        return (c === 'x' ? random : (random & 0x3) | 0x8).toString(16);
-    });
-};
-

client/lib/hooks/use-shared-state.ts

@@ -1,11 +0,0 @@
-import useSWR from "swr"
-
-// https://2020.paco.me/blog/shared-hook-state-with-swr
-const useSharedState = <T>(key: string, initial?: T) => {
-    const { data: state, mutate: setState } = useSWR(key, {
-        fallbackData: initial
-    })
-    return [state, setState] as const
-}
-
-export default useSharedState

client/lib/hooks/use-signed-in.ts

@@ -1,44 +0,0 @@
-import { useRouter } from "next/router";
-import { useCallback, useEffect } from "react"
-import useSharedState from "./use-shared-state";
-
-const useSignedIn = ({ redirectIfNotAuthed = false }: { redirectIfNotAuthed?: boolean }) => {
-    const [isSignedIn, setSignedIn] = useSharedState('isSignedIn', false)
-    const [isLoading, setLoading] = useSharedState('isLoading', true)
-    const signout = useCallback(() => setSignedIn(false), [setSignedIn])
-
-    const router = useRouter();
-    if (redirectIfNotAuthed && !isLoading && isSignedIn === false) {
-        router.push('/signin')
-    }
-
-    useEffect(() => {
-        async function checkToken() {
-            const token = localStorage.getItem('drift-token')
-            if (token) {
-                const response = await fetch('/api/auth/verify-token', {
-                    method: 'GET',
-                    headers: {
-                        'Authorization': `Bearer ${token}`
-                    }
-                })
-                if (response.ok) {
-                    setSignedIn(true)
-                }
-            }
-            setLoading(false)
-        }
-        setLoading(true)
-        checkToken()
-
-        const interval = setInterval(() => {
-            checkToken()
-        }, 10000);
-
-        return () => clearInterval(interval);
-    }, [setLoading, setSignedIn])
-
-    return { isSignedIn, isLoading, signout }
-}
-
-export default useSignedIn

client/lib/time-ago.ts

@@ -1,41 +0,0 @@
-// Modified from https://gist.github.com/IbeVanmeenen/4e3e58820c9168806e57530563612886
-// which is based on https://stackoverflow.com/questions/3177836/how-to-format-time-since-xxx-e-g-4-minutes-ago-similar-to-stack-exchange-site
-
-const epochs = [
-    ['year', 31536000],
-    ['month', 2592000],
-    ['day', 86400],
-    ['hour', 3600],
-    ['minute', 60],
-    ['second', 1]
-] as const;
-
-// Get duration
-const getDuration = (timeAgoInSeconds: number) => {
-    for (let [name, seconds] of epochs) {
-        const interval = Math.floor(timeAgoInSeconds / seconds);
-
-        if (interval >= 1) {
-            return {
-                interval: interval,
-                epoch: name
-            };
-        }
-    }
-
-    return {
-        interval: 0,
-        epoch: 'second'
-    }
-};
-
-// Calculate
-const timeAgo = (date: Date) => {
-    const timeAgoInSeconds = Math.floor((new Date().getTime() - new Date(date).getTime()) / 1000);
-    const { interval, epoch } = getDuration(timeAgoInSeconds);
-    const suffix = interval === 1 ? '' : 's';
-
-    return `${interval} ${epoch}${suffix} ago`;
-};
-
-export default timeAgo

client/next.config.js

@@ -1,20 +0,0 @@
-const dotenv = require("dotenv");
-dotenv.config();
-
-/** @type {import('next').NextConfig} */
-const nextConfig = {
-  reactStrictMode: true,
-  experimental: {
-    outputStandalone: true,
-  },
-  async rewrites() {
-    return [
-      {
-        source: "/api/:path*",
-        destination: `${process.env.API_URL}/:path*`,
-      },
-    ];
-  },
-};
-
-module.exports = nextConfig;

client/package.json

@@ -1,41 +0,0 @@
-{
-  "name": "drift",
-  "version": "0.1.0",
-  "private": true,
-  "scripts": {
-    "dev": "next dev --port 3001",
-    "build": "next build",
-    "start": "next start",
-    "lint": "next lint"
-  },
-  "dependencies": {
-    "@fec/remark-a11y-emoji": "^3.1.0",
-    "@geist-ui/core": "^2.3.5",
-    "@geist-ui/icons": "^1.0.1",
-    "comlink": "^4.3.1",
-    "dotenv": "^16.0.0",
-    "next": "12.1.0",
-    "prismjs": "^1.27.0",
-    "react": "17.0.2",
-    "react-debounce-render": "^8.0.2",
-    "react-dom": "17.0.2",
-    "react-dropzone": "^12.0.4",
-    "react-loading-skeleton": "^3.0.3",
-    "react-markdown": "^8.0.0",
-    "react-syntax-highlighter": "^15.4.5",
-    "react-syntax-highlighter-virtualized-renderer": "^1.1.0",
-    "rehype-katex": "^6.0.2",
-    "rehype-stringify": "^9.0.3",
-    "remark-gfm": "^3.0.1",
-    "remark-math": "^5.1.1",
-    "swr": "^1.2.2"
-  },
-  "devDependencies": {
-    "@types/node": "17.0.21",
-    "@types/react": "17.0.39",
-    "@types/react-syntax-highlighter": "^13.5.2",
-    "eslint": "8.10.0",
-    "eslint-config-next": "12.1.0",
-    "typescript": "4.6.2"
-  }
-}

client/pages/_app.tsx

@@ -1,73 +0,0 @@
-import '../styles/globals.css'
-import { GeistProvider, CssBaseline, useTheme } from '@geist-ui/core'
-import { useEffect, useMemo, useState } from 'react'
-import type { AppProps as NextAppProps } from "next/app";
-import useSharedState from '../lib/hooks/use-shared-state';
-
-import 'react-loading-skeleton/dist/skeleton.css'
-import { SkeletonTheme } from 'react-loading-skeleton';
-import Head from 'next/head';
-
-export type ThemeProps = {
-  theme: "light" | "dark" | string,
-  changeTheme: () => void
-}
-
-type AppProps<P = any> = {
-  pageProps: P;
-} & Omit<NextAppProps<P>, "pageProps">;
-
-export type DriftProps = ThemeProps
-
-function MyApp({ Component, pageProps }: AppProps<ThemeProps>) {
-  const [themeType, setThemeType] = useSharedState<string>('theme', 'light')
-  const theme = useTheme();
-  useEffect(() => {
-    if (typeof window === 'undefined' || !window.localStorage) return
-    const storedTheme = window.localStorage.getItem('drift-theme')
-    if (storedTheme) setThemeType(storedTheme)
-    // TODO: useReducer?
-  }, [setThemeType, themeType])
-
-  const changeTheme = () => {
-    const newTheme = themeType === 'dark' ? 'light' : 'dark'
-    localStorage.setItem('drift-theme', newTheme)
-    setThemeType(last => (last === 'dark' ? 'light' : 'dark'))
-  }
-
-  const skeletonBaseColor = useMemo(() => {
-    if (themeType === 'dark') return '#333'
-    return '#eee'
-  }, [themeType])
-  const skeletonHighlightColor = useMemo(() => {
-    if (themeType === 'dark') return '#555'
-    return '#ddd'
-  }, [themeType])
-
-  return (
-    <>
-      <Head>
-        <meta charSet="utf-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
-
-        <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
-        <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
-        <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
-        <link rel="manifest" href="/site.webmanifest" />
-        <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
-        <meta name="apple-mobile-web-app-title" content="Drift" />
-        <meta name="application-name" content="Drift" />
-        <meta name="msapplication-TileColor" content="#da532c" />
-        <meta name="theme-color" content="#ffffff" />
-      </Head>
-      <GeistProvider themeType={themeType} >
-        <SkeletonTheme baseColor={skeletonBaseColor} highlightColor={skeletonHighlightColor}>
-          <CssBaseline />
-          <Component {...pageProps} theme={themeType || 'light'} changeTheme={changeTheme} />
-        </SkeletonTheme>
-      </GeistProvider>
-    </>
-  )
-}
-
-export default MyApp

client/pages/_document.tsx

@@ -1,31 +0,0 @@
-import Document, { Html, Head, Main, NextScript, DocumentContext } from 'next/document'
-import { CssBaseline } from '@geist-ui/core'
-
-class MyDocument extends Document {
-    static async getInitialProps(ctx: DocumentContext) {
-        const initialProps = await Document.getInitialProps(ctx)
-        const styles = CssBaseline.flush()
-
-        return {
-            ...initialProps,
-            styles: (
-                <>
-                    {initialProps.styles}
-                    {styles}
-                </>
-            )
-        }
-    }
-
-    render() {
-        return (<Html lang="en">
-            <Head />
-            <body>
-                <Main />
-                <NextScript />
-            </body>
-        </Html>)
-    }
-}
-
-export default MyDocument

client/pages/index.tsx

@@ -1,66 +0,0 @@
-import Head from 'next/head'
-import styles from '../styles/Home.module.css'
-import { Page, Spacer, Text } from '@geist-ui/core'
-
-import Header from '../components/header'
-import { ThemeProps } from './_app'
-import Document from '../components/document'
-import Image from 'next/image'
-import ShiftBy from '../components/shift-by'
-
-export function getStaticProps() {
-  const introDoc = `### Drift is a self-hostable clone of GitHub Gist.
-#### It is a simple way to share code and text snippets with your friends, with support for the following:
-  
-  - Render GitHub Extended Markdown (including images)
-  - User authentication
-  - Private, public, and secret posts
-  
-  If you want to signup, you can join at [/signup](/signup) as long as you have a passcode provided by the administrator (which you don't need for this demo).
-  **This demo is on a memory-only database, so accounts and pastes can be deleted at any time.**
-  You can find the source code on [GitHub](https://github.com/MaxLeiter/drift).
-  
-  Drift was inspired by [this tweet](https://twitter.com/emilyst/status/1499858264346935297):
-  > What is the absolute closest thing to GitHub Gist that can be self-hosted?
-    In terms of design and functionality. Hosts images and markdown, rendered. Creates links that can be private or public. Uses/requires registration.
-    I have looked at dozens of pastebin-like things.
-  `
-  return {
-    props: {
-      introContent: introDoc,
-    }
-  }
-}
-
-type Props = ThemeProps & {
-  introContent: string
-}
-
-const Home = ({ theme, changeTheme, introContent }: Props) => {
-  return (
-    <Page className={styles.container} width="100%">
-      <Head>
-        <title>Drift</title>
-        <meta name="description" content="A self-hostable clone of GitHub Gist" />
-      </Head>
-      <Page.Header>
-        <Header theme={theme} changeTheme={changeTheme} />
-      </Page.Header>
-      <Page.Content width={"var(--main-content-width)"} margin="auto" paddingTop={"var(--gap)"}>
-        <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
-          <ShiftBy y={-2}><Image src={'/assets/logo-optimized.svg'} width={'48px'} height={'48px'} alt="" /></ShiftBy>
-          <Spacer />
-          <Text style={{ display: 'inline' }} h1> Welcome to Drift</Text>
-        </div>
-        <Document
-          editable={false}
-          content={introContent}
-          title={`Welcome to Drift.md`}
-          initialTab={`preview`}
-        />
-      </Page.Content>
-    </Page >
-  )
-}
-
-export default Home

client/pages/mine.tsx

@@ -1,25 +0,0 @@
-import Head from 'next/head'
-import styles from '../styles/Home.module.css'
-import { Page } from '@geist-ui/core'
-
-import Header from '../components/header'
-import MyPosts from '../components/my-posts'
-
-const Home = ({ theme, changeTheme }: { theme: "light" | "dark", changeTheme: () => void }) => {
-  return (
-    <Page className={styles.container} width="100%">
-      <Head>
-        <title>Drift</title>
-        <meta name="description" content="A self-hostable clone of GitHub Gist" />
-      </Head>
-      <Page.Header>
-        <Header theme={theme} changeTheme={changeTheme} />
-      </Page.Header>
-      <Page.Content paddingTop={"var(--gap)"} width={"var(--main-content-width)"} margin="0 auto" className={styles.main}>
-        <MyPosts />
-      </Page.Content>
-    </Page >
-  )
-}
-
-export default Home

client/pages/new.tsx

@@ -1,33 +0,0 @@
-import Head from 'next/head'
-import styles from '../styles/Home.module.css'
-import NewPost from '../components/new-post'
-import { Page } from '@geist-ui/core'
-import useSignedIn from '../lib/hooks/use-signed-in'
-import Header from '../components/header'
-import { ThemeProps } from './_app'
-import { useRouter } from 'next/router'
-
-const Home = ({ theme, changeTheme }: ThemeProps) => {
-  const router = useRouter()
-  const { isSignedIn, isLoading } = useSignedIn({ redirectIfNotAuthed: true })
-  if (!isSignedIn && !isLoading) {
-    router.push("/signin")
-  }
-  return (
-    <Page className={styles.container} width="100%">
-      <Head>
-        <title>Drift</title>
-      </Head>
-
-      <Page.Header>
-        <Header theme={theme} changeTheme={changeTheme} />
-      </Page.Header>
-
-      <Page.Content paddingTop={"var(--gap)"} width={"var(--main-content-width)"} margin="0 auto" className={styles.main}>
-        {isSignedIn && <NewPost />}
-      </Page.Content>
-    </Page >
-  )
-}
-
-export default Home

client/pages/post/[id].tsx

@@ -1,82 +0,0 @@
-import { Page, Text } from "@geist-ui/core";
-import Skeleton from 'react-loading-skeleton';
-
-import { useRouter } from "next/router";
-import { useEffect, useState } from "react";
-import Document from '../../components/document'
-import Header from "../../components/header";
-import VisibilityBadge from "../../components/visibility-badge";
-import { ThemeProps } from "../_app";
-import Head from "next/head";
-
-const Post = ({ theme, changeTheme }: ThemeProps) => {
-    const [post, setPost] = useState<any>()
-    const [isLoading, setIsLoading] = useState(true)
-    const [error, setError] = useState<string>()
-    const router = useRouter();
-
-    useEffect(() => {
-        async function fetchPost() {
-            setIsLoading(true);
-            if (router.query.id) {
-                const post = await fetch(`/api/posts/${router.query.id}`, {
-                    method: "GET",
-                    headers: {
-                        "Content-Type": "application/json",
-                        "Authorization": `Bearer ${localStorage.getItem("drift-token")}`
-                    }
-                })
-
-                if (post.ok) {
-                    const res = await post.json()
-                    if (res)
-                        setPost(res)
-                    else
-                        setError("Post not found")
-                } else {
-                    if (post.status.toString().startsWith("4")) {
-                        router.push("/signin")
-                    } else {
-                        setError(post.statusText)
-                    }
-                }
-                setIsLoading(false)
-            }
-        }
-        fetchPost()
-    }, [router, router.query.id])
-
-    return (
-        <Page width={"100%"}>
-            <Head>
-                {isLoading && <title>loading - Drift</title>}
-                {!isLoading && <title>{post.title} - Drift</title>}
-                {!isLoading && post.visibility !== 'private' && <meta name="description" content={post.description} />}
-            </Head>
-            <Page.Header>
-                <Header theme={theme} changeTheme={changeTheme} />
-            </Page.Header>
-            <Page.Content width={"var(--main-content-width)"} margin="auto">
-                {error && <Text type="error">{error}</Text>}
-                {/* {!error && (isLoading || !post?.files) && <Loading />} */}
-                {!error && isLoading && <><Text h2><Skeleton width={400} /></Text>
-                    <Document skeleton={true} />
-                </>}
-                {!isLoading && post && <><Text h2>{post.title} <VisibilityBadge visibility={post.visibility} /></Text>
-                    {post.files.map(({ id, content, title }: { id: any, content: string, title: string }) => (
-                        <Document
-                            key={id}
-                            content={content}
-                            title={title}
-                            editable={false}
-                            initialTab={'preview'}
-                        />
-                    ))}
-                </>}
-            </Page.Content>
-        </Page >
-    )
-}
-
-export default Post
-

client/pages/signin.tsx

@@ -1,22 +0,0 @@
-import { Page } from "@geist-ui/core";
-import Head from 'next/head'
-import Auth from "../components/auth";
-import Header from "../components/header";
-import { ThemeProps } from "./_app";
-
-const SignIn = ({ theme, changeTheme }: ThemeProps) => (
-    <Page width={"100%"}>
-        <Head>
-            <title>Drift - Sign In</title>
-            <meta name="description" content="A self-hostable clone of GitHub Gist" />
-        </Head>
-        <Page.Header>
-            <Header theme={theme} changeTheme={changeTheme} />
-        </Page.Header>
-        <Page.Content paddingTop={"var(--gap)"} width={"var(--main-content-width)"} margin="auto">
-            <Auth page="signin" />
-        </Page.Content>
-    </Page>
-)
-
-export default SignIn

client/pages/signup.tsx

@@ -1,22 +0,0 @@
-import { Page } from "@geist-ui/core";
-import Head from "next/head";
-import Auth from "../components/auth";
-import Header from "../components/header";
-import { ThemeProps } from "./_app";
-
-const SignUp = ({ theme, changeTheme }: ThemeProps) => (
-    <Page width="100%">
-        <Head>
-            <title>Drift - Sign Up</title>
-            <meta name="description" content="A self-hostable clone of GitHub Gist" />
-        </Head>
-        <Page.Header>
-            <Header theme={theme} changeTheme={changeTheme} />
-        </Page.Header>
-        <Page.Content width={"var(--main-content-width)"} paddingTop={"var(--gap)"} margin="auto">
-            <Auth page="signup" />
-        </Page.Content>
-    </Page>
-)
-
-export default SignUp

client/public/assets/logo.svg

@@ -1,124 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   width="72.000008"
-   height="72"
-   viewBox="0 0 19.05 19.05"
-   version="1.1"
-   id="svg5"
-   inkscape:export-filename="/home/reese/git/github.com/maxleiter/drift/logo.png"
-   inkscape:export-xdpi="682.66669"
-   inkscape:export-ydpi="682.66669"
-   inkscape:version="1.1.2 (1:1.1+202202050950+0a00cf5339)"
-   sodipodi:docname="logo.svg"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:svg="http://www.w3.org/2000/svg">
-  <sodipodi:namedview
-     id="namedview7"
-     pagecolor="#505050"
-     bordercolor="#ffffff"
-     borderopacity="1"
-     inkscape:pageshadow="0"
-     inkscape:pageopacity="0"
-     inkscape:pagecheckerboard="1"
-     inkscape:document-units="px"
-     showgrid="false"
-     showguides="false"
-     inkscape:zoom="13.877295"
-     inkscape:cx="10.448722"
-     inkscape:cy="34.444753"
-     inkscape:current-layer="g3632"
-     units="px"
-     viewbox-width="19.05" />
-  <defs
-     id="defs2">
-    <clipPath
-       clipPathUnits="userSpaceOnUse"
-       id="clipPath7860">
-      <circle
-         style="display:inline;opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:2.93688;stroke-linecap:round"
-         id="circle7862"
-         cx="115.27311"
-         cy="135.3275"
-         r="9.1405506" />
-    </clipPath>
-    <clipPath
-       clipPathUnits="userSpaceOnUse"
-       id="clipPath7864">
-      <circle
-         style="display:inline;opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:2.93688;stroke-linecap:round"
-         id="circle7866"
-         cx="115.27311"
-         cy="135.3275"
-         r="9.1405506" />
-    </clipPath>
-  </defs>
-  <g
-     inkscape:label="source strokes"
-     inkscape:groupmode="layer"
-     id="layer1"
-     style="display:none"
-     transform="translate(-106.13256,-126.18696)">
-    <path
-       style="fill:none;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-       d="m 114.7741,133.0871 c 0,0 2.24373,3.38322 0.005,7.06735 -2.23896,3.68413 -8.84476,5.87171 -8.84476,5.87171"
-       id="path1824"
-       sodipodi:nodetypes="csc" />
-    <path
-       style="fill:none;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-       d="m 99.71221,140.61603 c 0,0 6.55112,-0.26544 10.1251,-2.27285 3.57398,-2.00741 4.93679,-5.25608 4.93679,-5.25608"
-       id="path857"
-       sodipodi:nodetypes="czc" />
-    <path
-       style="fill:none;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-       d="m 114.7741,133.0871 c 0,0 3.22515,3.50294 1.78507,7.47454 -1.44009,3.97159 -7.66948,7.78507 -7.66948,7.78507"
-       id="path949"
-       sodipodi:nodetypes="czc" />
-    <path
-       style="fill:none;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-       d="m 114.7741,133.0871 c 0,0 6.66681,-0.12736 17.37373,8.90799"
-       id="path1345"
-       sodipodi:nodetypes="cc" />
-  </g>
-  <g
-     inkscape:label="Layer 1 copy"
-     inkscape:groupmode="layer"
-     id="g3632"
-     transform="translate(-106.13256,-126.18696)">
-    <rect
-       style="display:inline;fill:#1b1b1b;fill-opacity:1;stroke:none;stroke-width:2.81834;stroke-linecap:round"
-       id="rect6284"
-       width="18.28112"
-       height="18.28112"
-       x="106.13255"
-       y="126.18695"
-       clip-path="url(#clipPath7864)"
-       transform="matrix(1.0420598,0,0,1.0420598,-4.4639102,-5.3073932)" />
-    <g
-       id="g937"
-       inkscape:label="drift"
-       clip-path="url(#clipPath7860)"
-       mask="none"
-       style="display:inline;stroke-width:0.959638"
-       transform="matrix(1.0420598,0,0,1.0420598,-4.4639102,-5.3073932)">
-      <path
-         id="path935"
-         style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.253904px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-         d="m 132.14783,141.99509 c -10.70692,-9.03535 -17.37373,-8.90799 -17.37373,-8.90799 0,0 2.38807,3.48286 0.94799,7.45446 -1.44009,3.97159 -7.66636,7.74668 -7.66636,7.74668 z"
-         sodipodi:nodetypes="csccc" />
-      <path
-         id="path931"
-         style="fill:#e7e7e7;fill-opacity:1;stroke:none;stroke-width:0.253904px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-         d="m 108.88969,148.34671 c 0,0 6.22939,-3.81348 7.66948,-7.78507 1.44008,-3.9716 -1.78507,-7.47454 -1.78507,-7.47454 0,0 1.22037,3.09102 -1.01836,6.77515 -2.23896,3.68413 -8.92258,4.9787 -8.92258,4.9787 z"
-         sodipodi:nodetypes="cscccc" />
-      <path
-         id="path933"
-         style="fill:#c6c6c6;fill-opacity:1;stroke:none;stroke-width:0.253904px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-         d="m 105.93434,146.02616 c 0,0 6.6058,-2.18758 8.84476,-5.87171 2.23873,-3.68413 -0.005,-7.06735 -0.005,-7.06735 0,0 -1.36281,3.24867 -4.93679,5.25608 -3.57398,2.00741 -10.1251,2.27285 -10.1251,2.27285 z"
-         sodipodi:nodetypes="csccc" />
-    </g>
-  </g>
-</svg>

client/styles/Home.module.css

@@ -1,28 +0,0 @@
-.main {
-  min-height: 100vh;
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  margin: 0 auto;
-  width: var(--main-content-width);
-}
-
-.container {
-  width: 100% !important;
-}
-
-@media screen and (max-width: 768px) {
-  .container {
-    width: 100%;
-    margin: 0 auto !important;
-    padding: 0;
-  }
-
-  .container h1 {
-    font-size: 2rem;
-  }
-
-  .main {
-    width: 100%;
-  }
-}

client/styles/globals.css

@@ -1,32 +0,0 @@
-:root {
-  --main-content-width: 800px;
-  --page-nav-height: 60px;
-  --gap: 8px;
-  --gap-half: calc(var(--gap) / 2);
-  --gap-double: calc(var(--gap) * 2);
-  --border-radius: 4px;
-  --font-size: 16px;
-}
-
-@media screen and (max-width: 768px) {
-  :root {
-    --main-content-width: 100%;
-  }
-}
-
-html,
-body {
-  padding: 0;
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-}
-
-a {
-  color: inherit;
-  text-decoration: none;
-}
-
-* {
-  box-sizing: border-box;
-}

client/tsconfig.json

@@ -1,20 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "noEmit": true,
-    "esModuleInterop": true,
-    "module": "esnext",
-    "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "jsx": "preserve",
-    "incremental": true
-  },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
-  "exclude": ["node_modules"]
-}

components.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "app/globals.css",
+    "baseColor": "slate",
+    "cssVariables": true
+  },
+  "aliases": {
+    "components": "@components",
+    "utils": "@utils"
+  }
+}

docker-compose.yml

@@ -0,0 +1,34 @@
+services:
+  server:
+    build:
+      context: ./server
+      args:
+        - NODE_ENV=production
+    container_name: server
+    restart: unless-stopped
+    user: 1000:1000
+    environment:
+      - PORT
+      - JWT_SECRET=jwt_secret # change_me! # use `openssl rand -hex 32` to generate a strong secret
+      - SECRET_KEY=secret # change me!
+      - MEMORY_DB
+      - REGISTRATION_PASSWORD
+      - WELCOME_CONTENT
+      - WELCOME_TITLE
+      - ENABLE_ADMIN
+      - DRIFT_HOME
+    ports:
+      - "3000:3000"
+  client:
+    build:
+      context: ./client
+      args:
+        - API_URL=http://server:3000
+    container_name: client
+    restart: unless-stopped
+    user: 1000:1000
+    environment:
+      - API_URL=http://server:3000
+      - SECRET_KEY=secret # change me!
+    ports:
+      - "3001:3001"

jest.config.js

@@ -0,0 +1,16 @@
+/** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
+module.exports = {
+	preset: "ts-jest",
+	testEnvironment: "node",
+	setupFiles: ["<rootDir>/src/test/setup-tests.ts"],
+	// TODO: update to app dir
+	moduleNameMapper: {
+		"@lib/(.*)": "<rootDir>/src/lib/$1",
+		"@components/(.*)": "<rootDir>/src/app/components/$1",
+		"\\.(css)$": "identity-obj-proxy"
+	},
+	testPathIgnorePatterns: ["/node_modules/", "/.next/"],
+	transform: {
+		"^.+\\.(js|jsx|ts|tsx)$": "ts-jest"
+	}
+}

next-env.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+/// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/basic-features/typescript for more information.

next.config.mjs

@@ -0,0 +1,46 @@
+import bundleAnalyzer from "@next/bundle-analyzer"
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+	reactStrictMode: true,
+	experimental: {
+		appDir: true
+	},
+	rewrites() {
+		return [
+			{
+				source: "/file/raw/:id",
+				destination: `/api/raw/:id`
+			},
+			{
+				source: "/signout",
+				destination: `/api/auth/signout`
+			}
+		]
+	},
+	images: {
+		domains: ["avatars.githubusercontent.com"]
+	},
+	env: {
+		NEXT_PUBLIC_DRIFT_URL:
+			process.env.DRIFT_URL ||
+			(process.env.VERCEL_URL
+				? `https://${process.env.VERCEL_URL}`
+				: "http://localhost:3000")
+	},
+	eslint: {
+		ignoreDuringBuilds: process.env.VERCEL_ENV !== "production"
+	},
+	typescript: {
+		ignoreBuildErrors: process.env.VERCEL_ENV !== "production"
+	},
+	modularizeImports: {
+		"react-feather": {
+			transform: "react-feather/dist/icons/{{kebabCase member}}"
+		}
+	}
+}
+
+export default process.env.ANALYZE === "true"
+	? bundleAnalyzer({ enabled: true })(nextConfig)
+	: nextConfig

package.json

@@ -0,0 +1,113 @@
+{
+	"name": "drift",
+	"version": "0.1.0",
+	"private": true,
+	"scripts": {
+		"dev": "next dev --port 3000",
+		"build": "next build",
+		"start": "next start --port 3000",
+		"lint": "next lint && prettier --list-different --config .prettierrc 'src/{components,lib,app,pages}/**/*.{ts,tsx}' --write",
+		"analyze": "cross-env ANALYZE=true next build",
+		"find:unused": "next-unused",
+		"prisma": "prisma",
+		"jest": "jest"
+	},
+	"dependencies": {
+		"@next-auth/prisma-adapter": "^1.0.7",
+		"@next/eslint-plugin-next": "13.4.11-canary.0",
+		"@prisma/client": "^5.0.0",
+		"@radix-ui/react-alert-dialog": "^1.0.4",
+		"@radix-ui/react-dialog": "^1.0.3",
+		"@radix-ui/react-dropdown-menu": "^2.0.4",
+		"@radix-ui/react-navigation-menu": "^1.1.3",
+		"@radix-ui/react-popover": "^1.0.5",
+		"@radix-ui/react-slot": "^1.0.2",
+		"@radix-ui/react-tabs": "^1.0.3",
+		"@radix-ui/react-tooltip": "^1.0.5",
+		"@tailwindcss/nesting": "0.0.0-insiders.565cd3e",
+		"@tailwindcss/typography": "^0.5.9",
+		"class-variance-authority": "^0.6.0",
+		"client-only": "^0.0.1",
+		"client-zip": "2.3.1",
+		"cmdk": "^0.2.0",
+		"date-fns": "^2.30.0",
+		"jest": "^29.5.0",
+		"lodash.debounce": "^4.0.8",
+		"next": "13.4.11-canary.1",
+		"next-auth": "^4.22.3",
+		"next-themes": "^0.2.1",
+		"react": "18.2.0",
+		"react-cookie": "^4.1.1",
+		"react-datepicker": "4.10.0",
+		"react-day-picker": "^8.8.0",
+		"react-dom": "18.2.0",
+		"react-dropzone": "14.2.3",
+		"react-error-boundary": "^4.0.4",
+		"react-feather": "^2.0.10",
+		"react-hot-toast": "2.4.1",
+		"server-only": "^0.0.1",
+		"swr": "^2.2.0",
+		"tailwind-merge": "^1.13.0",
+		"tailwindcss-animate": "^1.0.5",
+		"textarea-markdown-editor": "1.0.4",
+		"ts-jest": "^29.1.0",
+		"uuid": "^9.0.0"
+	},
+	"devDependencies": {
+		"@next/bundle-analyzer": "13.4.11-canary.0",
+		"@total-typescript/ts-reset": "^0.4.2",
+		"@types/bcrypt": "^5.0.0",
+		"@types/git-http-backend": "^1.0.1",
+		"@types/jest": "^29.4.1",
+		"@types/lodash.debounce": "^4.0.7",
+		"@types/node": "18.15.11",
+		"@types/react": "18.0.35",
+		"@types/react-datepicker": "4.10.0",
+		"@types/react-dom": "18.0.11",
+		"@types/uuid": "^9.0.1",
+		"@typescript-eslint/eslint-plugin": "^5.58.0",
+		"@typescript-eslint/parser": "^5.58.0",
+		"@wcj/markdown-to-html": "^2.2.1",
+		"autoprefixer": "^10.4.14",
+		"clsx": "^1.2.1",
+		"cross-env": "7.0.3",
+		"csstype": "^3.1.2",
+		"dotenv": "^16.0.3",
+		"eslint": "8.38.0",
+		"eslint-config-next": "13.4.11-canary.1",
+		"jest-mock-extended": "^3.0.3",
+		"next-unused": "0.0.6",
+		"postcss": "^8.4.21",
+		"postcss-flexbugs-fixes": "^5.0.2",
+		"postcss-hover-media-feature": "^1.0.2",
+		"postcss-nested": "^6.0.1",
+		"postcss-preset-env": "^8.4.1",
+		"prettier": "2.8.7",
+		"prettier-plugin-tailwindcss": "^0.3.0",
+		"prisma": "^5.0.0",
+		"tailwindcss": "^3.3.2",
+		"typescript": "5.1.6",
+		"typescript-plugin-css-modules": "5.0.1"
+	},
+	"optionalDependencies": {
+		"sharp": "^0.32.0"
+	},
+	"next-unused": {
+		"alias": {
+			"@components": "components/",
+			"@lib": "src/lib/",
+			"@styles": "styles/"
+		},
+		"include": [
+			"components",
+			"lib"
+		]
+	},
+	"prisma": {
+		"schema": "src/prisma/schema.prisma"
+	},
+	"overrides": {
+		"react": "18.2.0",
+		"react-dom": "18.2.0"
+	}
+}

postcss.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+	plugins: {
+		"@tailwindcss/nesting": {},
+		tailwindcss: {},
+		autoprefixer: {}
+	}
+}

renovate.json

@@ -0,0 +1,3 @@
+{
+  "extends": ["config:base", "group:allNonMajor", "schedule:earlyMondays"]
+}

server/.dockerignore

@@ -1 +0,0 @@
-node_modules/

server/.gitignore

@@ -1,3 +0,0 @@
-.env
-node_modules/
-dist/

server/Dockerfile

@@ -1,38 +0,0 @@
-# Install dependencies only when needed
-FROM node:16-alpine AS deps
-# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
-RUN apk add --no-cache libc6-compat git
-WORKDIR /app
-COPY package.json yarn.lock tsconfig.json tslint.json ./
-RUN yarn install --frozen-lockfile
-
-# If using npm with a `package-lock.json` comment out above and use below instead
-# COPY package.json package-lock.json ./ 
-# RUN npm ci
-
-# Rebuild the source code only when needed
-FROM node:16-alpine AS builder
-WORKDIR /app
-COPY --from=deps /app/node_modules ./node_modules
-COPY . .
-
-RUN yarn build
-
-FROM node:16-alpine AS runner
-WORKDIR /app
-
-ENV NODE_ENV production
-
-RUN addgroup --system --gid 1001 nodejs
-RUN adduser --system --uid 1001 drift
-
-COPY --from=builder /app/dist ./dist
-COPY --from=builder /app/node_modules ./node_modules
-
-USER drift
-
-EXPOSE 3000
-
-ENV PORT 3000
-
-CMD ["node", "dist/index.js"]

server/index.ts

@@ -1,4 +0,0 @@
-import * as dotenv from 'dotenv';
-dotenv.config();
-
-import './src/server';

server/lib/config.ts

@@ -1,4 +0,0 @@
-export default {
-    port: process.env.PORT || 3000,
-    jwt_secret: process.env.JWT_SECRET || 'myjwtsecret',
-}

server/lib/middleware/jwt.ts

@@ -1,30 +0,0 @@
-import { NextFunction, Request, Response } from 'express';
-import * as jwt from 'jsonwebtoken';
-import config from '../config';
-import { User as UserModel } from '../models/User';
-
-export interface User {
-    id: string;
-}
-
-export interface UserJwtRequest extends Request {
-    user?: User;
-}
-
-export default function authenticateToken(req: UserJwtRequest, res: Response, next: NextFunction) {
-    const authHeader = req.headers['authorization']
-    const token = authHeader && authHeader.split(' ')[1]
-
-    if (token == null) return res.sendStatus(401)
-
-    jwt.verify(token, config.jwt_secret, async (err: any, user: any) => {
-        if (err) return res.sendStatus(403)
-        const userObj = await UserModel.findByPk(user.id);
-        if (!userObj) {
-            return res.sendStatus(403);
-        }
-        req.user = user
-
-        next()
-    })
-}

server/lib/models/File.ts

@@ -1,49 +0,0 @@
-import { BelongsTo, Column, CreatedAt, DataType, ForeignKey, IsUUID, Model, PrimaryKey, Scopes, Table } from 'sequelize-typescript';
-import { Post } from './Post';
-import { User } from './User';
-
-
-@Scopes(() => ({
-  full: {
-    include: [{
-      model: User,
-      through: { attributes: [] },
-    },
-    {
-      model: Post,
-      through: { attributes: [] },
-    }]
-  }
-}))
-
-@Table
-export class File extends Model {
-  @IsUUID(4)
-  @PrimaryKey
-  @Column({
-    type: DataType.UUID,
-    defaultValue: DataType.UUIDV4,
-  })
-  id!: string
-
-  @Column
-  title!: string;
-
-  @Column
-  content!: string;
-
-  @Column
-  sha!: string;
-
-  @ForeignKey(() => User)
-  @BelongsTo(() => User, 'userId')
-  user!: User;
-
-  @ForeignKey(() => Post)
-  @BelongsTo(() => Post, 'postId')
-  post!: Post;
-
-  @CreatedAt
-  @Column
-  createdAt!: Date;
-}

server/lib/models/Post.ts

@@ -1,54 +0,0 @@
-import { BelongsToMany, Column, CreatedAt, DataType, HasMany, IsUUID, Model, PrimaryKey, Scopes, Table, UpdatedAt } from 'sequelize-typescript';
-import { PostAuthor } from './PostAuthor';
-import { User } from './User';
-import { File } from './File';
-
-@Scopes(() => ({
-  user: {
-    include: [{
-      model: User,
-      through: { attributes: [] },
-    }],
-  },
-  full: {
-    include: [{
-      model: User,
-      through: { attributes: [] },
-    },
-    {
-      model: File,
-      through: { attributes: [] },
-    }]
-  }
-}))
-
-@Table
-export class Post extends Model {
-  @IsUUID(4)
-  @PrimaryKey
-  @Column({
-    type: DataType.UUID,
-    defaultValue: DataType.UUIDV4,
-  })
-  id!: string
-
-  @Column
-  title!: string;
-
-  @BelongsToMany(() => User, () => PostAuthor)
-  users?: User[];
-
-  @HasMany(() => File)
-  files?: File[];
-
-  @CreatedAt
-  @Column
-  createdAt!: Date;
-
-  @Column
-  visibility!: string;
-
-  @UpdatedAt
-  @Column
-  updatedAt!: Date;
-}

server/lib/models/PostAuthor.ts

@@ -1,22 +0,0 @@
-import { Model, Column, Table, ForeignKey, IsUUID, PrimaryKey, DataType } from "sequelize-typescript";
-import { Post } from "./Post";
-import { User } from "./User";
-
-@Table
-export class PostAuthor extends Model {
-  @IsUUID(4)
-  @PrimaryKey
-  @Column({
-    type: DataType.UUID,
-    defaultValue: DataType.UUIDV4,
-  })
-  id!: string
-
-  @ForeignKey(() => Post)
-  @Column
-  postId!: number;
-
-  @ForeignKey(() => User)
-  @Column
-  authorId!: number;
-}

server/lib/models/User.ts

@@ -1,47 +0,0 @@
-import { Model, Column, Table, BelongsToMany, Scopes, CreatedAt, UpdatedAt, IsUUID, PrimaryKey, DataType } from "sequelize-typescript";
-import { Post } from "./Post";
-import { PostAuthor } from "./PostAuthor";
-
-@Scopes(() => ({
-    posts: {
-        include: [
-            {
-                model: Post,
-                through: { attributes: [] },
-            },
-        ],
-    },
-    withoutPassword: {
-        attributes: {
-            exclude: ["password"]
-        }
-    }
-}))
-
-@Table
-export class User extends Model {
-    @IsUUID(4)
-    @PrimaryKey
-    @Column({
-        type: DataType.UUID,
-        defaultValue: DataType.UUIDV4,
-    })
-    id!: string
-
-    @Column
-    username!: string;
-
-    @Column
-    password!: string;
-
-    @BelongsToMany(() => Post, () => PostAuthor)
-    posts?: Post[];
-
-    @CreatedAt
-    @Column
-    createdAt!: Date;
-
-    @UpdatedAt
-    @Column
-    updatedAt!: Date;
-}

server/lib/sequelize.ts

@@ -1,8 +0,0 @@
-import {Sequelize} from 'sequelize-typescript';
-
-export const sequelize = new Sequelize({
-  dialect: 'sqlite',
-  database: 'movies',
-  storage: ':memory:',
-  models: [__dirname + '/models']
-});

server/package.json

@@ -1,39 +0,0 @@
-{
-  "name": "sequelize-typescript-starter",
-  "version": "1.0.0",
-  "description": "",
-  "main": "index.ts",
-  "scripts": {
-    "start": "ts-node index.ts",
-    "dev": "nodemon index.ts",
-    "build": "tsc -p ."
-  },
-  "author": "",
-  "license": "ISC",
-  "dependencies": {
-    "bcrypt": "^5.0.1",
-    "body-parser": "^1.18.2",
-    "cors": "^2.8.5",
-    "dotenv": "^16.0.0",
-    "express": "^4.16.2",
-    "express-jwt": "^6.1.1",
-    "jsonwebtoken": "^8.5.1",
-    "nodemon": "^2.0.15",
-    "reflect-metadata": "^0.1.10",
-    "sequelize": "^6.17.0",
-    "sequelize-typescript": "^2.1.3",
-    "sqlite3": "https://github.com/mapbox/node-sqlite3#918052b538b0effe6c4a44c74a16b2749c08a0d2",
-    "strong-error-handler": "^4.0.0"
-  },
-  "devDependencies": {
-    "@types/bcrypt": "^5.0.0",
-    "@types/cors": "^2.8.12",
-    "@types/express": "^4.0.39",
-    "@types/express-jwt": "^6.0.4",
-    "@types/jsonwebtoken": "^8.5.8",
-    "@types/node": "^17.0.21",
-    "ts-node": "^10.6.0",
-    "tslint": "^6.1.3",
-    "typescript": "^4.6.2"
-  }
-}

server/src/app.ts

@@ -1,24 +0,0 @@
-import * as express from 'express';
-import * as bodyParser from 'body-parser';
-import * as errorhandler from 'strong-error-handler';
-import * as cors from 'cors';
-import { posts, users, auth } from './routes';
-
-export const app = express();
-
-app.use(bodyParser.urlencoded({ extended: true }));
-app.use(bodyParser.json({ limit: '5mb' }));
-
-const corsOptions = {
-    origin: `http://localhost:3001`,
-};
-app.use(cors(corsOptions));
-
-app.use("/auth", auth)
-app.use("/posts", posts)
-app.use("/users", users)
-
-app.use(errorhandler({
-    debug: process.env.ENV !== 'production',
-    log: true,
-}));