fix: articles

Signed-off-by: Filipe Medeiros <hello@filipesm.eu>

frontend/src/components/BlogPostContent.tsx

@@ -1,29 +1,78 @@
-import {
-  PortableText,
-  type PortableTextBlockComponent,
-} from '@portabletext/react';
+import { PortableText, PortableTextReactComponents } from '@portabletext/react';
 import type { PortableTextBlock } from '@portabletext/types';
 
 export interface Props {
   content: PortableTextBlock[];
 }
 
+const components: Partial<PortableTextReactComponents> = {
+  block: {
+    h1: ({ children }) => (
+      <h2 className="mb-2 mt-4 text-3xl font-medium">{children}</h2>
+    ),
+    h2: ({ children }) => (
+      <h3 className="mb-2 mt-3 text-2xl font-medium">{children}</h3>
+    ),
+    h3: ({ children }) => (
+      <h4 className="mb-2 text-xl font-medium">{children}</h4>
+    ),
+    h4: ({ children }) => (
+      <h5 className="mb-2 text-lg font-medium">{children}</h5>
+    ),
+    h5: ({ children }) => (
+      <h6 className="mb-2 text-lg underline">{children}</h6>
+    ),
+    h6: ({ children }) => <h6 className="mb-2 text-lg">{children}</h6>,
+    normal: ({ children }) => <p className="mb-2">{children}</p>,
+  },
+  marks: {
+    code: ({ children }) => (
+      <code className="bg-stone-800 p-0.5 px-1 text-white">{children}</code>
+    ),
+    link: ({ children, value }) => {
+      return (
+        <a
+          className="text-primary-800 underline hover:text-primary-700"
+          href={value.href}
+        >
+          {children}
+        </a>
+      );
+    },
+  },
+  list: {
+    bullet: ({ children }) => (
+      <ul className="list-disc [counter-reset:list-counter]">{children}</ul>
+    ),
+    number: ({ children }) => (
+      <ol className="[counter-reset:list-counter]">{children}</ol>
+    ),
+  },
+  listItem: {
+    bullet: ({ children }) => <li className="mb-1 ml-5 pl-2">{children}</li>,
+    number: ({ children, value }) => (
+      <li
+        className={`mb-1 pl-2 [counter-increment:list-counter] before:pr-2 before:content-[counter(list-counter)'.'] data-[list-type=lower-latin]:before:content-[counter(list-counter,lower-latin)')'] data-[list-type=lower-roman]:before:content-[counter(list-counter,lower-roman)'.'] ${
+          (value.level ?? 1) !== 1 ? 'ml-5' : ''
+        }`}
+        data-list-type={
+          (value.level ?? 1) % 3 === 1
+            ? 'decimal'
+            : (value.level ?? 1) % 3 === 2
+            ? 'lower-latin'
+            : 'lower-roman'
+        }
+      >
+        {children}
+      </li>
+    ),
+  },
+};
+
 export default function BlogPostContent({ content }: Props) {
   return (
     <div className="text-justify">
-      <PortableText
-        components={{
-          block: { h1: () => <h1>loli</h1> },
-          marks: {
-            code: ({ children }) => (
-              <code className="bg-stone-800 p-0.5 px-1 text-white">
-                {children}
-              </code>
-            ),
-          },
-        }}
-        value={content}
-      />
+      <PortableText components={components} value={content} />
     </div>
   );
 }

frontend/tailwind.config.js

@@ -20,4 +20,4 @@ export default {
     },
   },
   plugins: [],
-}
+};