From 7c3917a2ff043b79f02d443545de7a6149c0e05b Mon Sep 17 00:00:00 2001
From: Nimit Haria <nimitharia007@gmail.com>
Date: Fri, 29 Mar 2024 01:28:09 +0530
Subject: [PATCH 1/2] feat: printing notion notes

---
 src/app/pdf/[contentId]/page.tsx         | 21 +++++++++++
 src/components/Appbar.tsx                |  7 ++--
 src/components/NotionRenderer.tsx        | 20 ++++++++++-
 src/components/landing/footer/footer.tsx |  5 ++-
 src/components/print/Print.tsx           | 45 +++++++++++++++++++++++
 src/components/print/PrintNotes.tsx      | 46 ++++++++++++++++++++++++
 src/hooks/useMountStatus.ts              | 13 +++++++
 7 files changed, 153 insertions(+), 4 deletions(-)
 create mode 100644 src/app/pdf/[contentId]/page.tsx
 create mode 100644 src/components/print/Print.tsx
 create mode 100644 src/components/print/PrintNotes.tsx
 create mode 100644 src/hooks/useMountStatus.ts

diff --git a/src/app/pdf/[contentId]/page.tsx b/src/app/pdf/[contentId]/page.tsx
new file mode 100644
index 000000000..a80245598
--- /dev/null
+++ b/src/app/pdf/[contentId]/page.tsx
@@ -0,0 +1,21 @@
+import { NotionAPI } from 'notion-client';
+import db from '@/db';
+const notion = new NotionAPI();
+import PrintNotes from '@/components/print/PrintNotes';
+
+export default async function PrintNotion({
+  params: { contentId },
+}: {
+  params: { contentId: string };
+}) {
+  const notionMetadata = await db.notionMetadata.findFirst({
+    where: {
+      contentId: parseInt(contentId, 10),
+    },
+  });
+
+  if (notionMetadata?.notionId) {
+    const recordMap = await notion.getPage(notionMetadata?.notionId);
+    return <PrintNotes recordMap={recordMap} />;
+  }
+}
diff --git a/src/components/Appbar.tsx b/src/components/Appbar.tsx
index 369e7863b..368620be3 100644
--- a/src/components/Appbar.tsx
+++ b/src/components/Appbar.tsx
@@ -21,7 +21,10 @@ export const Appbar = () => {
   const currentPath = usePathname();
   return (
     <>
-      <nav className="fixed z-50 top-0 px-4 w-full h-16 border-b shadow-sm bg-background/80 backdrop-blur-md flex items-center gap-2">
+      <nav
+        id="appbar-nav"
+        className="fixed z-50 top-0 px-4 w-full h-16 border-b shadow-sm bg-background/80 backdrop-blur-md flex items-center gap-2"
+      >
         {currentPath.includes('courses') && (
           <ToggleButton
             onClick={() => {
@@ -89,7 +92,7 @@ export const Appbar = () => {
           )}
         </div>
       </nav>
-      <div className="h-16 w-full" />
+      <div className="h-16 w-full" id="appbar-placeholder" />
     </>
   );
 };
diff --git a/src/components/NotionRenderer.tsx b/src/components/NotionRenderer.tsx
index 2e3bc9ea3..3f3df8138 100644
--- a/src/components/NotionRenderer.tsx
+++ b/src/components/NotionRenderer.tsx
@@ -18,6 +18,9 @@ import 'prismjs/themes/prism-tomorrow.css';
 // used for rendering equations (optional)
 import 'katex/dist/katex.min.css';
 import { Loader } from './Loader';
+import Link from 'next/link';
+import { Button } from './ui/button';
+import { DownloadIcon } from 'lucide-react';
 
 // Week-4-1-647987d9b1894c54ba5c822978377910
 export const NotionRenderer = ({ id }: { id: string }) => {
@@ -37,7 +40,22 @@ export const NotionRenderer = ({ id }: { id: string }) => {
   }
 
   return (
-    <div>
+    <div className="relative">
+      <Link
+        href={`/pdf/${id}`}
+        target="_blank"
+        className="absolute right-4 top-4 z-20"
+      >
+        <Button
+          variant="outline"
+          className="bg-white text-black dark:bg-[#020917] dark:text-white"
+        >
+          Download
+          <div className="pl-2">
+            <DownloadIcon />
+          </div>
+        </Button>
+      </Link>
       <div style={{}}>
         <NotionRendererLib
           recordMap={data}
diff --git a/src/components/landing/footer/footer.tsx b/src/components/landing/footer/footer.tsx
index 9878cca0b..3468ed435 100644
--- a/src/components/landing/footer/footer.tsx
+++ b/src/components/landing/footer/footer.tsx
@@ -6,7 +6,10 @@ import Logo from '../logo/logo';
 
 const Footer = () => {
   return (
-    <div className="bottom-0 w-full p-4 bg-neutral-900 dark:bg-slate-900 px-6 lg:px-36">
+    <div
+      id="footer"
+      className="bottom-0 w-full p-4 bg-neutral-900 dark:bg-slate-900 px-6 lg:px-36"
+    >
       <div className="md:max-w-screen-2xl mt-4 mx-auto flex flex-row items-start justify-between w-full">
         <div className="flex flex-col md:flex-row w-3/5 md:justify-between">
           <div className="flex">
diff --git a/src/components/print/Print.tsx b/src/components/print/Print.tsx
new file mode 100644
index 000000000..c69d55eee
--- /dev/null
+++ b/src/components/print/Print.tsx
@@ -0,0 +1,45 @@
+'use client';
+import { useEffect } from 'react';
+
+export function Print() {
+  // Some hack for strict mode
+  let opened = false;
+  useEffect(() => {
+    if (opened) return;
+
+    // Adjusting padding and margins for print
+    document.querySelectorAll('details').forEach((e) => (e.open = true));
+    document.querySelectorAll('header').forEach((e) => {
+      e.style.display = 'none';
+    });
+    document.querySelectorAll('main').forEach((e) => {
+      e.style.padding = '0px';
+      e.style.margin = '0px';
+    });
+    document.querySelectorAll('.notion-title').forEach((e: any) => {
+      e.style.marginBottom = '0px';
+    });
+
+    // Removing layout header and footer from print
+    const appbar = document.getElementById('appbar-nav');
+    const footer = document.getElementById('footer');
+    const appbarPlaceholder = document.getElementById('appbar-placeholder');
+    if (appbar) {
+      appbar.style.display = 'none';
+    }
+    if (appbarPlaceholder) {
+      appbarPlaceholder.style.display = 'none';
+    }
+    if (footer) {
+      footer.style.display = 'none';
+    }
+
+    setTimeout(() => {
+      print();
+      opened = true;
+      window.close();
+    }, 2000);
+  }, []);
+
+  return null;
+}
diff --git a/src/components/print/PrintNotes.tsx b/src/components/print/PrintNotes.tsx
new file mode 100644
index 000000000..31134d06f
--- /dev/null
+++ b/src/components/print/PrintNotes.tsx
@@ -0,0 +1,46 @@
+'use client';
+
+import { NotionRenderer as NotionRendererLib } from 'react-notion-x';
+import 'react-notion-x/src/styles.css';
+import dynamic from 'next/dynamic';
+
+const Code = dynamic(() =>
+  import('react-notion-x/build/third-party/code').then((m) => m.Code),
+);
+const Equation = dynamic(() =>
+  import('react-notion-x/build/third-party/equation').then((m) => m.Equation),
+);
+
+// used for code syntax highlighting (optional)
+import 'prismjs/themes/prism-tomorrow.css';
+
+// used for rendering equations (optional)
+import 'katex/dist/katex.min.css';
+import { Print } from './Print';
+import useMountStatus from '@/hooks/useMountStatus';
+
+const PrintNotes = ({ recordMap }: { recordMap: any }) => {
+  const mounted = useMountStatus();
+
+  if (!mounted) {
+    return null;
+  }
+
+  return (
+    <>
+      <NotionRendererLib
+        recordMap={recordMap}
+        fullPage={true}
+        darkMode={false}
+        className="z-10"
+        components={{
+          Code,
+          Equation,
+        }}
+      />
+      <Print />
+    </>
+  );
+};
+
+export default PrintNotes;
diff --git a/src/hooks/useMountStatus.ts b/src/hooks/useMountStatus.ts
new file mode 100644
index 000000000..72fcba8bc
--- /dev/null
+++ b/src/hooks/useMountStatus.ts
@@ -0,0 +1,13 @@
+import { useEffect, useState } from 'react';
+
+const useMountStatus = () => {
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  return mounted;
+};
+
+export default useMountStatus;

From a78058e251465f6dbe405812eb1948497fdf2721 Mon Sep 17 00:00:00 2001
From: Nimit Haria <nimitharia007@gmail.com>
Date: Fri, 29 Mar 2024 02:00:11 +0530
Subject: [PATCH 2/2] fix: added print: tailwind classes to hide appbar and
 footer while printing

---
 src/components/Appbar.tsx                |  7 ++-----
 src/components/landing/footer/footer.tsx |  5 +----
 src/components/print/Print.tsx           | 14 --------------
 3 files changed, 3 insertions(+), 23 deletions(-)

diff --git a/src/components/Appbar.tsx b/src/components/Appbar.tsx
index 368620be3..ac241d7f5 100644
--- a/src/components/Appbar.tsx
+++ b/src/components/Appbar.tsx
@@ -21,10 +21,7 @@ export const Appbar = () => {
   const currentPath = usePathname();
   return (
     <>
-      <nav
-        id="appbar-nav"
-        className="fixed z-50 top-0 px-4 w-full h-16 border-b shadow-sm bg-background/80 backdrop-blur-md flex items-center gap-2"
-      >
+      <nav className="fixed z-50 top-0 px-4 w-full h-16 border-b shadow-sm bg-background/80 backdrop-blur-md flex items-center gap-2 print:hidden">
         {currentPath.includes('courses') && (
           <ToggleButton
             onClick={() => {
@@ -92,7 +89,7 @@ export const Appbar = () => {
           )}
         </div>
       </nav>
-      <div className="h-16 w-full" id="appbar-placeholder" />
+      <div className="h-16 w-full print:hidden" />
     </>
   );
 };
diff --git a/src/components/landing/footer/footer.tsx b/src/components/landing/footer/footer.tsx
index 3468ed435..a998ed697 100644
--- a/src/components/landing/footer/footer.tsx
+++ b/src/components/landing/footer/footer.tsx
@@ -6,10 +6,7 @@ import Logo from '../logo/logo';
 
 const Footer = () => {
   return (
-    <div
-      id="footer"
-      className="bottom-0 w-full p-4 bg-neutral-900 dark:bg-slate-900 px-6 lg:px-36"
-    >
+    <div className="bottom-0 w-full p-4 bg-neutral-900 dark:bg-slate-900 px-6 lg:px-36 print:hidden">
       <div className="md:max-w-screen-2xl mt-4 mx-auto flex flex-row items-start justify-between w-full">
         <div className="flex flex-col md:flex-row w-3/5 md:justify-between">
           <div className="flex">
diff --git a/src/components/print/Print.tsx b/src/components/print/Print.tsx
index c69d55eee..ee7f1cb2b 100644
--- a/src/components/print/Print.tsx
+++ b/src/components/print/Print.tsx
@@ -20,20 +20,6 @@ export function Print() {
       e.style.marginBottom = '0px';
     });
 
-    // Removing layout header and footer from print
-    const appbar = document.getElementById('appbar-nav');
-    const footer = document.getElementById('footer');
-    const appbarPlaceholder = document.getElementById('appbar-placeholder');
-    if (appbar) {
-      appbar.style.display = 'none';
-    }
-    if (appbarPlaceholder) {
-      appbarPlaceholder.style.display = 'none';
-    }
-    if (footer) {
-      footer.style.display = 'none';
-    }
-
     setTimeout(() => {
       print();
       opened = true;