feat: custom renderers

Author: AyushShivhare79

apps/web/app/globals.css

@@ -1,3 +1,7 @@
+@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Montserrat+Alternates:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;

apps/web/components/Blog.tsx

@@ -40,3 +40,4 @@ export const Blog = ({
     </div>
   );
 };
+ 

apps/web/components/CodeBlock.module.css

@@ -4,7 +4,7 @@
     font-size: 15px;
     word-wrap: break-word;
     white-space: pre-wrap;
-    background: #0f172a;
+    background: #020617;
     overflow: auto;
     line-height: 1.6;
     border: 1px solid #10b981;

apps/web/components/NotionRenderer.tsx

@@ -9,20 +9,36 @@ export const NotionRenderer = ({ recordMap }: { recordMap: any }) => {
   const { resolvedTheme } = useTheme();
 
   return (
-    <div className="w-full">
+    <div className=".notion_ w-full .notion-bg-black">
       <style>
-        {`
-          .notion-header {
-            display: none !important;
-          }
+        {` 
+            .notion-app {
+                background: #111827;
+            }
+            .notion-title{
+                font-family: open-montserrat;
+                font-size: xxx-large;
+            }
+            .notion-list li{
+                font-size: larger;
+                font-family: open-poppins 
+            }
+            .notion-text{
+                font-size: larger;
+                font-family: open-poppins 
+            }
+            .notion-header {
+                display: none !important;
+            }
+            .notion-page: {
+                padding: 0px !important;
+            }
 
-          .notion-page: {
-            padding: 0px !important;
-          }
         `}
       </style>
       <div className="rounded-full">
         <NotionRendererLib
+          className="text-red-500 "
           components={{
             Code: CodeBlock,
           }}

apps/web/components/mcq/MCQPanel.tsx

@@ -33,3 +33,4 @@ const MCQPanel = ({ problem }: { problem: Problem & { notionRecordMap: any } })
 };
 
 export default MCQPanel;
+ 

apps/web/tailwind.config.js

@@ -2,16 +2,21 @@
 module.exports = {
   darkMode: ["class"],
   content: [
-    '../../packages/ui/**/*.{ts,tsx}',
-    './app/**/*.{ts,tsx}',
-    './pages/**/*.{ts,tsx}',
-    './components/**/*.{ts,tsx}',
-    './app/**/*.{ts,tsx}',
-    './src/**/*.{ts,tsx}',
-    './screens/**/*{.ts,tsx}',
+    "../../packages/ui/**/*.{ts,tsx}",
+    "./app/**/*.{ts,tsx}",
+    "./pages/**/*.{ts,tsx}",
+    "./components/**/*.{ts,tsx}",
+    "./app/**/*.{ts,tsx}",
+    "./src/**/*.{ts,tsx}",
+    "./screens/**/*{.ts,tsx}",
   ],
   prefix: "",
   theme: {
+       fontFamily: {
+        "open-talk": ["Open Sans", " sans - serif"],
+        "open-poppins": ["Poppins", "sans-serif"],
+        "open-montserrat": ["Montserrat Alternates", "sans-serif"]
+      },
     container: {
       center: true,
       padding: "2rem",
@@ -77,4 +82,4 @@ module.exports = {
     },
   },
   plugins: [require("tailwindcss-animate")],
-}
+};