custom sass bootstrap builds for channels and site

3 files changed, 116 insertions, 85 deletions

diff --git a/view/theme/redbasic/php/config.php b/view/theme/redbasic/php/config.php
index 344f3ff68..213e441eb 100644
--- a/view/theme/redbasic/php/config.php
+++ b/view/theme/redbasic/php/config.php
@@ -2,6 +2,9 @@
 
 namespace Zotlabs\Theme;
 
+use ScssPhp\ScssPhp\Compiler;
+use ScssPhp\ScssPhp\OutputStyle;
+
 class RedbasicConfig {
 
 	function get_schemas() {
@@ -37,15 +40,12 @@ class RedbasicConfig {
 		}
 
 		$arr = array();
+		$arr['primary_color'] = get_pconfig(local_channel(),'redbasic', 'primary_color');
 		$arr['dark_mode'] = get_pconfig(local_channel(),'redbasic', 'dark_mode');
 		$arr['navbar_dark_mode'] = get_pconfig(local_channel(),'redbasic', 'navbar_dark_mode');
 		$arr['narrow_navbar'] = get_pconfig(local_channel(),'redbasic', 'narrow_navbar' );
 		$arr['nav_bg'] = get_pconfig(local_channel(),'redbasic', 'nav_bg' );
 		$arr['nav_bg_dark'] = get_pconfig(local_channel(),'redbasic', 'nav_bg_dark' );
-		$arr['link_color'] = get_pconfig(local_channel(),'redbasic', 'link_color' );
-		$arr['link_color_dark'] = get_pconfig(local_channel(),'redbasic', 'link_color_dark' );
-		$arr['link_hover_color'] = get_pconfig(local_channel(),'redbasic', 'link_hover_color' );
-		$arr['link_hover_color_dark'] = get_pconfig(local_channel(),'redbasic', 'link_hover_color_dark' );
 		$arr['bgcolor'] = get_pconfig(local_channel(),'redbasic', 'background_color' );
 		$arr['bgcolor_dark'] = get_pconfig(local_channel(),'redbasic', 'background_color_dark' );
 		$arr['background_image'] = get_pconfig(local_channel(),'redbasic', 'background_image' );
@@ -65,15 +65,62 @@ class RedbasicConfig {
 		}
 
 		if (isset($_POST['redbasic-settings-submit'])) {
+			if (isset($_POST['redbasic_primary_color']) || isset($_POST['redbasic_radius'])) {
+
+				$primary_color = '';
+				$radius = floatval($_POST['redbasic_radius']);
+
+				if (preg_match('/^#([A-Fa-f0-9]{3}){1,2}$/', $_POST['redbasic_primary_color'])) {
+					$primary_color = $_POST['redbasic_primary_color'];
+				}
+
+				if ($primary_color || $radius) {
+
+					try {
+						$cache_dir = 'store/[data]/[scss]';
+						if(!is_dir($cache_dir)) {
+							os_mkdir($cache_dir, STORAGE_DEFAULT_PERMISSIONS, true);
+						}
+
+						$options = [
+							'cacheDir' => $cache_dir,
+							'forceRefresh' => false
+						];
+
+						$compiler = new Compiler($options);
+						$compiler->setImportPaths('vendor/twbs/bootstrap/scss');
+						$compiler->setOutputStyle(OutputStyle::COMPRESSED);
+
+						// Set Variables
+						if ($primary_color) {
+							$variables['$primary'] = $primary_color;
+						}
+
+						if ($radius) {
+							$variables['$border-radius'] = $radius . 'rem';
+						}
+
+						// Replace Bootstrap Variables with Customizer Variables
+						$compiler->replaceVariables($variables);
+
+						$bs = $compiler->compileString('@import "bootstrap.scss";');
+
+						set_pconfig(local_channel(), 'redbasic', 'bootstrap', $bs->getCss());
+					} catch (\Exception $e) {
+						logger('scssphp: Unable to compile content');
+					}
+				}
+				else {
+					set_pconfig(local_channel(), 'redbasic', 'bootstrap', '');
+				}
+			}
+
+			set_pconfig(local_channel(), 'redbasic', 'primary_color', $_POST['redbasic_primary_color']);
 			set_pconfig(local_channel(), 'redbasic', 'narrow_navbar', $_POST['redbasic_narrow_navbar']);
 			set_pconfig(local_channel(), 'redbasic', 'navbar_dark_mode', $_POST['redbasic_navbar_dark_mode']);
 			set_pconfig(local_channel(), 'redbasic', 'dark_mode', $_POST['redbasic_dark_mode']);
 			set_pconfig(local_channel(), 'redbasic', 'nav_bg', $_POST['redbasic_nav_bg']);
 			set_pconfig(local_channel(), 'redbasic', 'nav_bg_dark', $_POST['redbasic_nav_bg_dark']);
-			set_pconfig(local_channel(), 'redbasic', 'link_color', $_POST['redbasic_link_color']);
-			set_pconfig(local_channel(), 'redbasic', 'link_color_dark', $_POST['redbasic_link_color_dark']);
-			set_pconfig(local_channel(), 'redbasic', 'link_hover_color', $_POST['redbasic_link_hover_color']);
-			set_pconfig(local_channel(), 'redbasic', 'link_hover_color_dark', $_POST['redbasic_link_hover_color_dark']);
 			set_pconfig(local_channel(), 'redbasic', 'background_color', $_POST['redbasic_background_color']);
 			set_pconfig(local_channel(), 'redbasic', 'background_color_dark', $_POST['redbasic_background_color_dark']);
 			set_pconfig(local_channel(), 'redbasic', 'background_image', $_POST['redbasic_background_image']);
@@ -84,6 +131,9 @@ class RedbasicConfig {
 			set_pconfig(local_channel(), 'redbasic', 'top_photo', $_POST['redbasic_top_photo']);
 			set_pconfig(local_channel(), 'redbasic', 'reply_photo', $_POST['redbasic_reply_photo']);
 			set_pconfig(local_channel(), 'redbasic', 'advanced_theming', $_POST['redbasic_advanced_theming']);
+
+			// This is used to refresh the cache
+			set_pconfig(local_channel(), 'system', 'style_update', time());
 		}
 	}
 
@@ -103,21 +153,18 @@ class RedbasicConfig {
 			'$dark' => t('Dark style'),
 			'$light' => t('Light style'),
 			'$common' => t('Common settings'),
+			'$primary_color' => array('redbasic_primary_color', t('Primary theme color'), $arr['primary_color']),
 			'$dark_mode' => array('redbasic_dark_mode',t('Default to dark mode'),$arr['dark_mode'], '', array(t('No'),t('Yes'))),
 			'$navbar_dark_mode' => array('redbasic_navbar_dark_mode',t('Always use light icons for navbar'),$arr['navbar_dark_mode'], t('Enable this option if you use a dark navbar color in light mode'), array(t('No'),t('Yes'))),
 			'$narrow_navbar' => array('redbasic_narrow_navbar',t('Narrow navbar'),$arr['narrow_navbar'], '', array(t('No'),t('Yes'))),
 			'$nav_bg' => array('redbasic_nav_bg', t('Navigation bar background color'), $arr['nav_bg']),
 			'$nav_bg_dark' => array('redbasic_nav_bg_dark', t('Dark navigation bar background color'), $arr['nav_bg_dark']),
-			'$link_color' => array('redbasic_link_color', t('Link color'), $arr['link_color']),
-			'$link_color_dark' => array('redbasic_link_color_dark', t('Dark link color'), $arr['link_color_dark']),
-			'$link_hover_color' => array('redbasic_link_hover_color', t('Link hover color'), $arr['link_hover_color']),
-			'$link_hover_color_dark' => array('redbasic_link_hover_color_dark', t('Dark link hover color'), $arr['link_hover_color_dark']),
 			'$bgcolor' => array('redbasic_background_color', t('Set the background color'), $arr['bgcolor']),
 			'$bgcolor_dark' => array('redbasic_background_color_dark', t('Set the dark background color'), $arr['bgcolor_dark']),
 			'$background_image' => array('redbasic_background_image', t('Set the background image'), $arr['background_image']),
 			'$background_image_dark' => array('redbasic_background_image_dark', t('Set the dark background image'), $arr['background_image_dark']),
 			'$font_size' => array('redbasic_font_size', t('Set font-size for the entire application'), $arr['font_size'], t('Examples: 1rem, 100%, 16px')),
-			'$radius' => array('redbasic_radius', t('Set radius of corners'), $arr['radius'], t('Example: 4px')),
+			'$radius' => array('redbasic_radius', t('Set radius of corners in rem'), $arr['radius']),
 			'$converse_width' => array('redbasic_converse_width',t('Set maximum width of content region in rem'),$arr['converse_width'], t('Leave empty for default width')),
 			'$top_photo' => array('redbasic_top_photo', t('Set size of conversation author photo'), $arr['top_photo']),
 			'$reply_photo' => array('redbasic_reply_photo', t('Set size of followup author photos'), $arr['reply_photo']),
diff --git a/view/theme/redbasic/php/style.php b/view/theme/redbasic/php/style.php
index 4d5bd42be..056cea1cd 100644
--- a/view/theme/redbasic/php/style.php
+++ b/view/theme/redbasic/php/style.php
@@ -1,32 +1,53 @@
 <?php
 
-if(! App::$install) {
+if(!App::$install) {
 
 	// Get the UID of the channel owner
 	$uid = get_theme_uid();
 
 	if($uid) {
-		load_pconfig($uid,'redbasic');
+		// Load the owners pconfig
+		load_pconfig($uid, 'redbasic');
+
+		$custom_bs = get_pconfig($uid, 'redbasic', 'bootstrap');
+		$nav_bg = get_pconfig($uid, 'redbasic', 'nav_bg');
+		$nav_bg_dark = get_pconfig($uid, 'redbasic', 'nav_bg_dark');
+		$narrow_navbar = get_pconfig($uid,'redbasic','narrow_navbar');
+		$link_color = get_pconfig($uid, 'redbasic', 'link_color');
+		$link_color_dark = get_pconfig($uid, 'redbasic', 'link_color_dark');
+		$link_hover_color = get_pconfig($uid, 'redbasic', 'link_hover_color');
+		$link_hover_color_dark = get_pconfig($uid, 'redbasic', 'link_hover_color_dark');
+		$bgcolor = get_pconfig($uid, 'redbasic', 'background_color');
+		$bgcolor_dark = get_pconfig($uid, 'redbasic', 'background_color_dark');
+		$schema = get_pconfig($uid,'redbasic','schema');
+		$background_image = get_pconfig($uid, 'redbasic', 'background_image');
+		$background_image_dark = get_pconfig($uid, 'redbasic', 'background_image_dark');
+		$font_size = get_pconfig($uid, 'redbasic', 'font_size');
+		$radius = get_pconfig($uid, 'redbasic', 'radius');
+		$converse_width = get_pconfig($uid,'redbasic','converse_width');
+		$top_photo = get_pconfig($uid,'redbasic','top_photo');
+		$reply_photo = get_pconfig($uid,'redbasic','reply_photo');
 	}
+}
+
+$site_bs_path = 'vendor/twbs/bootstrap/dist/css/bootstrap.min.css';
+
+if (file_exists('view/theme/redbasic/css/bootstrap-custom.css')) {
+	// Compiled custom site bootstrap from sass
+	// Run this script from the document root for an example:
+	// php vendor/bin/pscss view/theme/redbasic/css/sample.scss view/theme/redbasic/css/bootstrap-custom.css
+
+	$site_bs_path = 'view/theme/redbasic/css/bootstrap-custom.css';
+}
+
+$bs = $custom_bs ?: file_get_contents($site_bs_path);
 
-	// Load the owners pconfig
-	$nav_bg = get_pconfig($uid, 'redbasic', 'nav_bg');
-	$nav_bg_dark = get_pconfig($uid, 'redbasic', 'nav_bg_dark');
-	$narrow_navbar = get_pconfig($uid,'redbasic','narrow_navbar');
-	$link_color = get_pconfig($uid, 'redbasic', 'link_color');
-	$link_color_dark = get_pconfig($uid, 'redbasic', 'link_color_dark');
-	$link_hover_color = get_pconfig($uid, 'redbasic', 'link_hover_color');
-	$link_hover_color_dark = get_pconfig($uid, 'redbasic', 'link_hover_color_dark');
-	$bgcolor = get_pconfig($uid, 'redbasic', 'background_color');
-	$bgcolor_dark = get_pconfig($uid, 'redbasic', 'background_color_dark');
-	$schema = get_pconfig($uid,'redbasic','schema');
-	$background_image = get_pconfig($uid, 'redbasic', 'background_image');
-	$background_image_dark = get_pconfig($uid, 'redbasic', 'background_image_dark');
-	$font_size = get_pconfig($uid, 'redbasic', 'font_size');
-	$radius = get_pconfig($uid, 'redbasic', 'radius');
-	$converse_width=get_pconfig($uid,'redbasic','converse_width');
-	$top_photo=get_pconfig($uid,'redbasic','top_photo');
-	$reply_photo=get_pconfig($uid,'redbasic','reply_photo');
+if (file_exists('view/css/bootstrap-red.css')) {
+	$bs = $bs . file_get_contents('view/css/bootstrap-red.css');
+}
+
+if(file_exists('view/theme/redbasic/schema/' . $schema . '.css')) {
+	$schemecss = file_get_contents('view/theme/redbasic/schema/' . $schema . '.css');
 }
 
 // Now load the scheme.  If a value is changed above, we'll keep the settings
@@ -71,50 +92,16 @@ if ((!$schema) || ($schema == '---')) {
 
 //Set some defaults - we have to do this after pulling owner settings, and we have to check for each setting
 //individually.  If we don't, we'll have problems if a user has set one, but not all options.
-if (! $nav_bg)
-	$nav_bg = 'rgba(248, 249, 250, 1)';
-
-if (! $nav_bg_dark)
-	$nav_bg_dark = 'rgba(43, 48, 53, 1)';
-
-if (! $link_color)
-	$link_color = '#0d6efd';
-
-if (! $link_color_dark)
-	$link_color_dark = '#6ea8fe';
-
-if (! $link_hover_color)
-	$link_hover_color = '#0a58ca';
-
-if (! $link_hover_color_dark)
-	$link_hover_color_dark = '#9ec5fe';
-
-if (! $bgcolor)
-	$bgcolor = '#fff';
-
-if (! $bgcolor_dark)
-	$bgcolor_dark = '#212529';
-
-if (! $background_image)
-	$background_image = '';
-
-if (! $background_image_dark)
-	$background_image_dark = '';
-
-if (! $font_size)
-	$font_size = '0.875rem';
-
-if (! $radius)
-	$radius = '0.375rem';
-
-if (! $converse_width)
-	$converse_width = '52'; //unit: rem
-
-if(! $top_photo)
-	$top_photo = '2.3rem';
-
-if(! $reply_photo)
-	$reply_photo = '2.3rem';
+$nav_bg = $nav_bg ?: 'rgba(248, 249, 250, 1)';
+$nav_bg_dark = $nav_bg_dark ?: 'rgba(43, 48, 53, 1)';
+$bgcolor = $bgcolor ?: '#fff';
+$bgcolor_dark = $bgcolor_dark ?: '#212529';
+$background_image = $background_image ?: '';
+$background_image_dark = $background_image_dark ?: '';
+$font_size = $font_size ?: '0.875rem';
+$converse_width = $converse_width ?: '52'; //unit: rem
+$top_photo = $top_photo ?: '2.3rem';
+$reply_photo = $reply_photo ?: '2.3rem';
 
 // Apply the settings
 if(file_exists('view/theme/redbasic/css/style.css')) {
@@ -140,16 +127,11 @@ if(file_exists('view/theme/redbasic/css/style.css')) {
 	$options = array (
 		'$nav_bg' => $nav_bg,
 		'$nav_bg_dark' => $nav_bg_dark,
-		'$link_color' => $link_color,
-		'$link_color_dark' => $link_color_dark,
-		'$link_hover_color' => $link_hover_color,
-		'$link_hover_color_dark' => $link_hover_color_dark,
 		'$bgcolor' => $bgcolor,
 		'$bgcolor_dark' => $bgcolor_dark,
 		'$background_image' => $background_image,
 		'$background_image_dark' => $background_image_dark,
 		'$font_size' => $font_size,
-		'$radius' => $radius,
 		'$converse_width' => $converse_width,
 		'$top_photo' => $top_photo,
 		'$reply_photo' => $reply_photo,
@@ -158,8 +140,12 @@ if(file_exists('view/theme/redbasic/css/style.css')) {
 		'$right_aside_width' => $right_aside_width
 	);
 
-	echo strtr($x, $options);
 
+	$o = strtr($x, $options);
+
+	header('Cache-Control: max-age=2592000');
+
+	echo $bs . $o;
 }
 
 // Set the schema to the default schema in derived themes. See the documentation for creating derived themes how to override this.
diff --git a/view/theme/redbasic/php/theme_init.php b/view/theme/redbasic/php/theme_init.php
index cb81165b1..54e6e7be3 100644
--- a/view/theme/redbasic/php/theme_init.php
+++ b/view/theme/redbasic/php/theme_init.php
@@ -2,9 +2,7 @@
 require_once('view/php/theme_init.php');
 
 head_add_css('/library/fork-awesome/css/fork-awesome.min.css');
-head_add_css('/vendor/twbs/bootstrap/dist/css/bootstrap.min.css');
 head_add_css('/library/bootstrap-tagsinput/bootstrap-tagsinput.css');
-head_add_css('/view/css/bootstrap-red.css');
 head_add_css('/library/bootstrap-colorpicker/dist/css/bootstrap-colorpicker.min.css');
 
 head_add_js('/vendor/twbs/bootstrap/dist/js/bootstrap.bundle.min.js');