Jonathan Miller
97d3133843
* Add mod_custom hero layout override and bump version to 03.09.01 Adds src/html/mod_custom/hero.php — a banner-overlay style template override for mod_custom, mirroring Cassiopeia's banner layout pattern. Includes background image support via WebAssetManager and respects the Module Manager's moduleclass_sfx field. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * Ignore and untrack .claude/settings.local.json Adds .claude/settings.local.json to .gitignore and removes it from version control to keep local Claude Code permissions out of the repo. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * Ship custom palette starters and update template description - Add src/templates/light.custom.css and dark.custom.css as starter palette files that ship with the template, giving users a full variable reference to copy and customise - Register src/templates/ folder in templateDetails.xml <files> - Update <description> in templateDetails.xml: correct palette source paths, add Custom CSS & JavaScript section (user.css / user.js), link docs to GitHub repo docs/ directory - Sync en-GB and en-US tpl_mokocassiopeia.sys.ini with same changes, preserving British/American spelling variants; bump version to 03.09.01 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * Add CSS Variables reference tab to template options Adds a new 'CSS Variables' tab to the template configuration with eight documented sections (brand, typography, navigation, header background, container backgrounds, borders/shadows, forms/focus) so site builders can reference all available custom properties without leaving Joomla admin. Also removes external docs links from descriptions in templateDetails.xml and both language files, replacing them with a pointer to the new tab. Fixes stale custom palette source paths in en-GB and en-US ini files. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * Expand CSS Variables tab to full variable reference and add custom-hero class - Replace 8-field CSS Variables tab with 21 comprehensive sections covering all variables from light.standard.css and dark.standard.css - New sections: Links, Layout & Spacing, Breakpoints, Bootstrap Semantic Palette, Bootstrap State Colors, Alert & List Group Colors, Standard Colors/Grays/Opacity, Shadows & Shadow Tokens, Buttons, Cards, Component & Plugin Colors, VirtueMart, Gable - Add custom-hero class to hero.php outer div (always present) - Both en-GB and en-US language files updated Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * Add Google Search Console verification and ensure all Google services coexist - Add googlesitekey param to Google fieldset in templateDetails.xml - Inject <meta name="google-site-verification"> via setMetaData() in index.php, component.php, and offline.php - GTM, GA, and Search Console verification can now all be active simultaneously - Add language strings for new field in en-US and en-GB Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * Add header-aside module position to the right of the logo - New position renders inside .header-brand-wrap, right-aligned via margin-inline-start: auto on .container-header-aside - CSS: .header-brand-wrap uses flexbox so logo stays left, aside floats right - Registered in templateDetails.xml positions list - Language strings added to both en-US and en-GB sys.ini files Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * Add minify build script and generate .min CSS/JS; rename position to brand-aside Build tooling: - Add package.json with clean-css and terser dev dependencies - Add scripts/minify.js: reads joomla.asset.json, auto-detects source/.min pairs, and minifies all template-owned CSS and JS files - Add node_modules/ to .gitignore Generated .min files (all 6 manifest pairs): - css/template.min.css (17.8% saved) - css/editor.min.css (49.4% saved) - css/theme/light.standard.min.css (13.1% saved) - css/theme/dark.standard.min.css (14.4% saved) - js/template.min.js (58.2% saved) - js/gtm.min.js (62.3% saved) Rename: header-aside → brand-aside (position, CSS class, language keys) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * Add hero/banner-overlay CSS variables and wire template.css - Add HERO / BANNER OVERLAY section to light.standard.css and dark.standard.css: --hero-height, --hero-color, --hero-bg-repeat, --hero-bg-attachment, --hero-bg-position, --hero-bg-size, --hero-border-bottom, --hero-overlay-bg (light: 0.1 alpha / dark: 0.3 alpha), --hero-overlay-padding, --hero-overlay-text-align, --hero-overlay-text-color - Replace all hardcoded values in .container-banner .banner-overlay and .overlay with var() references (with fallbacks) - Fix background-position: comma syntax → correct space-separated single-bg value - Add css_vars_hero note field to CSS Variables tab in templateDetails.xml - Add TPL_MOKOCASSIOPEIA_CSS_VARS_HERO_LABEL/DESC to en-US and en-GB - Regenerate .min files Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * Add smooth theme-switch transitions and restore hero .overlay wrapper - Add prefers-reduced-motion-scoped CSS transitions (bg, color, border) on :root, body, and key layout containers so light/dark theme switches animate smoothly instead of snapping - Restore <div class="overlay"> child in hero.php; slim .custom-hero rule to a customisation hook only — visual overlay styles are handled by .overlay child - Regenerate template.min.css Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * Update template.css * Merge duplicate prefers-reduced-motion media queries Consolidate the two @media (prefers-reduced-motion: no-preference) blocks into one — scroll-behavior and theme-switch colour transitions share the same query and are cleaner in a single block. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * Promote offcanvas variables to :root theme files and document in CSS Variables tab - Move --offcanvas-* definitions from component-scoped .offcanvas selector in template.css into :root[data-bs-theme] blocks in light.standard.css and dark.standard.css so they are overridable via user.css at root level - Fix two bugs in the old definitions: --offcanvas-bg was incorrectly set to var(--body-color) (text colour); corrected to var(--body-bg); and --offcanvas-color had a spurious 'color:' prefix - Dark theme uses a heavier box-shadow (0.3 alpha) for better depth perception - Add css_vars_offcanvas field to templateDetails.xml CSS Variables tab - Add en-US and en-GB language strings for the new Offcanvas Panel section - Rebuild all .min CSS files Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * Promote Bootstrap component variables from template.css to :root theme files Move 16 component variable groups from component-scoped selectors in template.css into :root[data-bs-theme] blocks in light.standard.css and dark.standard.css: accordion, breadcrumb, pagination, badge, alert, progress, list-group, dropdown, toast, modal, tooltip, popover, spinner, nav, nav-tabs, nav-pills Dark theme values adapted for dark surfaces: semantic var() references, lighter SVG icon fill colours, heavier shadows, secondary-bg backgrounds. Component selectors in template.css retain only non-variable rules. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * Promote table and backdrop variables to :root theme files Move --table-* and --backdrop-* base definitions from component selectors in template.css into :root[data-bs-theme] blocks in light/dark theme files. Dark table uses white-rgb-based striped/active overlays for proper contrast on dark surfaces. Deduplicate the double --table-active-* declarations that existed in template.css. Backdrop values are identical in both themes. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * Add CSS Variables tab documentation for all promoted Bootstrap components Add LABEL/DESC language strings (en-US + en-GB) for all 17 Bootstrap component variable groups now living in the :root theme files: accordion, alert, badge, backdrop, breadcrumb, dropdown, list-group, modal, nav-tabs, nav-pills, pagination, popover, progress, spinner, table, toast, tooltip Each section documents variables with HTML subheadings (Dimensions, Colours, Typography, Stacking, Animation) and <code> tags for every variable name. British English spellings used throughout en-GB. Adds 34 new lines per language file (17 LABEL + 17 DESC pairs, 80 CSS_VARS_* keys total). XML fields were already present from the prior migration commit. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> --------- Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
190 lines
6.3 KiB
PHP
190 lines
6.3 KiB
PHP
<?php
|
|
/* 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: MokoCassiopeia
|
|
REPO: https://github.com/mokoconsulting-tech/MokoCassiopeia
|
|
PATH: ./templates/mokocassiopeia/component.php
|
|
VERSION: 03.06.02
|
|
BRIEF: Main template index file for MokoCassiopeia 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();
|
|
$input = $app->getInput();
|
|
$document = $app->getDocument();
|
|
$wa = $document->getWebAssetManager();
|
|
|
|
// Template params - Component uses minimal configuration
|
|
$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_googlesitekey = $this->params->get('googlesitekey', null);
|
|
|
|
if (!empty($params_googlesitekey)) {
|
|
$this->setMetaData('google-site-verification', htmlspecialchars($params_googlesitekey, ENT_QUOTES, 'UTF-8'));
|
|
}
|
|
|
|
// 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/mokocassiopeia';
|
|
|
|
// Core template CSS
|
|
$wa->useStyle('template.base'); // css/template.css
|
|
|
|
// Component always uses light theme only (no theme switching)
|
|
$wa->useStyle('template.light.standard'); // css/theme/light.standard.css
|
|
|
|
// Load Osaka font for site title
|
|
$wa->useStyle('template.font.osaka');
|
|
|
|
// Brand: logo from params OR siteTitle
|
|
// -------------------------------------
|
|
$brandHtml = '';
|
|
$logoFile = (string) $this->params->get('logoFile');
|
|
|
|
if ($logoFile !== '') {
|
|
$brandHtml = HTMLHelper::_(
|
|
'image',
|
|
Uri::root(false) . htmlspecialchars($logoFile, ENT_QUOTES, 'UTF-8'),
|
|
$sitename,
|
|
['class' => 'logo d-inline-block', 'loading' => 'eager', 'decoding' => 'async'],
|
|
false,
|
|
0
|
|
);
|
|
} else {
|
|
// If no logo file, show the title (defaults to "MokoCassiopeia" if not set)
|
|
$siteTitle = $this->params->get('siteTitle', 'MokoCassiopeia');
|
|
$brandHtml = '<span class="site-title" title="' . $sitename . '">'
|
|
. htmlspecialchars($siteTitle, ENT_COMPAT, 'UTF-8')
|
|
. '</span>';
|
|
}
|
|
|
|
?>
|
|
<!DOCTYPE html>
|
|
<html class="component" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>" data-bs-theme="light">
|
|
<head>
|
|
<jdoc:include type="metas" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<jdoc:include type="styles" />
|
|
<jdoc:include type="scripts" />
|
|
</head>
|
|
<body class="<?php echo $this->direction === 'rtl' ? 'rtl' : ''; ?>">
|
|
<?php if (!empty($params_googletagmanager) && !empty($params_googletagmanagerid)) :
|
|
$gtmID = htmlspecialchars($params_googletagmanagerid, ENT_QUOTES, 'UTF-8'); ?>
|
|
<!-- Google Tag Manager -->
|
|
<script>
|
|
(function(w,d,s,l,i){
|
|
w[l]=w[l]||[];
|
|
w[l].push({'gtm.start': new Date().getTime(), event:'gtm.js'});
|
|
var f=d.getElementsByTagName(s)[0],
|
|
j=d.createElement(s),
|
|
dl=l!='dataLayer'?'&l='+l:'';
|
|
j.async=true;
|
|
j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;
|
|
f.parentNode.insertBefore(j,f);
|
|
})(window,document,'script','dataLayer','<?php echo $gtmID; ?>');
|
|
</script>
|
|
<!-- End Google Tag Manager -->
|
|
|
|
<!-- Google Tag Manager (noscript) -->
|
|
<noscript>
|
|
<iframe src="https://www.googletagmanager.com/ns.html?id=<?php echo $gtmID; ?>"
|
|
height="0" width="0" style="display:none;visibility:hidden"></iframe>
|
|
</noscript>
|
|
<!-- End Google Tag Manager (noscript) -->
|
|
<?php endif; ?>
|
|
|
|
<?php if (!empty($params_googleanalytics) && !empty($params_googleanalyticsid)) :
|
|
$gaId = htmlspecialchars($params_googleanalyticsid, ENT_QUOTES, 'UTF-8'); ?>
|
|
<!-- Google Analytics (gtag.js) -->
|
|
<script async src="https://www.googletagmanager.com/gtag/js?id=<?php echo $gaId; ?>"></script>
|
|
<script>
|
|
window.dataLayer = window.dataLayer || [];
|
|
function gtag(){dataLayer.push(arguments);}
|
|
gtag('js', new Date());
|
|
gtag('consent', 'default', {
|
|
'ad_storage': 'denied',
|
|
'analytics_storage': 'granted',
|
|
'ad_user_data': 'denied',
|
|
'ad_personalization': 'denied'
|
|
});
|
|
(function(id){
|
|
if (/^G-/.test(id)) {
|
|
gtag('config', id, { 'anonymize_ip': true });
|
|
} else if (/^UA-/.test(id)) {
|
|
gtag('config', id, { 'anonymize_ip': true });
|
|
console.warn('Using a UA- ID. Universal Analytics is sunset; consider migrating to GA4.');
|
|
} else {
|
|
console.warn('Unrecognized Google Analytics ID format:', id);
|
|
}
|
|
})('<?php echo $gaId; ?>');
|
|
</script>
|
|
<!-- End Google Analytics -->
|
|
<?php endif; ?>
|
|
|
|
<?php if ($this->params->get('brand', 1)) : ?>
|
|
<div class="navbar-brand">
|
|
<a class="brand-logo" href="<?php echo $this->baseurl; ?>/">
|
|
<?php echo $brandHtml; ?>
|
|
</a>
|
|
</div>
|
|
<?php endif; ?>
|
|
|
|
<jdoc:include type="message" />
|
|
<jdoc:include type="component" />
|
|
|
|
<footer class="container-footer footer full-width">
|
|
<?php if ($this->countModules('footer-menu', true)) : ?>
|
|
<div class="grid-child footer-menu">
|
|
<jdoc:include type="modules" name="footer-menu" />
|
|
</div>
|
|
<?php endif; ?>
|
|
<?php if ($this->countModules('footer', true)) : ?>
|
|
<div class="grid-child">
|
|
<jdoc:include type="modules" name="footer" style="none" />
|
|
</div>
|
|
<?php endif; ?>
|
|
</footer>
|
|
|
|
<jdoc:include type="modules" name="debug" style="none" />
|
|
</body>
|
|
</html>
|