### Install @studiocms/cfetch manually with npm

Source: https://docs.studiocms.dev/en/ecosystem/packages/cfetch

Install the @studiocms/cfetch integration manually using the npm install command.

```bash
npm i @studiocms/cfetch
```

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

### Install @studiocms/s3-storage with pnpm

Source: https://docs.studiocms.dev/en/package-catalog/storage-managers/s3-storage

Install the package using pnpm.

```bash
pnpm add @studiocms/s3-storage
```

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

### Install @studiocms/devapps with npm

Source: https://docs.studiocms.dev/en/package-catalog/studiocms-plugins/studiocms-devapps

Install the package using npm.

```bash
npm i @studiocms/devapps
```

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

### Install @studiocms/cfetch with pnpm

Source: https://docs.studiocms.dev/en/ecosystem/packages/cfetch

Install the @studiocms/cfetch integration automatically using the pnpm command.

```bash
pnpm run studiocms add @studiocms/cfetch
```

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

### Install BuildKit with yarn

Source: https://docs.studiocms.dev/en/ecosystem/packages/buildkit

Install the @withstudiocms/buildkit package using yarn.

```bash
yarn add @withstudiocms/buildkit
```

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

### Install @studiocms/cfetch with npm

Source: https://docs.studiocms.dev/en/ecosystem/packages/cfetch

Install the @studiocms/cfetch integration automatically using the npm command.

```bash
npm run studiocms add @studiocms/cfetch
```

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

### Install @studiocms/s3-storage with yarn

Source: https://docs.studiocms.dev/en/package-catalog/storage-managers/s3-storage

Install the package using yarn.

```bash
yarn add @studiocms/s3-storage
```

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

### Install @studiocms/s3-storage with npm

Source: https://docs.studiocms.dev/en/package-catalog/storage-managers/s3-storage

Install the package using npm.

```bash
npm i @studiocms/s3-storage
```

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

### Configure Database Initialization Page

Source: https://docs.studiocms.dev/en/config-reference

Enables or disables the start page for database setup during first-time initialization.

```typescript
export default defineStudioCMSConfig({
  dbStartPage: true, // DEFAULT - This injects a start page to setup your DB data.
})
```

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

### Install @studiocms/markdoc with npm

Source: https://docs.studiocms.dev/en/package-catalog/studiocms-plugins/studiocms-markdoc

Install the Markdoc plugin using npm.

```bash
npm run studiocms add @studiocms/markdoc
```

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

### Install @studiocms/devapps with yarn

Source: https://docs.studiocms.dev/en/package-catalog/studiocms-plugins/studiocms-devapps

Install the package using yarn.

```bash
yarn add @studiocms/devapps
```

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

### Install StudioCMS Blog Plugin (yarn)

Source: https://docs.studiocms.dev/en/package-catalog/studiocms-plugins/studiocms-blog

Install the @studiocms/blog package using yarn.

```bash
yarn run studiocms add @studiocms/blog
```

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

### Install @studiocms/devapps with pnpm

Source: https://docs.studiocms.dev/en/package-catalog/studiocms-plugins/studiocms-devapps

Install the package using pnpm.

```bash
pnpm add @studiocms/devapps
```

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

### Install @studiocms/markdoc with yarn

Source: https://docs.studiocms.dev/en/package-catalog/studiocms-plugins/studiocms-markdoc

Install the Markdoc plugin using yarn.

```bash
yarn run studiocms add @studiocms/markdoc
```

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

### Install @studiocms/markdoc with pnpm

Source: https://docs.studiocms.dev/en/package-catalog/studiocms-plugins/studiocms-markdoc

Install the Markdoc plugin using pnpm.

```bash
pnpm run studiocms add @studiocms/markdoc
```

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

### Install @studiocms/cfetch manually with pnpm

Source: https://docs.studiocms.dev/en/ecosystem/packages/cfetch

Install the @studiocms/cfetch integration manually using the pnpm add command.

```bash
pnpm add @studiocms/cfetch
```

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

### Studiocms Init Command Usage

Source: https://docs.studiocms.dev/en/how-it-works/cli

Explains the `init` command, used to initialize a StudioCMS project after installation. It offers options like dry-run, skipping banners, and enabling debug mode, and provides an interactive setup experience.

```bash
Usage: studiocms init [options]


Initialize the StudioCMS project after new installation.


Options:
  -d, --dry-run     Dry run mode
  --skip-banners    Skip all banners
  --debug           Enable debug mode
  -h, --help        Display help for command

```

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

### CFetchText Example

Source: https://docs.studiocms.dev/en/ecosystem/packages/cfetch

Demonstrates fetching a response as text using cFetchText with GET method and caching.

```typescript
import { cFetchText } from "c:fetch"


const effect = await cFetchText(
  'https://example.com',
  { method: "GET" }
);
/*
Return type:
  CachedResponse<string>
*/
```

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

### Install BuildKit with pnpm

Source: https://docs.studiocms.dev/en/ecosystem/packages/buildkit

Install the @withstudiocms/buildkit package using pnpm.

```bash
pnpm add @withstudiocms/buildkit
```

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

### Install @studiocms/wysiwyg with npm

Source: https://docs.studiocms.dev/en/package-catalog/studiocms-plugins/studiocms-wysiwyg

Install the WYSIWYG plugin using npm.

```bash
npm run studiocms add @studiocms/wysiwyg
```

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

### Start Development Server (npm)

Source: https://docs.studiocms.dev/en/start-here/getting-started

Start the Astro development server using npm to preview your StudioCMS project locally. Access the project at localhost:4321.

```bash
npm run dev
```

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

### Install Turso Database Client Packages

Source: https://docs.studiocms.dev/en/start-here/getting-started

Install the necessary database client packages for Turso using npm, pnpm, or yarn.

```bash
npm i @libsql/client kysely-turso
```

```bash
pnpm add @libsql/client kysely-turso
```

```bash
yarn add @libsql/client kysely-turso
```

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

### Install StudioCMS Blog Plugin (npm)

Source: https://docs.studiocms.dev/en/package-catalog/studiocms-plugins/studiocms-blog

Install the @studiocms/blog package using npm.

```bash
npm run studiocms add @studiocms/blog
```

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

### Install @studiocms/cfetch with yarn

Source: https://docs.studiocms.dev/en/ecosystem/packages/cfetch

Install the @studiocms/cfetch integration automatically using the yarn command.

```bash
yarn run studiocms add @studiocms/cfetch
```

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

### Install BuildKit with npm

Source: https://docs.studiocms.dev/en/ecosystem/packages/buildkit

Install the @withstudiocms/buildkit package using npm.

```bash
npm i @withstudiocms/buildkit
```

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

### Install StudioCMS Blog Plugin (pnpm)

Source: https://docs.studiocms.dev/en/package-catalog/studiocms-plugins/studiocms-blog

Install the @studiocms/blog package using pnpm.

```bash
pnpm run studiocms add @studiocms/blog
```

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

### Get Turso CLI Installer Usage

Source: https://docs.studiocms.dev/en/how-it-works/cli

Details the usage for the `get-turso` command, which downloads and installs the Turso CLI. This is a standalone utility script.

```bash
Usage: getTurso [options]


Turso CLI Installer


Options:
  -h, --help  display help for command

```

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

### Install PostgreSQL Database Client Package

Source: https://docs.studiocms.dev/en/start-here/getting-started

Install the PostgreSQL client package using npm, pnpm, or yarn.

```bash
npm i pg
```

```bash
pnpm add pg
```

```bash
yarn add pg
```

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

### Install @studiocms/wysiwyg with yarn

Source: https://docs.studiocms.dev/en/package-catalog/studiocms-plugins/studiocms-wysiwyg

Install the WYSIWYG plugin using yarn.

```bash
yarn run studiocms add @studiocms/wysiwyg
```

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

### Install @studiocms/wysiwyg with pnpm

Source: https://docs.studiocms.dev/en/package-catalog/studiocms-plugins/studiocms-wysiwyg

Install the WYSIWYG plugin using pnpm.

```bash
pnpm run studiocms add @studiocms/wysiwyg
```

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

### CFetchBlob Example

Source: https://docs.studiocms.dev/en/ecosystem/packages/cfetch

Illustrates fetching a Blob object, such as an image, using cFetchBlob with GET method and caching.

```typescript
import { cFetchBlob } from "c:fetch"


const effect = await cFetchBlob(
  'https://example.com/image.png',
  { method: "GET" }
);
/*
Return type:
  CachedResponse<Blob>
*/
```

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

### Manually install @studiocms/markdown-remark with yarn

Source: https://docs.studiocms.dev/en/ecosystem/packages/markdown-remark

Manually install the package using yarn.

```bash
yarn add @studiocms/markdown-remark
```

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

### Create and Start a New StudioCMS Project

Source: https://docs.studiocms.dev/en

Use these commands to create a new Astro project with StudioCMS and start the development server.

```bash
# Create a new Astro project
pnpm create studiocms@latest


# Start the development server
cd my-studiocms-project
pnpm dev

```

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

### Generic CFetch Example

Source: https://docs.studiocms.dev/en/ecosystem/packages/cfetch

Demonstrates how to use the generic cFetch function to fetch and parse JSON data with GET method and caching.

```typescript
import { cFetch } from "c:fetch"


const effect = await cFetch<{ foo: string; bar: number; }>
(
  'https://api.example.com/data',
  (res) => res.json(),
  { method: "GET" }
);
/*
Return type:
  CachedResponse<{ foo: string; bar: number; }>
*/
```

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

### Setup Astro integration with custom Markdown options

Source: https://docs.studiocms.dev/en/ecosystem/packages/markdown-remark

Configure the @studiocms/markdown-remark integration in your astro.config.mjs file. This example shows how to inject CSS, define custom components, and configure Markdown options like callout themes and auto-linking headings.

```typescript
import markdownRemark from '@studiocms/markdown-remark';
import { defineConfig } from 'astro/config';


export default defineConfig({
    markdown: {
        /*
        * Your Customizations here based on:
        * https://docs.astro.build/en/reference/configuration-reference/#markdown-options
        */
    },
    integrations: [markdownRemark({
        // Used for injecting CSS for Headings and Callouts
        injectCSS: true,
        // User defined components that will be used when processing markdown
        components: {
            // Example of a custom defined component
            custom: "./src/components/Custom.astro",
        },
        // Custom Markdown config
        markdown: {
            // Configure the available callout themes
            callouts: {
                theme: 'obsidian' // Can also be 'github' or 'vitepress'
            },
            autoLinkHeadings: true,
            sanitize: {} // see https://github.com/natemoo-re/ultrahtml?tab=readme-ov-file#sanitization for full options
        }
    })],
});

```

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

### Install StudioCMS and Node Dependencies with npm

Source: https://docs.studiocms.dev/en/start-here/getting-started

Manually install the StudioCMS and `@astrojs/node` packages using npm.

```bash
npm i @astrojs/node studiocms
```

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

### Manually install @studiocms/markdown-remark with npm

Source: https://docs.studiocms.dev/en/ecosystem/packages/markdown-remark

Manually install the package using npm.

```bash
npm i @studiocms/markdown-remark
```

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

### Install MySQL2 Database Client Package

Source: https://docs.studiocms.dev/en/start-here/getting-started

Install the MySQL2 database client package using npm, pnpm, or yarn.

```bash
npm i mysql2
```

```bash
pnpm add mysql2
```

```bash
yarn add mysql2
```

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

### Manually install @studiocms/markdown-remark with pnpm

Source: https://docs.studiocms.dev/en/ecosystem/packages/markdown-remark

Manually install the package using pnpm.

```bash
pnpm add @studiocms/markdown-remark
```

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

### Example libSQL Environment Variables

Source: https://docs.studiocms.dev/en/start-here/getting-started

Example environment variables for connecting to a libSQL database. The auth token is optional.

```dotenv
CMS_LIBSQL_URL=libsql://your-database.turso.io
CMS_LIBSQL_AUTH_TOKEN=<your-auth-token> (optional)
```

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

### Install StudioCMS Template Language with yarn

Source: https://docs.studiocms.dev/en/ecosystem/packages/template-lang

Install the @withstudiocms/template-lang package using yarn.

```bash
yarn add @withstudiocms/template-lang
```

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

### Install @studiocms/cfetch manually with yarn

Source: https://docs.studiocms.dev/en/ecosystem/packages/cfetch

Install the @studiocms/cfetch integration manually using the yarn add command.

```bash
yarn add @studiocms/cfetch
```

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

### Install Blog Plugin (yarn)

Source: https://docs.studiocms.dev/en/start-here/getting-started

Install the '@studiocms/blog' plugin using yarn to quickly set up a blog frontend for your StudioCMS project.

```bash
yarn install @studiocms/blog
```

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

### Install Blog Plugin (pnpm)

Source: https://docs.studiocms.dev/en/start-here/getting-started

Install the '@studiocms/blog' plugin using pnpm to quickly set up a blog frontend for your StudioCMS project.

```bash
pnpm install @studiocms/blog
```

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

### Install StudioCMS Template Language with pnpm

Source: https://docs.studiocms.dev/en/ecosystem/packages/template-lang

Install the @withstudiocms/template-lang package using pnpm.

```bash
pnpm add @withstudiocms/template-lang
```

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

### Install StudioCMS Template Language with npm

Source: https://docs.studiocms.dev/en/ecosystem/packages/template-lang

Install the @withstudiocms/template-lang package using npm.

```bash
npm i @withstudiocms/template-lang
```

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

### Install StudioCMS and Node Dependencies with pnpm

Source: https://docs.studiocms.dev/en/start-here/getting-started

Manually install the StudioCMS and `@astrojs/node` packages using pnpm.

```bash
pnpm add @astrojs/node studiocms
```

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

### Start Development Server (yarn)

Source: https://docs.studiocms.dev/en/start-here/getting-started

Start the Astro development server using yarn to preview your StudioCMS project locally. Access the project at localhost:4321.

```bash
yarn run dev
```

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

### Start Development Server (pnpm)

Source: https://docs.studiocms.dev/en/start-here/getting-started

Start the Astro development server using pnpm to preview your StudioCMS project locally. Access the project at localhost:4321.

```bash
pnpm run dev
```

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

### Setup Render Function with Markdown Remark

Source: https://docs.studiocms.dev/en/ecosystem/packages/markdown-remark

Configure and create a markdown processor instance. This setup is done once and then used to render markdown content.

```typescript
import { createMarkdownProcessor } from '@studiocms/markdown-remark/core';
import type { MarkdownProcessorRenderOptions } from '@studiocms/markdown-remark/types';


const processor = await createMarkdownProcessor({
  /*
    * Your Options here
    * same as https://docs.astro.build/en/reference/configuration-reference/#markdown-options
    */
});


export async function render(
  content: string,
  options?: MarkdownProcessorRenderOptions
) {
  const result = await processor.render(content, options);


  return {
    html: result.astroHTML,
    meta: result.metadata,
  };
}
```

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

### Install StudioCMS and Node Dependencies with yarn

Source: https://docs.studiocms.dev/en/start-here/getting-started

Manually install the StudioCMS and `@astrojs/node` packages using yarn.

```bash
yarn add @astrojs/node studiocms
```

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

### Install @studiocms/html with npm

Source: https://docs.studiocms.dev/en/package-catalog/studiocms-plugins/studiocms-html

Install the HTML plugin using npm. This command adds the necessary package to your project.

```bash
npm run studiocms add @studiocms/html
```

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

### Install @studiocms/mdx with npm

Source: https://docs.studiocms.dev/en/package-catalog/studiocms-plugins/studiocms-mdx

Install the MDX plugin using npm. This command adds the necessary package to your project.

```bash
npm run studiocms add @studiocms/mdx
```

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

### Install @studiocms/html with yarn

Source: https://docs.studiocms.dev/en/package-catalog/studiocms-plugins/studiocms-html

Install the HTML plugin using yarn. This command adds the necessary package to your project.

```bash
yarn run studiocms add @studiocms/html
```

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

### Install @studiocms/mdx with pnpm

Source: https://docs.studiocms.dev/en/package-catalog/studiocms-plugins/studiocms-mdx

Install the MDX plugin using pnpm. This command adds the necessary package to your project.

```bash
pnpm run studiocms add @studiocms/mdx
```

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

### Install @studiocms/mdx with yarn

Source: https://docs.studiocms.dev/en/package-catalog/studiocms-plugins/studiocms-mdx

Install the MDX plugin using yarn. This command adds the necessary package to your project.

```bash
yarn run studiocms add @studiocms/mdx
```

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

### Install @studiocms/html with pnpm

Source: https://docs.studiocms.dev/en/package-catalog/studiocms-plugins/studiocms-html

Install the HTML plugin using pnpm. This command adds the necessary package to your project.

```bash
pnpm run studiocms add @studiocms/html
```

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

### Install Cloudinary Plugin with Yarn

Source: https://docs.studiocms.dev/en/package-catalog/studiocms-plugins/studiocms-cloudinary-js

Install the Cloudinary Image Service plugin for StudioCMS using Yarn.

```bash
yarn run studiocms add @studiocms/cloudinary-image-service
```

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

### Install Cloudinary Plugin with npm

Source: https://docs.studiocms.dev/en/package-catalog/studiocms-plugins/studiocms-cloudinary-js

Install the Cloudinary Image Service plugin for StudioCMS using npm.

```bash
npm run studiocms add @studiocms/cloudinary-image-service
```

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

### Install Cloudinary Plugin with pnpm

Source: https://docs.studiocms.dev/en/package-catalog/studiocms-plugins/studiocms-cloudinary-js

Install the Cloudinary Image Service plugin for StudioCMS using pnpm.

```bash
pnpm run studiocms add @studiocms/cloudinary-image-service
```

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

### Run StudioCMS Migration (npm)

Source: https://docs.studiocms.dev/en/start-here/getting-started

Run the StudioCMS migration command using npm to set up or update database tables. This is essential for first-time setup or after schema updates.

```bash
npm run studiocms migrate --latest
```

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

### Example MySQL Environment Variables

Source: https://docs.studiocms.dev/en/start-here/getting-started

Environment variables required for connecting to a MySQL database.

```dotenv
CMS_MYSQL_DATABASE=<your-database-name>
CMS_MYSQL_USER=<your-database-user>
CMS_MYSQL_PASSWORD=<your-database-password>
CMS_MYSQL_HOST=<your-database-host>
CMS_MYSQL_PORT=<your-database-port>
```

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

### DevApps Configuration Options

Source: https://docs.studiocms.dev/en/package-catalog/studiocms-plugins/studiocms-devapps

Example of available configuration options for the devApps integration.

```javascript
endpoint: '_studiocms-devapps',
verbose: false,
appsConfig: {
  wpImporter: true,
},



```

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

### Create-Studiocms CLI Full Options

Source: https://docs.studiocms.dev/en/how-it-works/cli

Displays all available options and commands for the `create-studiocms` CLI, used for scaffolding new StudioCMS projects. It includes options for color output and lists available commands.

```bash
Usage: create-studiocms [options] [command]


Options:
  -V, --version  Output the current version of the CLI Toolkit.
  -h, --help     display help for command
  --color        force color output
  --no-color     disable color output


Commands:
  get-turso      Get the latest version of Turso.
  help           Show help for command
  interactive*   Start the interactive CLI.


  * Indicates the default command that is run when calling this CLI.

```

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

### Example PostgreSQL Environment Variables

Source: https://docs.studiocms.dev/en/start-here/getting-started

Environment variables required for connecting to a PostgreSQL database.

```dotenv
CMS_PG_DATABASE=<your-database-name>
CMS_PG_USER=<your-database-user>
CMS_PG_PASSWORD=<your-database-password>
CMS_PG_HOST=<your-database-host>
CMS_PG_PORT=<your-database-port>
```

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

### Run StudioCMS Migration (yarn)

Source: https://docs.studiocms.dev/en/start-here/getting-started

Run the StudioCMS migration command using yarn to set up or update database tables. This is essential for first-time setup or after schema updates.

```bash
yarn run studiocms migrate --latest
```

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

### Configure S3 Storage Manager

Source: https://docs.studiocms.dev/en/storage-api

This example shows how to configure the S3 storage manager by importing the necessary function and calling it within the StudioCMS configuration.

```typescript
import { defineStudioCMSConfig } from "studiocms/config";
import s3Storage from '@studiocms/s3-storage';


export default defineStudioCMSConfig({
    storageManager: s3Storage(),
    // other configuration options
})

```

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

### CFetchJson Example

Source: https://docs.studiocms.dev/en/ecosystem/packages/cfetch

Shows how to use cFetchJson to fetch and automatically parse JSON data with GET method and caching.

```typescript
import { cFetchJson } from "c:fetch"


const effect = await cFetchJson<{ foo: string; bar: number; }>
(
  'https://api.example.com/data',
  { method: "GET" }
);
/*
Return type:
  CachedResponse<{ foo: string; bar: number; }>
*/
```

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

### Install @studiocms/markdown-remark with npm

Source: https://docs.studiocms.dev/en/ecosystem/packages/markdown-remark

Use this command to add the package to your Astro project using npm.

```bash
npm run astro add @studiocms/markdown-remark
```

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

### Install @studiocms/md with npm

Source: https://docs.studiocms.dev/en/package-catalog/studiocms-plugins/studiocms-md

Use this command to add the @studiocms/md plugin to your StudioCMS project using npm.

```bash
npm run studiocms add @studiocms/md
```

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

### Run StudioCMS Migration (pnpm)

Source: https://docs.studiocms.dev/en/start-here/getting-started

Run the StudioCMS migration command using pnpm to set up or update database tables. This is essential for first-time setup or after schema updates.

```bash
pnpm run studiocms migrate --latest
```

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

### Install @studiocms/markdown-remark with pnpm

Source: https://docs.studiocms.dev/en/ecosystem/packages/markdown-remark

Use this command to add the package to your Astro project using pnpm.

```bash
pnpm run astro add @studiocms/markdown-remark
```

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

### Install @studiocms/md with pnpm

Source: https://docs.studiocms.dev/en/package-catalog/studiocms-plugins/studiocms-md

Use this command to add the @studiocms/md plugin to your StudioCMS project using pnpm.

```bash
pnpm run studiocms add @studiocms/md
```

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

### Navigate to Astro Project Directory

Source: https://docs.studiocms.dev/en/start-here/getting-started

Change into your newly created Astro project directory to begin development.

```bash
cd my-project
```

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

### Install @studiocms/markdown-remark with yarn

Source: https://docs.studiocms.dev/en/ecosystem/packages/markdown-remark

Use this command to add the package to your Astro project using yarn.

```bash
yarn run astro add @studiocms/markdown-remark
```

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

### Start Docker Container

Source: https://docs.studiocms.dev/en/guides/database/sqld-server

Command to start the libSQL Server Docker container in detached mode. This command should be run from the directory containing your docker-compose.yml file.

```bash
docker compose up -d

```

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

### Configure package.json Scripts

Source: https://docs.studiocms.dev/en/start-here/getting-started

Set up your package.json scripts to include StudioCMS commands for easier development and management. This example includes commands for Astro and StudioCMS.

```json
{
    "name": "my-studiocms-project",
    "scripts": {
        "dev": "astro dev",
        "build": "astro check & astro build",
        "astro": "astro",
        "migrate": "studiocms migrate",
        "studiocms": "studiocms",
    }
}
```

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

### Variable Interpolation Example

Source: https://docs.studiocms.dev/en/ecosystem/packages/template-lang

Demonstrates basic variable interpolation using double curly braces.

```html
<h1>Hello {{user.firstName}} {{user.lastName}}!</h1>
<p>Your order #{{order.id}} total is ${{order.total}}</p>
```

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

### Example Usage of cFetchEffectBlob

Source: https://docs.studiocms.dev/en/ecosystem/packages/cfetch

Demonstrates how to use cFetchEffectBlob to fetch binary data like images with specified request options.

```typescript
import { cFetchEffectBlob } from "c:fetch"


const effect = cFetchEffectBlob(
  'https://example.com/image.png',
  { method: "GET" }
);
/*
Return type:
  Effect.Effect<CachedResponse<Blob>, FetchError, never>
*/

```

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

### Import and Use SDK in Astro

Source: https://docs.studiocms.dev/en/how-it-works/sdk

Import and utilize the StudioCMS SDK within an Astro project. This example shows how to create an Effect for fetching pages and running it.

```typescript
import { SDKCore, SDKCoreJs, runSDK } from 'studiocms:sdk';
import { Effect } from 'studiocms/effect';




// Create the Usable Effect
const pagesEffect = Effect.gen(function* () {
  const sdk = yield* SDKCore;


 // then do something with the SDK
 return yield* sdk.GET.pages()
});


// Convert the Effect into a JS/TS "program"
const pagesResult1 = await runSDK(pagesEffect);




// Just run the SDKCoreJS with the runSDK wrapper!
const pagesResult2 = await runSDK(SDKCoreJs.GET.pages());

```

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

### Interactive StudioCMS CLI Usage Help

Source: https://docs.studiocms.dev/en/how-it-works/cli

Displays help information for the interactive StudioCMS CLI command. This command guides you through project creation using available templates.

```bash
Usage: create-studiocms interactive [options]

Start the interactive CLI. Powered by [clack](https://clack.cc).


This command will open an interactive CLI prompt to guide you through
the process of creating a new StudioCMS(or StudioCMS Ecosystem package)
project using one of the available templates.


Options:
  -t, --template <template>          The template to use.
  -r, --template-ref <template-ref>  The template reference to use.
  -p, --project-name <project-name>  The name of the project.
  -i, --install                      Install dependencies.
  -g, --git                          Initialize a git repository.
  -y, --yes                          Skip all prompts and use default values.
  -n, --no                           Skip all prompts and use default values.
  -q, --skip-banners                 Skip all banners and messages.
  -d, --dry-run                      Do not perform any actions.
  -h, --help                         display help for command
  --do-not-install                   Do not install dependencies.
  --do-not-init-git                  Do not initializing a git repository.

```

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

### Install @studiocms/md with yarn

Source: https://docs.studiocms.dev/en/package-catalog/studiocms-plugins/studiocms-md

Use this command to add the @studiocms/md plugin to your StudioCMS project using yarn.

```bash
yarn run studiocms add @studiocms/md
```

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

### Running Studiocms CLI Commands

Source: https://docs.studiocms.dev/en/how-it-works/cli

Examples of how to execute `studiocms` commands using different package managers. These commands are typically run from the root of your StudioCMS project.

```bash
npx studiocms [command]
```

```bash
pnpm studiocms [command]
```

```bash
yarn studiocms [command]
```

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

### Configure Blog Plugin in studiocms.config.mjs

Source: https://docs.studiocms.dev/en/start-here/getting-started

Add the blog plugin to your studiocms.config.mjs file after installation. This enables the simple blog frontend provided by the plugin.

```javascript
import { defineStudioCMSConfig } from 'studiocms/config';
import blog from '@studiocms/blog';


export default defineStudioCMSConfig({
    dbStartPage: false,
    plugins: [
        blog(),
    ],
});
```

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

### Example Usage of cFetchEffect

Source: https://docs.studiocms.dev/en/ecosystem/packages/cfetch

Demonstrates how to use cFetchEffect to fetch and parse JSON data with custom cache configurations.

```typescript
import { cFetchEffect, Duration } from "c:fetch"


const effect = cFetchEffect<{ foo: string; bar: number; }>
(
  'https://api.example.com/data',
  (res) => res.json(),
  { method: "GET" },
  {
    ttl: Duration.hours(1),
    tags: ['example'],
    key: "api-data-fetch",
    verbose: false
  }
);
/*
Return type:
  Effect.Effect<CachedResponse<{ foo: string; bar: number; }>, FetchError, never>
*/

```

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

### Configure Storage Manager with S3

Source: https://docs.studiocms.dev/en/config-reference

Integrates the S3 storage manager plugin for StudioCMS. Ensure the '@studiocms/s3-storage' package is installed.

```typescript
import s3Storage from '@studiocms/s3-storage';
export default defineStudioCMSConfig({
  storageManager: s3Storage(),
})
```

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

### Example Plugin Route - Frontmatter

Source: https://docs.studiocms.dev/en/plugins/extended

Defines the frontmatter for a dynamic Astro route in a StudioCMS plugin. It imports necessary SDK components and configuration, and sets up a helper function to generate routes.

```astro
import { StudioCMSRenderer } from 'studiocms:renderer';
import { SDKCoreJs, runSDK } from 'studiocms:sdk';
import config from 'myplugin:config';


const makeRoute = (slug: string) => {
    return `/${config.route}/${slug}`;
}


// 'my-plugin' here is used as the identifier for
// the pageType from the plugin definition
const pages = await runSDK(SDKCoreJs.GET.packagePages('my-plugin'));


const { slug } = Astro.params;


const page = pages.find((page) => page.slug === slug || '');

```

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

### Add StudioCMS Integration using pnpm astro add

Source: https://docs.studiocms.dev/en/start-here/getting-started

Install the StudioCMS integration and its dependencies using the `astro add` command with pnpm.

```bash
pnpm astro add node studiocms
```

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

### Example Dashboard Grid Item - Frontmatter and Logic

Source: https://docs.studiocms.dev/en/plugins/extended

Defines the frontmatter and logic for a StudioCMS dashboard grid item. It fetches recently updated pages from a plugin and sorts them by update date.

```astro
---
import { SDKCoreJs, runSDK } from 'studiocms:sdk';


// 'my-plugin' here is used as the identifier for
// the pageType from the plugin definition
const pages = await runSDK(SDKCoreJs.GET.packagePages('my-plugin'));


// Get the 5 most recently updated pages from the last 30 days
const recentlyUpdatedPages = pages
    .filter((page) => {
        const now = new Date();
        const thirtyDaysAgo = new Date(now.setDate(now.getDate() - 30));
        return new Date(page.updatedAt) > thirtyDaysAgo;
    })
    .sort((a, b) => new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime())
    .slice(0, 5);
---

```

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

### Studiocms CLI Full Options

Source: https://docs.studiocms.dev/en/how-it-works/cli

Displays all available options and commands for the main `studiocms` CLI. Use this to understand the general structure and available top-level commands.

```bash
Usage: studiocms [options] [command]


Options:
  -V, --version  Output the current version of the CLI Toolkit.
  -h, --help     display help for command


COMMANDS
  - add               Add StudioCMS plugin(s) to your project
  - crypto            Crypto Utilities for StudioCMS Security
  - get-turso         Install the Turso CLI
  - init              Initialize the StudioCMS project after new installation.
  - users             Utilities for Tweaking Users in StudioCMS
  - migrate           Manage database migrations for StudioCMS.

```

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

### Create a Turso Database

Source: https://docs.studiocms.dev/en/start-here/getting-started

Use this command to create a new database instance with Turso.

```bash
turso db create studiocms
```

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

### Enable Demo Mode with Credentials

Source: https://docs.studiocms.dev/en/config-reference/features

Enable demo mode for the site by providing a username and password. This allows users to log in with these credentials during demo mode.

```javascript
export default defineStudioCMSConfig({
  features: {
    developerConfig: {
      demoMode: {
        username: 'foo',
        password: 'bar'
      }
    }
  }
})
```

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

### Install 'effect' peer dependency with yarn

Source: https://docs.studiocms.dev/en/ecosystem/packages/cfetch

Ensure the 'effect' peer dependency is installed using yarn if your package manager does not handle it automatically.

```bash
yarn add effect
```

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

### Install 'effect' peer dependency with pnpm

Source: https://docs.studiocms.dev/en/ecosystem/packages/cfetch

Ensure the 'effect' peer dependency is installed using pnpm if your package manager does not handle it automatically.

```bash
pnpm add effect
```

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

### Setup LibSQL Kysely Client

Source: https://docs.studiocms.dev/en/ecosystem/packages/kysely

Sets up a type-safe Kysely database client for libSQL using Effect-ts and retrieves the database URL from configuration. This snippet demonstrates how to initialize the Kysely client with a specific driver and configuration provider.

```typescript
import { getDBClientLive } from '@withstudiocms/kysely';
import type { StudioCMSDatabaseSchema } from '@withstudiocms/sdk/tables';
import { libsqlDriver } from '@withstudiocms/kysely/drivers/libsql';
import { ConfigProvider, Effect } from 'studiocms/effect';


export const getDbClient = Effect.gen(function* () {
  // Setup the LibSQL driver with a database URL from config
  const dialect = yield* libsqlDriver.pipe(
    Effect.withConfigProvider(
      ConfigProvider.fromJson({
        CMS_LIBSQL_URL: 'file:./test.db',
      })
    )
  );

  // Return the Kysely DB client with Effect helpers
  return yield* getDBClientLive<StudioCMSDatabaseSchema>(dialect);
});
```

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

### Install 'effect' peer dependency with npm

Source: https://docs.studiocms.dev/en/ecosystem/packages/cfetch

Ensure the 'effect' peer dependency is installed using npm if your package manager does not handle it automatically.

```bash
npm i effect
```

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

### Create a New Astro Project with npm

Source: https://docs.studiocms.dev/en/start-here/getting-started

Use this command to create a new Astro project using npm.

```bash
npm create astro@latest
```

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

### Upgrade StudioCMS Installation with yarn

Source: https://docs.studiocms.dev/en/how-it-works/cli

Use this command to upgrade your StudioCMS installation and dependencies using yarn. It upgrades official Astro Projects and integrations simultaneously.

```bash
yarn @studiocms/upgrade
```

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

### Upgrade StudioCMS Installation with pnpm

Source: https://docs.studiocms.dev/en/how-it-works/cli

Use this command to upgrade your StudioCMS installation and dependencies using pnpm. It upgrades official Astro Projects and integrations simultaneously.

```bash
pnpm @studiocms/upgrade
```

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

### Example Plugin Route - HTML Template

Source: https://docs.studiocms.dev/en/plugins/extended

Provides the HTML template for a dynamic Astro route. It conditionally renders either a single page's content using StudioCMSRenderer or a list of available pages.

```astro
{slug && page ? (
        <div>
            <h1>{page.title}</h1>
            <StudioCMSRenderer content={page.defaultContent?.content || ''} />
        </div>
    ) : (
        <div>
            <h1>My Plugin</h1>
            <ul>
                {pages.length > 0 && pages.map((page) => (
                    <li>
                        <a href={makeRoute(page.slug)}>{page.title}</a>
                    </li>
                ))}
            </ul>
        </div>
    )
}

```

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

### Nested Properties Example

Source: https://docs.studiocms.dev/en/ecosystem/packages/template-lang

Shows how to access nested properties within the template language.

```html
<p>Shipping to: {{user.address.street}}, {{user.address.city}}</p>
```

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

### Create StudioCMS Project with npm

Source: https://docs.studiocms.dev/en/how-it-works/cli

Use this command to create a new StudioCMS project using npm. It runs in interactive mode by default.

```bash
npm create studiocms@latest
```

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

### Upgrade using pnpx

Source: https://docs.studiocms.dev/en/guides/upgrade/latest

Run this command to update StudioCMS using pnpx.

```bash
pnpx @studiocms/upgrade
```

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

### Create StudioCMS Project with npm and specific template/project name

Source: https://docs.studiocms.dev/en/how-it-works/cli

Create a new StudioCMS project using npm, specifying the template and project name directly via command-line arguments.

```bash
npm create studiocms@latest -- --template studiocms/basics --project-name my-studiocms-project
```

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

### Default StudioCMS Configuration

Source: https://docs.studiocms.dev/en/config-reference/features

Sets up the default StudioCMS configuration with features enabled.

```javascript
export default defineStudioCMSConfig({
  features: {},
});
```

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

### Example Usage of cFetchEffectJson

Source: https://docs.studiocms.dev/en/ecosystem/packages/cfetch

Demonstrates how to use cFetchEffectJson to fetch JSON data with specified request options.

```typescript
import { cFetchEffectJson } from "c:fetch"


const effect = cFetchEffectJson<{ foo: string; bar: number; }>
(
  'https://api.example.com/data',
  { method: "GET" }
);
/*
Return type:
  Effect.Effect<CachedResponse<{ foo: string; bar: number; }>, FetchError, never>
*/

```

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

### Upgrade using npx

Source: https://docs.studiocms.dev/en/guides/upgrade/latest

Run this command to update StudioCMS using npx.

```bash
npx @studiocms/upgrade
```

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

### Load StudioCMS Plugins

Source: https://docs.studiocms.dev/en/config-reference

Specifies which plugins should be loaded by StudioCMS. Example shows loading the blog plugin.

```typescript
import blog from '@studiocms/blog';
export default defineStudioCMSConfig({
  plugins: [
    blog(),
  ],
})
```

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

### Example Usage of cFetchEffectText

Source: https://docs.studiocms.dev/en/ecosystem/packages/cfetch

Demonstrates how to use cFetchEffectText to fetch plain text data with specified request options.

```typescript
import { cFetchEffectText } from "c:fetch"


const effect = cFetchEffectText(
  'https://example.com',
  { method: "GET" }
);
/*
Return type:
  Effect.Effect<CachedResponse<string>, FetchError, never>
*/

```

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

### Create a New Astro Project with pnpm

Source: https://docs.studiocms.dev/en/start-here/getting-started

Use this command to create a new Astro project using pnpm.

```bash
pnpm create astro@latest
```

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

### Add StudioCMS Integration using astro add

Source: https://docs.studiocms.dev/en/start-here/getting-started

Install the StudioCMS integration and its dependencies using the `astro add` command with npm.

```bash
npx astro add node studiocms
```

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

### Set Preferred Image Service

Source: https://docs.studiocms.dev/en/config-reference/features

Configure the identifier for the preferred image service. Ensure an image service like 'cloudinary-js' is installed.

```javascript
export default defineStudioCMSConfig({
  features: {
    preferredImageService: 'cloudinary-js'
  }
})
```

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

### Insert New User with Codec

Source: https://docs.studiocms.dev/en/ecosystem/packages/kysely

Demonstrates inserting a new user into the database using Kysely's `withCodec` functionality. This ensures data is encoded before insertion and decoded upon retrieval.

```typescript
import { Schema } from 'studiocms/effect';
import { StudioCMSUsersTable } from '@withstudiocms/sdk/tables';


export const insertUser = Effect.gen(function* () {
    const { withCodec } = yield* getDbClient;


  const insertNewUser = withCodec({
    encoder: StudioCMSUsersTable.Insert,
    decoder: StudioCMSUsersTable.Select,
    callbackFn: (db, newUser) =>
      db((client) =>
        client
          .insertInto('StudioCMSUsersTable')
          .values(newUser)
          .returningAll()
          .executeTakeFirstOrThrow()
      ),
  });


  const data = {
    username: 'codec_user',
    email: 'codec_user@example.com',
    password: null,
    avatar: null,
    emailVerified: false,
    name: 'user',
    notifications: '',
    url: null,
    id: crypto.randomUUID(),
    updatedAt: new Date().toISOString(),
    createdAt: new Date().toISOString(),
  };


  const insertedUser = yield* insertNewUser(data);

const insertedUser: {
    readonly id: string;
    readonly url?: string | null | undefined;
    readonly name: string;
    readonly email?: string | null | undefined;
    readonly avatar?: string | null | undefined;
    readonly username: string;
    readonly password?: string | null | undefined;
    readonly updatedAt: Date;
    readonly createdAt: Date;
    readonly emailVerified: boolean;
    readonly notifications?: string | null | undefined;
}


console.log('Inserted user with codec:', insertedUser);
});
```