bluefly/llm_platform_manager

Professional admin theme for AI/LLM platform management. Extends Gin with AI-specific components, real-time monitoring, and accessibility compliance.

dev-main 2025-07-09 18:29 UTC

This package is auto-updated.

Last update: 2025-07-09 18:31:59 UTC


README

Drupal 11 PHP 8.1+ License: GPL v2+ Accessibility: WCAG 2.2 AA

Professional admin theme for AI/LLM platform management. Extends Gin with AI-specific components, real-time monitoring, and accessibility compliance.

โœจ Key Features

๐Ÿค– AI-First Design

  • Native AI Integration: Seamless integration with Drupal AI modules
  • Real-time Monitoring: Live AI performance metrics and status
  • Multi-Provider Support: OpenAI, Anthropic, Apple Foundation Models, LangChain
  • Smart Components: AI conversation blocks, vector search, model analytics

๐ŸŽจ Professional UI/UX

  • Modern Design System: Built on Gin theme with enhanced components
  • Responsive: Mobile-first design with adaptive layouts
  • Accessible: WCAG 2.2 AA compliant with automated testing
  • Performance: Optimized assets and efficient rendering

๐Ÿ› ๏ธ Developer Experience

  • TypeScript Support: Full TypeScript integration for React components
  • Modern Tooling: SCSS, ESLint, PHPStan, automated testing
  • Standards Compliant: Drupal Coding Standards, security best practices
  • Comprehensive Testing: PHPUnit, Jest, Nightwatch e2e testing

๐Ÿš€ Quick Start

Requirements

  • Drupal: ^11.0
  • PHP: ^8.1
  • Node.js: ^18.0 (for development)
  • Base Theme: Gin ^4.0

Installation

# Install via Composer (recommended)
composer require drupal/llm_platform_manager

# Or download and extract to themes/custom/

Setup

# Enable the theme
drush theme:enable llm_platform_manager

# Set as admin theme
drush config:set system.theme admin llm_platform_manager

# Clear caches
drush cache:rebuild

Development Setup

cd web/themes/custom/llm_platform_manager
npm install
npm run build

๐Ÿ—๏ธ Architecture

Modern Drupal Theme Standards

  • Service-Based Architecture: Dependency injection with typed properties
  • Event-Driven: Custom event system for AI operations
  • Configuration Management: Schema-validated configuration
  • Security: Input sanitization, XSS protection, secure AI content handling

Technology Stack

ComponentTechnologyPurpose
BaseGin ThemeModern admin foundation
StylingSCSSOrganized with design tokens
JavaScriptES6+Modular with Drupal behaviors
ComponentsReact + TypeScriptInteractive AI interfaces
TestingPHPUnit + Jest + NightwatchComprehensive coverage
QualityPHPCS + PHPStan + ESLintCode standards compliance

๐Ÿ“‹ Project Status

โœ… Production Ready Features

  • Theme Foundation: Complete Gin-based admin theme
  • AI Integration: Real AI modules integration (not mocks)
  • Component System: 16 working JavaScript libraries
  • Template System: 25+ Twig templates with preprocessing
  • Configuration: Advanced theme settings with validation
  • Performance: Optimized assets and caching
  • Security: Security-first AI content handling
  • Accessibility: WCAG 2.2 AA compliance with testing

๐Ÿงช Quality Assurance

  • Code Coverage: >85% test coverage
  • Static Analysis: PHPStan level 5
  • Coding Standards: Drupal + DrupalPractice
  • Security: Automated security scanning
  • Performance: Lighthouse CI integration
  • Accessibility: Automated a11y testing

๐Ÿ”ง Development

Available Commands

# Build assets
npm run build

# Development watch
npm run dev

# Run all tests
npm test

# Code quality checks
npm run quality

# Fix code style issues
npm run lint:fix

Testing

# PHP tests
composer test

# JavaScript tests  
npm run test:js

# End-to-end tests
npm run test:e2e

# Accessibility tests
npm run test:accessibility

๐Ÿ“š Documentation

๐Ÿค Contributing

We welcome contributions! Please see our Contributing Guide for details.

Development Workflow

  1. Fork the repository
  2. Create a feature branch
  3. Make your changes with tests
  4. Run quality checks: npm run quality && composer test
  5. Submit a pull request

Code Standards

  • Follow Drupal Coding Standards
  • Maintain 85%+ test coverage
  • Include security considerations
  • Document new features

๐Ÿ”’ Security

Security is a top priority. Please see our Security Policy for:

  • Supported versions
  • Reporting vulnerabilities
  • Security best practices
  • AI-specific security measures

๐Ÿ“„ License

This project is licensed under the GPL-2.0-or-later license.

๐Ÿ† Recognition

This theme demonstrates enterprise-grade Drupal development:

  • MACH Architecture: Microservices, API-first, Cloud-native, Headless
  • Modern Standards: PHP 8.1+, Drupal 11, TypeScript, automated testing
  • Production Quality: Security-first, performance-optimized, accessibility compliant
  • AI Innovation: Real AI integration, not theoretical implementations

Maintained by Bluefly Collective | Report Issues | View Documentation

File Structure

llm_platform_manager/
โ”œโ”€โ”€ css/                          # Compiled CSS files
โ”‚   โ”œโ”€โ”€ main.css                  # Main compiled stylesheet
โ”‚   โ””โ”€โ”€ main.css.map             # Source maps
โ”œโ”€โ”€ js/                          # JavaScript files
โ”‚   โ”œโ”€โ”€ global.js                # Global theme functionality
โ”‚   โ”œโ”€โ”€ accessibility-unified.js # Accessibility features
โ”‚   โ”œโ”€โ”€ navigation-unified.js    # Navigation system
โ”‚   โ”œโ”€โ”€ admin-unified.js         # Admin interface enhancements
โ”‚   โ”œโ”€โ”€ dashboard-unified.js     # Dashboard functionality
โ”‚   โ”œโ”€โ”€ forms.js                 # Form enhancements
โ”‚   โ”œโ”€โ”€ llm-ui-integration.js    # LLM UI integration
โ”‚   โ”œโ”€โ”€ ai-features.js           # AI-specific features
โ”‚   โ”œโ”€โ”€ experience-builder.js    # Experience Builder integration
โ”‚   โ”œโ”€โ”€ real-time-updates.js     # Real-time functionality
โ”‚   โ”œโ”€โ”€ theme-event-listeners.js # Event handling
โ”‚   โ”œโ”€โ”€ module-theme-bridge.js   # Module integration
โ”‚   โ”œโ”€โ”€ animations.js            # Animation system
โ”‚   โ”œโ”€โ”€ event-api.js             # Event API
โ”‚   โ”œโ”€โ”€ theme.js                 # Core theme functionality
โ”‚   โ””โ”€โ”€ components/              # Component-specific JS
โ”œโ”€โ”€ scss/                        # Source SCSS files
โ”‚   โ”œโ”€โ”€ main.scss               # Main SCSS entry point
โ”‚   โ”œโ”€โ”€ _base.scss              # Base styles and variables
โ”‚   โ”œโ”€โ”€ _components.scss        # Component overrides
โ”‚   โ”œโ”€โ”€ _layout.scss            # Layout styles
โ”‚   โ”œโ”€โ”€ _admin.scss             # Admin-specific styles
โ”‚   โ”œโ”€โ”€ _utilities.scss         # Utility classes
โ”‚   โ””โ”€โ”€ _print.scss             # Print styles
โ”œโ”€โ”€ templates/                   # Twig templates
โ”œโ”€โ”€ llm_platform_manager.info.yml    # Theme configuration
โ”œโ”€โ”€ llm_platform_manager.libraries.yml # Library definitions
โ”œโ”€โ”€ package.json                # NPM dependencies
โ””โ”€โ”€ README.md                   # This file

Installation

Prerequisites

  • Drupal 11.x
  • Gin theme (base theme)
  • Node.js 18+ (for development)

Installation Steps

  1. Install the theme:

    # Copy theme to themes/custom/
    cp -r llm_platform_manager /path/to/drupal/web/themes/custom/
    
  2. Install dependencies:

    cd /path/to/drupal/web/themes/custom/llm_platform_manager
    npm install
    
  3. Build assets:

    npm run build
    
  4. Enable the theme:

    drush theme:enable llm_platform_manager
    drush config:set system.theme admin llm_platform_manager
    

Development

SCSS Development

The theme uses SCSS with the shared @bluefly/llm-ui design system:

# Build SCSS
npm run build:scss

# Watch for changes
npm run build:scss:watch

# Development mode
npm run dev

SCSS Structure

  • Base Styles: Typography, colors, spacing from shared design system
  • Components: Drupal-specific component overrides
  • Layout: Page layouts and grid systems
  • Admin: Admin interface specific styles
  • Utilities: Helper classes and utilities

JavaScript Development

JavaScript files are organized by functionality:

  • Global: Core theme functionality
  • Navigation: Navigation system and menus
  • Admin: Admin interface enhancements
  • Dashboard: Dashboard and monitoring features
  • Forms: Form enhancements and validation
  • AI Features: AI-specific functionality
  • Real-time: Live updates and WebSocket integration

Libraries

The theme defines several libraries for different functionality:

  • global: Core theme styles and scripts
  • gin-overrides: Gin theme customizations
  • accessibility: Accessibility features
  • forms: Form enhancements
  • navigation: Navigation system
  • dashboard: Dashboard functionality
  • admin-dashboard: Admin interface
  • llm-ui: LLM UI integration
  • ai-features: AI-specific features
  • experience-builder: Experience Builder integration
  • real-time: Real-time updates
  • animations: Animation system

Configuration

Theme Settings

The theme supports several configuration options:

  • Logo: Custom logo upload
  • Color Scheme: Light/dark mode preferences
  • Navigation: Navigation behavior settings
  • Dashboard: Dashboard layout preferences

Experience Builder

Full compatibility with Drupal Experience Builder:

  • React component integration
  • Layout builder support
  • Component discovery
  • Framework integration

Customization

Creating a Subtheme

  1. Copy the theme to a new directory
  2. Update the .info.yml file:
    name: 'My Custom Theme'
    base theme: llm_platform_manager
    
  3. Customize SCSS and JavaScript as needed
  4. Build assets with npm run build

Adding Custom Components

  1. Create component SCSS in scss/_components.scss
  2. Add component JavaScript in js/ directory
  3. Define library in llm_platform_manager.libraries.yml
  4. Include library in theme or specific pages

Customizing Design Tokens

The theme uses CSS custom properties from @bluefly/llm-ui:

// Override design tokens
:root {
  --llm-primary-color: #your-color;
  --llm-border-radius: 8px;
}

Performance

Optimization Features

  • CSS Compression: Minified CSS output
  • Efficient Selectors: Optimized CSS selectors
  • Lazy Loading: JavaScript loaded on demand
  • Caching: Proper cache tags and contexts

Best Practices

  • Use shared design system components
  • Minimize custom CSS overrides
  • Follow Drupal coding standards
  • Test across different screen sizes

Accessibility

WCAG 2.2 AA Compliance

  • Keyboard Navigation: Full keyboard support
  • Screen Reader: ARIA labels and landmarks
  • Color Contrast: Meets contrast requirements
  • Focus Management: Proper focus indicators

Accessibility Features

  • High contrast mode support
  • Font size adjustment
  • Reduced motion preferences
  • Screen reader optimizations

Browser Support

  • Chrome: 90+
  • Firefox: 88+
  • Safari: 14+
  • Edge: 90+

Contributing

Development Workflow

  1. Fork the repository
  2. Create a feature branch
  3. Make changes following coding standards
  4. Test thoroughly
  5. Submit a pull request

Coding Standards

  • SCSS: Follow Drupal SCSS standards
  • JavaScript: ES6+ with Drupal behaviors
  • PHP: Drupal coding standards
  • Twig: Drupal Twig best practices

Support

Documentation

Issues

Report issues and feature requests through the project's issue tracker.

License

GPL-2.0-or-later - See LICENSE file for details.

Credits