Merge pull request #286 from nimit9/feat/notes-download

feat: downloading notes

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} />;
+  }
+}

src/components/Appbar.tsx

@@ -21,7 +21,7 @@ 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 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={() => {
@@ -89,7 +89,7 @@ export const Appbar = () => {
           )}
         </div>
       </nav>
-      <div className="h-16 w-full" />
+      <div className="h-16 w-full print:hidden" />
     </>
   );
 };

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}

src/components/landing/footer/footer.tsx

@@ -6,7 +6,7 @@ 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 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">

src/components/print/Print.tsx

@@ -0,0 +1,31 @@
+'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';
+    });
+
+    setTimeout(() => {
+      print();
+      opened = true;
+      window.close();
+    }, 2000);
+  }, []);
+
+  return null;
+}

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;

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;