Skip to content

Commit 55c5ecf

Browse files
authored
Update to next 13, switch to pnpm (#127)
* switch to pnpm * dep improvements, style fixes, next/link codemod * server: upgrade sqlite
1 parent 9771e64 commit 55c5ecf

31 files changed

+9005
-3401
lines changed

client/.vscode/settings.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"typescript.tsdk": "./node_modules/typescript/lib",
3+
"typescript.enablePromptUseWorkspaceTsdk": true
4+
}

client/components/Link.tsx

Lines changed: 0 additions & 17 deletions
This file was deleted.

client/components/admin/index.tsx

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import { Text, Spacer } from "@geist-ui/core"
21
import Cookies from "js-cookie"
32
import styles from "./admin.module.css"
43
import PostTable from "./post-table"
@@ -23,10 +22,18 @@ export const adminFetcher = async (
2322
const Admin = () => {
2423
return (
2524
<div className={styles.adminWrapper}>
26-
<Text h2>Administration</Text>
27-
<UserTable />
28-
<Spacer height={1} />
29-
<PostTable />
25+
<h2>Administration</h2>
26+
<div
27+
style={{
28+
display: "flex",
29+
flexDirection: "column",
30+
alignItems: "center",
31+
gap: 4
32+
}}
33+
>
34+
<UserTable />
35+
<PostTable />
36+
</div>
3037
</div>
3138
)
3239
}

client/components/auth/index.tsx

Lines changed: 20 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
import { FormEvent, useEffect, useState } from "react"
2-
import { Button, Input, Text, Note } from "@geist-ui/core"
32
import styles from "./auth.module.css"
43
import { useRouter } from "next/router"
5-
import Link from "../Link"
4+
import Link from "../link"
65
import Cookies from "js-cookie"
76
import useSignedIn from "@lib/hooks/use-signed-in"
7+
import Input from "@components/input"
8+
import Button from "@components/button"
9+
import Note from "@components/note"
810

911
const NO_EMPTY_SPACE_REGEX = /^\S*$/
1012
const ERROR_MESSAGE =
@@ -90,58 +92,57 @@ const Auth = ({ page }: { page: "signup" | "signin" }) => {
9092
<form onSubmit={handleSubmit}>
9193
<div className={styles.formGroup}>
9294
<Input
93-
htmlType="text"
95+
type="text"
9496
id="username"
9597
value={username}
96-
onChange={(event) => setUsername(event.target.value)}
98+
onChange={(event) => setUsername(event.currentTarget.value)}
9799
placeholder="Username"
98100
required
99-
scale={4 / 3}
100101
/>
101102
<Input
102-
htmlType="password"
103+
type="password"
103104
id="password"
104105
value={password}
105-
onChange={(event) => setPassword(event.target.value)}
106+
onChange={(event) => setPassword(event.currentTarget.value)}
106107
placeholder="Password"
107108
required
108-
scale={4 / 3}
109109
/>
110110
{requiresServerPassword && (
111111
<Input
112-
htmlType="password"
112+
type="password"
113113
id="server-password"
114114
value={serverPassword}
115-
onChange={(event) => setServerPassword(event.target.value)}
115+
onChange={(event) =>
116+
setServerPassword(event.currentTarget.value)
117+
}
116118
placeholder="Server Password"
117119
required
118-
scale={4 / 3}
119120
/>
120121
)}
121122

122-
<Button type="success" htmlType="submit">
123+
<Button buttonType="primary" type="submit">
123124
{signingIn ? "Sign In" : "Sign Up"}
124125
</Button>
125126
</div>
126127
<div className={styles.formContentSpace}>
127128
{signingIn ? (
128-
<Text>
129+
<p>
129130
Don&apos;t have an account?{" "}
130-
<Link color href="/signup">
131+
<Link colored href="/signup">
131132
Sign up
132133
</Link>
133-
</Text>
134+
</p>
134135
) : (
135-
<Text>
136+
<p>
136137
Already have an account?{" "}
137-
<Link color href="/signin">
138+
<Link colored href="/signin">
138139
Sign in
139140
</Link>
140-
</Text>
141+
</p>
141142
)}
142143
</div>
143144
{errorMsg && (
144-
<Note scale={0.75} type="error">
145+
<Note type="error">
145146
{errorMsg}
146147
</Note>
147148
)}
Lines changed: 27 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,22 @@
1+
.button:root {
2+
--hover: var(--bg);
3+
--hover-bg: var(--fg);
4+
}
5+
16
.button {
27
user-select: none;
38
cursor: pointer;
49
border-radius: var(--radius);
5-
color: var(--input-fg);
6-
font-weight: 400;
7-
font-size: 1.1rem;
8-
background: var(--input-bg);
9-
border: var(--input-border);
10-
height: 2rem;
11-
display: flex;
12-
align-items: center;
13-
padding: var(--gap-quarter) var(--gap-half);
14-
transition: background-color var(--transition), color var(--transition);
15-
width: 100%;
16-
height: var(--input-height);
10+
border: 1px solid var(--border);
11+
padding: var(--gap-half) var(--gap);
1712
}
1813

1914
.button:hover,
2015
.button:focus {
2116
outline: none;
22-
background: var(--input-bg-hover);
23-
border: var(--input-border-focus);
17+
color: var(--hover);
18+
background: var(--hover-bg);
19+
border: var(--);
2420
}
2521

2622
.button[disabled] {
@@ -38,3 +34,20 @@
3834
background: var(--fg);
3935
color: var(--bg);
4036
}
37+
38+
.icon {
39+
display: inline-block;
40+
width: 1em;
41+
height: 1em;
42+
vertical-align: middle;
43+
}
44+
45+
.iconRight {
46+
margin-left: var(--gap-half);
47+
}
48+
49+
.icon svg {
50+
display: block;
51+
width: 100%;
52+
height: 100%;
53+
}

client/components/button/index.tsx

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ type Props = React.HTMLProps<HTMLButtonElement> & {
66
buttonType?: "primary" | "secondary"
77
className?: string
88
onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void
9+
iconRight?: React.ReactNode
910
}
1011

1112
// eslint-disable-next-line react/display-name
@@ -18,6 +19,7 @@ const Button = forwardRef<HTMLButtonElement, Props>(
1819
buttonType = "primary",
1920
type = "button",
2021
disabled = false,
22+
iconRight,
2123
...props
2224
},
2325
ref
@@ -31,6 +33,11 @@ const Button = forwardRef<HTMLButtonElement, Props>(
3133
{...props}
3234
>
3335
{children}
36+
{iconRight && (
37+
<span className={`${styles.icon} ${styles.iconRight}`}>
38+
{iconRight}
39+
</span>
40+
)}
3441
</button>
3542
)
3643
}

client/components/file-tree/index.tsx

Lines changed: 17 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,29 @@
11
import { File } from "@lib/types"
2-
import { Card, Link, Text } from "@geist-ui/core"
32
import FileIcon from "@geist-ui/icons/fileText"
43
import CodeIcon from "@geist-ui/icons/fileLambda"
54
import styles from "./file-tree.module.css"
65
import ShiftBy from "@components/shift-by"
76
import { useEffect, useState } from "react"
87
import { codeFileExtensions } from "@lib/constants"
8+
import Link from "@components/link"
99

1010
type Item = File & {
1111
icon: JSX.Element
1212
}
1313

14+
const Card = ({
15+
children,
16+
className,
17+
...props
18+
}: {
19+
children: React.ReactNode
20+
className?: string
21+
} & React.ComponentProps<"div">) => (
22+
<div className={styles.card} {...props}>
23+
{children}
24+
</div>
25+
)
26+
1427
const FileTree = ({ files }: { files: File[] }) => {
1528
const [items, setItems] = useState<Item[]>([])
1629
useEffect(() => {
@@ -34,13 +47,13 @@ const FileTree = ({ files }: { files: File[] }) => {
3447
// a list of files with an icon and a title
3548
return (
3649
<div className={styles.fileTreeWrapper}>
37-
<Card height={"100%"} className={styles.card}>
50+
<Card className={styles.card}>
3851
<div className={styles.cardContent}>
39-
<Text h4>Files</Text>
52+
<h4>Files</h4>
4053
<ul className={styles.fileTree}>
4154
{items.map(({ id, title, icon }) => (
4255
<li key={id}>
43-
<Link color={false} href={`#${title}`}>
56+
<Link href={`#${title}`}>
4457
<ShiftBy y={5}>
4558
<span className={styles.fileTreeIcon}>{icon}</span>
4659
</ShiftBy>

client/components/header/index.tsx

Lines changed: 14 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
'use client';
2+
13
import {
24
ButtonGroup,
35
Button,
@@ -168,19 +170,18 @@ const Header = () => {
168170
)
169171
} else if (tab.href) {
170172
return (
171-
<Link key={tab.value} href={tab.href}>
172-
<a className={styles.tab}>
173-
<Button
174-
className={activeStyle}
175-
auto={isMobile ? false : true}
176-
icon={tab.icon}
177-
shadow={false}
178-
>
179-
{tab.name ? tab.name : undefined}
180-
</Button>
181-
</a>
182-
</Link>
183-
)
173+
(<Link key={tab.value} href={tab.href} className={styles.tab}>
174+
<Button
175+
className={activeStyle}
176+
auto={isMobile ? false : true}
177+
icon={tab.icon}
178+
shadow={false}
179+
>
180+
{tab.name ? tab.name : undefined}
181+
</Button>
182+
183+
</Link>)
184+
);
184185
}
185186
},
186187
[isMobile, onTabChange, router.pathname]

client/components/home/index.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,8 @@ const Home = ({
2020
<ShiftBy y={-2}>
2121
<Image
2222
src={"/assets/logo-optimized.svg"}
23-
width={"48px"}
24-
height={"48px"}
23+
width={48}
24+
height={48}
2525
alt=""
2626
/>
2727
</ShiftBy>

client/components/input/input.module.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
}
2424

2525
.input::placeholder {
26-
font-size: 1.5rem;
26+
font-size: 1rem;
2727
}
2828

2929
.input:focus {

client/components/link/index.tsx

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import { useRouter } from "next/router"
2+
import NextLink from "next/link"
3+
import styles from "./link.module.css"
4+
5+
type LinkProps = {
6+
href: string,
7+
colored?: boolean,
8+
children: React.ReactNode
9+
} & React.ComponentProps<typeof NextLink>
10+
11+
const Link = ({ href, colored, children, ...props }: LinkProps) => {
12+
const { basePath } = useRouter()
13+
const propHrefWithoutLeadingSlash =
14+
href && href.startsWith("/") ? href.substring(1) : href
15+
16+
const url = basePath ? `${basePath}/${propHrefWithoutLeadingSlash}` : href
17+
18+
const className = colored ? `${styles.link} ${styles.color}` : styles.link
19+
return (
20+
<NextLink {...props} href={url} className={className}>
21+
{children}
22+
</NextLink>
23+
)
24+
}
25+
26+
export default Link
Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
.link {
2+
text-decoration: none;
3+
color: var(--fg);
4+
}
5+
6+
.color {
7+
color: var(--link);
8+
}
9+
10+
.color:hover {
11+
text-decoration: underline;
12+
}

0 commit comments

Comments
 (0)