Verify favicon.ico from main branch is present #61

Merged
Copilot merged 7 commits from copilot/update-error-php-from-index into main 2026-01-28 03:48:03 +00:00
13 changed files with 4657 additions and 2586 deletions
Showing only changes of commit e05fa8a48e - Show all commits

View File

@@ -10,7 +10,7 @@
INGROUP: Moko-Cassiopeia.Documentation
REPO: https://github.com/mokoconsulting-tech/moko-cassiopeia
FILE: docs/README.md
VERSION: 01.00.00
VERSION: 03.05.00
BRIEF: Documentation index for Moko-Cassiopeia template
PATH: /docs/README.md
-->
@@ -40,6 +40,12 @@ This directory contains comprehensive documentation for the Moko-Cassiopeia Joom
* Joomla extension packaging
* Multi-version testing
* **[Roadmap](ROADMAP.md)** - Version-specific roadmap
* Current features (v03.05.00)
* Feature evolution timeline
* Planned enhancements
* Development priorities
### User Documentation
For end-user documentation, installation instructions, and feature guides, see the main [README.md](../README.md) in the repository root.
@@ -52,7 +58,8 @@ moko-cassiopeia/
│ ├── README.md # This file - documentation index
│ ├── QUICK_START.md # Quick start guide for developers
│ ├── WORKFLOW_GUIDE.md # Development workflow guide
── JOOMLA_DEVELOPMENT.md # Joomla-specific development guide
── JOOMLA_DEVELOPMENT.md # Joomla-specific development guide
│ └── ROADMAP.md # Version-specific roadmap
├── src/ # Template source code
│ ├── templates/ # Joomla template files
│ └── media/ # Assets (CSS, JS, images)
@@ -98,7 +105,7 @@ This project adheres to [MokoStandards](https://github.com/mokoconsulting-tech/M
* Repository: [https://github.com/mokoconsulting-tech/moko-cassiopeia](https://github.com/mokoconsulting-tech/moko-cassiopeia)
* Path: /docs/README.md
* Owner: Moko Consulting
* Version: 01.00.00
* Version: 03.05.00
* Status: Active
* Effective Date: 2026-01-09
@@ -107,3 +114,4 @@ This project adheres to [MokoStandards](https://github.com/mokoconsulting-tech/M
| Date | Change Summary | Author |
| ---------- | ----------------------------------------------------- | --------------- |
| 2026-01-09 | Initial documentation index created for MokoStandards compliance. | GitHub Copilot |
| 2026-01-27 | Updated with roadmap link and version to 03.05.01. | GitHub Copilot |

849
docs/ROADMAP.md Normal file
View File

@@ -0,0 +1,849 @@
<!--
Copyright (C) 2026 Moko Consulting <hello@mokoconsulting.tech>
This file is part of a Moko Consulting project.
SPDX-License-Identifier: GPL-3.0-or-later
# FILE INFORMATION
DEFGROUP: Joomla.Template.Site
INGROUP: Moko-Cassiopeia.Documentation
REPO: https://github.com/mokoconsulting-tech/moko-cassiopeia
FILE: docs/ROADMAP.md
VERSION: 03.05.00
BRIEF: Version-specific roadmap for Moko-Cassiopeia template
PATH: /docs/ROADMAP.md
-->
# Moko-Cassiopeia Roadmap (VERSION: 03.05.00)
This document provides a comprehensive, version-specific roadmap for the Moko-Cassiopeia Joomla template, tracking feature evolution, current capabilities, and planned enhancements.
## Table of Contents
- [Version Timeline](#version-timeline)
- [Past Releases](#past-releases)
- [Future Roadmap (5-Year Plan)](#future-roadmap-5-year-plan)
- [Current Release (v03.05.00)](#current-release-v030500)
- [Implemented Features](#implemented-features)
- [Planned Features](#planned-features)
- [Development Priorities](#development-priorities)
- [Long-term Vision](#long-term-vision)
- [External Resources](#external-resources)
---
## Version Timeline
### Past Releases
### v03.05.01 (2026-01-09) - Standards & Security
**Status**: Released (CHANGELOG entry exists, code files pending version update)
**Added**:
- Dependency review workflow for vulnerability scanning
- Standards compliance workflow for MokoStandards validation
- Dependabot configuration for automated security updates
- Documentation index (`docs/README.md`)
**Changed**:
- Removed custom CodeQL workflow (using GitHub's default setup)
- Enforced repository compliance with MokoStandards
- Improved security posture with automated scanning
### v03.05.00 (2026-01-04) - Workflow & Governance
**Status**: Current Release (in code)
**Added**:
- `.github/workflows` directory structure
- CODE_OF_CONDUCT.md from MokoStandards
- CONTRIBUTING.md from MokoStandards
**Changed**:
- TODO items to be split to separate file (tracked)
### v03.01.00 (2025-12-16) - CI/CD Foundation
**Added**:
- Initial GitHub Actions workflows
### v03.00.00 (2025-12-09) - Font Awesome 7 Upgrade
**Updated**:
- Copyright headers to MokoCodingDefaults standards
- Fixed color style injection in `index.php`
- Upgraded Font Awesome 6 to Font Awesome 7 Free
- Added Font Awesome 7 Free style fallback
**Removed**:
- Deprecated CODE_OF_CONDUCT.md
- Deprecated CONTRIBUTING.md
### v02.01.05 (2025-09-04) - CSS Refinement
**Fixed**:
- Removed vmbasic.css
- Repaired template.css and colors_standard.css
### v02.00.00 (2025-08-30) - Dark Mode & TOC
**Major Features**:
- **Dark Mode Toggle System**
- Frontend toggle switch with localStorage persistence
- Admin-configurable default mode
- CSS rules for light/dark themes
- JavaScript-powered mode switching
- **Enhanced Template Parameters**
- Logo parameter support
- GTM container ID configuration
- Dark mode defaults in settings
- Updated metadata and copyright headers
- **Expanded Table of Contents**
- Automatic TOC injection
- User-selectable placement (`toc-left` or `toc-right`)
- Article options integration
**Improvements**:
- Cleaned up `index.php` (removed duplicate skip-to-content calls)
- Consolidated JavaScript asset loading
- Streamlined CSS for toggle switch
- Accessibility refinements (typography, color contrast)
- Fixed missing logo parameter in header
- Corrected stylesheet inconsistencies
- Patched redundant script includes
### v01.00.00 - Initial Public Release
**Core Features**:
- Font Awesome 6 integration
- Bootstrap 5 helpers and utilities
- Automatic Table of Contents (TOC) utility
- Moko Expansions: Google Tag Manager / GA4 hooks
- Built on Joomla's Cassiopeia template
---
### Future Roadmap (5-Year Plan)
The following versions represent our planned annual major releases, each building upon the previous version's foundation.
#### v04.00.00 (Q4 2027) - Enhanced Accessibility & Performance
**Status**: Planned
**Target Release**: December 2027
**Major Template Features**:
- **WCAG 2.1 AA Compliance**
- Full accessibility audit and remediation
- High-contrast theme options
- Screen reader optimizations
- Keyboard navigation enhancements
- ARIA landmark improvements
- Skip navigation enhancements
- **Template Performance Optimizations**
- Critical CSS inlining for faster first paint
- Lazy loading for images and below-fold content
- WebP image support with automatic fallbacks
- Advanced asset bundling and minification
- Template asset caching (CSS/JS bundles)
- **Enhanced Layout System**
- Additional responsive grid layouts
- Flexible module position system
- Column layout presets (2-col, 3-col, 4-col variations)
- Grid/masonry article layouts
- Sticky sidebar options
- **Typography Enhancements**
- Advanced typography controls in template settings
- Additional font pairing presets
- Custom font upload support
- Line height and letter spacing controls
- Responsive typography scaling
- **Developer Experience**
- Development mode enablement (unminified assets, debug output)
- Live reload during development
- Enhanced error logging and diagnostics
- Template debugging tools
- Style guide generator
- **Content Display Features**
- Soft offline mode (category-based access during maintenance)
- Enhanced article layouts (grid, masonry, timeline)
- Image caption styling options
- Quote block styling variations
- Enhanced breadcrumb customization
**Template Infrastructure**:
- Expanded template parameter validation
- Enhanced template override detection
- Automated template compatibility testing
- Template performance profiling tools
---
#### v05.00.00 (Q4 2028) - Advanced Layouts & Template Customization
**Status**: Planned
**Target Release**: December 2028
**Major Template Features**:
- **Enhanced Layout Builder**
- Template-based page layout variations
- Configurable layout options via template parameters
- Layout presets library (blog, portfolio, business, magazine)
- Module position layout manager
- Visual layout preview in admin
- **Advanced Styling System**
- Extended color palette management (unlimited custom palettes)
- CSS variable editor in template settings
- Style presets for different site types
- Border radius and spacing controls
- Box shadow and effect controls
- **Template Component Enhancements**
- Enhanced menu styling options (mega menu support)
- Advanced header variations (transparent, sticky, minimal)
- Footer layout options (column variations, widgets)
- Sidebar styling and behavior options
- Hero section templates and variations
- **Content Display Options**
- Article intro/full text display controls
- Category layout variations (grid, list, masonry, cards)
- Featured content sections
- Related articles display options
- Author bio box styling
- **Responsive Design Improvements**
- Mobile-first navigation patterns
- Tablet-specific layout controls
- Responsive image sizing options
- Mobile header variations
- Touch-friendly interface elements
- **Template Integration Features**
- Enhanced VirtueMart template overrides
- Contact form styling variations
- Search result layout options
- Error page customization
- Archive page templates
**Template Infrastructure**:
- Joomla 6.x template compatibility (if released)
- PHP 8.2+ support
- Template child theme support
- Template preset import/export functionality
---
#### v06.00.00 (Q4 2029) - Template Extensions & Advanced Features
**Status**: Planned
**Target Release**: December 2029
**Major Template Features**:
- **Template Marketplace & Extensions**
- Template addon system for modular features
- Community-contributed template extensions
- Template preset marketplace
- Style pack distribution system
- Template component library
- **Advanced Module System**
- Custom module chrome options
- Module animation effects
- Module visibility controls (scroll, time-based)
- Module group management
- Module style inheritance
- **Enhanced Media Handling**
- Background image options per page/section
- Image overlay controls
- Parallax scrolling effects
- Video background support
- Gallery template variations
- **Template Branding Options**
- Multiple logo upload (standard, retina, mobile)
- Favicon and app icon management
- Custom loading screen/animations
- Watermark options
- Brand color scheme generator
- **Advanced Header/Footer**
- Multiple header layout presets
- Sticky header variations and behaviors
- Header transparency controls
- Footer widget areas expansion
- Floating action buttons
- **Content Enhancement Features**
- Reading progress indicator
- Social sharing buttons (template-integrated)
- Print-friendly styles
- Reading time estimation display
- Content table enhancements
- **Template SEO Features**
- Schema markup templates for common types
- Open Graph tag management
- Twitter Card support
- Breadcrumb schema integration
- Meta tag template controls
**Template Infrastructure**:
- Template versioning system
- Template backup/restore functionality
- Template A/B testing support
- Multi-language template variations
- Template documentation generator
---
#### v07.00.00 (Q4 2030) - Modern Template Standards & Enhancements
**Status**: Planned
**Target Release**: December 2030
**Major Template Features**:
- **Modern CSS Features**
- CSS Grid layout system integration
- CSS Container Queries support
- CSS Cascade Layers implementation (layered style priority system)
- Custom properties (CSS variables) UI
- Modern filter and backdrop effects
- **Progressive Template Features**
- Offline-capable template assets
- Service worker template integration
- App manifest generation
- Install to home screen support
- Template asset preloading strategies
- **Animation & Interaction**
- Scroll-triggered animations
- Hover effect library
- Page transition effects
- Micro-interactions for UI elements
- Loading animation options
- **Advanced Responsive Features**
- Container-based responsive design
- Element visibility by viewport
- Responsive navigation patterns library
- Mobile-optimized interactions
- Adaptive image loading
- **Template Accessibility Features**
- Focus indicators customization
- Reduced motion preferences support
- High contrast mode automation
- Keyboard navigation patterns
- ARIA live regions for dynamic content
- **Content Presentation**
- Advanced blockquote styles
- Code snippet highlighting themes
- Table styling variations
- List styling options
- Custom content block templates
- **Template Performance**
- Resource hints (preconnect, prefetch)
- Optimal asset delivery strategies
- Image format optimization (AVIF support)
- Font loading optimization
- Template metrics dashboard
**Template Infrastructure**:
- Template pattern library
- Design token system
- Template component documentation
- Automated template testing suite
- Template performance monitoring
---
#### v08.00.00 (Q4 2031) - Next-Generation Template Features
**Status**: Conceptual
**Target Release**: December 2031
**Major Template Features**:
- **Advanced Layout Systems**
- Subgrid support for complex layouts
- Multi-column layout variations
- Asymmetric grid systems
- Dynamic layout switching
- Layout constraint system
- **Enhanced Visual Customization**
- Real-time style editor
- Template style variations manager
- Custom CSS injection with validation
- Style inheritance and override system
- Visual design tokens editor
- **Template Component Library**
- Comprehensive UI component set
- Reusable template blocks
- Component variation system
- Template snippet library
- Pattern library integration
- **Advanced Typography System**
- Variable font support
- Advanced typographic scales
- Font pairing recommendations
- Fluid typography system
- Custom font fallback chains
- **Template Integration Features**
- Enhanced component overrides
- Template hooks system
- Event-based template modifications
- Custom field rendering templates
- Module position API enhancements
- **Responsive & Adaptive Design**
- Advanced breakpoint management
- Element-specific responsive controls
- Adaptive images with art direction
- Responsive typography system
- Context-aware component rendering
- **Template Ecosystem**
- Child template framework
- Template derivative system
- Community template marketplace
- Template rating and review system
- Professional template support network
- **Template Quality & Maintenance**
- Automated accessibility testing
- Template performance auditing
- Code quality monitoring
- Update notification system
- Template health dashboard
**Template Infrastructure**:
- Template API for extensibility
- Template package manager
- Template development CLI tools
- Template migration utilities
- Comprehensive template documentation system
---
## Current Release (v03.05.00)
### System Requirements
- **Joomla**: 4.4.x or 5.x
- **PHP**: 8.0+
- **Database**: MySQL/MariaDB compatible
### Architecture
- **Base Template**: Joomla Cassiopeia
- **Enhancement Layer**: Non-invasive overrides
- **Asset Management**: Joomla Web Asset Manager (WAM)
- **Frontend Framework**: Bootstrap 5
- **Icon Library**: Font Awesome 7 Free
---
## Implemented Features
### 🎨 Theming & Visual Design
#### Color Palette System
- **3 Built-in Palettes**: Standard, Alternative, Custom
- **Dual Mode Support**: Separate light and dark configurations
- **Custom Palettes**: User-definable via `colors_custom.css`
- **Location**: `src/media/css/colors/{light|dark}/`
#### Dark Mode System
- **Toggle Controls**: Switch (Light↔Dark) or Radios (Light/Dark/System)
- **Default Mode**: Admin-configurable (system, light, or dark)
- **Persistence**: localStorage for user preferences
- **Auto-Detection**: Optional system preference detection
- **Meta Tags**: `color-scheme` and `theme-color` support
- **ARIA Bridge**: Bootstrap ARIA compatibility
#### Typography
- **Font Schemes**:
- Local: Roboto
- Web (Google Fonts): Fira Sans, Roboto + Noto Sans
- **Admin-Configurable**: Template settings dropdown
#### Branding
- **Logo Support**: Custom logo upload
- **Site Title**: Text-based branding option
- **Site Description**: Tagline/subtitle field
- **Font Awesome Kit**: Optional custom kit integration
### 📐 Layout & Structure
#### Module Positions (23 Total)
**Header Area**:
- topbar, below-topbar, below-logo, menu, search, banner
**Content Area**:
- top-a, top-b, main-top, main-bottom, breadcrumbs
- sidebar-left, sidebar-right
**Footer Area**:
- bottom-a, bottom-b, footer-menu, footer
**Special**:
- debug, offline-header, offline, offline-footer
- drawer-left, drawer-right
#### Layout Options
- **Container Type**: Fluid or Static
- **Sticky Header**: Optional fixed navigation
- **Back-to-Top Button**: Scrollable page support
### 📝 Content Features
#### Table of Contents (TOC)
- **Automatic Generation**: From article headings
- **Placement Options**: `toc-left` or `toc-right` layouts
- **Article Integration**: Via Options → Layout dropdown
- **Responsive**: Mobile-friendly sidebar placement
#### Article Layouts
- **Default**: Standard Cassiopeia layout
- **TOC Variants**: Left-sidebar or right-sidebar TOC
- **Custom Overrides**: Located in `html/com_content/article/`
### 📊 Analytics & Tracking
#### Google Tag Manager (GTM)
- **Enable/Disable**: Admin toggle
- **Container ID**: Template parameter field
- **Implementation**: Head and body script injection
- **GDPR-Ready**: Configurable consent defaults
#### Google Analytics 4 (GA4)
- **Enable/Disable**: Admin toggle
- **Property ID**: Template parameter field
- **Universal Analytics Fallback**: Legacy UA support
- **Privacy-First**: Conditional loading based on settings
### 🎛️ Customization & Developer Tools
#### Custom Code Injection
- **Head Start**: Custom HTML/JS before `</head>`
- **Head End**: Custom HTML/JS at end of `<head>`
- **Raw HTML**: Unfiltered code injection for advanced users
#### Drawer System
- **Left/Right Drawers**: Offcanvas menu areas
- **Icon Customization**: Font Awesome icon selection
- **Default Icons**:
- Left: `fa-solid fa-chevron-right`
- Right: `fa-solid fa-chevron-left`
#### Asset Management
- **Joomla WAM**: Complete asset registry in `joomla.asset.json`
- **Development/Production Modes**: Minified and unminified assets
- **Dependency Management**: Automatic script/style loading
### 🏗️ Template Overrides
#### Component Overrides
**Content (com_content)**:
- Article layouts (default, toc-left, toc-right)
- Category layouts (blog, list)
- Featured articles
**Contact (com_contact)**:
- Contact form layouts
**Engage (com_engage)**:
- Comment system integration
#### Module Overrides
**Menu (mod_menu)**:
- Metis dropdown menu
- Offcanvas navigation
**VirtueMart**:
- Product display (`mod_virtuemart_product`)
- Shopping cart (`mod_virtuemart_cart`)
- Manufacturer display (`mod_virtuemart_manufacturer`)
- Category display (`mod_virtuemart_category`)
- Currency selector (`mod_virtuemart_currencies`)
**Other Modules**:
- Custom HTML (`mod_custom`)
- GABble social integration (`mod_gabble`)
**Membership System (OS Membership)**:
- Plan layouts (default, pricing tables)
- Member management interfaces
### 🔧 Configuration Parameters
#### Theme Tab
**General**:
- `theme_enabled` - Enable/disable theme system
- `theme_control_type` - Toggle UI type (switch/radios/none)
- `theme_default_choice` - Default mode (system/light/dark)
- `theme_auto_dark` - Auto-detect system preference
- `theme_meta_color_scheme` - Inject `color-scheme` meta tag
- `theme_meta_theme_color` - Inject `theme-color` meta tag
- `theme_bridge_bs_aria` - Bootstrap ARIA compatibility
**Variables & Palettes**:
- `colorLightName` - Light mode color scheme
- `colorDarkName` - Dark mode color scheme
**Typography**:
- `useFontScheme` - Font selection (local/web)
**Branding & Icons**:
- `brand` - Show/hide branding
- `logoFile` - Logo upload path
- `siteTitle` - Site title text
- `siteDescription` - Site tagline
- `fA6KitCode` - Font Awesome kit code
**Header & Navigation**:
- `stickyHeader` - Fixed navigation
- `backTop` - Back-to-top button
**Toggle UI**:
- `theme_fab_enabled` - Floating action button for theme toggle
- `theme_fab_pos` - FAB position (br/bl/tr/tl)
#### Google Tab
- `googletagmanager` - Enable GTM
- `googletagmanagerid` - GTM container ID
- `googleanalytics` - Enable GA4
- `googleanalyticsid` - GA4 property ID
#### Custom Code Tab
- `custom_head_start` - Custom code at head start
- `custom_head_end` - Custom code at head end
#### Drawers Tab
- `drawerLeftIcon` - Left drawer icon (Font Awesome class)
- `drawerRightIcon` - Right drawer icon (Font Awesome class)
#### Advanced Tab
- `fluidContainer` - Container layout (static/fluid)
### 🛠️ Development Tools
#### Quality Assurance
- **Codeception**: Automated testing framework
- **PHPStan**: Static analysis (level 8+)
- **PHPCS**: Code style validation (PSR-12)
- **PHPCompatibility**: PHP 8.0+ compatibility checks
#### CI/CD Workflows
- **Dependency Review**: Vulnerability scanning
- **Standards Compliance**: MokoStandards validation
- **CodeQL**: Security analysis (GitHub default)
- **Dependabot**: Automated dependency updates
#### Documentation
- **Quick Start**: 5-minute developer setup
- **Workflow Guide**: Git strategy, branching, releases
- **Joomla Development**: Testing, packaging, multi-version support
---
## Planned Features
### 🚧 In Development
#### Soft Offline Mode (v2.1.5 - Mentioned)
**Status**: Planned/In Development
**Description**: Keep selected categories accessible during maintenance mode
**Use Cases**:
- Legal documents remain viewable during downtime
- Policy pages accessible for compliance
- Terms of service always available
**Configuration**:
- Admin-selectable categories
- Per-category offline access control
#### TODO Tracking System
**Status**: Mentioned in CHANGELOG (v03.05.00)
**Description**: Separate TODO tracking file
**Purpose**: Centralized issue and feature tracking outside changelog
### 🔮 Future Enhancements
#### Development Mode (Commented Out)
**Status**: Code exists but disabled
**Location**: `templateDetails.xml` line 91
**Description**: Comprehensive development mode toggle
**Potential Features**:
- Unminified asset loading
- Debug output
- Performance profiling
- Template cache bypass
#### Potential Features (Community Requested)
*Note: These are conceptual and not yet officially planned*
**Enhanced Accessibility**:
- WCAG 2.1 AAA compliance mode
- High-contrast themes
- Screen reader optimizations
- Keyboard navigation improvements
**Template Layout Features**:
- Advanced responsive grid layouts
- Multiple column variations
- Custom module position system
- Layout preset library
**Template Styling Features**:
- Extended color palette management
- Custom font upload support
- Typography scale controls
- Visual style editor
---
## Development Priorities
### Immediate Focus (v03.x - 2026)
1. **TODO Tracking System**: Implement separate file for issue tracking
2. **Soft Offline Mode**: Complete category-based offline access
3. **Security Updates**: Maintain Dependabot and CodeQL scans
4. **Documentation**: Keep docs synchronized with features
5. **Bug Fixes**: Address reported issues and edge cases
### v04.00.00 Priorities (2027) - Template Foundation
1. **WCAG 2.1 AA Compliance**: Full template accessibility audit and implementation
2. **Template Performance**: Critical CSS, lazy loading, WebP support
3. **Layout System**: Enhanced responsive grid and module positions
4. **Development Mode**: Enable comprehensive template developer tools
### v05.00.00 Priorities (2028) - Template Customization
1. **Layout Builder**: Template-based page layout system
2. **Styling System**: Extended color palettes and CSS variable management
3. **Template Components**: Enhanced header, footer, and menu variations
4. **Responsive Design**: Mobile-first navigation and layout improvements
### v06.00.00 Priorities (2029) - Template Extensions
1. **Template Marketplace**: Addon system and community extensions
2. **Module System**: Advanced module chrome and animation options
3. **Media Handling**: Background images, parallax, video backgrounds
4. **Template SEO**: Schema markup templates and meta tag controls
### v07.00.00+ Priorities (2030+) - Modern Standards
1. **Modern CSS**: Grid, Container Queries, Cascade Layers
2. **Progressive Template**: Offline-capable assets and PWA features
3. **Animation System**: Scroll-triggered effects and micro-interactions
4. **Template Performance**: Advanced optimization and monitoring
---
## Long-term Vision
### Mission Statement
Moko-Cassiopeia aims to be the **most developer-friendly, user-customizable, and standards-compliant Joomla template** while maintaining minimal core overrides for maximum upgrade compatibility.
### Core Principles
1. **Non-Invasive**: Minimal Cassiopeia overrides
2. **Standards-First**: MokoStandards compliance
3. **Accessibility**: WCAG 2.1 compliance
4. **Performance**: Fast, optimized delivery
5. **Developer Experience**: Clear docs, easy setup, powerful tools
6. **Template-Focused**: Pure template features without complex external dependencies
### 5-Year Strategic Roadmap (Template Features)
#### 2027 (v04.00.00) - Accessibility & Performance
- Achieve WCAG 2.1 AA compliance for all template elements
- Implement critical template performance optimizations
- Enhance template layout system with flexible grids
- Enable comprehensive development mode for template developers
#### 2028 (v05.00.00) - Layouts & Customization
- Launch template-based layout builder system
- Deploy extended styling and customization options
- Enhance template component variations (headers, footers, menus)
- Improve responsive design patterns for all devices
#### 2029 (v06.00.00) - Extensions & Enhancements
- Introduce template addon and extension system
- Launch template preset marketplace
- Deploy advanced module styling and animation features
- Implement comprehensive template SEO controls
#### 2030 (v07.00.00) - Modern Standards
- Adopt modern CSS standards (Grid, Container Queries, Cascade Layers)
- Implement progressive template features (PWA support)
- Deploy advanced animation and interaction system
- Enhance template performance monitoring and optimization
#### 2031 (v08.00.00) - Next-Generation Template
- Advanced layout systems with subgrid support
- Comprehensive template component library
- Enhanced visual customization tools
- Template ecosystem with child themes and derivatives
---
## External Resources
### Official Links
- **Full Roadmap**: [https://mokoconsulting.tech/support/joomla-cms/moko-cassiopeia-roadmap](https://mokoconsulting.tech/support/joomla-cms/moko-cassiopeia-roadmap)
- **Repository**: [https://github.com/mokoconsulting-tech/moko-cassiopeia](https://github.com/mokoconsulting-tech/moko-cassiopeia)
- **Issue Tracker**: [GitHub Issues](https://github.com/mokoconsulting-tech/moko-cassiopeia/issues)
- **Changelog**: [CHANGELOG.md](../CHANGELOG.md)
### Community
- **Email Support**: hello@mokoconsulting.tech
- **Contributing**: [CONTRIBUTING.md](../CONTRIBUTING.md)
- **Code of Conduct**: [CODE_OF_CONDUCT.md](../CODE_OF_CONDUCT.md)
### Documentation
- **Quick Start**: [docs/QUICK_START.md](./QUICK_START.md)
- **Workflow Guide**: [docs/WORKFLOW_GUIDE.md](./WORKFLOW_GUIDE.md)
- **Joomla Development**: [docs/JOOMLA_DEVELOPMENT.md](./JOOMLA_DEVELOPMENT.md)
- **Main README**: [README.md](../README.md)
---
## Contributing to the Roadmap
Have ideas for future features? We welcome community input!
**How to Suggest Features**:
1. Check the [GitHub Issues](https://github.com/mokoconsulting-tech/moko-cassiopeia/issues) for existing requests
2. Open a new issue with the `enhancement` label
3. Provide clear use cases and benefits
4. Engage in community discussion
**Feature Evaluation Criteria**:
- Alignment with core principles
- User demand and use cases
- Technical feasibility
- Maintenance burden
- Performance impact
- Security implications
---
## Metadata
* Document: docs/ROADMAP.md
* Repository: [https://github.com/mokoconsulting-tech/moko-cassiopeia](https://github.com/mokoconsulting-tech/moko-cassiopeia)
* Path: /docs/ROADMAP.md
* Owner: Moko Consulting
* Version: 03.05.00
* Status: Active
* Last Updated: 2026-01-27
* Classification: Public Open Source Documentation
## Revision History
| Date | Change Summary | Author |
| ---------- | ----------------------------------------------------- | --------------- |
| 2026-01-27 | Initial version-specific roadmap generated from codebase scan. | GitHub Copilot |
| 2026-01-27 | Added 5-year future roadmap with annual major version releases (v04-v08). | GitHub Copilot |
| 2026-01-27 | Refocused roadmap to concentrate on template-oriented features only. | GitHub Copilot |

View File

@@ -1,4 +1,4 @@
; ; Copyright (C) 2025 Moko Consulting <hello@mokoconsulting.tech>
; Copyright (C) 2025 Moko Consulting <hello@mokoconsulting.tech>
;
; This file is part of a Moko Consulting project.
;

View File

@@ -185,7 +185,7 @@
--dark-border-subtle: #2b323b;
/* Typography & layout */
--body-font-family: var(--optain-cassiopeia-font-family-body, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji');
--body-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
--body-font-size: 1rem;
--body-font-weight: 400;
--body-line-height: 1.5;

View File

@@ -186,7 +186,7 @@
--dark-border-subtle: #2b323b;
/* Typography & layout */
--body-font-family: var(--optain-cassiopeia-font-family-body, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji');
--body-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
--body-font-size: 1rem;
--body-font-weight: 400;
--body-line-height: 1.5;

View File

@@ -172,7 +172,7 @@
--font-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--gradient: linear-gradient(180deg, #ffffff26, #fff0);
--body-font-family: var(--optain-cassiopeia-font-family-body, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
--body-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
--body-font-size: 1rem;
--body-font-weight: 400;
--body-line-height: 1.5;

View File

@@ -172,7 +172,7 @@
--font-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--gradient: linear-gradient(180deg, #ffffff26, #fff0);
--body-font-family: var(--optain-cassiopeia-font-family-body, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
--body-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
--body-font-size: 1rem;
--body-font-weight: 400;
--body-line-height: 1.5;

File diff suppressed because it is too large Load Diff

View File

@@ -11,7 +11,7 @@
VERSION: 03.05.00
BRIEF: Core JavaScript utilities and behaviors for Moko-Cassiopeia template
*/
!function(a){"use strict";window.Toc={helpers:{findOrFilter:function(e,t){var n=e.find(t);return e.filter(t).add(n).filter(":not([data-toc-skip])")},generateUniqueIdBase:function(e){return a(e).text().trim().replace(/\'/gi,"").replace(/[& +$,:;=?@"#{}|^~[`%!'<>\]\.\/\(\)\*\\\n\t\b\v]/g,"-").replace(/-{2,}/g,"-").substring(0,64).replace(/^-+|-+$/gm,"").toLowerCase()||e.tagName.toLowerCase()},generateUniqueId:function(e){for(var t=this.generateUniqueIdBase(e),n=0;;n++){var r=t;if(0<n&&(r+="-"+n),!document.getElementById(r))return r}},generateAnchor:function(e){if(e.id)return e.id;var t=this.generateUniqueId(e);return e.id=t},createNavList:function(){return a('<ul class="nav navbar-nav"></ul>')},createChildNavList:function(e){var t=this.createNavList();return e.append(t),t},generateNavEl:function(e,t){var n=a('<a class="nav-link"></a>');n.attr("href","#"+e),n.text(t);var r=a("<li></li>");return r.append(n),r},generateNavItem:function(e){var t=this.generateAnchor(e),n=a(e),r=n.data("toc-text")||n.text();return this.generateNavEl(t,r)},getTopLevel:function(e){for(var t=1;t<=6;t++){if(1<this.findOrFilter(e,"h"+t).length)return t}return 1},getHeadings:function(e,t){var n="h"+t,r="h"+(t+1);return this.findOrFilter(e,n+","+r)},getNavLevel:function(e){return parseInt(e.tagName.charAt(1),10)},populateNav:function(r,a,e){var i,s=r,c=this;e.each(function(e,t){var n=c.generateNavItem(t);c.getNavLevel(t)===a?s=r:i&&s===r&&(s=c.createChildNavList(i)),s.append(n),i=n})},parseOps:function(e){var t;return(t=e.jquery?{$nav:e}:e).$scope=t.$scope||a(document.body),t}},init:function(e){(e=this.helpers.parseOps(e)).$nav.attr("data-toggle","toc");var t=this.helpers.createChildNavList(e.$nav),n=this.helpers.getTopLevel(e.$scope),r=this.helpers.getHeadings(e.$scope,n);this.helpers.populateNav(t,n,r)}},a(function(){a('nav[data-toggle="toc"]').each(function(e,t){var n=a(t);Toc.init(n)})})}(jQuery);
(function (win, doc) {
"use strict";

21
src/media/js/user.js Normal file
View File

@@ -0,0 +1,21 @@
/* Copyright (C) 2025 Moko Consulting <hello@mokoconsulting.tech>
This file is part of a Moko Consulting project.
SPDX-License-Identifier: GPL-3.0-or-later
This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 3 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
You should have received a copy of the GNU General Public License along with this program. If not, see https://www.gnu.org/licenses/ .
# FILE INFORMATION
DEFGROUP: Joomla.Template.Site
INGROUP: Moko-Cassiopeia
REPO: https://github.com/mokoconsulting-tech/moko-cassiopeia
PATH: ./media/templates/site/moko-cassiopeia/js/user.js
VERSION: 03.00.00
BRIEF: JavaScript for handling user-specific interactions in Moko-Cassiopeia template
*/

View File

@@ -11,76 +11,212 @@
REPO: https://github.com/mokoconsulting-tech/moko-cassiopeia
PATH: ./templates/moko-cassiopeia/component.php
VERSION: 03.05.00
BRIEF: Minimal component-only template file for Moko-Cassiopeia
BRIEF: Main template index file for Moko-Cassiopeia rendering site layout
*/
defined('_JEXEC') or die;
use Joomla\CMS\Factory;
use Joomla\CMS\HTML\HTMLHelper;
use Joomla\CMS\Language\Text;
use Joomla\CMS\Uri\Uri;
use Joomla\CMS\Component\ComponentHelper;
/** @var Joomla\CMS\Document\HtmlDocument $this */
$app = Factory::getApplication();
$wa = $this->getWebAssetManager();
$app = Factory::getApplication();
$input = $app->getInput();
$document = $app->getDocument();
$wa = $document->getWebAssetManager();
// Color Theme
$paramsColorName = $this->params->get('colorName', 'colors_standard');
$assetColorName = 'theme.' . $paramsColorName;
$wa->registerAndUseStyle($assetColorName, 'media/templates/site/moko-cassiopeia/css/global/' . $paramsColorName . '.css');
// Template params
$params_LightColorName = (string) $this->params->get('colorLightName', 'colors_standard'); // colors_standard|colors_alternative|colors_custom
// Use a font scheme if set in the template style options
$paramsFontScheme = $this->params->get('useFontScheme', false);
$fontStyles = '';
$params_DarkColorName = (string) $this->params->get('colorDarkName', 'colors_standard'); // colors_standard|colors_alternative|colors_custom
if ($paramsFontScheme) {
if (stripos($paramsFontScheme, 'https://') === 0) {
$params_googletagmanager = $this->params->get('googletagmanager', false);
$params_googletagmanagerid = $this->params->get('googletagmanagerid', null);
$params_googleanalytics = $this->params->get('googleanalytics', false);
$params_googleanalyticsid = $this->params->get('googleanalyticsid', null);
$params_custom_head_start = $this->params->get('custom_head_start', null);
$params_custom_head_end = $this->params->get('custom_head_end', null);
$params_developmentmode = $this->params->get('developmentmode', false);
// Bootstrap behaviors (assets handled via WAM)
HTMLHelper::_('bootstrap.framework');
HTMLHelper::_('bootstrap.alert');
HTMLHelper::_('bootstrap.button');
HTMLHelper::_('bootstrap.carousel');
HTMLHelper::_('bootstrap.collapse');
HTMLHelper::_('bootstrap.dropdown');
HTMLHelper::_('bootstrap.modal');
HTMLHelper::_('bootstrap.offcanvas');
HTMLHelper::_('bootstrap.popover');
HTMLHelper::_('bootstrap.scrollspy');
HTMLHelper::_('bootstrap.tab');
HTMLHelper::_('bootstrap.tooltip');
HTMLHelper::_('bootstrap.toast');
// Detecting Active Variables
$option = $input->getCmd('option', '');
$view = $input->getCmd('view', '');
$layout = $input->getCmd('layout', '');
$task = $input->getCmd('task', '');
$itemid = $input->getCmd('Itemid', '');
$sitenameR = $app->get('sitename'); // raw for title composition
$sitename = htmlspecialchars($sitenameR, ENT_QUOTES, 'UTF-8');
$menu = $app->getMenu()->getActive();
$pageclass = $menu !== null ? $menu->getParams()->get('pageclass_sfx', '') : '';
// Respect “Site Name in Page Titles” (0:none, 1:before, 2:after)
$mode = (int) $app->get('sitename_pagetitles', 0);
$pageTitle = trim($this->getTitle());
$final = $pageTitle !== ''
? ($mode === 1 ? $sitenameR . ' - ' . $pageTitle
: ($mode === 2 ? $pageTitle . ' - ' . $sitenameR : $pageTitle))
: $sitenameR;
$this->setTitle($final);
// Template/Media path
$templatePath = 'media/templates/site/moko-cassiopeia';
// Core template CSS
$wa->useStyle('template.base'); // css/template.css
$wa->useStyle('template.vendor.social-media-demo'); // css/user.css
// Optional vendor CSS
$wa->useStyle('vendor.bootstrap-toc');
// Optional demo/showcase CSS (available for use, not loaded by default)
// To use: Add 'template.global.social-media-demo' to your article/module
// $wa->useStyle('template.global.social-media-demo');
// Color theme (light + optional dark)
$colorLightKey = strtolower(preg_replace('/[^a-z0-9_.-]/i', '', $params_LightColorName));
$colorDarkKey = strtolower(preg_replace('/[^a-z0-9_.-]/i', '', $params_DarkColorName));
$lightKey = 'template.light.' . $colorLightKey;
$darkKey = 'template.dark.' . $colorDarkKey;
try {
$wa->useStyle('template.light.colors_standard');
} catch (\Throwable $e) {
$wa->registerAndUseStyle('template.light.colors_standard', $templatePath . '/css/global/light/colors_standard.css');
}
try {
$wa->useStyle('template.dark.colors_standard');
} catch (\Throwable $e) {
$wa->registerAndUseStyle('template.dark.colors_standard', $templatePath . '/css/global/dark/colors_standard.css');
}
try {
$wa->useStyle($lightKey);
} catch (\Throwable $e) {
$wa->registerAndUseStyle('template.light.dynamic', $templatePath . '/css/global/light/' . $colorLightKey . '.css');
}
try {
$wa->useStyle($darkKey);
} catch (\Throwable $e) {
$wa->registerAndUseStyle('template.dark.dynamic', $templatePath . '/css/global/dark/' . $colorDarkKey . '.css');
}
// Scripts
$wa->useScript('template.js');
$wa->useScript('theme-init.js');
$wa->useScript('vendor.bootstrap-toc.js');
/**
* VirtueMart detection:
* - Component must exist and be enabled
*/
$isVirtueMartActive = ComponentHelper::isEnabled('com_virtuemart', true);
if ($isVirtueMartActive) {
/**
* Load a VirtueMart-specific stylesheet defined in your template manifest.
* This assumes you defined an asset named "template.virtuemart".
*/
$wa->useStyle('vendor.vm');
}
// Font scheme (external or local) + CSS custom properties
$params_FontScheme = $this->params->get('useFontScheme', false);
$fontStyles = '';
if ($params_FontScheme) {
if (stripos($params_FontScheme, 'https://') === 0) {
$this->getPreloadManager()->preconnect('https://fonts.googleapis.com/', ['crossorigin' => 'anonymous']);
$this->getPreloadManager()->preconnect('https://fonts.gstatic.com/', ['crossorigin' => 'anonymous']);
$this->getPreloadManager()->preload($paramsFontScheme, ['as' => 'style', 'crossorigin' => 'anonymous']);
$wa->registerAndUseStyle('fontscheme.current', $paramsFontScheme, [], ['media' => 'print', 'rel' => 'lazy-stylesheet', 'onload' => 'this.media=\'all\'', 'crossorigin' => 'anonymous']);
$this->getPreloadManager()->preload($params_FontScheme, ['as' => 'style', 'crossorigin' => 'anonymous']);
$wa->registerAndUseStyle('fontscheme.current', $params_FontScheme, [], [
'media' => 'print',
'rel' => 'lazy-stylesheet',
'onload' => 'this.media=\'all\'',
'crossorigin' => 'anonymous'
]);
if (preg_match_all('/family=([^?:]*):/i', $paramsFontScheme, $matches) > 0) {
$fontStyles = '--font-family-body: "' . str_replace('+', ' ', $matches[1][0]) . '", sans-serif;
--font-family-headings: "' . str_replace('+', ' ', isset($matches[1][1]) ? $matches[1][1] : $matches[1][0]) . '", sans-serif;
--font-weight-normal: 400;
--font-weight-headings: 700;';
if (preg_match_all('/family=([^?:]*):/i', $params_FontScheme, $matches) > 0) {
$fontStyles = '--font-family-body: "' . str_replace('+', ' ', $matches[1][0]) . '", sans-serif;' . "\n";
$fontStyles .= '--font-family-headings: "' . str_replace('+', ' ', isset($matches[1][1]) ? $matches[1][1] : $matches[1][0]) . '", sans-serif;' . "\n";
$fontStyles .= '--font-weight-normal: 400;' . "\n";
$fontStyles .= '--font-weight-headings: 700;';
}
} else {
$wa->registerAndUseStyle('fontscheme.current', $paramsFontScheme, ['version' => 'auto'], ['media' => 'print', 'rel' => 'lazy-stylesheet', 'onload' => 'this.media=\'all\'']);
$this->getPreloadManager()->preload($wa->getAsset('style', 'fontscheme.current')->getUri() . '?' . $this->getMediaVersion(), ['as' => 'style']);
$wa->registerAndUseStyle('fontscheme.current', $params_FontScheme, ['version' => 'auto'], [
'media' => 'print',
'rel' => 'lazy-stylesheet',
'onload' => 'this.media=\'all\''
]);
$this->getPreloadManager()->preload(
$wa->getAsset('style', 'fontscheme.current')->getUri() . '?' . $this->getMediaVersion(),
['as' => 'style']
);
}
}
// Enable assets
$wa->usePreset('template.moko-cassiopeia.' . ($this->direction === 'rtl' ? 'rtl' : 'ltr'))
->useStyle('template.active.language')
->useStyle('template.user')
->useScript('template.user')
->addInlineStyle(":root {
--hue: 214;
--template-bg-light: #f0f4fb;
--template-text-dark: #495057;
--template-text-light: #ffffff;
--template-link-color: #2a69b8;
--template-special-color: #001B4C;
$fontStyles
}");
// Meta
$this->setMetaData('viewport', 'width=device-width, initial-scale=1');
if ($this->params->get('faKitCode')) {
$faKit = "https://kit.fontawesome.com/" . $this->params->get('faKitCode') . ".js";
HTMLHelper::_('script', $faKit, ['crossorigin' => 'anonymous']);
} else {
try {
if($params_developmentmode){
$wa->useStyle('vendor.fa7free.all');
$wa->useStyle('vendor.fa7free.brands');
$wa->useStyle('vendor.fa7free.fontawesome');
$wa->useStyle('vendor.fa7free.regular');
$wa->useStyle('vendor.fa7free.solid');
} else {
$wa->useStyle('vendor.fa7free.all.min');
$wa->useStyle('vendor.fa7free.brands.min');
$wa->useStyle('vendor.fa7free.fontawesome.min');
$wa->useStyle('vendor.fa7free.regular.min');
$wa->useStyle('vendor.fa7free.solid.min');
}
} catch (\Throwable $e) {
if($params_developmentmode){
$wa->registerAndUseStyle('vendor.fa7free.all.dynamic', $templatePath . '/vendor/fa7free/css/all.css');
$wa->registerAndUseStyle('vendor.fa7free.brands.dynamic', $templatePath . '/vendor/fa7free/css/brands.css');
$wa->registerAndUseStyle('vendor.fa7free.fontawesome.dynamic', $templatePath . '/vendor/fa7free/css/fontawesome.css');
$wa->registerAndUseStyle('vendor.fa7free.regular.dynamic', $templatePath . '/vendor/fa7free/css/regular.css');
$wa->registerAndUseStyle('vendor.fa7free.solid.dynamic', $templatePath . '/vendor/fa7free/css/solid.css');
} else {
$wa->registerAndUseStyle('vendor.fa7free.all.min.dynamic', $templatePath . '/vendor/fa7free/css/all.min.css');
$wa->registerAndUseStyle('vendor.fa7free.brands.min.dynamic', $templatePath . '/vendor/fa7free/css/brands.min.css');
$wa->registerAndUseStyle('vendor.fa7free.fontawesome.min.dynamic', $templatePath . '/vendor/fa7free/css/fontawesome.min.css');
$wa->registerAndUseStyle('vendor.fa7free.regular.min.dynamic', $templatePath . '/vendor/fa7free/css/regular.min.css');
$wa->registerAndUseStyle('vendor.fa7free.solid.min.dynamic', $templatePath . '/vendor/fa7free/css/solid.min.css');
}
// Override 'template.active' asset to set correct ltr/rtl dependency
$wa->registerStyle('template.active', '', [], [], ['template.moko-cassiopeia.' . ($this->direction === 'rtl' ? 'rtl' : 'ltr')]);
}
}
$params_leftIcon = htmlspecialchars($this->params->get('drawerLeftIcon', 'fa-solid fa-chevron-left'), ENT_COMPAT, 'UTF-8');
$params_rightIcon = htmlspecialchars($this->params->get('drawerRightIcon', 'fa-solid fa-chevron-right'), ENT_COMPAT, 'UTF-8');
// Browsers support SVG favicons
$this->addHeadLink(HTMLHelper::_('image', 'joomla-favicon.svg', '', [], true, 1), 'icon', 'rel', ['type' => 'image/svg+xml']);
$this->addHeadLink(HTMLHelper::_('image', 'favicon.ico', '', [], true, 1), 'alternate icon', 'rel', ['type' => 'image/vnd.microsoft.icon']);
$this->addHeadLink(HTMLHelper::_('image', 'joomla-favicon-pinned.svg', '', [], true, 1), 'mask-icon', 'rel', ['color' => '#000']);
// Defer font awesome
$wa->getAsset('style', 'fontawesome')->setAttribute('rel', 'lazy-stylesheet');
$wa->useStyle('template.user'); // css/user.css
?>
<!DOCTYPE html>
<html lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>">
<html class="component" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>">
<head>
<jdoc:include type="metas" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">

View File

@@ -21,12 +21,14 @@ use Joomla\CMS\Factory;
use Joomla\CMS\HTML\HTMLHelper;
use Joomla\CMS\Language\Text;
use Joomla\CMS\Uri\Uri;
use Joomla\CMS\Component\ComponentHelper;
/** @var Joomla\CMS\Document\HtmlDocument $this */
$app = Factory::getApplication();
$input = $app->getInput();
$wa = $this->getWebAssetManager();
$document = $app->getDocument();
$wa = $document->getWebAssetManager();
// Template params
$params_LightColorName = (string) $this->params->get('colorLightName', 'colors_standard'); // colors_standard|colors_alternative|colors_custom
@@ -40,10 +42,9 @@ $params_googleanalyticsid = $this->params->get('googleanalyticsid', null);
$params_custom_head_start = $this->params->get('custom_head_start', null);
$params_custom_head_end = $this->params->get('custom_head_end', null);
$params_developmentmode = $this->params->get('developmentmode', false);
/*
// Bootstrap behaviors (assets handled via WAM)
HTMLHelper::_('bootstrap.framework');
HTMLHelper::_('bootstrap.loadCss', true);
HTMLHelper::_('bootstrap.alert');
HTMLHelper::_('bootstrap.button');
HTMLHelper::_('bootstrap.carousel');
@@ -56,7 +57,7 @@ HTMLHelper::_('bootstrap.scrollspy');
HTMLHelper::_('bootstrap.tab');
HTMLHelper::_('bootstrap.tooltip');
HTMLHelper::_('bootstrap.toast');
*/
// Detecting Active Variables
$option = $input->getCmd('option', '');
$view = $input->getCmd('view', '');
@@ -80,41 +81,33 @@ $this->setTitle($final);
// Template/Media path
$templatePath = 'media/templates/site/moko-cassiopeia';
// ===========================
// Web Asset Manager (WAM) — matches your joomla.asset.json
// ===========================
// Core template CSS
$wa->useStyle('template.global.base'); // css/template.css
$wa->useStyle('template.global.social-media-demo'); // css/user.css
// Optional vendor CSS
$wa->useStyle('vendor.bootstrap-toc');
// Optional demo/showcase CSS (available for use, not loaded by default)
// To use: Add 'template.global.social-media-demo' to your article/module
// $wa->useStyle('template.global.social-media-demo');
$wa->useStyle('template.base'); // css/template.css
// Color theme (light + optional dark)
$colorLightKey = strtolower(preg_replace('/[^a-z0-9_.-]/i', '', $params_LightColorName));
$colorDarkKey = strtolower(preg_replace('/[^a-z0-9_.-]/i', '', $params_DarkColorName));
$lightKey = 'template.light.' . $colorLightKey;
$darkKey = 'template.dark.' . $colorDarkKey;
try {
$wa->useStyle('template.light.colors_standard');
} catch (\Throwable $e) {
$wa->registerAndUseStyle('template.light.colors_standard', $templatePath . '/css/global/light/colors_standard.css');
}
try {
$wa->useStyle('template.dark.colors_standard');
} catch (\Throwable $e) {
$wa->registerAndUseStyle('template.dark.colors_standard', $templatePath . '/css/global/dark/colors_standard.css');
}
try {
$wa->useStyle($lightKey);
} catch (\Throwable $e) {
$wa->registerAndUseStyle('template.light.dynamic', $templatePath . '/css/global/light/' . $colorLightKey . '.css');
}
try {
$wa->useStyle($darkKey);
} catch (\Throwable $e) {
@@ -123,9 +116,20 @@ try {
// Scripts
$wa->useScript('template.js');
$wa->useScript('theme-init.js');
$wa->useScript('darkmode-toggle.js');
$wa->useScript('vendor.bootstrap-toc.js');
/**
* VirtueMart detection:
* - Component must exist and be enabled
*/
$isVirtueMartActive = ComponentHelper::isEnabled('com_virtuemart', true);
if ($isVirtueMartActive) {
/**
* Load a VirtueMart-specific stylesheet defined in your template manifest.
* This assumes you defined an asset named "template.virtuemart".
*/
$wa->useStyle('vendor.vm');
}
// Font scheme (external or local) + CSS custom properties
$params_FontScheme = $this->params->get('useFontScheme', false);

View File

@@ -1,276 +1,246 @@
{
"$schema": "https://developer.joomla.org/schemas/json-schema/web_assets.json",
"name": "moko-cassiopeia",
"description": "Moko-Cassiopeia template assets",
"license": "GPL-3.0-or-later",
"x-header": {
"copyright_year": 2025,
"author": "Jonathan Miller",
"owner": "Moko Consulting",
"contact": "hello@mokoconsulting.tech",
"project": "Moko-Cassiopeia Template",
"spdx_license": "GPL-3.0-or-later",
"notice": "This file is part of a Moko Consulting project.",
"disclaimer": "This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License; either version 3 of the License, or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details. You should have received a copy of the GNU General Public License along with this program. If not, see https://www.gnu.org/licenses/.",
"repo": "https://github.com/mokoconsulting-tech/moko-cassiopeia",
"file_information": {
"defgroup": "Joomla.Template.Site",
"ingroup": "Moko-Cassiopeia.Template.Assets",
"path": "./media/templates/site/moko-cassiopeia/joomla.asset.json",
"version": "03.00.00",
"brief": "Joomla asset registry for Moko-Cassiopeia"
}
},
"assets": [
{
"name": "template.global.base",
"type": "style",
"uri": "media/templates/site/moko-cassiopeia/css/template.css",
"attributes": {"media": "all"}
},
{
"name": "template.global.base.min",
"type": "style",
"uri": "media/templates/site/moko-cassiopeia/css/template.min.css",
"attributes": {"media": "all"}
},
{
"name": "template.user",
"type": "style",
"uri": "media/templates/site/moko-cassiopeia/css/user.css",
"attributes": {"media": "all"}
},
{
"name": "template.user.min",
"type": "style",
"uri": "media/templates/site/moko-cassiopeia/css/user.min.css",
"attributes": {"media": "all"}
},
{
"name": "template.editor",
"type": "style",
"uri": "media/templates/site/moko-cassiopeia/css/editor.css",
"attributes": {"media": "all"}
},
{
"name": "template.editor.min",
"type": "style",
"uri": "media/templates/site/moko-cassiopeia/css/editor.min.css",
"attributes": {"media": "all"}
},
{
"name": "vendor.bootstrap-toc",
"type": "style",
"uri": "media/templates/site/moko-cassiopeia/vendor/afeld/bootstrap-toc.min.css",
"attributes": {"media": "all"}
},
{
"name": "vendor.bootstrap-toc.min",
"type": "style",
"uri": "media/templates/site/moko-cassiopeia/vendor/afeld/bootstrap-toc.min.css",
"attributes": {"media": "all"}
},
{
"name": "template.light.colors_standard",
"type": "style",
"uri": "media/templates/site/moko-cassiopeia/css/colors/light/colors_standard.css",
"attributes": {"media": "all"}
},
{
"name": "template.light.colors_standard.min",
"type": "style",
"uri": "media/templates/site/moko-cassiopeia/css/colors/light/colors_standard.min.css",
"attributes": {"media": "all"}
},
{
"name": "template.light.colors_alternative",
"type": "style",
"uri": "media/templates/site/moko-cassiopeia/css/colors/light/colors_alternative.css",
"attributes": {"media": "all"}
},
{
"name": "template.light.colors_alternative.min",
"type": "style",
"uri": "media/templates/site/moko-cassiopeia/css/colors/light/colors_alternative.min.css",
"attributes": {"media": "all"}
},
{
"name": "template.light.colors_custom",
"type": "style",
"uri": "media/templates/site/moko-cassiopeia/css/colors/light/colors_custom.css",
"attributes": {"media": "all"}
},
{
"name": "template.light.colors_custom.min",
"type": "style",
"uri": "media/templates/site/moko-cassiopeia/css/colors/light/colors_custom.min.css",
"attributes": {"media": "all"}
},
{
"name": "template.dark.colors_standard",
"type": "style",
"uri": "media/templates/site/moko-cassiopeia/css/colors/dark/colors_standard.css",
"attributes": {"media": "all"}
},
{
"name": "template.dark.colors_standard.min",
"type": "style",
"uri": "media/templates/site/moko-cassiopeia/css/colors/dark/colors_standard.min.css",
"attributes": {"media": "all"}
},
{
"name": "template.dark.colors_alternative",
"type": "style",
"uri": "media/templates/site/moko-cassiopeia/css/colors/dark/colors_alternative.css",
"attributes": {"media": "all"}
},
{
"name": "template.dark.colors_alternative.min",
"type": "style",
"uri": "media/templates/site/moko-cassiopeia/css/colors/dark/colors_alternative.min.css"
},
{
"name": "template.dark.colors_custom",
"type": "style",
"uri": "media/templates/site/moko-cassiopeia/css/colors/dark/colors_custom.css",
"attributes": {"media": "all"}
},
{
"name": "template.dark.colors_custom.min",
"type": "style",
"uri": "media/templates/site/moko-cassiopeia/css/colors/dark/colors_custom.min.css",
"attributes": {"media": "all"}
},
{
"name": "template.js",
"type": "script",
"uri": "media/templates/site/moko-cassiopeia/js/template.js",
"attributes": {"defer": true}
},
{
"name": "template.js.min",
"type": "script",
"uri": "media/templates/site/moko-cassiopeia/js/template.min.js",
"attributes": {"defer": true}
},
{
"name": "theme-init.js",
"type": "script",
"uri": "media/templates/site/moko-cassiopeia/js/theme-init.js",
"attributes": {"defer": true}
},
{
"name": "theme-init.min.js",
"type": "script",
"uri": "media/templates/site/moko-cassiopeia/js/theme-init.min.js",
"attributes": {"defer": true}
},
{
"name": "darkmode-toggle.js",
"type": "script",
"uri": "media/templates/site/moko-cassiopeia/js/darkmode-toggle.js",
"attributes": {"defer": true}
},
{
"name": "darkmode-toggle.min.js",
"type": "script",
"uri": "media/templates/site/moko-cassiopeia/js/darkmode-toggle.min.js",
"attributes": {"defer": true}
},
{
"name": "gtm.js",
"type": "script",
"uri": "media/templates/site/moko-cassiopeia/js/gtm.js",
"attributes": {"defer": true}
},
{
"name": "gtm.min.js",
"type": "script",
"uri": "media/templates/site/moko-cassiopeia/js/gtm.min.js",
"attributes": {"defer": true}
},
{
"name": "vendor.bootstrap-toc.js",
"type": "script",
"uri": "media/templates/site/moko-cassiopeia/vendor/afeld/bootstrap-toc.min.js",
"attributes": {"defer": true}
},
{
"name": "vendor.bootstrap-toc.js.min",
"type": "script",
"uri": "media/templates/site/moko-cassiopeia/vendor/afeld/bootstrap-toc.min.js",
"attributes": {"defer": true}
},
{
"name": "vendor.fa7free.all",
"type": "style",
"uri": "media/templates/site/moko-cassiopeia/vendor/fa7free/css/all.css"
},
{
"name": "vendor.fa7free.all.min",
"type": "style",
"uri": "media/templates/site/moko-cassiopeia/vendor/fa7free/css/all.min.css",
"attributes": {"media": "all"}
},
{
"name": "vendor.fa7free.brands",
"type": "style",
"uri": "media/templates/site/moko-cassiopeia/vendor/fa7free/css/brands.css",
"attributes": {"media": "all"}
},
{
"name": "vendor.fa7free.brands.min",
"type": "style",
"uri": "media/templates/site/moko-cassiopeia/vendor/fa7free/css/brands.min.css",
"attributes": {"media": "all"}
},
{
"name": "vendor.fa7free.fontawesome",
"type": "style",
"uri": "media/templates/site/moko-cassiopeia/vendor/fa7free/css/fontawesome.css",
"attributes": {"media": "all"}
},
{
"name": "vendor.fa7free.fontawesome.min",
"type": "style",
"uri": "media/templates/site/moko-cassiopeia/vendor/fa7free/css/fontawesome.min.css",
"attributes": {"media": "all"}
},
{
"name": "vendor.fa7free.regular",
"type": "style",
"uri": "media/templates/site/moko-cassiopeia/vendor/fa7free/css/regular.css",
"attributes": {"media": "all"}
},
{
"name": "vendor.fa7free.regular.min",
"type": "style",
"uri": "media/templates/site/moko-cassiopeia/vendor/fa7free/css/regular.min.css",
"attributes": {"media": "all"}
},
{
"name": "vendor.fa7free.solid",
"type": "style",
"uri": "media/templates/site/moko-cassiopeia/vendor/fa7free/css/solid.css",
"attributes": {"media": "all"}
},
{
"name": "vendor.fa7free.solid.min",
"type": "style",
"uri": "media/templates/site/moko-cassiopeia/vendor/fa7free/css/solid.min.css",
"attributes": {"media": "all"}
},
{
"name": "template.global.social-media-demo",
"type": "style",
"uri": "media/templates/site/moko-cassiopeia/css/global/social-media-demo.css",
"attributes": {"media": "all"}
},
{
"name": "vendor.vm",
"type": "style",
"uri": "media/templates/site/moko-cassiopeia/vendor/vm.css",
"attributes": {"media": "all"}
}
]
"$schema": "https://developer.joomla.org/schemas/json-schema/web_assets.json",
"name": "moko-cassiopeia",
"description": "Moko-Cassiopeia template assets",
"license": "GPL-3.0-or-later",
"x-header": {
"copyright_year": 2025,
"author": "Jonathan Miller",
"owner": "Moko Consulting",
"contact": "hello@mokoconsulting.tech",
"project": "Moko-Cassiopeia Template",
"spdx_license": "GPL-3.0-or-later",
"notice": "This file is part of a Moko Consulting project.",
"disclaimer": "This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License; either version 3 of the License, or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details. You should have received a copy of the GNU General Public License along with this program. If not, see https://www.gnu.org/licenses/.",
"repo": "https://github.com/mokoconsulting-tech/moko-cassiopeia",
"file_information": {
"defgroup": "Joomla.Template.Site",
"ingroup": "Moko-Cassiopeia.Template.Assets",
"path": "./media/templates/site/moko-cassiopeia/joomla.asset.json",
"version": "03.00.00",
"brief": "Joomla asset registry for Moko-Cassiopeia"
}
},
"assets": [
{
"name": "template.base",
"type": "style",
"uri": "media/templates/site/moko-cassiopeia/css/template.css",
"attributes": {"media": "all"}
},
{
"name": "template.base.min",
"type": "style",
"uri": "media/templates/site/moko-cassiopeia/css/template.min.css",
"attributes": {"media": "all"}
},
{
"name": "template.user",
"type": "style",
"uri": "media/templates/site/moko-cassiopeia/css/user.css",
"attributes": {"media": "all"}
},
{
"name": "template.user.min",
"type": "style",
"uri": "media/templates/site/moko-cassiopeia/css/user.min.css",
"attributes": {"media": "all"}
},
{
"name": "template.editor",
"type": "style",
"uri": "media/templates/site/moko-cassiopeia/css/editor.css",
"attributes": {"media": "all"}
},
{
"name": "template.editor.min",
"type": "style",
"uri": "media/templates/site/moko-cassiopeia/css/editor.min.css",
"attributes": {"media": "all"}
},
{
"name": "template.light.colors_standard",
"type": "style",
"uri": "media/templates/site/moko-cassiopeia/css/colors/light/colors_standard.css",
"attributes": {"media": "all"}
},
{
"name": "template.light.colors_standard.min",
"type": "style",
"uri": "media/templates/site/moko-cassiopeia/css/colors/light/colors_standard.min.css",
"attributes": {"media": "all"}
},
{
"name": "template.light.colors_alternative",
"type": "style",
"uri": "media/templates/site/moko-cassiopeia/css/colors/light/colors_alternative.css",
"attributes": {"media": "all"}
},
{
"name": "template.light.colors_alternative.min",
"type": "style",
"uri": "media/templates/site/moko-cassiopeia/css/colors/light/colors_alternative.min.css",
"attributes": {"media": "all"}
},
{
"name": "template.light.colors_custom",
"type": "style",
"uri": "media/templates/site/moko-cassiopeia/css/colors/light/colors_custom.css",
"attributes": {"media": "all"}
},
{
"name": "template.light.colors_custom.min",
"type": "style",
"uri": "media/templates/site/moko-cassiopeia/css/colors/light/colors_custom.min.css",
"attributes": {"media": "all"}
},
{
"name": "template.dark.colors_standard",
"type": "style",
"uri": "media/templates/site/moko-cassiopeia/css/colors/dark/colors_standard.css",
"attributes": {"media": "all"}
},
{
"name": "template.dark.colors_standard.min",
"type": "style",
"uri": "media/templates/site/moko-cassiopeia/css/colors/dark/colors_standard.min.css",
"attributes": {"media": "all"}
},
{
"name": "template.dark.colors_alternative",
"type": "style",
"uri": "media/templates/site/moko-cassiopeia/css/colors/dark/colors_alternative.css",
"attributes": {"media": "all"}
},
{
"name": "template.dark.colors_alternative.min",
"type": "style",
"uri": "media/templates/site/moko-cassiopeia/css/colors/dark/colors_alternative.min.css"
},
{
"name": "template.dark.colors_custom",
"type": "style",
"uri": "media/templates/site/moko-cassiopeia/css/colors/dark/colors_custom.css",
"attributes": {"media": "all"}
},
{
"name": "template.dark.colors_custom.min",
"type": "style",
"uri": "media/templates/site/moko-cassiopeia/css/colors/dark/colors_custom.min.css",
"attributes": {"media": "all"}
},
{
"name": "template.js",
"type": "script",
"uri": "media/templates/site/moko-cassiopeia/js/template.js",
"attributes": {"defer": true}
},
{
"name": "template.js.min",
"type": "script",
"uri": "media/templates/site/moko-cassiopeia/js/template.min.js",
"attributes": {"defer": true}
},
{
"name": "theme-init.js",
"type": "script",
"uri": "media/templates/site/moko-cassiopeia/js/theme-init.js",
"attributes": {"defer": true}
},
{
"name": "theme-init.min.js",
"type": "script",
"uri": "media/templates/site/moko-cassiopeia/js/theme-init.min.js",
"attributes": {"defer": true}
},
{
"name": "darkmode-toggle.js",
"type": "script",
"uri": "media/templates/site/moko-cassiopeia/js/darkmode-toggle.js",
"attributes": {"defer": true}
},
{
"name": "darkmode-toggle.min.js",
"type": "script",
"uri": "media/templates/site/moko-cassiopeia/js/darkmode-toggle.min.js",
"attributes": {"defer": true}
},
{
"name": "gtm.js",
"type": "script",
"uri": "media/templates/site/moko-cassiopeia/js/gtm.js",
"attributes": {"defer": true}
},
{
"name": "gtm.min.js",
"type": "script",
"uri": "media/templates/site/moko-cassiopeia/js/gtm.min.js",
"attributes": {"defer": true}
},
{
"name": "vendor.fa7free.all",
"type": "style",
"uri": "media/templates/site/moko-cassiopeia/vendor/fa7free/css/all.css"
},
{
"name": "vendor.fa7free.all.min",
"type": "style",
"uri": "media/templates/site/moko-cassiopeia/vendor/fa7free/css/all.min.css",
"attributes": {"media": "all"}
},
{
"name": "vendor.fa7free.brands",
"type": "style",
"uri": "media/templates/site/moko-cassiopeia/vendor/fa7free/css/brands.css",
"attributes": {"media": "all"}
},
{
"name": "vendor.fa7free.brands.min",
"type": "style",
"uri": "media/templates/site/moko-cassiopeia/vendor/fa7free/css/brands.min.css",
"attributes": {"media": "all"}
},
{
"name": "vendor.fa7free.fontawesome",
"type": "style",
"uri": "media/templates/site/moko-cassiopeia/vendor/fa7free/css/fontawesome.css",
"attributes": {"media": "all"}
},
{
"name": "vendor.fa7free.fontawesome.min",
"type": "style",
"uri": "media/templates/site/moko-cassiopeia/vendor/fa7free/css/fontawesome.min.css",
"attributes": {"media": "all"}
},
{
"name": "vendor.fa7free.regular",
"type": "style",
"uri": "media/templates/site/moko-cassiopeia/vendor/fa7free/css/regular.css",
"attributes": {"media": "all"}
},
{
"name": "vendor.fa7free.regular.min",
"type": "style",
"uri": "media/templates/site/moko-cassiopeia/vendor/fa7free/css/regular.min.css",
"attributes": {"media": "all"}
},
{
"name": "vendor.fa7free.solid",
"type": "style",
"uri": "media/templates/site/moko-cassiopeia/vendor/fa7free/css/solid.css",
"attributes": {"media": "all"}
},
{
"name": "vendor.fa7free.solid.min",
"type": "style",
"uri": "media/templates/site/moko-cassiopeia/vendor/fa7free/css/solid.min.css",
"attributes": {"media": "all"}
},
{
"name": "vendor.vm",
"type": "style",
"uri": "media/templates/site/moko-cassiopeia/css/vendor/vm.css",
"attributes": {"media": "all"}
}
]
}