Preview Tutorial

In the case of Node.js, the UI to open the preview screen must be provided by the user.

Here is a guide to an example preview setup, assuming React is used for the front end.

Node.JS

const SEACRET_KEY = "SEACRET_KEY";

const payload = {
    subject: "Cool Subject",
    body: "# Headline\n This is a **Markdown** text\n ![](https://picsum.photos/500/300)",
    to: [
            { email: "[email protected]" },
            { email: "[email protected]", name: "John Adams" },
        ]
    };

const getDraft = async (request) => {
    const apiKey = request.headers.get("API-KEY");
    if(apiKey !== SEACRET_KEY){
        return new Response("error")
    }
    const url = new URL(request.url);
    const contentId = url.pathname.substring(url.pathname.lastIndexOf('/') + 1)
    const draft = /// Retrieve data from the database using contentId.
    return new Response(JSON.stringify(draft))
}

1. First, open the Preview tab in Vell, press Add New and select Custom.
2. Select the added items, and in Headers, add a header whose key is API-KEY and whose value is the above SEACRET_KEY. In Endpoint, enter the endpoint for processing the above getDraft.
3. The Node.js side is accessed from Vell with the following URL to retrieve data.

   https://your-service.com/<contentId>

   Enter the https://your-service.com part in the Endpoint field.

React

const PREVIEW_ID = /// Preview ID copied from Vell

const contents = [
    { id: "123", subject: "Cool Subject"},
    { id: "456", subject: "Good Subject"},
    { id: "789", subject: "Super Subject"},
]

export default function Contents() {
    return contents.map((content) => {
        return <a href={`https://vell-letter.com/preview/${content.id}?previewId=${PREVIEW_ID}`}>
            <div>
                {content.subject}
            </div>
        </a>
    })
}

1. Open the Preview tab in Vell and select the item to configure Node.js.
2. Copy the value of Preview ID and set it to PREVIEW_ID above.
3. When the content link is opened, the Vell preview screen opens, accesses the Node.js side, acquires the data, and displays it on the screen.