Tiny Beast theme: services

This layer is making it possible to gate content on the website

Setup

Make sure to install the dependencies:

pnpm install

Working on your layer

The layer is at the root of this repository, it is exactly like a regular Nuxt project, except you can publish it on NPM.

The .playground directory should help you on trying your layer during development.

Running pnpm dev will prepare and boot .playground directory, which imports your layer itself.

Distributing your layer

Your Nuxt layer is shaped exactly the same as any other Nuxt project, except you can publish it on NPM.

To do so, you only have to check if files in package.json are valid, then run:

npm publish --access public

Once done, your users will only have to run:

npm install --save your-layer

Then add the dependency to their extends in nuxt.config:

defineNuxtConfig({
  extends: 'tinybeast-services-gated-content'
})

Development Server

Start the development server on http://localhost:3000

pnpm dev

Production

Build the application for production:

pnpm build

Or statically generate it with:

pnpm generate

Locally preview production build:

pnpm preview

Storyblok

Storyblok is used for content management. To pull components from Storyblok, run:

storyblok pull-components --space <space_id>

storyblok cli 4

storyblok components --space <space_id> pull

To push components to Storyblok, run:

storyblok push-components --space <space_id> <path_to_schema_file>

storyblok cli 4

storyblok components push --space <space_id> --from <path_to_schema_file or space_id>

Required Environment Variables

Production/Development

• BASE_URL=your_base_url
• NUXT_PUBLIC_NODE_ENV=production (or development)
• STORYBLOK_ACCESS_TOKEN=your_storyblok_access_token
• CLERK_SECRET_KEY=your_clerk_secret_key
• NUXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key
• NUXT_PUBLIC_SUBSCRIPTION_PLANS=your_subscription_plans

Preview Mode (for Storyblok)

• NUXT_PUBLIC_NODE_ENV=preview
• STORYBLOK_SPACE=your_storyblok_space_url (used as password)
• STORYBLOK_ACCESS_TOKEN=your_storyblok_access_token

Preview Mode

When NUXT_PUBLIC_NODE_ENV=preview, the layer switches to preview mode:

• Clerk authentication is disabled - No Clerk module is loaded
• Simple password gate - Only /medlem routes are protected with a password prompt
• Password is the Storyblok space URL - Set via STORYBLOK_SPACE environment variable
• Persistent authentication - Uses localStorage to remember authentication (works in iframes)
• Perfect for Storyblok live preview - Solves iframe security header issues

This allows content editors to preview gated content in Storyblok without complex authentication flows.

Checkout the deployment documentation for more information.