Overview

Dynamic website builder which you can integrate in your NextJS project

Steps to Integrate pdfgpt-destack-alpha

Create new NextJS project or modify any NextJS project with following steps

1. Install pdfgpt-destack-alpha

     npm i pdfgpt-destack-alpha@latest

2. Do following changes in app directory

   • Create any folder with name of the route(page) where you want to integrate builder i.e. app/destack-demo

     Create following file and add below code: app/destack-demo/page.tsx

     import ContentProviderApp from '@/src/components/destack/editor'
     import { getStaticProps } from 'pdfgpt-destack-alpha/build/server'
     
     export default async function Page() {
       const props = await getStaticProps().then((d: { props: any }) => d.props)
     
       return (
         <div style={{ height: '100%', color: 'black', backgroundColor: 'white' }}>
           <ContentProviderApp data={props?.data} standaloneServer={false} />
         </div>
       )
     }

     Create src/components/destack/editor.ts and add the following code:

     'use client'
     
     import { ContentProvider } from 'pdfgpt-destack-alpha'
     export default ContentProvider

     Create the app/api/builder/handle/route.ts file with the following code

     import { getPackagePath, fs, path, loadData, updateData, uploadFiles } from 'pdfgpt-destack-alpha/build/server'
     import { NextRequest, NextResponse } from 'next/server'
     
     function getQueryParams(req: NextRequest) {
       const url = new URL(req.url)
       const queryParams = Object.fromEntries(url.searchParams.entries())
       return queryParams
     }
     
     export async function GET(req: NextRequest) {
       try {
         const queryParams = getQueryParams(req)
         const result = await handleEditorNew(req, { query: queryParams })
     
         if (queryParams.type == 'theme') {
           const responseBody = await result.clone().json()
           return NextResponse.json(responseBody)
         }
     
         if (queryParams.type === 'asset') {
           const arrayBuffer = await result.arrayBuffer()
           return new NextResponse(arrayBuffer, {
             status: 200,
             headers: { 'Content-Type': 'image/png' },
           })
         }
     
         const response = await result.json()
         return new NextResponse(response, {
           status: 200,
           headers: { 'Content-Type': 'application/json' },
         })
       } catch (error) {
         console.error('Error handling GET request:', error)
         return new Response(JSON.stringify({ error: 'Internal Server Error' }), {
           status: 500,
           headers: { 'Content-Type': 'application/json' },
         })
       }
     }
     
     export async function POST(req: NextRequest) {
       try {
         const queryParams = getQueryParams(req)
     
         const result = await handleEditorNew(req, { query: queryParams })
     
         if (queryParams.type == 'theme') {
           const responseBody = await result.clone().json()
           return NextResponse.json(responseBody)
         }
     
         return NextResponse.json(result)
       } catch (error) {
         console.error('Error handling POST request:', error)
         return new Response(JSON.stringify({ error: 'Internal Server Error' }), {
           status: 500,
           headers: { 'Content-Type': 'application/json' },
         })
       }
     }
     
     async function handleDataNew(req: NextRequest) {
       try {
         const queryParams = getQueryParams(req)
     
         if (req.method === 'GET') {
           const data = await loadData(queryParams.path, queryParams.ext || 'html')
           return NextResponse.json(data)
         } else if (req.method === 'POST') {
           const contentType = req.headers.get('content-type')
           const isMultiPart = contentType?.startsWith('multipart/form-data')
     
           if (!isMultiPart) {
             const body = req.body
             await updateData(queryParams.path, queryParams.ext || 'html', body)
             return NextResponse.json({})
           }
     
           const urls = await uploadFiles(req)
           return NextResponse.json(urls)
         }
     
         return NextResponse.json({ error: 'Method Not Allowed' }, { status: 405 })
       } catch (error) {
         console.error('Error handling data in handleDataNew:', error)
         return NextResponse.json({ error: 'Internal Server Error' }, { status: 500 })
       }
     }
     
     async function handleAssetNew(req: NextRequest) {
       try {
         if (req.method === 'GET') {
           const queryParams = getQueryParams(req)
           const tempAssetPath = path.join(getPackagePath(), queryParams.path)
           const assetPath = tempAssetPath.replace('(rsc)', path.basename(process.cwd()))
     
           const data = await fs.promises.readFile(assetPath)
     
           return new NextResponse(data, {
             headers: {
               'Content-Type': 'image/png',
               'Content-Length': data.length.toString(),
             },
           })
         }
         return NextResponse.json({ error: 'Method Not Allowed' }, { status: 405 })
       } catch (error) {
         console.error('Error handling asset in handleAssetNew:', error)
         return NextResponse.json({ error: 'Internal Server Error' }, { status: 500 })
       }
     }
     
     async function handleThemeNew(req: NextRequest) {
       try {
         if (req.method === 'GET') {
           const queryParams = getQueryParams(req)
           const themeName = queryParams.name
           const tempFolderPath = path.join(getPackagePath(), 'themes', themeName)
           const folderPath = tempFolderPath.replace('(rsc)', path.basename(process.cwd()))
           const componentNames = await fs.promises
             .readdir(folderPath)
             .then((f: any[]) => f.filter((c) => c !== 'index.ts' && !c.startsWith('.')))
     
           const componentsP = componentNames.map(async (c: any) => {
             const assetPath = path.join(folderPath, c, 'index.html')
             const source = await fs.promises.readFile(assetPath, 'utf-8')
             return { source, folder: c }
           })
           const components = await Promise.all(componentsP)
           return NextResponse.json(components)
         }
         return NextResponse.json({ error: 'Not allowed' }, { status: 405 })
       } catch (error) {
         console.error('Error handling theme in handleThemeNew:', error)
         return NextResponse.json({ error: 'Internal Server Error' }, { status: 500 })
       }
     }
     
     async function handleEditorNew(req: NextRequest, { query }: { query: any }) {
       try {
         if (query.type === 'data') {
           return handleDataNew(req)
         } else if (query.type === 'asset') {
           return handleAssetNew(req)
         } else if (query.type === 'theme') {
           return handleThemeNew(req)
         }
         return NextResponse.json({ error: 'Invalid Type' }, { status: 400 })
       } catch (error) {
         console.error('Error handling editor request:', error)
         return NextResponse.json({ error: 'Internal Server Error' }, { status: 500 })
       }
     }

     • Create one directory and file in root directory data/default.html

     • Create destack.d.ts file in root directory and add below code to avoid typescript error

       declare module "pdfgpt-destack-alpha/build/server";
       declare module "pdfgpt-destack-alpha";

3. Run following command and navigate to path where builder integrated. i.e. localhost:3000/destack-demo

     npm run dev

4. Build and Start the Production Version

   After setting up the website, run the following commands to create an optimized production build and start the server:

   npm run build
   npm run start

Navigate to the same path in your browser to see the static website.

Contact Information

Feel free to reach out if you need any assistance:

• Email: [email protected]
• GitHub: meet-bhimani