From d30b667d3a969b79cf2ed526fa3b98fbfa2bdcc4 Mon Sep 17 00:00:00 2001 From: Max Leiter Date: Mon, 5 Jun 2023 20:28:47 -0700 Subject: [PATCH] markdown improvements --- src/app/(drift)/(auth)/components/index.tsx | 1 + .../components/document-tabs/index.tsx | 2 +- .../components/preview/preview.module.css | 141 ++++++++++++------ .../edit-document/index.tsx | 3 +- .../new/components/react-datepicker.css | 23 ++- .../[id]/components/header/title/index.tsx | 2 +- src/app/(drift)/mine/page.tsx | 23 +-- src/app/components/post-list/index.tsx | 2 +- src/app/styles/globals.css | 7 +- src/app/styles/markdown.css | 5 - 10 files changed, 137 insertions(+), 72 deletions(-) diff --git a/src/app/(drift)/(auth)/components/index.tsx b/src/app/(drift)/(auth)/components/index.tsx index 0fdb4f87..9394650e 100644 --- a/src/app/(drift)/(auth)/components/index.tsx +++ b/src/app/(drift)/(auth)/components/index.tsx @@ -143,6 +143,7 @@ function Auth({ callbackUrl: "/", registration_password: serverPassword }) + router.refresh(); }} > {getProviderIcon(provider.id)} Sign{" "} diff --git a/src/app/(drift)/(posts)/components/document-tabs/index.tsx b/src/app/(drift)/(posts)/components/document-tabs/index.tsx index 52276193..a1600341 100644 --- a/src/app/(drift)/(posts)/components/document-tabs/index.tsx +++ b/src/app/(drift)/(posts)/components/document-tabs/index.tsx @@ -37,7 +37,7 @@ export default function DocumentTabs({ return ( - +
{isEditing ? "Edit" : "Raw"} diff --git a/src/app/(drift)/(posts)/components/preview/preview.module.css b/src/app/(drift)/(posts)/components/preview/preview.module.css index 75cbbf4a..bdc1b348 100644 --- a/src/app/(drift)/(posts)/components/preview/preview.module.css +++ b/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) { diff --git a/src/app/(drift)/(posts)/new/components/edit-document-list/edit-document/index.tsx b/src/app/(drift)/(posts)/new/components/edit-document-list/edit-document/index.tsx index e9c42cf6..4087f03c 100644 --- a/src/app/(drift)/(posts)/new/components/edit-document-list/edit-document/index.tsx +++ b/src/app/(drift)/(posts)/new/components/edit-document-list/edit-document/index.tsx @@ -66,7 +66,8 @@ function Document({ }} /> {remove && ( - )} diff --git a/src/app/(drift)/(posts)/new/components/react-datepicker.css b/src/app/(drift)/(posts)/new/components/react-datepicker.css index 97949a9c..dc40bb8c 100644 --- a/src/app/(drift)/(posts)/new/components/react-datepicker.css +++ b/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; +} diff --git a/src/app/(drift)/(posts)/post/[id]/components/header/title/index.tsx b/src/app/(drift)/(posts)/post/[id]/components/header/title/index.tsx index 5d509801..dcf490db 100644 --- a/src/app/(drift)/(posts)/post/[id]/components/header/title/index.tsx +++ b/src/app/(drift)/(posts)/post/[id]/components/header/title/index.tsx @@ -19,7 +19,7 @@ export const PostTitle = ({ post, loading }: TitleProps) => {

{title}{" "} - + by {/* */} {displayName || "anonymous"} {/* */} diff --git a/src/app/(drift)/mine/page.tsx b/src/app/(drift)/mine/page.tsx index 03b6d2af..0699300c 100644 --- a/src/app/(drift)/mine/page.tsx +++ b/src/app/(drift)/mine/page.tsx @@ -20,17 +20,18 @@ export default async function Mine() { return ( <> Your Posts - - - }> - - - + + + }> + + + + ) } diff --git a/src/app/components/post-list/index.tsx b/src/app/components/post-list/index.tsx index e57cfe4f..3d1581f9 100644 --- a/src/app/components/post-list/index.tsx +++ b/src/app/components/post-list/index.tsx @@ -98,7 +98,7 @@ const PostList = ({ return ( - {!hideSearch && ( + {!hideSearch && posts.length > 0 && (
code { - font-weight: 500; - font-family: var(--font-sans); -} - article li > p { display: inline-block; padding: 0;