Storyblok dynamic token

I had taken a break with storyblok to focus on the game. But I needed a break from that thinking I need to get back into my storyblok project.

Said and done, one thing I wanted to fix was that I had to spin up my localhost each time I wanted to make a post or an edit.

First I thought, what if I just use a the vercel preview wich is at a subdomain and configure it to use preview token and "draft" as the version?

That did not work for me. I tried with bypassing with ?x-vercel-protection-bypass=xxx
But the content would not show up. Seems like there is an ip whitelist at the enterprise plan that maybe could have worked.. But since I'm not on the enterprise plan I solved it like this:

In the +layout.js in the root of my routes I added this:

export async function load({ url }) {
	const isStoryblokEditor = url.searchParams.has('_storyblok');
	const versionConfig = {
		version: isStoryblokEditor ? 'draft' : 'prod',
		accessToken: isStoryblokEditor
			? PUBLIC_STORYBLOK_ACCESS_TOKEN_DRAFT
			: PUBLIC_STORYBLOK_ACCESS_TOKEN_PUBLIC
	};

...

I'm just checking if in editor, if I am, use the version and accesToken accordingly.

After this I needed to add the following to vercel.json to not get an error when using johandigital.com as preview in Storyblok:

{
	"headers": [
		{
			"source": "/(.*)",
			"headers": [
				{
					"key": "Content-Security-Policy",
					"value": "frame-ancestors https://app.storyblok.com"
				}
			]
		}
	]
}

And that's it!