========================
CODE SNIPPETS
========================
TITLE: Getting Started with Cloudflare Pages Functions
DESCRIPTION: A guide to help users get started with Cloudflare Pages Functions.

SOURCE: https://developers.cloudflare.com/llms.txt

LANGUAGE: markdown
CODE:
```
- [Get started](https://developers.cloudflare.com/pages/functions/get-started/index.md)
```

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

TITLE: Prisma ORM Quickstart with SQLite
DESCRIPTION: This guide helps you set up Prisma ORM from scratch using a SQLite database in 5 minutes. It covers basic workflows like data modeling, querying, and migrations.

SOURCE: https://www.prisma.io/docs/getting-started

LANGUAGE: TypeScript
CODE:
```
npx prisma init --datasource-provider sqlite
npx prisma migrate dev --name init
npx prisma db seed
```

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

TITLE: Clone Repository and Install Dependencies
DESCRIPTION: Instructions to clone the project repository and install its dependencies using npm. This is the initial setup step for running the provided examples.

SOURCE: https://github.com/cloudflare/js-rpc-and-entrypoints-demo#_snippet_3

LANGUAGE: bash
CODE:
```
git clone https://github.com/cloudflare/js-rpc-and-entrypoints-demo.git && cd js-rpc-and-entrypoints-demo
npm install
```

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

TITLE: Prisma ORM Setup with PlanetScale (New Database)
DESCRIPTION: This guide explains how to set up Prisma ORM from scratch with a PlanetScale database. It covers data modeling, querying, and migrations for relational databases using TypeScript.

SOURCE: https://www.prisma.io/docs/getting-started

LANGUAGE: TypeScript
CODE:
```
npx prisma init --datasource-provider mysql
npx prisma migrate dev --name init
npx prisma db seed
```

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

TITLE: Prisma ORM Setup with MySQL (New Database)
DESCRIPTION: This guide explains how to set up Prisma ORM from scratch with a MySQL database. It covers data modeling, querying, and migrations for relational databases using TypeScript.

SOURCE: https://www.prisma.io/docs/getting-started

LANGUAGE: TypeScript
CODE:
```
npx prisma init --datasource-provider mysql
npx prisma migrate dev --name init
npx prisma db seed
```

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

TITLE: Project Setup with HonoX
DESCRIPTION: This example demonstrates how to initialize a new project using HonoX, a web framework. It typically involves setting up the project structure and installing necessary dependencies.

SOURCE: https://github.com/lauragift21/staff-directory#_snippet_20

LANGUAGE: bash
CODE:
```
npm create hono@latest my-app
```

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

TITLE: Prisma Accelerate Get Started
DESCRIPTION: This guide helps you add Prisma Accelerate to your application to utilize global database caching and connection pooling for faster queries.

SOURCE: https://www.prisma.io/docs/getting-started

LANGUAGE: JavaScript
CODE:
```
npm install @prisma/accelerate

import { PrismaClient } from '@prisma/client/accelerate'
const prisma = new PrismaClient()

```

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

TITLE: Clone and Install JS RPC Demo
DESCRIPTION: Instructions to clone the 'js-rpc-and-entrypoints-demo' repository and install its dependencies using npm. This is the initial setup step for exploring the provided examples.

SOURCE: https://github.com/cloudflare/js-rpc-and-entrypoints-demo#_snippet_9

LANGUAGE: bash
CODE:
```
git clone https://github.com/cloudflare/js-rpc-and-entrypoints-demo.git && cd js-rpc-and-entrypoints-demo
npm install
```

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

TITLE: Prisma ORM Setup with PostgreSQL (New Database)
DESCRIPTION: This guide explains how to set up Prisma ORM from scratch with a PostgreSQL database. It covers data modeling, querying, and migrations for relational databases using TypeScript.

SOURCE: https://www.prisma.io/docs/getting-started

LANGUAGE: TypeScript
CODE:
```
npx prisma init --datasource-provider postgresql
npx prisma migrate dev --name init
npx prisma db seed
```

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

TITLE: Prisma ORM Setup with MongoDB (New Database)
DESCRIPTION: This guide explains how to set up Prisma ORM from scratch with a MongoDB database. It covers data modeling, querying, and migrations for MongoDB using TypeScript.

SOURCE: https://www.prisma.io/docs/getting-started

LANGUAGE: TypeScript
CODE:
```
npx prisma init --datasource-provider mongodb
npx prisma migrate dev --name init
npx prisma db seed
```

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

TITLE: Prisma ORM Setup
DESCRIPTION: This section covers setting up Prisma ORM, either from scratch or by adding it to an existing project. It's a crucial step for leveraging Prisma's capabilities in your Node.js and TypeScript applications.

SOURCE: https://www.prisma.io/docs/getting-started

LANGUAGE: JavaScript
CODE:
```
// Example for adding to an existing project
npx prisma init --datasource-provider postgresql
```

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

TITLE: Prisma ORM Setup with CockroachDB (New Database)
DESCRIPTION: This guide explains how to set up Prisma ORM from scratch with a CockroachDB database. It covers data modeling, querying, and migrations for relational databases using TypeScript.

SOURCE: https://www.prisma.io/docs/getting-started

LANGUAGE: TypeScript
CODE:
```
npx prisma init --datasource-provider cockroachdb
npx prisma migrate dev --name init
npx prisma db seed
```

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

TITLE: Prisma ORM Setup with SQL Server (New Database)
DESCRIPTION: This guide explains how to set up Prisma ORM from scratch with a SQL Server database. It covers data modeling, querying, and migrations for relational databases using TypeScript.

SOURCE: https://www.prisma.io/docs/getting-started

LANGUAGE: TypeScript
CODE:
```
npx prisma init --datasource-provider sqlserver
npx prisma migrate dev --name init
npx prisma db seed
```

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

TITLE: Install Dependencies
DESCRIPTION: Installs the necessary project dependencies using npm.

SOURCE: https://github.com/harshil1712/d1-http-example/tree/main#_snippet_20

LANGUAGE: bash
CODE:
```
npm i
```

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

TITLE: Install Project Dependencies
DESCRIPTION: Install the necessary Node.js dependencies for the D1 LLM example project using npm. This command ensures all required packages are available.

SOURCE: https://github.com/harshil1712/d1-http-example/tree/main#_snippet_5

LANGUAGE: shell
CODE:
```
$ npm i
```

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

TITLE: Install Wrangler with pnpm
DESCRIPTION: Installs the latest version of Wrangler, Cloudflare's CLI tool, as a development dependency in your project using pnpm.

SOURCE: https://developers.cloudflare.com/r2/get-started/

LANGUAGE: bash
CODE:
```
pnpm add -D wrangler@latest
```

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

TITLE: Install Wrangler with yarn
DESCRIPTION: Installs the latest version of Wrangler, Cloudflare's CLI tool, as a development dependency in your project using yarn.

SOURCE: https://developers.cloudflare.com/r2/get-started/

LANGUAGE: bash
CODE:
```
yarn add -D wrangler@latest
```

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

TITLE: Create Cloudflare Worker Project (npm)
DESCRIPTION: Creates a new Cloudflare Worker project named 'd1-tutorial' using npm. This command scaffolds a basic 'Hello World' example for a Worker-only application, configured for TypeScript and optionally Git version control.

SOURCE: https://developers.cloudflare.com/d1/get-started/

LANGUAGE: bash
CODE:
```
npm create cloudflare@latest -- d1-tutorial
```

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

TITLE: Install Wrangler with npm
DESCRIPTION: Installs the latest version of Wrangler, Cloudflare's CLI tool, as a development dependency in your project using npm.

SOURCE: https://developers.cloudflare.com/r2/get-started/

LANGUAGE: bash
CODE:
```
npm i -D wrangler@latest
```

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

TITLE: Clone and Install Dependencies
DESCRIPTION: This snippet shows the commands to clone the repository and install the necessary Node.js dependencies for the HTTP API example.

SOURCE: https://github.com/elithrar/http-api-d1-example#_snippet_8

LANGUAGE: bash
CODE:
```
git clone https://github.com/elithrar/http-api-d1-example.git
npm i
```

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

TITLE: Create Cloudflare Worker Project (pnpm)
DESCRIPTION: Creates a new Cloudflare Worker project named 'd1-tutorial' using pnpm. This command scaffolds a basic 'Hello World' example for a Worker-only application, configured for TypeScript and optionally Git version control.

SOURCE: https://developers.cloudflare.com/d1/get-started/

LANGUAGE: bash
CODE:
```
pnpm create cloudflare@latest d1-tutorial
```

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

TITLE: Start Development Server
DESCRIPTION: Starts the local development server for the D1 API. The API will be available at http://localhost:8787.

SOURCE: https://github.com/harshil1712/d1-http-example/tree/main#_snippet_24

LANGUAGE: bash
CODE:
```
npm run dev
```

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

TITLE: Create Cloudflare Worker Project (yarn)
DESCRIPTION: Creates a new Cloudflare Worker project named 'd1-tutorial' using yarn. This command scaffolds a basic 'Hello World' example for a Worker-only application, configured for TypeScript and optionally Git version control.

SOURCE: https://developers.cloudflare.com/d1/get-started/

LANGUAGE: bash
CODE:
```
yarn create cloudflare d1-tutorial
```

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

TITLE: Initialize Cloudflare Worker Project (CLI)
DESCRIPTION: Creates a new Cloudflare Worker project with a simple 'Hello World' template, including Git integration and TypeScript support. The `--deploy=false` flag prevents immediate deployment.

SOURCE: https://developers.cloudflare.com/d1/get-started/

LANGUAGE: bash
CODE:
```
CI=true npm create cloudflare@latest d1-tutorial --type=simple --git --ts --deploy=false
```

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

TITLE: Wrangler CLI for D1 Database Operations
DESCRIPTION: This snippet demonstrates common Cloudflare Wrangler CLI commands for interacting with D1 databases, including creating, populating, and querying.

SOURCE: https://developers.cloudflare.com/d1/get-started/

LANGUAGE: bash
CODE:
```
wrangler d1 create <database-name>
```

LANGUAGE: bash
CODE:
```
wrangler d1 execute <database-name> --file=<path-to-sql-file>
```

LANGUAGE: bash
CODE:
```
wrangler d1 query <database-name> "<your-sql-query>"
```

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

TITLE: Tailwind CSS Installation Guide
DESCRIPTION: Provides instructions on how to set up Tailwind CSS in your project. This is the starting point for integrating Tailwind into your development workflow.

SOURCE: https://v2.tailwindcss.com/docs

LANGUAGE: Markdown
CODE:
```
[Start learning](/docs/installation)
```

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

TITLE: Create D1 Database (CLI)
DESCRIPTION: Uses the Wrangler CLI to create a new D1 database. The command requires a name for the database, and it outputs the necessary binding configuration for the Worker.

SOURCE: https://developers.cloudflare.com/d1/get-started/

LANGUAGE: bash
CODE:
```
npx wrangler@latest d1 create prod-d1-tutorial
```

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

TITLE: Develop Worker Locally with Wrangler
DESCRIPTION: Starts a local development server for the Worker using Wrangler. This allows for testing database interactions and Worker logic locally before production deployment.

SOURCE: https://developers.cloudflare.com/d1/get-started/

LANGUAGE: bash
CODE:
```
npx wrangler dev
```

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

TITLE: Prisma Client Deployment Platform Examples
DESCRIPTION: Showcases Prisma Client integration within various deployment provider setups. These examples help understand how to configure and deploy applications using Prisma Client across different platforms.

SOURCE: https://github.com/prisma/prisma-examples/#_snippet_81

LANGUAGE: JavaScript
CODE:
```
// Examples within the 'deployment-platforms' directory illustrate various deployment configurations for Prisma Client-based applications.
```

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

TITLE: Wrangler v1 Installation and Updates
DESCRIPTION: This guide explains how to install and update Wrangler v1 for Cloudflare Workers development. It covers the necessary steps to get started or maintain the legacy tool.

SOURCE: https://developers.cloudflare.com/llms.txt



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

TITLE: Clone Repository and Install Dependencies
DESCRIPTION: This snippet shows how to clone the example repository and install the necessary npm dependencies for the project. It involves using git clone and npm install commands.

SOURCE: https://github.com/sutandojs/sutando-examples/tree/main/typescript/rest-hono-cf-d1#_snippet_3

LANGUAGE: bash
CODE:
```
git clone git@github.com:sutandojs/sutando-examples.git --depth=1
cd sutando-examples/typescript/rest-hono-cf-d1
npm install
```

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

TITLE: Execute SQL Schema with Wrangler
DESCRIPTION: Executes a local SQL schema file against the remote D1 database to create tables and import data. Requires confirmation to proceed.

SOURCE: https://developers.cloudflare.com/d1/get-started/

LANGUAGE: bash
CODE:
```
npx wrangler d1 execute prod-d1-tutorial --remote --file=./schema.sql
```

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

TITLE: Clone D1 LLM Example Project
DESCRIPTION: Clone the D1 LLM example project from GitHub to your local machine. This is the first step in setting up the project.

SOURCE: https://github.com/harshil1712/d1-http-example/tree/main#_snippet_4

LANGUAGE: shell
CODE:
```
$ git clone https://github.com/harshil1712/d1-http-example.git
```

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

TITLE: gRPC Server Example
DESCRIPTION: This entry represents an example of setting up a gRPC server. Specific implementation details are not provided in the source text.

SOURCE: https://github.com/prisma/prisma-examples/#_snippet_26

LANGUAGE: go
CODE:
```
This example demonstrates setting up a gRPC server.
```

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

TITLE: Database Integration Examples
DESCRIPTION: This section provides examples for integrating Prisma with various database systems. It showcases setup, schema definition, and basic CRUD operations tailored for different database backends.

SOURCE: https://github.com/prisma/prisma-examples/#_snippet_2

LANGUAGE: SQL
CODE:
```
CREATE TABLE User (
  id    Int  @id @default(autoincrement())
  email String @unique
  name  String?
)

CREATE TABLE Post (
  id        Int     @id @default(autoincrement())
  title     String
  content   String?
  published Boolean @default(false)
  authorId  Int

  @@index([authorId])
)

-- Example for PostgreSQL
-- datasource db {
--   provider = "postgresql"
--   url      = env("DATABASE_URL")
-- }

-- Example for MySQL
-- datasource db {
--   provider = "mysql"
--   url      = env("DATABASE_URL")
-- }
```

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

TITLE: Create a Basic Hono App
DESCRIPTION: This snippet demonstrates how to create a simple Hono application. It initializes a Hono instance and defines a GET route for the root path that returns 'Hono!'. This is a fundamental example for starting with Hono.

SOURCE: https://github.com/honojs/hono#_snippet_14

LANGUAGE: TypeScript
CODE:
```
import { Hono } from 'hono'
const app = new Hono()

app.get('/', (c) => c.text('Hono!'))

export default app
```

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

TITLE: Initialize and Run NuxtHub Project
DESCRIPTION: This snippet shows the commands to create a new NuxtHub project, navigate into its directory, and start the development server. It's the first step to getting a NuxtHub application running locally.

SOURCE: https://github.com/nuxt-hub/core#_snippet_7

LANGUAGE: shell
CODE:
```
npx nuxthub init my-app
cd my-app
npm run dev
```

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

TITLE: Fastify GraphQL Server with Mercurius and graphql-tools
DESCRIPTION: Example of a GraphQL server using Fastify, Mercurius, and graphql-tools. This setup utilizes an SDL-first approach for defining the GraphQL schema.

SOURCE: https://github.com/prisma/prisma-examples/#_snippet_18

LANGUAGE: javascript
CODE:
```
This example demonstrates setting up a GraphQL server with Fastify, Mercurius, and graphql-tools, following an SDL-first approach.
```

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

TITLE: Create Astro Project with Basics Template
DESCRIPTION: This command uses npm to create a new Astro project, initializing it with the 'basics' template. This is the standard way to start a new project with this starter kit.

SOURCE: https://github.com/harshil1712/e-com-d1#_snippet_10

LANGUAGE: bash
CODE:
```
npm create astro@latest -- --template basics
```

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

TITLE: Hono 'Hello World' Example
DESCRIPTION: A basic 'Hello World' example demonstrating how to create a Hono application and define a simple GET route that returns 'Hono!'. This snippet showcases the core structure of a Hono app.

SOURCE: https://github.com/honojs/hono#_snippet_17

LANGUAGE: javascript
CODE:
```
import { Hono } from 'hono'
const app = new Hono()

app.get('/', (c) => c.text('Hono!'))

export default app
```

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

TITLE: Start Development Server
DESCRIPTION: Starts the local development server for your Cloudflare D1 application. The API will be accessible at http://localhost:8787. This command is typically run from the project's root directory.

SOURCE: https://github.com/harshil1712/d1-http-example/tree/main#_snippet_10

LANGUAGE: shell
CODE:
```
npm run dev
```

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

TITLE: Deployment Platform Examples
DESCRIPTION: This snippet demonstrates how to deploy applications using Prisma on various cloud platforms and serverless environments. It includes configuration files and deployment scripts.

SOURCE: https://github.com/prisma/prisma-examples/#_snippet_3

LANGUAGE: Shell
CODE:
```
# Example for Vercel deployment
# vercel.json
{
  "version": 2,
  "builds": [
    {
      "src": "api/**/*.js",
      "use": "@vercel/node"
    }
  ],
  "routes": [
    {
      "src": "/(.*)",
      "dest": "api/index.js"
    }
  ]
}

# Example for Docker deployment
# Dockerfile
FROM node:18-alpine

WORKDIR /app

COPY package*.json ./ 
RUN npm install

COPY . .

RUN npx prisma generate

CMD ["npm", "start"]
```

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

TITLE: Create HonoX Application
DESCRIPTION: This command initiates a new HonoX project using the `hono-create` command. It guides the user through project setup, including naming the project directory and selecting a template, recommending the `x-basic` template for a standard setup.

SOURCE: https://context7_llms

LANGUAGE: sh
CODE:
```
npm create hono@latest
```

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

TITLE: Link and Anchor Styling
DESCRIPTION: Styles for anchor tags, including hover effects and specific styling for links within the Starlight core layer.

SOURCE: https://developers.cloudflare.com/r2/get-started/

LANGUAGE: css
CODE:
```
@layer starlight.core{a:where(.astro-eez2twj6){gap:.5rem;align-items:center;text-decoration:none;color:var(--sl-color-gray-3)}a:where(.astro-eez2twj6):hover{color:var(--sl-color-white)}}
```

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

TITLE: Cloudflare Workers: Vite Plugin Get Started
DESCRIPTION: Guides users on setting up the Vite plugin for Cloudflare Workers development. This integration streamlines the build and development process for Workers applications using Vite.

SOURCE: https://developers.cloudflare.com/llms.txt

LANGUAGE: bash
CODE:
```
# Install the Vite plugin for Cloudflare Workers
npm install --save-dev @cloudflare/vitest-plugin-workers

# Or using yarn:
yarn add --dev @cloudflare/vitest-plugin-workers
```

LANGUAGE: javascript
CODE:
```
// vite.config.js
import { defineConfig } from 'vite';
import { unstable_vite_plugin_cloudflare } from '@cloudflare/vitest-plugin-workers';

export default defineConfig({
  plugins: [
    unstable_vite_plugin_cloudflare()
  ],
  // other Vite configurations...
});
```

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

TITLE: Install Dependencies and Deploy D1 LLM Starter Sessions API
DESCRIPTION: Installs project dependencies using npm ci and deploys the application to a Cloudflare account using npm run deploy. This is a crucial step for setting up the project.

SOURCE: https://github.com/cloudflare/templates/tree/main/d1-starter-sessions-api-template#_snippet_10

LANGUAGE: bash
CODE:
```
npm ci
```

LANGUAGE: bash
CODE:
```
npm run deploy
```

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

TITLE: Start Local Development Server (npm)
DESCRIPTION: Starts the local development server using npm. Assumes a Nuxt.js project setup.

SOURCE: https://developers.cloudflare.com/workers-ai/guides/tutorials/build-a-voice-notes-app-with-auto-transcription/

LANGUAGE: bash
CODE:
```
npm run dev
```

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

TITLE: OneTrust SDK Button Styling
DESCRIPTION: Overrides for the OneTrust SDK button to ensure it inherits styles correctly and maintains consistency with the site's theme.

SOURCE: https://developers.cloudflare.com/r2/get-started/

LANGUAGE: css
CODE:
```
#ot-sdk-btn:where(.astro-hwxmvrii).ot-sdk-show-settings{border:none!important;color:inherit!important;font-size:inherit!important;line-height:inherit!important;padding:inherit!important;font-family:var(--sl-font-family)!important;background-color:inherit!important}#ot-sdk-btn:where(.astro-hwxmvrii).ot-sdk-show-settings:hover{background-color:inherit!important}
```

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

TITLE: Deploy Worker with Wrangler
DESCRIPTION: Deploys the Worker project to production using Wrangler. This makes the Worker and its associated D1 database accessible via a public URL.

SOURCE: https://developers.cloudflare.com/d1/get-started/

LANGUAGE: bash
CODE:
```
npx wrangler deploy
```

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

TITLE: Hono Basic Example
DESCRIPTION: A simple Hono application demonstrating a GET request handler for the root path. This example requires the Hono library and sets up a basic server.

SOURCE: https://hono.dev/

LANGUAGE: JavaScript
CODE:
```
import { Hono } from 'hono'

const app = new Hono()

app.get('/', (c) => c.text('Hello Hono!'))

export default app
```

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

TITLE: Feedback Prompt and Footer Styling
DESCRIPTION: Styles for the feedback prompt section, including heading colors and sizes, and adjusts footer layout for smaller screens.

SOURCE: https://developers.cloudflare.com/r2/get-started/

LANGUAGE: css
CODE:
```
footer{flex-direction:column-reverse!important;.meta{margin-top:0!important}}.feedback-prompt:where(.astro-fxeopwe4){h2{color:var(--sl-color-white);font-size:var(--sl-text-h5);font-weight:600;line-height:var(--sl-line-height-headings);margin-bottom:.5rem}}@media (min-width: 72rem){html[data-has-toc]{.feedback-prompt{display:none}}}
```

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

TITLE: Start Development Server
DESCRIPTION: This command starts the local development server, allowing you to test and run the project. It requires Node.js and npm to be set up.

SOURCE: https://github.com/lauragift21/staff-directory#_snippet_13

LANGUAGE: shell
CODE:
```
npm run dev
```

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

TITLE: Prisma ORM Add to Existing MongoDB
DESCRIPTION: This guide explains how to add Prisma ORM to an existing MongoDB database project. It covers introspecting the database schema and querying the database using TypeScript.

SOURCE: https://www.prisma.io/docs/getting-started

LANGUAGE: TypeScript
CODE:
```
npx prisma init --datasource-provider mongodb
npx prisma db push
npx prisma generate
```

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

TITLE: Prisma Accelerate Examples
DESCRIPTION: This section showcases examples of using Prisma Accelerate, a serverless data layer that enhances database performance. It includes setup and configuration for connecting to Accelerate.

SOURCE: https://github.com/prisma/prisma-examples/#_snippet_4

LANGUAGE: TypeScript
CODE:
```
import { PrismaClient } from '@prisma/client/edge'

const prisma = new PrismaClient({
  datasources: {
    db: {
      url: process.env.DATABASE_URL,
    }
  }
})

async function main() {
  // Example usage with Prisma Accelerate
  const users = await prisma.user.findMany()
  console.log(users)
}

main()
```

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

TITLE: Start Development Server
DESCRIPTION: Starts the local development server, allowing you to preview and test the application during development. Requires Node.js and npm.

SOURCE: https://github.com/lauragift21/staff-directory#_snippet_24

LANGUAGE: bash
CODE:
```
npm run dev
```

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

TITLE: Prisma ORM Add to Existing CockroachDB
DESCRIPTION: This guide explains how to add Prisma ORM to an existing CockroachDB database project. It covers introspecting the database schema and querying the database using TypeScript.

SOURCE: https://www.prisma.io/docs/getting-started

LANGUAGE: TypeScript
CODE:
```
npx prisma init --datasource-provider cockroachdb
npx prisma db push
npx prisma generate
```

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

TITLE: Prisma ORM Add to Existing PlanetScale
DESCRIPTION: This guide explains how to add Prisma ORM to an existing PlanetScale database project. It covers introspecting the database schema and querying the database using TypeScript.

SOURCE: https://www.prisma.io/docs/getting-started

LANGUAGE: TypeScript
CODE:
```
npx prisma init --datasource-provider mysql
npx prisma db push
npx prisma generate
```

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

TITLE: Start D1 API Simulation Worker
DESCRIPTION: This command sequence demonstrates how to start the built-in worker that simulates the Cloudflare API for testing purposes. It involves navigating to the worker directory, installing dependencies, and running the start script.

SOURCE: https://packagist.org/packages/renoki-co/l1

LANGUAGE: Shell
CODE:
```
cd tests/worker
npm ci
npm run start
```

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

TITLE: Prisma ORM Add to Existing MySQL
DESCRIPTION: This guide explains how to add Prisma ORM to an existing MySQL database project. It covers introspecting the database schema and querying the database using TypeScript.

SOURCE: https://www.prisma.io/docs/getting-started

LANGUAGE: TypeScript
CODE:
```
npx prisma init --datasource-provider mysql
npx prisma db push
npx prisma generate
```

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

TITLE: Cloudflare Pages Migration Guides
DESCRIPTION: Guides for migrating projects to Cloudflare Pages.

SOURCE: https://developers.cloudflare.com/llms.txt

LANGUAGE: markdown
CODE:
```
- [Migration guides](https://developers.cloudflare.com/pages/migrations/index.md)
```

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

TITLE: Downloading and Installing Packages Locally
DESCRIPTION: This guide explains how to download and install npm packages into your project's local `node_modules` directory. This is the standard way to add dependencies to your project for development and execution.

SOURCE: https://docs.npmjs.com/downloading-and-installing-node-js-and-npm

LANGUAGE: shell
CODE:
```
# Install a package and save it to dependencies
npm install express

# Install a package as a development dependency
npm install --save-dev jest

# Install all dependencies listed in package.json
npm install
```

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

TITLE: Prisma ORM Add to Existing PostgreSQL
DESCRIPTION: This guide explains how to add Prisma ORM to an existing PostgreSQL database project. It covers introspecting the database schema and querying the database using TypeScript.

SOURCE: https://www.prisma.io/docs/getting-started

LANGUAGE: TypeScript
CODE:
```
npx prisma init --datasource-provider postgresql
npx prisma db push
npx prisma generate
```

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

TITLE: Tailwind CSS Installation Guide
DESCRIPTION: This section details how to install Tailwind CSS, likely covering different environments such as Node.js projects, CDN, or other frameworks. It's a crucial first step for using Tailwind CSS.

SOURCE: https://v2.tailwindcss.com/docs

LANGUAGE: CSS
CODE:
```
/* Example CSS for Tailwind CSS installation */
@tailwind base;
@tailwind components;
@tailwind utilities;
```

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

TITLE: Markdown Content Styling
DESCRIPTION: Styles for markdown content, including table cell padding, row striping, and specific styling for the first and last cells in table rows.

SOURCE: https://developers.cloudflare.com/r2/get-started/

LANGUAGE: css
CODE:
```
table *{overflow-wrap:normal}.sl-markdown-content :is(th:first-child,td:first-child):not(:where(.not-content *)){padding-inline-start:1rem}.sl-markdown-content :is(th:last-child,td:last-child):not(:where(.not-content *)){padding-inline-end:1rem}.sl-markdown-content tr:nth-child(2n):not(:where(.not-content *)){background-color:var(--sl-color-gray-7, #1f1f1f)}
```

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

TITLE: Login to Cloudflare
DESCRIPTION: This command authenticates your Wrangler CLI with Cloudflare, enabling deployments. It opens a browser window for you to grant permissions, allowing Wrangler to securely send the API Token.

SOURCE: https://developers.cloudflare.com/r2/get-started/

LANGUAGE: bash
CODE:
```
wrangler login
```

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

TITLE: Astro Starter with Prisma Accelerate
DESCRIPTION: An Astro project showcasing Prisma Accelerate's caching and connection pooling capabilities. This example provides a guide to integrating Prisma Accelerate into an Astro project.

SOURCE: https://github.com/prisma/prisma-examples/#_snippet_45

LANGUAGE: javascript
CODE:
```
This is a placeholder for the Astro starter code. The actual code would be in the /prisma/prisma-examples/blob/latest/accelerate/astro-starter directory.
```

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

TITLE: Pagination Links Styling
DESCRIPTION: Styles for pagination links, including grid layout for responsiveness, and detailed styling for individual navigation links with hover effects and next/previous link alignment.

SOURCE: https://developers.cloudflare.com/r2/get-started/

LANGUAGE: css
CODE:
```
@layer starlight.core{.pagination-links:where(.astro-u2l5gyhi){display:grid;grid-template-columns:repeat(auto-fit,minmax(min(18rem,100%),1fr));gap:1rem}a:where(.astro-u2l5gyhi){display:flex;align-items:center;justify-content:flex-start;gap:.5rem;width:100%;flex-basis:calc(50% - .5rem);flex-grow:1;border:1px solid var(--sl-color-gray-5);border-radius:.5rem;padding:1rem;text-decoration:none;color:var(--sl-color-gray-2);box-shadow:var(--sl-shadow-md);overflow-wrap:anywhere}:where(.astro-u2l5gyhi)[rel=next]{justify-content:end;text-align:end;flex-direction:row-reverse}a:where(.astro-u2l5gyhi):hover{border-color:var(--sl-color-gray-2)}.link-title:where(.astro-u2l5gyhi){color:var(--sl-color-white);font-size:var(--sl-text-2xl);line-height:var(--sl-line-height-headings)}svg:where(.astro-u2l5gyhi){flex-shrink:0}}
```

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

TITLE: Documentation and Metadata Files
DESCRIPTION: This snippet lists essential documentation and metadata files for the project, including contribution guidelines, license information, and general project READMEs.

SOURCE: https://github.com/cloudflare/templates/tree/main/d1-starter-sessions-api-template#_snippet_14

LANGUAGE: markdown
CODE:
```
CLAUDE.md
```

LANGUAGE: markdown
CODE:
```
CODEOWNERS
```

LANGUAGE: markdown
CODE:
```
CODE_OF_CONDUCT.md
```

LANGUAGE: markdown
CODE:
```
CONTRIBUTING.md
```

LANGUAGE: markdown
CODE:
```
LICENSE
```

LANGUAGE: markdown
CODE:
```
README.md
```

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

TITLE: Create Astro Project with Basics Template
DESCRIPTION: This command initializes a new Astro project using the 'basics' starter kit. It's the recommended way to begin a new Astro website or application.

SOURCE: https://github.com/harshil1712/e-com-d1#_snippet_7

LANGUAGE: shell
CODE:
```
npm create astro@latest -- --template basics
```

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

TITLE: Remix Project Setup and Development
DESCRIPTION: This section outlines the steps to set up and run a Remix project locally. It includes installing dependencies, building the project for Vite, and starting the development server.

SOURCE: https://developers.cloudflare.com/pages/framework-guides/deploy-a-remix-site/

LANGUAGE: Shell
CODE:
```
# choose Cloudflare Pages
cd my-remix-app
npm run dev
```

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

TITLE: Cloudflare Pages Tutorials
DESCRIPTION: Tutorials to help users learn and utilize Cloudflare Pages effectively.

SOURCE: https://developers.cloudflare.com/llms.txt

LANGUAGE: markdown
CODE:
```
- [Tutorials](https://developers.cloudflare.com/pages/tutorials/index.md)
```

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

TITLE: Prisma ORM Add to Existing SQL Server
DESCRIPTION: This guide explains how to add Prisma ORM to an existing SQL Server database project. It covers introspecting the database schema and querying the database using TypeScript.

SOURCE: https://www.prisma.io/docs/getting-started

LANGUAGE: TypeScript
CODE:
```
npx prisma init --datasource-provider sqlserver
npx prisma db push
npx prisma generate
```

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

TITLE: Astro Component Slot Handling
DESCRIPTION: Demonstrates how Astro components manage content within slots. It iterates through `astro-slot` and `template[data-astro-template]` elements to collect and organize content for component hydration.

SOURCE: https://developers.cloudflare.com/r2/get-started/

LANGUAGE: html
CODE:
```
<astro-slot name="default"></astro-slot>
<template data-astro-template="default"></template>
```

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

TITLE: Starter Project with Prisma Accelerate
DESCRIPTION: A simple starter project that demonstrates the use of Prisma Accelerate for its caching and connection pooling capabilities. This example is a basic implementation.

SOURCE: https://github.com/prisma/prisma-examples/#_snippet_39

LANGUAGE: javascript
CODE:
```
/*
  This is a placeholder for the actual code from the starter example for Prisma Accelerate.
  The provided text only contains links and descriptions, not the code itself.
*/
console.log('Starter project with Prisma Accelerate');
```

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

TITLE: GraphQL Server with Apollo Server and Nexus Schema
DESCRIPTION: This example shows a GraphQL server setup using Apollo Server and Nexus Schema, offering a powerful combination for GraphQL API development.

SOURCE: https://github.com/prisma/prisma-examples/#_snippet_25

LANGUAGE: javascript
CODE:
```
This example demonstrates setting up a GraphQL server with Apollo Server and Nexus Schema.
```

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

TITLE: Initialize D1 Database with SQL Schema using Wrangler CLI
DESCRIPTION: This snippet demonstrates how to initialize a D1 database locally using the Wrangler CLI. It executes a provided SQL file to create tables and insert initial data. Ensure you have a `schema.sql` file prepared and your Wrangler configuration is set up.

SOURCE: https://developers.cloudflare.com/d1/get-started/

LANGUAGE: bash
CODE:
```
npx wrangler d1 execute prod-d1-tutorial --local --file=./schema.sql
```

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

TITLE: Starlight Core CSS Variables
DESCRIPTION: Defines CSS variables for Starlight core components, including colors for sidebar active and hover states, and styling for paragraphs within the markdown content.

SOURCE: https://developers.cloudflare.com/r2/get-started/

LANGUAGE: css
CODE:
```
:root[data-theme=dark]{--sl-color-sidebar-active: var(--color-cl1-blue-4);--sl-color-sidebar-hover: var(--color-cl1-gray-2)}:root[data-theme=light]{--sl-color-sidebar-active: var(--color-cl1-blue-4);--sl-color-sidebar-hover: var(--color-cl1-gray-9)} @layer starlight.core{p:where(.astro-opzsrvew){border:1px solid var(--sl-color-orange);padding:.75em 1em;background-color:var(--sl-color-orange-low);color:var(--sl-color-orange-high);width:max-content;max-width:100%;align-items:center;gap:.75em;font-size:var(--sl-text-body-sm);line-height:var(--sl-line-height-headings)}}
```

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

TITLE: Create Cloudflare Hello World Template
DESCRIPTION: This snippet demonstrates the creation of a basic 'hello-world' application using the create-cloudflare tool, part of the workers-sdk. It serves as a foundational example for new Cloudflare Workers projects.

SOURCE: https://github.com/cloudflare/workers-sdk/tree/4fdd8987772d914cf50725e9fa8cb91a82a6870d/packages/create-cloudflare/templates/hello-world#_snippet_0

LANGUAGE: Shell
CODE:
```
npx create-cloudflare@latest hello-world
```

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

TITLE: Supastarter SaaS Starter Kit
DESCRIPTION: A comprehensive full-stack SaaS starter kit supporting Next.js, Nuxt.js, and SvelteKit. It comes pre-configured with Prisma, authentication, email services, payment integration, testing, linting, and formatting.

SOURCE: https://github.com/prisma/prisma-examples/#_snippet_87

LANGUAGE: Shell
CODE:
```
npx create-supastarter@latest
```

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

TITLE: DocSearch CSS Variables
DESCRIPTION: Defines CSS variables for DocSearch integration, customizing primary color, text color, spacing, and various modal and search box properties to match the site's design.

SOURCE: https://developers.cloudflare.com/r2/get-started/

LANGUAGE: css
CODE:
```
:root{--docsearch-primary-color: var(--sl-color-text-accent);--docsearch-text-color: var(--sl-color-text);--docsearch-spacing: 12px;--docsearch-icon-stroke-width: 1.4;--docsearch-highlight-color: var(--docsearch-primary-color);--docsearch-muted-color: var(--sl-color-gray-3);--docsearch-container-background: var(--sl-color-backdrop-overlay);--docsearch-modal-width: 560px;--docsearch-modal-height: 600px;--docsearch-modal-background: var(--sl-color-gray-6);--docsearch-modal-shadow: var(--sl-shadow-lg);--docsearch-searchbox-height: 56px;--docsearch-searchbox-background: var(--sl-color-gray-7, var(--sl-color-gray-6));--docsearch-searchbox-focus-background: var(--sl-color-black);--docsearch-searchbox-shadow: inset 0 0 0 1px var(--docsearch-primary-color);--docsearch-hit-height: 56px;--docsearch-hit-color: var(--sl-color-white);--docsearch-hit-active-color: var(--sl-color-black);--docsearch-hit-background: var(--sl-color-black);--docsearch-key-gradient: linear-gradient( var(--sl-color-bg-inline)}
```

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

TITLE: Install Project Dependencies
DESCRIPTION: Installs all the necessary dependencies required for the project to run. This command should be executed in the root directory of the project.

SOURCE: https://github.com/harshil1712/e-com-d1#_snippet_13

LANGUAGE: bash
CODE:
```
npm install
```

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

TITLE: Styling for Aside Elements (CSS)
DESCRIPTION: Defines styles for aside elements, including notes, cautions, and general content. It specifies borders, background colors, and text colors, with variations for light and dark themes.

SOURCE: https://developers.cloudflare.com/r2/get-started/

LANGUAGE: css
CODE:
```
.starlight-aside {
  padding: 1rem;
  border-inline-start: .25rem solid var(--sl-color-asides-border);
  color: var(--sl-color-white);
}

.starlight-aside--note {
  --sl-color-asides-text-accent: var(--sl-color-blue-high);
  --sl-color-asides-border: var(--sl-color-blue);
  background-color: var(--sl-color-blue-low);
}

.starlight-aside--tip {
  --sl-color-asides-text-accent: var(--sl-color-purple-high);
  --sl-color-asides-border: var(--sl-color-purple);
  background-color: var(--sl-color-purple-low);
}

.starlight-aside--caution {
  --sl-color-asides-text-accent: var(--sl-color-orange-high);
  --sl-color-asides-border: var(--sl-color-orange);
  background-color: var(--sl-color-orange-low);
}

.starlight-aside--danger {
  --sl-color-asides-text-accent: var(--sl-color-red-high);
  --sl-color-asides-border: var(--sl-color-red);
  background-color: var(--sl-color-red-low);
}

.starlight-aside__title {
  display: flex;
  gap: .5rem;
  align-items: center;
  font-size: var(--sl-text-h5);
  font-weight: 600;
  line-height: var(--sl-line-height-headings);
  color: var(--sl-color-asides-text-accent);
}

.starlight-aside__icon {
  font-size: 1.333em;
  width: 1em;
  height: 1em;
}

.starlight-aside__title + .starlight-aside__content {
  margin-top: .5rem;
}

.starlight-aside__content a {
  color: var(--sl-color-asides-text-accent);
}
```

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

TITLE: Prisma Accelerate Starters
DESCRIPTION: Provides examples of projects integrating Prisma Accelerate for enhanced connection pooling and global caching. These starters cover various frontend frameworks and demonstrate efficient database interactions.

SOURCE: https://github.com/prisma/prisma-examples/#_snippet_79

LANGUAGE: JavaScript
CODE:
```
// Example for starter
// A basic starter project demonstrating Prisma Accelerate's caching and connection pooling.
```

LANGUAGE: JavaScript
CODE:
```
// Example for nextjs-starter
// A Next.js project showcasing Prisma Accelerate for caching and connection pooling.
```

LANGUAGE: JavaScript
CODE:
```
// Example for svelte-starter
// A SvelteKit project utilizing Prisma Accelerate's caching and connection pooling capabilities.
```

LANGUAGE: JavaScript
CODE:
```
// Example for solidstart-starter
// A Solidstart project demonstrating the use of Prisma Accelerate for caching and connection pooling.
```

LANGUAGE: JavaScript
CODE:
```
// Example for remix-starter
// A Remix project integrating Prisma Accelerate for efficient connection pooling and caching.
```

LANGUAGE: JavaScript
CODE:
```
// Example for nuxt-starter
// A Nuxt.js project utilizing Prisma Accelerate's caching and connection pooling features.
```

LANGUAGE: JavaScript
CODE:
```
// Example for astro-starter
// An Astro project demonstrating the integration of Prisma Accelerate for caching and connection pooling.
```

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

TITLE: Tippy.js Tooltip Styling
DESCRIPTION: Custom styles for Tippy.js tooltips, including fade animation for hidden states, max width adjustments for different viewports, and detailed styling for tooltip boxes and arrows based on placement.

SOURCE: https://developers.cloudflare.com/r2/get-started/

LANGUAGE: css
CODE:
```
.tippy-box[data-animation=fade][data-state=hidden]{opacity:0}[data-tippy-root]{max-width:calc(100vw - 10px)}.tippy-box{position:relative;background-color:#333;color:#fff;border-radius:4px;font-size:14px;line-height:1.4;white-space:normal;outline:0;transition-property:transform,visibility,opacity}.tippy-box[data-placement^=top]>.tippy-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-arrow:before{bottom:-7px;left:0;border-width:8px 8px 0;border-top-color:initial;transform-origin:center top}.tippy-box[data-placement^=bottom]>.tippy-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:before{top:-7px;left:0;border-width:0 8px 8px;border-bottom-color:initial;transform-origin:center bottom}.tippy-box[data-placement^=left]>.tippy-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-arrow:before{border-width:8px 0 8px 8px;border-left-color:initial;right:-7px;transform-origin:center left}.tippy-box[data-placement^=right]>.tippy-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-arrow:before{left:-7px;border-width:8px 8px 8px 0;border-right-color:initial;transform-origin:center right}.tippy-box[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}.tippy-arrow{width:16px;height:16px;color:#333}.tippy-arrow:before{content:"";position:absolute;border-color:transparent;border-style:solid}.tippy-content{position:relative;padding:5px 9px;z-index:1}
```

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

TITLE: Initialize Cloudflare Project with npm
DESCRIPTION: This command initializes a new Cloudflare project using npm, selecting a 'Hello World example' and 'SSR / full-stack app' template with TypeScript.

SOURCE: https://developers.cloudflare.com/d1/tutorials/using-read-replication-for-e-com/

LANGUAGE: bash
CODE:
```
npm create cloudflare@latest -- fast-commerce
```

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

TITLE: Add D1 Database Binding to Wrangler Configuration
DESCRIPTION: This example shows how to add the D1 database binding configuration to the Wrangler configuration file (wrangler.jsonc or wrangler.toml). This step is crucial for connecting your Worker to the created D1 database.

SOURCE: https://developers.cloudflare.com/d1/get-started/

LANGUAGE: json
CODE:
```
{
  "d1_databases": [
    {
      "binding": "DB",
      "database_name": "prod-d1-tutorial",
      "database_id": "<unique-ID-for-your-database>"
    }
  ]
}
```

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

TITLE: Project Dependencies and Scripts
DESCRIPTION: The package.json file lists project dependencies, including Vite for building and Vitest for testing, along with scripts for development and building.

SOURCE: https://github.com/cloudflare/templates/tree/main/d1-starter-sessions-api-template#_snippet_4

LANGUAGE: json
CODE:
```
{
  "name": "d1-starter-sessions-api",
  "version": "1.0.0",
  "description": "Starter template for Cloudflare Workers with D1 database and Sessions API.",
  "main": "src/index.ts",
  "scripts": {
    "dev": "wrangler dev",
    "start": "wrangler dev",
    "build": "vite build",
    "test": "vitest"
  },
  "keywords": [
    "cloudflare",
    "workers",
    "d1",
    "sessions",
    "api"
  ],
  "author": "Cloudflare",
  "license": "MIT",
  "devDependencies": {
    "@cloudflare/workers-types": "^4.20230525.0",
    "vite": "^4.3.9",
    "vitest": "^0.32.2",
    "wrangler": "^3.0.0"
  },
  "dependencies": {
    "uuid": "^9.0.0"
  }
}
```

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

TITLE: Restore Sidebar State
DESCRIPTION: This JavaScript code snippet is responsible for restoring the scroll position and open/closed state of the sidebar navigation in the documentation. It uses session storage to persist this state across page loads or visibility changes.

SOURCE: https://developers.cloudflare.com/r2/get-started/

LANGUAGE: javascript
CODE:
```
(() => {
    const scroller = document.getElementById('starlight__sidebar');
    if (!window._starlightScrollRestore || !scroller) return;
    scroller.scrollTop = window._starlightScrollRestore;
    delete window._starlightScrollRestore;
})();
```

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

TITLE: Query D1 Database from Cloudflare Worker (TypeScript)
DESCRIPTION: This TypeScript code snippet defines the environment for a Cloudflare Worker interacting with D1. It specifies the D1Database binding and provides a fetch handler that queries the database for customers based on company name, using prepared statements and parameter binding for security, and returns the results as JSON.

SOURCE: https://developers.cloudflare.com/d1/get-started/

LANGUAGE: typescript
CODE:
```
export interface Env {
  // If you set another name in the Wrangler config file for the value for 'binding',
  // replace "DB" with the variable name you defined.
  DB: D1Database;
}
export default {
  async fetch(request, env): Promise<Response> {
    const { pathname } = new URL(request.url);
    if (pathname === "/api/beverages") {
      // If you did not use `DB` as your binding name, change it here
      const { results } = await env.DB.prepare(
        "SELECT * FROM Customers WHERE CompanyName = ?"
      )
      .bind("Bs Beverages")
      .run();
      return Response.json(results);
    }
    return new Response(
      "Call /api/beverages to see everyone who works at Bs Beverages",
    );
  },
} satisfies ExportedHandler<Env>;
```