feat: server side rendering of panes

Author: nftchance

packages/app/components/landing/panes/posts.tsx

@@ -139,9 +139,9 @@ const PostCard: React.FC<{
                     h5: ({ children }) => <h5 className="mb-2 mt-8 text-lg font-bold">{children}</h5>,
                     h6: ({ children }) => <h6 className="text-medium mt-8 font-bold">{children}</h6>,
                     p: ({ children }) => (
-                        <motion.p className="mb-4 break-words text-justify text-plug-green/60 leading-tight">
+                        <motion.div className="mb-4 break-words text-justify text-plug-green/60 leading-tight">
                             {children}
-                        </motion.p>
+                        </motion.div>
                     ),
                     ul: ({ children }) => (
                         <motion.ul className="ml-8 list-disc break-words text-plug-green/60">
@@ -331,7 +331,7 @@ export const PostsPreview: React.FC<PostsProps> = ({ posts }) => {
                                             built by our team? Let us make a decision.
                                         </p>
 
-                                        <p className="mt-8 flex w-full flex-row items-center justify-between gap-8 font-bold">
+                                        <div className="mt-8 flex w-full flex-row items-center justify-between gap-8 font-bold">
                                             <button
                                                 className="flex cursor-pointer flex-row items-center gap-2 transition-all duration-200 ease-in-out hover:gap-4 group"
                                                 onClick={() => handlePreview("api")}
@@ -344,7 +344,7 @@ export const PostsPreview: React.FC<PostsProps> = ({ posts }) => {
                                                 <span className="whitespace-nowrap">Use our app</span>
                                                 <ArrowRight className="inline-block h-4 w-4 opacity-40 group-hover:opacity-100 transition-all duration-200 ease-in-out" />
                                             </Link>
-                                        </p>
+                                        </div>
                                     </motion.div>
                                 </div>
                             ) : (

packages/app/contexts/PreviewProvider.tsx

@@ -15,10 +15,14 @@ export const PreviewContext = createContext<{
     handleCollapse: () => { }
 });
 
-export const PreviewProvider: React.FC<React.PropsWithChildren> = ({ children }) => {
+type PreviewProviderProps = React.PropsWithChildren<{
+    initialPreview?: string | null
+}>
+
+export const PreviewProvider: React.FC<PreviewProviderProps> = ({ children, initialPreview }) => {
     const router = useRouter()
 
-    const [preview, setPreview] = useState<string | undefined>(undefined);
+    const [preview, setPreview] = useState<string | undefined>(initialPreview ?? undefined);
     const [collapsed, setCollapsed] = useState<boolean>(false);
 
     const handlePreview = (service: string | undefined) => {
@@ -44,9 +48,9 @@ export const PreviewProvider: React.FC<React.PropsWithChildren> = ({ children })
 
     useEffect(() => {
         if (!router.isReady) return
-        const preview = router.query.p as string | undefined
-        if (preview && ["app", "api", "posts", "terms"].includes(preview)) {
-            setPreview(preview as "app" | "api" | "posts" | "terms")
+        const queryPreview = router.query.p as string | undefined
+        if (queryPreview && ["app", "api", "posts", "terms", "jobs"].includes(queryPreview)) {
+            setPreview(queryPreview)
         }
     }, [router.isReady, router.query.p])
 

packages/app/pages/_app.tsx

@@ -49,7 +49,7 @@ const PlugApp: FC<AppProps> = ({ Component, pageProps }) => {
 
             <GoogleTagManager gtmId={GTM_ID} />
 
-            <PreviewProvider>
+            <PreviewProvider initialPreview={pageProps.initialPreview}>
                 <Component {...pageProps} />
             </PreviewProvider>
         </>

packages/app/pages/index.tsx

@@ -1,6 +1,5 @@
-import { GetStaticProps } from "next"
+import { GetServerSideProps, InferGetServerSidePropsType } from "next"
 import Head from "next/head"
-import { InferGetStaticPropsType } from "next/types"
 import { useEffect, useRef, useState } from "react"
 
 import { AnimatePresence, motion } from "framer-motion"
@@ -17,14 +16,26 @@ import { usePreview } from "@/contexts/PreviewProvider"
 import { getPosts, Post } from "@/lib/functions/posts"
 import { cn } from "@/lib/utils/style"
 
+const VALID_PREVIEWS = ["app", "api", "posts", "terms", "jobs"] as const
+type ValidPreview = typeof VALID_PREVIEWS[number]
 
-export const getStaticProps = (async () => {
+export const getServerSideProps = (async (context) => {
     const { posts } = getPosts(1, 100)
 
-    return { props: { posts } }
-}) satisfies GetStaticProps<{ posts: Post[] }>
+    const queryPreview = context.query.p as string | undefined
+    const initialPreview = queryPreview && VALID_PREVIEWS.includes(queryPreview as ValidPreview)
+        ? queryPreview
+        : undefined
 
-const Page = ({ posts }: InferGetStaticPropsType<typeof getStaticProps>) => {
+    return {
+        props: {
+            posts,
+            initialPreview: initialPreview ?? null
+        }
+    }
+}) satisfies GetServerSideProps<{ posts: Post[], initialPreview: string | null }>
+
+const Page = ({ posts }: InferGetServerSidePropsType<typeof getServerSideProps>) => {
     const { preview, handlePreview } = usePreview()
 
     const leftPaneRef = useRef<HTMLDivElement>(null)