### Install Statamic Peak Starter Kit

Source: https://context7.com/studio1902/statamic-peak/llms.txt

Commands to install the Statamic Peak starter kit into a new or existing Statamic project. This involves using the Statamic CLI or composer. Requires Statamic CMS to be installed.

```bash
# Create new Statamic project with Peak
statamic new my-project studio1902/statamic-peak

# Or install into existing Statamic project
php please starter-kit:install studio1902/statamic-peak
```

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

### Install and Develop Documentation Locally

Source: https://github.com/studio1902/statamic-peak/blob/main/CONTRIBUTING.md

These commands are used to set up and run the VuePress documentation locally. Navigate to the 'docs' directory, install dependencies, and start the development server. The documentation will be available at http://localhost:8080.

```bash
npm i
npm run docs:dev
```

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

### Install Dependencies with Composer and NPM

Source: https://github.com/studio1902/statamic-peak/blob/main/export/README.example.md

Instructions for installing project dependencies using Composer for PHP and NPM for Node.js. This is a standard setup for PHP projects with front-end assets.

```bash
composer install
npm i && npm run dev
```

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

### Post-Installation Configuration Logic

Source: https://context7.com/studio1902/statamic-peak/llms.txt

PHP code demonstrating the logic within StarterKitPostInstall.php for orchestrating the initial setup of a Statamic Peak project. It includes methods for configuring environment variables, Git, Composer, Node dependencies, and translations.

```php
// StarterKitPostInstall.php orchestrates the setup process
class StarterKitPostInstall
{
    public function handle($console): void
    {
        $this->overwriteEnvWithPresets();      // Configure environment variables
        $this->excludeBuildFolderFromGit();     // Git configuration
        $this->setupComposerUpdateWorkflow();   // CI/CD setup
        $this->installNodeDependencies();       // Frontend dependencies
        $this->installTranslations();           // Multi-language support
    }

    protected function setAppName(): void
    {
        $appName = text(
            label: 'What should be your app name?',
            placeholder: 'Statamic Peak',
            required: true,
        );
        $this->replaceInEnv('APP_NAME="Statamic Peak"', "APP_NAME=\"{$appName}\"");
    }

    protected function setTimezone(): void
    {
        $newTimezone = search(
            label: 'What timezone should your app be in?',
            options: fn($value) => collect(timezone_identifiers_list())
                ->filter(fn($item) => Str::contains($item, $value, true))
                ->values()
                ->all(),
            placeholder: 'UTC',
            required: true,
        );
        $this->replaceInEnv("APP_TIMEZONE=\"UTC\"", "APP_TIMEZONE=\"$newTimezone\"");
    }
}
```

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

### Example .env Configuration

Source: https://context7.com/studio1902/statamic-peak/llms.txt

A sample .env file showcasing typical environment variables configured by the Statamic Peak starter kit. This includes application settings, URL, keys, timezone, image processing driver, debugbar, and mailer configuration.

```env
# Generated .env configuration
APP_NAME="My Peak Site"
APP_URL="https://mysite.test"
APP_KEY="base64:generatedkey..."
APP_TIMEZONE="America/New_York"
STATAMIC_LICENSE_KEY="your-license-key"

# Image processing
IMAGE_MANIPULATION_DRIVER=imagick

# Development tools
DEBUGBAR_ENABLED=true

# Email configuration for local development
MAIL_MAILER=smtp
MAIL_HOST=127.0.0.1
MAIL_PORT=2525
MAIL_USERNAME="${APP_NAME}"

# Static caching strategy
STATAMIC_STATIC_CACHING_STRATEGY=full
```

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

### Command Line Interface for NPM Scripts

Source: https://context7.com/studio1902/statamic-peak/llms.txt

Provides essential npm commands for managing project assets and running development servers. Includes commands for starting hot-reloading development, building for production, and continuous watching for file changes.

```bash
# Development with hot module replacement
npm run dev

# Production build with optimization
npm run build

# Watch mode for continuous development
npm run watch
```

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

### Create About Us Content Entry

Source: https://context7.com/studio1902/statamic-peak/llms.txt

Example of a Statamic content entry for an 'About Us' page. It uses the 'page' blueprint and includes content for the page builder, such as an article block with headings and paragraphs, and a cards block.

```yaml
# content/collections/pages/about.md
---
id: 550e8400-e29b-41d4-a716-446655440000
blueprint: page
title: About Us
slug: about
parent: ~
seo_noindex: false
seo_nofollow: false
sitemap_priority: 0.5
sitemap_change_frequency: monthly
page_builder:
  - 
    type: article
    article:
      - type: heading
        attrs:
          level: 2
        content:
          - type: text
            text: 'Our Story'
      - type: paragraph
        content:
          - type: text
            text: 'We are a company dedicated to excellence...'
  - 
    type: cards
    cards:
      - 
        title: 'Innovation'
        text: 'We innovate constantly to deliver cutting-edge solutions.'
        button_type: internal
        entry: 'entry::products'
        button_label: 'Learn More'
---

```

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

### Alpine.js Initialization and Plugin Registration

Source: https://context7.com/studio1902/statamic-peak/llms.txt

Initializes Alpine.js and registers several plugins including collapse, focus, morph, persist, and Laravel Precognition. It makes Alpine globally accessible via `window.Alpine` after starting the application.

```javascript
// resources/js/site.js
import Alpine from 'alpinejs'
import collapse from '@alpinejs/collapse'
import focus from '@alpinejs/focus'
import morph from '@alpinejs/morph'
import persist from '@alpinejs/persist'
import Precognition from 'laravel-precognition-alpine'

// Register Alpine plugins
Alpine.plugin(collapse)
Alpine.plugin(focus)
Alpine.plugin(morph)
Alpine.plugin(persist)
Alpine.plugin(Precognition)

// Start Alpine
Alpine.start()

// Make Alpine available globally
window.Alpine = Alpine
```

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

### JSON-LD Structured Data Examples (HTML)

Source: https://context7.com/studio1902/statamic-peak/llms.txt

Provides examples of JSON-LD structured data scripts for SEO, specifically for an Organization and Breadcrumbs. These scripts are intended to be placed in the page head to enhance search engine understanding of the website's content and structure. They follow schema.org standards.

```html
<!-- Automatically generated in page head -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Organization",
  "name": "My Company",
  "url": "https://example.com",
  "logo": "https://example.com/images/logo.png",
  "sameAs": [
    "https://twitter.com/mycompany",
    "https://facebook.com/mycompany"
  ]
}
</script>

<!-- Breadcrumbs -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Home",
      "item": "https://example.com"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "About",
      "item": "https://example.com/about"
    }
  ]
}
</script>
```

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

### Production Environment Configuration (.env) for Statamic Peak

Source: https://github.com/studio1902/statamic-peak/blob/main/export/README.example.md

Example .env file content for a production Statamic Peak installation. It includes settings for application environment, database, caching, mail, AWS, Vite, and Statamic-specific configurations like license keys and caching strategies. Sensitive data should be removed.

```env
APP_NAME="Statamic Peak"
APP_ENV=production
APP_KEY=
APP_DEBUG=false
APP_TIMEZONE="UTC"
APP_URL=

APP_LOCALE=en
APP_FALLBACK_LOCALE=en
APP_FAKER_LOCALE=en_US

APP_MAINTENANCE_DRIVER=file
APP_MAINTENANCE_STORE=file

BCRYPT_ROUNDS=12

LOG_CHANNEL=stack
LOG_STACK=single
LOG_DEPRECATIONS_CHANNEL=null
LOG_LEVEL=debug

DB_CONNECTION=sqlite
# DB_HOST=127.0.0.1
# DB_PORT=3306
# DB_DATABASE=laravel
# DB_USERNAME=root
# DB_PASSWORD=

SESSION_DRIVER=file
SESSION_LIFETIME=120
SESSION_ENCRYPT=false
SESSION_PATH=/
SESSION_DOMAIN=null

BROADCAST_CONNECTION=log
FILESYSTEM_DISK=local
QUEUE_CONNECTION=redis

CACHE_STORE=file
CACHE_PREFIX=

MEMCACHED_HOST=127.0.0.1

REDIS_CLIENT=phpredis
REDIS_DATABASE=
REDIS_HOST=127.0.0.1
REDIS_PASSWORD=null
REDIS_PORT=6379

MAIL_MAILER=smtp
MAIL_HOST=smtp.postmarkapp.com
MAIL_PORT=587
MAIL_ENCRYPTION=tls
MAIL_USERNAME=
MAIL_PASSWORD=
MAIL_FROM_ADDRESS=
MAIL_FROM_NAME="${APP_NAME}"

AWS_ACCESS_KEY_ID=
AWS_SECRET_ACCESS_KEY=
AWS_DEFAULT_REGION=us-east-1
AWS_BUCKET=
AWS_USE_PATH_STYLE_ENDPOINT=false

VITE_APP_NAME="${APP_NAME}"

STATAMIC_LICENSE_KEY=
STATAMIC_THEME=business
STATAMIC_PRO_ENABLED=true
STATAMIC_STACHE_WATCHER=auto
STATAMIC_STATIC_CACHING_STRATEGY=full
STATAMIC_CACHE_TAGS_ENABLED=true
STATAMIC_REVISIONS_ENABLED=false
STATAMIC_GRAPHQL_ENABLED=false
STATAMIC_API_ENABLED=false
STATAMIC_GIT_ENABLED=true
STATAMIC_GIT_PUSH=true
STATAMIC_GIT_DISPATCH_DELAY=5

#IMAGE_MANIPULATION_DRIVER=imagick

#STATAMIC_CUSTOM_CMS_NAME=
#STATAMIC_CUSTOM_LOGO_NAV_URL=
#STATAMIC_CUSTOM_DARK_LOGO_URL=
STATAMIC_CUSTOM_LOGO_OUTSIDE_URL="/visuals/client-logo.svg"
#STATAMIC_CUSTOM_FAVICON_URL=
#STATAMIC_CUSTOM_CSS_URL=

```

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

### Add Languages to Statamic (Bash)

Source: https://context7.com/studio1902/statamic-peak/llms.txt

These bash commands are used to add new language translations to a Statamic project. The `lang:add` command can be used to install individual languages or multiple languages simultaneously, facilitating multi-language support in the application.

```bash
# During installation, the wizard prompts for languages
# Or manually install languages after setup:

# Install German translations
php artisan lang:add de

# Install Dutch translations
php artisan lang:add nl

# Install multiple languages
php artisan lang:add fr es it

```

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

### Use Translations in Statamic Templates (HTML/Twig)

Source: https://context7.com/studio1902/statamic-peak/llms.txt

These HTML/Twig examples show how to use the `trans` tag in Statamic templates to display translated strings. It covers translating simple string keys, translating with parameters, and translating field labels, facilitating internationalization.

```html
<!-- Translate string keys -->
<button>{{ trans:strings.form_send }}</button>

<!-- Translate with parameters -->
<p>{{ trans:strings.greeting name="John" }}</p>

<!-- Translate field labels -->
<label>{{ trans :key="field:display" }}</label>

```

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

### Deployment Script for Ploi

Source: https://github.com/studio1902/statamic-peak/blob/main/export/README.example.md

A bash script for deploying the Statamic Peak project using Ploi. It handles conditional deployment based on commit messages, pulls the latest code, installs dependencies, builds assets, clears caches, and warms Statamic caches. It includes checks to prevent simultaneous FPM reloads.

```bash
if [[ {COMMIT_MESSAGE} =~ "[BOT]" ]] && [[ {DEPLOYMENT_SOURCE} == "quick-deploy" ]]; then
    echo "Automatically committed on production. Nothing to deploy."
    {DO_NOT_NOTIFY}
    exit 0
fi

cd {SITE_DIRECTORY}
git pull origin {BRANCH}
{SITE_COMPOSER} install --no-interaction --prefer-dist --optimize-autoloader --no-dev

npm ci
npm run build

{RELOAD_PHP_FPM}

{SITE_PHP} artisan cache:clear
{SITE_PHP} artisan config:cache
{SITE_PHP} artisan route:cache
{SITE_PHP} artisan statamic:stache:warm
{SITE_PHP} artisan queue:restart
{SITE_PHP} artisan statamic:search:update --all
{SITE_PHP} artisan statamic:static:clear
{SITE_PHP} artisan statamic:static:warm --queue

echo "🚀 Application deployed!"

```

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

### Project Package Dependencies and Scripts

Source: https://context7.com/studio1902/statamic-peak/llms.txt

Defines the project's npm scripts for development and building, along with its direct and development dependencies. This includes Alpine.js plugins, Laravel Precognition, Tailwind CSS, and Vite for asset management.

```json
{
  "scripts": {
    "dev": "vite",
    "watch": "vite",
    "build": "vite build",
    "production": "vite build"
  },
  "dependencies": {
    "@alpinejs/collapse": "^3.14.9",
    "@alpinejs/focus": "^3.14.9",
    "@alpinejs/morph": "^3.14.9",
    "@alpinejs/persist": "^3.14.9",
    "alpinejs": "^3.14.9",
    "laravel-precognition-alpine": "^0.7.2"
  },
  "devDependencies": {
    "@tailwindcss/forms": "^0.5.10",
    "@tailwindcss/typography": "^0.5.16",
    "@tailwindcss/vite": "^4.1.11",
    "laravel-vite-plugin": "^2.0.0",
    "tailwindcss": "^4.1.11",
    "vite": "^7.0.4"
  }
}
```

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

### Vite Build Configuration for Laravel Projects

Source: https://context7.com/studio1902/statamic-peak/llms.txt

Configures Vite for building front-end assets, integrating with Laravel and Tailwind CSS. It optimizes module chunking for better caching and sets up automatic browser refreshing. The configuration uses environment variables for server settings.

```javascript
// vite.config.js
import laravel from 'laravel-vite-plugin'
import tailwindcss from '@tailwindcss/vite'
import { defineConfig, loadEnv } from 'vite'

export default defineConfig(({ command, mode }) => {
    const env = loadEnv(mode, process.cwd(), '')
    return {
        build: {
            rollupOptions: {
                output: {
                    manualChunks: (id) => {
                        // Extract node_modules into separate chunks for better caching
                        if (id.includes('node_modules')) {
                            return id.toString().split('node_modules/')[1].split('/')[0].toString()
                        }
                    }
                }
            }
        },
        plugins: [
            tailwindcss(),
            laravel({
                refresh: true,
                input: [
                    'resources/css/site.css',
                    'resources/js/site.js',
                ]
            })
        ],
        server: {
            open: env.APP_URL
        }
    }
})
```

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

### Automate Composer Updates with GitHub Actions

Source: https://context7.com/studio1902/statamic-peak/llms.txt

A GitHub Actions workflow to automate Composer dependency updates. It is configured to run quarterly or can be triggered manually.

```yaml
# .github/workflows/composer_update.yaml
name: Composer Update
on:
  schedule:
    - cron: '0 2 1 */3 *'  # Every 3 months at 2 AM on the 1st
  workflow_dispatch:       # Manual trigger option

jobs:
  composer_update_job:
    runs-on: ubuntu-latest
    name: composer update
    steps:
      - name: Checkout
        uses: actions/checkout@v3

      - name: composer update action
        uses: kawax/composer-update-action@master
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

```

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

### Configure Site Locales in Statamic (YAML)

Source: https://context7.com/studio1902/statamic-peak/llms.txt

This YAML configuration file (`resources/sites.yaml`) defines the different sites and their configurations within Statamic. It specifies details like the site name, URL, locale, and language code, essential for managing multi-language content.

```yaml
# resources/sites.yaml
default:
  name: Default
  url: /
  locale: en_US
  lang: en

```

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

### Responsive Image Component in Statamic

Source: https://context7.com/studio1902/statamic-peak/llms.txt

An Antlers component for rendering responsive images with focal point support. It utilizes `srcset` and `sizes` attributes for optimal image loading across different devices and includes lazy loading.

```html
<!-- resources/views/components/_image.antlers.html -->
{{#
    @name Image
    @desc Renders responsive image with focal point support
    @param image Asset reference
    @param alt Alt text
    @param sizes Responsive sizes attribute
#}}
{{ if image }}
    <img src="{{ image:url }}"
         srcset="{{ image:url width="400" }} 400w,
                 {{ image:url width="800" }} 800w,
                 {{ image:url width="1200" }} 1200w,
                 {{ image:url width="1600" }} 1600w"
         sizes="{{ sizes ?? '100vw' }}"
         alt="{{ alt ?? image:alt }}"
         width="{{ image:width }}"
         height="{{ image:height }}"
         loading="lazy"
         class="w-full h-auto">
{{ /if }}

```

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

### Define Page Collection Blueprint

Source: https://context7.com/studio1902/statamic-peak/llms.txt

This blueprint defines the structure for 'Page' collection entries in Statamic. It includes fields for title, SEO settings (imported from a package), and a page builder for flexible content layout.

```yaml
title: Page
tabs:
  main:
    display: Main
    sections:
      - display: General
        fields:
          - handle: title
            field:
              type: text
              required: true
              localizable: true
              listable: true
              display: Title
              validate:
                - required
      - display: 'Page builder'
        fields:
          - import: page_builder
  seo:
    display: SEO
    sections:
      - display: Basic
        fields:
          - import: 'statamic-peak-seo::seo_basic'
      - display: Advanced
        fields:
          - import: 'statamic-peak-seo::seo_advanced'
      - display: 'Open Graph'
        fields:
          - import: 'statamic-peak-seo::seo_open_graph'
  sidebar:
    display: Sidebar
    sections:
      - display: Meta
        fields:
          - handle: slug
            field:
              type: slug
              generate: true
              localizable: true
          - handle: parent
            field:
              type: entries
              collections:
                - pages
              max_items: 1
              localizable: true
```

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

### Trigger GitHub Actions Workflow Manually

Source: https://context7.com/studio1902/statamic-peak/llms.txt

Demonstrates how to manually trigger a GitHub Actions workflow using the GitHub CLI. This is useful for testing or on-demand updates.

```bash
# Trigger workflow manually via GitHub CLI
gh workflow run composer_update.yaml

# Or via GitHub web interface:
# Actions > Composer Update > Run workflow

```

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

### Per-Entry SEO Configuration (YAML Front Matter)

Source: https://context7.com/studio1902/statamic-peak/llms.txt

Configures SEO settings on a per-entry basis within Statamic content. This YAML front matter allows customization of SEO title, meta description, noindex/nofollow flags, canonical URLs, social media (Open Graph) tags, and sitemap priority/frequency. These settings override global defaults for individual content items.

```yaml
# In content entry front matter
seo_title: 'Custom SEO Title | Site Name'
seo_description: 'Custom meta description for search engines and social sharing.'
seo_noindex: false
seo_nofollow: false
seo_canonical_entry: 'entry::original-post'
og_title: 'Social Media Title'
og_description: 'Description for social sharing'
og_image: 'asset::social_images::custom-card.jpg'
sitemap_priority: 0.8
sitemap_change_frequency: weekly
```

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

### Global SEO Configuration (YAML)

Source: https://context7.com/studio1902/statamic-peak/llms.txt

Defines global SEO settings for the Statamic Peak project. This YAML file configures options like noindexing for collection and taxonomy indices, JSON-LD type, organization details, and integrates various tracking scripts like Google Tag Manager and Google Analytics. It uses a key-value structure for configuration.

```yaml
# content/globals/seo.yaml
title: SEO
data:
  noindex_collection_indices: false
  noindex_taxonomy_indices: false
  breadcrumbs_position_nested: true
  json_ld_type: Organization
  json_ld_organization_name: 'My Company'
  json_ld_organization_logo: 'asset::images::logo.png'
  trackers:
    - 
      type: google_tag_manager
      container_id: 'GTM-XXXXXXX'
    - 
      type: google_analytics
      tracking_id: 'G-XXXXXXXXXX'
```

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

### Define Contact Form Configuration

Source: https://context7.com/studio1902/statamic-peak/llms.txt

This YAML file defines the configuration for a 'Contact' form. It includes settings for a honeypot field, email recipients, sender address, and specifies HTML and text templates for confirmation emails.

```yaml
# resources/forms/contact.yaml
title: Contact
honeypot: fax
email:
  - 
    to: info@site.com
    from: "{{ email }}"
    subject: "{{ trans:strings.form_subject_received }}"
    html: email/form_owner
    text: email/form_owner_text
  - 
    to: "{{ email }}"
    from: info@site.com
    subject: "{{ trans:strings.form_subject_confirmation }}"
    html: email/form_sender
    text: email/form_sender_text

```

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

### Render Page Builder Blocks in Antlers

Source: https://context7.com/studio1902/statamic-peak/llms.txt

This Antlers template demonstrates how to render modular page builder blocks. It iterates through the 'page_builder' field and includes partials based on the block 'type', allowing for flexible content composition.

```html
<!-- resources/views/default.antlers.html -->
<main class="py-12 md:py-16 lg:py-24 stack-12 md:stack-16 lg:stack-24" id="content">
    {{ page_builder scope="block" }}
        {{ partial src="page_builder/{type}" }}
    {{ /page_builder }}
</main>
```

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

### Test Kit Export with PHP CLI

Source: https://github.com/studio1902/statamic-peak/blob/main/CONTRIBUTING.md

This command tests the starter kit export functionality from within the development environment. It exports the kit to the repository root and checks for changes. This command should be run in the 'dev' folder.

```php
php please starter-kit:export .././
```

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

### Peak Custom CSS Utilities for Grid and Spacing

Source: https://context7.com/studio1902/statamic-peak/llms.txt

Implements custom CSS utilities for a responsive fluid grid system and stackable spacing. Includes column span utilities for different screen sizes and margin-top utilities for vertical spacing, as well as fluid typography settings.

```css
/* resources/css/peak.css - Fluid Grid System */

.fluid-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1.5rem;
}

/* Column spans */
.span-full { grid-column: 1 / -1; }
.span-content { grid-column: 2 / -2; }
.span-md { grid-column: span 6; }
.span-lg { grid-column: span 8; }
.span-xl { grid-column: span 10; }

@media (min-width: 768px) {
    .md\:span-full { grid-column: 1 / -1; }
    .md\:span-md { grid-column: span 6; }
    .md\:span-lg { grid-column: span 8; }
}

/* Stack spacing utilities */
.stack-8 > * + * { margin-top: 2rem; }
.stack-12 > * + * { margin-top: 3rem; }
.stack-16 > * + * { margin-top: 4rem; }
.stack-24 > * + * { margin-top: 6rem; }

@media (min-width: 768px) {
    .md\:stack-12 > * + * { margin-top: 3rem; }
    .md\:stack-16 > * + * { margin-top: 4rem; }
    .md\:stack-24 > * + * { margin-top: 6rem; }
}

@media (min-width: 1024px) {
    .lg\:stack-16 > * + * { margin-top: 4rem; }
    .lg\:stack-24 > * + * { margin-top: 6rem; }
}

/* Fluid typography */
:root {
    font-size: clamp(1rem, 0.9rem + 0.5vw, 1.2rem);
}
```

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

### Manage Statamic Static Cache (Bash)

Source: https://context7.com/studio1902/statamic-peak/llms.txt

These bash commands are used to manage the static cache in Statamic. They include enabling caching via environment variables, warming the cache, clearing it, and checking its status. These commands are essential for maintaining an up-to-date static site.

```bash
# Enable full static caching in .env
STATAMIC_STATIC_CACHING_STRATEGY=full

# Warm the static cache
php artisan statamic:static:warm

# Clear the static cache
php artisan statamic:static:clear

# Check caching status
php artisan statamic:static:info

```

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

### Configure Statamic Static Caching Strategy (PHP)

Source: https://context7.com/studio1902/statamic-peak/llms.txt

This PHP configuration file (`config/statamic/static_caching.php`) defines various strategies for static caching in Statamic, including application-level and file-based generation. It also details settings for excluding URLs, invalidation rules, query string handling, and dynamic content replacers. Cache strategy can be set via environment variables.

```php
<?php
// config/statamic/static_caching.php
return [
    // Set via environment variable
    'strategy' => env('STATAMIC_STATIC_CACHING_STRATEGY', null),

    'strategies' => [
        // Application-level caching for dynamic content
        'half' => [
            'driver' => 'application',
            'expiry' => null,
        ],

        // File-based static HTML generation
        'full' => [
            'driver' => 'file',
            'path' => public_path('static'),
            'lock_hold_length' => 0,
            'warm_concurrency' => 10,
        ],
    ],

    // Exclude dynamic URLs from caching
    'exclude' => [
        'urls' => [
            '/site.webmanifest',
            '/sitemap.xml',
            '/sitemaps.xml',
        ],
    ],

    // Invalidation rules
    'invalidation' => [
        'class' => null,
        'rules' => 'all',  // Invalidate all when content changes
    ],

    // Query string handling
    'ignore_query_strings' => false,

    // Dynamic content replacement in cached pages
    'replacers' => [
        \Statamic\StaticCaching\Replacers\CsrfTokenReplacer::class,
        \Statamic\StaticCaching\Replacers\NoCacheReplacer::class,
    ],
];

```

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

### Render Cards Block with Grid Layout

Source: https://context7.com/studio1902/statamic-peak/llms.txt

This Antlers partial renders the 'cards' page builder block. It displays cards in a fluid grid layout, each with a title, text, and an optional button, suitable for showcasing features or items.

```html
<!-- resources/views/page_builder/_cards.antlers.html -->
{{ partial:page_builder/block }}
    <div class="fluid-grid gap-8">
        {{ cards }}
            <article class="span-md bg-white p-6 rounded-lg shadow-md">
                <h3 class="text-xl font-bold mb-3">{{ title }}</h3>
                <p class="mb-4">{{ text }}</p>
                {{ if button_type }}
                    {{ partial:components/buttons }}
                {{ /if }}
            </article>
        {{ /cards }}
    </div>
{{ /partial:page_builder/block }}
```

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

### Render Article Block Content with Typography

Source: https://context7.com/studio1902/statamic-peak/llms.txt

This Antlers partial renders the 'article' page builder block. It uses the 'prose' typography partial to style rich text content and supports rendering nested components like headings, paragraphs, images, and more.

```html
<!-- resources/views/page_builder/_article.antlers.html -->
{{ partial:page_builder/block }}
    {{ partial:typography/prose as="article" class="contents stack-8" }}
        {{ article }}
            {{ partial src="components/{type}" }}
        {{ /article }}
    {{ /partial:typography/prose }}
{{ /partial:page_builder/block }}
```

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

### Link Statamic Peak Site with Valet

Source: https://github.com/studio1902/statamic-peak/blob/main/CONTRIBUTING.md

This command links the Statamic Peak development environment to Valet, making it accessible via a custom domain. Ensure you are in the 'dev' folder of the repository.

```bash
valet link statamic-peak
```

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

### Responsive Video Embed Component (Antlers)

Source: https://context7.com/studio1902/statamic-peak/llms.txt

Embeds YouTube or Vimeo videos responsively using Antlers templating language. It checks the video URL to determine the service and dynamically generates the appropriate iframe embed code. Assumes the video URL is provided via the 'video_url' parameter.

```html
<!-- resources/views/components/_video.antlers.html -->
{{#
    @name Video
    @desc Embeds YouTube or Vimeo videos responsively
    @param video_url URL to video
#}}
<div class="relative aspect-video">
    {{ if video_url | contains('youtube') }}
        <iframe src="https://www.youtube-nocookie.com/embed/{{ video_url | last_segment }}"
                class="absolute inset-0 w-full h-full"
                frameborder="0"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                allowfullscreen>
        </iframe>
    {{ elseif video_url | contains('vimeo') }}
        <iframe src="https://player.vimeo.com/video/{{ video_url | last_segment }}"
                class="absolute inset-0 w-full h-full"
                frameborder="0"
                allow="autoplay; fullscreen; picture-in-picture"
                allowfullscreen>
        </iframe>
    {{ /if }}
</div>
```

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

### Form Handler JavaScript with Precognition (JavaScript)

Source: https://context7.com/studio1902/statamic-peak/llms.txt

A JavaScript component using Laravel Precognition and Alpine.js for handling form submissions. It initializes the form state, manages submission logic, and provides feedback mechanisms. Dependencies include `laravel-precognition-alpine`.

```javascript
import { useForm } from 'laravel-precognition-alpine'

export default () => ({
    form: null,

    init() {
        this.form = useForm('post', this.$refs.form.action, {
            // Form fields bound via x-model
        })
    },

    async submit() {
        try {
            await this.form.submit()
            // Success handled by Statamic
        } catch (error) {
            // Errors displayed via form state
            console.error('Form submission failed:', error)
        }
    }
})
```

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

### Rendering Forms with Alpine.js and Validation (Antlers)

Source: https://context7.com/studio1902/statamic-peak/llms.txt

An Antlers template for rendering a Statamic form, enhanced with Alpine.js for dynamic frontend behavior and validation. It includes error handling, success messages, and field rendering with conditional validation feedback. Dependencies include Alpine.js and Statamic's form tag.

```html
{{ form:create in="form:handle"
    js="alpine:form"
    x-ref="form"
    class="flex flex-col gap-6" }}

    <div x-data="formHandler()" @submit.prevent="submit">
        {{ if errors }}
            <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded">
                <strong>{{ trans:strings.form_error }}</strong>
                <ul class="mt-2 list-disc list-inside">
                    {{ errors }}
                        <li>{{ value }}</li>
                    {{ /errors }}
                </ul>
            </div>
        {{ /if }}

        {{ if success }}
            <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded">
                {{ trans:strings.form_success }}
            </div>
        {{ /if }}

        {{ sections }}
            <fieldset class="border-0 p-0">
                {{ if section:display }}
                    <legend class="text-xl font-bold mb-4">{{ section:display }}</legend>
                {{ /if }}

                {{ fields }}
                    <div class="form-field">
                        <label for="{{ handle }}" class="block font-semibold mb-2">
                            {{ trans :key="field:display" }}
                            {{ if field:validate | contains('required') }} *{{ /if }}
                        </label>

                        {{ field:field
                            class="w-full px-4 py-2 border rounded focus:outline-dotted focus:outline-2 focus:outline-primary"
                            :class="{ 'border-red-500': $form.invalid('{{ handle }}') }"
                            x-model="$form.{{ handle }}"
                        }}

                        <template x-if="$form.invalid('{{ handle }}')">
                            <div class="text-red-600 text-sm mt-1" x-text="$form.errors.{{ handle }}"></div>
                        </template>
                    </div>
                {{ /fields }}
            </fieldset>
        {{ /sections }}

        <button type="submit"
                class="bg-primary text-white px-6 py-3 rounded font-bold hover:opacity-90 disabled:opacity-50"
                :disabled="$form.processing">
            <span x-show="!$form.processing">{{ trans:strings.form_send }}</span>
            <span x-show="$form.processing">{{ trans:strings.form_sending }}</span>
        </button>
    </div>

    {{ partial:statamic-peak-tools::snippets/form_handler }}
{{ /form:create }}
```

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

### Define Translation Strings in Statamic (PHP)

Source: https://context7.com/studio1902/statamic-peak/llms.txt

This PHP file (`lang/en/strings.php`) defines a set of translation strings for the English language in a Statamic project. It includes strings for forms, consent banners, navigation, and pagination, allowing for easy management and translation of UI text.

```php
<?php
// lang/en/strings.php
return [
    // Form strings
    'form_honeypot' => 'Fax',
    'form_send' => 'Send message',
    'form_sending' => 'Sending...',
    'form_sent' => 'Thank you, we received your message and will contact you soon.',
    'form_error' => 'There are problems with your form input:',
    'form_subject_received' => 'New contact form submission',
    'form_subject_confirmation' => 'Thank you for your message',

    // Consent banner
    'consent_title' => 'Cookie consent',
    'consent_description' => 'We use cookies to improve your experience.',
    'consent_accept' => 'Accept',
    'consent_decline' => 'Decline',

    // Navigation
    'nav_close' => 'Close navigation',
    'nav_open' => 'Open navigation',
    'nav_skip_to_content' => 'Skip to content',

    // Pagination
    'pagination_previous' => 'Previous',
    'pagination_next' => 'Next',
];

```

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

### Deployment Script for Forge

Source: https://github.com/studio1902/statamic-peak/blob/main/export/README.example.md

A bash script for deploying the Statamic Peak project using Forge. It includes logic to skip deployments for automatic commits, pulls the latest code, updates dependencies, builds assets, and clears/warms various caches. It also features a mechanism to prevent multiple FPM reloads.

```bash
if [[ $FORGE_QUICK_DEPLOY == 1 ]]; then
    if [[ $FORGE_DEPLOY_MESSAGE =~ "[BOT]" ]]; then
        echo "Automatically committed on production. Nothing to deploy."
        exit 0
    fi
fi

cd $FORGE_SITE_PATH
git pull origin $FORGE_SITE_BRANCH
$FORGE_COMPOSER install --no-interaction --prefer-dist --optimize-autoloader --no-dev

npm ci
npm run build

# Prevents multiple deployments from restarting PHP-FPM simultaneously
touch /tmp/fpmlock 2>/dev/null || true
( flock -w 10 9 || exit 1
    echo 'Restarting FPM...'; sudo -S service $FORGE_PHP_FPM reload ) 9</tmp/fpmlock

$FORGE_PHP artisan cache:clear
$FORGE_PHP artisan config:cache
$FORGE_PHP artisan route:cache
$FORGE_PHP artisan statamic:stache:warm
$FORGE_PHP artisan queue:restart
$FORGE_PHP artisan statamic:search:update --all
$FORGE_PHP artisan statamic:static:clear
$FORGE_PHP artisan statamic:static:warm --queue

```

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

### Register Custom User Policy and Handle 404 Errors in Laravel

Source: https://context7.com/studio1902/statamic-peak/llms.txt

Registers a custom user policy and configures error page handling for 404s in a Laravel application's AppServiceProvider. It also sets up API rate limiting.

```php
<?php
// app/Providers/AppServiceProvider.php
namespace App\Providers;

use App\Policies\CustomUserPolicy;
use Illuminate\Cache\RateLimiting\Limit;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\RateLimiter;
use Illuminate\Support\ServiceProvider;
use Statamic\Policies\UserPolicy;
use Studio1902\PeakSeo\Handlers\ErrorPage;

class AppServiceProvider extends ServiceProvider
{
    public const HOME = '/home';

    public function register(): void
    {
        // Bind custom user policy
        $this->app->bind(UserPolicy::class, CustomUserPolicy::class);
    }

    public function boot(): void
    {
        // Handle 404 errors as entry pages
        ErrorPage::handle404AsEntry();

        $this->bootRoute();
    }

    public function bootRoute(): void
    {
        // API rate limiting: 60 requests per minute
        RateLimiter::for('api', function (Request $request) {
            return Limit::perMinute(60)->by($request->user()?->id ?: $request->ip());
        });
    }
}

```

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

### Tailwind CSS v4 Theme Configuration

Source: https://context7.com/studio1902/statamic-peak/llms.txt

Defines the core theme for Tailwind CSS v4, including a custom color palette with primary and neutral shades, font family placeholders, font weight settings, and responsive breakpoints. It also includes accessibility-focused focus-visible styles.

```css
/* resources/css/site.css */
@import "tailwindcss";
@import "./peak.css";
@import "./typography.css";

@theme {
    /* Color palette */
    --color-primary: oklch(53.24% 0.301 290.86);  /* Purple primary color */

    /* Neutral palette */
    --color-neutral-50: oklch(98.35% 0.004 264.53);
    --color-neutral-900: oklch(24.36% 0.016 265.75);

    /* Font families - customize as needed */
    /* --font-sans: "Inter", system-ui, sans-serif; */
    /* --font-serif: "Merriweather", Georgia, serif; */
    /* --font-mono: "Fira Code", monospace; */

    /* Font weights */
    --font-weight-normal: 400;
    --font-weight-bold: 700;

    /* Breakpoints */
    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;
    --breakpoint-2xl: 1536px;
}

/* Focus management for accessibility */
*:focus-visible {
    outline: 2px dotted currentColor;
    outline-offset: 2px;
}
```

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

### Reusable Button Component in Statamic

Source: https://context7.com/studio1902/statamic-peak/llms.txt

An Antlers component for rendering a styled button or link. It supports various types like internal, external, email, phone, and anchor links, with options for labels and opening in a new tab.

```html
<!-- resources/views/components/_button.antlers.html -->
{{#
    @name Button
    @desc Renders a styled button/link with consistent styling
    @param button_type internal|external|email|phone|anchor
    @param entry Entry reference for internal links
    @param url External URL
    @param email Email address
    @param phone Phone number
    @param anchor Anchor ID
    @param button_label Button text
    @param target_blank Open in new window
#}}
<a href="{{ switch(
        (button_type == 'entry') => '{entry:url}',
        (button_type == 'url') => '{url}',
        (button_type == 'email') => 'mailto:{email}',
        (button_type == 'phone') => 'tel:{phone}',
        (button_type == 'anchor') => '#{anchor}'
    ) }}"
    class="inline-flex items-center px-6 py-3 bg-primary text-white font-bold rounded hover:opacity-90 transition-opacity"
    {{ if target_blank }}target="_blank" rel="noopener noreferrer"{{ /if }}>
    {{ button_label }}
</a>

```

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

### Statamic Contact Form Blueprint (YAML)

Source: https://context7.com/studio1902/statamic-peak/llms.txt

Defines the structure and fields for a contact form in Statamic. It specifies field types, display names, and validation rules. This blueprint is used to generate the form's backend structure.

```yaml
title: Contact
sections:
  main:
    display: Main
    fields:
      - 
        handle: name
        field:
          type: text
          display: Name
          validate: required
      - 
        handle: email
        field:
          type: text
          input_type: email
          display: Email
          validate: 'required|email'
      - 
        handle: message
        field:
          type: textarea
          display: Message
          validate: required
      - 
        handle: consent
        field:
          type: checkboxes
          display: Consent
          options:
            privacy: 'I agree to the privacy policy'
          validate: required
```

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

### Dynamic Content Placeholder in Static Pages (HTML/Twig)

Source: https://context7.com/studio1902/statamic-peak/llms.txt

This HTML snippet demonstrates how to use the `nocache` tag in Statamic to include dynamic content within statically cached pages. It allows for elements like the current user's name and CSRF tokens to be rendered dynamically, avoiding being cached.

```html
<!-- Use nocache tag for dynamic content in static pages -->
{{ nocache }}
    <div>
        Current user: {{ current_user:name }}
        CSRF Token: {{ csrf_token }}
    </div>
{{ /nocache }}

```

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

### Statamic Main Navigation with Alpine.js

Source: https://github.com/studio1902/statamic-peak/blob/main/export/resources/views/navigation/_main_desktop.antlers.html

Renders the main desktop navigation for the site, supporting up to two levels deep. It uses the Statamic `nav:main` tag to fetch navigation data and Alpine.js for interactive dropdowns (indicated by chevron icons). It selects 'title' and 'url' fields and includes the home link. 'no_results' conditional is used to handle cases with no navigation items.

```antlers
{{ nav:main max_depth="2" include_home="true" select="title|url" }}
{{ unless no_results }}
*   [{{ title }} {{ if children }}
    
    {{ svg:chevron_down attr:class="w-2 ml-1 overflow-visible stroke-current text-neutral" attr:aria-hidden="true" }}
    
    {{ /if }}](#)
{{ if children }}
    {{ children }}
*   [{{ title }}]({{ url }})
    {{ /children }}
{{ /if }}
{{ /unless }}
{{ /nav:main }}
```

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

### Nginx Configuration for Static Resource Caching

Source: https://github.com/studio1902/statamic-peak/blob/main/export/README.example.md

Nginx configuration snippets to enable static resource caching. The `expires` directive should be placed within the `server` block, while the `map` block defining cacheable MIME types should be outside the `server` block.

```nginx
expires $expires;

```

```nginx
map $sent_http_content_type $expires {
    default    off;
    text/css    max;
    ~image/    max;
    application/javascript    max;
    application/octet-stream    max;
}

```

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

### Statamic Form Creation and Alpine Logic

Source: https://github.com/studio1902/statamic-peak/blob/main/export/resources/views/page_builder/_form.antlers.html

This snippet demonstrates how to create a Statamic form, associate it with a handle, and integrate Alpine.js for conditional logic and form handling. It utilizes Statamic's built-in form tags and custom Alpine directives for dynamic behavior. Dependencies include Statamic's form addon and Alpine.js.

```statamic
{{ if form:handle }}
  {{ form:create :in="form:handle" js="alpine:form" attr:x-ref="form" }}
    {{# Render various form sections. #}}
    {{ sections }}
      {{ if display || instructions }}
        {{ display ?= { partial:typography/h2 class="mb-2" as="legend" content="{ trans :key="display" }" } }}
        {{ instructions ?= { partial:typography/p content="{ trans :key="instructions" }" } }}
      {{ /if }}
      {{# Render the default-styled fields. #}}
      {{ fields scope="field" }}
      {{ /fields }}
    {{ /sections }}
    {{# Submit button, disabled on processing. #}}
    {{ partial:components/button as="button" button_type="button" label="{ trans:strings.form_send }" }}
      {{ slot:attributes }}
        @click.prevent="submit"
        :disabled="form.processing"
        :class="{ 'opacity-25 cursor-default': form.processing }"
      {{ /slot:attributes }}
    {{ /partial:components/button }}
  {{ /form:create }}
{{ /if }}
```

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

### Implement Custom User Policy for Authorization (PHP)

Source: https://context7.com/studio1902/statamic-peak/llms.txt

This PHP code defines a custom user policy (`app/Policies/CustomUserPolicy.php`) that extends Statamic's `UserPolicy`. It specifically overrides the `edit` and `editPassword` methods to prevent non-super users from editing or changing the passwords of super users, enhancing security.

```php
<?php
// app/Policies/CustomUserPolicy.php
namespace App\Policies;

use Statamic\Policies\UserPolicy;

class CustomUserPolicy extends UserPolicy
{
    /**
     * Prevent non-super users from editing super users
     */
    public function edit($authed, $user)
    {
        if ($user->isSuper() && ! $authed->isSuper()) {
            return false;
        }

        return parent::edit($authed, $user);
    }

    /**
     * Prevent non-super users from changing super user passwords
     */
    public function editPassword($authed, $user)
    {
        if ($user->isSuper() && ! $authed->isSuper()) {
            return false;
        }

        return parent::editPassword($authed, $user);
    }
}

```

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

### Prevent Deletion of Mounted Entries in Laravel

Source: https://context7.com/studio1902/statamic-peak/llms.txt

A Laravel listener that prevents the deletion of Statamic entries if they are mounted to routes. It throws an exception if a mounted entry is attempted to be deleted.

```php
<?php
// app/Listeners/PreventDeletingMounts.php
namespace App\Listeners;

use Statamic\Events\EntryDeleting;

class PreventDeletingMounts
{
    /**
     * Prevent deletion of entries that are mounted to routes
     */
    public function handle(EntryDeleting $event): void
    {
        $entry = $event->entry;

        // Check if entry is mounted
        if ($entry->collection()->mount()) {
            throw new \Exception('Cannot delete a mounted entry.');
        }
    }
}

```

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

### Render Main Mobile Navigation (Statamic)

Source: https://github.com/studio1902/statamic-peak/blob/main/export/resources/views/navigation/_main_mobile.antlers.html

This snippet renders the main mobile navigation for the website. It uses the Statamic `nav:main` tag to fetch navigation items up to a depth of 2, including the home page. It displays titles and URLs, with support for nested children and uses SVG for a chevron icon. AlpineJS is implicitly used for interactivity as described in the project context.

```statamic
{{ nav:main max_depth="2" include_home="true" select="title|url" }}
{{ unless no_results }}
*   [{{ title }} {{ if children }}
    
    {{ svg:chevron_down attr:class="w-2 ml-1 overflow-visible stroke-current text-neutral" attr:aria-hidden="true" }}
    
    {{ /if }}](#)
    {{ if children }}
    {{ children }}
*   [{{ title }}]({{ url }})
    {{ /children }}
{{ /if }}
{{ /unless }}
{{ /nav:main }}
```