fix preview rendering on /home, fix signout redirect

client/app/(auth)/components/index.tsx

@@ -3,9 +3,11 @@
 import { useState } from "react"
 import styles from "./auth.module.css"
 import Link from "../../components/link"
-import { Button, Input, Note } from "@geist-ui/core/dist"
 import { signIn } from "next-auth/react"
 import { Github as GithubIcon } from "@geist-ui/icons"
+import Input from "@components/input"
+import Button from "@components/button"
+import Note from "@components/note"
 
 const Auth = ({
 	page,
@@ -50,7 +52,7 @@ const Auth = ({
 						{/* sign in with github */}
 						{requiresServerPassword && (
 							<Input
-								htmlType="password"
+								type="password"
 								id="server-password"
 								value={serverPassword}
 								onChange={(event) =>
@@ -62,11 +64,13 @@ const Auth = ({
 							/>
 						)}
 						<Button
-							htmlType="submit"
+							type="submit"
-							type="success-light"
+							buttonType="primary"
-							auto
 							width="100%"
-							icon={<GithubIcon />}
+							style={{
+								color: 'var(--fg)'
+							}}
+							iconLeft={<GithubIcon />}
 							onClick={(e) => {
 								e.preventDefault()
 								signIn("github", {

client/app/components/button/index.tsx

@@ -1,5 +1,6 @@
 import styles from "./button.module.css"
 import { forwardRef, Ref } from "react"
+import clsx from "clsx"
 
 type Props = React.HTMLProps<HTMLButtonElement> & {
 	children?: React.ReactNode
@@ -44,17 +45,15 @@ const Button = forwardRef<HTMLButtonElement, Props>(
 				{...props}
 			>
 				{children && iconLeft && (
-					<span className={`${styles.icon} ${styles.iconLeft}`}>
+					<span className={clsx(styles.icon, styles.iconLeft)}>{iconLeft}</span>
-						{iconLeft}
-					</span>
 				)}
 				{children ? (
 					children
 				) : (
-					<span className={`${styles.icon}`}>{iconLeft || iconRight}</span>
+					<span className={styles.icon}>{iconLeft || iconRight}</span>
 				)}
 				{children && iconRight && (
-					<span className={`${styles.icon} ${styles.iconRight}`}>
+					<span className={clsx(styles.icon, styles.iconRight)}>
 						{iconRight}
 					</span>
 				)}

client/app/components/header/header.module.css

@@ -76,3 +76,8 @@
 	justify-content: space-between;
 	align-items: center;
 }
+
+.active a,
+.active button {
+	color: var(--fg);
+}

client/app/components/header/index.tsx

@@ -22,6 +22,7 @@ import { usePathname } from "next/navigation"
 import { signOut } from "next-auth/react"
 import { useTheme } from "@components/theme/ThemeClientContextProvider"
 import Button from "@components/button"
+import clsx from "clsx"
 
 type Tab = {
 	name: string
@@ -101,7 +102,9 @@ const Header = ({ signedIn = false, isAdmin = false }) => {
 					name: "Sign Out",
 					icon: <SignOutIcon />,
 					value: "signout",
-					onClick: () => signOut()
+					onClick: () => signOut({
+						callbackUrl: "/",
+					})
 				},
 				...defaultPages
 			]
@@ -148,7 +151,7 @@ const Header = ({ signedIn = false, isAdmin = false }) => {
 					key={tab.value}
 					iconLeft={tab.icon}
 					onClick={() => onTabChange(tab.value)}
-					className={`${styles.tab} ${activeStyle}`}
+					className={clsx(styles.tab, activeStyle)}
 					aria-label={tab.name}
 					aria-current={isActive ? "page" : undefined}
 				>
@@ -160,7 +163,7 @@ const Header = ({ signedIn = false, isAdmin = false }) => {
 				<Link
 					key={tab.value}
 					href={tab.href}
-					className={`${styles.tab} ${activeStyle}`}
+					className={clsx(styles.tab, activeStyle)}
 				>
 					<Button iconLeft={tab.icon}>{tab.name ? tab.name : undefined}</Button>
 				</Link>

client/app/components/input/index.tsx

@@ -31,7 +31,7 @@ const Input = React.forwardRef<HTMLInputElement, Props>(
 				<input
 					ref={ref}
 					id={label}
-					className={clsx(styles.input, styles.withLabel, className)}
+					className={clsx(styles.input, label && styles.withLabel, className)}
 					{...props}
 					style={{
 						width,

client/app/components/input/input.module.css

@@ -28,10 +28,6 @@
 	border-bottom-left-radius: 0;
 }
 
-.input::placeholder {
-	/* font-size: 1rem; */
-}
-
 .input:focus {
 	border-color: var(--light-gray);
 }

client/pages/api/file/get-html.ts

@@ -10,8 +10,8 @@ export default withMethods(
 		const content = parseQueryParam(body.content)
 		const title = parseQueryParam(body.title) || "Untitled"
 
-		if (!content || !title) {
+		if (!content) {
-			return res.status(400).json({ error: "Missing arguments" })
+			return res.status(400).json({ error: "Missing content" })
 		}
 
 		const renderedHTML = await getHtmlFromFile({