add typography components for md rendering

kamp-us · Dec 3, 2023 · 2316528 · 2316528
1 parent b93abaf
commit 2316528
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 4 deletions.
diff --git a/apps/kampus/app/layout.tsx b/apps/kampus/app/layout.tsx
@@ -8,8 +8,9 @@ import { RelayEnvironmentProvider } from "~/features/relay/RelayEnvironmentProvi
 import "./globals.css";
 
 import { ThemeProvider } from "@kampus/ui";
+import { cn } from "~/../../packages/ui/utils";
 
-const inter = Inter({ subsets: ["latin"] });
+const inter = Inter({ subsets: ["latin"], variable: "--font-sans" });
 
 export const metadata = {
   title: "kamp.us",
@@ -19,7 +20,10 @@ export const metadata = {
 export default function RootLayout({ children }: { children: ReactNode }) {
   return (
     <html lang="en">
-      <body className={inter.className}>
+      <body className={cn(
+          "min-h-screen bg-background font-sans antialiased",
+          inter.variable
+        )}>
         <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
           <RelayEnvironmentProvider>{children}</RelayEnvironmentProvider>
           <Toaster />

diff --git a/apps/kampus/app/odin/mufredat/[[...lesson]]/OdinLesson.tsx b/apps/kampus/app/odin/mufredat/[[...lesson]]/OdinLesson.tsx
@@ -6,6 +6,16 @@ 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";
 
 interface Props {
@@ -36,8 +46,23 @@ export const OdinLessonContainer = (props: Props) => {
 
   return (
     <>
-      {lesson?.title}
-      <Markdown>{lesson?.body.html}</Markdown>
+      <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>
     </>
   );
 };