diff --git a/.mokogitea/manifest.xml b/.mokogitea/manifest.xml index 8147c23..9febe09 100644 --- a/.mokogitea/manifest.xml +++ b/.mokogitea/manifest.xml @@ -8,7 +8,7 @@ Template - MokoOnyx MokoConsulting MokoOnyx - Joomla site template (successor to MokoCassiopeia) - 02.08.00 + 02.09.00 GNU General Public License v3 diff --git a/src/templateDetails.xml b/src/templateDetails.xml index e4fddbd..859482e 100644 --- a/src/templateDetails.xml +++ b/src/templateDetails.xml @@ -36,7 +36,7 @@ Template - MokoOnyx - 02.08.00 + 02.08.00-dev script.php 2026-05-16 Jonathan Miller || Moko Consulting diff --git a/wiki/code-of-conduct.md b/wiki/code-of-conduct.md new file mode 100644 index 0000000..83baeca --- /dev/null +++ b/wiki/code-of-conduct.md @@ -0,0 +1,61 @@ +## Code of Conduct + +This Code of Conduct establishes expectations for behavior within the MokoOnyx project community. The objective is to maintain a professional, inclusive, and respectful environment aligned with open source governance best practices. + +## Scope + +This Code of Conduct applies to all project spaces, including: + +* Repositories, issues, pull requests, discussions, and security advisories. +* Project documentation, workflows, and release processes. +* Any communication channels officially associated with the project. + +## Our Standards + +Participants are expected to: + +* Communicate professionally and respectfully. +* Provide constructive feedback focused on technical merit and project objectives. +* Respect differing viewpoints, experience levels, and backgrounds. +* Follow documented contribution, security, and governance policies. + +Unacceptable behavior includes: + +* Harassment, discrimination, or exclusionary conduct. +* Personal attacks, insults, or inflammatory comments. +* Publishing private information without consent. +* Disruptive behavior that materially interferes with project operations. + +## Enforcement Responsibilities + +Project maintainers are responsible for: + +* Clarifying standards when questions arise. +* Taking appropriate and proportionate corrective action when violations occur. +* Maintaining confidentiality to the extent practical during investigations. + +## Reporting + +Instances of abusive, harassing, or otherwise unacceptable behavior may be reported through: + +* Email: `hello@mokoconsulting.tech` with subject `CODE OF CONDUCT: MokoOnyx`. + +Reports should include relevant context, links, screenshots, or other supporting information. + +## Enforcement Guidelines + +Corrective actions may include, but are not limited to: + +* Private warning or request for corrective action. +* Temporary or permanent restriction from project participation. +* Removal of content that violates this Code of Conduct. + +Decisions are made based on impact, severity, and pattern of behavior. + +## No Retaliation + +Retaliation against individuals who report concerns in good faith is not tolerated. Any retaliatory behavior will be treated as a separate violation. + +## Jurisdiction + +This project is managed from Tennessee, USA. This statement is informational and does not constitute legal advice. diff --git a/wiki/configuration.md b/wiki/configuration.md new file mode 100644 index 0000000..e4b1258 --- /dev/null +++ b/wiki/configuration.md @@ -0,0 +1,147 @@ +[← Back to Home](Home) + +# Configuration + +MokoOnyx is configured through the Joomla template style editor at **System → Site Templates → MokoOnyx**. Parameters are organized into tabbed fieldsets. + +--- + +## Migration Tab + +Informational notes about the MokoCassiopeia migration process. No editable parameters -- this tab provides guidance only. + +--- + +## Advanced Tab + +| Parameter | Type | Default | Description | +|-----------|------|---------|-------------| +| `developmentmode` | Toggle | Off | Enables development mode. When on, `.min` files are deleted and unminified source files are served. When off, minified files are auto-generated. | +| `fluidContainer` | Toggle | Static | Controls whether the main layout uses a fixed-width (`container`) or full-width (`container-fluid`) wrapper. | + +--- + +## Favicon Tab + +| Parameter | Type | Default | Description | +|-----------|------|---------|-------------| +| `favicon_source` | Media picker | _(none)_ | Upload a PNG image. MokoOnyx auto-generates all required favicon sizes, `apple-touch-icon.png`, and `site.webmanifest` on the next page load. | + +--- + +## Google Tab + +| Parameter | Type | Default | Description | +|-----------|------|---------|-------------| +| `googletagmanager` | Toggle | Off | Enable Google Tag Manager integration. | +| `googletagmanagerid` | Text | _(empty)_ | Your GTM container ID (e.g., `GTM-XXXXXXX`). Shown when GTM is enabled. | +| `googleanalytics` | Toggle | Off | Enable Google Analytics (GA4) integration. | +| `googleanalyticsid` | Text | _(empty)_ | Your GA4 measurement ID (e.g., `G-XXXXXXXXXX`). Shown when GA4 is enabled. | +| `googlesitekey` | Text | _(empty)_ | Google site verification meta tag value. | +| `googlevisitordetection` | Toggle | On | When enabled, sends visitor context to GTM/GA4: login status, user group, and page type. Shown when GTM or GA4 is enabled. | + +--- + +## Custom Code Tab + +| Parameter | Type | Default | Description | +|-----------|------|---------|-------------| +| `custom_head_start` | Textarea | _(empty)_ | Raw HTML/JS injected at the **start** of ``. Useful for consent managers or early scripts. | +| `custom_head_end` | Textarea | _(empty)_ | Raw HTML/JS injected at the **end** of ``, before ``. | + +--- + +## Drawers Tab + +| Parameter | Type | Default | Description | +|-----------|------|---------|-------------| +| `drawerLeftIcon` | Text | `fa-solid fa-chevron-right` | Font Awesome class for the left drawer toggle button icon. | +| `drawerRightIcon` | Text | `fa-solid fa-chevron-left` | Font Awesome class for the right drawer toggle button icon. | + +--- + +## Theme Tab + +The Theme tab is the largest configuration area, organized into sub-sections. + +### General + +| Parameter | Type | Default | Description | +|-----------|------|---------|-------------| +| `theme_enabled` | Toggle | On | Master switch for the theme system (light/dark mode). | +| `theme_control_type` | List | Radios | How the user switches themes: **Switch** (Light/Dark toggle), **Radios** (Light/Dark/System), or **None** (no visible control). | +| `theme_default_choice` | List | System | Default theme when no user preference is stored: **System**, **Light**, or **Dark**. | +| `theme_auto_dark` | Toggle | Off | Automatically switch to dark mode based on time of day. | +| `theme_meta_color_scheme` | Toggle | On | Output `` tag for browser chrome theming. | +| `theme_meta_theme_color` | Toggle | On | Output `` tag for mobile browser address bar. | +| `theme_bridge_bs_aria` | Toggle | On | Bridge Bootstrap `data-bs-theme` attribute with ARIA attributes for screen readers. | + +### Variables and Palettes + +| Parameter | Type | Default | Description | +|-----------|------|---------|-------------| +| `colorLightName` | List | Standard | Light theme palette: **Standard** (built-in) or **Custom** (loads `light.custom.css`). | +| `colorDarkName` | List | Standard | Dark theme palette: **Standard** (built-in) or **Custom** (loads `dark.custom.css`). | + +See [Custom Themes](Custom-Themes) for how to create custom palettes. + +### Typography + +| Parameter | Type | Default | Description | +|-----------|------|---------|-------------| +| `useFontScheme` | Grouped list | Roboto (local) | Font family. Options: **None**, **Roboto** (local), **Noto Sans** (local), **Fira Sans** (local). All local fonts are self-hosted for GDPR compliance. | + +### Branding and Icons + +| Parameter | Type | Default | Description | +|-----------|------|---------|-------------| +| `brand` | Toggle | On | Show the brand/logo area in the header. | +| `logoFile` | Media picker | _(none)_ | Logo image file. Shown when brand is enabled. | +| `siteTitle` | Text | MokoOnyx | Site title displayed next to the logo. | +| `siteDescription` | Text | _(empty)_ | Tagline displayed below the site title. | +| `fA6KitCode` | Text | _(empty)_ | Font Awesome 7 Pro Kit code. If empty, the bundled Font Awesome 7 Free is used (2,000+ icons). | + +### Header and Navigation + +| Parameter | Type | Default | Description | +|-----------|------|---------|-------------| +| `stickyHeader` | Toggle | Off | Make the header stick to the top of the viewport on scroll. | +| `backTop` | Toggle | Off | Show a "Back to Top" button when the user scrolls down. | + +### Accessibility + +| Parameter | Type | Default | Description | +|-----------|------|---------|-------------| +| `a11y_toolbar_enabled` | Toggle | On | Master switch for the accessibility toolbar. | +| `a11y_text_resize` | Toggle | On | Allow users to increase/decrease text size. | +| `a11y_color_inversion` | Toggle | On | Allow users to invert page colors. | +| `a11y_high_contrast` | Toggle | On | Allow users to enable high-contrast mode. | +| `a11y_highlight_links` | Toggle | On | Allow users to highlight all links on the page. | +| `a11y_readable_font` | Toggle | On | Allow users to switch to a more readable font. | +| `a11y_pause_animations` | Toggle | On | Allow users to pause CSS animations. | +| `a11y_toolbar_pos` | Hidden | Bottom-right | Toolbar position (fixed to bottom-right in code). | + +### Theme Toggle UI + +| Parameter | Type | Default | Description | +|-----------|------|---------|-------------| +| `theme_fab_enabled` | Toggle | On | Show the floating action button (FAB) for theme switching. | +| `theme_fab_pos` | Hidden | Bottom-right | FAB position (fixed to bottom-right in code). | + +--- + +## CSS Variables Tab + +A read-only reference tab displaying all available CSS custom properties organized by category. See the [CSS Variables](CSS-Variables) page for the full reference. + +--- + +*Built with [MokoStandards](https://git.mokoconsulting.tech/MokoConsulting/MokoStandards-API) -- Moko Consulting* + +--- + +*Repo: [MokoOnyx](https://git.mokoconsulting.tech/MokoConsulting/MokoOnyx) · [MokoStandards](https://git.mokoconsulting.tech/MokoConsulting/moko-platform/wiki/Home)* + +| Revision | Date | Author | Description | +|---|---|---|---| +| 1.0 | 2026-05-09 | Moko Consulting | Initial version | \ No newline at end of file diff --git a/wiki/css-variables.md b/wiki/css-variables.md new file mode 100644 index 0000000..3daf874 --- /dev/null +++ b/wiki/css-variables.md @@ -0,0 +1,234 @@ +[← Back to Home](Home) + +# CSS Variables Reference + +All CSS variables are defined in the theme palette files (`light.standard.css` / `dark.standard.css`) under `:root[data-bs-theme="light"]` or `:root[data-bs-theme="dark"]`. Override any of these in your [custom theme](Custom-Themes) files. + +--- + +## Brand and Theme Colors + +| Variable | Light Default | Dark Default | Description | +|----------|--------------|-------------|-------------| +| `--color-primary` | `#112855` | `#112855` | Primary brand colour | +| `--accent-color-primary` | `#3f8ff0` | `#3f8ff0` | Primary accent colour | +| `--accent-color-secondary` | `#6fb3ff` | `#6fb3ff` | Secondary accent colour | + +## Typography and Body + +| Variable | Light Default | Dark Default | Description | +|----------|--------------|-------------|-------------| +| `--body-font-family` | System sans-serif stack | System sans-serif stack | Base font family | +| `--body-font-size` | `1rem` | `1rem` | Base font size | +| `--body-font-weight` | `400` | `400` | Base font weight | +| `--body-line-height` | `1.5` | `1.5` | Base line height | +| `--body-color` | `#22262a` | `#e6ebf1` | Body text colour | +| `--body-bg` | `#fff` | `#0e1318` | Body background colour | +| `--heading-color` | `inherit` | `#f1f5f9` | Heading text colour | +| `--emphasis-color` | `#000` | `#fff` | Emphasis text colour | +| `--secondary-color` | `#22262abf` | `#e6ebf1bf` | Secondary text colour | +| `--tertiary-color` | `#22262a80` | `#e6ebf180` | Tertiary text colour | +| `--muted-color` | `#6d757e` | `#6d757e` | Muted text colour | +| `--highlight-color` | `#22262a` | `#111` | Highlight text colour | +| `--highlight-bg` | `#fbeea8` | `#ffe28a1a` | Highlight background | + +## Standard Colors + +| Variable | Light Default | Dark Default | +|----------|--------------|-------------| +| `--blue` | `#010156` | `#91a4ff` | +| `--indigo` | `#6812f3` | `#b19cff` | +| `--purple` | `#6f42c2` | `#c0a5ff` | +| `--pink` | `#e93f8e` | `#ff8fc0` | +| `--red` | `#a51f18` | `#ff7a73` | +| `--orange` | `#fd7e17` | `#ff9c4d` | +| `--yellow` | `#ad6200` | `#ffd166` | +| `--green` | `#448344` | `#78d694` | +| `--teal` | `#5abfdd` | `#76e3ff` | +| `--cyan` | `#30638d` | `#6fb7ff` | + +## Gray Scale + +| Variable | Light Default | Dark Default | +|----------|--------------|-------------| +| `--gray-100` | `#f9fafb` | `#161a20` | +| `--gray-200` | `#eaedf0` | `#1b2027` | +| `--gray-300` | `#dfe3e7` | `#222831` | +| `--gray-400` | `#ced4da` | `#2b323b` | +| `--gray-500` | `#adb5bd` | `#36404a` | +| `--gray-600` | `#6d757e` | `#48525d` | +| `--gray-700` | `#484f56` | `#5b6672` | +| `--gray-800` | `#353b41` | `#cfd6de` | +| `--gray-900` | `#22262a` | `#e6ebf1` | + +## Links + +| Variable | Light Default | Dark Default | Description | +|----------|--------------|-------------|-------------| +| `--color-link` | `#224FAA` | `white` | Navigation link colour | +| `--color-hover` | `var(--accent-color-primary)` | `gray` | Navigation hover colour | +| `--link-color` | `#224faa` | `#8ab4f8` | Content link colour | +| `--link-hover-color` | `#424077` | `#c3d6ff` | Content link hover colour | +| `--link-decoration` | `underline` | `underline` | Link text decoration | + +## Navigation + +| Variable | Light Default | Dark Default | Description | +|----------|--------------|-------------|-------------| +| `--mainmenu-nav-link-color` | `white` | `#fff` | Main menu active link colour | +| `--nav-text-color` | `white` | `gray` | Navigation text colour | +| `--nav-bg-color` | `var(--color-link)` | `var(--color-primary)` | Navigation background colour | + +## Layout and Spacing + +| Variable | Light Default | Dark Default | Description | +|----------|--------------|-------------|-------------| +| `--padding-x` | `0.15rem` | `0.15rem` | Horizontal padding | +| `--padding-y` | `0.15rem` | `0.15rem` | Vertical padding | +| `--secondary-bg` | `#eaedf0` | `#151b22` | Secondary background | +| `--tertiary-bg` | `#f9fafb` | `#10151b` | Tertiary background | +| `--nav-toggle-size` | `3rem` | `3rem` | Mobile nav toggle size | + +## Breakpoints + +| Variable | Value | Description | +|----------|-------|-------------| +| `--bp-xs` | `0` | Extra small | +| `--bp-sm` | `576px` | Small | +| `--bp-md` | `768px` | Medium | +| `--bp-lg` | `992px` | Large | +| `--bp-xl` | `1200px` | Extra large | + +## Borders + +| Variable | Light Default | Dark Default | +|----------|--------------|-------------| +| `--border-width` | `1px` | `1px` | +| `--border-style` | `solid` | `solid` | +| `--border-color` | `#dfe3e7` | `#2b323b` | +| `--border-radius` | `.25rem` | `.25rem` | +| `--border-radius-sm` | `.2rem` | `.2rem` | +| `--border-radius-lg` | `.3rem` | `.3rem` | +| `--border-radius-pill` | `50rem` | `50rem` | + +## Shadows + +| Variable | Light Default | Dark Default | +|----------|--------------|-------------| +| `--box-shadow` | `0 .5rem 1rem #00000026` | `0 .5rem 1rem #00000066` | +| `--box-shadow-sm` | `0 .125rem .25rem #00000013` | `0 .125rem .25rem #00000040` | +| `--box-shadow-lg` | `0 1rem 3rem #0000002d` | `0 1rem 3rem #00000080` | + +## Header Background + +| Variable | Light Default | Dark Default | Description | +|----------|--------------|-------------|-------------| +| `--header-background-color` | `#adadad` | `#1a1f2b` | Header fallback colour | +| `--header-background-image` | `url(.../bg.svg)` | `url(.../bg.svg)` | Header background image | +| `--header-background-attachment` | `fixed` | `fixed` | CSS attachment | +| `--header-background-repeat` | `repeat` | `repeat` | CSS repeat | + +## Container Backgrounds + +Each container position (below-topbar, top-a, top-b, sidebar, bottom-a, bottom-b) has these variables: + +| Variable Pattern | Description | +|-----------------|-------------| +| `--container-{position}-bg-image` | Background image (default: `none`) | +| `--container-{position}-bg-color` | Background colour (default: `transparent`) | +| `--container-{position}-bg-position` | Background position | +| `--container-{position}-bg-attachment` | Background attachment | +| `--container-{position}-bg-repeat` | Background repeat | +| `--container-{position}-bg-size` | Background size | +| `--container-{position}-border` | Border style | +| `--container-{position}-border-radius` | Border radius | + +## Forms + +| Variable | Light Default | Dark Default | +|----------|--------------|-------------| +| `--input-color` | `hsl(210, 11%, 15%)` | `#e6ebf1` | +| `--input-bg` | `hsl(210, 20%, 98%)` | `#1a2332` | +| `--input-border-color` | `hsl(210, 14%, 83%)` | `#3a4250` | +| `--input-focus-border-color` | `#8894aa` | `#5472ff` | +| `--form-valid-color` | `#448344` | `#78d694` | +| `--form-invalid-color` | `#a51f18` | `#ff8e86` | + +## Bootstrap Palette + +| Variable | Light Default | Dark Default | +|----------|--------------|-------------| +| `--primary` | `#010156` | `#010156` | +| `--secondary` | `#6d757e` | `#48525d` | +| `--success` | `#448344` | `#4aa664` | +| `--info` | `#30638d` | `#4f7aa0` | +| `--warning` | `#ad6200` | `#c77a00` | +| `--danger` | `#a51f18` | `#c23a31` | +| `--light` | `#f9fafb` | `#1b2027` | +| `--dark` | `#353b41` | `#0f1318` | + +Each palette colour also has `-rgb`, `-text-emphasis`, `-bg-subtle`, and `-border-subtle` variants. + +## Hero / Banner + +| Variable | Description | +|----------|-------------| +| `--hero-height` | Banner height (default: `60vh`) | +| `--hero-color` | Banner text colour | +| `--hero-bg-repeat` | Background repeat | +| `--hero-bg-attachment` | Background attachment | +| `--hero-bg-position` | Background position | +| `--hero-bg-size` | Background size | +| `--hero-overlay-bg` | Overlay background colour | +| `--hero-primary-bg-color` | Primary variant background | +| `--hero-primary-overlay` | Primary variant overlay gradient | +| `--hero-secondary-bg-color` | Secondary variant background | +| `--hero-secondary-overlay` | Secondary variant overlay gradient | +| `--hero-card-*` | Hero card styling (bg, color, overlay, border-radius, padding, max-width) | +| `--hero-alt-card-*` | Alternative hero card styling | + +## Block Colors + +Used for top-a, top-b, bottom-a, bottom-b section backgrounds: + +| Variable | Description | +|----------|-------------| +| `--block-color-1` through `--block-color-4` | Background colours | +| `--block-text-1` through `--block-text-4` | Text colours | +| `--block-highlight-bg` / `--block-highlight-text` | Highlight block | +| `--block-cta-bg` / `--block-cta-text` | Call-to-action block | +| `--block-alert-bg` / `--block-alert-text` | Alert block | + +## Footer + +| Variable | Default | Description | +|----------|---------|-------------| +| `--footer-padding-top` | `1rem` | Top padding | +| `--footer-padding-bottom` | `80px` | Bottom padding (accounts for FAB) | +| `--footer-grid-padding-y` | `2.5rem` | Grid vertical padding | +| `--footer-grid-padding-x` | `0.5em` | Grid horizontal padding | + +## Theme FAB + +| Variable | Light Default | Dark Default | Description | +|----------|--------------|-------------|-------------| +| `--theme-fab-bg` | `var(--color-primary)` | `#e6ebf1` | FAB background | +| `--theme-fab-color` | `#fff` | `#0e1318` | FAB icon colour | +| `--theme-fab-btn-bg` | `rgba(255,255,255,.15)` | `transparent` | FAB button background | +| `--theme-fab-border` | `rgba(255,255,255,0.3)` | `rgba(0,0,0,0.15)` | FAB border colour | + +## Component-Specific Variables + +Additional variables are defined for: VirtueMart (`--vm-*`), Gable (`--gab-*`), accordion, alert, badge, breadcrumb, cards, dropdown, list group, modal, nav tabs/pills, offcanvas, pagination, popover, progress, spinner, table, toast, and tooltip components. See the theme palette files for the complete list. + +--- + +*Built with [MokoStandards](https://git.mokoconsulting.tech/MokoConsulting/MokoStandards-API) -- Moko Consulting* + +--- + +*Repo: [MokoOnyx](https://git.mokoconsulting.tech/MokoConsulting/MokoOnyx) · [MokoStandards](https://git.mokoconsulting.tech/MokoConsulting/moko-platform/wiki/Home)* + +| Revision | Date | Author | Description | +|---|---|---|---| +| 1.0 | 2026-05-09 | Moko Consulting | Initial version | diff --git a/wiki/custom-themes.md b/wiki/custom-themes.md new file mode 100644 index 0000000..bb65091 --- /dev/null +++ b/wiki/custom-themes.md @@ -0,0 +1,125 @@ +[← Back to Home](Home) + +# Custom Themes + +MokoOnyx ships with **standard** light and dark palettes. You can create fully custom colour palettes by overriding CSS variables in dedicated files. + +--- + +## How It Works + +1. MokoOnyx loads a theme CSS file based on the `colorLightName` and `colorDarkName` template parameters +2. When set to **Standard**, it loads `light.standard.css` or `dark.standard.css` +3. When set to **Custom**, it loads `light.custom.css` or `dark.custom.css` +4. The theme file sets all CSS variables inside `:root[data-bs-theme="light"]` or `:root[data-bs-theme="dark"]` + +--- + +## Creating a Custom Palette + +### Step 1: Copy the Template + +MokoOnyx ships starter templates in the `templates/` directory within the template source: + +``` +templates/mokoonyx/templates/light.custom.css +templates/mokoonyx/templates/dark.custom.css +``` + +These are full copies of the standard palettes -- every variable is included so you have a complete starting point. + +### Step 2: Place Files in the Media Directory + +Copy your customized files to the **media** directory (this location survives template updates): + +``` +media/templates/site/mokoonyx/css/theme/light.custom.css +media/templates/site/mokoonyx/css/theme/dark.custom.css +``` + +### Step 3: Select "Custom" in Template Settings + +1. Go to **System → Site Templates → MokoOnyx** +2. Open the **Theme** tab +3. Under **Variables & Palettes**: + - Set **Light Theme** to **Custom** + - Set **Dark Theme** to **Custom** +4. Save + +--- + +## File Locations + +| File | Path | Purpose | +|------|------|---------| +| Light standard | `media/templates/site/mokoonyx/css/theme/light.standard.css` | Built-in light palette (do not edit) | +| Dark standard | `media/templates/site/mokoonyx/css/theme/dark.standard.css` | Built-in dark palette (do not edit) | +| Light custom | `media/templates/site/mokoonyx/css/theme/light.custom.css` | Your custom light palette | +| Dark custom | `media/templates/site/mokoonyx/css/theme/dark.custom.css` | Your custom dark palette | +| Light template | `templates/mokoonyx/templates/light.custom.css` | Starter template (copy from here) | +| Dark template | `templates/mokoonyx/templates/dark.custom.css` | Starter template (copy from here) | + +--- + +## Key Variables to Customize + +The most impactful variables to change for a quick rebrand: + +```css +:root[data-bs-theme="light"] { + /* Brand colours -- the foundation of the entire palette */ + --color-primary: #112855; + --accent-color-primary: #3f8ff0; + --accent-color-secondary: #6fb3ff; + + /* Body */ + --body-color: #22262a; + --body-bg: #fff; + + /* Links */ + --color-link: #224FAA; + --link-color: #224faa; + --link-hover-color: #424077; + + /* Navigation */ + --mainmenu-nav-link-color: white; + --nav-text-color: white; + --nav-bg-color: var(--color-link); + + /* Header */ + --header-background-color: #adadad; +} +``` + +See the [CSS Variables](CSS-Variables) page for a complete reference of all available variables. + +--- + +## Variable Sync on Update + +When MokoOnyx is updated, the installer runs a **CSS variable sync** process. If new variables have been added to the standard palettes, they are automatically appended to your custom palette files with their default values. A notice is displayed in the admin panel telling you how many variables were added. + +This ensures your custom palettes stay compatible with new template features without breaking existing customizations. + +--- + +## Custom CSS and JavaScript + +For additional overrides beyond theme variables, use these files (also update-safe): + +| File | Path | +|------|------| +| Custom CSS | `media/templates/site/mokoonyx/css/user.css` | +| Custom JS | `media/templates/site/mokoonyx/js/user.js` | + +--- + +*Built with [MokoStandards](https://git.mokoconsulting.tech/MokoConsulting/MokoStandards-API) -- Moko Consulting* + +--- + +*Repo: [MokoOnyx](https://git.mokoconsulting.tech/MokoConsulting/MokoOnyx) · [MokoStandards](https://git.mokoconsulting.tech/MokoConsulting/moko-platform/wiki/Home)* + +| Revision | Date | Author | Description | +|---|---|---|---| +| 1.0 | 2026-05-09 | Moko Consulting | Initial version | diff --git a/wiki/development.md b/wiki/development.md new file mode 100644 index 0000000..2907925 --- /dev/null +++ b/wiki/development.md @@ -0,0 +1,230 @@ +[← Back to Home](Home) + +# Development + +This page covers the repository structure, build process, release workflow, and contributing guidelines for MokoOnyx. + +--- + +## Repository Structure + +``` +MokoOnyx/ +├── src/ # Template source (this becomes the installable package) +│ ├── component.php # Component-only page layout +│ ├── error.php # Error page layout +│ ├── index.php # Main template entry point +│ ├── joomla.asset.json # Joomla Web Asset Manager definitions +│ ├── offline.php # Offline page layout +│ ├── script.php # Install/update/uninstall script +│ ├── sync_custom_vars.php # CSS variable sync for custom palettes +│ ├── templateDetails.xml # Joomla template manifest +│ ├── helper/ # PHP helper classes +│ │ └── minify.php # CSS/JS auto-minification +│ ├── html/ # Template overrides (modules, components, layouts) +│ ├── language/ # Language files (en-GB, en-US) +│ ├── media/ # Static assets (installed to media/templates/site/mokoonyx/) +│ │ ├── css/ # Stylesheets +│ │ │ ├── template.css # Main template stylesheet +│ │ │ ├── editor.css # Backend editor stylesheet +│ │ │ ├── offline.css # Offline page styles +│ │ │ ├── a11y-high-contrast.css # High-contrast accessibility mode +│ │ │ ├── user.css # User custom CSS (survives updates) +│ │ │ ├── fonts/ # Local font files (Roboto, Noto Sans, Fira Sans) +│ │ │ └── theme/ # Theme palette files +│ │ │ ├── light.standard.css +│ │ │ └── dark.standard.css +│ │ ├── js/ # JavaScript +│ │ │ ├── template.js # Main template JS +│ │ │ ├── gtm.js # Google Tag Manager integration +│ │ │ └── user.js # User custom JS (survives updates) +│ │ ├── images/ # Template images (bg.svg, etc.) +│ │ ├── fonts/ # Font files +│ │ └── vendor/ # Third-party assets (Font Awesome 7 Free) +│ └── templates/ # Starter files for users +│ ├── light.custom.css # Custom light palette template +│ ├── dark.custom.css # Custom dark palette template +│ └── brand-showcase.html # Brand showcase HTML template +├── Makefile # Build and validation automation +├── composer.json # PHP dependencies (MokoStandards) +├── package.json # Node.js dependencies (minification) +├── phpcs.xml # PHP CodeSniffer configuration +├── phpstan.neon # PHPStan static analysis configuration +├── codeception.yml # Testing configuration +├── updates.xml # Joomla update server manifest +├── tests/ # Test suites +├── scripts/ # Build scripts +├── docs/ # Documentation source +└── build/ / dist/ # Build output (gitignored) +``` + +--- + +## Prerequisites + +- **PHP** 8.1+ +- **Composer** (for MokoStandards CLI and dependencies) +- **Node.js** (optional, for build-time minification with terser/clean-css) +- **Make** (GNU Make or compatible) +- **zip** (or PowerShell for Windows) + +--- + +## Setup + +```bash +# Clone the repository +git clone https://git.mokoconsulting.tech/MokoConsulting/MokoOnyx.git +cd MokoOnyx + +# Install dependencies +make install-deps +``` + +--- + +## Building Packages + +### Build an installable ZIP + +```bash +make build +``` + +This will: + +1. Clean previous build artifacts (`build/` and `dist/`) +2. Minify CSS and JS assets +3. Copy `src/` contents to `build/package/` +4. Create `dist/mokoonyx-{version}.zip` + +### Build a beta release + +```bash +make build-beta +``` + +Creates `dist/mokoonyx-{version}-beta.zip` (skips minification). + +--- + +## Validation + +MokoOnyx uses the **MokoStandards Enterprise API** for code quality checks. + +```bash +# Run all validation checks +make validate + +# Individual checks +make lint # PHP syntax check +make check-joomla # Joomla manifest validation +make check-version # Version consistency across files +make check-xml # XML well-formedness +make check-headers # License header verification +make check-secrets # Credential leak scanning + +# Full repository health check +make health +``` + +--- + +## Releasing + +### Full release pipeline + +```bash +make release +``` + +This runs the complete pipeline: `validate` → `build` → `checksum` + +After the release package is built: + +1. Tag the release: `git tag {version}` +2. Push tags: `git push origin --tags` +3. Create a Gitea release and attach the ZIP from `dist/` + +### Generate checksums + +```bash +make checksum +``` + +Creates SHA-256 checksums for all ZIP files in `dist/`. + +--- + +## Available Make Targets + +| Target | Description | +|--------|-------------| +| `make help` | Show all available targets | +| `make install-deps` | Install Composer dependencies | +| `make update-deps` | Update Composer dependencies | +| `make lint` | PHP syntax check | +| `make check-joomla` | Validate Joomla manifest | +| `make check-version` | Verify version consistency | +| `make check-headers` | Check license headers | +| `make check-secrets` | Scan for leaked credentials | +| `make check-xml` | Validate XML files | +| `make validate` | Run all validation checks | +| `make health` | Full repository health check | +| `make clean` | Clean build artifacts | +| `make minify` | Minify CSS/JS assets | +| `make build` | Build installable ZIP | +| `make build-beta` | Build beta release ZIP | +| `make checksum` | Generate SHA-256 checksums | +| `make release` | Full release pipeline | +| `make version` | Display version and extension info | +| `make security-check` | Composer security audit | +| `make all` | Full pipeline (deps, validate, build, checksum) | + +--- + +## Contributing + +1. Fork the repository on [Gitea](https://git.mokoconsulting.tech/MokoConsulting/MokoOnyx) +2. Create a feature branch from `dev` +3. Make your changes in `src/` +4. Run `make validate` to ensure all checks pass +5. Submit a pull request against `dev` + +### Code Standards + +- All PHP files must include the GPL-3.0-or-later license header +- PHP code must pass syntax checks and PHPStan analysis +- XML files must be well-formed +- Version numbers must be consistent across `README.md`, `templateDetails.xml`, and other version-bearing files +- Attribution goes to **Moko Consulting**, not individual contributors + +### Branching Model + +| Branch | Purpose | +|--------|---------| +| `main` | Stable releases | +| `dev` | Active development | + +--- + +## Testing + +The repository includes a `codeception.yml` configuration for automated testing: + +```bash +# Run tests (requires Codeception via Composer) +vendor/bin/codecept run +``` + +--- + +*Built with [MokoStandards](https://git.mokoconsulting.tech/MokoConsulting/MokoStandards-API) -- Moko Consulting* + +--- + +*Repo: [MokoOnyx](https://git.mokoconsulting.tech/MokoConsulting/MokoOnyx) · [MokoStandards](https://git.mokoconsulting.tech/MokoConsulting/moko-platform/wiki/Home)* + +| Revision | Date | Author | Description | +|---|---|---|---| +| 1.0 | 2026-05-09 | Moko Consulting | Initial version | diff --git a/wiki/governance.md b/wiki/governance.md new file mode 100644 index 0000000..7693ff2 --- /dev/null +++ b/wiki/governance.md @@ -0,0 +1,78 @@ +## Governance Overview + +This document defines the governance framework for the MokoOnyx project. The objective is to ensure clear ownership, predictable decision making, and accountable stewardship across development, releases, and community interaction. + +## Project Ownership + +MokoOnyx is owned and maintained by **Moko Consulting**. Final authority for project direction, releases, and policy enforcement resides with the project owner. + +## Roles and Responsibilities + +### Maintainers + +Maintainers are responsible for: + +* Setting technical direction and release priorities. +* Reviewing and approving pull requests. +* Managing releases and distribution artifacts. +* Enforcing repository policies, including security and conduct requirements. + +### Contributors + +Contributors may: + +* Submit pull requests and issues. +* Propose enhancements and report defects. +* Participate in technical discussions. + +Contributors do not have merge authority unless explicitly granted. + +## Decision Making + +Decisions are made using a maintainers led model: + +* Routine changes are approved through pull request review. +* Material changes affecting architecture, branding, licensing, or release processes require maintainer consensus. +* The project owner retains final decision authority if consensus cannot be reached. + +## Change Management + +Significant changes should: + +* Be documented through issues or pull requests with clear rationale. +* Consider backward compatibility and upgrade impact. +* Include documentation updates when behavior or usage changes. + +## Release Authority + +Only maintainers may: + +* Cut releases and publish artifacts. +* Update version numbers and manifests. +* Publish update metadata or advisories. + +Release processes follow documented workflows and automation standards. + +## Security Governance + +Security issues are governed by the Security Policy (SECURITY.md in the repository). Maintainers are responsible for confidential handling, coordinated disclosure, and publication of advisories when appropriate. + +## Conduct Enforcement + +Behavior within the project is governed by the [Code of Conduct](Code-of-Conduct). Maintainers are responsible for enforcement actions and escalation handling. + +## Conflict Resolution + +Conflicts are handled through: + +* Direct discussion between involved parties when appropriate. +* Maintainer mediation when necessary. +* Final determination by the project owner if required. + +## External Dependencies + +The project depends on Joomla core and other third party components. Governance of upstream projects remains outside the scope of this repository, but upstream changes may influence project decisions. + +## Jurisdiction + +This project is managed from Tennessee, USA. This statement is informational and does not constitute legal advice. diff --git a/wiki/home.md b/wiki/home.md new file mode 100644 index 0000000..e848d9d --- /dev/null +++ b/wiki/home.md @@ -0,0 +1,110 @@ +# MokoOnyx + +A modern, lightweight Joomla site template built on Cassiopeia with Font Awesome 7, Bootstrap 5, dark mode, and analytics integrations. + +--- + +| | | +|---|---| +| **Type** | Joomla Site Template | +| **Version** | 02.01.06 | +| **Joomla** | 5.x / 6.x | +| **PHP** | 8.1+ | +| **License** | GPL-3.0-or-later | +| **Replaces** | MokoCassiopeia (auto-migrates on install) | +| **Platform** | [Gitea](https://git.mokoconsulting.tech/MokoConsulting/MokoOnyx) (primary) | + +--- + +## Overview + +MokoOnyx is an enhancement layer built on Joomla's Cassiopeia template. It maintains minimal core overrides for maximum upgrade compatibility while adding modern features and integrations. + +On install, MokoOnyx automatically migrates settings, content references, and custom files from MokoCassiopeia. After installing, MokoCassiopeia can be safely uninstalled. + +--- + +## Features + +| Feature | Description | +|---------|-------------| +| **Font Awesome 7** | Fully integrated into Joomla's asset manager with 2,000+ icons | +| **Bootstrap 5** | Extended utility classes and responsive grid system | +| **Dark Mode** | Built-in light/dark toggle with system preference detection | +| **Table of Contents** | Automatic TOC generation for long articles | +| **GTM / GA4** | Google Tag Manager and Analytics integration with smart visitor detection (login status, user group, page type) | +| **Template Overrides** | Overrides for all core Joomla modules, Community Builder, and DPCalendar | +| **Cassiopeia Base** | Minimal core overrides for maximum Joomla upgrade compatibility | + +--- + +## Installation + +1. Download the latest `mokoonyx-{version}.zip` from [Releases](https://git.mokoconsulting.tech/MokoConsulting/MokoOnyx/releases) +2. Install via Joomla's Extension Manager (Extensions > Manage > Install) +3. Set MokoOnyx as the default site template (System > Site Templates) +4. If migrating from MokoCassiopeia, settings are auto-migrated on install + +### Requirements + +- Joomla 5.x or 6.x +- PHP 8.1 or higher + +--- + +## Directory Structure + +| Directory | Purpose | +|-----------|---------| +| `html/` | Template overrides for core modules and extensions | +| `css/` | Compiled stylesheets including dark mode | +| `js/` | JavaScript for TOC, dark mode toggle, analytics | +| `images/` | Template images and icons | +| `language/` | Language files | + +--- + +## Configuration + +MokoOnyx template parameters are configured in the Joomla admin under System > Site Templates > MokoOnyx. + +Key parameters include: +- **Dark Mode**: Enable/disable, set default mode +- **Font Awesome**: Enable/disable icon library loading +- **Google Tag Manager**: GTM container ID +- **GA4**: Measurement ID and tracking options +- **Table of Contents**: Auto-generate TOC for articles with heading threshold + +--- + +## Related Wikis + +| Repo | Purpose | +|------|---------| +| [Template-Client-WaaS](https://git.mokoconsulting.tech/MokoConsulting/Template-Client-WaaS/wiki) | Client site template (extends MokoOnyx) | +| [MokoWaaS](https://git.mokoconsulting.tech/MokoConsulting/MokoWaaS/wiki) | WaaS system plugin | +| [joomla-api-mcp](https://git.mokoconsulting.tech/MokoConsulting/joomla-api-mcp/wiki) | Joomla Web Services API MCP | +| [deploy-mcp](https://git.mokoconsulting.tech/MokoConsulting/deploy-mcp/wiki) | Git-based deployment MCP | + +--- + +> **[MokoStandards](https://git.mokoconsulting.tech/MokoConsulting/moko-platform/wiki)** -- central standards hub for all Moko Consulting projects. + +--- + +*Repo: [MokoOnyx](https://git.mokoconsulting.tech/MokoConsulting/MokoOnyx) [MokoStandards](https://git.mokoconsulting.tech/MokoConsulting/moko-platform/wiki/Home)* + +| Revision | Date | Author | Description | +|---|---|---|---| +| 1.0 | 2026-05-09 | Moko Consulting | Initial version | + +--- + +## End-User Documentation + +> **This wiki is for developers and contributors.** For end-user guides (installation, configuration, usage), see the Knowledge Base on our website: +> +> **[MokoOnyx Template Support Articles](https://mokoconsulting.tech/knowledge-base/mokoonyx-template)** +> +> The website documentation covers step-by-step instructions for non-technical users. + diff --git a/wiki/installation.md b/wiki/installation.md new file mode 100644 index 0000000..ef5fbc4 --- /dev/null +++ b/wiki/installation.md @@ -0,0 +1,66 @@ +[← Back to Home](Home) + +# Installation + +## Requirements + +| Requirement | Minimum Version | +|-------------|----------------| +| Joomla | 5.x or 6.x | +| PHP | 8.1 or higher | + +## Download + +Download the latest `mokoonyx-{version}.zip` from the [Releases page](https://git.mokoconsulting.tech/MokoConsulting/MokoOnyx/releases/tag/stable). + +## Install via Joomla Admin + +1. Log in to your Joomla administrator panel +2. Navigate to **System → Install → Extensions** +3. Upload the `mokoonyx-{version}.zip` file +4. Wait for the installer to complete + +The installer performs a preflight check to verify your PHP and Joomla versions meet the minimum requirements. If they do not, installation will be blocked with an error message. + +## Set as Default Template + +1. Navigate to **System → Site Templates** +2. Click the star icon next to **MokoOnyx** to set it as the default site template + +## First Page Load (Migration) + +If you are migrating from MokoCassiopeia, the migration runs automatically during install: + +1. **Visit any page on your site** after installation -- the template activates immediately +2. Check **administrator/logs/mokoonyx.log.php** to confirm the migration completed +3. Once confirmed, uninstall MokoCassiopeia from **Extensions → Manage** + +See the [Migration](Migration) page for full details on what gets migrated. + +## Post-Install Notes + +- The extension is automatically **locked** after install to prevent accidental uninstallation +- Stale `.min` files from previous versions are cleaned automatically +- Favicon stamps are cleared so favicons regenerate on the next page load +- MokoCassiopeia references in article content and modules are automatically updated to MokoOnyx + +## Update Server + +MokoOnyx includes an automatic update server. Joomla will notify you when new versions are available via **System → Update → Extensions**. Two update servers are configured for redundancy: + +| Priority | Server | +|----------|--------| +| 1 | Gitea (git.mokoconsulting.tech) | +| 2 | GitHub (github.com) | + +--- + +*Built with [MokoStandards](https://git.mokoconsulting.tech/MokoConsulting/MokoStandards-API) -- Moko Consulting* + +--- + +*Repo: [MokoOnyx](https://git.mokoconsulting.tech/MokoConsulting/MokoOnyx) · [MokoStandards](https://git.mokoconsulting.tech/MokoConsulting/moko-platform/wiki/Home)* + +| Revision | Date | Author | Description | +|---|---|---|---| +| 1.0 | 2026-05-09 | Moko Consulting | Initial version | diff --git a/wiki/migration.md b/wiki/migration.md new file mode 100644 index 0000000..7bdef24 --- /dev/null +++ b/wiki/migration.md @@ -0,0 +1,119 @@ +[← Back to Home](Home) + +# Migration from MokoCassiopeia + +MokoOnyx is the successor to MokoCassiopeia. The migration runs **automatically during install/update** -- no manual steps are required beyond installing MokoOnyx. + +--- + +## When Does Migration Run? + +The migration runs in the `postflight()` method of the installer script (`script.php`), which executes during both `install` and `update` operations. It checks for existing MokoCassiopeia template styles in the database and only runs if they are found. + +--- + +## What Gets Migrated + +### 1. Template Styles and Parameters + +- All MokoCassiopeia template styles are detected from the `#__template_styles` table +- For each MokoCassiopeia style, a matching MokoOnyx style is created with the same parameters +- The first MokoCassiopeia style's parameters are applied to the installer-created default MokoOnyx style +- Additional styles are created as new entries +- Parameter values are updated to replace `mokocassiopeia` references with `mokoonyx` + +### 2. Default Template Assignment + +If MokoCassiopeia was set as the default site template (`home = 1`), MokoOnyx automatically takes over as the default. The MokoCassiopeia style is unset as default. + +### 3. Custom User Files + +The following files are copied from the MokoCassiopeia media directory to MokoOnyx (only if the destination file does not already exist): + +| File | Purpose | +|------|---------| +| `css/theme/light.custom.css` | Custom light palette | +| `css/theme/dark.custom.css` | Custom dark palette | +| `css/theme/light.custom.min.css` | Minified custom light palette | +| `css/theme/dark.custom.min.css` | Minified custom dark palette | +| `css/user.css` | Custom CSS overrides | +| `css/user.min.css` | Minified custom CSS | +| `js/user.js` | Custom JavaScript | +| `js/user.min.js` | Minified custom JavaScript | + +Source: `media/templates/site/mokocassiopeia/` +Destination: `media/templates/site/mokoonyx/` + +### 4. Content References + +All references to "MokoCassiopeia" and "mokocassiopeia" in article content (`introtext` and `fulltext` columns) and module content are automatically replaced with "MokoOnyx" and "mokoonyx". This covers: + +- Image paths (e.g., `media/templates/site/mokocassiopeia/...`) +- Template name references in custom HTML modules +- Any other text references in content + +### 5. Additional Post-Install Tasks + +These tasks run during every install/update (not just migration): + +| Task | Description | +|------|-------------| +| **Favicon stamp cleared** | Deletes `.favicon_generated` stamp so favicons regenerate. Also removes the old `/images/favicons/` directory and root-level favicon files from previous versions. | +| **Media folder cleaned** | Removes stale `.min.css` and `.min.js` files (regenerated by `MokoMinifyHelper`), unminified vendor files, and deprecated files (`custom.css`, `custom.js`, `template-rtl.css`). | +| **Extension locked** | Sets `locked = 1` in `#__extensions` to prevent accidental uninstallation. | + +--- + +## How to Trigger Migration + +Migration runs automatically during installation. If you need to observe the results: + +1. Install MokoOnyx via **System → Install → Extensions** +2. Go to **System → Site Templates** and verify MokoOnyx appears with your settings +3. Visit any page on your site to confirm the template is active +4. Check **administrator/logs/mokoonyx.log.php** for migration log entries + +--- + +## Re-Running Migration + +The migration runs on every install/update operation via the `postflight()` method. It is safe to re-run because: + +- Style creation checks for existing styles before creating duplicates +- File copies only occur when the destination file does not exist +- Content replacements are idempotent (replacing "MokoOnyx" with "MokoOnyx" is a no-op) + +To force a fresh migration, you can reinstall MokoOnyx by uploading the ZIP package again. + +--- + +## After Migration + +Once you have confirmed everything is working: + +1. Uninstall MokoCassiopeia from **Extensions → Manage** +2. Optionally clean up any remaining MokoCassiopeia files in `media/templates/site/mokocassiopeia/` + +--- + +## Troubleshooting + +| Issue | Solution | +|-------|----------| +| Settings not migrated | Check `administrator/logs/mokoonyx.log.php` for error messages. Verify MokoCassiopeia styles exist in `#__template_styles`. | +| Custom theme files missing | Verify files exist in `media/templates/site/mokocassiopeia/css/theme/`. The copy only runs if the destination does not already exist -- if MokoOnyx files are already present, they are not overwritten. | +| Content references not updated | Check the log for "Content replacement failed" or "Module replacement failed" warnings. Database permissions may be insufficient. | +| PHP version error | MokoOnyx requires PHP 8.1+. The preflight check blocks installation if this is not met. | +| Joomla version error | MokoOnyx requires Joomla 4.4+. The preflight check blocks installation if this is not met. | + +--- + +*Built with [MokoStandards](https://git.mokoconsulting.tech/MokoConsulting/MokoStandards-API) -- Moko Consulting* + +--- + +*Repo: [MokoOnyx](https://git.mokoconsulting.tech/MokoConsulting/MokoOnyx) · [MokoStandards](https://git.mokoconsulting.tech/MokoConsulting/moko-platform/wiki/Home)* + +| Revision | Date | Author | Description | +|---|---|---|---| +| 1.0 | 2026-05-09 | Moko Consulting | Initial version | diff --git a/wiki/minification.md b/wiki/minification.md new file mode 100644 index 0000000..95bae83 --- /dev/null +++ b/wiki/minification.md @@ -0,0 +1,113 @@ +[← Back to Home](Home) + +# Minification + +MokoOnyx includes an automatic CSS/JS minification system that generates `.min` files at runtime based on the development mode setting. + +--- + +## How It Works + +The minification system is implemented in `MokoMinifyHelper` (`helper/minify.php`). It is called from the template's `index.php` on every page load and follows a simple rule: + +- **Development mode OFF** (production): `.min` files are generated from source files when the source is newer or the `.min` file is missing +- **Development mode ON**: all `.min` files are **deleted** so the browser loads unminified source files for debugging + +--- + +## Files Managed + +### CSS Files + +| Source File | Minified Output | +|-------------|----------------| +| `css/template.css` | `css/template.min.css` | +| `css/offline.css` | `css/offline.min.css` | +| `css/editor.css` | `css/editor.min.css` | +| `css/a11y-high-contrast.css` | `css/a11y-high-contrast.min.css` | +| `css/user.css` | `css/user.min.css` | +| `css/theme/light.standard.css` | `css/theme/light.standard.min.css` | +| `css/theme/dark.standard.css` | `css/theme/dark.standard.min.css` | +| `css/theme/light.custom.css` | `css/theme/light.custom.min.css` | +| `css/theme/dark.custom.css` | `css/theme/dark.custom.min.css` | + +### JavaScript Files + +| Source File | Minified Output | +|-------------|----------------| +| `js/template.js` | `js/template.min.js` | +| `js/gtm.js` | `js/gtm.min.js` | +| `js/user.js` | `js/user.min.js` | + +All paths are relative to `media/templates/site/mokoonyx/`. + +--- + +## Staleness Check + +The system uses filesystem modification times to determine whether a `.min` file needs regenerating: + +1. If the source file does not exist, skip it +2. If the `.min` file exists and its modification time is **newer or equal** to the source, skip it +3. Otherwise, read the source, minify it, and write the `.min` file + +This means minification only runs when source files actually change, keeping page load overhead minimal. + +--- + +## CSS Minification + +The CSS minifier performs these transformations: + +1. Remove CSS comments (preserving IE hacks) +2. Remove whitespace around `{ } : ; , > + ~` +3. Collapse remaining whitespace to single spaces +4. Remove trailing semicolons before closing braces (`;}` becomes `}`) +5. Strip leading/trailing whitespace + +--- + +## JavaScript Minification + +The JS minifier performs these transformations: + +1. Remove multi-line comments (`/* ... */`) +2. Remove single-line comments (`//`) while preserving URLs +3. Collapse whitespace +4. Remove spaces around operators and punctuation +5. Restore necessary spaces after keywords (`var`, `let`, `const`, `return`, `typeof`, `instanceof`, `new`, `delete`, `throw`, `case`, `in`, `of`) + +--- + +## Build-Time vs Runtime + +| Context | What Happens | +|---------|-------------| +| **Runtime** (page load) | `MokoMinifyHelper::sync()` runs on every page load. In production mode, it checks timestamps and regenerates stale `.min` files. The overhead is negligible (filesystem stat calls only when files have not changed). | +| **Build-time** (`make build`) | The Makefile runs `make minify` before packaging. This uses the moko-platform `minify.js` script (Node.js) with `terser` and `clean-css` for higher-quality minification. | +| **Install/Update** | The installer script (`script.php`) deletes all `.min.css` and `.min.js` files in the `css/` and `js/` directories so they are cleanly regenerated by the runtime minifier on the first page load. Vendor `.min` files in `vendor/` are not touched. | + +--- + +## Debug Mode Behaviour + +To debug CSS or JS issues: + +1. Go to **System → Site Templates → MokoOnyx** +2. Open the **Advanced** tab +3. Set **Development Mode** to **Yes** +4. Save + +This immediately deletes all `.min` files. The template will load the unminified source files, making browser DevTools inspection straightforward. Remember to turn development mode **off** for production. + +--- + +*Built with [MokoStandards](https://git.mokoconsulting.tech/MokoConsulting/MokoStandards-API) -- Moko Consulting* + +--- + +*Repo: [MokoOnyx](https://git.mokoconsulting.tech/MokoConsulting/MokoOnyx) · [MokoStandards](https://git.mokoconsulting.tech/MokoConsulting/moko-platform/wiki/Home)* + +| Revision | Date | Author | Description | +|---|---|---|---| +| 1.0 | 2026-05-09 | Moko Consulting | Initial version | diff --git a/wiki/roadmap.md b/wiki/roadmap.md new file mode 100644 index 0000000..65a6c4e --- /dev/null +++ b/wiki/roadmap.md @@ -0,0 +1,23 @@ +# Roadmap + +> Auto-generated from project milestones and issues. +> Last updated: 2026-05-11 17:09 UTC + +## Active Milestones + +_No active milestones._ + +## Backlog + +_Issues not yet assigned to a milestone._ + +- [ ] feat: AI-generated page layouts from text prompts (#21) `type: feature` +- [ ] feat: Visual page builder with drag-and-drop (#20) `type: feature` +- [ ] feat: Export/import themes (#19) `type: feature` +- [ ] feat: CSS variable editor (#18) `type: feature` +- [ ] feat: Theme presets (#17) `type: feature` +- [ ] feat: Live preview customizer (#16) `type: feature` +- [ ] bug: site.webmanifest 404 — favicon generator not creating manifest (#1) + +--- +_Generated by [sync-roadmap-wiki](https://git.mokoconsulting.tech/MokoConsulting/MokoOnyx/actions) workflow._ diff --git a/wiki/template-overrides.md b/wiki/template-overrides.md new file mode 100644 index 0000000..a01dcac --- /dev/null +++ b/wiki/template-overrides.md @@ -0,0 +1,123 @@ +[← Back to Home](Home) + +# Template Overrides + +MokoOnyx includes template overrides for Joomla core modules, third-party extensions, and layout files. These overrides are located in `templates/mokoonyx/html/`. + +--- + +## Joomla Core Module Overrides + +| Module | Override File(s) | Description | +|--------|-----------------|-------------| +| `mod_articles_archive` | `default.php` | Articles archive module | +| `mod_articles_categories` | `default.php` | Article categories listing | +| `mod_articles_category` | `default.php` | Articles from a single category | +| `mod_articles_latest` | `default.php` | Latest articles module | +| `mod_articles_news` | `default.php` | News flash / articles newsflash | +| `mod_articles_popular` | `default.php` | Most-read articles | +| `mod_banners` | `default.php` | Banner display module | +| `mod_breadcrumbs` | `default.php` | Breadcrumb navigation | +| `mod_custom` | `default.php`, `hero.php` | Custom HTML module (includes a hero layout variant) | +| `mod_feed` | `default.php` | RSS/Atom feed display | +| `mod_finder` | `default.php` | Smart Search box | +| `mod_footer` | `default.php` | Footer information | +| `mod_languages` | `default.php` | Language switcher | +| `mod_login` | `default.php` | Login form | +| `mod_menu` | `default.php`, `horizontal.php`, `horizontal_component.php`, `horizontal_heading.php`, `horizontal_separator.php`, `horizontal_url.php`, `mainmenu.php`, `mainmenu_component.php`, `mainmenu_heading.php`, `mainmenu_separator.php`, `mainmenu_url.php` | Menu module with horizontal and main menu layouts | +| `mod_random_image` | `default.php` | Random image display | +| `mod_related_items` | `default.php` | Related articles | +| `mod_stats` | `default.php` | Site statistics | +| `mod_syndicate` | `default.php` | Syndication / RSS link | +| `mod_tags_popular` | `default.php` | Popular tags | +| `mod_tags_similar` | `default.php` | Similar tags | +| `mod_users_latest` | `default.php` | Latest registered users | +| `mod_whosonline` | `default.php` | Who's online | +| `mod_wrapper` | `default.php` | iFrame wrapper | + +--- + +## Third-Party Extension Overrides + +### Community Builder + +| Module | Override File(s) | Description | +|--------|-----------------|-------------| +| `mod_cblogin` | `default.php`, `default_logout.php` | Community Builder login/logout module | +| `mod_comprofilermoderator` | `default.php` | CB moderator panel | +| `mod_comprofileronline` | `default.php` | CB online users | + +### DPCalendar + +| Module | Override File(s) | Description | +|--------|-----------------|-------------| +| `mod_dpcalendar_counter` | `default.php` | Event countdown timer | +| `mod_dpcalendar_map` | `default.php` | Event map display | +| `mod_dpcalendar_mini` | `default.php`, `default_icons.php`, `default_map.php`, `default_quickadd.php`, `_scripts.php` | Mini calendar widget | +| `mod_dpcalendar_upcoming` | `default.php`, `_scripts.php` | Upcoming events list | + +### JoomGallery + +| Component View | Override File(s) | Description | +|---------------|-----------------|-------------| +| `com_joomgallery/category` | `default.php`, `default_cat.php` | Gallery category view | +| `com_joomgallery/gallery` | `default.php` | Main gallery view | +| `com_joomgallery/image` | `default.php` | Single image view | + +--- + +## Component Overrides + +| Component | View | Override File(s) | Description | +|-----------|------|-----------------|-------------| +| `com_content` | `article` | `toc-left.php`, `toc-right.php` | Article views with Table of Contents positioned left or right | + +--- + +## Layout Overrides + +| Layout | Override File | Description | +|--------|--------------|-------------| +| `joomla.module` | `card.php` | Module chrome -- wraps any module in a Bootstrap card layout | + +--- + +## Hero Layout (mod_custom) + +The `hero.php` layout for `mod_custom` provides a full-width hero/banner module. It uses the hero CSS variables (`--hero-*`) for styling. Assign a custom HTML module to positions like `banner` or `top-a` and select the "hero" layout in the module's Advanced tab. + +--- + +## Menu Layouts + +MokoOnyx provides two specialized menu layouts: + +- **horizontal** -- A horizontal navigation bar with dropdown support, used for the main site navigation +- **mainmenu** -- An enhanced main menu layout with support for component links, headings, separators, and URL items + +Each layout has sub-templates for different menu item types: `_component`, `_heading`, `_separator`, and `_url`. + +--- + +*Built with [MokoStandards](https://git.mokoconsulting.tech/MokoConsulting/MokoStandards-API) -- Moko Consulting* + +--- + +*Repo: [MokoOnyx](https://git.mokoconsulting.tech/MokoConsulting/MokoOnyx) · [MokoStandards](https://git.mokoconsulting.tech/MokoConsulting/moko-platform/wiki/Home)* + +| Revision | Date | Author | Description | +|---|---|---|---| +| 1.0 | 2026-05-09 | Moko Consulting | Initial version | + +--- + +*Repo: [MokoOnyx](https://git.mokoconsulting.tech/MokoConsulting/MokoOnyx) · [MokoStandards](https://git.mokoconsulting.tech/MokoConsulting/moko-platform/wiki/Home)* + +| Field | Value | +|---|---| +| Minimum Version | 04.07.00 | +| Platform | joomla | + +| Revision | Date | Author | Description | +|---|---|---|---| +| 1.0 | 2026-05-16 | Moko Consulting | Standards compliance update | diff --git a/wiki/unnamed.md b/wiki/unnamed.md new file mode 100644 index 0000000..e4c6c34 --- /dev/null +++ b/wiki/unnamed.md @@ -0,0 +1,92 @@ +## Contributing + +This document defines how to contribute to Moko Consulting projects. + +## Branching Strategy + +All repositories follow this branching model: + +``` +feature/* --> dev --> main +``` + +| Branch | Purpose | Direct push? | +|--------|---------|-------------| +| `main` | Production/release branch | No -- PR merge only | +| `dev` | Integration branch | No -- PR merge only (CI bot whitelisted) | +| `feature/*` | Feature/bugfix work | Yes -- create freely | +| `rc/*` | Release candidates | No -- PR merge only | +| `alpha/*` | Alpha pre-releases | No -- PR merge only | +| `beta/*` | Beta pre-releases | No -- PR merge only | +| `version/*` | Release archive branches | Auto-created by CI | + +### Workflow + +1. Create a `feature/*` branch from `dev` +2. Make changes on the feature branch +3. Open a PR from `feature/*` to `dev` +4. After review, merge to `dev` +5. When ready for release, open a PR from `dev` to `main` +6. Merging to `main` triggers the auto-release pipeline + +### Automated syncing + +- `cascade-dev.yml` automatically forward-merges `main` to `dev` after every push to main +- If there are conflicts, a PR is created automatically + +## Prerequisites + +Contributors are expected to: + +* Have a working understanding of the project's platform (Joomla, Dolibarr, or generic) +* Be familiar with Git and pull request workflows +* Review repository governance documents prior to submitting changes + +### Quick Setup + +```bash +git clone https://git.mokoconsulting.tech/MokoConsulting/.git +cd +git checkout dev +git checkout -b feature/my-change +``` + +## Coding and Formatting Standards + +All contributions must: + +* Follow platform coding standards (Joomla, Dolibarr, PHP PSR) where applicable +* Conform to Moko Consulting repository standards for headers, metadata, and file structure +* Keep YAML workflow files ASCII-only (no em dashes, arrows, or emoji) + +## Commit Messages + +Commit messages should: + +* Use conventional commits format: `type(scope): description` +* Types: feat, fix, chore, docs, refactor, test, ci +* Focus on what changed and why +* Include `[skip ci]` suffix for documentation-only changes + +## Reporting Issues + +Bug reports and enhancement requests should be filed as Gitea issues and include: + +* Clear reproduction steps or use cases +* Expected versus actual behavior +* Relevant environment details + +Security issues must follow the process in SECURITY.md and must not be reported publicly. + +## Review Process + +All pull requests are subject to review. Review criteria include: + +* Technical correctness +* Alignment with project goals +* Maintainability and clarity +* Risk introduced to release and update processes + +## License + +By contributing, you agree that your contributions will be licensed under GPL-3.0-or-later, consistent with the rest of the project.