Installation

The purpose of the file is to return a response of the pure CSS of the template

<?php
/**
 * @copyright   (C) 2021 Dimitrios Grammatikogiannis
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 *
 * This endpoint returns ONLY the CSS contents for the template
 */

 defined('_JEXEC') || die;

/** @var Joomla\CMS\Document\HtmlDocument $this */
$this->setMimeEncoding('text/css');
$this->setCharset('utf-8');

$wa = $this->getWebAssetManager();
$mv = $this->getMediaVersion();
$paramsFontScheme = $this->params->get('useFontScheme', false); // Use a font scheme if set in the template style options
$paramsColorName  = $this->params->get('colorName', 'colors_standard'); // Color Theme

if ($paramsFontScheme) {
  if (stripos($paramsFontScheme, 'https://') === 0) {
    $this->getPreloadManager()->preconnect('https://fonts.googleapis.com/', []);
    $this->getPreloadManager()->preconnect('https://fonts.gstatic.com/', []);
    $wa->registerAndUseStyle('fontscheme.current', $paramsFontScheme, [], []);

    if (preg_match_all('/family=([^?:]*):/i', $paramsFontScheme, $matches) > 0) {
      $fontStyles = '--cassiopeia-font-family-body: "' . str_replace('+', ' ', $matches[1][0]) . '", sans-serif;
  --cassiopeia-font-family-headings: "' . str_replace('+', ' ', isset($matches[1][1]) ? $matches[1][1] : $matches[1][0]) . '", sans-serif;
  --cassiopeia-font-weight-normal: 400;
  --cassiopeia-font-weight-headings: 700;';
    }
  } else {
    $fontStyles = '';
    $wa->registerAndUseStyle('fontscheme.current', $paramsFontScheme, ['version' => 'auto'], []);
  }
} else {
  $fontStyles = '';
}

$wa->registerAndUseStyle('theme.' . $paramsColorName, 'global/' . $paramsColorName . '.css')
  ->useStyle('template.cassiopeia.' . ($this->direction === 'rtl' ? 'rtl' : 'ltr'))
  ->useStyle('template.active.language')
  ->registerAndUseStyle('j-editor-css', 'editor.css', [], [])
  ->useStyle('template.user');

// Get the URLs
$templateCSSUri       = $wa->getAsset('style', 'template.cassiopeia.' . ($this->direction === 'rtl' ? 'rtl' : 'ltr'))->getUri();
$templateColorsUri    = $wa->getAsset('style', 'theme.' . $paramsColorName)->getUri();
$activeLanguageCSSUri = $wa->getAsset('style', 'template.active.language')->getUri();
$userCSSUri           = $wa->getAsset('style', 'template.user')->getUri();
$fontsCSSUri          = $wa->assetExists('style', 'fontscheme.current') ? $wa->getAsset('style', 'fontscheme.current')->getUri() : '';
$editorCSSUri         = $wa->assetExists('style', 'j-editor-css') ? $wa->getAsset('style', 'j-editor-css')->getUri() : '';
$templateCSS          = ($templateCSSUri !== '') ? '@import url("' . $templateCSSUri . '?' . $mv . '");' : '';
$templateColorsCSS    = ($templateColorsUri !== '') ? '@import url("' . $templateColorsUri . '?' . $mv . '");' : '';
$activeLanguageCSS    = ($activeLanguageCSSUri !== '') ? '@import url("' . $activeLanguageCSSUri . '?' . $mv . '");' : '';
$userCSS              = ($userCSSUri !== '') ? '@import url("' . $userCSSUri . '?' . $mv . '");' : '';
$fontsCSS             = ($fontsCSSUri !== '') ? '@import url("' . $fontsCSSUri . '?' . $mv . '");' : '';
$editorCSS            = ($editorCSSUri !== '') ? '@import url("' . $editorCSSUri . '?' . $mv . '");' : '';

/* $editorCSS Fallback */
$edCSS = <<<CSS
hr#system-readmore {
  border-bottom: 3px solid #ccc;
  outline: 3px dashed #f00;
  width: 99%;
  margin-left: auto;
  margin-right: auto;
}

span[lang] {
  padding: 2px;
  border: 1px dashed #bbb;
}
span[lang]:after {
  font-size: smaller;
  color: #f00;
  vertical-align: super;
  content: attr(lang);
}

/*
 * For rendering images inserted using the image plugin.
 * Includes image captions using the HTML5 figure element.
 */
figure.image {
  display: inline-block;
  border: 1px solid gray;
  margin: 0 2px 0 1px;
  background: #f5f2f0;
}

figure.align-left {
  float: left;
}

figure.align-right {
  float: right;
}

figure.image img {
  margin: 8px 8px 0 8px;
}

figure.image figcaption {
  margin: 6px 8px 6px 8px;
  text-align: center;
}

/* Basic styles for Table of Contents plugin (toc) */
.mce-toc {
  border: 1px solid gray;
}

.mce-toc h2 {
  margin: 4px;
}

.mce-toc li {
  list-style-type: none;
}
CSS;

$currentEditorCSS = $editorCSS ?: $edCSS;

echo <<<CSS
@charset "UTF-8";
/* Template CSS          */ $templateCSS
/* Template Colours      */ $templateColorsCSS
/* Active Language CSS   */ $activeLanguageCSS
/* User CSS              */ $userCSS
/* Fonts CSS             */ $fontsCSS
/* Styles for the editor */ $currentEditorCSS
/* Inline                */
:root {
  --hue: 214;
  --template-bg-light: #f0f4fb;
  --template-text-dark: #495057;
  --template-text-light: #ffffff;
  --template-link-color: #2a69b8;
  --template-special-color: #001B4C;
  $fontStyles
}
CSS;

The purpose of this file is to assign Format names to specific format classes (the file below).

Check the tinyMCE docs for further details.

{
  "0": {
    "title": "Headers",
    "items": {
      "0": {
        "title": "Header 1",
        "format": "h1"
      },
      "1": {
        "title": "Header 2",
        "format": "h2"
      },
      "2": {
        "title": "Header 3",
        "format": "h3"
      },
      "3": {
        "title": "Header 4",
        "format": "h4"
      },
      "4": {
        "title": "Header 5",
        "format": "h5"
      },
      "5": {
        "title": "Header 6",
        "format": "h6"
      }
    }
  },
  "1": {
    "title": "Inline",
    "items": {
      "0": {
        "title": "Bold",
        "icon": "bold",
        "format": "bold"
      },
      "1": {
        "title": "Italic",
        "icon": "italic",
        "format": "italic"
      },
      "2": {
        "title": "Underline",
        "icon": "underline",
        "format": "underline"
      },
      "3": {
        "title": "Strikethrough",
        "icon": "strikethrough",
        "format": "strikethrough"
      },
      "4": {
        "title": "Superscript",
        "icon": "superscript",
        "format": "superscript"
      },
      "5": {
        "title": "Subscript",
        "icon": "subscript",
        "format": "subscript"
      },
      "6": {
        "title": "Code",
        "icon": "code",
        "format": "code"
      }
    }
  },
  "2": {
    "title": "Blocks",
    "items": {
      "0": {
        "title": "paragraph",
        "format": "p"
      },
      "1": {
        "title": "Blockquote",
        "format": "blockquote"
      },
      "2": {
        "title": "Div",
        "format": "div"
      },
      "3": {
        "title": "pre",
        "format": "pre"
      }
    }
  },
  "3": {
    "title": "Alignment",
    "items": {
      "0": {
        "title": "Left",
        "icon": "alignleft",
        "format": "alignleft"
      },
      "1": {
        "title": "Center",
        "icon": "aligncenter",
        "format": "aligncenter"
      },
      "2": {
        "title": "Right",
        "icon": "alignright",
        "format": "alignright"
      },
      "3": {
        "title": "Justify",
        "icon": "alignjustify",
        "format": "alignjustify"
      }
    }
  }
}

The purpose of this file is to assign CSS classes (or inline CSS) to specific formats (the file above).

Check the tinyMCE docs for further details.

{
  "alignleft": {
    "selector": "p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img",
    "classes": "text-start"
  },
  "aligncenter": {
    "selector": "p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img",
    "classes": "text-center"
  },
  "alignright": {
    "selector": "p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img",
    "classes": "text-end"
  },
  "alignjustify": {
    "selector": "p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img",
    "classes": "text-justify"
  },
  "bold": {
    "inline": "span",
    "classes": "fw-bold"
  },
  "italic": {
    "inline": "span",
    "classes": "fst-italic"
  },
  "underline": {
    "inline": "span",
    "classes": "text-decoration-underline",
    "exact": "true"
  },
  "strikethrough": {
    "inline": "del",
    "classes": "text-decoration-line-through"
  }
}