### Snapshot Release Installation Examples (Bash)

Source: https://github.com/pgflow-dev/pgflow/blob/main/SNAPSHOT_RELEASES.md

Provides example installation commands for npm and Deno/Supabase Edge Functions after a snapshot release has been published. These commands include the specific snapshot version format, ensuring the correct temporary version is installed.

```bash
# npm packages:
npm install @pgflow/core@0.0.0-my-feature-20240101120000-abc1234
npm install pgflow@0.0.0-my-feature-20240101120000-abc1234
npm install @pgflow/client@0.0.0-my-feature-20240101120000-abc1234
npm install @pgflow/dsl@0.0.0-my-feature-20240101120000-abc1234

# For Deno/Supabase Edge Functions:
import { EdgeWorker } from "jsr:@pgflow/edge-worker@0.0.0-my-feature-20240101120000-abc1234"
```

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

### pgflow Install Command (Bash)

Source: https://github.com/pgflow-dev/pgflow/blob/main/pkgs/website/src/content/docs/news/pgflow-0-9-0-control-plane-and-http-based-compilation.mdx

Demonstrates the command to run the new pgflow installer. This command scaffolds a complete working setup, including directories for flow definitions, Control Plane, and example workers.

```bash
npx pgflow@0.9.0 install
```

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

### Start SvelteKit Development Server

Source: https://github.com/pgflow-dev/pgflow/blob/main/apps/demo/PLAUSIBLE_SETUP.md

This bash command initiates the development server for the SvelteKit 'demo' application using pnpm. It's used for local testing and verification of the Plausible Analytics integration.

```bash
pnpm nx dev demo

```

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

### Example Custom Event Tracking in SvelteKit

Source: https://github.com/pgflow-dev/pgflow/blob/main/apps/demo/PLAUSIBLE_SETUP.md

Provides common examples of tracking custom events in SvelteKit for user actions like signups, feature usage, form submissions, and downloads. These examples help in instrumenting specific user interactions for detailed analytics.

```typescript
// User signup
track('signup', { method: 'email' });

// Feature usage
track('flow_created', { flow_type: 'data_pipeline' });

// Form submission
track('contact_form', { page: 'pricing' });

// Download tracking (already automatic with fileDownloads: true)
// But you can track custom downloads:
track('documentation_download', { doc_type: 'api_reference' });

```

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

### Database Setup and Function Deployment (Bash)

Source: https://github.com/pgflow-dev/pgflow/blob/main/apps/demo/DEPLOYMENT.md

This snippet demonstrates how to link to a Supabase project, reset its database with migrations and seed data, and deploy Edge Functions. It requires navigating to the 'apps/demo' directory and having the Supabase CLI installed and configured.

```bash
cd apps/demo

# Link to project
supabase link --project-ref <PROJECT_REF>

# Reset database (applies migrations + seed data)
supabase db reset --linked

# Deploy Edge Functions
supabase functions deploy --project-ref <PROJECT_REF>
```

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

### Start pgflow Flow and Query Status (SQL)

Source: https://github.com/pgflow-dev/pgflow/blob/main/pkgs/website/src/content/docs/get-started/flows/quickstart.mdx

Demonstrates how to initiate a pgflow run and check its status using SQL commands. The first command starts the 'greetUser' flow with specific input, and the second queries the 'pgflow.runs' table to retrieve the latest run details and confirm completion.

```sql
SELECT * FROM pgflow.start_flow(
  flow_slug => 'greetUser',
  input => '{"firstName": "Alice", "lastName": "Smith"}'::jsonb
);
```

```sql
SELECT * FROM pgflow.runs
WHERE flow_slug = 'greetUser'
ORDER BY started_at DESC
LIMIT 1;
```

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

### Install pgflow and Set Up Supabase

Source: https://github.com/pgflow-dev/pgflow/blob/main/README.md

This snippet demonstrates the initial setup for pgflow within a Supabase project. It involves installing the pgflow CLI, stopping and restarting the Supabase services, and applying database migrations to integrate pgflow.

```bash
npx pgflow@latest install

npx supabase stop && npx supabase start
npx supabase migrations up
```

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

### Example pgflow Flow Output (JSON)

Source: https://github.com/pgflow-dev/pgflow/blob/main/pkgs/website/src/content/docs/get-started/flows/quickstart.mdx

Shows the expected output from a completed 'greetUser' pgflow run. This JSON object contains the 'greeting' field, indicating the successful execution of the flow with the provided input.

```json
{"greeting": "Hello, Alice Smith!"}
```

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

### Create Example Greet User Worker Edge Function

Source: https://github.com/pgflow-dev/pgflow/blob/main/pkgs/website/src/content/docs/reference/manual-installation.mdx

Initializes an example worker edge function that executes tasks defined in your flows. This involves creating a directory and an index.ts file that uses EdgeWorker.start() to initiate the 'GreetUser' flow.

```bash
mkdir -p supabase/functions/greet-user-worker
```

```typescript
import { EdgeWorker } from '@pgflow/edge-worker';
import { GreetUser } from '../../flows/greet-user.ts';

EdgeWorker.start(GreetUser);
```

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

### Astro Project Creation Command

Source: https://github.com/pgflow-dev/pgflow/blob/main/pkgs/website/ASTRO_README.md

Command to create a new Astro project using the Starlight template. This command initiates the project setup process, guiding the user through template selection.

```bash
npm create astro@latest -- --template starlight
```

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

### Essential npm Commands for Astro Projects

Source: https://github.com/pgflow-dev/pgflow/blob/main/pkgs/website/ASTRO_README.md

Lists common npm commands for managing an Astro project. These include installing dependencies, running a local development server, building for production, and previewing the build.

```bash
npm install
npm run dev
npm run build
npm run preview
npm run astro ...
npm run astro -- --help
```

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

### Verify pgflow Installation with SQL Queries

Source: https://github.com/pgflow-dev/pgflow/blob/main/pkgs/website/src/content/docs/reference/manual-installation.mdx

Checks if the pgflow installation was successful by querying the created database schemas. It verifies the existence of entries in the 'pgflow.workers' and 'pgflow.flows' tables. Successful execution without errors indicates a proper setup.

```sql
-- Verify worker schema
SELECT * FROM pgflow.workers LIMIT 1;

-- Verify pgflow schema
SELECT * FROM pgflow.flows LIMIT 1;
```

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

### YAML for Sidebar Ordering

Source: https://github.com/pgflow-dev/pgflow/blob/main/DOCS_GUIDE.md

Provides an example of YAML configuration for controlling the order of items in the documentation sidebar, allowing for hierarchical organization.

```yaml
sidebar:
  order: 25  # Overview: none, Main: 10-50, Advanced: 50-100
```

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

### Production Manual Deployment (Bash)

Source: https://github.com/pgflow-dev/pgflow/blob/main/apps/demo/DEPLOYMENT.md

This command initiates a manual deployment of the demo application to the production environment. It requires the 'nx' command to be available, typically installed via pnpm.

```bash
pnpm nx deploy demo
```

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

### Start Svelte development server

Source: https://github.com/pgflow-dev/pgflow/blob/main/apps/demo/README.md

This snippet shows how to start the development server for a Svelte project. After installing dependencies, run `npm run dev`. The `-- --open` flag will automatically open the application in a new browser tab.

```shell
npm run dev

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

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

### Install @pgflow/client NPM Package

Source: https://github.com/pgflow-dev/pgflow/blob/main/pkgs/client/BUILD_AND_RELEASE.md

Installs the @pgflow/client package using npm. This is the standard way to add the package to your project for use in Node.js or bundled browser applications.

```bash
npm install @pgflow/client
```

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

### Install pgflow in Supabase Project

Source: https://github.com/pgflow-dev/pgflow/blob/main/pkgs/cli/README.md

Sets up the pgflow engine within your Supabase project. This command configures connection pooling, copies migrations, sets up environment variables, and guides through migration application. Options include specifying the Supabase path and skipping interactive prompts.

```bash
npx pgflow@latest install
npx pgflow@latest install --supabase-path <path>
npx pgflow@latest install -y
```

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

### Cloudflare Deployment Commands (Bash)

Source: https://github.com/pgflow-dev/pgflow/blob/main/apps/demo/DEPLOYMENT.md

This snippet covers the initial authentication with Cloudflare using the 'wrangler login' command and subsequent deployments of the demo application to production and preview environments using 'nx deploy'. It assumes pnpm is installed and the nx CLI is configured.

```bash
# Authenticate with Cloudflare
pnpm wrangler login

# Deploy production (from repo root)
pnpm nx deploy demo

# Deploy preview
pnpm nx deploy:preview demo
```

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

### D2 Quick Start: Basic Diagram Structure

Source: https://github.com/pgflow-dev/pgflow/blob/main/pkgs/website/src/content/docs/d2-guide.mdx

This snippet demonstrates the fundamental structure of a D2 diagram, including importing a theme, defining nodes, and creating edges. It's essential for any new D2 diagram and sets up the basic visual elements.

```d2
@../../assets/pgflow-theme.d2

node1: "Label"
node2: "Label"
node1 -> node2
```

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

### CLI: Install pgflow

Source: https://context7.com/pgflow-dev/pgflow/llms.txt

Installs the pgflow CLI tool and configures a Supabase project for pgflow integration. Supports interactive and non-interactive installations, and custom Supabase directory paths.

```bash
# Install pgflow with interactive prompts
npx pgflow@latest install

# Non-interactive installation
npx pgflow@latest install --yes

# Custom Supabase directory
npx pgflow@latest install --supabase-path ./my-supabase

# The installer will:
# 1. Update config.toml to enable connection pooling
# 2. Copy SQL migrations to supabase/migrations/
# 3. Configure Edge Function environment variables
# 4. Guide you through applying migrations with 'supabase db reset'
```

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

### Configure SvelteKit Layout for Plausible Analytics

Source: https://github.com/pgflow-dev/pgflow/blob/main/apps/demo/PLAUSIBLE_SETUP.md

This TypeScript code snippet demonstrates how to initialize Plausible Analytics within a SvelteKit application's layout file. It uses the `onMount` lifecycle function to ensure the analytics script is loaded after the component mounts, configuring the domain, API host (pointing to your worker proxy), and localhost tracking.

```typescript
import { onMount } from 'svelte';
import { initPlausible } from '$lib/analytics'; // Assuming initPlausible is exported from here

onMount(() => {
	initPlausible({
		domain: 'demo.pgflow.dev', // Your actual domain
		apiHost: 'https://your-worker.workers.dev/metrics', // Your proxy URL
		trackLocalhost: false // Set to true for testing locally
	});
});

```

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

### Install pgflow CLI via npx

Source: https://github.com/pgflow-dev/pgflow/blob/main/pkgs/cli/README.md

Installs and runs pgflow commands directly using npx, ideal for quick execution without global installation. Ensure you have Node.js and npm installed.

```bash
npx pgflow@latest <command>
```

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

### Install pgflow CLI Globally

Source: https://github.com/pgflow-dev/pgflow/blob/main/pkgs/cli/README.md

Installs the pgflow CLI globally on your system using npm, allowing direct execution of pgflow commands. Requires Node.js and npm.

```bash
npm install -g pgflow
pgflow <command>
```

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

### Quick Start: Initialize and Run Workflow

Source: https://github.com/pgflow-dev/pgflow/blob/main/pkgs/client/README.md

Demonstrates how to initialize the Supabase and Pgflow clients, start a workflow with input parameters, and wait for its completion. It shows basic usage for initiating and monitoring a workflow run.

```typescript
import {
  createClient,
} from '@supabase/supabase-js';
import {
  PgflowClient,
  FlowRunStatus,
} from '@pgflow/client';

// Initialize clients
const supabase = createClient('https://your-project.supabase.co', 'your-anon-key');
const pgflow = new PgflowClient(supabase);

// Start a workflow
const run = await pgflow.startFlow('analyze_website', {
  url: 'https://example.com',
});

console.log(`Started workflow: ${run.run_id}`);

// Wait for completion
const completed = await run.waitForStatus(FlowRunStatus.Completed, {
  timeoutMs: 30000,
});

console.log('Workflow completed:', completed.output);
```

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

### Setup: Initialize and Finalize Prompt Sessions

Source: https://github.com/pgflow-dev/pgflow/blob/main/pkgs/cli/CLACK_API.md

Demonstrates how to use `intro` and `outro` functions to display messages at the beginning and end of a prompt session. These functions are part of the core setup for interactive prompts.

```javascript
import { intro, outro } from '@clack/prompts';

intro(`create-my-app`);
// Do stuff
outro(`You're all set!`);
```

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

### D2 Example: Step Lifecycle with Retries

Source: https://github.com/pgflow-dev/pgflow/blob/main/pkgs/website/src/content/docs/d2-guide.mdx

Illustrates a D2 diagram for a step lifecycle, including states like 'created', 'started', 'retrying', 'completed', and 'failed'. It shows how to represent conditional transitions based on task outcomes and retry logic.

```d2
@../../assets/pgflow-theme.d2

direction: right

created: "created"
created.class: step_created

started: "started"
started.class: step_started

retrying: "retrying"
retrying.class: warning

completed: "completed"
completed.class: step_completed

failed: "failed"
failed.class: step_failed

created -> started
started -> retrying: "task fails,\nattempts < max"
retrying -> started: "retry task"
started -> completed: "all tasks\nsucceed"
started -> failed: "max attempts\nreached"
```

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

### Preview Manual Deployment Options (Bash)

Source: https://github.com/pgflow-dev/pgflow/blob/main/apps/demo/DEPLOYMENT.md

This snippet outlines various ways to deploy a preview version of the demo application. It includes options for deploying with a custom name directly via a script, using environment variables with 'nx', specifying a Pull Request number for CI environments, and a default local preview deployment.

```bash
# With custom name (using script directly)
cd apps/demo
./scripts/deploy-preview.sh my-feature

# With custom name (using nx)
PREVIEW_NAME=my-feature pnpm nx deploy:preview demo

# With PR number (CI)
PR_NUMBER=123 pnpm nx deploy:preview demo

# Default local preview
pnpm nx deploy:preview demo
```

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

### Basic Usage: Flow Step Processor in TypeScript

Source: https://github.com/pgflow-dev/pgflow/blob/main/pkgs/edge-worker/README.md

This example shows how to use EdgeWorker to process Flow steps. It defines a 'AnalyzeWebsite' flow with two steps: 'fetch' to get website content and 'save' to store it in the database using the Supabase client. The worker is started with this Flow definition.

```typescript
import { EdgeWorker } from 'jsr:@pgflow/edge-worker';
import { Flow } from 'jsr:@pgflow/dsl/supabase';

// Define a flow using Supabase preset for Supabase resources
const AnalyzeWebsite = new Flow<{ url: string }>({
  slug: 'analyzeWebsite',
})
  .step({ slug: 'fetch' }, async (input, context) => {
    // Access Supabase resources through context
    const response = await fetch(input.run.url, {
      signal: context.shutdownSignal,
    });
    return { html: await response.text() };
  })
  .step({ slug: 'save' }, async (input, context) => {
    // Use Supabase client from context
    const { data } = await context.supabase
      .from('websites')
      .insert({ url: input.run.url, html: input.fetch.html })
      .select()
      .single();
    return data;
  });

// Start the worker
EdgeWorker.start(AnalyzeWebsite);
```

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

### Project Structure Overview

Source: https://github.com/pgflow-dev/pgflow/blob/main/pkgs/website/ASTRO_README.md

Illustrates the directory and file structure of an Astro + Starlight project. Key directories include `public/` for static assets and `src/content/docs/` for documentation files.

```tree
. 
├── public/
├── src/
│   ├── assets/
│   ├── content/
│   │   ├── docs/
│   │   └── config.ts
│   └── env.d.ts
├── astro.config.mjs
├── package.json
└── tsconfig.json
```

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

### Track Custom Events in SvelteKit using Plausible

Source: https://github.com/pgflow-dev/pgflow/blob/main/apps/demo/PLAUSIBLE_SETUP.md

This TypeScript code illustrates how to track custom events in a SvelteKit application using the Plausible analytics library. It shows examples of tracking simple events, events with properties, and events that include revenue information, facilitating detailed user behavior analysis.

```typescript
import { track } from '$lib/analytics';

// Simple event
track('button_clicked');

// Event with properties
track('signup', {
	tier: 'pro',
	plan: 'monthly',
	source: 'landing_page'
});

// Event with revenue tracking
track(
	'purchase',
	{
		product: 'pro-plan',
		quantity: 1
	},
	{
		amount: 29.99,
		currency: 'USD'
	}
);

```

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

### Log Output Examples: Fancy vs. Simple Format

Source: https://github.com/pgflow-dev/pgflow/blob/main/pkgs/website/src/content/docs/reference/configuration/worker.mdx

Illustrates log output examples for both 'fancy' format (for local development) and 'simple' format (for production log aggregators). The fancy format uses colors and icons, while the simple format uses key=value pairs.

```text
➜ my-worker [abc123]
   Queue: my_flow
   Flows: ✓ myFlow (compiled)

my-worker: ✓ myFlow/fetchData  234ms
my-worker: ✗ myFlow/sendEmail
my-worker:   ValidationError: invalid email
my-worker:   ↻ retry 1/3 in 5s
```

```text
[INFO] worker=my-worker queue=my_flow flow=myFlow status=compiled worker_id=abc123
[VERBOSE] worker=my-worker flow=myFlow step=fetchData status=completed duration_ms=234
[VERBOSE] worker=my-worker flow=myFlow step=sendEmail status=failed error="ValidationError: invalid email" retry=1/3 retry_delay_s=5
```

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

### D2 Example: Applying Color Classes to Nodes

Source: https://github.com/pgflow-dev/pgflow/blob/main/pkgs/website/src/content/docs/d2-guide.mdx

This example shows how to apply specific color classes to D2 nodes, influencing their visual representation based on their state or type. It utilizes the 'step_started' class for a running state.

```d2
my_step: "processing_data"
my_step.class: step_started  # Uses blue (running state)
```

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

### PgflowClient: Start Workflow

Source: https://github.com/pgflow-dev/pgflow/blob/main/pkgs/client/README.md

Demonstrates the `startFlow` method of the `PgflowClient`. It shows how to initiate a workflow with basic input, a custom run ID, and how to leverage TypeScript for type-safe flow definitions.

```typescript
const run = await pgflow.startFlow('my_flow', { data: 'input' });

// With custom run ID
const run = await pgflow.startFlow('my_flow', { data: 'input' }, 'custom-id');

// With type safety (requires flow definition)
import { MyFlow } from './flows/my-flow';
const run = await pgflow.startFlow<typeof MyFlow>(MyFlow.slug, {
  data: 'input',
});
```

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

### Example pgflow CLI Compilation and Migration File Generation

Source: https://github.com/pgflow-dev/pgflow/blob/main/pkgs/cli/src/commands/compile/README.md

An example illustrating how to compile a specific flow file (`src/flows/analyze-website.ts`) using `pgflow compile` with a `deno.json` configuration. The output is a SQL migration file typically named with a timestamp, for instance, `pgflow_2025-04-19T13_45_30_123Z.sql`, created in the `./migrations` directory.

```bash
# Compile a flow and generate a migration file
pgflow compile src/flows/analyze-website.ts --deno-json=deno.json

# The command will create a migration file in the ./migrations directory
# with a name like pgflow_2025-04-19T13_45_30_123Z.sql
```

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

### PgflowClient: Get Run

Source: https://github.com/pgflow-dev/pgflow/blob/main/pkgs/client/README.md

Provides an example of using the `getRun` method to retrieve an existing workflow run by its ID. It includes a check to see if the run was found.

```typescript
const run = await pgflow.getRun('run-uuid');
if (run) {
  console.log('Found run:', run.status);
} else {
  console.log('Run not found');
}
```

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

### Compile Flow Success Response (200)

Source: https://github.com/pgflow-dev/pgflow/blob/main/pkgs/website/src/content/docs/reference/control-plane-api.mdx

Example of a successful response from the GET /flows/:slug endpoint, returning the flow's slug and an array of SQL statements for execution.

```json
{
  "flowSlug": "greetUser",
  "sql": [
    "SELECT pgflow.create_flow('greetUser');",
    "SELECT pgflow.add_step('greetUser', 'fullName', 'single', 0, NULL);",
    "SELECT pgflow.add_step('greetUser', 'greeting', 'single', 0, ARRAY['fullName']);"
  ]
}
```

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

### Local Build Commands for @pgflow/client

Source: https://github.com/pgflow-dev/pgflow/blob/main/pkgs/client/BUILD_AND_RELEASE.md

Provides commands to build the @pgflow/client package locally using Nx. These commands allow building all formats, only library formats (ESM/CJS), or only the browser format.

```bash
# Build all formats
pnpm nx build client

# Build only library formats
pnpm nx build:lib client

# Build only browser format
pnpm nx build:browser client
```

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

### Flow with All Default Execution Options (TypeScript)

Source: https://github.com/pgflow-dev/pgflow/blob/main/pkgs/website/src/content/docs/reference/configuration/step-execution.mdx

An example of a pgflow configuration where all steps inherit the default execution options defined at the flow level, simplifying the setup when steps have uniform requirements.

```typescript
new Flow({
  slug: 'myFlow',
  maxAttempts: 3,    // Default for all steps
  baseDelay: 1,      // Default for all steps
  timeout: 60        // Default for all steps
})
  .step({ slug: 'step1' }, handler1)  // Uses flow defaults
  .step({ slug: 'step2' }, handler2)  // Uses flow defaults
```

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

### Code Block Variations in Markdown

Source: https://github.com/pgflow-dev/pgflow/blob/main/DOCS_GUIDE.md

Various ways to use code blocks in Markdown, including options for framing, titles, language specification, diffs, and line/string highlighting. These enhance the presentation of code examples.

```markdown
````markdown
```bash frame="none"                    # Commands (easy copy)
```
```typescript title="file.ts"          # Files with titles
```
```diff lang="toml"                    # Config changes
```
```typescript {1-3,5} "term"           # Line/string highlighting
```
```sql                                 # Queries
````

```

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

### Install pgflow Migration Files with Supabase CLI

Source: https://github.com/pgflow-dev/pgflow/blob/main/pkgs/website/src/content/docs/reference/manual-installation.mdx

Applies the necessary pgflow migration files to your Supabase project using the Supabase CLI. Ensure you have downloaded and correctly renamed the migration files with appropriate timestamps before running this command.

```bash
npx supabase migration up
```

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

### SQL Core Orchestration Functions (SQL)

Source: https://github.com/pgflow-dev/pgflow/blob/main/ARCHITECTURE_GUIDE.md

Key SQL functions for the orchestration layer that manage the flow of execution. This includes starting ready steps, handling empty array propagation, and completing runs.

```sql
-- Orchestration Functions
CREATE OR REPLACE FUNCTION start_ready_steps() RETURNS ...;
CREATE OR REPLACE FUNCTION cascade_complete_taskless_steps() RETURNS ...;
CREATE OR REPLACE FUNCTION maybe_complete_run() RETURNS ...;

```

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

### Basic Flow and Step Configuration in TypeScript

Source: https://github.com/pgflow-dev/pgflow/blob/main/pkgs/website/src/content/docs/reference/configuration/index.mdx

This snippet demonstrates the minimal configuration required to define a new flow and its steps using the pgflow library. It shows how to instantiate a Flow with a slug and add steps, each with its own slug and handler. This requires no explicit configuration beyond slugs due to pgflow's sensible defaults.

```typescript
import { Flow } from 'pgflow';

// Assuming handler1 and handler2 are defined elsewhere
const handler1 = () => { /* ... */ };
const handler2 = () => { /* ... */ };

new Flow({ slug: 'myFlow' })
  .step({ slug: 'step1' }, handler1)
  .step({ slug: 'step2' }, handler2);
```

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

### SQL Core Functions for Task Management (SQL)

Source: https://github.com/pgflow-dev/pgflow/blob/main/ARCHITECTURE_GUIDE.md

Core SQL functions used by the orchestration layer to manage individual tasks within a workflow run. This includes starting, completing, and failing tasks.

```sql
-- Task Management Functions
CREATE OR REPLACE FUNCTION start_tasks(...) RETURNS SETOF step_task_record;
CREATE OR REPLACE FUNCTION complete_task(...) RETURNS ...;
CREATE OR REPLACE FUNCTION fail_task(...) RETURNS ...;

```

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

### Replace Password Placeholder in Connection String

Source: https://github.com/pgflow-dev/pgflow/blob/main/pkgs/website/src/content/docs/deploy/supabase/get-connection-string.mdx

This example demonstrates how to replace the placeholder '[YOUR-PASSWORD]' in a Supabase transaction pooler connection string with the actual database password. Ensure that any special characters in the password are URL-encoded.

```text
postgresql://postgres.yourproject:[YOUR-PASSWORD]@aws-0-us-east-1.pooler.supabase.com:6543/postgres
```

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

### Trigger pgflow Worker (Curl)

Source: https://github.com/pgflow-dev/pgflow/blob/main/pkgs/website/src/content/docs/get-started/flows/quickstart.mdx

Sends an HTTP request to start the pgflow worker. This is typically done once to initiate the worker process, which then auto-compiles flows and stays running. It targets the local Supabase functions URL.

```bash
curl http://localhost:54321/functions/v1/greet-user-worker
```

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

### Local Development Commands

Source: https://github.com/pgflow-dev/pgflow/blob/main/pkgs/website/DEPLOYMENT.md

These bash commands demonstrate how to run the pgflow website locally with optional overrides for the plausible proxy URL and deployment environment. This allows for testing different deployment configurations during development.

```bash
# With custom proxy
PLAUSIBLE_PROXY_URL=https://your-worker.your-username.workers.dev pnpm nx dev website

# Test production behavior
DEPLOYMENT_ENV=production PLAUSIBLE_PROXY_URL=https://your-worker.your-username.workers.dev pnpm nx dev website
```

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

### CSS Class-Based Event Tracking

Source: https://github.com/pgflow-dev/pgflow/blob/main/pkgs/website/ANALYTICS.md

Example of how to implement Plausible event tracking using CSS classes directly on HTML elements. This method is preferred for its simplicity and is suitable for tracking clicks on buttons and links.

```html
<button class="plausible-event-name=home:cta-click">
  Click Me
</button>
```

```html
<div class="plausible-event-name=home:card-click">
  <a href="/link">This link will be tracked</a>
</div>
```

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

### Light Shade Color Chain

Source: https://github.com/pgflow-dev/pgflow/blob/main/pkgs/website/src/content/docs/d2-guide.mdx

Defines an 8-level sequential relationship for light shades, starting from teal_light and progressing through blue_light, green_light, purple_light, orange_light, red_light, gray_light, and ending with teal_gray_light. This illustrates the light color progression.

```plaintext
teal_light -> blue_light
blue_light -> green_light
green_light -> purple_light
purple_light -> orange_light
orange_light -> red_light
red_light -> gray_light
gray_light -> teal_gray_light
```

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

### JSON Input Example for 'saveToDb' Step (JSON)

Source: https://github.com/pgflow-dev/pgflow/blob/main/pkgs/core/README.md

Provides an example of the input received by the 'saveToDb' step, which depends on both 'sentiment' and 'summary' steps. It highlights how outputs from multiple dependencies are aggregated into the input object for a downstream step.

```json
{
  "run": { "url": "https://example.com" },
  "sentiment": { "score": 0.85, "label": "positive" },
  "summary": "This website discusses various topics related to technology and innovation."
}
```

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

### Base Shade Color Chain

Source: https://github.com/pgflow-dev/pgflow/blob/main/pkgs/website/src/content/docs/d2-guide.mdx

Defines an 8-level sequential relationship for base shades, starting from teal_base and progressing through blue_base, green_base, purple_base, orange_base, red_base, gray_base, and ending with teal_gray_base. This details the base color progression.

```plaintext
teal_base -> blue_base
blue_base -> green_base
green_base -> purple_base
purple_base -> orange_base
orange_base -> red_base
red_base -> gray_base
gray_base -> teal_gray_base
```

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

### Medium Shade Color Chain

Source: https://github.com/pgflow-dev/pgflow/blob/main/pkgs/website/src/content/docs/d2-guide.mdx

Defines an 8-level sequential relationship for medium shades, starting from teal_medium and progressing through blue_medium, green_medium, purple_medium, orange_medium, red_medium, gray_medium, and ending with teal_gray_medium. This outlines the medium color progression.

```plaintext
teal_medium -> blue_medium
blue_medium -> green_medium
green_medium -> purple_medium
purple_medium -> orange_medium
orange_medium -> red_medium
red_medium -> gray_medium
gray_medium -> teal_gray_medium
```

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

### Start Supabase Functions Serve

Source: https://github.com/pgflow-dev/pgflow/blob/main/pkgs/website/src/content/docs/tutorials/ai-web-scraper/backend.mdx

Starts the Supabase Edge function server locally. This command must be kept running for the pgflow compiler and the Edge Worker to function correctly.

```bash
npx supabase functions serve --no-verify-jwt

```

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

### Dark Shade Color Chain

Source: https://github.com/pgflow-dev/pgflow/blob/main/pkgs/website/src/content/docs/d2-guide.mdx

Defines an 8-level sequential relationship for dark shades, starting from teal_dark and progressing through blue_dark, green_dark, purple_dark, orange_dark, red_dark, gray_dark, and ending with teal_gray_dark. This represents a specific dark color progression.

```plaintext
teal_dark -> blue_dark
blue_dark -> green_dark
green_dark -> purple_dark
purple_dark -> orange_dark
orange_dark -> red_dark
red_dark -> gray_dark
gray_dark -> teal_gray_dark
```