### Start Docker Development Environment

Source: https://context7.com/hopetheory99/marjahans/llms.txt

Commands to start, view logs, and stop the Dockerized development environment for WordPress, Nginx, MySQL, and Mailhog. This setup facilitates local development by providing a complete stack.

```bash
# Start all services in background
docker compose up -d

# Access the application
# Web: http://localhost:8080
# Mailhog: http://localhost:8025

# View logs
docker compose logs -f php nginx

# Stop services
docker compose down
```

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

### Start Docker Compose Services

Source: https://github.com/hopetheory99/marjahans/blob/main/docs/project_plan.md

This command starts the Docker services defined in the docker-compose.yml file, including WordPress (PHP-FPM), Nginx, MySQL, and Mailhog for local development.

```bash
docker compose up -d
```

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

### Example Twig Template for Post Listing

Source: https://context7.com/hopetheory99/marjahans/llms.txt

An example Twig template (`index.twig`) that extends the base template and displays a list of posts. It iterates over the `posts` variable, outputting the title and content for each post within a container, demonstrating basic content rendering in Timber.

```twig
{% extends "base.twig" %}

{% block content %}
    <div class="container mx-auto px-4">
        {% for post in posts %}
            <article class="mb-8">
                <h2>{{ post.title }}</h2>
                <div>{{ post.content }}</div>
            </article>
        {% endfor %}
    </div>
{% endblock %}
```

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

### Manual Deployment with Flyctl CLI

Source: https://github.com/hopetheory99/marjahans/blob/main/docs/ci_cd.md

This snippet shows the command to manually deploy the application using the flyctl CLI. Ensure the flyctl CLI is installed and the FLY_API_TOKEN secret is configured in the GitHub repository settings for automated deployments.

```bash
flyctl deploy
```

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

### Install Theme Dependencies with npm

Source: https://github.com/hopetheory99/marjahans/blob/main/README_dev.md

Installs the necessary Node.js dependencies for the theme, typically performed once during the initial setup or when the dependency list changes. It uses npm, the Node Package Manager.

```bash
npm install
```

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

### Running PHPUnit Tests

Source: https://context7.com/hopetheory99/marjahans/llms.txt

Commands for executing PHPUnit tests via Composer. Includes options for running all tests, detailed output, and running a specific test file. Assumes PHPUnit is installed via Composer.

```bash
# Run PHPUnit tests
composer test

# Run with detailed output
composer test -- --testdox

# Run specific test
./vendor/bin/phpunit tests/php/Marjahans_Gateway_Bkash_Test.php
```

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

### Docker Production Image for Marjahans

Source: https://context7.com/hopetheory99/marjahans/llms.txt

This Dockerfile defines the production environment for the Marjahans application. It uses a PHP 8.3 FPM base image, installs necessary extensions, copies Composer and project files, optimizes autoloaders, and installs frontend dependencies. It also exposes port 80 for the web server.

```dockerfile
# docker/php/Dockerfile - Production image
FROM php:8.3-fpm

RUN docker-php-ext-install mysqli pdo pdo_mysql

COPY --from=composer:latest /usr/bin/composer /usr/bin/composer

WORKDIR /var/www/html

COPY . .

RUN composer install --no-dev --optimize-autoloader
RUN cd wp-content/themes/marjahans && npm ci && npm run build

EXPOSE 80
```

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

### CI Workflow for Marjahans Project

Source: https://context7.com/hopetheory99/marjahans/llms.txt

This GitHub Actions workflow automates the Continuous Integration process for the Marjahans project. It checks out code, sets up Node.js and PHP, installs dependencies, runs linters, tests, and builds theme assets. It also includes a conditional deployment step to Fly.io for the main branch.

```yaml
name: CI

on:
  push:
    branches: [main]
  pull_request:

jobs:
  build:
    runs-on: ubuntu-latest
    services:
      mysql:
        image: mysql:8
        env:
          MYSQL_DATABASE: wordpress
          MYSQL_USER: wordpress
          MYSQL_PASSWORD: wordpress
        ports: ['3306:3306']

    steps:
      - uses: actions/checkout@v3

      - uses: actions/setup-node@v3
        with:
          node-version: '18'

      - uses: actions/setup-php@v3
        with:
          php-version: '8.3'

      - name: Install Composer dependencies
        run: composer install --prefer-dist --no-progress

      - name: Install NPM dependencies
        run: npm ci
        working-directory: wp-content/themes/marjahans

      - name: Build theme assets
        run: npm run build
        working-directory: wp-content/themes/marjahans

      - name: PHP Lint
        run: composer lint --no-interaction

      - name: JS Format check
        run: npm run format:check
        working-directory: wp-content/themes/marjahans

      - name: PHP Unit tests
        run: composer test -- --testdox

      - name: E2E tests
        run: npm run test:e2e
        working-directory: wp-content/themes/marjahans

      - name: Deploy to Fly.io
        if: github.ref == 'refs/heads/main'
        uses: superfly/flyctl-actions@1.4
        with:
          args: "deploy --remote-only"
        env:
          FLY_API_TOKEN: ${{ secrets.FLY_API_TOKEN }}
```

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

### Theme Asset Pipeline with Vite

Source: https://context7.com/hopetheory99/marjahans/llms.txt

Commands for managing theme assets using npm scripts with Vite. This includes installing dependencies, running a development server with hot-reloading, building for production, and formatting code. These commands are executed within the theme directory.

```bash
# Install dependencies
cd wp-content/themes/marjahans
npm install

# Development mode with hot reload
npm run dev

# Production build with minification
npm run build

# Check code formatting
npm run format:check

# Format code
npm run format
```

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

### Bootstrap Marjahans Project with Codex CLI

Source: https://github.com/hopetheory99/marjahans/blob/main/README.md

Scaffolds the WordPress environment, custom theme, and plugins for the Marjahans WooCommerce project. Requires the Codex CLI to be installed. This command initializes the project based on the configuration defined in the marjahans_bootstrap.yaml file.

```bash
codex marjahans_bootstrap.yaml
```

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

### Playwright Configuration

Source: https://context7.com/hopetheory99/marjahans/llms.txt

Configuration file for Playwright, defining the test directory, base URL, screenshot behavior, and web server setup. This setup allows for automated testing against a local development environment.

```typescript
// playwright.config.ts - Test configuration
import { defineConfig } from '@playwright/test';

export default defineConfig({
  testDir: './tests/e2e',
  use: {
    baseURL: 'http://localhost:8080',
    screenshot: 'only-on-failure',
  },
  webServer: {
    command: 'docker compose up',
    port: 8080,
    reuseExistingServer: true,
  },
});
```

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

### Running Playwright E2E Tests

Source: https://context7.com/hopetheory99/marjahans/llms.txt

Commands for executing Playwright end-to-end tests. Includes options for running all tests, specific files, headed mode for visual debugging, and debug mode. Assumes Playwright and npm are installed.

```bash
# Run all E2E tests
cd wp-content/themes/marjahans
npm run test:e2e

# Run specific test
npx playwright test product-filter.spec.ts

# Run in headed mode
npx playwright test --headed

# Debug mode
npx playwright test --debug
```

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

### PHPCS Configuration

Source: https://context7.com/hopetheory99/marjahans/llms.txt

XML configuration file for PHP_CodeSniffer, specifying the ruleset to use (WordPress Coding Standards) and directories to check, along with exclusions for vendor and node_modules. This file guides the code quality checks.

```xml
<!-- phpcs.xml - PHPCS configuration -->
<?xml version="1.0"?>
<ruleset name="Marjahans">
    <description>WordPress Coding Standards</description>
    <rule ref="WordPress"/>
    <file>wp-content</file>
    <exclude-pattern>*/vendor/*</exclude-pattern>
    <exclude-pattern>*/node_modules/*</exclude-pattern>
</ruleset>
```

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

### Base Twig Template Structure

Source: https://context7.com/hopetheory99/marjahans/llms.txt

An example of a base Twig template (`base.twig`) for WordPress using Timber. It defines the fundamental HTML structure, including head and body elements, and includes placeholders for header, content, and footer, utilizing WordPress functions like `wp_head` and `wp_footer`.

```twig
<!DOCTYPE html>
<html {{ site.language_attributes }}>
<head>
    <meta charset="{{ site.charset }}">
    {{ function('wp_head') }}
</head>
<body class="{{ body_class }}">
    {% include 'header.twig' %}
    {% block content %}{% endblock %}
    {% include 'footer.twig' %}
    {{ function('wp_footer') }}
</body>
</html>
```

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

### Playwright E2E Tests for Product Filter

Source: https://context7.com/hopetheory99/marjahans/llms.txt

End-to-end tests for the product filter functionality using Playwright. These tests verify that the product filter loads, allows selection of metal types, and displays relevant product information. Requires Playwright to be installed.

```typescript
// tests/e2e/product-filter.spec.ts
import { test, expect } from '@playwright/test';

test('product filter loads', async ({ page }) => {
  await page.goto('/');
  await expect(page.locator('#product-filter-root')).toBeVisible();
});

test('filter selects metal type', async ({ page }) => {
  await page.goto('/shop');
  await page.selectOption('#product-filter select', 'gold');
  await expect(page.locator('.product-item')).toContainText('Gold');
});

test('360 viewer displays', async ({ page }) => {
  await page.goto('/product/gold-ring');
  await expect(page.locator('#viewer')).toBeVisible();
  await page.locator('#viewer').click();
});
```

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

### Manual Fly.io Deployment and Management Commands

Source: https://context7.com/hopetheory99/marjahans/llms.txt

A set of bash commands for managing deployments on Fly.io. These commands enable manual deployment, checking deployment status, viewing application logs, scaling the application instances, and setting sensitive environment variables.

```bash
# Deploy manually
flyctl deploy

# View deployment status
flyctl status

# View logs
flyctl logs

# Scale application
flyctl scale count 2

# Set secrets
flyctl secrets set WORDPRESS_DB_PASSWORD=secretpass
```

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

### Fly.io Deployment Configuration

Source: https://context7.com/hopetheory99/marjahans/llms.txt

This TOML file configures the deployment settings for the Marjahans application on Fly.io. It specifies the Dockerfile for building the image, sets environment variables, and defines network ports and mounts for persistent storage.

```toml
# fly.toml - Deployment configuration
app = "marjahans-store"

[build]
  dockerfile = "docker/php/Dockerfile"

[env]
  WORDPRESS_ENV = "production"

[[services]]
  internal_port = 80
  protocol = "tcp"

  [[services.ports]]
    handlers = ["http"]
    port = 80
    force_https = true

  [[services.ports]]
    handlers = ["tls", "http"]
    port = 443

[mounts]
  source = "marjahans_data"
  destination = "/var/www/html/wp-content/uploads"
```

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

### Timber Initialization for Twig Templating

Source: https://context7.com/hopetheory99/marjahans/llms.txt

PHP code snippet to initialize the Timber library in WordPress, enabling the use of Twig for templating. It sets the directory for Twig templates and adds basic theme support for title tags and post thumbnails.

```php
use Timber\Timber;

require_once __DIR__ . '/vendor/autoload.php';

Timber::$dirname = array('templates');

add_action('after_setup_theme', function() {
    add_theme_support('title-tag');
    add_theme_support('post-thumbnails');
});
```

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

### Build Production Theme Assets with npm

Source: https://github.com/hopetheory99/marjahans/blob/main/README_dev.md

Compiles and optimizes theme assets for production deployment. This command is used to generate the final CSS and other assets needed for the live website.

```bash
npm run build
```

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

### Docker Compose Configuration for WordPress

Source: https://context7.com/hopetheory99/marjahans/llms.txt

Defines the services for a Dockerized WordPress development environment, including PHP-FPM, Nginx, MySQL, and Mailhog. It specifies build contexts, volumes, environment variables, and port mappings necessary for local development.

```yaml
services:
  php:
    build: ./docker/php
    volumes:
      - ./:/var/www/html
    environment:
      WORDPRESS_DB_HOST: db
      WORDPRESS_DB_NAME: wordpress
      WORDPRESS_DB_USER: wordpress
      WORDPRESS_DB_PASSWORD: wordpress
  nginx:
    build: ./docker/nginx
    ports:
      - "8080:80"
  db:
    image: mysql:8
    environment:
      MYSQL_DATABASE: wordpress
      MYSQL_USER: wordpress
      MYSQL_PASSWORD: wordpress
    volumes:
      - db_data:/var/lib/mysql
  mailhog:
    image: mailhog/mailhog
    ports:
      - "8025:8025"
```

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

### Vite Configuration for Tailwind CSS and React

Source: https://context7.com/hopetheory99/marjahans/llms.txt

Configuration file (vite.config.js) for Vite, setting up the build process for Tailwind CSS and React components. It defines entry points for CSS and JavaScript, specifies PostCSS plugins including Tailwind CSS and autoprefixer, and sets the output directory for the build.

```javascript
import { defineConfig } from "vite";
import tailwindcss from "tailwindcss";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react()],
  css: {
    postcss: {
      plugins: [tailwindcss, autoprefixer],
    },
  },
  build: {
    rollupOptions: {
      input: {
        style: "src/css/tailwind.css",
        app: "src/js/index.tsx",
      },
    },
    outDir: "build",
  },
});
```

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

### Implement bKash Payment Gateway Class (PHP)

Source: https://context7.com/hopetheory99/marjahans/llms.txt

Implements the bKash payment gateway for WooCommerce. This class extends WC_Payment_Gateway and includes methods for initializing settings, form fields, and processing payments. It requires the WooCommerce framework.

```php
// class-marjahans-gateway-bkash.php - Gateway implementation
class Marjahans_Gateway_Bkash extends WC_Payment_Gateway {

    public function __construct() {
        $this->id = 'marjahans_bkash';
        $this->method_title = __('bKash', 'marjahans');
        $this->method_description = __('Pay securely via bKash.', 'marjahans');
        $this->supports = array('products');

        $this->init_form_fields();
        $this->init_settings();

        $this->title = $this->get_option('title');
        $this->description = $this->get_option('description');

        add_action(
            'woocommerce_update_options_payment_gateways_' . $this->id,
            array($this, 'process_admin_options')
        );
    }

    public function init_form_fields() {
        $this->form_fields = array(
            'enabled' => array(
                'title' => __('Enable/Disable', 'marjahans'),
                'type' => 'checkbox',
                'label' => __('Enable bKash payments', 'marjahans'),
                'default' => 'no',
            ),
            'title' => array(
                'title' => __('Title', 'marjahans'),
                'type' => 'text',
                'default' => __('bKash', 'marjahans'),
            ),
            'app_key' => array(
                'title' => __('App Key', 'marjahans'),
                'type' => 'text',
            ),
            'app_secret' => array(
                'title' => __('App Secret', 'marjahans'),
                'type' => 'password',
            ),
        );
    }

    public function process_payment($order_id) {
        $order = wc_get_order($order_id);

        // Implement bKash API call here

        $order->payment_complete();
        wc_reduce_stock_levels($order_id);

        return array(
            'result' => 'success',
            'redirect' => $this->get_return_url($order),
        );
    }
}
```

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

### PHPUnit Tests for Payment Gateway

Source: https://context7.com/hopetheory99/marjahans/llms.txt

Provides unit tests for the Marjahans_Gateway_Bkash payment gateway. These tests verify the existence of the class, its gateway ID, and its support for products. Requires PHPUnit and the plugin to be present.

```php
// tests/php/Marjahans_Gateway_Bkash_Test.php
<?php
use PHPUnit\Framework\TestCase;

require_once __DIR__ . '/../../wp-content/plugins/marjahans-gateway/marjahans-gateway.php';

final class Marjahans_Gateway_Bkash_Test extends TestCase {
    public function test_class_exists() {
        $this->assertTrue(class_exists('Marjahans_Gateway_Bkash'));
    }

    public function test_gateway_id() {
        $gateway = new Marjahans_Gateway_Bkash();
        $this->assertEquals('marjahans_bkash', $gateway->id);
    }

    public function test_supports_products() {
        $gateway = new Marjahans_Gateway_Bkash();
        $this->assertTrue($gateway->supports('products'));
    }
}
```

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

### Generate Translation Template File (Bash)

Source: https://context7.com/hopetheory99/marjahans/llms.txt

This bash command generates a .pot (Portable Object Template) file for internationalization using the WordPress CLI. It scans the theme directory for translatable strings and creates a template file named 'marjahans.pot' in the 'languages' directory. This file is used as a base for creating .po files for specific languages.

```bash
# Generate translation template
cd wp-content/themes/marjahans/languages
wp i18n make-pot ../ marjahans.pot

# Example .po file structure
# msgid "Home"
# msgstr "হোম"
#
# msgid "Shop"

```

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

### Manual Workflow Trigger and Monitoring Commands

Source: https://context7.com/hopetheory99/marjahans/llms.txt

These bash commands are used to interact with GitHub Actions workflows. They allow triggering a workflow manually, listing active or past runs, and viewing the logs for a specific run.

```bash
# Trigger workflow manually
gh workflow run ci.yml

# View workflow status
gh run list

# View logs
gh run view --log
```

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

### PHPUnit Test Configuration

Source: https://context7.com/hopetheory99/marjahans/llms.txt

XML configuration file for PHPUnit, specifying the test suite directory and the bootstrap file for autoloading. This file is essential for running the PHPUnit tests.

```xml
<!-- phpunit.xml - Test configuration -->
<?xml version="1.0"?>
<phpunit bootstrap="vendor/autoload.php">
    <testsuites>
        <testsuite name="Marjahans">
            <directory>tests/php</directory>
        </testsuite>
    </testsuites>
</phpunit>
```

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

### Create 360° Product Viewer Component (TypeScript/React)

Source: https://context7.com/hopetheory99/marjahans/llms.txt

A React component that integrates the PhotoSphereViewer library to display panoramic product images. It uses the useEffect hook to initialize the viewer when the component mounts and cleans up the viewer instance when it unmounts. Requires a container element with id 'viewer' and an imageUrl prop.

```typescript
// src/js/Viewer.tsx
import React, { useEffect } from "react";
import PhotoSphereViewer from "photo-sphere-viewer";

interface Props {
  imageUrl: string;
}

export default function Viewer({ imageUrl }: Props) {
  useEffect(() => {
    const viewer = new PhotoSphereViewer.Viewer({
      container: document.getElementById("viewer")!,
      panorama: imageUrl,
    });

    return () => viewer.destroy();
  }, [imageUrl]);

  return <div id="viewer" className="w-full h-96" />;
}
```

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

### Configure WPML Translation Configuration (XML)

Source: https://context7.com/hopetheory99/marjahans/llms.txt

This XML file configures WPML for translation management. It specifies which admin texts should be available for translation, in this case, 'header_menu_home' and 'header_menu_shop'. This allows translators to provide localized versions of these strings.

```xml
<!-- wpml-config.xml - Translation configuration -->
<?xml version="1.0"?>
<wpml-config>
  <admin-texts>
    <key name="header_menu_home" />
    <key name="header_menu_shop" />
  </admin-texts>
</wpml-config>
```

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

### Rebuild Theme Assets with npm

Source: https://github.com/hopetheory99/marjahans/blob/main/README_dev.md

Continuously rebuilds theme assets, such as Tailwind CSS, in response to file changes. This command is used during active development to see immediate updates.

```bash
npm run dev
```

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

### Composer Configuration for PHPCS and PHPUnit

Source: https://context7.com/hopetheory99/marjahans/llms.txt

Composer JSON file that defines development dependencies including PHP_CodeSniffer, WordPress Coding Standards, and PHPUnit. It also configures scripts for linting and testing, streamlining the development workflow.

```json
// composer.json - PHPCS setup
{
  "require-dev": {
    "squizlabs/php_codesniffer": "^3.8",
    "wp-coding-standards/wpcs": "^3.0",
    "phpunit/phpunit": "^9.6"
  },
  "scripts": {
    "lint": "phpcs --standard=WordPress --extensions=php -p wp-content",
    "test": "phpunit"
  }
}
```

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

### Enqueueing Built Assets in WordPress

Source: https://context7.com/hopetheory99/marjahans/llms.txt

PHP code for the WordPress `functions.php` file that enqueues the compiled CSS and JavaScript files generated by Vite. It uses `wp_enqueue_style` and `wp_enqueue_script` to load the assets, ensuring they are properly registered with WordPress.

```php
add_action('wp_enqueue_scripts', function() {
    $version = wp_get_theme()->get('Version');
    wp_enqueue_style('marjahans-style',
        get_theme_file_uri('build/style.css'),
        array(),
        $version
    );
    wp_enqueue_script('marjahans-app',
        get_theme_file_uri('build/index.js'),
        array(),
        $version,
        true
    );
});
```

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

### Mount React Product Filter Component (TypeScript/React)

Source: https://context7.com/hopetheory99/marjahans/llms.txt

This script mounts the React ProductFilter component into the DOM. It uses createRoot from 'react-dom/client' to render the component into an element with the ID 'product-filter-root'. Ensure the target element exists in your HTML.

```typescript
// src/js/index.tsx - Mount React component
import React from "react";
import { createRoot } from "react-dom/client";
import ProductFilter from "./ProductFilter";

const filterRoot = document.getElementById("product-filter-root");
if (filterRoot) {
  createRoot(filterRoot).render(<ProductFilter />);
}
```

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

### Integrate Product Filter Twig Template (Twig)

Source: https://context7.com/hopetheory99/marjahans/llms.txt

This is a simple Twig template that provides the necessary DOM element for the React Product Filter component to mount onto. The `div` with the ID 'product-filter-root' serves as the container for the React application.

```twig
{# templates/components/product-filter.twig - Template integration #}
<div id="product-filter-root"></div>
```

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

### Register bKash Payment Gateway in WooCommerce (PHP)

Source: https://context7.com/hopetheory99/marjahans/llms.txt

Registers the Marjahans_Gateway_Bkash class as a WooCommerce payment gateway. It hooks into the 'woocommerce_payment_gateways' filter and ensures the necessary gateway class is loaded.

```php
// marjahans-gateway.php - Register gateway
add_filter('woocommerce_payment_gateways', function($gateways) {
    $gateways[] = 'Marjahans_Gateway_Bkash';
    return $gateways;
});

add_action('plugins_loaded', function() {
    if (!class_exists('WC_Payment_Gateway')) {
        return;
    }
    require_once __DIR__ . '/includes/class-marjahans-gateway-bkash.php';
});
```

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

### PHP Translation Usage in Theme

Source: https://context7.com/hopetheory99/marjahans/llms.txt

Demonstrates how to use translation functions within a WordPress theme to internationalize strings. It uses the `__` function for singular strings and `_n` for plural strings, specifying the text domain 'marjahans'.

```php
// Use translation in theme
echo __('Welcome to Marjahans', 'marjahans');
echo _n('1 item', '%d items', $count, 'marjahans');
```

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

### Create React Product Filter Component (TypeScript/React)

Source: https://context7.com/hopetheory99/marjahans/llms.txt

A reusable React component for filtering products based on metal type. It uses React's useState hook to manage the selected metal and renders a dropdown selector. This component is intended to be mounted in a specific DOM element.

```typescript
// src/js/ProductFilter.tsx
import React, { useState } from "react";

export default function ProductFilter() {
  const [metal, setMetal] = useState("");

  return (
    <div className="my-4" id="product-filter">
      <label className="mr-2">Metal:</label>
      <select
        value={metal}
        onChange={(e) => setMetal(e.target.value)}
        className="border p-1"
      >
        <option value="">Any</option>
        <option value="gold">Gold</option>
        <option value="silver">Silver</option>
      </select>
    </div>
  );
}
```

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

### PHP Code Standards Check Commands

Source: https://context7.com/hopetheory99/marjahans/llms.txt

Bash commands for checking and fixing code standard violations using PHP_CodeSniffer (PHPCS) and PHP Code Beautifier (PHPCBF). These commands enforce WordPress coding standards.

```bash
# Check code standards
composer lint

# Check specific directory
./vendor/bin/phpcs --standard=WordPress wp-content/plugins/marjahans-gateway

# Auto-fix issues
./vendor/bin/phpcbf --standard=WordPress wp-content/themes/marjahans
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.