Add @next/font, increase markdown legibility

src/app/(posts)/components/file-dropdown/index.tsx

@@ -6,6 +6,7 @@ import styles from "./dropdown.module.css"
 import buttonStyles from "@components/button/button.module.css"
 import { ChevronDown, Code, File as FileIcon } from "react-feather"
 import { Spinner } from "@components/spinner"
+import Link from "next/link"
 
 type Item = File & {
 	icon: JSX.Element
@@ -51,12 +52,12 @@ const FileDropdown = ({
 		<ul className={styles.content}>
 			{items.map((item) => (
 				<li key={item.id}>
-					<a href={`#${item.title}`} className={styles.listItem}>
+					<Link href={`#${item.title}`} className={styles.listItem}>
 						<span className={styles.fileIcon}>{item.icon}</span>
 						<span className={styles.fileTitle}>
 							{item.title ? item.title : "Untitled"}
 						</span>
-					</a>
+					</Link>
 				</li>
 			))}
 		</ul>

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

@@ -1,5 +1,7 @@
 .markdownPreview {
 	padding: var(--gap-quarter);
+	font-size: 18px;
+	line-height: 1.75;
 }
 
 .markdownPreview p {

src/app/(posts)/post/[id]/components/post-files/view-document/index.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { memo } from "react"
+import { memo, useEffect } from "react"
 import styles from "./document.module.css"
 import Skeleton from "@components/skeleton"
 import Link from "next/link"
@@ -81,10 +81,22 @@ const Document = ({ skeleton, ...props }: Props) => {
 
 	const { title, initialTab, id, content, preview } = props
 
+	// if the query has our title, we can use it to scroll to the file.
+	// we can't use the browsers implementation because the data isn't loaded yet
+	if (title) {
+		const hash = window.location.hash
+		if (hash && hash === `#${title}`) {
+			const element = document.getElementById(title)
+			if (element) {
+				element.scrollIntoView()
+			}
+		}
+	}
+
 	return (
 		<>
 			<div className={styles.card}>
-				<header>
+				<header id={title}>
 					<Link
 						href={`#${title}`}
 						aria-label="File"

src/app/admin/components/tables.tsx

@@ -5,6 +5,7 @@ import ButtonDropdown from "@components/button-dropdown"
 import { Spinner } from "@components/spinner"
 import { useToasts } from "@components/toasts"
 import { Post, User } from "@lib/server/prisma"
+import Link from "next/link"
 import { useState } from "react"
 import styles from "./table.module.css"
 
@@ -122,9 +123,9 @@ export function PostTable({
 				{posts?.map((post) => (
 					<tr key={post.id}>
 						<td>
-							<a href={`/post/${post.id}`} target="_blank" rel="noreferrer">
+							<Link href={`/post/${post.id}`} target="_blank" rel="noreferrer">
 								{post.title}
-							</a>
+							</Link>
 						</td>
 						<td>{"author" in post ? post.author?.name : "no author"}</td>
 						<td>{new Date(post.createdAt).toLocaleDateString()}</td>

src/app/components/post-list/list-item.module.css

@@ -34,3 +34,31 @@
 		margin: 0;
 	}
 }
+
+.files {
+	padding: var(--gap) 0 !important;
+	margin: 0;
+}
+
+.files li {
+	display: flex;
+	align-items: center;
+	gap: var(--gap);
+}
+
+.files li a {
+	display: flex;
+	align-items: center;
+	gap: var(--gap);
+	color: var(--darker-gray);
+}
+
+.files li a:hover {
+	color: var(--link);
+	text-decoration: none;
+}
+
+.files li a svg {
+	color: inherit;
+}
+

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

@@ -10,7 +10,16 @@ import Tooltip from "@components/tooltip"
 import Badge from "@components/badges/badge"
 import Card from "@components/card"
 import Button from "@components/button"
-import { ArrowUpCircle, Edit, Trash } from "react-feather"
+import {
+	ArrowUpCircle,
+	Code,
+	Database,
+	Edit,
+	FileText,
+	Terminal,
+	Trash
+} from "react-feather"
+import { codeFileExtensions } from "@lib/constants"
 
 // TODO: isOwner should default to false so this can be used generically
 const ListItem = ({
@@ -32,6 +41,28 @@ const ListItem = ({
 		router.push(`/post/${post.parentId}`)
 	}
 
+	const getIconFromFilename = (filename: string) => {
+		const extension = filename.split(".").pop()
+		switch (extension) {
+			case "sql":
+				return <Database />
+			case "sh":
+			case "fish":
+			case "bash":
+			case "zsh":
+			case ".zshrc":
+			case ".bashrc":
+			case ".bash_profile":
+				return <Terminal />
+			default:
+				if (codeFileExtensions.includes(extension || "")) {
+					return <Code />
+				} else {
+					return <FileText />
+				}
+		}
+	}
+
 	return (
 		<FadeIn>
 			<li key={post.id}>
@@ -91,18 +122,21 @@ const ListItem = ({
 							<ExpirationBadge postExpirationDate={post.expiresAt} />
 						</div>
 					</>
-					<hr />
-					<>
-						{post?.files?.map((file: Pick<PostWithFiles, "files">["files"][0]) => {
-							return (
-								<div key={file.id}>
-									<Link colored href={`/post/${post.id}#${file.title}`}>
-										{file.title || "Untitled file"}
-									</Link>
-								</div>
-							)
-						})}
-					</>
+					<ul className={styles.files}>
+						{post?.files?.map(
+							(file: Pick<PostWithFiles, "files">["files"][0]) => {
+								return (
+									<li key={file.id}>
+										<Link colored href={`/post/${post.id}#${file.title}`}>
+											{getIconFromFilename(file.title)}
+
+											{file.title || "Untitled file"}
+										</Link>
+									</li>
+								)
+							}
+						)}
+					</ul>
 				</Card>
 			</li>
 		</FadeIn>

src/app/layout.tsx

@@ -4,6 +4,9 @@ import { Providers } from "./providers"
 import Page from "@components/page"
 import { Toasts } from "@components/toasts"
 import Header from "@components/header"
+import { Inter } from '@next/font/google';
+
+const inter = Inter({ subsets: ['latin'], variable: "--inter-font" })
 
 interface RootLayoutProps {
 	children: React.ReactNode
@@ -18,7 +21,7 @@ export default async function RootLayout({ children }: RootLayoutProps) {
 		// 	attribute="data-theme"
 		// 	enableColorScheme={true}
 		// >
-		<html lang="en">
+		<html lang="en" className={inter.variable}>
 			<head />
 			<body>
 				<Toasts />

src/app/styles/globals.css

@@ -16,7 +16,7 @@
 	--gap-quarter-negative: calc(-1 * var(--gap-quarter));
 
 	/* Typography */
-	--font-sans: "Inter", -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
+	--font-sans: var(--inter-font), -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
 		Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
 	--font-mono: ui-monospace, "SFMono-Regular", "Consolas", "Liberation Mono",
 		"Menlo", monospace;

src/package.json

@@ -15,6 +15,7 @@
 	"dependencies": {
 		"@next-auth/prisma-adapter": "^1.0.5",
 		"@next/eslint-plugin-next": "13.0.7-canary.4",
+		"@next/font": "13.0.8-canary.0",
 		"@prisma/client": "^4.7.1",
 		"@radix-ui/react-dialog": "^1.0.2",
 		"@radix-ui/react-dropdown-menu": "^2.0.1",

src/pnpm-lock.yaml

@@ -4,6 +4,7 @@ specifiers:
   '@next-auth/prisma-adapter': ^1.0.5
   '@next/bundle-analyzer': 13.0.7-canary.4
   '@next/eslint-plugin-next': 13.0.7-canary.4
+  '@next/font': 13.0.8-canary.0
   '@prisma/client': ^4.7.1
   '@radix-ui/react-dialog': ^1.0.2
   '@radix-ui/react-dropdown-menu': ^2.0.1
@@ -50,6 +51,7 @@ specifiers:
 dependencies:
   '@next-auth/prisma-adapter': 1.0.5_64qbzg5ec56bux2misz3l4u6g4
   '@next/eslint-plugin-next': 13.0.7-canary.4
+  '@next/font': 13.0.8-canary.0
   '@prisma/client': 4.7.1_prisma@4.7.1
   '@radix-ui/react-dialog': 1.0.2_jbvntnid6ohjelon6ccj5dhg2u
   '@radix-ui/react-dropdown-menu': 2.0.1_jbvntnid6ohjelon6ccj5dhg2u
@@ -812,6 +814,10 @@ packages:
       glob: 7.1.7
     dev: false
 
+  /@next/font/13.0.8-canary.0:
+    resolution: {integrity: sha512-sdi4WoYMbJdiDev9UICg9dMhhA7I2xaJT07e8DZoSDWWTZaKk5zKNKuQFQoP47461R1WZAIQwIYTq+pVxQ87Gw==}
+    dev: false
+
   /@next/swc-android-arm-eabi/13.0.8-canary.0:
     resolution: {integrity: sha512-U6nayRvWuASLLBwqG4nN9540ako+JEBblN8479BpGvW1F2FyQPUx/zq+WO0b47KPyJI2XNPBIenHGvtSY7yN/Q==}
     engines: {node: '>= 10'}