From 631f98aaafb8e5a7189927a90ed9ce1087d19d18 Mon Sep 17 00:00:00 2001 From: Max Leiter Date: Sun, 18 Dec 2022 17:09:46 -0800 Subject: [PATCH] Add @next/font, increase markdown legibility --- .../components/file-dropdown/index.tsx | 5 +- .../components/preview/preview.module.css | 2 + .../post-files/view-document/index.tsx | 16 ++++- src/app/admin/components/tables.tsx | 5 +- .../components/post-list/list-item.module.css | 28 +++++++++ src/app/components/post-list/list-item.tsx | 60 +++++++++++++++---- src/app/layout.tsx | 5 +- src/app/styles/globals.css | 2 +- src/package.json | 1 + src/pnpm-lock.yaml | 6 ++ 10 files changed, 109 insertions(+), 21 deletions(-) diff --git a/src/app/(posts)/components/file-dropdown/index.tsx b/src/app/(posts)/components/file-dropdown/index.tsx index f4b9680c..1d8723ad 100644 --- a/src/app/(posts)/components/file-dropdown/index.tsx +++ b/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 = ({ diff --git a/src/app/(posts)/components/preview/preview.module.css b/src/app/(posts)/components/preview/preview.module.css index 1fd9b2f9..2436fee8 100644 --- a/src/app/(posts)/components/preview/preview.module.css +++ b/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 { diff --git a/src/app/(posts)/post/[id]/components/post-files/view-document/index.tsx b/src/app/(posts)/post/[id]/components/post-files/view-document/index.tsx index d23aa006..2ace79e8 100644 --- a/src/app/(posts)/post/[id]/components/post-files/view-document/index.tsx +++ b/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 ( <>
-
+
( - + {post.title} - + {"author" in post ? post.author?.name : "no author"} {new Date(post.createdAt).toLocaleDateString()} diff --git a/src/app/components/post-list/list-item.module.css b/src/app/components/post-list/list-item.module.css index b6bdfe55..2213f031 100644 --- a/src/app/components/post-list/list-item.module.css +++ b/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; +} + diff --git a/src/app/components/post-list/list-item.tsx b/src/app/components/post-list/list-item.tsx index 3f124503..432dd96a 100644 --- a/src/app/components/post-list/list-item.tsx +++ b/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 + case "sh": + case "fish": + case "bash": + case "zsh": + case ".zshrc": + case ".bashrc": + case ".bash_profile": + return + default: + if (codeFileExtensions.includes(extension || "")) { + return + } else { + return + } + } + } + return (
  • @@ -91,18 +122,21 @@ const ListItem = ({
    • -
    - <> - {post?.files?.map((file: Pick["files"][0]) => { - return ( -
    - - {file.title || "Untitled file"} - -
    - ) - })} - +
      + {post?.files?.map( + (file: Pick["files"][0]) => { + return ( +
    • + + {getIconFromFilename(file.title)} + + {file.title || "Untitled file"} + +
      • + ) + } + )} +
    diff --git a/src/app/layout.tsx b/src/app/layout.tsx index b45c67bf..7ede1614 100644 --- a/src/app/layout.tsx +++ b/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} // > - + diff --git a/src/app/styles/globals.css b/src/app/styles/globals.css index 38c97d2b..b2f8292f 100644 --- a/src/app/styles/globals.css +++ b/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; diff --git a/src/package.json b/src/package.json index a291a40b..946a6011 100644 --- a/src/package.json +++ b/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", diff --git a/src/pnpm-lock.yaml b/src/pnpm-lock.yaml index bb166cfb..208c00bd 100644 --- a/src/pnpm-lock.yaml +++ b/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'}