Update to next 13, switch to pnpm (#127)

* switch to pnpm

* dep improvements, style fixes, next/link codemod

* server: upgrade sqlite

Author: MaxLeiter

client/.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+  "typescript.tsdk": "./node_modules/typescript/lib",
+  "typescript.enablePromptUseWorkspaceTsdk": true
+}

client/components/Link.tsx

@@ -1,4 +1,3 @@
-import { Text, Spacer } from "@geist-ui/core"
 import Cookies from "js-cookie"
 import styles from "./admin.module.css"
 import PostTable from "./post-table"
@@ -23,10 +22,18 @@ export const adminFetcher = async (
 const Admin = () => {
 	return (
 		<div className={styles.adminWrapper}>
-			<Text h2>Administration</Text>
-			<UserTable />
-			<Spacer height={1} />
-			<PostTable />
+			<h2>Administration</h2>
+			<div
+				style={{
+					display: "flex",
+					flexDirection: "column",
+					alignItems: "center",
+					gap: 4
+				}}
+			>
+				<UserTable />
+				<PostTable />
+			</div>
 		</div>
 	)
 }

client/components/admin/index.tsx

@@ -1,10 +1,12 @@
 import { FormEvent, useEffect, useState } from "react"
-import { Button, Input, Text, Note } from "@geist-ui/core"
 import styles from "./auth.module.css"
 import { useRouter } from "next/router"
-import Link from "../Link"
+import Link from "../link"
 import Cookies from "js-cookie"
 import useSignedIn from "@lib/hooks/use-signed-in"
+import Input from "@components/input"
+import Button from "@components/button"
+import Note from "@components/note"
 
 const NO_EMPTY_SPACE_REGEX = /^\S*$/
 const ERROR_MESSAGE =
@@ -90,58 +92,57 @@ const Auth = ({ page }: { page: "signup" | "signin" }) => {
 				<form onSubmit={handleSubmit}>
 					<div className={styles.formGroup}>
 						<Input
-							htmlType="text"
+							type="text"
 							id="username"
 							value={username}
-							onChange={(event) => setUsername(event.target.value)}
+							onChange={(event) => setUsername(event.currentTarget.value)}
 							placeholder="Username"
 							required
-							scale={4 / 3}
 						/>
 						<Input
-							htmlType="password"
+							type="password"
 							id="password"
 							value={password}
-							onChange={(event) => setPassword(event.target.value)}
+							onChange={(event) => setPassword(event.currentTarget.value)}
 							placeholder="Password"
 							required
-							scale={4 / 3}
 						/>
 						{requiresServerPassword && (
 							<Input
-								htmlType="password"
+								type="password"
 								id="server-password"
 								value={serverPassword}
-								onChange={(event) => setServerPassword(event.target.value)}
+								onChange={(event) =>
+									setServerPassword(event.currentTarget.value)
+								}
 								placeholder="Server Password"
 								required
-								scale={4 / 3}
 							/>
 						)}
 
-						<Button type="success" htmlType="submit">
+						<Button buttonType="primary" type="submit">
 							{signingIn ? "Sign In" : "Sign Up"}
 						</Button>
 					</div>
 					<div className={styles.formContentSpace}>
 						{signingIn ? (
-							<Text>
+							<p>
 								Don&apos;t have an account?{" "}
-								<Link color href="/signup">
+								<Link colored href="/signup">
 									Sign up
 								</Link>
-							</Text>
+							</p>
 						) : (
-							<Text>
+							<p>
 								Already have an account?{" "}
-								<Link color href="/signin">
+								<Link colored href="/signin">
 									Sign in
 								</Link>
-							</Text>
+							</p>
 						)}
 					</div>
 					{errorMsg && (
-						<Note scale={0.75} type="error">
+						<Note type="error">
 							{errorMsg}
 						</Note>
 					)}

client/components/auth/index.tsx

@@ -1,26 +1,22 @@
+.button:root {
+	--hover: var(--bg);
+	--hover-bg: var(--fg);
+}
+
 .button {
 	user-select: none;
 	cursor: pointer;
 	border-radius: var(--radius);
-	color: var(--input-fg);
-	font-weight: 400;
-	font-size: 1.1rem;
-	background: var(--input-bg);
-	border: var(--input-border);
-	height: 2rem;
-	display: flex;
-	align-items: center;
-	padding: var(--gap-quarter) var(--gap-half);
-	transition: background-color var(--transition), color var(--transition);
-	width: 100%;
-	height: var(--input-height);
+	border: 1px solid var(--border);
+	padding: var(--gap-half) var(--gap);
 }
 
 .button:hover,
 .button:focus {
 	outline: none;
-	background: var(--input-bg-hover);
-	border: var(--input-border-focus);
+	color: var(--hover);
+	background: var(--hover-bg);
+	border: var(--);
 }
 
 .button[disabled] {
@@ -38,3 +34,20 @@
 	background: var(--fg);
 	color: var(--bg);
 }
+
+.icon {
+	display: inline-block;
+	width: 1em;
+	height: 1em;
+	vertical-align: middle;
+}
+
+.iconRight {
+	margin-left: var(--gap-half);
+}
+
+.icon svg {
+	display: block;
+	width: 100%;
+	height: 100%;
+}

client/components/button/button.module.css

@@ -6,6 +6,7 @@ type Props = React.HTMLProps<HTMLButtonElement> & {
 	buttonType?: "primary" | "secondary"
 	className?: string
 	onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void
+	iconRight?: React.ReactNode
 }
 
 // eslint-disable-next-line react/display-name
@@ -18,6 +19,7 @@ const Button = forwardRef<HTMLButtonElement, Props>(
 			buttonType = "primary",
 			type = "button",
 			disabled = false,
+			iconRight,
 			...props
 		},
 		ref
@@ -31,6 +33,11 @@ const Button = forwardRef<HTMLButtonElement, Props>(
 				{...props}
 			>
 				{children}
+				{iconRight && (
+					<span className={`${styles.icon} ${styles.iconRight}`}>
+						{iconRight}
+					</span>
+				)}
 			</button>
 		)
 	}

client/components/button/index.tsx

@@ -1,16 +1,29 @@
 import { File } from "@lib/types"
-import { Card, Link, Text } from "@geist-ui/core"
 import FileIcon from "@geist-ui/icons/fileText"
 import CodeIcon from "@geist-ui/icons/fileLambda"
 import styles from "./file-tree.module.css"
 import ShiftBy from "@components/shift-by"
 import { useEffect, useState } from "react"
 import { codeFileExtensions } from "@lib/constants"
+import Link from "@components/link"
 
 type Item = File & {
 	icon: JSX.Element
 }
 
+const Card = ({
+	children,
+	className,
+	...props
+}: {
+	children: React.ReactNode
+	className?: string
+} & React.ComponentProps<"div">) => (
+	<div className={styles.card} {...props}>
+		{children}
+	</div>
+)
+
 const FileTree = ({ files }: { files: File[] }) => {
 	const [items, setItems] = useState<Item[]>([])
 	useEffect(() => {
@@ -34,13 +47,13 @@ const FileTree = ({ files }: { files: File[] }) => {
 	// a list of files with an icon and a title
 	return (
 		<div className={styles.fileTreeWrapper}>
-			<Card height={"100%"} className={styles.card}>
+			<Card className={styles.card}>
 				<div className={styles.cardContent}>
-					<Text h4>Files</Text>
+					<h4>Files</h4>
 					<ul className={styles.fileTree}>
 						{items.map(({ id, title, icon }) => (
 							<li key={id}>
-								<Link color={false} href={`#${title}`}>
+								<Link href={`#${title}`}>
 									<ShiftBy y={5}>
 										<span className={styles.fileTreeIcon}>{icon}</span>
 									</ShiftBy>

client/components/file-tree/index.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import {
 	ButtonGroup,
 	Button,
@@ -168,19 +170,18 @@ const Header = () => {
 				)
 			} else if (tab.href) {
 				return (
-					<Link key={tab.value} href={tab.href}>
-						<a className={styles.tab}>
-							<Button
-								className={activeStyle}
-								auto={isMobile ? false : true}
-								icon={tab.icon}
-								shadow={false}
-							>
-								{tab.name ? tab.name : undefined}
-							</Button>
-						</a>
-					</Link>
-				)
+                    (<Link key={tab.value} href={tab.href} className={styles.tab}>
+                        <Button
+                            className={activeStyle}
+                            auto={isMobile ? false : true}
+                            icon={tab.icon}
+                            shadow={false}
+                        >
+                            {tab.name ? tab.name : undefined}
+                        </Button>
+
+                    </Link>)
+                );
 			}
 		},
 		[isMobile, onTabChange, router.pathname]

client/components/header/index.tsx

@@ -20,8 +20,8 @@ const Home = ({
 				<ShiftBy y={-2}>
 					<Image
 						src={"/assets/logo-optimized.svg"}
-						width={"48px"}
-						height={"48px"}
+						width={48}
+						height={48}
 						alt=""
 					/>
 				</ShiftBy>

client/components/home/index.tsx

@@ -23,7 +23,7 @@
 }
 
 .input::placeholder {
-  font-size: 1.5rem;
+  font-size: 1rem;
 }
 
 .input:focus {

client/components/input/input.module.css

@@ -0,0 +1,26 @@
+import { useRouter } from "next/router"
+import NextLink from "next/link"
+import styles from "./link.module.css"
+
+type LinkProps = {
+	href: string,
+	colored?: boolean,
+	children: React.ReactNode
+} & React.ComponentProps<typeof NextLink>
+
+const Link = ({ href, colored, children, ...props }: LinkProps) => {
+	const { basePath } = useRouter()
+	const propHrefWithoutLeadingSlash =
+		href && href.startsWith("/") ? href.substring(1) : href
+
+	const url = basePath ? `${basePath}/${propHrefWithoutLeadingSlash}` : href
+
+	const className = colored ? `${styles.link} ${styles.color}` : styles.link
+	return (
+		<NextLink {...props} href={url} className={className}>
+			{children}
+		</NextLink>
+	)
+}
+
+export default Link

client/components/link/index.tsx

@@ -0,0 +1,12 @@
+.link {
+    text-decoration: none;
+    color: var(--fg);
+}
+
+.color {
+    color: var(--link);
+}
+
+.color:hover {
+    text-decoration: underline;
+}