fix line spacing in code blocks and add instructor links

skillrecordings · Oct 29, 2024 · fa84266 · fa84266
1 parent 2d459c4
commit fa84266
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 29 deletions.
diff --git a/src/components/mdx/code-block.tsx b/src/components/mdx/code-block.tsx
@@ -88,6 +88,7 @@ const CodeBlock: FunctionComponent<React.PropsWithChildren<CodeBlockProps>> = ({
               border-radius: 0 !important;
               margin: 0 !important;
               padding: 0 !important;
+              tab-size: 2 !important;
             }
             @media only screen and (max-width: 640px) {
               pre {
@@ -112,9 +113,7 @@ export default CodeBlock
 
 const Line: FunctionComponent<
   React.PropsWithChildren<{highlight?: boolean}>
-> = ({highlight, children}) => (
-  <div className={highlight ? 'bg-gray-700' : ''}>{children}</div>
-)
+> = ({highlight, children}) => children
 
 const Number: FunctionComponent<React.PropsWithChildren<unknown>> = ({
   children,

diff --git a/src/pages/[post].tsx b/src/pages/[post].tsx
@@ -203,15 +203,56 @@ SELECT cr_lesson.*, egh_user.name, egh_user.image
       mdxSource,
       post: convertToSerializeForNextResponse(post),
       instructor: {
-        full_name: post.name,
-        avatar_url: post.image,
+        full_name: lesson?.instructor?.full_name || post.name,
+        avatar_url: lesson?.instructor?.avatar_64_url || post.image,
+        ...(lesson?.instructor?.slug && {
+          path: `/q/resources-by-${lesson?.instructor?.slug}`,
+        }),
       },
       videoResource: convertToSerializeForNextResponse(videoResource),
     },
     revalidate: 60,
   }
 }
 
+function InstructorProfile({
+  instructor,
+}: {
+  instructor: {
+    full_name: string
+    avatar_url: string
+    path?: string
+  }
+}) {
+  const content = (
+    <div className="flex flex-shrink-0 items-center">
+      {instructor?.avatar_url ? (
+        <Image
+          className="rounded-full flex-shrink-0 bg-cover"
+          src={`${instructor.avatar_url}`}
+          alt={instructor.full_name}
+          width={40}
+          height={40}
+        />
+      ) : (
+        <Eggo className="mr-1 sm:w-10 w-8" />
+      )}
+      <div className="ml-2 flex flex-col justify-center">
+        <span className="text-gray-700 dark:text-gray-400 text-sm leading-tighter">
+          Instructor
+        </span>
+        <h2 className="font-semibold text-base">{instructor.full_name}</h2>
+      </div>
+    </div>
+  )
+
+  return instructor.path ? (
+    <Link href={instructor.path}>{content}</Link>
+  ) : (
+    content
+  )
+}
+
 export default function PostPage({
   post,
   videoResource,
@@ -220,7 +261,11 @@ export default function PostPage({
 }: {
   mdxSource: any
   post: any
-  instructor: any
+  instructor: {
+    full_name: string
+    avatar_url: string
+    path?: string
+  }
   videoResource: any
 }) {
   const imageParams = new URLSearchParams()
@@ -274,33 +319,18 @@ export default function PostPage({
         </div>
       )}
       <div className="container mx-auto w-fit">
+        {post.fields.state === 'draft' && (
+          <div className="bg-gray-100 dark:bg-gray-800 p-2 rounded-b-md flex justify-center">
+            <p className="text-gray-600 text-sm">
+              This post is a draft and not published yet.
+            </p>
+          </div>
+        )}
         <header className="pb-6 pt-7 sm:pb-18 sm:pt-16 space-y-4 ">
           <h1 className="max-w-screen-md font-extrabold sm:text-4xl text-2xl leading-tighter w-fit">
             {post.fields.title}
           </h1>
-          <div>
-            <div className="flex flex-shrink-0 items-center">
-              {instructor?.avatar_url ? (
-                <Image
-                  className="rounded-full flex-shrink-0 bg-cover"
-                  src={`https:${instructor.avatar_url}`}
-                  alt={instructor.full_name}
-                  width={40}
-                  height={40}
-                />
-              ) : (
-                <Eggo className="mr-1 sm:w-10 w-8" />
-              )}
-              <div className="ml-2 flex flex-col justify-center">
-                <span className="text-gray-700 dark:text-gray-400 text-sm leading-tighter">
-                  Instructor
-                </span>
-                <h2 className="font-semibold text-base">
-                  {instructor.full_name}
-                </h2>
-              </div>
-            </div>
-          </div>
+          <InstructorProfile instructor={instructor} />
         </header>
 
         <main className="prose dark:prose-dark sm:prose-lg lg:prose-xl max-w-3xl dark:prose-a:text-blue-300 prose-a:text-blue-500 pt-4 pb-8 mx-auto">
@@ -310,6 +340,7 @@ export default function PostPage({
               ...mdxComponents,
               PodcastLinks,
             }}
+            lazy
           />
           <div className="flex justify-between sm:items-center items-start sm:flex-row  flex-col sm:space-y-0 space-y-2">
             {post.fields.github && (