Feat custom renderers (Heading, textblock etc)

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

@@ -1,40 +1,12 @@
 .code_block {
+    display: flex;
+    justify-content: space-between;
     position: relative;
     padding: 10px;
     font-size: 15px;
     word-wrap: break-word;
     white-space: pre-wrap;
-    background: #161b22;
+    background: #111827;
     overflow: auto;
-    line-height: 1.6;
-    border: 1px solid #333;
-    border-left: 3px solid #e81029;
     color: #564;
-    min-width: 200px;
-    width: 800px;
-    display: flex;
-    justify-content: space-between;
-}
-
-.copy_block {
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-}
-
-.copy_button {
-    position: relative;
-    cursor: pointer;
-    color: #fff;
-    background: gray;
-    border-radius: 0.5em;
-    padding: 2px 7px;
-    margin: 10px;
-}
-
-.copied_text {
-    background: #fff;
-    padding: 5px;
-    color: #161b22;
-    display: none;
-}
+}

apps/web/components/CodeBlock.tsx

@@ -14,11 +14,22 @@ export default function CodeBlock({ block }: { block: any }) {
 
   const [showCopiedMessage, setShowCopiedMessage] = useState(false);
 
-  return (
-    <div className="max-w-full relative">
-      <div className={`${styles.copy_block} absolute top-2 right-2 z-10`}>
+  return (  
+    <div>
+      <style>
+        {`
+          code[class*="language-"], pre[class*="language-"]{
+
+            font-family: Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New;;
+            font-size: 5rem 
+            line-height: 2rem 
+          }
+        `}
+      </style>
+      <div className="max-w-full relative">
+        <div className="flex w-full justify-end pr-1 pt-1 z-10 absolute">
           <button
-            className="text-gray-500 p-1 relative"
+            className="text-slate-100"
             onClick={() => {
               navigator.clipboard.writeText(code).then(() => {
                 setShowCopiedMessage(true);
@@ -30,11 +41,12 @@ export default function CodeBlock({ block }: { block: any }) {
           >
             {showCopiedMessage ? <CopyTick /> : <CopyIcon />}
           </button>
-      </div>
-      <div className="max-w-full overflow-auto relative">
-        <pre className={`${styles.code_block} px-4 sm:px-6 md:px-8`}>
-          <code className="language-javascript">{code}</code>
-        </pre>
+        </div>
+        <div className="max-w-full overflow-auto relative">
+          <pre className={`${styles.code_block} w-full rounded-md px-4 sm:px-6 md:px-8`}>
+            <code className="language-javascript">{code}</code>
+          </pre>
+        </div>
       </div>
     </div>
   );

apps/web/components/NotionRenderer.tsx

@@ -9,20 +9,41 @@ 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: #ffffff;
+                color: #000000
+                }  
+            .dark-mode {
+                  background: #000000;                
+                  color: #ffffff
+                  }
+            .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")],
-}
+};