feat(odin): Content pipeline (#710)

Now we are rendering html with typography elements coming from
"tailwind"

---------

Co-authored-by: Can Sirin <[email protected]>

apps/kampus/app/odin/mufredat/[[...lesson]]/OdinLesson.tsx

@@ -1,22 +1,13 @@
 "use client";
 
-import Markdown from "react-markdown";
 import { graphql, usePreloadedQuery } from "react-relay";
 
 import { type SerializablePreloadedQuery } from "@kampus/relay";
 import useSerializablePreloadedQuery from "@kampus/relay/use-serializable-preloaded-query";
 
-import {
-  TypographyBlockquote,
-  TypographyH1,
-  TypographyH2,
-  TypographyH3,
-  TypographyH4,
-  TypographyInlineCode,
-  TypographyList,
-  TypographyP,
-} from "~/../../packages/ui";
 import { type OdinLessonQuery } from "~/app/odin/mufredat/[[...lesson]]/__generated__/OdinLessonQuery.graphql";
+import { OdinLessonBody } from "./OdinLessonBody";
+import { OdinLessonTitle } from "./OdinLessonTitle";
 
 interface Props {
   preloadedQuery: SerializablePreloadedQuery<OdinLessonQuery>;
@@ -30,11 +21,10 @@ export const OdinLessonContainer = (props: Props) => {
       query OdinLessonQuery($id: ID!) {
         odin {
           lesson(id: $id) {
-            title
             body {
-              html
-              raw
+              ...OdinLessonBody_body
             }
+            ...OdinLessonTitle_title
           }
         }
       }
@@ -46,23 +36,8 @@ export const OdinLessonContainer = (props: Props) => {
 
   return (
     <>
-      <Markdown
-        components={{
-          h1: ({ ...props }) => <TypographyH1 {...props} />,
-          h2: ({ ...props }) => <TypographyH2 {...props} />,
-          h3: ({ ...props }) => <TypographyH3 {...props} />,
-          h4: ({ ...props }) => <TypographyH4 {...props} />,
-          p: ({ ...props }) => <TypographyP {...props} />,
-          a: ({ ...props }) => (
-            <a {...props} className="underline" target="_blank" rel="noopener noreferrer" />
-          ),
-          blockquote: ({ ...props }) => <TypographyBlockquote {...props} />,
-          code: ({ ...props }) => <TypographyInlineCode {...props} />,
-          ul: ({ ...props }) => <TypographyList {...props} />,
-        }}
-      >
-        {lesson?.body.html}
-      </Markdown>
+      <OdinLessonTitle lesson={data.odin.lesson} />
+      <OdinLessonBody body={lesson?.body ?? null} />
     </>
   );
 };

apps/kampus/app/odin/mufredat/[[...lesson]]/OdinLessonBody.tsx

@@ -0,0 +1,28 @@
+import { graphql, useFragment } from "react-relay";
+
+import { type OdinLessonBody_body$key } from "./__generated__/OdinLessonBody_body.graphql";
+
+interface Props {
+  body: OdinLessonBody_body$key | null;
+}
+
+const useOdinLessonBodyFragment = (key: OdinLessonBody_body$key | null) =>
+  useFragment(
+    graphql`
+      fragment OdinLessonBody_body on OdinLessonBody {
+        html
+      }
+    `,
+    key
+  );
+
+export const OdinLessonBody = (props: Props) => {
+  const body = useOdinLessonBodyFragment(props.body);
+
+  return (
+    <div
+      className="prose dark:prose-invert hover:prose-a:text-blue-500"
+      dangerouslySetInnerHTML={{ __html: body?.html ?? "" }}
+    />
+  );
+};

apps/kampus/app/odin/mufredat/[[...lesson]]/OdinLessonTitle.tsx

@@ -0,0 +1,23 @@
+import { graphql, useFragment } from "react-relay";
+
+import { type OdinLessonTitle_title$key } from "./__generated__/OdinLessonTitle_title.graphql";
+
+interface Props {
+  lesson: OdinLessonTitle_title$key | null;
+}
+
+const useOdinLessonTitleFragment = (key: OdinLessonTitle_title$key | null) =>
+  useFragment(
+    graphql`
+      fragment OdinLessonTitle_title on OdinLesson {
+        title
+      }
+    `,
+    key
+  );
+
+export const OdinLessonTitle = (props: Props) => {
+  const lesson = useOdinLessonTitleFragment(props.lesson);
+
+  return <h2 className="text-3xl font-bold">{lesson?.title}</h2>;
+};

apps/kampus/app/odin/mufredat/[[...lesson]]/page.tsx

@@ -5,6 +5,8 @@ import OdinLessonQueryNode, {
 } from "~/app/odin/mufredat/[[...lesson]]/__generated__/OdinLessonQuery.graphql";
 import { OdinLessonContainer } from "~/app/odin/mufredat/[[...lesson]]/OdinLesson";
 
+export const dynamic = "force-dynamic";
+
 export default async function OdinLessonPage({ params }: { params: { lesson: string[] } }) {
   const id = params.lesson ? params.lesson.join("/") : "mufredat";