feat: lookalike theme for preview

apps/frontend/src/pages/_app.js

@@ -3,7 +3,7 @@ import { config } from "@fortawesome/fontawesome-svg-core";
 import { SessionProvider } from "next-auth/react";
 
 import theme from "@/lib/theme";
-
+import { usePathname } from "next/navigation";
 import "@/styles/globals.css";
 import "@fortawesome/fontawesome-svg-core/styles.css";
 
@@ -15,9 +15,18 @@ export default function App({
   Component,
   pageProps: { session, ...pageProps },
 }) {
+  const pathname = usePathname();
+  const isPreview = pathname.includes("/preview/");
+
+  // It is best to disable the ChakraProvider when in preview post mode to avoid interference with the styles.
+
   return (
     <SessionProvider session={session}>
-      <ChakraProvider theme={theme}>
+      <ChakraProvider
+        theme={!isPreview ? theme : {}}
+        resetCSS={!isPreview}
+        disableGlobalStyle={isPreview}
+      >
         <Component {...pageProps} />
       </ChakraProvider>
     </SessionProvider>

apps/frontend/src/pages/posts/preview/[postId].js

@@ -1,10 +1,10 @@
-import React, { useRef } from "react";
+import React from "react";
 import { getServerSession } from "next-auth/next";
 import { authOptions } from "@/pages/api/auth/[...nextauth]";
 import { getPost } from "@/lib/posts";
 import { Prose } from "@nikolovlazar/chakra-ui-prose";
 import { EditorContent, useEditor } from "@tiptap/react";
-import { Text, Box, Image, useToast } from "@chakra-ui/react";
+import { Text, Box, Image } from "@chakra-ui/react";
 
 import { extensions } from "@/lib/editor-config";
 
@@ -33,9 +33,6 @@ export async function getServerSideProps(context) {
 }
 
 export default function PreviewArticlePage({ post, baseUrl }) {
-  const toast = useToast();
-  const toastIdRef = useRef();
-
   const editor = useEditor({
     extensions,
     content: post?.body,
@@ -45,25 +42,22 @@ export default function PreviewArticlePage({ post, baseUrl }) {
         class: "preview",
       },
     },
-    onCreate: () => {
-      // Prevent from creating a new toast every time the editor is created
-      if (toastIdRef.current) {
-        toast.close(toastIdRef.current);
-      }
-      toastIdRef.current = toast({
-        title: `Preview Mode`,
-        description: `This is just a preview of the formatting of the content for readability. The page may look different when published on the publication.`,
-        isClosable: true,
-        status: "info",
-        position: "bottom-right",
-        duration: null,
-      });
-    },
   });
 
   return (
-    <>
-      <Box m="0rem auto" w="100%" maxW="1060px" pt="5rem" px="4vw">
+    <Box width={"920px"} margin={"0 auto"}>
+      <style jsx global>{`
+        ::selection {
+          background: #002ead;
+          text-shadow: none;
+          color: white;
+        }
+
+        body {
+          background-color: #fff;
+        }
+      `}</style>
+      <Box m="0rem auto" pt="5rem" px="4vw">
         <Text fontSize="xxx-large" fontWeight="bold">
           {post?.title}
         </Text>
@@ -106,6 +100,6 @@ export default function PreviewArticlePage({ post, baseUrl }) {
           <EditorContent editor={editor} />
         </Prose>
       </Box>
-    </>
+    </Box>
   );
 }

apps/frontend/src/styles/globals.css

@@ -26,14 +26,6 @@
   min-width: 100%;
 }
 
-.preview {
-  min-height: 0;
-  max-height: unset;
-  overflow: unset;
-  padding: 1rem;
-  min-width: 100%;
-}
-
 .ProseMirror:focus {
   outline: none;
 }
@@ -131,3 +123,49 @@
 .dark-border pre {
   border: 2px solid #adb5bd;
 }
+
+/* preview */
+
+.preview {
+  /* layout */
+
+  background-color: #ffff;
+  padding: 1rem;
+  min-height: 0;
+  max-height: unset;
+  overflow: unset;
+  overflow-x: hidden;
+
+  /* typography */
+  font-family: "Lato", sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 1.6em;
+  letter-spacing: 0;
+  color: #0a0a23;
+  -webkit-font-smoothing: antialiased;
+}
+
+.preview p {
+  font-size: 22px;
+}
+
+.preview h1 {
+  font-size: 50px;
+  line-height: 1.15;
+}
+
+.preview h2 {
+  font-size: 36px;
+  line-height: 1.15;
+  margin: 0.5em 0 0.2em;
+}
+
+.preview h3,
+.preview h4,
+.preview h5,
+.preview h6 {
+  font-size: 28px;
+  line-height: 1.15;
+  margin: 0.5em 0 0.2em;
+}