markdown improvements

src/app/(drift)/(auth)/components/index.tsx

@@ -143,6 +143,7 @@ function Auth({
 													callbackUrl: "/",
 													registration_password: serverPassword
 												})
+												router.refresh();
 											}}
 										>
 											{getProviderIcon(provider.id)} Sign{" "}

src/app/(drift)/(posts)/components/document-tabs/index.tsx

@@ -37,7 +37,7 @@ export default function DocumentTabs({
 
 	return (
 		<Tabs {...props} onValueChange={handleTabChange} defaultValue={defaultTab}>
-			<TabsList>
+			<TabsList className="flex justify-between">
 				<div>
 					<TabsTrigger value="edit">{isEditing ? "Edit" : "Raw"}</TabsTrigger>
 					<TabsTrigger value="preview">

src/app/(drift)/(posts)/components/preview/preview.module.css

@@ -1,29 +1,22 @@
 .markdownPreview {
 	padding: var(--gap-quarter);
-	font-size: 18px;
+	font-size: 16px;
 	line-height: 1.75;
+	color: hsl(var(--foreground));
 }
 
 .skeletonPreview {
 	padding: var(--gap-half);
-	font-size: 18px;
+	font-size: 16px;
 	line-height: 1.75;
 }
-
-.markdownPreview p {
-	margin-top: var(--gap);
-	margin-bottom: var(--gap);
+.markdownPreview {
+	padding: var(--gap-quarter);
+	color: hsl(var(--foreground));
 }
 
-.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;
+.skeletonPreview {
+	padding: var(--gap-half);
 }
 
 .markdownPreview h1,
@@ -32,23 +25,74 @@
 .markdownPreview h4,
 .markdownPreview h5,
 .markdownPreview h6 {
-	margin-top: var(--gap);
-	margin-bottom: var(--gap-half);
+	font-weight: 600;
+	letter-spacing: -0.025em;
+	margin-top: 1.5rem;
+	margin-bottom: 0.5rem;
 }
 
 .markdownPreview h1 {
-	color: var(--fg);
+	font-size: 1.65rem;
+	line-height: 2.5rem;
+
+	@media (min-width: 1024px) {
+		font-size: 3rem;
+		line-height: 1;
+	}
 }
 
 .markdownPreview h2 {
-	color: var(--darkest-gray);
+	padding-bottom: 0.5rem;
+	font-size: 1.875rem;
+	line-height: 2.25rem;
+	font-weight: 600;
+	border-bottom-width: 1px;
+
+	@media (min-width: 1024px) {
+		font-size: 2.25rem;
+		line-height: 1;
+	}
 }
 
-.markdownPreview h3,
-.markdownPreview h4,
-.markdownPreview h5,
-.markdownPreview h6 {
-	color: var(--darker-gray);
+.markdownPreview h3 {
+	font-size: 1.5rem;
+	line-height: 2rem;
+
+	@media (min-width: 1024px) {
+		font-size: 1.75rem;
+		line-height: 1;
+	}
+}
+
+.markdownPreview h4 {
+	font-size: 1.25rem;
+	line-height: 1.8rem;
+}
+
+.markdownPreview h5 {
+	font-size: 1.125rem;
+	line-height: 1.75rem;
+}
+
+.markdownPreview p {
+	margin-top: 1.25rem;
+	margin-bottom: 1.25rem;
+	
+	&:not(:first-child) {
+		line-height: 1.75rem;
+		margin-top: 1.5rem;
+	}
+}
+
+.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;
 }
 
 /* Auto-linked headers */
@@ -75,42 +119,47 @@
 	filter: opacity(0.5);
 }
 
-.markdownPreview h1 {
-	font-size: 2rem;
-}
-
-.markdownPreview h2 {
-	font-size: 1.5rem;
+.markdownPreview ul {
+	margin-bottom: 1.5rem;
+	margin-left: 1.5rem;
+	list-style-type: disc;
 }
 
-.markdownPreview h3 {
-	font-size: 1.25rem;
+.markdownPreview ol {
+	margin-bottom: 1.5rem;
+	margin-left: 1.5rem;
+	list-style-type: decimal;
 }
 
-.markdownPreview h4 {
-	font-size: 1rem;
+.markdownPreview ul li::before {
+	content: "";
 }
 
-.markdownPreview h5 {
-	font-size: 1rem;
+.markdownPreview code::before,
+.markdownPreview code::after {
+	content: "";
 }
 
-.markdownPreview h6 {
-	font-size: 0.875rem;
+.markdownPreview blockquote {
+	padding-left: 1.5rem;
+	font-style: italic;
+	border-left-width: 2px;
 }
 
-.markdownPreview ul {
-	list-style: inside;
+.markdownPreview blockquote p {
+	margin-top: 0;
 }
 
-.markdownPreview ul li::before {
-	content: "";
+.markdownPreview table {
+	overflow-y: auto;
+	width: 100%;
 }
 
-
-.markdownPreview code::before,
-.markdownPreview code::after {
-	content: "";
+.markdownPreview table th {
+	font-weight: 600;
+	padding: 0;
+	margin: 0;
+	border-top-width: 1px;
 }
 
 @media screen and (max-width: 800px) {

src/app/(drift)/(posts)/new/components/edit-document-list/edit-document/index.tsx

@@ -66,7 +66,8 @@ function Document({
 						}}
 					/>
 					{remove && (
-						<Button onClick={() => removeFile(remove)} variant="ghost">
+						// no left border
+						<Button onClick={() => removeFile(remove)} variant="outline" className="border-color-[var(--border)] border-l-0 rounded-l-none">
 							<Trash height={18} />
 						</Button>
 					)}

src/app/(drift)/(posts)/new/components/react-datepicker.css

@@ -146,7 +146,9 @@
 .react-datepicker__navigation--next {
 	right: 2px;
 }
-.react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) {
+.react-datepicker__navigation--next--with-time:not(
+		.react-datepicker__navigation--next--with-today-button
+	) {
 	right: 85px;
 }
 .react-datepicker__navigation--years {
@@ -353,7 +355,12 @@
 }
 
 .react-datepicker__month--selecting-range
-	.react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range, .react-datepicker__month-text--in-selecting-range, .react-datepicker__quarter-text--in-selecting-range, .react-datepicker__year-text--in-selecting-range) {
+	.react-datepicker__day--in-range:not(
+		.react-datepicker__day--in-selecting-range,
+		.react-datepicker__month-text--in-selecting-range,
+		.react-datepicker__quarter-text--in-selecting-range,
+		.react-datepicker__year-text--in-selecting-range
+	) {
 	background-color: var(--bg);
 	color: var(--fg);
 }
@@ -370,3 +377,15 @@
 	background-color: transparent;
 	cursor: not-allowed;
 }
+
+.react-datepicker__aria-live {
+	position: absolute;
+	clip-path: circle(0);
+	border: 0;
+	height: 1px;
+	margin: -1px;
+	overflow: hidden;
+	padding: 0;
+	width: 1px;
+	white-space: nowrap;
+}

src/app/(drift)/(posts)/post/[id]/components/header/title/index.tsx

@@ -19,7 +19,7 @@ export const PostTitle = ({ post, loading }: TitleProps) => {
 		<span className={styles.title}>
 			<h1 className="text-3xl font-bold">
 				{title}{" "}
-				<span style={{ color: "var(--gray)" }}>
+				<span className="text-2xl text-muted-foreground">
 					by {/* <Link colored href={`/author/${authorId}`}> */}
 					{displayName || "anonymous"}
 					{/* </Link> */}

src/app/(drift)/mine/page.tsx

@@ -20,17 +20,18 @@ export default async function Mine() {
 	return (
 		<>
 			<PageTitle>Your Posts</PageTitle>
-			<PageWrapper></PageWrapper>
-			<ErrorBoundary>
-				<Suspense fallback={<PostList skeleton={true} initialPosts={[]} />}>
-					<PostList
-						userId={userId}
-						initialPosts={posts}
-						isOwner={true}
-						hideSearch={false}
-					/>
-				</Suspense>
-			</ErrorBoundary>
+			<PageWrapper>
+				<ErrorBoundary>
+					<Suspense fallback={<PostList skeleton={true} initialPosts={[]} />}>
+						<PostList
+							userId={userId}
+							initialPosts={posts}
+							isOwner={true}
+							hideSearch={false}
+						/>
+					</Suspense>
+				</ErrorBoundary>
+			</PageWrapper>
 		</>
 	)
 }

src/app/components/post-list/index.tsx

@@ -98,7 +98,7 @@ const PostList = ({
 
 	return (
 		<Stack className={styles.container} alignItems="center">
-			{!hideSearch && (
+			{!hideSearch && posts.length > 0 && (
 				<div className={styles.searchContainer}>
 					<Input
 						placeholder="Search..."

src/app/styles/globals.css

@@ -50,7 +50,6 @@
 		--header-bg: rgba(19, 20, 21, 0.45);
 		--gray-alpha: rgba(19, 20, 21, 0.6);
 		--selection: rgba(255, 255, 255, 0.99);
-		--border: var(--light-gray);
 		--warning: #ff6700;
 		--link: #3291ff;
 		color-scheme: dark;
@@ -88,8 +87,8 @@
 	}
 
 	.dark {
-		--background: 224 71% 4%;
-		--foreground: 213 31% 91%;
+		--background: 224 71% 3%;
+		--foreground: 213 31% 88%;
 
 		--muted: 223 47% 11%;
 		--muted-foreground: 215.4 16.3% 56.9%;
@@ -98,7 +97,7 @@
 		--popover-foreground: 215 20.2% 65.1%;
 
 		--card: 224 71% 4%;
-		--card-foreground: 213 31% 91%;
+		--card-foreground: 213 31% 88%;
 
 		--border: 216 34% 17%;
 		--input: 216 34% 17%;

src/app/styles/markdown.css

@@ -88,11 +88,6 @@ input[type="checkbox"]:focus {
 	min-height: 1.4rem;
 }
 
-article *:not(pre) > code {
-	font-weight: 500;
-	font-family: var(--font-sans);
-}
-
 article li > p {
 	display: inline-block;
 	padding: 0;