fix ol links

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/rich-text/RichText.tsx

@@ -158,7 +158,10 @@ const Ul = ({ children }) => (
   <ul style={{ listStyle: 'outside disc', marginLeft: '16px' }}>{children}</ul>
 )
 const Ol = ({ children }) => (
-  <ol style={{ listStyle: 'outside number', marginLeft: '20px' }}>
+  <ol
+    className="rich-text-ol"
+    style={{ listStyle: 'outside number', marginLeft: '20px' }}
+  >
     {children}
   </ol>
 )

app/components/shared/AppCallToAction.tsx

@@ -32,7 +32,7 @@ const AppCallToAction = ({ data }: { data: CtaData }) => {
             </span>
           ) : null}
           {ctaDescription ? (
-            <span className="text-sm block text-th-fgd-2">
+            <span className="text-sm block text-th-fgd-2 font-body">
               {ctaDescription}
             </span>
           ) : null}

app/components/shared/TableOfContents.tsx

@@ -57,8 +57,9 @@ 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">
+      <h4>Contents</h4>
       <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}
@@ -68,7 +69,9 @@ const TableOfContents = ({
       {headingTwos.map((heading, index) => (
         <a
           className={`block ${
-            activeSection === index + 1 ? 'text-th-active' : 'text-th-fgd-2'
+            activeSection === index + 1
+              ? 'text-th-active'
+              : 'text-th-fgd-2 md:hover:text-th-fgd-4'
           }`}
           href={`#anchor-link-${index}`}
           key={heading}

app/styles/global.css

@@ -280,3 +280,7 @@ table p {
 b {
   @apply text-th-fgd-1;
 }
+
+.rich-text-ol a {
+  @apply border-b border-th-active md:hover:border-transparent text-lg text-th-fgd-3;
+}

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