fix: TOC layouts and custom tailwind utlity class

app/writings/[slug]/page.tsx

@@ -38,8 +38,7 @@ export default async function Page({ params }: { params: { slug: string } }) {
   const tokens = lexer.lex(postData.content);
   const headings = tokens
     .filter((token) => token.type === 'heading')
-    .map((token) => (token as Tokens.Heading).text)
-  console.log(headings)
+    .map((token) => (token as Tokens.Heading).text);
 
   return (
     <>
@@ -61,8 +60,8 @@ export default async function Page({ params }: { params: { slug: string } }) {
           </div>
         )}
       </div>
-      <TableOfContents headings={headings} />
       <Markdown markdown={postData.content} />
+      {headings.length && <TableOfContents headings={headings} />}
     </>
   );
 }

components/toc.tsx

@@ -1,18 +1,19 @@
-import { escapeText } from "@/lib/utils";
+import { escapeText } from '@/lib/utils';
 
 const TableOfContents = ({ headings }: { headings: string[] }) => {
   return (
-    <div className="fixed right-10 top-1/2 -translate-y-1/2 flex flex-col gap-4 p-5 border rounded-2xl">
+    <div className="fixed right-10 top-1/2 hidden -translate-y-1/2 flex-col gap-4 rounded-2xl border p-5 md:flex">
       <h3 className="font-bold">Table of Contents</h3>
       <div className="flex flex-col gap-1">
         {headings.map((heading) => (
           <a className="font-medium underline" href={`#${escapeText(heading)}`}>
-            <span className="text-primary">#.&nbsp;</span>{heading}
+            <span className="text-primary">#.&nbsp;</span>
+            {heading}
           </a>
         ))}
       </div>
     </div>
-  )
-}
+  );
+};
 
 export default TableOfContents;

styles/globals.css

@@ -74,6 +74,6 @@
 /* custom classes */
 @layer utilities {
   .underline {
-    @apply no-underline relative w-max before:absolute before:bottom-1 before:h-0.5 before:w-full before:bg-transparent before:duration-200 hover:before:bottom-0 hover:before:bg-primary;
+    @apply decoration-transparent decoration-2 underline-offset-2 duration-300 ease-out hover:decoration-primary hover:underline-offset-4;
   }
 }