Pdfgpt-destack-alpha NPM

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

Install pdfgpt-destack-alpha
```
  npm i pdfgpt-destack-alpha@latest
```

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";

Run following command and navigate to path where builder integrated. i.e. localhost:3000/destack-demo
```
  npm run dev
```
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
```