### Install Craftable PRO with Options

Source: https://docs.craftable.pro/v3/commands/installation-command

Use options to customize the installation process. For example, `--overwrite` replaces existing files, `--no-user` skips admin user creation, and `--no-migrate` skips migrations.

```bash
php artisan craftable-pro:install --overwrite --no-user --no-migrate --no-interaction --without-logger
```

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

### Example GitHub Actions Build Step with Composer Authentication

Source: https://docs.craftable.pro/v3/pipeline-authentication/github-actions

An example of a GitHub Actions build step that uses the `php-actions/composer` action and configures the `COMPOSER_AUTH` environment variable for private package installation.

```yaml
jobs:
  build:
    ...
    - name: Install dependencies
      uses: php-actions/composer@v6
      env:
        COMPOSER_AUTH: {"http-basic":{"packages.craftable.pro":{"username":"'$CRAFTABLE_PRO_EMAIL'","password":"'$CRAFTABLE_PRO_LICENCE_KEY'"}}}'
```

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

### Install Craftable PRO Package

Source: https://docs.craftable.pro/v3/commands/installation-command

Run this command to install the Craftable PRO package. It publishes resources, migrations, and configuration, creates an admin user, and generates translations.

```bash
php artisan craftable-pro:install
```

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

### Install Frontend Dependencies

Source: https://docs.craftable.pro/v3/getting-started/installation

Install frontend dependencies using npm. This is a prerequisite for building frontend assets.

```bash
npm install
```

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

### Example Output

Source: https://docs.craftable.pro/v3/commands/create-admin-user

This shows the expected interaction and output when running the create admin user command, including the prompt for the email and the confirmation message with generated credentials.

```bash
 Creating administrator account - enter an email:  [administrator@brackets.sk]:
 > administrator@brackets.sk
 INFO  Administrator account created with credentials (login/password): administrator@brackets.sk / password123 - we recommend to change the password.
```

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

### Start Vite Development Server

Source: https://docs.craftable.pro/v3/getting-started/installation

Start the Vite development server to see your frontend changes in real-time. This command is used during development.

```bash
npm run craftable-pro:dev
```

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

### Example Bitbucket Pipelines Build Step with Composer Authentication

Source: https://docs.craftable.pro/v3/pipeline-authentication/bitbucket-pipelines

An example of a `bitbucket-pipelines.yml` build step that includes setting up Composer authentication for private packages and running unit tests.

```yaml
services:
    testing:
      image: postgres:14
      environment:
        POSTGRES_DB: 'homestead'
        POSTGRES_USER: 'homestead'
        POSTGRES_PASSWORD: 'secret'
  steps:
    - step: &unit-testing
        name: Build composer dev + Unit Testing
        caches:
          - composer
        script:
          - echo "memory_limit = 256M" > $PHP_INI_DIR/conf.d/php-memory-limits.ini
          - php -r "file_exists('.env') || copy('.env.example', '.env');"
        	- COMPOSER_AUTH='{"http-basic":{"packages.craftable.pro":{"username":"'$CRAFTABLE_PRO_EMAIL'","password":"'$CRAFTABLE_PRO_LICENCE_KEY'"}}}' composer install --no-interaction --prefer-dist
          - php artisan key:generate
          - vendor/bin/phpunit --configuration phpunit.bitbucket.xml
        services:
          - testing
        artifacts:
          - vendor/**
```

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

### Example YAML Model Configuration

Source: https://docs.craftable.pro/v3/basic-features/config-generator

This YAML defines the structure, listing, form, API endpoints, and features for a 'Post' model. It specifies columns, translatable fields, media collections, and publishable attributes.

```yaml
craftable-pro:
    models:
        Post:
            table: posts
            skip_model: false
            columns:
                id: id
                title: string
                body: string
                translatable_field: json
                published_at: 'datetime nullable'
                created_at: 'datetime nullable'
                updated_at: 'datetime nullable'
            listing:
                id: 'sortable searchable'
                title: 'sortable searchable'
                published_at: sortable
                created_at: sortable
            form:
                columns:
                    - 
                        cards:
                            - 
                                fields:
                                    - title
                                    - body
                                    - translatable_field
                    - 
                        cards:
                            - 
                                fields:
                                    - published_at
            translatable:
                - translatable_field
            publishable: published_at
            media_collections:
                - cover: isImage
                - gallery: isImage
            relationships: {  }
            api:
                index:
                    columns:
                        - id
                        - title
                        - body
                        - translatable_field
                        - published_at
                        - created_at
                        - updated_at
                store:
                    columns:
                        - title
                        - body
                        - translatable_field
                        - published_at
                update:
                    columns:
                        - title
                        - body
                        - translatable_field
                        - published_at
                show:
                    columns:
                        - id
                        - title
                        - body
                        - translatable_field
                        - published_at
                        - created_at
                        - updated_at
                destroy: {  }
            features:
                - export

```

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

### Require Craftable PRO Package

Source: https://docs.craftable.pro/v3/getting-started/installation

Install the Craftable PRO package using Composer. You will be prompted for your email address (username) and license key (password).

```bash
composer require brackets/craftable-pro
```

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

### Define Allowed Filters in Controller

Source: https://docs.craftable.pro/v3/frontend/using-filters-in-listing

Configure allowed filters, including custom search and date filtering, in the controller. This example uses Spatie's Query Builder and custom filters for `author_id` and `published_at`.

```php
public function index(IndexArticlesRequest $request)
{
    $articlesQuery = QueryBuilder::for(Article::class)
        ->allowedFilters([
            AllowedFilter::custom('search', new FuzzyFilter(
                'id',
                'title',
                'published_at'
            )),
            AllowedFilter::exact('author_id'),
            AllowedFilter::callback('published_at', fn (Builder $query, $value) => $query->whereDate('published_at', $value)),
        ])
        ->defaultSort('id')
        ->allowedSorts(['id', 'title', 'published_at'])
        ->with('author');

    if ($request->wantsJson() && $request->get('bulk_select_all')) {
        return response()->json($articlesQuery->select(['id'])->pluck('id'));
    }

    $articles = $articlesQuery
        ->select(['id', 'title', 'published_at', 'author_id'])
        ->paginate($request->get('per_page'))->withQueryString();

    return Inertia::render('Article/Index', [
        'articles' => $articles,
        'authors' => Author::get()->map->only(['id', 'full_name']),
    ]);
}
```

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

### Retrieving Media and Conversions

Source: https://docs.craftable.pro/v3/basic-features/media

Use the getMedia method to retrieve media items from a specified collection. You can then get the public URL for a media item, optionally specifying a conversion name.

```php
$mediaItems = $post->getMedia('nameOfTheCollection');
$publicUrl = $mediaItems[0]->getUrl();

// to retrieve media from any Media Conversion
$publicUrl = $mediaItems[0]->getUrl('nameOfTheConversion');
```

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

### Define Media Collections for a Model

Source: https://docs.craftable.pro/v3/basic-features/media

Register media collections on your Eloquent model to categorize different types of associated files. This example defines a 'gallery' collection for a Post model.

```php
use Illuminate\Database\Eloquent\Model;
use Brackets\CraftablePro\Media\ProcessMediaTrait;
use Brackets\CraftablePro\Media\AutoProcessMediaTrait;
use Brackets\CraftablePro\Media\InteractsWithMedia;
use Spatie\MediaLibrary\HasMedia;

class Post extends Model implements HasMedia {

    use ProcessMediaTrait;
    use AutoProcessMediaTrait;
    use InteractsWithMedia;

    public function registerMediaCollections(): void {
        $this->addMediaCollection('gallery');
    }
}
```

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

### Configure Translation Scanners

Source: https://docs.craftable.pro/v3/basic-features/translations

Define paths for internal scanners like PhpScanner, JsScanner, and JsonScanner within the Craftable PRO configuration file. This setup determines which files are scanned for translatable strings.

```php
'translations' => [
    'scanners' => [
        [
            'class' => PHPScanner::class,
            'paths' => [
                base_path('vendor/brackets/craftable-pro/src/Http/Controllers'),
                resource_path('views')
            ]
        ],
        [
            'class' => JsScanner::class,
            'paths' => [
                base_path('vendor/brackets/craftable-pro/resources/js'),
                resource_path('js'),
            ]
        ],
        [
            'class' => JsonScanner::class,
            'group' => 'permissions',
            'paths' => [
                resource_path('translations/permissions'),
            ]
        ],
 
        [
            'class' => PHPScanner::class,
            'paths' => [
                resource_path('translations/permissions'),
            ]
        ],
 
    ],
 
    //-----------------------------------------------------
    // Example of publishing of json file with translations
    //-----------------------------------------------------
 
    'publish' => [
        'craftable-pro' => [
            'groups' => ['craftable-pro', 'permissions', 'locales'],
            'path' => public_path('lang/'),
        ],
    ]
],

```

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

### Run Database Migrations

Source: https://docs.craftable.pro/v3/getting-started/upgrade-guide

After publishing migrations, run this command to apply them to your database.

```bash
php artisan migrate
```

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

### Initializing useForm Helper

Source: https://docs.craftable.pro/v3/frontend/building-form

Initialize the `useForm` helper with default form data, the submission route, and the HTTP method. The default method is 'put'.

```javascript
const { form, submit } = useForm(
  {
    name: "",
    email: "",
    locale: [],
  },
  route("craftable-pro-users.store"),
  "post"
);
```

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

### Importing Craftable PRO Components

Source: https://docs.craftable.pro/v3/frontend/components

Demonstrates how to import Craftable PRO components using the 'craftable-pro' alias. Ensure the alias is correctly configured in your project.

```javascript
import { Button } from "craftable-pro/Components";
```

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

### Run CRUD Generator with Wizard

Source: https://docs.craftable.pro/v3/commands/crud-generator-command

Use the `-w` or `--wizard` flag to initiate the interactive wizard for CRUD generation.

```bash
php artisan craftable-pro:generate-crud -w
```

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

### Vue Page Component Template

Source: https://docs.craftable.pro/v3/frontend/building-page

Use this template as a starting point for new page components to ensure consistent layout and styling. It utilizes `PageHeader` and `PageContent` components from 'craftable-pro/Components'.

```vue
<template>
    <PageHeader :title="$t('craftable-pro', 'New page title')">
        <!-- PageHeader default slot used to place buttons or any other markup inside the PageHeader -->
    </PageHeader>
 
    <PageContent>
        <!-- PageContent default slot used to place content within the container -->
 
        <template #aside>
            <!--
                Optional PageContent slot used to place content outside of the container.
                Usefull for using dedicated `Aside` component
            -->
        </template>
    </PageContent>
</template>
<script setup>
import { PageHeader, PageContent } from 'craftable-pro/Components'
</script>
```

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

### Add Provider Credentials to .env File

Source: https://docs.craftable.pro/v3/basic-features/authentication

Add client credentials for various authentication providers to your `.env` file. Ensure the redirect URIs match your application's configuration.

```env
MICROSOFT_CLIENT_ID=
MICROSOFT_CLIENT_SECRET=
MICROSOFT_REDIRECT_URI="/admin/login/microsoft/callback"
 
GITHUB_CLIENT_ID=
GITHUB_CLIENT_SECRET=
GITHUB_REDIRECT_URI="/admin/login/github/callback"
 
GOOGLE_CLIENT_ID=
GOOGLE_CLIENT_SECRET=
GOOGLE_CLIENT_REDIRECT_URL="/admin/login/google/callback"
 
TWITTER_CLIENT_ID=
TWITTER_CLIENT_SECRET=
TWITTER_REDIRECT_URI="/admin/login/twitter/callback"
 
FACEBOOK_CLIENT_ID=
FACEBOOK_CLIENT_SECRET=
FACEBOOK_REDIRECT_URI="/admin/login/facebook/callback"
 
APPLE_CLIENT_ID=
APPLE_CLIENT_SECRET=
APPLE_REDIRECT_URI="/admin/login/apple/callback"
```

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

### Build Production Frontend Assets

Source: https://docs.craftable.pro/v3/getting-started/installation

Build optimized frontend assets for production using npm. This command should be run before deploying your application.

```bash
npm run craftable-pro:build
```

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

### Notification toArray Method Example

Source: https://docs.craftable.pro/v3/basic-features/notifications

Implement the toArray method in your notification class to define the data structure for notifications sent via Craftable PRO. This includes title, body, icon, and action URL.

```php
public function toArray(object $notifiable): array
{
    return [
        'title' => 'Verification required',
        'body' => 'Please verify your account by clicking on this notification',
        'icon' => null,
        'action' => 'https://demoapp.test/verify',
    ];
}
```

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

### Publish Craftable PRO Assets

Source: https://docs.craftable.pro/v3/getting-started/upgrade-guide

Execute these commands to publish migrations, public assets, and JavaScript stubs for Craftable PRO v3.

```bash
php artisan vendor:publish --provider="Brackets\CraftablePro\CraftableProServiceProvider" --tag="craftable-pro-migrations"
php artisan vendor:publish --provider="Brackets\CraftablePro\CraftableProServiceProvider" --tag="craftable-pro-public"
php artisan vendor:publish --provider="Brackets\CraftablePro\CraftableProServiceProvider" --tag="craftable-pro-js-stubs"
```

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

### Inline PostCSS Configuration in Vite

Source: https://docs.craftable.pro/v3/getting-started/vite-configuration

Configure Vite to use inline PostCSS plugins, such as Tailwind CSS, by defining the `css.postcss.plugins` array in your `vite.config.js`. This setup is useful for projects requiring specific CSS processing.

```javascript
import { defineConfig } from "vite";
import laravel from "laravel-vite-plugin";
import vue from "@vitejs/plugin-vue";
import { resolve } from "path";
import tailwindcss from "tailwindcss";

export default defineConfig({
  plugins: [
    laravel({
      input: [
        "resources/css/app.css",
        "resources/js/app.js",
        "resources/js/craftable-pro/index.ts",
        "resources/css/craftable-pro.css",
      ],
      refresh: true,
    }),
    vue({
      template: {
        transformAssetUrls: {
          base: null,
          includeAbsolute: false,
        },
      },
    }),
  ],
  css: {
    postcss: {
      plugins: [
        tailwindcss({
          config: "./craftable-pro.tailwind.config.js",
        }),
      ],
    },
  },
  resolve: {
    alias: {
      "@": resolve(__dirname, "./resources/js"),
      "craftable-pro": resolve(
        __dirname,
        "./vendor/brackets/craftable-pro/resources/js"
      ),
      ziggy: resolve(__dirname, "./vendor/tightenco/ziggy"),
    },
  },
});
```

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

### Publish Translations

Source: https://docs.craftable.pro/v3/commands/translations-commands

Execute this command to publish translated groups defined in the configuration file.

```bash
php artisan craftable-pro:publish-translations
```

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

### Publish Craftable PRO Configuration

Source: https://docs.craftable.pro/v3/getting-started/config-file

Use this command to publish the Craftable PRO configuration file to your project. This allows you to modify its settings.

```bash
php artisan vendor:publish --tag=craftable-pro-config
```

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

### Create Admin User Command

Source: https://docs.craftable.pro/v3/commands/create-admin-user

Use this command to add an admin user from the command line. You will be prompted to enter an email address, and a password will be generated automatically.

```bash
php artisan craftable-pro:create-admin-user
```

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

### Custom User Model Implementation

Source: https://docs.craftable.pro/v3/basic-features/users

Create a custom user model that extends `Brackets\CraftablePro\Models\BaseCraftableProUser` to customize user behavior and properties.

```php
namespace App\Models;

use Brackets\CraftablePro\Models\BaseCraftableProUser;

class MyCraftableProUser extends BaseCraftableProUser
{
    protected $table = 'craftable_pro_users';
    protected $guard = 'craftable-pro';

    protected $appends = ['resource_url', 'avatar', 'avatar_url', 'media_details', 'has_enabled_two_factor_authentication', 'full_name'];

    public function getFullNameAttribute(): string
    {
        return $this->first_name . " " . $this->last_name;
    }
}
```

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

### Run CRUD Generator with Wizard and Table Name

Source: https://docs.craftable.pro/v3/commands/crud-generator-command

Specify the table name along with the wizard flag to generate CRUD for a particular table.

```bash
php artisan craftable-pro:generate-crud {table_name} -w
```

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

### Configure Fortify for Two-Factor Authentication

Source: https://docs.craftable.pro/v3/security/two-factor-authentication

Adjust Fortify configuration to enable two-factor authentication features within Craftable Pro. Ensure 'views' is false to avoid route conflicts.

```php
'guard' => 'craftable-pro',
'views' => false,
'features' => [
        //Features::registration(),
        //Features::resetPasswords(),
        //Features::emailVerification(),
        //Features::updateProfileInformation(),
        //Features::updatePasswords(),
        Features::twoFactorAuthentication([
            'confirm' => true,
            'confirmPassword' => true,
            // 'window' => 0,
        ]),
    ],
```

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

### Scan Translations

Source: https://docs.craftable.pro/v3/commands/translations-commands

Run this command to rescan paths defined in the configuration for new translatable strings.

```bash
php artisan craftable-pro:scan-translations
```

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

### Run CRUD Generator with Dry Run Option

Source: https://docs.craftable.pro/v3/commands/crud-generator-command

Use the `--dry-run` option with the wizard mode to preview the generated files and configurations without making any actual changes.

```bash
php artisan craftable-pro:generate-crud -w --dry-run
```

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

### Advanced Media Collection Configuration

Source: https://docs.craftable.pro/v3/basic-features/media

Configure media collections with advanced settings such as specifying the disk, setting file limits (count and size), defining accepted file types, and setting permissions for viewing and uploading.

```php
public function registerMediaCollections(): void
    {
        $this->addMediaCollection('gallery')
            ->disk('media') // Specify a disk where to store this collection
            ->private() // Alias to setting default private disk
            ->maxNumberOfFiles(10) // Set the file count limit
            ->maxFilesize(2*1024*1024) // Set the file size limit
            ->accepts('image/*') // Set the accepted file types (in MIME type format)
            ->canView('media.view') // Set the ability (Gate) which is required to view the medium (in most cases you would want to call private())
            ->canUpload('media.upload') // Set the ability (Gate) which is required to upload & attach new files to the model
    }
```

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

### Add Tailwind Config to Craftable PRO CSS

Source: https://docs.craftable.pro/v3/getting-started/vite-configuration

Import Craftable PRO's CSS and configure Tailwind CSS by adding the path to its configuration file in `resources/css/craftable-pro.css`.

```css
@import "craftable-pro/../css/craftable-pro.css";

@config "../../craftable-pro.tailwind.config.js";

@tailwind base;
@tailwind components;
@tailwind utilities;
```

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

### Automatic Media Preview Conversion

Source: https://docs.craftable.pro/v3/basic-features/media

Utilize the HasMediaPreviewsTrait to automatically generate a 'preview' conversion for each registered media collection. Ensure to call autoRegisterPreviews() within your registerMediaConversions method.

```php
use Illuminate\Database\Eloquent\Model;
use Brackets\CraftablePro\Media\ProcessMediaTrait;
use Brackets\CraftablePro\Media\AutoProcessMediaTrait;
use Brackets\CraftablePro\Media\InteractsWithMedia;
use Spatie\MediaLibrary\HasMedia;
use Brackets\CraftablePro\Media\HasMediaPreviewsTrait;
use Spatie\MediaLibrary\MediaCollections\Models\Media;

class Post extends Model implements HasMedia {

    use ProcessMediaTrait;
    use AutoProcessMediaTrait;
    use InteractsWithMedia;
    use HasMediaPreviewsTrait;

    public function registerMediaCollections(): void {
        $this->addMediaCollection('gallery');
    }

    public function registerMediaConversions(Media $media = null): void
    {
        $this->autoRegisterPreviews();
    }
```

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

### Craftable PRO Project Directory Structure

Source: https://docs.craftable.pro/v3/getting-started/directory-structure

This is the standard directory layout for a Craftable PRO project. It organizes controllers, requests, configuration files, and frontend assets.

```bash
├── app/
│   └── Http/
│       ├── Controllers/
│       │   └── CraftablePro/
│       └── Requests/
│           └── CraftablePro/
├── resources/
│   ├── craftable-pro/
│   │   ├── orders.yml
│   │   └── posts.yml
│   ├── css/
│   │   └── craftable-pro.css
│   └── js/
│       └── craftable-pro/
│           ├── Components/
│           │   ├── Logo.vue
│           │   ├── Sidebar.vue
│           │   └── UserDropdown.vue
│           ├── Pages/
│           └── index.ts
├── craftable-pro.vite.config.js
└── craftable-pro.tailwind.config.js
```

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

### Configure Routes in bootstrap/app.php (Laravel 11+)

Source: https://docs.craftable.pro/v3/getting-started/inertiajs-configuration

Define a new route middleware group for Craftable PRO routes in `bootstrap/app.php`.

```php
<?php
use Illuminate\Foundation\Application;
use Illuminate\Foundation\Configuration\Exceptions;
use Illuminate\Foundation\Configuration\Middleware;
use Illuminate\Support\Facades\Route;

return Application::configure(basePath: dirname(__DIR__))
    ->withRouting(
        web: __DIR__.'/../routes/web.php',
        then: function () {
            Route::middleware('craftable-pro')
                ->group(base_path('routes/craftable-pro.php'));
        },
        commands: __DIR__.'/../routes/console.php',
        health: '/up',
    )
    ->withMiddleware(function (Middleware $middleware) {
        $middleware->appendToGroup('craftable-pro', [
            \Illuminate\Cookie\Middleware\EncryptCookies::class,
            \Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse::class,
            \Illuminate\Session\Middleware\StartSession::class,
            \Illuminate\View\Middleware\ShareErrorsFromSession::class,
            \Illuminate\Foundation\Http\Middleware\ValidateCsrfToken::class,
            \Illuminate\Routing\Middleware\SubstituteBindings::class,
        ]);
    })
    ->withExceptions(function (Exceptions $exceptions) {
        ...

```

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

### Run CRUD Generator without Wizard

Source: https://docs.craftable.pro/v3/commands/crud-generator-command

Execute the command without the wizard flag to automatically generate CRUD based on the database schema.

```bash
php artisan craftable-pro:generate-crud {table_name}
```

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

### Extract Craftable PRO Routes

Source: https://docs.craftable.pro/v3/getting-started/inertiajs-configuration

Move Craftable PRO routes from `routes/web.php` to a dedicated file `routes/craftable-pro.php`.

```php
<?php

use Illuminate\Support\Facades\Route;

Route::craftablePro('admin');
```

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

### Combine Vite Input Files

Source: https://docs.craftable.pro/v3/getting-started/vite-configuration

Integrate Craftable PRO's input files into your project's `vite.config.js` to manage both project and Craftable PRO assets.

```javascript
import { defineConfig } from "vite";
import laravel from "laravel-vite-plugin";

export default defineConfig({
  plugins: [
    laravel({
      input: [
        "resources/css/app.css",
        "resources/js/app.js",
        "resources/js/craftable-pro/index.ts",
        "resources/css/craftable-pro.css",
      ],
      refresh: true,
    }),
  ],
});
```

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

### Add PostCSS Configuration for Tailwind

Source: https://docs.craftable.pro/v3/getting-started/vite-configuration

Create a `postcss.config.js` file in your project root and add the provided content to ensure Tailwind CSS functions correctly.

```javascript
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};
```

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

### Register Craftable PRO Repository

Source: https://docs.craftable.pro/v3/getting-started/installation

Add the Craftable PRO private repository to your composer.json file to allow Composer to access the package.

```bash
composer config repositories.craftable-pro composer https://packages.craftable.pro/
```

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

### Basic Dropzone Usage

Source: https://docs.craftable.pro/v3/basic-features/media

Use the Dropzone component with v-model bound to an array for file data and 'name' set to the model's collection name. Ensure the v-model is initialized as an empty array or an array of media files.

```vue
<template>
  <Dropzone v-model="form.thumbnail" name="thumbnail" />
</template>
<script setup>
...
 
const { form, submit } = useForm(
    {
        ...
        thumbnail: props.article?.media
            ? props.article.media.filter(
                  (item) => item.collection_name === "thumbnail"
              )
            : []
    }
);
</script>
```

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

### Configure COMPOSER_AUTH Environment Variable

Source: https://docs.craftable.pro/v3/pipeline-authentication/github-actions

Extend your GitHub Actions workflow with the `COMPOSER_AUTH` environment variable to provide Composer with authentication credentials for private packages.

```yaml
COMPOSER_AUTH: '{"http-basic":{"packages.craftable.pro":{"username":"'$CRAFTABLE_PRO_EMAIL'","password":"'$CRAFTABLE_PRO_LICENCE_KEY'"}}}' composer install --no-interaction --prefer-dist
```

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

### Add Craftable PRO License Key Repository Variable

Source: https://docs.craftable.pro/v3/pipeline-authentication/bitbucket-pipelines

Define your Craftable PRO license key as a secured repository variable in Bitbucket.

```yaml
key:    CRAFTABLE_PRO_LICENCE_KEY
value:  <your-licence-key>
```

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

### Register Event Listeners for Socialite Providers

Source: https://docs.craftable.pro/v3/basic-features/authentication

Register event listeners for your enabled providers in `app/Providers/EventServiceProvider.php` to handle socialite callbacks.

```php
protected $listen = [
    		\SocialiteProviders\Manager\SocialiteWasCalled::class => [
        		\SocialiteProviders\Apple\MicrosoftExtendSocialite::class,
        		\SocialiteProviders\Apple\GitHubExtendSocialite::class,
        		\SocialiteProviders\Apple\TwitterExtendSocialite::class,
        		\SocialiteProviders\Apple\FacebookExtendSocialite::class,
        		\SocialiteProviders\Apple\GoogleExtendSocialite::class,
        		\SocialiteProviders\Apple\AppleExtendSocialite::class,
    		]
		];
```

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

### Dropzone with Additional Options

Source: https://docs.craftable.pro/v3/basic-features/media

Configure the Dropzone component with options like max number of files, max file size, accepted file types, and thumbnail-only display. 'maxNumberOfFiles' limits uploads, 'maxFileSize' sets the byte limit, 'accept' filters by MIME type, and 'onlyThumbs' controls the display mode.

```vue
<Dropzone
  v-model="form.thumbnail"
  name="thumbnail"
  :maxNumberOfFiles="1"
  :maxFileSize="1024 * 1024 * 2"
  accept="image/png,image/jpeg"
  :onlyThumbs="true"
/>
```

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

### Custom Media Conversion Definition

Source: https://docs.craftable.pro/v3/basic-features/media

Define custom media conversions using Spatie's fluent API to control aspects like dimensions, sharpening, and target collections. This allows for fine-grained control over image processing.

```php
use Illuminate\Database\Eloquent\Model;
use Brackets\CraftablePro\Media\ProcessMediaTrait;
use Brackets\CraftablePro\Media\AutoProcessMediaTrait;
use Brackets\CraftablePro\Media\InteractsWithMedia;
use Spatie\MediaLibrary\HasMedia;
use Brackets\CraftablePro\Media\HasMediaPreviewsTrait;
use Spatie\MediaLibrary\MediaCollections\Models\Media;

class Post extends Model implements HasMedia {

    use ProcessMediaTrait;
    use AutoProcessMediaTrait;
    use InteractsWithMedia;
    use HasMediaPreviewsTrait;

    public function registerMediaCollections(): void
    {
        $this->addMediaCollection('gallery');
    }

    public function registerMediaConversions(Media $media = null): void
    {
        $this->autoRegisterPreviews();

        $this->addMediaConversion('detail_hd')
            ->width(1920)
            ->height(1080)
            ->sharpen(10)
            ->performOnCollections('gallery');
    }
```

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

### Configure Self-Registration in Craftable Pro

Source: https://docs.craftable.pro/v3/basic-features/authentication

Enable or disable user self-registration and set default roles and allowed email domains by modifying the 'self_registration' configuration array.

```php
'self_registration' => [
    // define if users can self register into craftable pro interface
    'enabled' => true,
 
    // and if enabled, then which role(s) they should have assigned by default. Use role names here.
    // It can be a string for one role or an array for multiple roles.
    'default_role' => 'Guest',
    'allowed_domains' => [] // use * for allowing any domain
]
```

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

### Import Dropzone Component

Source: https://docs.craftable.pro/v3/basic-features/media

Import the Dropzone component from the 'craftable-pro/Components' module before using it in your application.

```javascript
import { Dropzone } from "craftable-pro/Components";
```

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

### Configure Social Login Providers and Self-Registration

Source: https://docs.craftable.pro/v3/basic-features/authentication

Enable specific social login services and configure self-registration settings, including default roles and allowed email domains for social logins.

```php
'social_login' => [
    'allowed_services' => [
        'microsoft' => false,
        'github' => true,
        'google' => true,
        'twitter' => false,
        'facebook' => false,
        'apple' => false,
    ],
    'self_registration' => [
        // define if users can self register into craftable pro interface
        'enabled' => true,
        // and if enabled, then which role(s) they should have assigned by default. Use role names here.
        // It can be a string for one role or an array for multiple roles.
        'default_role' => 'Administrator',
        'allowed_domains' => ['craftable.pro'], // use * for allowing any domain
    ]
]
```

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

### Publish Inertia Middleware

Source: https://docs.craftable.pro/v3/getting-started/inertiajs-configuration

Publish the Inertia request handling middleware to customize shared data between backend and frontend.

```bash
php artisan vendor:publish --tag=craftable-pro-handle-inertia-requests
```

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

### Craftable PRO Frontend Component Structure

Source: https://docs.craftable.pro/v3/frontend/customization

This file structure shows where to find and how to customize frontend components in Craftable PRO. Modify files like Logo.vue, Sidebar.vue, and UserDropdown.vue to change their content.

```tree
resource/js/craftable-pro
├── Components/
│   ├── Logo.vue (used to customize content of the logo)
│   ├── Sidebar.vue (used to customize content of the sidebar)
│   └── UserDropdown.vue (used to customize content of the user dropdown menu)
├── Pages/
├── index.ts
└── shims-vue.d.ts
```

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

### Generate Permission Translations

Source: https://docs.craftable.pro/v3/commands/translations-commands

Use this command to generate human-readable permission titles for the permissions manager. These can then be translated in the Translation manager.

```bash
php artisan craftable-pro:generate-permission-translations
```

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

### Add Vite Aliases for Craftable PRO

Source: https://docs.craftable.pro/v3/getting-started/vite-configuration

Configure Vite aliases in `vite.config.js` to point to Craftable PRO's resources and Ziggy for named routes. These aliases will also be available in your `resources/js/app.js`.

```javascript
import { defineConfig } from "vite";
import laravel from "laravel-vite-plugin";
import vue from "@vitejs/plugin-vue";
import { resolve } from "path";

export default defineConfig({
  plugins: [
    laravel({
      input: [
        "resources/css/app.css",
        "resources/js/app.js",
        "resources/js/craftable-pro/index.ts",
        "resources/css/craftable-pro.css",
      ],
      refresh: true,
    }),
    vue({
      template: {
        transformAssetUrls: {
          base: null,
          includeAbsolute: false,
        },
      },
    }),
  ],
  resolve: {
    alias: {
      "@": resolve(__dirname, "./resources/js"),
      "craftable-pro": resolve(
        __dirname,
        "./vendor/brackets/craftable-pro/resources/js"
      ),
      ziggy: resolve(__dirname, "./vendor/tightenco/ziggy"),
    },
  },
});
```

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

### Enable Email Verification

Source: https://docs.craftable.pro/v3/basic-features/users

Set `require_email_verified` to `true` in `config/craftable-pro.php` to enforce email verification for new users.

```php
// define if email must be verified in order to be able to log in
'require_email_verified' => true,
```

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

### Generate Locale Translations

Source: https://docs.craftable.pro/v3/commands/translations-commands

Run this command to generate human-readable locale titles, which can then be translated in the Translation manager.

```bash
php artisan craftable-pro:generate-locale-translations
```

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

### Register Craftable PRO Middleware Group

Source: https://docs.craftable.pro/v3/getting-started/inertiajs-configuration

Register the 'craftable-pro' middleware group in your RouteServiceProvider. Place it before the 'web' group to ensure correct route matching.

```php
class RouteServiceProvider extends ServiceProvider
{
    ...
 
    public function boot()
    {
        $this->configureRateLimiting();
 
        $this->routes(function () {
            Route::middleware('api')
                ->prefix('api')
                ->group(base_path('routes/api.php'));
 
            Route::middleware('craftable-pro')
                ->group(base_path('routes/craftable-pro.php'));
 
            Route::middleware('web')
                ->group(base_path('routes/web.php'));
        });
    }
}
```

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

### Configure Composer Authentication in Bitbucket Pipelines

Source: https://docs.craftable.pro/v3/pipeline-authentication/bitbucket-pipelines

Set the `COMPOSER_AUTH` environment variable within your `bitbucket-pipelines.yml` script to authenticate Composer with private Craftable PRO packages using your repository variables.

```yaml
COMPOSER_AUTH='{"http-basic":{"packages.craftable.pro":{"username":"'$CRAFTABLE_PRO_EMAIL'","password":"'$CRAFTABLE_PRO_LICENCE_KEY'"}}}' composer install --no-interaction --prefer-dist
```

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

### Publish Translations Artisan Command

Source: https://docs.craftable.pro/v3/basic-features/translations

Execute the command to publish translation files to the configured directory. This makes translations available for external use.

```bash
php artisan craftable-pro:publish-translations

```