update types, add table of contents to learn, how to short images

app/(pages)/learn/[slug]/page.tsx

@@ -9,6 +9,7 @@ import RichText from '../../../components/rich-text/RichText'
 import PostDetails from '../../../components/blog/PostDetails'
 import PageHeader from '../../../components/explore/PageHeader'
 import AppCallToAction from '../../../components/shared/AppCallToAction'
+import TableOfContents from '../../../components/shared/TableOfContents'
 
 interface LearnPostPageParams {
   slug: string
@@ -85,6 +86,7 @@ async function LearnPostPage({ params }: LearnPostPageProps) {
     ctaDescription,
     ctaUrl,
     slug,
+    showTableOfContents,
   } = learnPost
 
   const ctaData = { ctaTitle, ctaDescription, ctaUrl }
@@ -93,19 +95,32 @@ async function LearnPostPage({ params }: LearnPostPageProps) {
   return (
     <>
       <PageHeader
-        backgroundImageUrl={headerImageUrl}
         title={postTitle}
         tag={category}
+        backgroundImageUrl={headerImageUrl}
         showBack
       />
-      <div className="px-6 lg:px-20 pb-10 md:pb-16 max-w-3xl mx-auto">
-        <PostDetails post={learnPost} isLearn />
-        <RichText document={postContent} />
-        {ctaData?.ctaUrl ? (
-          <div className="pt-6">
-            <AppCallToAction data={ctaData} />
+      <div
+        className={`px-6 lg:px-20 pb-10 md:pb-16 ${
+          showTableOfContents ? '' : 'max-w-3xl'
+        } mx-auto`}
+      >
+        <div className="flex flex-col md:flex-row md:justify-center">
+          {showTableOfContents ? (
+            <div className="relative">
+              <TableOfContents content={postContent} postTitle={postTitle} />
+            </div>
+          ) : null}
+          <div className={showTableOfContents ? 'md:max-w-xl md:ml-10' : ''}>
+            <PostDetails post={learnPost} isLearn />
+            <RichText document={postContent} />
+            {ctaData?.ctaUrl ? (
+              <div className="pt-6">
+                <AppCallToAction data={ctaData} />
+              </div>
+            ) : null}
           </div>
-        ) : null}
+        </div>
       </div>
     </>
   )

app/components/shared/TableOfContents.tsx

@@ -58,7 +58,7 @@ const TableOfContents = ({
   return (
     <div className="mt-8 p-6 rounded-lg bg-th-bkg-2 space-y-2 h-max md:sticky md:top-8 md:w-64">
       <button
-        className={`font-normal text-base focus:outline-none ${
+        className={`font-normal text-base text-left focus:outline-none ${
           activeSection === 0 ? 'text-th-active' : 'text-th-fgd-2'
         }`}
         onClick={scrollToTop}

contentful/learnPost.ts

@@ -25,6 +25,7 @@ export interface LearnPost {
   ctaDescription: string | undefined
   ctaUrl: string | undefined
   lastModified: string
+  showTableOfContents: boolean | undefined
 }
 
 // A function to transform a Contentful blog post
@@ -57,6 +58,7 @@ export function parseContentfulLearnPost(
     ctaDescription: learnPostEntry.fields.ctaDescription,
     ctaUrl: learnPostEntry.fields.ctaUrl,
     lastModified: learnPostEntry.sys.updatedAt,
+    showTableOfContents: learnPostEntry.fields.showTableOfContents,
   }
 }
 

contentful/types/TypeLearnPost.ts

@@ -14,6 +14,7 @@ export interface TypeLearnPostFields {
     'Learn to Trade' | 'Listing on Mango' | 'Repost' | 'Spot Trading'
   >
   authorProfileImage?: EntryFieldTypes.AssetLink
+  showTableOfContents?: EntryFieldTypes.Boolean
   postDescription: EntryFieldTypes.Text
   postContent: EntryFieldTypes.RichText
   postHeroImage?: EntryFieldTypes.AssetLink