### Install Example Package

Source: https://github.com/storyblok/monoblok/blob/main/packages/richtext/playground/vanilla/public/test.html

Command to install a specific package using npm. Use this to add the product to your project dependencies.

```bash
npm install @example/product
```

--------------------------------

### Start Svelte Development Server

Source: https://github.com/storyblok/monoblok/blob/main/packages/svelte/playground/sveltekit/README.md

After installing dependencies, run this command to start the development server. The `-- --open` flag will automatically open the app in your browser.

```bash
npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open
```

--------------------------------

### Install and Preview Storyblok Docs

Source: https://github.com/storyblok/monoblok/blob/main/packages/openapi/README.md

Install dependencies and start a local preview server for the Storyblok Management API documentation. Also includes a command to validate the specs.

```bash
pnpm install
pnpm docs:preview  # Start preview server
pnpm docs:lint     # Validate specs
```

--------------------------------

### Start Development Server

Source: https://github.com/storyblok/monoblok/blob/main/packages/cli/src/commands/create/README.md

Run the development server to start building your project.

```bash
npm run dev
```

--------------------------------

### Install @storyblok/live-preview

Source: https://github.com/storyblok/monoblok/blob/main/packages/live-preview/README.md

Install the package using npm or yarn.

```bash
npm install @storyblok/live-preview
# or
yarn add @storyblok/live-preview
```

--------------------------------

### Install Storyblok JS Client

Source: https://github.com/storyblok/monoblok/blob/main/packages/js-client/README.md

Install the client using npm or yarn.

```sh
npm install storyblok-js-client # yarn add storyblok-js-client
```

--------------------------------

### Pull a Single Component Example

Source: https://github.com/storyblok/monoblok/blob/main/packages/cli/src/commands/components/pull/README.md

This example shows how to pull a single component named 'hero' and its dependencies.

```bash
storyblok components pull hero --space 12345
```

--------------------------------

### Signup and Login Workflow

Source: https://github.com/storyblok/monoblok/blob/main/packages/cli/src/commands/signup/README.md

This example demonstrates the typical workflow: first signing up via the browser, then logging into the CLI.

```bash
storyblok signup
# Complete signup in browser
storyblok login
```

--------------------------------

### Install ESLint and @storyblok/eslint-config

Source: https://github.com/storyblok/monoblok/blob/main/packages/eslint-config/README.md

Install the necessary packages as development dependencies using pnpm.

```bash
pnpm i -D eslint @storyblok/eslint-config
```

--------------------------------

### Install Project Dependencies

Source: https://github.com/storyblok/monoblok/blob/main/packages/cli/src/commands/create/README.md

Install the necessary dependencies for the project using npm.

```bash
npm install
```

--------------------------------

### Install @storyblok/region-helper

Source: https://github.com/storyblok/monoblok/blob/main/packages/region-helper/README.md

Install the package using npm, yarn, pnpm, or bun.

```sh
# npm
npm install @storyblok/region-helper

# yarn
yarn add @storyblok/region-helper

# pnpm
pnpm install @storyblok/region-helper

# bun
bun install @storyblok/region-helper
```

--------------------------------

### Install Dependencies with pnpm

Source: https://github.com/storyblok/monoblok/blob/main/CONTRIBUTING.md

Installs all project dependencies using pnpm. Ensure Node.js and pnpm are installed.

```bash
pnpm install
```

--------------------------------

### Install Preview Package

Source: https://github.com/storyblok/monoblok/blob/main/CONTRIBUTING.md

Installs a specific preview version of a Storyblok package. Replace `package-name` and the version string with the actual values.

```bash
npm install @storyblok/package-name@0.0.0-pr123-a1b2c3d
```

--------------------------------

### Install Storyblok Angular SDK

Source: https://github.com/storyblok/monoblok/blob/main/packages/angular/README.md

Install the Storyblok Angular SDK using npm, pnpm, or yarn.

```bash
npm install @storyblok/angular
# or
pnpm add @storyblok/angular
# or
yarn add @storyblok/angular
```

--------------------------------

### Pull All Components with Default Settings

Source: https://github.com/storyblok/monoblok/blob/main/packages/cli/src/commands/components/pull/README.md

This example demonstrates pulling all components using the default settings, resulting in consolidated files in the default directory.

```bash
storyblok components pull --space 12345
```

--------------------------------

### Environment Configuration Example

Source: https://github.com/storyblok/monoblok/blob/main/packages/cli/src/commands/create/README.md

The command automatically generates a `.env` file containing your Storyblok space's access token.

```env
STORYBLOK_ACCESS_TOKEN=your_space_token_here
```

--------------------------------

### Astro Project Commands

Source: https://github.com/storyblok/monoblok/blob/main/packages/richtext/playground/astro/README.md

Common commands for managing an Astro project. These include installing dependencies, starting the development server, building for production, and previewing the build.

```text
pnpm install             | Installs dependencies                            
```

```text
pnpm dev             | Starts local dev server at `localhost:4321`      
```

```text
pnpm build           | Build your production site to `./dist/`          
```

```text
pnpm preview         | Preview your build locally, before deploying     
```

```text
pnpm astro ...       | Run CLI commands like `astro add`, `astro check` 
```

```text
pnpm astro -- --help | Get help using the Astro CLI                     
```

--------------------------------

### Example Datasource File Structure

Source: https://github.com/storyblok/monoblok/blob/main/packages/cli/src/commands/datasources/push/README.md

Illustrates the expected file structure for pushing datasources, including consolidated and separate file options with optional suffixes.

```json
{
  "id": 1,
  "name": "colors",
  "slug": "colors",
  "dimensions": [],
  "created_at": "2024-01-01T00:00:00.000Z",
  "updated_at": "2024-01-01T00:00:00.000Z",
  "entries": [
    {
      "id": 101,
      "name": "blue",
      "value": "#0000ff",
      "dimension_value": "",
      "datasource_id": 1
    }
  ]
}
```

--------------------------------

### Complete Storyblok CLI Configuration Example

Source: https://github.com/storyblok/monoblok/blob/main/packages/cli/src/lib/config/README.md

This example demonstrates a comprehensive Storyblok configuration file, showcasing all available global options and their default settings. It covers general, UI, API, logging, reporting, and module-specific configurations.

```typescript
// storyblok.config.ts
import { defineConfig } from 'storyblok/config';

export default defineConfig({
  // General settings
  region: 'eu', // Storyblok region: 'eu', 'us', 'ap', 'ca', 'cn'
  verbose: false, // Enable verbose output

  // UI configuration
  ui: {
    enabled: true, // Enable UI output
  },

  // API configuration
  api: {
    maxRetries: 3, // Maximum retry attempts for failed requests
    maxConcurrency: 6, // Maximum concurrent API requests
  },

  // Logging configuration
  log: {
    console: {
      enabled: false, // Enable console logging
      level: 'info', // Log level: 'info', 'warn', 'error', 'debug'
    },
    file: {
      enabled: true, // Enable file logging
      level: 'info', // File log level
      maxFiles: 10, // Maximum log files to keep
    },
  },

  // Report configuration
  report: {
    enabled: true, // Enable report generation
    maxFiles: 10, // Maximum report files to keep
  },

  // Module-specific configuration
  modules: {
    components: {
      path: '.storyblok', // Components working directory
      pull: {
        separateFiles: false, // Separate output per component
        filename: 'components', // Filename for exports
      },
      push: {
        dryRun: false, // Preview changes without pushing
      },
    },
    datasources: {
      pull: {
        separateFiles: false,
      },
      push: {
        dryRun: false,
      },
    },
    migrations: {
      space: undefined, // Target space ID
      run: {
        dryRun: false,
      },
    },
    types: {
      generate: {
        output: 'storyblok-component-types.d.ts',
      },
    },
  },
});

```

--------------------------------

### Install Storyblok Angular SDK

Source: https://github.com/storyblok/monoblok/blob/main/packages/angular/TUTORIAL.md

Install the official Storyblok SDK for Angular using npm.

```bash
npm install @storyblok/angular
```

--------------------------------

### Run Development Server with Bun

Source: https://github.com/storyblok/monoblok/blob/main/packages/react/playground/next-latest-static/README.md

Use this command to start the Next.js development server using Bun. Open http://localhost:3000 in your browser to view the application.

```bash
bun dev
```

--------------------------------

### Pull All Datasources with Default Settings

Source: https://github.com/storyblok/monoblok/blob/main/packages/cli/src/commands/datasources/pull/README.md

This example demonstrates pulling all datasources using the default output path and filename. The space ID `12345` is used.

```sh
storyblok datasources pull --space 12345
```

--------------------------------

### Install @storyblok/react with npm

Source: https://github.com/storyblok/monoblok/blob/main/packages/react/README.md

Use npm to install the Storyblok React SDK. This is the standard method for integrating the SDK into your React project.

```bash
npm install @storyblok/react

```

--------------------------------

### Start development mode for a package

Source: https://github.com/storyblok/monoblok/blob/main/README.md

Initiate development mode for a specific package, enabling hot-reloading and other development features.

```bash
pnpm dev @storyblok/react
```

--------------------------------

### Install Storyblok CLI

Source: https://github.com/storyblok/monoblok/blob/main/packages/cli/src/README.md

Install the latest version of the Storyblok CLI using npm. For a specific version, append '@<version>' to the package name.

```bash
npm install storyblok
```

```bash
npm install storyblok@<version>
```

--------------------------------

### Rollback Specific Migration Example

Source: https://github.com/storyblok/monoblok/blob/main/packages/cli/src/commands/migrations/rollback/README.md

Example demonstrating how to rollback a migration file named 'migration-component.1746452866186.json' in space '12345'.

```bash
storyblok migrations rollback migration-component.1746452866186.json --space 12345
```

--------------------------------

### Run Development Server with pnpm

Source: https://github.com/storyblok/monoblok/blob/main/packages/react/playground/next-latest-static/README.md

Use this command to start the Next.js development server using pnpm. Open http://localhost:3000 in your browser to view the application.

```bash
pnpm dev
```

--------------------------------

### Run Development Server in Next.js

Source: https://github.com/storyblok/monoblok/blob/main/packages/react/playground/next-latest/README.md

Use these commands to start the development server for your Next.js application. Open http://localhost:3000 in your browser to view the result.

```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```

--------------------------------

### Run Development Server with Yarn

Source: https://github.com/storyblok/monoblok/blob/main/packages/react/playground/next-latest-static/README.md

Use this command to start the Next.js development server using Yarn. Open http://localhost:3000 in your browser to view the application.

```bash
yarn dev
```

--------------------------------

### Start Interactive Login

Source: https://github.com/storyblok/monoblok/blob/main/packages/cli/src/commands/login/README.md

Initiates an interactive process to log in using email and password or a personal access token. This is the default command when no options are provided.

```bash
storyblok login
```

--------------------------------

### Delete Datasource by Name Example (CLI)

Source: https://github.com/storyblok/monoblok/blob/main/packages/cli/src/commands/datasources/delete/README.md

Example of deleting a datasource named 'colors' from a space with ID '12345'.

```sh
storyblok datasources delete colors --space 12345
```

--------------------------------

### Install Storyblok JS Client v4 (Axios)

Source: https://github.com/storyblok/monoblok/blob/main/packages/js-client/README.md

Use this command to install version 4 of the Storyblok JS client if you need to continue using axios.

```bash
npm install https://github.com/storyblok/storyblok-js-client.git#4.x.x
```

--------------------------------

### Story File Structure Example

Source: https://github.com/storyblok/monoblok/blob/main/packages/cli/src/commands/stories/pull/README.md

Downloaded stories are saved in the `.storyblok/stories/<space_id>/` directory with the format `{slug}_{UUID}.json`.

```bash
.storyblok/
└── stories/
    └── YOUR_SPACE_ID/
        ├── a-story_a1bb908e-3d91-4189-8c1d-d2a97c11ed38.json
        ├── b-story_acc69b70-1a03-4650-98c8-5d969daedf60.json
        └── c-story_93fa6d92-3d2a-48d2-93e8-407eb5ff20dc.json
```

--------------------------------

### Example File Structure After Generation

Source: https://github.com/storyblok/monoblok/blob/main/packages/cli/src/commands/types/generate/README.md

Illustrates the directory structure created by the 'types generate' command. Base types are in `.storyblok/types/`, and component-specific types are in `.storyblok/types/{spaceId}/`.

```bash
.storyblok/
└── types/
    ├── storyblok.d.ts            # Base Storyblok types
    └── 295018/
        └── storyblok-components.d.ts        # Your component types
```

--------------------------------

### Initialize Storyblok SDK for Static Exports (SSR)

Source: https://github.com/storyblok/monoblok/blob/main/packages/react/README.md

Initialize the Storyblok SDK using the SSR export for static site generation. This setup does not support live editing.

```javascript
// lib/storyblok.js
import { apiPlugin, storyblokInit } from "@storyblok/react/ssr"; // Use SSR export
import Page from "@/components/Page";
import Teaser from "@/components/Teaser";

export const getStoryblokApi = storyblokInit({
  accessToken: "YOUR_ACCESS_TOKEN",
  use: [apiPlugin],
  components: {
    page: Page,
    teaser: Teaser,
  },
});
```

--------------------------------

### Install @storyblok/react from CDN

Source: https://github.com/storyblok/monoblok/blob/main/packages/react/README.md

Include the Storyblok React SDK directly in your HTML file using a CDN link. This is useful for quick integration or when not using a module bundler.

```html
<script src="https://unpkg.com/@storyblok/react"></script>

```

--------------------------------

### Configure custom cache with StoryblokClient

Source: https://context7.com/storyblok/monoblok/llms.txt

Set up a custom cache implementation, such as Redis, for the StoryblokClient. Requires providing custom get, getAll, set, and flush functions.

```javascript
// Custom Redis-backed cache
const redisClient = new StoryblokClient({
  accessToken: 'YOUR_TOKEN',
  cache: {
    clear: 'manual',
    type: 'custom',
    custom: {
      get: (key) => redisGet(key),
      getAll: () => redisGetAll(),
      set: (key, value) => redisSet(key, value),
      flush: () => redisFlush(),
    },
  },
});
```

--------------------------------

### Storyblok Rich Text Rendering Example

Source: https://github.com/storyblok/monoblok/blob/main/packages/richtext/tests/unit/coverage/src/richtext.ts.html

Demonstrates how to fetch content from Storyblok and render it using the `richTextResolver`. Ensure your Storyblok access token is set in your environment variables.

```typescript
import StoryblokClient from 'storyblok-js-client'
import { richTextResolver } from '@storyblok/richtext'

const storyblok = new StoryblokClient({
 accessToken:  import.meta.env.VITE_STORYBLOK_TOKEN,
})

const story = await client.get('cdn/stories/home', {
  version: 'draft',
})

const html = richTextResolver().render(story.data.story.content.richtext)

```

--------------------------------

### Filter Content by Path Prefix

Source: https://github.com/storyblok/monoblok/blob/main/packages/js-client/README.md

Fetch all content items that start with a specific path prefix, such as 'news/', using the `starts_with` parameter. This is useful for retrieving content from a specific folder.

```javascript
import StoryblokClient from 'storyblok-js-client'

let client = new StoryblokClient({
  accessToken: '<YOUR_SPACE_ACCESS_TOKEN>',
})

// Get all content from the news folder
client
  .get('cdn/stories', {
    version: 'draft',
    starts_with: 'news/',
  })
  .then((res) => {
    console.log(res.data.stories)
  })
```

--------------------------------

### Navigate to Project Directory

Source: https://github.com/storyblok/monoblok/blob/main/packages/cli/src/commands/create/README.md

After creating a project, navigate into the newly created project directory.

```bash
cd your-project-name
```

--------------------------------

### Delete Datasource by Both Name and ID (CLI - Not Recommended)

Source: https://github.com/storyblok/monoblok/blob/main/packages/cli/src/commands/datasources/delete/README.md

This example shows how to provide both name and ID. The command will warn and use the ID as the source of truth. It's not recommended to use both.

```sh
storyblok datasources delete colors --space 12345 --id 67890
# ⚠️ Will warn and use the id as the source of truth
```

--------------------------------

### Pull Datasources to a Custom Path

Source: https://github.com/storyblok/monoblok/blob/main/packages/cli/src/commands/datasources/pull/README.md

Specify a custom directory for storing the downloaded datasources files using the `--path` option. This example saves files to a `backup` directory.

```sh
storyblok datasources pull --space 12345 --path ./backup
```

--------------------------------

### Create Astro Project with Basics Template

Source: https://github.com/storyblok/monoblok/blob/main/packages/richtext/playground/astro/README.md

Use this command to create a new Astro project with the 'basics' template. This sets up a foundational project structure.

```sh
pnpm create astro@latest -- --template basics
```

--------------------------------

### Install Specific Package Versions with npm

Source: https://github.com/storyblok/monoblok/blob/main/RELEASING.md

Users can install specific versions of packages using npm distribution tags. This allows for installation of the latest stable, next, beta, or alpha versions.

```bash
# Latest stable version
npm install @storyblok/package

# Next version
npm install @storyblok/package@next

# Beta version
npm install @storyblok/package@beta

# Alpha version
npm install @storyblok/package@alpha
```

--------------------------------

### Delete Datasource by ID Example (CLI)

Source: https://github.com/storyblok/monoblok/blob/main/packages/cli/src/commands/datasources/delete/README.md

Example of deleting a datasource using its ID '67890' from a space with ID '12345'.

```sh
storyblok datasources delete --space 12345 --id 67890
```

--------------------------------

### Basic Create Command Usage

Source: https://github.com/storyblok/monoblok/blob/main/packages/cli/src/commands/create/README.md

Initiates an interactive process to scaffold a new project. Choose your technology stack and project path during the prompts.

```bash
storyblok create [project-path]
```

--------------------------------

### Enable Live Preview with provideStoryblok

Source: https://github.com/storyblok/monoblok/blob/main/packages/angular/README.md

Configure the SDK with `provideStoryblok` and `withLivePreview` to enable real-time visual editing. Specify `resolveRelations` if needed.

```typescript
// app.config.ts
provideStoryblok(
  {accessToken: 'YOUR_ACCESS_TOKEN'},
  withLivePreview({
    resolveRelations: ['article.author'],
  })
)
```

--------------------------------

### Build Svelte Project for Production

Source: https://github.com/storyblok/monoblok/blob/main/packages/svelte/playground/sveltekit/README.md

Execute this command to create a production-ready build of your SvelteKit application.

```bash
npm run build
```

--------------------------------

### Install @storyblok/react with yarn

Source: https://github.com/storyblok/monoblok/blob/main/packages/react/README.md

Use yarn to install the Storyblok React SDK. This is an alternative package manager for integrating the SDK into your React project.

```bash
yarn add @storyblok/react

```

--------------------------------

### Storyblok Folder Story Example

Source: https://github.com/storyblok/monoblok/blob/main/packages/cli/src/commands/stories/README.md

Example JSON structure for a Storyblok story that represents a folder. The `is_folder` property must be set to `true`.

```json
{
  "id": 3000,
  "uuid": 3000,
  "name": "Blog",
  "slug": "blog",
  "full_slug": "blog",
  "is_folder": true // Mark this story as a folder
}
```

--------------------------------

### Create or Switch to Pre-release Branch

Source: https://github.com/storyblok/monoblok/blob/main/RELEASING.md

Prepare for a pre-release by creating a new branch or switching to an existing one for alpha, beta, or next versions.

```bash
git checkout -b alpha   # or beta, next
# Or if branch exists:
git checkout alpha
```

--------------------------------

### Drupal to Storyblok Story Payload Example

Source: https://github.com/storyblok/monoblok/blob/main/packages/cli/src/commands/stories/README.md

Example JSON structure for a Storyblok story migrated from Drupal. Ensure `id` and `uuid` are set to the source system values.

```json
// drupal -> Storyblok
{
  "id": 67890, // source Drupal node ID
  "uuid": 67890, // same as the source ID to keep mapping simple
  "name": "Drupal Article",
  "slug": "drupal-article",
  "content": {
    "component": "page",
    "headline": "Migrated from Drupal",
    "cta": {
      "fieldtype": "multilink",
      "linktype": "story",
      "id": 67891, // linked Drupal node ID (same as that story's uuid)
      "url": "",
      "cached_url": "related-article"
    }
  }
}
```

--------------------------------

### WordPress to Storyblok Story Payload Example

Source: https://github.com/storyblok/monoblok/blob/main/packages/cli/src/commands/stories/README.md

Example JSON structure for a Storyblok story migrated from WordPress. Ensure `id` and `uuid` are set to the source system values.

```json
// wordpress -> Storyblok
{
  "id": 12345, // source WordPress ID
  "uuid": 12345, // same as the source ID to keep mapping simple
  "name": "Hello WordPress",
  "slug": "hello-wordpress",
  "content": {
    "component": "page",
    "headline": "Hello from WP",
    "cta": {
      "fieldtype": "multilink",
      "linktype": "story",
      "id": 12346, // linked WP post ID (same as that story's uuid)
      "url": "",
      "cached_url": "related-post"
    }
  }
}
```

--------------------------------

### Storyblok Nested Story Example

Source: https://github.com/storyblok/monoblok/blob/main/packages/cli/src/commands/stories/README.md

Example JSON structure for a story nested within a folder. The `full_slug` is constructed from the folder's `full_slug` and the story's `slug`, and `parent_id` links to the folder.

```json
{
  "id": 3001,
  "uuid": 3001,
  "name": "Hello Blog",
  "slug": "hello-blog",
  "full_slug": "blog/hello-blog", // `full_slug` of folder + `slug` of this story
  "parent_id": 3000, // folder ID
  "content": { "component": "page", "headline": "Nested under Blog" }
}
```

--------------------------------

### Clone Monoblok Repository

Source: https://github.com/storyblok/monoblok/blob/main/README.md

Clone the monoblok repository and navigate into the project directory. Ensure you have Git installed.

```bash
git clone https://github.com/storyblok/monoblok.git
cd monoblok
```

--------------------------------

### Storyblok CLI: Content Migration Script Example

Source: https://context7.com/storyblok/monoblok/llms.txt

Generate a migration template for a specific component. Edit the generated JavaScript file to define transformation logic, such as renaming fields or coercing data types. Preview migrations with `--dry-run` before applying or rolling back.

```javascript
export default function(block) {
  block.title = block.headline;        // rename field
  delete block.headline;
  block.published = !!(block.status);  // coerce to boolean
  return block;
}
```

```bash
# Generate a migration template for a component
storyblok migrations generate hero --space 12345 --suffix rename-field
# Edit .storyblok/migrations/12345/hero.rename-field.js:
# export default function(block) {
#   block.title = block.headline;        // rename field
#   delete block.headline;
#   block.published = !!(block.status);  // coerce to boolean
#   return block;
# }

# Preview migration (dry run)
storyblok migrations run hero --space 12345 --dry-run
# Apply migration
storyblok migrations run hero --space 12345
# Rollback migration
storyblok migrations rollback hero --space 12345
```

--------------------------------

### Create Project with Specific Template

Source: https://github.com/storyblok/monoblok/blob/main/packages/cli/src/commands/create/README.md

Scaffolds a new project using a predefined technology template. Replace 'react' with your desired template (e.g., vue, svelte, astro).

```bash
storyblok create my-project --template react
```

--------------------------------

### JavaScript Function Example

Source: https://github.com/storyblok/monoblok/blob/main/packages/richtext/playground/vanilla/public/test.html

A basic JavaScript function to greet a user. This can be used for simple string manipulation and output.

```javascript
function greet(name) {
  return `Hello, ${name}!`;
}

console.log(greet('Storyblok'));
```

--------------------------------

### Astro Editable Component Example

Source: https://context7.com/storyblok/monoblok/llms.txt

Define an editable component in Astro that accepts 'blok' as a prop and applies the storyblokEditable action.

```astro
// src/storyblok/Teaser.astro — editable component
---import { storyblokEditable } from '@storyblok/astro';
const { blok } = Astro.props;
---
<div {...storyblokEditable(blok)}>
  <h2>{blok.headline}</h2>
</div>
```

--------------------------------

### Combine Advanced Release Options

Source: https://github.com/storyblok/monoblok/blob/main/RELEASING.md

Demonstrates combining multiple advanced options for granular control over the release process. The order of options does not matter.

```bash
pnpm release --version=0.1.0 --projects=@storyblok/astro --first-release --dry-run
```

--------------------------------

### Push All Components

Source: https://github.com/storyblok/monoblok/blob/main/packages/cli/src/commands/components/push/README.md

Uploads all components and their dependencies from the default directory. Ensure you have previously pulled components using the `components pull` command.

```bash
storyblok components push --space YOUR_SPACE_ID
```

--------------------------------

### StoryblokClient Initialization with Custom Cache

Source: https://github.com/storyblok/monoblok/blob/main/packages/js-client/README.md

Demonstrates how to initialize the StoryblokClient with a custom cache implementation, allowing for advanced caching strategies like Redis.

```APIDOC
## new StoryblokClient({ accessToken, cache })

### Description
Initializes a new StoryblokClient instance. The `cache` option allows for custom cache configurations.

### Parameters
#### `accessToken` (String) - Required. Your Storyblok access token.
#### `cache` (Object) - Optional. Configuration for the cache.
  - `clear` (String) - Defines how the cache is cleared. Example: `manual`.
  - `type` (String) - The type of cache. Example: `custom`.
  - `custom` (Object) - An object containing custom cache methods.
    - `get` (Function) - Custom function to retrieve data from the cache.
    - `getAll` (Function) - Custom function to retrieve all cached data.
    - `set` (Function) - Custom function to set data in the cache.
    - `flush` (Function) - Custom function to clear the cache.

### Request Example
```javascript
new StoryblokClient({
  accessToken: '<YOUR_SPACE_ACCESS_TOKEN>',
  cache: {
    clear: "manual",
    type: "custom",
    custom: {
      get () {
        // example: get here cache from Redis
        return Promise.resolve(0);
      },
      getAll () {
        return Promise.resolve(0);
      },
      set () {
        return Promise.resolve(0);
      },
      flush () {
        return Promise.resolve(0);
      },
    }
  }
})
```
```

--------------------------------

### Configure npmrc for GitHub Packages

Source: https://github.com/storyblok/monoblok/blob/main/CONTRIBUTING.md

Configures your .npmrc file to use the GitHub Packages registry. This is required for installing preview packages.

```ini
@storyblok:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=${GITHUB_TOKEN}
```

--------------------------------

### Mark as First Release

Source: https://github.com/storyblok/monoblok/blob/main/RELEASING.md

Use this flag when performing the very first release of a package or the entire monorepo. It ensures correct versioning from the start.

```bash
pnpm release --first-release
```

--------------------------------

### Run Tests with UI using pnpm

Source: https://github.com/storyblok/monoblok/blob/main/packages/cli/README.md

Launches the Vitest UI for an interactive testing experience.

```bash
pnpm run test:ui
```

--------------------------------

### Push Components with Filter

Source: https://github.com/storyblok/monoblok/blob/main/packages/cli/src/commands/components/push/README.md

Uploads components that match a glob pattern. This is useful for pushing a subset of components, such as those starting with a specific prefix.

```bash
storyblok components push --space 12345 --filter "hero*"
```

--------------------------------

### Passing Bridge Options to useStoryblok

Source: https://github.com/storyblok/monoblok/blob/main/packages/react/README.md

This example shows how to pass Bridge options as the third parameter to the `useStoryblok` hook for custom configurations.

```javascript
useStoryblok(
  story.id,
  { version: "draft", resolveRelations: ["Article.author"] },
  {
    resolveRelations: ["Article.author"],
    resolveLinks: "url",
    preventClicks: true,
  },
);
```

--------------------------------

### Create Project with Custom Path

Source: https://github.com/storyblok/monoblok/blob/main/packages/cli/src/commands/create/README.md

Specifies a custom directory for the new project. This can be a relative or absolute path.

```bash
storyblok create ./projects/my-awesome-app --template astro
```

```bash
storyblok create /Users/john/projects/my-app --template eleventy
```

--------------------------------

### Svelte SDK Initialization and Server-Side Loading

Source: https://context7.com/storyblok/monoblok/llms.txt

Initialize the Svelte SDK with plugins and components, and load content server-side using the useStoryblokApi.

```svelte
<!-- src/routes/+page.ts — load content server-side -->
<script lang="ts">
import { apiPlugin, storyblokInit, useStoryblokApi } from '@storyblok/svelte';
import Page from '$lib/components/Page.svelte';
import Teaser from '$lib/components/Teaser.svelte';

storyblokInit({
  accessToken: 'YOUR_ACCESS_TOKEN',
  use: [apiPlugin],
  components: { page: Page, teaser: Teaser },
});

export async function load() {
  const storyblokApi = useStoryblokApi();
  const { data } = await storyblokApi.get('cdn/stories/home', { version: 'draft' });
  return { story: data.story };
}
</script>
```

--------------------------------

### Field Internationalization (i18n) Example

Source: https://github.com/storyblok/monoblok/blob/main/packages/cli/src/commands/stories/README.md

Demonstrates how to handle translated variants of the same field using `__i18n__<locale>` suffixes in the JSON payload.

```json
{
  "id": 55555,
  "uuid": 55555,
  "name": "Hello i18n",
  "slug": "hello-i18n",
  "content": {
    "component": "page",
    "headline": "Hello",
    "headline__i18n__de": "Hallo",
    "headline__i18n__fr": "Bonjour"
  }
}
```

--------------------------------

### Folder Payload for Drupal Migration

Source: https://github.com/storyblok/monoblok/blob/main/packages/cli/src/commands/assets/README.md

Example JSON structure for a folder when migrating from Drupal to Storyblok. Stored in `.storyblok/assets/<space>/folders/`.

```json
{
  "id": 200, // source Drupal taxonomy term ID
  "name": "Social Media Campaigns",
  "parent_id": 100, // References the parent folder ID
  "uuid": "200", // same as the source ID to keep mapping simple
  "parent_uuid": "100"
}
```

--------------------------------

### Run All Migrations

Source: https://github.com/storyblok/monoblok/blob/main/packages/cli/src/commands/migrations/run/README.md

Execute all migration scripts found in the default directory for the specified space. Ensure migrations are generated first.

```bash
storyblok migrations run --space YOUR_SPACE_ID
```

```bash
storyblok migrations run --space 12345
```

--------------------------------

### Pull All Datasources (Basic Usage)

Source: https://github.com/storyblok/monoblok/blob/main/packages/cli/src/commands/datasources/pull/README.md

Use this command to download all datasources and their entries to a consolidated file within your project. The space ID is required.

```sh
storyblok datasources pull --space <SPACE_ID>
```

--------------------------------

### Folder Payload for WordPress Migration

Source: https://github.com/storyblok/monoblok/blob/main/packages/cli/src/commands/assets/README.md

Example JSON structure for a folder when migrating from WordPress to Storyblok. Stored in `.storyblok/assets/<space>/folders/`.

```json
{
  "id": 100, // source WordPress category ID
  "name": "Marketing Assets",
  "parent_id": 0,
  "uuid": "100", // same as the source ID to keep mapping simple
  "parent_uuid": null
}
```

--------------------------------

### Using OAuth Access Token in API Requests

Source: https://github.com/storyblok/monoblok/blob/main/packages/openapi/authentication/oauth-access-token.md

This example demonstrates how to include an OAuth Access Token in the Authorization header for API requests.

```APIDOC
## Using OAuth Access Token in API Requests

### Description
Include your OAuth Access Token in the `Authorization` header using the `Bearer` keyword to authenticate your API requests.

### Method
GET

### Endpoint
`/v1/spaces/{space_id}/stories`

### Parameters
#### Header Parameters
- **Authorization** (string) - Required - The access token prefixed with "Bearer ". Example: `Bearer YOUR_OAUTH_ACCESS_TOKEN`

### Request Example
```bash
curl -H "Authorization: Bearer YOUR_OAUTH_ACCESS_TOKEN" \
  https://mapi.storyblok.com/v1/spaces/123/stories
```

### Response
#### Success Response (200)
- **stories** (array) - An array of story objects.
- **total** (integer) - The total number of stories.

#### Response Example
```json
{
  "stories": [
    {
      "name": "Home",
      "created_at": "2023-01-01T10:00:00.000Z",
      "published_at": "2023-01-01T10:00:00.000Z",
      "id": 12345,
      "uuid": "...",
      "slug": "home",
      "content": {},
      "{\"name\": \"Home\", \"created_at\": \"2023-01-01T10:00:00.000Z\", \"published_at\": \"2023-01-01T10:00:00.000Z\", \"id\": 12345, \"uuid\": \"...\", \"slug\": \"home\", \"content\": {}}"
    }
  ],
  "total": 1
}
```
```

--------------------------------

### Define Parent CLI Command

Source: https://github.com/storyblok/monoblok/blob/main/packages/cli/AGENTS.md

Example of defining a parent command in Commander.js. Parent commands expose a shared command instance for subcommands.

```typescript
export const componentsCommand = program
  .command(commands.COMPONENTS)
  .alias('comp')
  .description(`Manage your space's block schema`);
```

--------------------------------

### Storyblok CLI: Project Scaffolding

Source: https://context7.com/storyblok/monoblok/llms.txt

Initialize a new Storyblok project structure using the CLI. This command helps set up the basic files and directories for a new project.

```bash
storyblok create
```

--------------------------------

### Pull All Components

Source: https://github.com/storyblok/monoblok/blob/main/packages/cli/src/commands/components/pull/README.md

Use this command to download all components and their dependencies from your Storyblok space to consolidated files.

```bash
storyblok components pull --space YOUR_SPACE_ID
```

--------------------------------

### Create a New Svelte Project

Source: https://github.com/storyblok/monoblok/blob/main/packages/svelte/playground/sveltekit/README.md

Use these commands to create a new SvelteKit project. You can create a project in the current directory or specify a new directory name.

```bash
npx sv create

# create a new project in my-app
npx sv create my-app
```

--------------------------------

### Default File Structure

Source: https://github.com/storyblok/monoblok/blob/main/packages/cli/src/commands/components/pull/README.md

Illustrates the default file structure when pulling components without the `--separate-files` option.

```bash
.storyblok/
└── components/
    └── {spaceId}/
        ├── {filename}.{suffix}.json  # Components file
        ├── groups.json              # Component groups
        ├── presets.json             # Component presets
        └── tags.json                # Component tags
```

--------------------------------

### Asset Payload for Drupal Migration

Source: https://github.com/storyblok/monoblok/blob/main/packages/cli/src/commands/assets/README.md

Example JSON structure for an asset when migrating from Drupal to Storyblok. Ensure `short_filename` matches the actual file name.

```json
{
  "id": 5432, // asset ID from Drupal
  "short_filename": "cover.jpg", // The name must match the file on disk!
  "meta_data": {
    "alt": "Cover from Drupal",
    "title": "Cover image"
  }
}
```

--------------------------------

### Initialize Storyblok with Default Components

Source: https://github.com/storyblok/monoblok/blob/main/packages/react/README.md

Initializes the Storyblok SDK with a list of components. This approach loads all components on every page, which might not be optimal for performance.

```diff
import { storyblokInit, apiPlugin } from "@storyblok/react";

/** Import your components */
-import Page from "./components/Page";
-import Teaser from "./components/Teaser";

storyblokInit({
  accessToken: "YOUR_ACCESS_TOKEN",
  use: [apiPlugin],
- components: {
-   page: Page,
-   teaser: Teaser,
- },
});
```

--------------------------------

### Asset Payload for WordPress Migration

Source: https://github.com/storyblok/monoblok/blob/main/packages/cli/src/commands/assets/README.md

Example JSON structure for an asset when migrating from WordPress to Storyblok. Ensure `short_filename` matches the actual file name.

```json
{
  "id": 9876, // asset ID from WordPress
  "short_filename": "hero.png", // The name must match the file on disk!
  "meta_data": {
    "alt": "Hero from WP",
    "title": "Hero image"
  }
}
```

--------------------------------

### Push Components from Custom Path

Source: https://github.com/storyblok/monoblok/blob/main/packages/cli/src/commands/components/push/README.md

Uploads components from a custom directory path instead of the default `.storyblok/components`. Use this if your components are stored elsewhere.

```bash
storyblok components push --space 12345 --path ./backup
```

--------------------------------

### View User Information

Source: https://github.com/storyblok/monoblok/blob/main/packages/cli/src/commands/user/README.md

Run this command to display your account details. It uses your stored authentication token.

```bash
storyblok user
```

--------------------------------

### Storyblok#get

Source: https://github.com/storyblok/monoblok/blob/main/packages/js-client/README.md

Fetches content from Storyblok using various filtering and path options. This method is versatile for retrieving specific content types or collections.

```APIDOC
## GET cdn/stories

### Description
Retrieves content entries from Storyblok. Supports filtering by various criteria, including content type, boolean values, and path.

### Method
GET

### Endpoint
`cdn/stories`

### Parameters
#### Query Parameters
- **version** (String) - Optional. Specifies the content version to retrieve (e.g., `draft`, `published`).
- **filter_query** (Object) - Optional. An object for filtering content. Supports operators like `in`.
  - Example for boolean filter: `{ is_featured: { in: true } }`
  - Example for component filter: `{ component: { in: 'news,author' } }`
- **starts_with** (String) - Optional. Filters content to include only those starting with the specified path. Example: `news/`.
- **per_page** (Number) - Optional. The number of items to return per page.
- **page** (Number) - Optional. The page number to retrieve.

### Request Example
```javascript
// Filter by boolean value in content type
client
  .get('cdn/stories', {
    version: 'draft',
    filter_query: {
      is_featured: {
        in: true,
      },
    },
  })
  .then((res) => {
    console.log(res.data.stories)
  })

// Get all news and author contents
client
  .get('cdn/stories', {
    version: 'draft',
    filter_query: {
      component: {
        in: 'news,author',
      },
    },
  })
  .then((res) => {
    console.log(res.data.stories)
  })

// Get all content from the news folder
client
  .get('cdn/stories', {
    version: 'draft',
    starts_with: 'news/',
  })
  .then((res) => {
    console.log(res.data.stories)
  })
```

### Response
#### Success Response (200)
- **data** (Object) - Contains the retrieved stories.
  - **stories** (Array) - An array of story objects.
- **total** (Number) - The total number of stories available.
- **perPage** (Number) - The number of stories returned per page.
```

--------------------------------

### Push All Datasources

Source: https://github.com/storyblok/monoblok/blob/main/packages/cli/src/commands/datasources/push/README.md

Uploads all datasources and their entries from the default path for a given space ID. Ensure the `--space` flag is set to the target space.

```bash
storyblok datasources push --space YOUR_SPACE_ID
```

--------------------------------

### Get All Storyblok Items

Source: https://github.com/storyblok/monoblok/blob/main/packages/js-client/README.md

This method fetches all items for a given slug at once. It's useful when you need to retrieve a complete dataset without worrying about pagination.

```javascript
Storyblok.getAll('cdn/stories', {
  version: 'draft',
})
  .then((stories) => {
    console.log(stories) // an array
  })
  .catch((error) => {
    console.log(error)
  })
```