expose new image sizes to javascript and properly get specified image sizes in react

* 👷 Update workflow to not depend on package lock file

.github/workflows/main.yml

@@ -25,12 +25,11 @@ jobs:
         uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node }}
-          cache: 'npm'
         env:
           NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Install dependencies using npm
-        run: npm ci
+        run: npm install
 
       - name: Build and compile assets
         run: |

app/ACF/Dynamic.php

@@ -0,0 +1,158 @@
+<?php
+
+namespace App\ACF;
+use ourcodeworld\NameThatColor\ColorInterpreter as NameThatColor;
+use App\Utilities;
+
+class Dynamic
+{
+    public function __construct()
+    {
+        add_filter('acf/load_field/name=colour',                [ $this, 'load_colours' ]);
+        add_filter('acf/load_field/name=bg_colour',             [ $this, 'load_colours' ]);
+        add_filter('acf/load_field/name=tint',                  [ $this, 'load_tints' ]);
+        add_filter('acf/load_field/name=bg_tint',               [ $this, 'load_tints' ]);
+        add_filter('acf/load_field/name=container_width',       [ $this, 'container_width' ]);
+        add_filter('acf/load_field/name=fontawesome_regular',   [ $this, 'load_fontawesome_regular_icons' ]);
+        add_filter('acf/load_field/name=fontawesome_solid',     [ $this, 'load_fontawesome_solid_icons' ]);
+        add_filter('acf/load_field/name=fontawesome_brands',    [ $this, 'load_fontawesome_brand_icons' ]);
+        add_action('acf/input/admin_footer',                    [ $this, 'colour_ui' ]);
+    }
+
+    public function load_colours( $field )
+    {
+        $colour = new Utilities\Colour;
+        $NameThatColour = new NameThatColor;
+
+        $colours = $colour->values();
+
+        $field['choices'] = [
+            '0' => __('None', 'badegg'),
+        ];
+
+        foreach($colours as $slug => $hex):
+            $field['choices'][$slug] = '<i class="fas fa-circle" style="color: '. $hex .'"></i> ' . @$NameThatColour->name($hex)['name'];
+        endforeach;
+
+        return $field;
+
+    }
+
+    public function load_tints( $field )
+    {
+        $colour = new Utilities\Colour;
+        $tints = $colour->tints();
+
+        $field['choices'] = [];
+
+        foreach($tints as $slug => $hex):
+            if($slug):
+                $field['choices'][$slug] = ucfirst($slug);
+
+            else:
+                $field['choices'][0] =  __('None', 'badegg');
+            endif;
+        endforeach;
+
+        return $field;
+    }
+
+    public function container_width( $field )
+    {
+        $field['choices'] = [
+            0 => 'Auto',
+            'narrow' => __('Narrow', 'badegg'),
+            'small'  => __('Small', 'badegg'),
+            'medium' => __('Medium', 'badegg'),
+            'large'  => __('Large', 'badegg'),
+            'full'   => __('Edge to edge', 'badegg'),
+        ];
+
+        return $field;
+    }
+
+    public function load_fontawesome_regular_icons( $field )
+    {
+        $field['choices'] = [];
+        $field['choices'] = $this->fontawesome_choices('regular');
+
+        return $field;
+    }
+
+    public function load_fontawesome_solid_icons( $field )
+    {
+        $field['choices'] = [];
+        $field['choices'] = $this->fontawesome_choices('solid');
+
+        return $field;
+    }
+
+    public function load_fontawesome_brand_icons( $field )
+    {
+        $field['choices'] = [];
+        $field['choices'] = $this->fontawesome_choices('brands');
+
+        return $field;
+    }
+
+    public function fontawesome_choices($set = 'solid')
+    {
+        $path = get_stylesheet_directory() . '/resources/json/font-awesome-' . $set . '.json';
+
+        $json = @file_get_contents($path);
+
+        if(!$json) return false;
+        $icons = json_decode($json, true);
+
+        $choices = [
+            '0' => '<i class="fa-solid"></i> <span>Please select an icon</span>',
+        ];
+
+        foreach($icons as $slug => $props):
+            if(in_array($slug, range(0,9))) continue;
+
+            $choices[$slug] = '<i class="fa-'.$set.' fa-'.$slug.'" style="color: #2271b1;"></i> <span>' . (ucwords(str_replace('-', ' ', $slug))) . '</span>';
+        endforeach;
+
+        return $choices;
+    }
+
+    public function colour_ui()
+    { ?>
+
+        <script type="text/javascript">
+            console.log("Script loaded from sage/app/ACF/Dynamic.php");
+
+            (function($) {
+
+                function my_custom_escaping_method( original_value){
+                    return original_value;
+                }
+
+                acf.add_filter('select2_escape_markup', function( escaped_value, original_value, $select, settings, field, instance ){
+                    console.log(field.data('name'));
+
+                    const whitelist = [
+                        'colour',
+                        'bg_colour',
+                        'angle_colour',
+                        'fontawesome_brands',
+                    ];
+
+                    // do something to the original_value to override the default escaping, then return it.
+                    // this value should still have some kind of escaping for security, but you may wish to allow specific HTML.
+                    if (whitelist.includes(field.data( 'name' ))) {
+                        return my_custom_escaping_method( original_value );
+                    }
+
+                    // return
+                    return escaped_value;
+                });
+
+            })(jQuery);
+
+        </script>
+
+    <?php }
+}
+

app/ACF/JSON.php

@@ -0,0 +1,25 @@
+<?php
+
+namespace App\ACF;
+
+class JSON
+{
+    public function __construct()
+    {
+        add_filter('acf/settings/save_json', [$this, 'save']);
+        add_filter('acf/settings/load_json', [$this, 'load']);
+    }
+
+    public function save( $path )
+    {
+        $path = get_stylesheet_directory() . '/resources/acf';
+        return $path;
+    }
+
+    public function load( $paths )
+    {
+        unset($paths[0]);
+        $paths[] = get_stylesheet_directory() . '/resources/acf';
+        return $paths;
+    }
+}

app/ACF/Options.php

@@ -0,0 +1,23 @@
+<?php
+
+namespace App\ACF;
+
+class Options
+{
+    public function __construct()
+    {
+        add_filter('acf/init', [$this, 'company']);
+    }
+
+    public function company()
+    {
+        acf_add_options_page([
+            'page_title'    => __('Global Settings'),
+            'menu_title'    => __('Global Settings'),
+            'menu_slug'     => 'theme-global-settings',
+            'capability'    => 'edit_others_posts',
+            'redirect'      => false,
+            'icon_url'     => 'dashicons-admin-site',
+        ]);
+    }
+}

app/Admin/Comments.php

@@ -0,0 +1,67 @@
+<?php
+
+namespace App\Admin;
+
+class Comments
+{
+    public function __construct()
+    {
+        add_action('admin_init', [$this, 'commentstatusdiv']);                      // Disable comment status div meta box
+        add_action('wp_dashboard_setup', [$this, 'dashboard_activity']);            // Remove the Activity widget
+        add_action('wp_before_admin_bar_render', [$this, 'remove_menu_item']);      // Remove from admin bar
+        add_action('admin_menu', [$this, 'admin_menu']);                            // Remove from backend menu
+        add_action('wp_dashboard_setup', [$this, 'dashboard_recent_comments']);     // Remove Dashboard Meta Box
+        add_filter('comments_rewrite_rules', '__return_empty_array');               // Remove comment rewrite rule
+        add_action('after_theme_setup', [$this, 'theme_support']);                  // Remove comment theme support
+        add_filter('rewrite_rules_array', [$this, 'rewrite']);                      // Clean up rewrite rule
+    }
+
+    public function commentstatusdiv()
+    {
+        remove_meta_box( 'commentstatusdiv', 'post', 'normal' );
+        remove_post_type_support( 'post', 'comments' );
+
+        remove_meta_box( 'commentstatusdiv', 'page', 'normal' );
+        remove_post_type_support( 'page', 'comments' );
+    }
+
+    public function dashboard_activity()
+    {
+        remove_meta_box( 'dashboard_activity', 'dashboard', 'normal' );
+    }
+
+    public function remove_menu_item()
+    {
+        global $wp_admin_bar;
+        $wp_admin_bar->remove_menu('comments');
+    }
+
+    public function admin_menu()
+    {
+        remove_menu_page( 'edit-comments.php' );
+        remove_submenu_page( 'options-general.php', 'options-discussion.php' );
+    }
+
+    public function dashboard_recent_comments()
+    {
+        remove_meta_box( 'dashboard_recent_comments', 'dashboard', 'normal' );
+    }
+
+    public function theme_support()
+    {
+        remove_theme_support('comments');
+    }
+
+    public function rewrite($rules)
+    {
+        foreach ($rules as $rule => $rewrite) {
+          if (preg_match('/.*(feed)/', $rule)) {
+            unset($rules[$rule]);
+          }
+          if (preg_match('/.*(comment-page)/', $rule)) {
+            unset($rules[$rule]);
+          }
+        }
+        return $rules;
+    }
+}

app/Admin/DisablePost.php

@@ -0,0 +1,27 @@
+<?php
+
+namespace App\Admin;
+
+class DisablePost
+{
+    public function __construct()
+    {
+        // add_filter('register_post_type_args', [$this, 'args'], 0, 2);
+        // add_filter('register_taxonomy_args', [$this, 'args'], 0, 2);
+    }
+
+    public function args($args, $type)
+    {
+        $types = [
+            'post',
+            'post_tag',
+            'category',
+        ];
+
+        if(in_array($type, $types)) {
+            $args['public'] = false;
+        }
+
+        return $args;
+    }
+}

app/Admin/Enqueue.php

@@ -0,0 +1,22 @@
+<?php
+
+namespace App\Admin;
+
+class Enqueue
+{
+    public function __construct()
+    {
+        add_action( 'admin_enqueue_scripts',  [$this, 'fontawesome']);
+    }
+
+    public function fontawesome()
+    {
+        wp_enqueue_style(
+            'fontawesome',
+            'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css',
+            false,
+            '6.5.2',
+            'all'
+        );
+    }
+}

app/Admin/Integrations.php

@@ -0,0 +1,24 @@
+<?php
+
+namespace App\Admin;
+
+class Integrations
+{
+    public function __construct()
+    {
+        add_action( 'wp_head',  [$this, 'FathomAnalytics']);
+    }
+
+    public function FathomAnalytics()
+    {
+        $fathomID = get_field('badegg_integrations_fathom_id', 'option');
+
+        if($fathomID && WP_ENV == 'production'): ?>
+
+<!-- Fathom - beautiful, simple website analytics -->
+<script src="https://cdn.usefathom.com/script.js" data-site="<?= $fathomID ?>" defer></script>
+<!-- / Fathom -->
+
+        <?php endif;
+    }
+}

app/Admin/Theme.php

@@ -0,0 +1,35 @@
+<?php
+
+namespace App\Admin;
+use ourcodeworld\NameThatColor\ColorInterpreter as NameThatColor;
+use App\Utilities;
+
+class Theme
+{
+    public function __construct()
+    {
+        add_action( 'after_setup_theme', [$this, 'DynamicPalette'] );
+    }
+
+    public function DynamicPalette()
+    {
+        $colour = new Utilities\Colour;
+        $NameThatColour = new NameThatColor;
+
+        $palette = [];
+
+        $colours = $colour->values();
+
+        foreach($colours as $slug => $hex) {
+            $palette[] = [
+                'name' => esc_html__(@$NameThatColour->name($hex)['name'], 'badegg'),
+                'slug' => $slug,
+                'color' => $hex,
+            ];
+        }
+
+        if(!empty($colours)) {
+            add_theme_support('editor-color-palette', $palette);
+        }
+    }
+}

app/PostTypes/Social.php

@@ -0,0 +1,57 @@
+<?php
+
+namespace App\PostTypes;
+
+class Social
+{
+    public function __construct()
+    {
+        add_action('init', [$this, 'register']);
+    }
+
+    public function register()
+    {
+        $td = 'sage';
+        $postType = 'social';
+
+        register_extended_post_type(
+            $postType,
+            [
+                'menu_position' => 28,
+                'supports' => [
+                    'title',
+                    'page-attributes',
+                ],
+                'menu_icon' => 'dashicons-share',
+                'rewrite' => false,
+                'has_archive' => false,
+                'publicly_queryable' => false,
+                'exclude_from_search' => true,
+                'capability_type' => 'page',
+                'show_in_nav_menus' => false,
+                'admin_cols' => [
+                    'social_link' => [
+                        'title' => __('Social Link', $td),
+                        'meta_key' => 'fontawesome_brands',
+                        'function' => function(){
+                            $icon = get_field('fontawesome_brands');
+                            $url = get_field('url');
+
+                            if($icon): ?>
+
+                                <a
+                                    href="<?= $url ?: '#' ?>"
+                                    class="fa-brands fa-<?= $icon ?>"
+                                    rel="nofollow noindex"
+                                    style="font-size: 2em;"
+                                ></a>
+
+                            <?php endif;
+
+                        },
+                    ],
+                ],
+            ],
+        );
+    }
+}

app/Utilities/Colour.php

@@ -0,0 +1,173 @@
+<?php
+
+namespace App\Utilities;
+
+class Colour
+{
+    public function name2hex($colour = null, $tint = null)
+    {
+        if(!$colour) return false;
+
+        if($colour == 'black'):
+            $hex = '#000000';
+        elseif($colour == 'grey'):
+            $hex = '#808080';
+        elseif($colour == 'white'):
+            $hex = '#FFFFFF';
+        else:
+            // TODO: replace company_info settings page and lookup function
+            $hex = $this->values()[(string)$colour];
+        endif;
+
+        if($tint):
+            $tints = $this->tints();
+            $hex = $this->adjustBrightness($hex, $tints[$tint]);
+        endif;
+
+        return $hex;
+    }
+
+    public function values()
+    {
+        $values = [];
+
+        if(function_exists('get_field')):
+            $colours = get_field('badegg_colours', 'option');
+
+            if($colours):
+                foreach($colours as $index => $props):
+                    $index = $index + 1;
+                    $hex = @$props['hex'];
+
+                    if($hex) $values[$this->latinate($index)] = $hex;
+                endforeach;
+            endif;
+        endif;
+
+        $values['white'] = '#FFFFFF';
+        $values['grey'] = '#808080';
+        $values['black'] = '#000000';
+
+        return $values;
+    }
+
+    public function tints()
+    {
+      return [
+        'lightest'  =>  40,
+        'lighter'   =>  25,
+        'light'     =>  10,
+        '0'         =>   0,
+        'dark'      => -10,
+        'darker'    => -25,
+        'darkest'   => -40,
+      ];
+    }
+
+    public function is_dark($colour = '#FFFFF', $tint = null, $override = null)
+    {
+
+        if($override == 'light') return true;
+        if($override == 'dark') return false;
+
+        // https://css-tricks.com/snippets/php/convert-hex-to-rgb/
+
+        if($tint) $colour = $this->adjustBrightness($colour, $this->tints()[$tint]);
+
+        if ( @$colour[0] == '#' ) {
+            $colour = substr( $colour, 1 );
+        }
+
+        if ( strlen( $colour ) == 6 ) {
+            list( $r, $g, $b ) = [
+                $colour[0] . $colour[1],
+                $colour[2] . $colour[3],
+                $colour[4] . $colour[5],
+            ];
+
+        } elseif ( strlen( $colour ) == 3 ) {
+            list( $r, $g, $b ) = [
+                $colour[0] . $colour[0],
+                $colour[1] . $colour[1],
+                $colour[2] . $colour[2],
+            ];
+
+        } else {
+            return false;
+        }
+
+        $r = hexdec( $r );
+        $g = hexdec( $g );
+        $b = hexdec( $b );
+        // return array( 'red' => $r, 'green' => $g, 'blue' => $b );
+
+        $hsp = sqrt(
+            0.299 * ($r * $r) +
+            0.587 * ($g * $g) +
+            0.114 * ($b * $b)
+        );
+
+        if($hsp > 200) {
+            return false;
+        } else {
+            return true;
+        }
+    }
+
+    public function is_light($colour = '#000000', $tint = null)
+    {
+        if($this->is_dark($colour, $tint)) {
+            return false;
+        } else {
+            return true;
+        }
+    }
+
+    public function adjustBrightness($hex, $steps)
+    {
+      // Steps should be between -255 and 255. Negative = darker, positive = lighter
+      $steps = max(-255, min(255, $steps));
+
+      // Normalize into a six character long hex string
+      $hex = str_replace('#', '', $hex);
+      if (strlen($hex) == 3) {
+          $hex = str_repeat(substr($hex,0,1), 2).str_repeat(substr($hex,1,1), 2).str_repeat(substr($hex,2,1), 2);
+      }
+
+      // Split into three parts: R, G and B
+      $color_parts = str_split($hex, 2);
+      $return = '#';
+
+      foreach ($color_parts as $color) {
+          $color   = hexdec($color); // Convert to decimal
+          $color   = max(0,min(255,$color + $steps)); // Adjust color
+          $return .= str_pad(dechex($color), 2, '0', STR_PAD_LEFT); // Make two char hex code
+      }
+
+      return $return;
+    }
+
+    public function latinate($x = 0)
+    {
+        $latinate = [
+            1 => 'primary',
+            2 => 'secondary',
+            3 => 'tertiary',
+            4 => 'quaternary',
+            5 => 'quinary',
+            6 => 'senary',
+            7 => 'septenary',
+            8 => 'octonary',
+            9 => 'nonary',
+            10 => 'denary',
+            11 => 'undenary',
+            12 => 'duodenary',
+        ];
+
+        if(array_key_exists($x, $latinate)):
+            return $latinate[$x];
+        else:
+            return 0;
+        endif;
+    }
+}

app/Utilities/CssClasses.php

@@ -0,0 +1,144 @@
+<?php
+
+namespace App\Utilities;
+
+class CssClasses {
+    public function section($props = [], $name = 'unnamed', $knockout = false)
+    {
+        $defaults = [
+            'padding_top' => null,
+            'padding_bottom' => null,
+            'bg_colour' => null,
+            'bg_tint' => null,
+            'contrast' => null,
+            'bg_image' => null,
+        ];
+
+        $props = wp_parse_args($props, $defaults);
+
+        $Colour = new Colour;
+        $hex = $Colour->name2hex($props['bg_colour'], $props['bg_tint']);
+
+        $classes = [
+            'section',
+            'section-' . str_replace('/', '-', $name),
+        ];
+
+        if($props['bg_colour'])
+            $classes[] = 'bg-' . $this->colourTint([
+                'colour' => $props['bg_colour'],
+                'tint' => $props['bg_tint'],
+            ]);
+
+        if(($props['contrast'] && $knockout))
+            $classes[] = 'knockout';
+
+        if(!$props['padding_top'])
+            $classes[] = 'section-zero-top';
+
+        if(!$props['padding_bottom'])
+            $classes[] = 'section-zero-bottom';
+
+        if($props['bg_image'])
+            $classes[] = "has-bg-image";
+
+        return $classes;
+    }
+
+    public function container($args = [], $bg_props = [])
+    {
+        $args = wp_parse_args($args, [
+            'width' => null,
+            'location' => null,
+            'section' => false,
+            'align' => null,
+            'wysiwyg' => false,
+        ]);
+
+        $bg_props = wp_parse_args($bg_props, [
+            'bg_colour' => null,
+            'bg_tint' => null,
+            'contrast' => null,
+        ]);
+
+        $Colour = new Colour;
+        $hex = $Colour->name2hex($bg_props['bg_colour'], $bg_props['bg_tint']);
+
+        $classes = [
+            'container',
+        ];
+
+        if($args['width'])
+            $classes[] = 'container-' . $args['width'];
+
+        if($args['location'])
+            $classes[] = $args['location'];
+
+        if($args['section'])
+            $classes[] = 'section';
+
+        if(str_contains($args['location'], 'intro'))
+            $classes[] = 'section-zero-top';
+
+        if(str_contains($args['location'], 'footer'))
+            $classes[] = 'section-zero-bottom';
+
+        if($args['wysiwyg'])
+            $classes[] = 'wysiwyg';
+
+        if($args['align'])
+            $classes[] = 'align-' . $args['align'];
+
+        if(($bg_props['contrast']))
+            $classes[] = 'knockout';
+
+        return $classes;
+    }
+
+    public function button($args = [])
+    {
+        $default_args = [
+            'colour' => null,
+            'style' => null,
+        ];
+
+        $args = wp_parse_args($args, $default_args);
+
+        $classes = [
+            'button',
+        ];
+
+        if($args['colour']) $classes[] = $args['colour'];
+        if($args['style']) $classes[] = $args['style'];
+
+        return $classes;
+    }
+
+    public function colourTint($props = [])
+    {
+        if(@$props['colour']):
+            $colour = $props['colour'];
+
+            if($props['colour'] != 'black' && @$props['tint']):
+                $colour .= '-' . $props['tint'];
+            endif;
+        else:
+            $colour = 'white';
+        endif;
+
+        return $colour;
+    }
+
+    public function is_knockout_block($name = null)
+    {
+        $blacklist = [
+            'badegg/acfdemo',
+        ];
+
+        if(in_array($name, $blacklist)):
+            return false;
+        else:
+            return true;
+        endif;
+    }
+}

app/Utilities/ImageSrcset.php

@@ -0,0 +1,124 @@
+<?php
+
+namespace App\Utilities;
+
+class ImageSrcset
+{
+    public function add($args = [])
+    {
+        $args = wp_parse_args($args, $this->default_args());
+        $multipliers = $this->multipliers();
+
+        if(is_null($args['height'])) $args['height'] = $args['width'];
+
+
+        if($args['sizes'] < 5) $multipliers = array_slice($multipliers, 0, $args['sizes']);
+
+        foreach ( $multipliers as $slug => $scale ):
+            add_image_size (
+                $args['name'] . '-' . $slug,
+                round((int)$args['width'] * $scale),
+                round((int)$args['height'] * $scale),
+                $args['crop']
+            );
+        endforeach;
+    }
+
+    public function default_args()
+    {
+        return [
+            'name' => 'hero',
+            'width' => 1920,
+            'height' => null,
+            'crop' => true,
+            'sizes' => 5,
+        ];
+    }
+
+    public function multipliers()
+    {
+        return [
+            'xl' => 1,
+            'lg' => 0.75,
+            'md' => 0.52083333,
+            'sm' => 0.33333333,
+            'xs' => 0.20833333,
+        ];
+    }
+
+    public function render($args = [])
+    {
+        global $_wp_additional_image_sizes;
+
+        $default_args = [
+            'name' => 'hero',
+            'image' => null,
+            'lazy' => true,
+            'sizes' => 5,
+            'class' => null,
+        ];
+
+        $args = wp_parse_args($args, $default_args);
+        $name = $args['name'];
+        $image = ($args['image']) ? $args['image'] : get_post_thumbnail_id();
+
+        if(!$image) return false;
+
+        $properties = @$_wp_additional_image_sizes[$name . '-xl'];
+        $width = @$properties['width'];
+        $height = @$properties['height'];
+
+        $sizes = [
+          'xl' => 1,
+          'lg' => 0.75,
+          'md' => 0.52083333,
+          'sm' => 0.33333333,
+          'xs' => 0.20833333,
+        ];
+
+        if($args['sizes'] < 5) $sizes = array_slice($sizes, 0, $args['sizes']);
+
+        $class = $name . '-image';
+        if($args['class']) $class .= ' ' . $args['class'];
+
+        ob_start();
+
+        $full = wp_get_attachment_image_src($image, $name . '-xl');
+        $lazy = wp_get_attachment_image_src($image, 'lazy');
+        $alt = get_post_meta( $image, '_wp_attachment_image_alt', true );
+
+        $srcsets = [];
+        foreach($sizes as $size => $multiplier) {
+            $file = wp_get_attachment_image_src($image, $name . '-' . $size);
+            $srcsets[] = $file[0] . ' ' . $file[1] . 'w';
+        }
+
+        $atts = [
+        'class' => $class,
+        'src' => $full[0],
+        'srcset' => implode(', ', $srcsets),
+        'width' => $width,
+        'height' => $height,
+        'alt' => $alt,
+        ];
+
+        if($args['lazy']):
+            $atts['class'] .= ' lazy';
+            $atts['src'] = $lazy[0];
+            $atts['srcset'] = null;
+            $atts['data-src'] = $full[0];
+            $atts['data-srcset'] = implode(', ', $srcsets);
+        endif;
+
+    ?>
+
+        <img
+            <?php foreach($atts as $att => $value):
+                if($value) echo $att . '="' . $value . '" ';
+            endforeach; ?>
+        />
+
+    <?php
+        return ob_get_clean();
+    }
+}

app/Utilities/RestAPI.php

@@ -0,0 +1,105 @@
+<?php
+
+namespace App\Utilities;
+use ourcodeworld\NameThatColor\ColorInterpreter as NameThatColor;
+
+class RestAPI
+{
+    public function __construct()
+    {
+        add_filter( 'wp_prepare_attachment_for_js', [$this, 'image_sizes'], 10, 3 );
+        add_action( 'rest_api_init', [$this, 'blocks']);
+    }
+
+    public function image_sizes( $response, $attachment, $meta )
+    {
+        if ( empty( $response['sizes'] ) || empty( $meta['sizes'] ) ) {
+            return $response;
+        }
+
+        $custom_sizes = [ 'hero', 'lazy' ];
+
+        foreach ( $custom_sizes as $size ) {
+            if ( ! empty( $meta['sizes'][ $size ] ) ) {
+                $response['sizes'][ $size ] = [
+                    'url'         => wp_get_attachment_image_url( $attachment->ID, $size ),
+                    'width'       => $meta['sizes'][ $size ]['width'],
+                    'height'      => $meta['sizes'][ $size ]['height'],
+                    'orientation' =>
+                        $meta['sizes'][ $size ]['height'] > $meta['sizes'][ $size ]['width']
+                            ? 'portrait'
+                            : 'landscape',
+                ];
+            }
+        }
+
+        return $response;
+    }
+
+    public function blocks( )
+    {
+        $restBase = 'badegg/v1';
+
+        register_rest_route($restBase, '/blocks/config', [
+            'methods' => 'GET',
+            'callback' => [ $this, 'config'],
+            'permission_callback' => function(){
+                return true;
+            },
+        ]);
+    }
+
+    public function config()
+    {
+        return rest_ensure_response([
+            'container' => $this->containerWidths(),
+            'colours' => $this->colours(),
+            'tints' => $this->tints(),
+        ]);
+    }
+
+    public function containerWidths()
+    {
+        return [
+            [ 'label' => __('Auto', 'badegg'),          'value' => 0        ],
+            [ 'label' => __('Narrow', 'badegg'),        'value' => 'narrow' ],
+            [ 'label' => __('Small', 'badegg'),         'value' => 'small'  ],
+            [ 'label' => __('Medium', 'badegg'),        'value' => 'medium' ],
+            [ 'label' => __('Large', 'badegg'),         'value' => 'large'  ],
+            [ 'label' => __('Edge to edge', 'badegg'),  'value' => 'full'   ],
+        ];
+    }
+
+    public function colours()
+    {
+        $colour = new Colour;
+        $NameThatColour = new NameThatColor;
+
+        $palette = [];
+
+        $colours = $colour->values();
+
+        foreach($colours as $slug => $hex) {
+            $palette[] = [
+                'name' => esc_html__(@$NameThatColour->name($hex)['name'], 'badegg'),
+                'slug' => $slug,
+                'color' => $hex,
+            ];
+        }
+
+        return $palette;
+    }
+
+    public function tints()
+    {
+        return [
+            ['label' => __('Lightest',  'badegg'), 'value' => 'lightest'],
+            ['label' => __('Lighter',   'badegg'), 'value' => 'lighter' ],
+            ['label' => __('Light',     'badegg'), 'value' => 'light'   ],
+            ['label' => __('None',      'badegg'), 'value' => 0         ],
+            ['label' => __('Dark',      'badegg'), 'value' => 'dark'    ],
+            ['label' => __('Darker',    'badegg'), 'value' => 'darker'  ],
+            ['label' => __('Darkest',   'badegg'), 'value' => 'darkest' ],
+        ];
+    }
+}

app/Utilities/VideoSrcset.php

@@ -0,0 +1,39 @@
+<?php
+
+namespace App\Utilities;
+
+class VideoSrcset
+{
+    public function sizes($video_srcset = [])
+    {
+        if(empty($video_srcset)) return false;
+
+        $sizes = [];
+
+        foreach($video_srcset as $size => $video):
+            if($video):
+                $sizes[$size] = $video['width'];
+            endif;
+        endforeach;
+
+        if(!empty($sizes)):
+            return json_encode($sizes);
+        else:
+            return false;
+        endif;
+    }
+
+    public function smallest($video_srcset = [])
+    {
+        if(empty($video_srcset)) return false;
+
+        $smallest = null;
+
+        foreach($video_srcset as $size => $video):
+            if($smallest) continue;
+            if($video) $smallest = $size;
+        endforeach;
+
+        return $smallest;
+    }
+}

app/View/Composers/App.php

@@ -3,6 +3,7 @@
 namespace App\View\Composers;
 
 use Roots\Acorn\View\Composer;
+use App\Utilities;
 
 class App extends Composer
 {
@@ -16,24 +17,20 @@ class App extends Composer
     ];
 
     /**
-     * Data to be passed to view before rendering.
-     *
-     * @return array
+     * Retrieve the site name.
      */
-    public function with()
-    {
-        return [
-            'siteName' => $this->siteName(),
-        ];
-    }
-
-    /**
-     * Returns the site name.
-     *
-     * @return string
-     */
-    public function siteName()
+    public function siteName(): string
     {
         return get_bloginfo('name', 'display');
     }
+
+    public function with()
+    {
+        return [
+            'Colour' => new Utilities\Colour,
+            'VideoSrcset' => new Utilities\VideoSrcset,
+            'ImageSrcset' => new Utilities\ImageSrcset,
+            'siteName' => $this->siteName(),
+        ];
+    }
 }

app/View/Composers/Blocks.php

@@ -0,0 +1,31 @@
+<?php
+
+namespace App\View\Composers;
+
+use Roots\Acorn\View\Composer;
+use App\Utilities;
+
+class Blocks extends Composer
+{
+    /**
+     * List of views served by this composer.
+     *
+     * @var array
+     */
+    protected static $views = [
+        'layouts.block-acf',
+        'partials.block-*',
+    ];
+
+    /**
+     * Data to be passed to view before rendering.
+     *
+     * @return array
+     */
+    public function with()
+    {
+        return [
+            'CssClasses' => new Utilities\CssClasses,
+        ];
+    }
+}

app/View/Composers/Comments.php

@@ -15,29 +15,10 @@ class Comments extends Composer
         'partials.comments',
     ];
 
-    /**
-     * Data to be passed to view before rendering.
-     *
-     * @return array
-     */
-    public function with()
-    {
-        return [
-            'title' => $this->title(),
-            'responses' => $this->responses(),
-            'previous' => $this->previous(),
-            'next' => $this->next(),
-            'paginated' => $this->paginated(),
-            'closed' => $this->closed(),
-        ];
-    }
-
     /**
      * The comment title.
-     *
-     * @return string
      */
-    public function title()
+    public function title(): string
     {
         return sprintf(
             /* translators: %1$s is replaced with the number of comments and %2$s with the post title */
@@ -49,13 +30,11 @@ class Comments extends Composer
 
     /**
      * Retrieve the comments.
-     *
-     * @return string
      */
-    public function responses()
+    public function responses(): ?string
     {
         if (! have_comments()) {
-            return;
+            return null;
         }
 
         return wp_list_comments([
@@ -67,13 +46,11 @@ class Comments extends Composer
 
     /**
      * The previous comments link.
-     *
-     * @return string
      */
-    public function previous()
+    public function previous(): ?string
     {
         if (! get_previous_comments_link()) {
-            return;
+            return null;
         }
 
         return get_previous_comments_link(
@@ -83,13 +60,11 @@ class Comments extends Composer
 
     /**
      * The next comments link.
-     *
-     * @return string
      */
-    public function next()
+    public function next(): ?string
     {
         if (! get_next_comments_link()) {
-            return;
+            return null;
         }
 
         return get_next_comments_link(
@@ -99,20 +74,16 @@ class Comments extends Composer
 
     /**
      * Determine if the comments are paginated.
-     *
-     * @return bool
      */
-    public function paginated()
+    public function paginated(): bool
     {
         return get_comment_pages_count() > 1 && get_option('page_comments');
     }
 
     /**
      * Determine if the comments are closed.
-     *
-     * @return bool
      */
-    public function closed()
+    public function closed(): bool
     {
         return ! comments_open() && get_comments_number() != '0' && post_type_supports(get_post_type(), 'comments');
     }

app/View/Composers/Post.php

@@ -17,25 +17,10 @@ class Post extends Composer
         'partials.content-*',
     ];
 
-    /**
-     * Data to be passed to view before rendering, but after merging.
-     *
-     * @return array
-     */
-    public function override()
-    {
-        return [
-            'title' => $this->title(),
-            'pagination' => $this->pagination(),
-        ];
-    }
-
     /**
      * Retrieve the post title.
-     *
-     * @return string
      */
-    public function title()
+    public function title(): string
     {
         if ($this->view->name() !== 'partials.page-header') {
             return get_the_title();
@@ -70,10 +55,8 @@ class Post extends Composer
 
     /**
      * Retrieve the pagination links.
-     *
-     * @return string
      */
-    public function pagination()
+    public function pagination(): string
     {
         return wp_link_pages([
             'echo' => 0,

app/View/Composers/Socials.php

@@ -0,0 +1,35 @@
+<?php
+
+namespace App\View\Composers;
+
+use Roots\Acorn\View\Composer;
+
+class Socials extends Composer
+{
+    /**
+     * List of views served by this composer.
+     *
+     * @var array
+     */
+    protected static $views = [
+        'components.socials',
+    ];
+
+    /**
+     * Data to be passed to view before rendering.
+     *
+     * @return array
+     */
+    public function with()
+    {
+        return [
+            'socials' => get_posts([
+                'post_type' => 'social',
+                'order' => 'ASC',
+                'orderby' => 'menu_order name',
+                'posts_per_page' => -1,
+                'fields' => 'ids',
+            ]),
+        ];
+    }
+}

app/blocks.php

@@ -0,0 +1,201 @@
+<?php
+
+/**
+ * Theme Blocks.
+ */
+
+namespace App\Blocks;
+
+add_filter('block_type_metadata', function($metadata){
+    $name = $metadata['name'];
+
+    if (str_starts_with($name, 'core/') ) {
+        unset($metadata['supports']['color']);
+        unset($metadata['supports']['typography']);
+    }
+
+    return $metadata;
+});
+
+// Disable all core blocks except what we need as inner blocks
+// resources/js/editor.js handles hiding the inner blocks at the top level
+add_action('allowed_block_types_all', __NAMESPACE__ . '\\list_allowed', 100, 2);
+
+// add blocks to the allowed list via filter
+add_filter('badegg_block_types_allow', function($allowed){
+    return array_merge($allowed, [
+        // 'core/categories',
+    ]);
+});
+
+// Add the badegg block category
+add_filter( 'block_categories_all' , function ( $categories ) {
+
+        // Adding a new category.
+        $categories = array_merge([
+            [
+                'slug'  => 'badegg',
+                'title' => __('Provided by Bad Egg Digital'),
+            ],
+        ], $categories);
+
+        return $categories;
+});
+
+// Auto register WP blocks
+add_action('init', function () {
+    $blocks = glob(get_theme_file_path('resources/views/blocks/*/block.json'));
+
+    foreach ($blocks as $block_json) {
+        $json = json_decode(file_get_contents($block_json));
+        $slug = basename(dirname($block_json));
+        $blockPath = "resources/views/blocks/{$slug}";
+
+        $viewScript = "{$blockPath}/view.js";
+        $script = "{$blockPath}/script.js";
+        $editorCSS = "{$blockPath}/editor.scss";
+        $style = "{$blockPath}/style.scss";
+
+        // editorStyle
+        if (file_exists(get_theme_file_path($editorCSS))) {
+            wp_register_style(
+                "{$slug}-editor-style",
+                \Vite::asset($editorCSS),
+                [],
+                null
+            );
+        }
+
+        // script
+        if(file_exists(get_theme_file_path($script))) {
+            wp_register_script(
+                "{$slug}-script",
+                \Vite::asset($script),
+                [],
+                null,
+                true
+            );
+        }
+
+        // style
+        if (file_exists(get_theme_file_path($style))) {
+            wp_register_style(
+                "{$slug}-style",
+                \Vite::asset($style),
+                [],
+                null
+            );
+        }
+
+        // viewScript
+        if(file_exists(get_theme_file_path($viewScript))) {
+            wp_register_script(
+                "{$slug}-view-script",
+                \Vite::asset($viewScript),
+                [],
+                null,
+                true
+            );
+        }
+
+        $props = [
+            'editor_style'      => "{$slug}-editor-style",
+            'style'             => "{$slug}-style",
+            'script'            => "{$slug}-script",
+            'view_script'       => "{$slug}-view-script",
+            'attributes'        => attributes(),
+        ];
+
+        if(!property_exists($json, 'acf') && \Roots\view()->exists("blocks.{$slug}.render")) {
+            $props['render_callback']   = function ($attributes, $content, $block) {
+                $slug = basename($block->name);
+
+                return \Roots\view("blocks.{$slug}.render", [
+                    'attributes' => $attributes,
+                    'content' => $content,
+                    'block' => $block,
+                ]);
+            };
+        }
+
+        register_block_type($block_json, $props);
+    }
+});
+
+function list_inner()
+{
+    $file = file_get_contents(get_theme_file_path("resources/json/block-core-whitelist.json"));
+    $json = json_decode($file);
+
+    return $json;
+}
+
+function attributes()
+{
+    $file = file_get_contents(get_theme_file_path("resources/json/block-attributes.json"));
+    $json = json_decode($file, true);
+
+    return $json;
+}
+
+function list_all()
+{
+    $blocks = array_map(function($block) {
+        $name = $block->name;
+
+        return $block->name;
+
+    }, \WP_Block_Type_Registry::get_instance()->get_all_registered());
+
+    return array_values($blocks);
+}
+
+function list_custom()
+{
+    return array_filter(list_all(), function($value){
+        if (str_starts_with($value, 'acf/') || str_starts_with($value, 'badegg/')) return $value;
+    });
+}
+
+function list_allowed()
+{
+    $add_allowed = [];
+
+    return array_merge(
+        list_custom(),
+        list_inner(),
+        apply_filters('badegg_block_types_allow', $add_allowed),
+    );
+}
+
+function render_acf($block, $content = '', $is_preview = false, $post_id = 0, $wp_block = false, $context = false) {
+    $slug = basename($block['name']);
+    $block['slug'] = $slug;
+
+    $blade = \Roots\view(
+        "blocks.{$slug}.render",
+        [
+            'block' => $block,
+            'content' => $content,
+            'is_preview' => $is_preview,
+            'post_id' => $post_id,
+            'wp_block' => $wp_block,
+            'context' => $context,
+        ],
+    );
+
+    if($blade) {
+        echo $blade;
+    } else {
+        ob_start(); ?>
+
+        <section class="section bg-error knockout">
+            <div class="container container-small align-centre wysiwyg">
+                <h2>Missing Blade Template</h2>
+                <p>(resources/views/blocks/<?= $slug ?>/render.blade.php)</p>
+            </div>
+        </section>
+
+        <?php echo ob_get_clean();
+    }
+}

app/setup.php

@@ -6,7 +6,6 @@
 
 namespace App;
 
-use Illuminate\Support\Facades\File;
 use Illuminate\Support\Facades\Vite;
 
 /**
@@ -15,12 +14,10 @@ use Illuminate\Support\Facades\Vite;
  * @return array
  */
 add_filter('block_editor_settings_all', function ($settings) {
-    $style = Vite::asset('resources/css/editor.css');
+    $style = Vite::asset('resources/css/editor.scss');
 
     $settings['styles'][] = [
-        'css' => Vite::isRunningHot()
-            ? "@import url('{$style}')"
-            : Vite::content('resources/css/editor.css'),
+        'css' => "@import url('{$style}')",
     ];
 
     return $settings;
@@ -49,35 +46,6 @@ add_filter('admin_head', function () {
     ])->toHtml();
 });
 
-/**
- * Add Vite's HMR client to the block editor.
- *
- * @return void
- */
-add_action('enqueue_block_assets', function () {
-    if (! is_admin() || ! get_current_screen()?->is_block_editor()) {
-        return;
-    }
-
-    if (! Vite::isRunningHot()) {
-        return;
-    }
-
-    $script = sprintf(
-        <<<'JS'
-        window.__vite_client_url = '%s';
-
-        window.self !== window.top && document.head.appendChild(
-            Object.assign(document.createElement('script'), { type: 'module', src: '%s' })
-        );
-        JS,
-        untrailingslashit(Vite::asset('')),
-        Vite::asset('@vite/client')
-    );
-
-    wp_add_inline_script('wp-blocks', $script);
-});
-
 /**
  * Use the generated theme.json file.
  *
@@ -185,3 +153,24 @@ add_action('widgets_init', function () {
         'id' => 'sidebar-footer',
     ] + $config);
 });
+
+add_filter('admin_post_thumbnail_size', function(){
+    return "medium";
+});
+
+add_action( 'init', __NAMESPACE__ . '\\cors', 15 );
+function cors() {
+
+    if(WP_ENV == 'development'):
+        header( 'Access-Control-Allow-Origin: *' );
+    endif;
+
+}
+
+add_action('after_setup_theme', function(){
+  $image_srcset = new Utilities\ImageSrcset;
+  $image_srcset->add(['name' => 'hero', 'width' => 1920, 'height' => 1080]);
+  add_image_size('lazy', 50, 50);
+  add_image_size('hero', 1920, 1080, true);
+});
+

composer.json

@@ -40,7 +40,8 @@
   },
   "require": {
     "php": ">=8.2",
-    "roots/acorn": "^5.0"
+    "roots/acorn": "^5.0",
+    "ourcodeworld/name-that-color": "dev-master"
   },
   "require-dev": {
     "laravel/pint": "^1.20"

functions.php

@@ -37,6 +37,28 @@ Application::configure()
     ])
     ->boot();
 
+/*
+|--------------------------------------------------------------------------
+| Autoload PSR-4 files
+|--------------------------------------------------------------------------
+*/
+
+function autoload_psr4($name) {
+    $path = __dir__ . '/app/' . $name . '/*.php';
+    $namespace = 'App\\' . $name;
+
+    foreach(glob($path) as $filename) {
+        $class = $namespace . '\\' . basename($filename, '.php');
+        new $class();
+    }
+}
+
+autoload_psr4('PostTypes');
+autoload_psr4('ACF');
+autoload_psr4('Utilities');
+autoload_psr4('Admin');
+
+
 /*
 |--------------------------------------------------------------------------
 | Register Sage Theme Files
@@ -49,7 +71,7 @@ Application::configure()
 |
 */
 
-collect(['setup', 'filters'])
+collect(['setup', 'filters', 'blocks'])
     ->each(function ($file) {
         if (! locate_template($file = "app/{$file}.php", true, true)) {
             wp_die(

package.json

@@ -17,9 +17,9 @@
   },
   "devDependencies": {
     "@roots/vite-plugin": "^1.0.2",
-    "@tailwindcss/vite": "^4.0.9",
+    "fast-glob": "^3.3.3",
     "laravel-vite-plugin": "^1.2.0",
-    "tailwindcss": "^4.0.9",
+    "sass": "^1.93.2",
     "vite": "^6.2.0"
   }
 }

resources/acf/group_block_acfdemo.json

@@ -0,0 +1,131 @@
+{
+    "key": "group_block_acfdemo",
+    "title": "Block: ACF Demo",
+    "fields": [
+        {
+            "key": "field_693d7783d862a",
+            "label": "Content",
+            "name": "",
+            "aria-label": "",
+            "type": "accordion",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "open": 1,
+            "multi_expand": 1,
+            "endpoint": 0
+        },
+        {
+            "key": "field_693d779cd862b",
+            "label": "",
+            "name": "content",
+            "aria-label": "",
+            "type": "wysiwyg",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "default_value": "",
+            "allow_in_bindings": 0,
+            "tabs": "all",
+            "toolbar": "full",
+            "media_upload": 1,
+            "delay": 0
+        },
+        {
+            "key": "field_693d7764938f3",
+            "label": "Introduction",
+            "name": "block_intro",
+            "aria-label": "",
+            "type": "clone",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "clone": [
+                "group_clone_block_intro"
+            ],
+            "display": "seamless",
+            "layout": "block",
+            "prefix_label": 0,
+            "prefix_name": 0
+        },
+        {
+            "key": "field_6940187f74afb",
+            "label": "Footer",
+            "name": "block_footer",
+            "aria-label": "",
+            "type": "clone",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "clone": [
+                "group_clone_block_footer"
+            ],
+            "display": "seamless",
+            "layout": "block",
+            "prefix_label": 0,
+            "prefix_name": 0
+        },
+        {
+            "key": "field_693d776493992",
+            "label": "Settings",
+            "name": "block_settings",
+            "aria-label": "",
+            "type": "clone",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "clone": [
+                "group_clone_block_settings"
+            ],
+            "display": "seamless",
+            "layout": "block",
+            "prefix_label": 0,
+            "prefix_name": 0
+        }
+    ],
+    "location": [
+        [
+            {
+                "param": "block",
+                "operator": "==",
+                "value": "badegg\/acfdemo"
+            }
+        ]
+    ],
+    "menu_order": 0,
+    "position": "normal",
+    "style": "default",
+    "label_placement": "top",
+    "instruction_placement": "label",
+    "hide_on_screen": "",
+    "active": true,
+    "description": "",
+    "show_in_rest": 0,
+    "display_title": "",
+    "modified": 1765814950
+}

resources/acf/group_block_editor.json

@@ -0,0 +1,109 @@
+{
+    "key": "group_block_editor",
+    "title": "Block: Editor",
+    "fields": [
+        {
+            "key": "field_67659ad8dc795",
+            "label": "",
+            "name": "",
+            "aria-label": "",
+            "type": "message",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "message": "You can insert a variety of blocks inside of this one to build your page or post.",
+            "new_lines": "wpautop",
+            "esc_html": 0
+        },
+        {
+            "key": "field_67659a9bdc792",
+            "label": "Introduction",
+            "name": "introduction",
+            "aria-label": "",
+            "type": "clone",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "clone": [
+                "group_block_intro"
+            ],
+            "display": "seamless",
+            "layout": "block",
+            "prefix_label": 0,
+            "prefix_name": 0
+        },
+        {
+            "key": "field_67659bca78cfa",
+            "label": "Footer",
+            "name": "footer",
+            "aria-label": "",
+            "type": "clone",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "clone": [
+                "group_block_footer"
+            ],
+            "display": "seamless",
+            "layout": "block",
+            "prefix_label": 0,
+            "prefix_name": 0
+        },
+        {
+            "key": "field_67659ab5dc793",
+            "label": "Settings",
+            "name": "settings",
+            "aria-label": "",
+            "type": "clone",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "clone": [
+                "group_clone_block_settings"
+            ],
+            "display": "seamless",
+            "layout": "block",
+            "prefix_label": 0,
+            "prefix_name": 0
+        }
+    ],
+    "location": [
+        [
+            {
+                "param": "block",
+                "operator": "==",
+                "value": "acf\/badegg-editor"
+            }
+        ]
+    ],
+    "menu_order": 0,
+    "position": "normal",
+    "style": "default",
+    "label_placement": "top",
+    "instruction_placement": "label",
+    "hide_on_screen": "",
+    "active": true,
+    "description": "",
+    "show_in_rest": 0,
+    "modified": 1763915024
+}

resources/acf/group_clone_background_settings.json

@@ -0,0 +1,137 @@
+{
+    "key": "group_clone_background_settings",
+    "title": "Clone: Background Settings",
+    "fields": [
+        {
+            "key": "field_67325dd23234e",
+            "label": "Colour",
+            "name": "bg_colour",
+            "aria-label": "",
+            "type": "select",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "50",
+                "class": "",
+                "id": ""
+            },
+            "choices": {
+                "0": "None",
+                "primary": "<i class=\"fas fa-circle\" style=\"color: #dd3333\"><\/i> Punch",
+                "secondary": "<i class=\"fas fa-circle\" style=\"color: #81d742\"><\/i> Atlantis",
+                "tertiary": "<i class=\"fas fa-circle\" style=\"color: #8224e3\"><\/i> Purple Heart",
+                "white": "<i class=\"fas fa-circle\" style=\"color: #FFFFFF\"><\/i> White",
+                "grey": "<i class=\"fas fa-circle\" style=\"color: #808080\"><\/i> Gray",
+                "black": "<i class=\"fas fa-circle\" style=\"color: #000000\"><\/i> Black"
+            },
+            "default_value": 0,
+            "return_format": "value",
+            "multiple": 0,
+            "allow_null": 0,
+            "allow_in_bindings": 1,
+            "ui": 1,
+            "ajax": 0,
+            "placeholder": "",
+            "create_options": 0,
+            "save_options": 0
+        },
+        {
+            "key": "field_67325e213234f",
+            "label": "Tint",
+            "name": "bg_tint",
+            "aria-label": "",
+            "type": "select",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": [
+                [
+                    {
+                        "field": "field_67325dd23234e",
+                        "operator": "!=",
+                        "value": "0"
+                    }
+                ],
+                [
+                    {
+                        "field": "field_67325dd23234e",
+                        "operator": "!=",
+                        "value": "black"
+                    }
+                ],
+                [
+                    {
+                        "field": "field_67325dd23234e",
+                        "operator": "!=",
+                        "value": "white"
+                    }
+                ]
+            ],
+            "wrapper": {
+                "width": "50",
+                "class": "",
+                "id": ""
+            },
+            "choices": {
+                "lightest": "Lightest",
+                "lighter": "Lighter",
+                "light": "Light",
+                "0": "None",
+                "dark": "Dark",
+                "darker": "Darker",
+                "darkest": "Darkest"
+            },
+            "default_value": 0,
+            "return_format": "value",
+            "multiple": 0,
+            "allow_null": 0,
+            "allow_in_bindings": 1,
+            "ui": 1,
+            "ajax": 0,
+            "placeholder": "",
+            "create_options": 0,
+            "save_options": 0
+        },
+        {
+            "key": "field_67350f526abf1",
+            "label": "",
+            "name": "contrast",
+            "aria-label": "",
+            "type": "true_false",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "message": "Text Contrast",
+            "default_value": 0,
+            "allow_in_bindings": 0,
+            "ui_on_text": "Light",
+            "ui_off_text": "Dark",
+            "ui": 1
+        }
+    ],
+    "location": [
+        [
+            {
+                "param": "widget",
+                "operator": "==",
+                "value": "rss"
+            }
+        ]
+    ],
+    "menu_order": 0,
+    "position": "normal",
+    "style": "default",
+    "label_placement": "top",
+    "instruction_placement": "label",
+    "hide_on_screen": "",
+    "active": true,
+    "description": "",
+    "show_in_rest": 0,
+    "display_title": "",
+    "modified": 1767548180
+}

resources/acf/group_clone_block_footer.json

@@ -0,0 +1,210 @@
+{
+    "key": "group_clone_block_footer",
+    "title": "Clone: Block Footer",
+    "fields": [
+        {
+            "key": "field_694016b164221",
+            "label": "Footer",
+            "name": "",
+            "aria-label": "",
+            "type": "accordion",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "open": 0,
+            "multi_expand": 0,
+            "endpoint": 0
+        },
+        {
+            "key": "field_694016b164272",
+            "label": "",
+            "name": "footer",
+            "aria-label": "",
+            "type": "group",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "layout": "block",
+            "sub_fields": [
+                {
+                    "key": "field_694016b165315",
+                    "label": "Blurb",
+                    "name": "blurb",
+                    "aria-label": "",
+                    "type": "textarea",
+                    "instructions": "",
+                    "required": 0,
+                    "conditional_logic": 0,
+                    "wrapper": {
+                        "width": "",
+                        "class": "",
+                        "id": ""
+                    },
+                    "default_value": "",
+                    "maxlength": "",
+                    "rows": 3,
+                    "placeholder": "",
+                    "new_lines": ""
+                },
+                {
+                    "key": "field_69401a2f06555",
+                    "label": "Links",
+                    "name": "links",
+                    "aria-label": "",
+                    "type": "repeater",
+                    "instructions": "",
+                    "required": 0,
+                    "conditional_logic": 0,
+                    "wrapper": {
+                        "width": "",
+                        "class": "",
+                        "id": ""
+                    },
+                    "layout": "block",
+                    "pagination": 0,
+                    "min": 0,
+                    "max": 0,
+                    "collapsed": "",
+                    "button_label": "Add Row",
+                    "rows_per_page": 20,
+                    "sub_fields": [
+                        {
+                            "key": "field_69401a4006556",
+                            "label": "Link",
+                            "name": "link",
+                            "aria-label": "",
+                            "type": "clone",
+                            "instructions": "",
+                            "required": 0,
+                            "conditional_logic": 0,
+                            "wrapper": {
+                                "width": "",
+                                "class": "",
+                                "id": ""
+                            },
+                            "clone": [
+                                "group_clone_button"
+                            ],
+                            "display": "seamless",
+                            "layout": "block",
+                            "prefix_label": 0,
+                            "prefix_name": 0,
+                            "parent_repeater": "field_69401a2f06555"
+                        }
+                    ]
+                },
+                {
+                    "key": "field_694016b165337",
+                    "label": "Alignment",
+                    "name": "align",
+                    "aria-label": "",
+                    "type": "select",
+                    "instructions": "",
+                    "required": 0,
+                    "conditional_logic": 0,
+                    "wrapper": {
+                        "width": "",
+                        "class": "",
+                        "id": ""
+                    },
+                    "choices": {
+                        "left": "Left",
+                        "centre": "Centre",
+                        "right": "Right"
+                    },
+                    "default_value": "centre",
+                    "return_format": "value",
+                    "multiple": 0,
+                    "allow_null": 0,
+                    "allow_in_bindings": 0,
+                    "ui": 0,
+                    "ajax": 0,
+                    "placeholder": "",
+                    "create_options": 0,
+                    "save_options": 0
+                },
+                {
+                    "key": "field_694016b16537f",
+                    "label": "Container width",
+                    "name": "container_width",
+                    "aria-label": "",
+                    "type": "select",
+                    "instructions": "",
+                    "required": 0,
+                    "conditional_logic": 0,
+                    "wrapper": {
+                        "width": "",
+                        "class": "",
+                        "id": ""
+                    },
+                    "choices": {
+                        "0": "Auto",
+                        "narrow": "Narrow",
+                        "small": "Small",
+                        "medium": "Medium",
+                        "large": "Large",
+                        "full": "Edge to edge"
+                    },
+                    "default_value": "narrow",
+                    "return_format": "value",
+                    "multiple": 0,
+                    "allow_null": 0,
+                    "allow_in_bindings": 0,
+                    "ui": 0,
+                    "ajax": 0,
+                    "placeholder": "",
+                    "create_options": 0,
+                    "save_options": 0
+                }
+            ]
+        },
+        {
+            "key": "field_694016b1642c5",
+            "label": "Footer (end)",
+            "name": "",
+            "aria-label": "",
+            "type": "accordion",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "open": 0,
+            "multi_expand": 0,
+            "endpoint": 1
+        }
+    ],
+    "location": [
+        [
+            {
+                "param": "widget",
+                "operator": "==",
+                "value": "rss"
+            }
+        ]
+    ],
+    "menu_order": 0,
+    "position": "normal",
+    "style": "default",
+    "label_placement": "top",
+    "instruction_placement": "label",
+    "hide_on_screen": "",
+    "active": true,
+    "description": "",
+    "show_in_rest": 0,
+    "display_title": "",
+    "modified": 1765809897
+}

resources/acf/group_clone_block_intro.json

@@ -0,0 +1,184 @@
+{
+    "key": "group_clone_block_intro",
+    "title": "Clone: Block Intro",
+    "fields": [
+        {
+            "key": "field_67659970db415",
+            "label": "Introduction",
+            "name": "",
+            "aria-label": "",
+            "type": "accordion",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "open": 0,
+            "multi_expand": 0,
+            "endpoint": 0
+        },
+        {
+            "key": "field_693f37ad7fa70",
+            "label": "",
+            "name": "intro",
+            "aria-label": "",
+            "type": "group",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "layout": "block",
+            "sub_fields": [
+                {
+                    "key": "field_676599964d3cc",
+                    "label": "Heading",
+                    "name": "heading",
+                    "aria-label": "",
+                    "type": "text",
+                    "instructions": "",
+                    "required": 0,
+                    "conditional_logic": 0,
+                    "wrapper": {
+                        "width": "",
+                        "class": "hfont",
+                        "id": ""
+                    },
+                    "default_value": "",
+                    "maxlength": "",
+                    "allow_in_bindings": 0,
+                    "placeholder": "",
+                    "prepend": "",
+                    "append": ""
+                },
+                {
+                    "key": "field_6765999d4d3cd",
+                    "label": "Blurb",
+                    "name": "blurb",
+                    "aria-label": "",
+                    "type": "textarea",
+                    "instructions": "",
+                    "required": 0,
+                    "conditional_logic": 0,
+                    "wrapper": {
+                        "width": "",
+                        "class": "",
+                        "id": ""
+                    },
+                    "default_value": "",
+                    "maxlength": "",
+                    "rows": 3,
+                    "placeholder": "",
+                    "new_lines": ""
+                },
+                {
+                    "key": "field_69400cbafb964",
+                    "label": "Alignment",
+                    "name": "align",
+                    "aria-label": "",
+                    "type": "select",
+                    "instructions": "",
+                    "required": 0,
+                    "conditional_logic": 0,
+                    "wrapper": {
+                        "width": "",
+                        "class": "",
+                        "id": ""
+                    },
+                    "choices": {
+                        "left": "Left",
+                        "centre": "Centre",
+                        "right": "Right"
+                    },
+                    "default_value": "centre",
+                    "return_format": "value",
+                    "multiple": 0,
+                    "allow_null": 0,
+                    "allow_in_bindings": 0,
+                    "ui": 0,
+                    "ajax": 0,
+                    "placeholder": "",
+                    "create_options": 0,
+                    "save_options": 0
+                },
+                {
+                    "key": "field_693f3a7fae85e",
+                    "label": "Container width",
+                    "name": "container_width",
+                    "aria-label": "",
+                    "type": "select",
+                    "instructions": "",
+                    "required": 0,
+                    "conditional_logic": 0,
+                    "wrapper": {
+                        "width": "",
+                        "class": "",
+                        "id": ""
+                    },
+                    "choices": {
+                        "0": "Auto",
+                        "narrow": "Narrow",
+                        "small": "Small",
+                        "medium": "Medium",
+                        "large": "Large",
+                        "full": "Edge to edge"
+                    },
+                    "default_value": "narrow",
+                    "return_format": "value",
+                    "multiple": 0,
+                    "allow_null": 0,
+                    "allow_in_bindings": 0,
+                    "ui": 0,
+                    "ajax": 0,
+                    "placeholder": "",
+                    "create_options": 0,
+                    "save_options": 0
+                }
+            ]
+        },
+        {
+            "key": "field_6828dae1d1bb0",
+            "label": "Intro (end)",
+            "name": "",
+            "aria-label": "",
+            "type": "accordion",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "open": 0,
+            "multi_expand": 0,
+            "endpoint": 1
+        }
+    ],
+    "location": [
+        [
+            {
+                "param": "widget",
+                "operator": "==",
+                "value": "rss"
+            }
+        ]
+    ],
+    "menu_order": 0,
+    "position": "normal",
+    "style": "default",
+    "label_placement": "top",
+    "instruction_placement": "label",
+    "hide_on_screen": "",
+    "active": true,
+    "description": "",
+    "show_in_rest": 0,
+    "display_title": "",
+    "modified": 1765809893
+}

resources/acf/group_clone_block_settings.json

@@ -0,0 +1,195 @@
+{
+    "key": "group_clone_block_settings",
+    "title": "Clone: Block Settings",
+    "fields": [
+        {
+            "key": "field_69403228d2637",
+            "label": "Settings",
+            "name": "",
+            "aria-label": "",
+            "type": "accordion",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "open": 0,
+            "multi_expand": 1,
+            "endpoint": 0
+        },
+        {
+            "key": "field_694031b513e66",
+            "label": "",
+            "name": "settings",
+            "aria-label": "",
+            "type": "group",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "layout": "block",
+            "sub_fields": [
+                {
+                    "key": "field_6800097e61765",
+                    "label": "Container Width",
+                    "name": "container_width",
+                    "aria-label": "",
+                    "type": "select",
+                    "instructions": "",
+                    "required": 0,
+                    "conditional_logic": 0,
+                    "wrapper": {
+                        "width": "",
+                        "class": "",
+                        "id": ""
+                    },
+                    "choices": {
+                        "0": "Auto",
+                        "narrow": "Narrow",
+                        "small": "Small",
+                        "medium": "Medium",
+                        "large": "Large",
+                        "full": "Edge to edge"
+                    },
+                    "default_value": 0,
+                    "return_format": "value",
+                    "multiple": 0,
+                    "allow_null": 0,
+                    "allow_in_bindings": 1,
+                    "ui": 0,
+                    "ajax": 0,
+                    "placeholder": "",
+                    "create_options": 0,
+                    "save_options": 0
+                },
+                {
+                    "key": "field_67350eb62cdf9",
+                    "label": "",
+                    "name": "padding_top",
+                    "aria-label": "",
+                    "type": "true_false",
+                    "instructions": "",
+                    "required": 0,
+                    "conditional_logic": 0,
+                    "wrapper": {
+                        "width": "",
+                        "class": "",
+                        "id": ""
+                    },
+                    "message": "Top Padding",
+                    "default_value": 1,
+                    "allow_in_bindings": 0,
+                    "ui_on_text": "On",
+                    "ui_off_text": "Off",
+                    "ui": 1
+                },
+                {
+                    "key": "field_673510c1dc830",
+                    "label": "",
+                    "name": "padding_bottom",
+                    "aria-label": "",
+                    "type": "true_false",
+                    "instructions": "",
+                    "required": 0,
+                    "conditional_logic": 0,
+                    "wrapper": {
+                        "width": "",
+                        "class": "",
+                        "id": ""
+                    },
+                    "message": "Bottom Padding",
+                    "default_value": 1,
+                    "allow_in_bindings": 0,
+                    "ui_on_text": "On",
+                    "ui_off_text": "Off",
+                    "ui": 1
+                },
+                {
+                    "key": "field_695aa550e16d4",
+                    "label": "Background",
+                    "name": "",
+                    "aria-label": "",
+                    "type": "message",
+                    "instructions": "",
+                    "required": 0,
+                    "conditional_logic": 0,
+                    "wrapper": {
+                        "width": "",
+                        "class": "",
+                        "id": ""
+                    },
+                    "message": "",
+                    "new_lines": "wpautop",
+                    "esc_html": 0
+                },
+                {
+                    "key": "field_67350aeb146ca",
+                    "label": "Background",
+                    "name": "background",
+                    "aria-label": "",
+                    "type": "clone",
+                    "instructions": "",
+                    "required": 0,
+                    "conditional_logic": 0,
+                    "wrapper": {
+                        "width": "",
+                        "class": "",
+                        "id": ""
+                    },
+                    "clone": [
+                        "group_clone_background_settings"
+                    ],
+                    "display": "seamless",
+                    "layout": "block",
+                    "prefix_label": 0,
+                    "prefix_name": 0
+                }
+            ]
+        },
+        {
+            "key": "field_69403239d2638",
+            "label": "Settings (end)",
+            "name": "",
+            "aria-label": "",
+            "type": "accordion",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "open": 0,
+            "multi_expand": 0,
+            "endpoint": 1
+        }
+    ],
+    "location": [
+        [
+            {
+                "param": "widget",
+                "operator": "==",
+                "value": "rss"
+            }
+        ]
+    ],
+    "menu_order": 0,
+    "position": "normal",
+    "style": "default",
+    "label_placement": "top",
+    "instruction_placement": "label",
+    "hide_on_screen": "",
+    "active": true,
+    "description": "",
+    "show_in_rest": 0,
+    "display_title": "",
+    "modified": 1767548583
+}

resources/acf/group_clone_button.json

@@ -0,0 +1,151 @@
+{
+    "key": "group_clone_button",
+    "title": "Clone: Button",
+    "fields": [
+        {
+            "key": "field_672d3d7b2c273",
+            "label": "Link",
+            "name": "link",
+            "aria-label": "",
+            "type": "link",
+            "instructions": "",
+            "required": 1,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "return_format": "array",
+            "allow_in_bindings": 1
+        },
+        {
+            "key": "field_673529a2a37a1",
+            "label": "Class",
+            "name": "class",
+            "aria-label": "",
+            "type": "text",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": [
+                [
+                    {
+                        "field": "field_672d3d7b2c273",
+                        "operator": "!=empty"
+                    }
+                ]
+            ],
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "default_value": "",
+            "maxlength": "",
+            "allow_in_bindings": 1,
+            "placeholder": "",
+            "prepend": "",
+            "append": ""
+        },
+        {
+            "key": "field_672d3db22c274",
+            "label": "Colour",
+            "name": "colour",
+            "aria-label": "",
+            "type": "select",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": [
+                [
+                    {
+                        "field": "field_672d3d7b2c273",
+                        "operator": "!=empty"
+                    }
+                ]
+            ],
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "choices": {
+                "primary": "<i class=\"fas fa-circle\" style=\"color: #002448\"><\/i> Prussian Blue",
+                "secondary": "<i class=\"fas fa-circle\" style=\"color: #fc533e\"><\/i> Sunset Orange",
+                "tertiary": "<i class=\"fas fa-circle\" style=\"color: #fdd400\"><\/i> Gold",
+                "quaternary": "<i class=\"fas fa-circle\" style=\"color: #7d89d1\"><\/i> Moody Blue",
+                "quinary": "<i class=\"fas fa-circle\" style=\"color: #ffdab4\"><\/i> Frangipani",
+                "0": "<i class=\"fas fa-circle\" style=\"color: #FFFFFF\"><\/i> White",
+                "black": "<i class=\"fas fa-circle\" style=\"color: #000000\"><\/i> Black",
+                "quaternary-white": "<i class=\"fas fa-circle text-gradient text-gradient-quaternary-white\"><\/i> Moody Blue to White",
+                "quinary-white": "<i class=\"fas fa-circle text-gradient text-gradient-quinary-white\"><\/i> Frangipani to White",
+                "white-quaternary": "<i class=\"fas fa-circle text-gradient text-gradient-white-quaternary\"><\/i> White to Moody Blue",
+                "white-quinary": "<i class=\"fas fa-circle text-gradient text-gradient-white-quinary\"><\/i> White to Frangipani"
+            },
+            "default_value": "primary",
+            "return_format": "value",
+            "multiple": 0,
+            "allow_null": 0,
+            "allow_in_bindings": 1,
+            "ui": 1,
+            "ajax": 0,
+            "placeholder": "",
+            "create_options": 0,
+            "save_options": 0
+        },
+        {
+            "key": "field_672d3dc52c275",
+            "label": "Style",
+            "name": "style",
+            "aria-label": "",
+            "type": "select",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": [
+                [
+                    {
+                        "field": "field_672d3d7b2c273",
+                        "operator": "!=empty"
+                    }
+                ]
+            ],
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "choices": {
+                "0": "Solid",
+                "outline": "Outline"
+            },
+            "default_value": 0,
+            "return_format": "value",
+            "multiple": 0,
+            "allow_null": 0,
+            "allow_in_bindings": 1,
+            "ui": 0,
+            "ajax": 0,
+            "placeholder": "",
+            "create_options": 0,
+            "save_options": 0
+        }
+    ],
+    "location": [
+        [
+            {
+                "param": "widget",
+                "operator": "==",
+                "value": "rss"
+            }
+        ]
+    ],
+    "menu_order": 0,
+    "position": "normal",
+    "style": "default",
+    "label_placement": "top",
+    "instruction_placement": "label",
+    "hide_on_screen": "",
+    "active": true,
+    "description": "",
+    "show_in_rest": 0,
+    "modified": 1748001311
+}

resources/acf/group_options_global_settings.json

@@ -0,0 +1,417 @@
+{
+    "key": "group_options_global_settings",
+    "title": "Options: Global Settings",
+    "fields": [
+        {
+            "key": "field_67658e28aba4e",
+            "label": "Colours",
+            "name": "",
+            "aria-label": "",
+            "type": "tab",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "placement": "top",
+            "endpoint": 0
+        },
+        {
+            "key": "field_67658e49aba4f",
+            "label": "Brand Colours",
+            "name": "badegg_colours",
+            "aria-label": "",
+            "type": "repeater",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "layout": "block",
+            "pagination": 0,
+            "min": 0,
+            "max": 12,
+            "collapsed": "field_67658e96aba50",
+            "button_label": "Add Colour",
+            "rows_per_page": 20,
+            "sub_fields": [
+                {
+                    "key": "field_67658e96aba50",
+                    "label": "",
+                    "name": "hex",
+                    "aria-label": "",
+                    "type": "color_picker",
+                    "instructions": "",
+                    "required": 0,
+                    "conditional_logic": 0,
+                    "wrapper": {
+                        "width": "",
+                        "class": "",
+                        "id": ""
+                    },
+                    "default_value": "",
+                    "enable_opacity": 0,
+                    "return_format": "string",
+                    "parent_repeater": "field_67658e49aba4f"
+                },
+                {
+                    "key": "field_67658fba41889",
+                    "label": "Tints",
+                    "name": "tints",
+                    "aria-label": "",
+                    "type": "radio",
+                    "instructions": "",
+                    "required": 0,
+                    "conditional_logic": [
+                        [
+                            {
+                                "field": "field_67658e49aba4f",
+                                "operator": "!=empty"
+                            },
+                            {
+                                "field": "field_67658e49aba4f",
+                                "operator": "==empty"
+                            }
+                        ]
+                    ],
+                    "wrapper": {
+                        "width": "15",
+                        "class": "",
+                        "id": ""
+                    },
+                    "choices": [
+                        "Auto",
+                        "Manual"
+                    ],
+                    "default_value": 0,
+                    "return_format": "value",
+                    "allow_null": 0,
+                    "other_choice": 0,
+                    "layout": "horizontal",
+                    "save_other_choice": 0,
+                    "parent_repeater": "field_67658e49aba4f"
+                },
+                {
+                    "key": "field_67658fe84188a",
+                    "label": "Tint Selection",
+                    "name": "",
+                    "aria-label": "",
+                    "type": "message",
+                    "instructions": "",
+                    "required": 0,
+                    "conditional_logic": [
+                        [
+                            {
+                                "field": "field_67658fba41889",
+                                "operator": "==",
+                                "value": "0"
+                            }
+                        ],
+                        [
+                            {
+                                "field": "field_67658e49aba4f",
+                                "operator": "!=empty"
+                            },
+                            {
+                                "field": "field_67658e49aba4f",
+                                "operator": "==empty"
+                            }
+                        ]
+                    ],
+                    "wrapper": {
+                        "width": "70",
+                        "class": "",
+                        "id": ""
+                    },
+                    "message": "Colour tints are automatically set by mathematically adjusting the brightness.",
+                    "new_lines": "wpautop",
+                    "esc_html": 0,
+                    "parent_repeater": "field_67658e49aba4f"
+                },
+                {
+                    "key": "field_6765902f4188b",
+                    "label": "Tint Selection",
+                    "name": "tints",
+                    "aria-label": "",
+                    "type": "group",
+                    "instructions": "Colour tints are automatically set by mathematically adjusting the brightness. Specify manual overrides here:",
+                    "required": 0,
+                    "conditional_logic": [
+                        [
+                            {
+                                "field": "field_67658fba41889",
+                                "operator": "==",
+                                "value": "1"
+                            }
+                        ],
+                        [
+                            {
+                                "field": "field_67658e49aba4f",
+                                "operator": "!=empty"
+                            },
+                            {
+                                "field": "field_67658e49aba4f",
+                                "operator": "==empty"
+                            }
+                        ]
+                    ],
+                    "wrapper": {
+                        "width": "70",
+                        "class": "",
+                        "id": ""
+                    },
+                    "layout": "block",
+                    "sub_fields": [
+                        {
+                            "key": "field_676590414188c",
+                            "label": "Lightest",
+                            "name": "lightest",
+                            "aria-label": "",
+                            "type": "color_picker",
+                            "instructions": "",
+                            "required": 0,
+                            "conditional_logic": 0,
+                            "wrapper": {
+                                "width": "16.66",
+                                "class": "",
+                                "id": ""
+                            },
+                            "default_value": "",
+                            "enable_opacity": 0,
+                            "return_format": "string"
+                        },
+                        {
+                            "key": "field_676590684188d",
+                            "label": "Lighter",
+                            "name": "lighter",
+                            "aria-label": "",
+                            "type": "color_picker",
+                            "instructions": "",
+                            "required": 0,
+                            "conditional_logic": 0,
+                            "wrapper": {
+                                "width": "16.66",
+                                "class": "",
+                                "id": ""
+                            },
+                            "default_value": "",
+                            "enable_opacity": 0,
+                            "return_format": "string"
+                        },
+                        {
+                            "key": "field_6765907f4188e",
+                            "label": "Light",
+                            "name": "light",
+                            "aria-label": "",
+                            "type": "color_picker",
+                            "instructions": "",
+                            "required": 0,
+                            "conditional_logic": 0,
+                            "wrapper": {
+                                "width": "16.66",
+                                "class": "",
+                                "id": ""
+                            },
+                            "default_value": "",
+                            "enable_opacity": 0,
+                            "return_format": "string"
+                        },
+                        {
+                            "key": "field_676590924188f",
+                            "label": "Dark",
+                            "name": "dark",
+                            "aria-label": "",
+                            "type": "color_picker",
+                            "instructions": "",
+                            "required": 0,
+                            "conditional_logic": 0,
+                            "wrapper": {
+                                "width": "16.66",
+                                "class": "",
+                                "id": ""
+                            },
+                            "default_value": "",
+                            "enable_opacity": 0,
+                            "return_format": "string"
+                        },
+                        {
+                            "key": "field_6765909941890",
+                            "label": "Darker",
+                            "name": "darker",
+                            "aria-label": "",
+                            "type": "color_picker",
+                            "instructions": "",
+                            "required": 0,
+                            "conditional_logic": 0,
+                            "wrapper": {
+                                "width": "16.66",
+                                "class": "",
+                                "id": ""
+                            },
+                            "default_value": "",
+                            "enable_opacity": 0,
+                            "return_format": "string"
+                        },
+                        {
+                            "key": "field_6765909f41891",
+                            "label": "Darkest",
+                            "name": "darkest",
+                            "aria-label": "",
+                            "type": "color_picker",
+                            "instructions": "",
+                            "required": 0,
+                            "conditional_logic": 0,
+                            "wrapper": {
+                                "width": "16.66",
+                                "class": "",
+                                "id": ""
+                            },
+                            "default_value": "",
+                            "enable_opacity": 0,
+                            "return_format": "string"
+                        }
+                    ],
+                    "parent_repeater": "field_67658e49aba4f"
+                }
+            ]
+        },
+        {
+            "key": "field_67659ca28081d",
+            "label": "Company",
+            "name": "",
+            "aria-label": "",
+            "type": "tab",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "placement": "top",
+            "endpoint": 0
+        },
+        {
+            "key": "field_67659cb08081e",
+            "label": "Legal Name",
+            "name": "badegg_company_legal",
+            "aria-label": "",
+            "type": "text",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "default_value": "",
+            "maxlength": "",
+            "placeholder": "",
+            "prepend": "",
+            "append": ""
+        },
+        {
+            "key": "field_67659cf08081f",
+            "label": "Telephone",
+            "name": "badegg_company_tel",
+            "aria-label": "",
+            "type": "text",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "50",
+                "class": "",
+                "id": ""
+            },
+            "default_value": "",
+            "maxlength": "",
+            "placeholder": "",
+            "prepend": "",
+            "append": ""
+        },
+        {
+            "key": "field_67659d0780820",
+            "label": "Email",
+            "name": "badegg_company_email",
+            "aria-label": "",
+            "type": "email",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "50",
+                "class": "",
+                "id": ""
+            },
+            "default_value": "",
+            "placeholder": "",
+            "prepend": "",
+            "append": ""
+        },
+        {
+            "key": "field_676594565ead1",
+            "label": "Integrations",
+            "name": "",
+            "aria-label": "",
+            "type": "tab",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "placement": "top",
+            "endpoint": 0
+        },
+        {
+            "key": "field_676594615ead2",
+            "label": "Fathom Analytics ID",
+            "name": "badegg_integrations_fathom_id",
+            "aria-label": "",
+            "type": "text",
+            "instructions": "A Google Analytics alternative that’s simple & privacy-first. <a href=\"https:\/\/usefathom.com\" target=\"_blank\" rel=\"noopener nofollow noindex\">Visit website<\/a>",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "default_value": "",
+            "maxlength": "",
+            "placeholder": "",
+            "prepend": "",
+            "append": ""
+        }
+    ],
+    "location": [
+        [
+            {
+                "param": "options_page",
+                "operator": "==",
+                "value": "theme-global-settings"
+            }
+        ]
+    ],
+    "menu_order": 0,
+    "position": "normal",
+    "style": "seamless",
+    "label_placement": "top",
+    "instruction_placement": "label",
+    "hide_on_screen": "",
+    "active": true,
+    "description": "",
+    "show_in_rest": 0,
+    "modified": 1734712625
+}

resources/acf/group_post_social.json

@@ -0,0 +1,536 @@
+{
+    "key": "group_post_social",
+    "title": "Social Channel Settings",
+    "fields": [
+        {
+            "key": "field_664c658853f1b",
+            "label": "Icon",
+            "name": "fontawesome_brands",
+            "aria-label": "",
+            "type": "select",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "20",
+                "class": "",
+                "id": ""
+            },
+            "choices": {
+                "0": "<i class=\"fa-solid\"><\/i> <span>Please select an icon<\/span>",
+                "monero": "<i class=\"fa-brands fa-monero\" style=\"color: #2271b1;\"><\/i> <span>Monero<\/span>",
+                "hooli": "<i class=\"fa-brands fa-hooli\" style=\"color: #2271b1;\"><\/i> <span>Hooli<\/span>",
+                "yelp": "<i class=\"fa-brands fa-yelp\" style=\"color: #2271b1;\"><\/i> <span>Yelp<\/span>",
+                "cc-visa": "<i class=\"fa-brands fa-cc-visa\" style=\"color: #2271b1;\"><\/i> <span>Cc Visa<\/span>",
+                "lastfm": "<i class=\"fa-brands fa-lastfm\" style=\"color: #2271b1;\"><\/i> <span>Lastfm<\/span>",
+                "shopware": "<i class=\"fa-brands fa-shopware\" style=\"color: #2271b1;\"><\/i> <span>Shopware<\/span>",
+                "creative-commons-nc": "<i class=\"fa-brands fa-creative-commons-nc\" style=\"color: #2271b1;\"><\/i> <span>Creative Commons Nc<\/span>",
+                "aws": "<i class=\"fa-brands fa-aws\" style=\"color: #2271b1;\"><\/i> <span>Aws<\/span>",
+                "redhat": "<i class=\"fa-brands fa-redhat\" style=\"color: #2271b1;\"><\/i> <span>Redhat<\/span>",
+                "yoast": "<i class=\"fa-brands fa-yoast\" style=\"color: #2271b1;\"><\/i> <span>Yoast<\/span>",
+                "cloudflare": "<i class=\"fa-brands fa-cloudflare\" style=\"color: #2271b1;\"><\/i> <span>Cloudflare<\/span>",
+                "ups": "<i class=\"fa-brands fa-ups\" style=\"color: #2271b1;\"><\/i> <span>Ups<\/span>",
+                "wpexplorer": "<i class=\"fa-brands fa-wpexplorer\" style=\"color: #2271b1;\"><\/i> <span>Wpexplorer<\/span>",
+                "dyalog": "<i class=\"fa-brands fa-dyalog\" style=\"color: #2271b1;\"><\/i> <span>Dyalog<\/span>",
+                "bity": "<i class=\"fa-brands fa-bity\" style=\"color: #2271b1;\"><\/i> <span>Bity<\/span>",
+                "stackpath": "<i class=\"fa-brands fa-stackpath\" style=\"color: #2271b1;\"><\/i> <span>Stackpath<\/span>",
+                "buysellads": "<i class=\"fa-brands fa-buysellads\" style=\"color: #2271b1;\"><\/i> <span>Buysellads<\/span>",
+                "first-order": "<i class=\"fa-brands fa-first-order\" style=\"color: #2271b1;\"><\/i> <span>First Order<\/span>",
+                "modx": "<i class=\"fa-brands fa-modx\" style=\"color: #2271b1;\"><\/i> <span>Modx<\/span>",
+                "guilded": "<i class=\"fa-brands fa-guilded\" style=\"color: #2271b1;\"><\/i> <span>Guilded<\/span>",
+                "vnv": "<i class=\"fa-brands fa-vnv\" style=\"color: #2271b1;\"><\/i> <span>Vnv<\/span>",
+                "square-js": "<i class=\"fa-brands fa-square-js\" style=\"color: #2271b1;\"><\/i> <span>Square Js<\/span>",
+                "microsoft": "<i class=\"fa-brands fa-microsoft\" style=\"color: #2271b1;\"><\/i> <span>Microsoft<\/span>",
+                "qq": "<i class=\"fa-brands fa-qq\" style=\"color: #2271b1;\"><\/i> <span>Qq<\/span>",
+                "orcid": "<i class=\"fa-brands fa-orcid\" style=\"color: #2271b1;\"><\/i> <span>Orcid<\/span>",
+                "java": "<i class=\"fa-brands fa-java\" style=\"color: #2271b1;\"><\/i> <span>Java<\/span>",
+                "invision": "<i class=\"fa-brands fa-invision\" style=\"color: #2271b1;\"><\/i> <span>Invision<\/span>",
+                "creative-commons-pd-alt": "<i class=\"fa-brands fa-creative-commons-pd-alt\" style=\"color: #2271b1;\"><\/i> <span>Creative Commons Pd Alt<\/span>",
+                "centercode": "<i class=\"fa-brands fa-centercode\" style=\"color: #2271b1;\"><\/i> <span>Centercode<\/span>",
+                "glide-g": "<i class=\"fa-brands fa-glide-g\" style=\"color: #2271b1;\"><\/i> <span>Glide G<\/span>",
+                "drupal": "<i class=\"fa-brands fa-drupal\" style=\"color: #2271b1;\"><\/i> <span>Drupal<\/span>",
+                "hire-a-helper": "<i class=\"fa-brands fa-hire-a-helper\" style=\"color: #2271b1;\"><\/i> <span>Hire A Helper<\/span>",
+                "creative-commons-by": "<i class=\"fa-brands fa-creative-commons-by\" style=\"color: #2271b1;\"><\/i> <span>Creative Commons By<\/span>",
+                "unity": "<i class=\"fa-brands fa-unity\" style=\"color: #2271b1;\"><\/i> <span>Unity<\/span>",
+                "whmcs": "<i class=\"fa-brands fa-whmcs\" style=\"color: #2271b1;\"><\/i> <span>Whmcs<\/span>",
+                "rocketchat": "<i class=\"fa-brands fa-rocketchat\" style=\"color: #2271b1;\"><\/i> <span>Rocketchat<\/span>",
+                "vk": "<i class=\"fa-brands fa-vk\" style=\"color: #2271b1;\"><\/i> <span>Vk<\/span>",
+                "untappd": "<i class=\"fa-brands fa-untappd\" style=\"color: #2271b1;\"><\/i> <span>Untappd<\/span>",
+                "mailchimp": "<i class=\"fa-brands fa-mailchimp\" style=\"color: #2271b1;\"><\/i> <span>Mailchimp<\/span>",
+                "css3-alt": "<i class=\"fa-brands fa-css3-alt\" style=\"color: #2271b1;\"><\/i> <span>Css3 Alt<\/span>",
+                "square-reddit": "<i class=\"fa-brands fa-square-reddit\" style=\"color: #2271b1;\"><\/i> <span>Square Reddit<\/span>",
+                "vimeo-v": "<i class=\"fa-brands fa-vimeo-v\" style=\"color: #2271b1;\"><\/i> <span>Vimeo V<\/span>",
+                "contao": "<i class=\"fa-brands fa-contao\" style=\"color: #2271b1;\"><\/i> <span>Contao<\/span>",
+                "square-font-awesome": "<i class=\"fa-brands fa-square-font-awesome\" style=\"color: #2271b1;\"><\/i> <span>Square Font Awesome<\/span>",
+                "deskpro": "<i class=\"fa-brands fa-deskpro\" style=\"color: #2271b1;\"><\/i> <span>Deskpro<\/span>",
+                "sistrix": "<i class=\"fa-brands fa-sistrix\" style=\"color: #2271b1;\"><\/i> <span>Sistrix<\/span>",
+                "square-instagram": "<i class=\"fa-brands fa-square-instagram\" style=\"color: #2271b1;\"><\/i> <span>Square Instagram<\/span>",
+                "battle-net": "<i class=\"fa-brands fa-battle-net\" style=\"color: #2271b1;\"><\/i> <span>Battle Net<\/span>",
+                "the-red-yeti": "<i class=\"fa-brands fa-the-red-yeti\" style=\"color: #2271b1;\"><\/i> <span>The Red Yeti<\/span>",
+                "square-hacker-news": "<i class=\"fa-brands fa-square-hacker-news\" style=\"color: #2271b1;\"><\/i> <span>Square Hacker News<\/span>",
+                "edge": "<i class=\"fa-brands fa-edge\" style=\"color: #2271b1;\"><\/i> <span>Edge<\/span>",
+                "napster": "<i class=\"fa-brands fa-napster\" style=\"color: #2271b1;\"><\/i> <span>Napster<\/span>",
+                "square-snapchat": "<i class=\"fa-brands fa-square-snapchat\" style=\"color: #2271b1;\"><\/i> <span>Square Snapchat<\/span>",
+                "google-plus-g": "<i class=\"fa-brands fa-google-plus-g\" style=\"color: #2271b1;\"><\/i> <span>Google Plus G<\/span>",
+                "artstation": "<i class=\"fa-brands fa-artstation\" style=\"color: #2271b1;\"><\/i> <span>Artstation<\/span>",
+                "markdown": "<i class=\"fa-brands fa-markdown\" style=\"color: #2271b1;\"><\/i> <span>Markdown<\/span>",
+                "sourcetree": "<i class=\"fa-brands fa-sourcetree\" style=\"color: #2271b1;\"><\/i> <span>Sourcetree<\/span>",
+                "google-plus": "<i class=\"fa-brands fa-google-plus\" style=\"color: #2271b1;\"><\/i> <span>Google Plus<\/span>",
+                "diaspora": "<i class=\"fa-brands fa-diaspora\" style=\"color: #2271b1;\"><\/i> <span>Diaspora<\/span>",
+                "foursquare": "<i class=\"fa-brands fa-foursquare\" style=\"color: #2271b1;\"><\/i> <span>Foursquare<\/span>",
+                "stack-overflow": "<i class=\"fa-brands fa-stack-overflow\" style=\"color: #2271b1;\"><\/i> <span>Stack Overflow<\/span>",
+                "github-alt": "<i class=\"fa-brands fa-github-alt\" style=\"color: #2271b1;\"><\/i> <span>Github Alt<\/span>",
+                "phoenix-squadron": "<i class=\"fa-brands fa-phoenix-squadron\" style=\"color: #2271b1;\"><\/i> <span>Phoenix Squadron<\/span>",
+                "pagelines": "<i class=\"fa-brands fa-pagelines\" style=\"color: #2271b1;\"><\/i> <span>Pagelines<\/span>",
+                "algolia": "<i class=\"fa-brands fa-algolia\" style=\"color: #2271b1;\"><\/i> <span>Algolia<\/span>",
+                "red-river": "<i class=\"fa-brands fa-red-river\" style=\"color: #2271b1;\"><\/i> <span>Red River<\/span>",
+                "creative-commons-sa": "<i class=\"fa-brands fa-creative-commons-sa\" style=\"color: #2271b1;\"><\/i> <span>Creative Commons Sa<\/span>",
+                "safari": "<i class=\"fa-brands fa-safari\" style=\"color: #2271b1;\"><\/i> <span>Safari<\/span>",
+                "google": "<i class=\"fa-brands fa-google\" style=\"color: #2271b1;\"><\/i> <span>Google<\/span>",
+                "square-font-awesome-stroke": "<i class=\"fa-brands fa-square-font-awesome-stroke\" style=\"color: #2271b1;\"><\/i> <span>Square Font Awesome Stroke<\/span>",
+                "atlassian": "<i class=\"fa-brands fa-atlassian\" style=\"color: #2271b1;\"><\/i> <span>Atlassian<\/span>",
+                "linkedin-in": "<i class=\"fa-brands fa-linkedin-in\" style=\"color: #2271b1;\"><\/i> <span>Linkedin In<\/span>",
+                "digital-ocean": "<i class=\"fa-brands fa-digital-ocean\" style=\"color: #2271b1;\"><\/i> <span>Digital Ocean<\/span>",
+                "nimblr": "<i class=\"fa-brands fa-nimblr\" style=\"color: #2271b1;\"><\/i> <span>Nimblr<\/span>",
+                "chromecast": "<i class=\"fa-brands fa-chromecast\" style=\"color: #2271b1;\"><\/i> <span>Chromecast<\/span>",
+                "evernote": "<i class=\"fa-brands fa-evernote\" style=\"color: #2271b1;\"><\/i> <span>Evernote<\/span>",
+                "hacker-news": "<i class=\"fa-brands fa-hacker-news\" style=\"color: #2271b1;\"><\/i> <span>Hacker News<\/span>",
+                "creative-commons-sampling": "<i class=\"fa-brands fa-creative-commons-sampling\" style=\"color: #2271b1;\"><\/i> <span>Creative Commons Sampling<\/span>",
+                "adversal": "<i class=\"fa-brands fa-adversal\" style=\"color: #2271b1;\"><\/i> <span>Adversal<\/span>",
+                "creative-commons": "<i class=\"fa-brands fa-creative-commons\" style=\"color: #2271b1;\"><\/i> <span>Creative Commons<\/span>",
+                "watchman-monitoring": "<i class=\"fa-brands fa-watchman-monitoring\" style=\"color: #2271b1;\"><\/i> <span>Watchman Monitoring<\/span>",
+                "fonticons": "<i class=\"fa-brands fa-fonticons\" style=\"color: #2271b1;\"><\/i> <span>Fonticons<\/span>",
+                "weixin": "<i class=\"fa-brands fa-weixin\" style=\"color: #2271b1;\"><\/i> <span>Weixin<\/span>",
+                "shirtsinbulk": "<i class=\"fa-brands fa-shirtsinbulk\" style=\"color: #2271b1;\"><\/i> <span>Shirtsinbulk<\/span>",
+                "codepen": "<i class=\"fa-brands fa-codepen\" style=\"color: #2271b1;\"><\/i> <span>Codepen<\/span>",
+                "git-alt": "<i class=\"fa-brands fa-git-alt\" style=\"color: #2271b1;\"><\/i> <span>Git Alt<\/span>",
+                "lyft": "<i class=\"fa-brands fa-lyft\" style=\"color: #2271b1;\"><\/i> <span>Lyft<\/span>",
+                "rev": "<i class=\"fa-brands fa-rev\" style=\"color: #2271b1;\"><\/i> <span>Rev<\/span>",
+                "windows": "<i class=\"fa-brands fa-windows\" style=\"color: #2271b1;\"><\/i> <span>Windows<\/span>",
+                "wizards-of-the-coast": "<i class=\"fa-brands fa-wizards-of-the-coast\" style=\"color: #2271b1;\"><\/i> <span>Wizards Of The Coast<\/span>",
+                "square-viadeo": "<i class=\"fa-brands fa-square-viadeo\" style=\"color: #2271b1;\"><\/i> <span>Square Viadeo<\/span>",
+                "meetup": "<i class=\"fa-brands fa-meetup\" style=\"color: #2271b1;\"><\/i> <span>Meetup<\/span>",
+                "centos": "<i class=\"fa-brands fa-centos\" style=\"color: #2271b1;\"><\/i> <span>Centos<\/span>",
+                "adn": "<i class=\"fa-brands fa-adn\" style=\"color: #2271b1;\"><\/i> <span>Adn<\/span>",
+                "cloudsmith": "<i class=\"fa-brands fa-cloudsmith\" style=\"color: #2271b1;\"><\/i> <span>Cloudsmith<\/span>",
+                "pied-piper-alt": "<i class=\"fa-brands fa-pied-piper-alt\" style=\"color: #2271b1;\"><\/i> <span>Pied Piper Alt<\/span>",
+                "square-dribbble": "<i class=\"fa-brands fa-square-dribbble\" style=\"color: #2271b1;\"><\/i> <span>Square Dribbble<\/span>",
+                "codiepie": "<i class=\"fa-brands fa-codiepie\" style=\"color: #2271b1;\"><\/i> <span>Codiepie<\/span>",
+                "node": "<i class=\"fa-brands fa-node\" style=\"color: #2271b1;\"><\/i> <span>Node<\/span>",
+                "mix": "<i class=\"fa-brands fa-mix\" style=\"color: #2271b1;\"><\/i> <span>Mix<\/span>",
+                "steam": "<i class=\"fa-brands fa-steam\" style=\"color: #2271b1;\"><\/i> <span>Steam<\/span>",
+                "cc-apple-pay": "<i class=\"fa-brands fa-cc-apple-pay\" style=\"color: #2271b1;\"><\/i> <span>Cc Apple Pay<\/span>",
+                "scribd": "<i class=\"fa-brands fa-scribd\" style=\"color: #2271b1;\"><\/i> <span>Scribd<\/span>",
+                "openid": "<i class=\"fa-brands fa-openid\" style=\"color: #2271b1;\"><\/i> <span>Openid<\/span>",
+                "instalod": "<i class=\"fa-brands fa-instalod\" style=\"color: #2271b1;\"><\/i> <span>Instalod<\/span>",
+                "expeditedssl": "<i class=\"fa-brands fa-expeditedssl\" style=\"color: #2271b1;\"><\/i> <span>Expeditedssl<\/span>",
+                "sellcast": "<i class=\"fa-brands fa-sellcast\" style=\"color: #2271b1;\"><\/i> <span>Sellcast<\/span>",
+                "square-twitter": "<i class=\"fa-brands fa-square-twitter\" style=\"color: #2271b1;\"><\/i> <span>Square Twitter<\/span>",
+                "r-project": "<i class=\"fa-brands fa-r-project\" style=\"color: #2271b1;\"><\/i> <span>R Project<\/span>",
+                "delicious": "<i class=\"fa-brands fa-delicious\" style=\"color: #2271b1;\"><\/i> <span>Delicious<\/span>",
+                "freebsd": "<i class=\"fa-brands fa-freebsd\" style=\"color: #2271b1;\"><\/i> <span>Freebsd<\/span>",
+                "vuejs": "<i class=\"fa-brands fa-vuejs\" style=\"color: #2271b1;\"><\/i> <span>Vuejs<\/span>",
+                "accusoft": "<i class=\"fa-brands fa-accusoft\" style=\"color: #2271b1;\"><\/i> <span>Accusoft<\/span>",
+                "ioxhost": "<i class=\"fa-brands fa-ioxhost\" style=\"color: #2271b1;\"><\/i> <span>Ioxhost<\/span>",
+                "fonticons-fi": "<i class=\"fa-brands fa-fonticons-fi\" style=\"color: #2271b1;\"><\/i> <span>Fonticons Fi<\/span>",
+                "app-store": "<i class=\"fa-brands fa-app-store\" style=\"color: #2271b1;\"><\/i> <span>App Store<\/span>",
+                "cc-mastercard": "<i class=\"fa-brands fa-cc-mastercard\" style=\"color: #2271b1;\"><\/i> <span>Cc Mastercard<\/span>",
+                "itunes-note": "<i class=\"fa-brands fa-itunes-note\" style=\"color: #2271b1;\"><\/i> <span>Itunes Note<\/span>",
+                "golang": "<i class=\"fa-brands fa-golang\" style=\"color: #2271b1;\"><\/i> <span>Golang<\/span>",
+                "kickstarter": "<i class=\"fa-brands fa-kickstarter\" style=\"color: #2271b1;\"><\/i> <span>Kickstarter<\/span>",
+                "grav": "<i class=\"fa-brands fa-grav\" style=\"color: #2271b1;\"><\/i> <span>Grav<\/span>",
+                "weibo": "<i class=\"fa-brands fa-weibo\" style=\"color: #2271b1;\"><\/i> <span>Weibo<\/span>",
+                "uncharted": "<i class=\"fa-brands fa-uncharted\" style=\"color: #2271b1;\"><\/i> <span>Uncharted<\/span>",
+                "firstdraft": "<i class=\"fa-brands fa-firstdraft\" style=\"color: #2271b1;\"><\/i> <span>Firstdraft<\/span>",
+                "square-youtube": "<i class=\"fa-brands fa-square-youtube\" style=\"color: #2271b1;\"><\/i> <span>Square Youtube<\/span>",
+                "wikipedia-w": "<i class=\"fa-brands fa-wikipedia-w\" style=\"color: #2271b1;\"><\/i> <span>Wikipedia W<\/span>",
+                "wpressr": "<i class=\"fa-brands fa-wpressr\" style=\"color: #2271b1;\"><\/i> <span>Wpressr<\/span>",
+                "angellist": "<i class=\"fa-brands fa-angellist\" style=\"color: #2271b1;\"><\/i> <span>Angellist<\/span>",
+                "galactic-republic": "<i class=\"fa-brands fa-galactic-republic\" style=\"color: #2271b1;\"><\/i> <span>Galactic Republic<\/span>",
+                "nfc-directional": "<i class=\"fa-brands fa-nfc-directional\" style=\"color: #2271b1;\"><\/i> <span>Nfc Directional<\/span>",
+                "skype": "<i class=\"fa-brands fa-skype\" style=\"color: #2271b1;\"><\/i> <span>Skype<\/span>",
+                "joget": "<i class=\"fa-brands fa-joget\" style=\"color: #2271b1;\"><\/i> <span>Joget<\/span>",
+                "fedora": "<i class=\"fa-brands fa-fedora\" style=\"color: #2271b1;\"><\/i> <span>Fedora<\/span>",
+                "stripe-s": "<i class=\"fa-brands fa-stripe-s\" style=\"color: #2271b1;\"><\/i> <span>Stripe S<\/span>",
+                "meta": "<i class=\"fa-brands fa-meta\" style=\"color: #2271b1;\"><\/i> <span>Meta<\/span>",
+                "laravel": "<i class=\"fa-brands fa-laravel\" style=\"color: #2271b1;\"><\/i> <span>Laravel<\/span>",
+                "hotjar": "<i class=\"fa-brands fa-hotjar\" style=\"color: #2271b1;\"><\/i> <span>Hotjar<\/span>",
+                "bluetooth-b": "<i class=\"fa-brands fa-bluetooth-b\" style=\"color: #2271b1;\"><\/i> <span>Bluetooth B<\/span>",
+                "sticker-mule": "<i class=\"fa-brands fa-sticker-mule\" style=\"color: #2271b1;\"><\/i> <span>Sticker Mule<\/span>",
+                "creative-commons-zero": "<i class=\"fa-brands fa-creative-commons-zero\" style=\"color: #2271b1;\"><\/i> <span>Creative Commons Zero<\/span>",
+                "hips": "<i class=\"fa-brands fa-hips\" style=\"color: #2271b1;\"><\/i> <span>Hips<\/span>",
+                "behance": "<i class=\"fa-brands fa-behance\" style=\"color: #2271b1;\"><\/i> <span>Behance<\/span>",
+                "reddit": "<i class=\"fa-brands fa-reddit\" style=\"color: #2271b1;\"><\/i> <span>Reddit<\/span>",
+                "discord": "<i class=\"fa-brands fa-discord\" style=\"color: #2271b1;\"><\/i> <span>Discord<\/span>",
+                "chrome": "<i class=\"fa-brands fa-chrome\" style=\"color: #2271b1;\"><\/i> <span>Chrome<\/span>",
+                "app-store-ios": "<i class=\"fa-brands fa-app-store-ios\" style=\"color: #2271b1;\"><\/i> <span>App Store Ios<\/span>",
+                "cc-discover": "<i class=\"fa-brands fa-cc-discover\" style=\"color: #2271b1;\"><\/i> <span>Cc Discover<\/span>",
+                "wpbeginner": "<i class=\"fa-brands fa-wpbeginner\" style=\"color: #2271b1;\"><\/i> <span>Wpbeginner<\/span>",
+                "confluence": "<i class=\"fa-brands fa-confluence\" style=\"color: #2271b1;\"><\/i> <span>Confluence<\/span>",
+                "mdb": "<i class=\"fa-brands fa-mdb\" style=\"color: #2271b1;\"><\/i> <span>Mdb<\/span>",
+                "dochub": "<i class=\"fa-brands fa-dochub\" style=\"color: #2271b1;\"><\/i> <span>Dochub<\/span>",
+                "accessible-icon": "<i class=\"fa-brands fa-accessible-icon\" style=\"color: #2271b1;\"><\/i> <span>Accessible Icon<\/span>",
+                "ebay": "<i class=\"fa-brands fa-ebay\" style=\"color: #2271b1;\"><\/i> <span>Ebay<\/span>",
+                "amazon": "<i class=\"fa-brands fa-amazon\" style=\"color: #2271b1;\"><\/i> <span>Amazon<\/span>",
+                "unsplash": "<i class=\"fa-brands fa-unsplash\" style=\"color: #2271b1;\"><\/i> <span>Unsplash<\/span>",
+                "yarn": "<i class=\"fa-brands fa-yarn\" style=\"color: #2271b1;\"><\/i> <span>Yarn<\/span>",
+                "square-steam": "<i class=\"fa-brands fa-square-steam\" style=\"color: #2271b1;\"><\/i> <span>Square Steam<\/span>",
+                "500px": "<i class=\"fa-brands fa-500px\" style=\"color: #2271b1;\"><\/i> <span>500px<\/span>",
+                "square-vimeo": "<i class=\"fa-brands fa-square-vimeo\" style=\"color: #2271b1;\"><\/i> <span>Square Vimeo<\/span>",
+                "asymmetrik": "<i class=\"fa-brands fa-asymmetrik\" style=\"color: #2271b1;\"><\/i> <span>Asymmetrik<\/span>",
+                "font-awesome": "<i class=\"fa-brands fa-font-awesome\" style=\"color: #2271b1;\"><\/i> <span>Font Awesome<\/span>",
+                "gratipay": "<i class=\"fa-brands fa-gratipay\" style=\"color: #2271b1;\"><\/i> <span>Gratipay<\/span>",
+                "apple": "<i class=\"fa-brands fa-apple\" style=\"color: #2271b1;\"><\/i> <span>Apple<\/span>",
+                "hive": "<i class=\"fa-brands fa-hive\" style=\"color: #2271b1;\"><\/i> <span>Hive<\/span>",
+                "gitkraken": "<i class=\"fa-brands fa-gitkraken\" style=\"color: #2271b1;\"><\/i> <span>Gitkraken<\/span>",
+                "keybase": "<i class=\"fa-brands fa-keybase\" style=\"color: #2271b1;\"><\/i> <span>Keybase<\/span>",
+                "apple-pay": "<i class=\"fa-brands fa-apple-pay\" style=\"color: #2271b1;\"><\/i> <span>Apple Pay<\/span>",
+                "padlet": "<i class=\"fa-brands fa-padlet\" style=\"color: #2271b1;\"><\/i> <span>Padlet<\/span>",
+                "amazon-pay": "<i class=\"fa-brands fa-amazon-pay\" style=\"color: #2271b1;\"><\/i> <span>Amazon Pay<\/span>",
+                "square-github": "<i class=\"fa-brands fa-square-github\" style=\"color: #2271b1;\"><\/i> <span>Square Github<\/span>",
+                "stumbleupon": "<i class=\"fa-brands fa-stumbleupon\" style=\"color: #2271b1;\"><\/i> <span>Stumbleupon<\/span>",
+                "fedex": "<i class=\"fa-brands fa-fedex\" style=\"color: #2271b1;\"><\/i> <span>Fedex<\/span>",
+                "phoenix-framework": "<i class=\"fa-brands fa-phoenix-framework\" style=\"color: #2271b1;\"><\/i> <span>Phoenix Framework<\/span>",
+                "shopify": "<i class=\"fa-brands fa-shopify\" style=\"color: #2271b1;\"><\/i> <span>Shopify<\/span>",
+                "neos": "<i class=\"fa-brands fa-neos\" style=\"color: #2271b1;\"><\/i> <span>Neos<\/span>",
+                "hackerrank": "<i class=\"fa-brands fa-hackerrank\" style=\"color: #2271b1;\"><\/i> <span>Hackerrank<\/span>",
+                "researchgate": "<i class=\"fa-brands fa-researchgate\" style=\"color: #2271b1;\"><\/i> <span>Researchgate<\/span>",
+                "swift": "<i class=\"fa-brands fa-swift\" style=\"color: #2271b1;\"><\/i> <span>Swift<\/span>",
+                "angular": "<i class=\"fa-brands fa-angular\" style=\"color: #2271b1;\"><\/i> <span>Angular<\/span>",
+                "speakap": "<i class=\"fa-brands fa-speakap\" style=\"color: #2271b1;\"><\/i> <span>Speakap<\/span>",
+                "angrycreative": "<i class=\"fa-brands fa-angrycreative\" style=\"color: #2271b1;\"><\/i> <span>Angrycreative<\/span>",
+                "y-combinator": "<i class=\"fa-brands fa-y-combinator\" style=\"color: #2271b1;\"><\/i> <span>Y Combinator<\/span>",
+                "empire": "<i class=\"fa-brands fa-empire\" style=\"color: #2271b1;\"><\/i> <span>Empire<\/span>",
+                "envira": "<i class=\"fa-brands fa-envira\" style=\"color: #2271b1;\"><\/i> <span>Envira<\/span>",
+                "square-gitlab": "<i class=\"fa-brands fa-square-gitlab\" style=\"color: #2271b1;\"><\/i> <span>Square Gitlab<\/span>",
+                "studiovinari": "<i class=\"fa-brands fa-studiovinari\" style=\"color: #2271b1;\"><\/i> <span>Studiovinari<\/span>",
+                "pied-piper": "<i class=\"fa-brands fa-pied-piper\" style=\"color: #2271b1;\"><\/i> <span>Pied Piper<\/span>",
+                "wordpress": "<i class=\"fa-brands fa-wordpress\" style=\"color: #2271b1;\"><\/i> <span>Wordpress<\/span>",
+                "product-hunt": "<i class=\"fa-brands fa-product-hunt\" style=\"color: #2271b1;\"><\/i> <span>Product Hunt<\/span>",
+                "firefox": "<i class=\"fa-brands fa-firefox\" style=\"color: #2271b1;\"><\/i> <span>Firefox<\/span>",
+                "linode": "<i class=\"fa-brands fa-linode\" style=\"color: #2271b1;\"><\/i> <span>Linode<\/span>",
+                "goodreads": "<i class=\"fa-brands fa-goodreads\" style=\"color: #2271b1;\"><\/i> <span>Goodreads<\/span>",
+                "square-odnoklassniki": "<i class=\"fa-brands fa-square-odnoklassniki\" style=\"color: #2271b1;\"><\/i> <span>Square Odnoklassniki<\/span>",
+                "jsfiddle": "<i class=\"fa-brands fa-jsfiddle\" style=\"color: #2271b1;\"><\/i> <span>Jsfiddle<\/span>",
+                "sith": "<i class=\"fa-brands fa-sith\" style=\"color: #2271b1;\"><\/i> <span>Sith<\/span>",
+                "themeisle": "<i class=\"fa-brands fa-themeisle\" style=\"color: #2271b1;\"><\/i> <span>Themeisle<\/span>",
+                "page4": "<i class=\"fa-brands fa-page4\" style=\"color: #2271b1;\"><\/i> <span>Page4<\/span>",
+                "hashnode": "<i class=\"fa-brands fa-hashnode\" style=\"color: #2271b1;\"><\/i> <span>Hashnode<\/span>",
+                "react": "<i class=\"fa-brands fa-react\" style=\"color: #2271b1;\"><\/i> <span>React<\/span>",
+                "cc-paypal": "<i class=\"fa-brands fa-cc-paypal\" style=\"color: #2271b1;\"><\/i> <span>Cc Paypal<\/span>",
+                "squarespace": "<i class=\"fa-brands fa-squarespace\" style=\"color: #2271b1;\"><\/i> <span>Squarespace<\/span>",
+                "cc-stripe": "<i class=\"fa-brands fa-cc-stripe\" style=\"color: #2271b1;\"><\/i> <span>Cc Stripe<\/span>",
+                "creative-commons-share": "<i class=\"fa-brands fa-creative-commons-share\" style=\"color: #2271b1;\"><\/i> <span>Creative Commons Share<\/span>",
+                "bitcoin": "<i class=\"fa-brands fa-bitcoin\" style=\"color: #2271b1;\"><\/i> <span>Bitcoin<\/span>",
+                "keycdn": "<i class=\"fa-brands fa-keycdn\" style=\"color: #2271b1;\"><\/i> <span>Keycdn<\/span>",
+                "opera": "<i class=\"fa-brands fa-opera\" style=\"color: #2271b1;\"><\/i> <span>Opera<\/span>",
+                "itch-io": "<i class=\"fa-brands fa-itch-io\" style=\"color: #2271b1;\"><\/i> <span>Itch Io<\/span>",
+                "umbraco": "<i class=\"fa-brands fa-umbraco\" style=\"color: #2271b1;\"><\/i> <span>Umbraco<\/span>",
+                "galactic-senate": "<i class=\"fa-brands fa-galactic-senate\" style=\"color: #2271b1;\"><\/i> <span>Galactic Senate<\/span>",
+                "ubuntu": "<i class=\"fa-brands fa-ubuntu\" style=\"color: #2271b1;\"><\/i> <span>Ubuntu<\/span>",
+                "draft2digital": "<i class=\"fa-brands fa-draft2digital\" style=\"color: #2271b1;\"><\/i> <span>Draft2digital<\/span>",
+                "stripe": "<i class=\"fa-brands fa-stripe\" style=\"color: #2271b1;\"><\/i> <span>Stripe<\/span>",
+                "houzz": "<i class=\"fa-brands fa-houzz\" style=\"color: #2271b1;\"><\/i> <span>Houzz<\/span>",
+                "gg": "<i class=\"fa-brands fa-gg\" style=\"color: #2271b1;\"><\/i> <span>Gg<\/span>",
+                "dhl": "<i class=\"fa-brands fa-dhl\" style=\"color: #2271b1;\"><\/i> <span>Dhl<\/span>",
+                "square-pinterest": "<i class=\"fa-brands fa-square-pinterest\" style=\"color: #2271b1;\"><\/i> <span>Square Pinterest<\/span>",
+                "xing": "<i class=\"fa-brands fa-xing\" style=\"color: #2271b1;\"><\/i> <span>Xing<\/span>",
+                "blackberry": "<i class=\"fa-brands fa-blackberry\" style=\"color: #2271b1;\"><\/i> <span>Blackberry<\/span>",
+                "creative-commons-pd": "<i class=\"fa-brands fa-creative-commons-pd\" style=\"color: #2271b1;\"><\/i> <span>Creative Commons Pd<\/span>",
+                "playstation": "<i class=\"fa-brands fa-playstation\" style=\"color: #2271b1;\"><\/i> <span>Playstation<\/span>",
+                "quinscape": "<i class=\"fa-brands fa-quinscape\" style=\"color: #2271b1;\"><\/i> <span>Quinscape<\/span>",
+                "less": "<i class=\"fa-brands fa-less\" style=\"color: #2271b1;\"><\/i> <span>Less<\/span>",
+                "blogger-b": "<i class=\"fa-brands fa-blogger-b\" style=\"color: #2271b1;\"><\/i> <span>Blogger B<\/span>",
+                "opencart": "<i class=\"fa-brands fa-opencart\" style=\"color: #2271b1;\"><\/i> <span>Opencart<\/span>",
+                "vine": "<i class=\"fa-brands fa-vine\" style=\"color: #2271b1;\"><\/i> <span>Vine<\/span>",
+                "paypal": "<i class=\"fa-brands fa-paypal\" style=\"color: #2271b1;\"><\/i> <span>Paypal<\/span>",
+                "gitlab": "<i class=\"fa-brands fa-gitlab\" style=\"color: #2271b1;\"><\/i> <span>Gitlab<\/span>",
+                "typo3": "<i class=\"fa-brands fa-typo3\" style=\"color: #2271b1;\"><\/i> <span>Typo3<\/span>",
+                "reddit-alien": "<i class=\"fa-brands fa-reddit-alien\" style=\"color: #2271b1;\"><\/i> <span>Reddit Alien<\/span>",
+                "yahoo": "<i class=\"fa-brands fa-yahoo\" style=\"color: #2271b1;\"><\/i> <span>Yahoo<\/span>",
+                "dailymotion": "<i class=\"fa-brands fa-dailymotion\" style=\"color: #2271b1;\"><\/i> <span>Dailymotion<\/span>",
+                "affiliatetheme": "<i class=\"fa-brands fa-affiliatetheme\" style=\"color: #2271b1;\"><\/i> <span>Affiliatetheme<\/span>",
+                "pied-piper-pp": "<i class=\"fa-brands fa-pied-piper-pp\" style=\"color: #2271b1;\"><\/i> <span>Pied Piper Pp<\/span>",
+                "bootstrap": "<i class=\"fa-brands fa-bootstrap\" style=\"color: #2271b1;\"><\/i> <span>Bootstrap<\/span>",
+                "odnoklassniki": "<i class=\"fa-brands fa-odnoklassniki\" style=\"color: #2271b1;\"><\/i> <span>Odnoklassniki<\/span>",
+                "nfc-symbol": "<i class=\"fa-brands fa-nfc-symbol\" style=\"color: #2271b1;\"><\/i> <span>Nfc Symbol<\/span>",
+                "ethereum": "<i class=\"fa-brands fa-ethereum\" style=\"color: #2271b1;\"><\/i> <span>Ethereum<\/span>",
+                "speaker-deck": "<i class=\"fa-brands fa-speaker-deck\" style=\"color: #2271b1;\"><\/i> <span>Speaker Deck<\/span>",
+                "creative-commons-nc-eu": "<i class=\"fa-brands fa-creative-commons-nc-eu\" style=\"color: #2271b1;\"><\/i> <span>Creative Commons Nc Eu<\/span>",
+                "patreon": "<i class=\"fa-brands fa-patreon\" style=\"color: #2271b1;\"><\/i> <span>Patreon<\/span>",
+                "avianex": "<i class=\"fa-brands fa-avianex\" style=\"color: #2271b1;\"><\/i> <span>Avianex<\/span>",
+                "ello": "<i class=\"fa-brands fa-ello\" style=\"color: #2271b1;\"><\/i> <span>Ello<\/span>",
+                "gofore": "<i class=\"fa-brands fa-gofore\" style=\"color: #2271b1;\"><\/i> <span>Gofore<\/span>",
+                "bimobject": "<i class=\"fa-brands fa-bimobject\" style=\"color: #2271b1;\"><\/i> <span>Bimobject<\/span>",
+                "facebook-f": "<i class=\"fa-brands fa-facebook-f\" style=\"color: #2271b1;\"><\/i> <span>Facebook F<\/span>",
+                "square-google-plus": "<i class=\"fa-brands fa-square-google-plus\" style=\"color: #2271b1;\"><\/i> <span>Square Google Plus<\/span>",
+                "mandalorian": "<i class=\"fa-brands fa-mandalorian\" style=\"color: #2271b1;\"><\/i> <span>Mandalorian<\/span>",
+                "first-order-alt": "<i class=\"fa-brands fa-first-order-alt\" style=\"color: #2271b1;\"><\/i> <span>First Order Alt<\/span>",
+                "osi": "<i class=\"fa-brands fa-osi\" style=\"color: #2271b1;\"><\/i> <span>Osi<\/span>",
+                "google-wallet": "<i class=\"fa-brands fa-google-wallet\" style=\"color: #2271b1;\"><\/i> <span>Google Wallet<\/span>",
+                "d-and-d-beyond": "<i class=\"fa-brands fa-d-and-d-beyond\" style=\"color: #2271b1;\"><\/i> <span>D And D Beyond<\/span>",
+                "periscope": "<i class=\"fa-brands fa-periscope\" style=\"color: #2271b1;\"><\/i> <span>Periscope<\/span>",
+                "fulcrum": "<i class=\"fa-brands fa-fulcrum\" style=\"color: #2271b1;\"><\/i> <span>Fulcrum<\/span>",
+                "cloudscale": "<i class=\"fa-brands fa-cloudscale\" style=\"color: #2271b1;\"><\/i> <span>Cloudscale<\/span>",
+                "forumbee": "<i class=\"fa-brands fa-forumbee\" style=\"color: #2271b1;\"><\/i> <span>Forumbee<\/span>",
+                "mizuni": "<i class=\"fa-brands fa-mizuni\" style=\"color: #2271b1;\"><\/i> <span>Mizuni<\/span>",
+                "schlix": "<i class=\"fa-brands fa-schlix\" style=\"color: #2271b1;\"><\/i> <span>Schlix<\/span>",
+                "square-xing": "<i class=\"fa-brands fa-square-xing\" style=\"color: #2271b1;\"><\/i> <span>Square Xing<\/span>",
+                "bandcamp": "<i class=\"fa-brands fa-bandcamp\" style=\"color: #2271b1;\"><\/i> <span>Bandcamp<\/span>",
+                "wpforms": "<i class=\"fa-brands fa-wpforms\" style=\"color: #2271b1;\"><\/i> <span>Wpforms<\/span>",
+                "cloudversify": "<i class=\"fa-brands fa-cloudversify\" style=\"color: #2271b1;\"><\/i> <span>Cloudversify<\/span>",
+                "usps": "<i class=\"fa-brands fa-usps\" style=\"color: #2271b1;\"><\/i> <span>Usps<\/span>",
+                "megaport": "<i class=\"fa-brands fa-megaport\" style=\"color: #2271b1;\"><\/i> <span>Megaport<\/span>",
+                "magento": "<i class=\"fa-brands fa-magento\" style=\"color: #2271b1;\"><\/i> <span>Magento<\/span>",
+                "spotify": "<i class=\"fa-brands fa-spotify\" style=\"color: #2271b1;\"><\/i> <span>Spotify<\/span>",
+                "optin-monster": "<i class=\"fa-brands fa-optin-monster\" style=\"color: #2271b1;\"><\/i> <span>Optin Monster<\/span>",
+                "fly": "<i class=\"fa-brands fa-fly\" style=\"color: #2271b1;\"><\/i> <span>Fly<\/span>",
+                "aviato": "<i class=\"fa-brands fa-aviato\" style=\"color: #2271b1;\"><\/i> <span>Aviato<\/span>",
+                "itunes": "<i class=\"fa-brands fa-itunes\" style=\"color: #2271b1;\"><\/i> <span>Itunes<\/span>",
+                "cuttlefish": "<i class=\"fa-brands fa-cuttlefish\" style=\"color: #2271b1;\"><\/i> <span>Cuttlefish<\/span>",
+                "blogger": "<i class=\"fa-brands fa-blogger\" style=\"color: #2271b1;\"><\/i> <span>Blogger<\/span>",
+                "flickr": "<i class=\"fa-brands fa-flickr\" style=\"color: #2271b1;\"><\/i> <span>Flickr<\/span>",
+                "viber": "<i class=\"fa-brands fa-viber\" style=\"color: #2271b1;\"><\/i> <span>Viber<\/span>",
+                "soundcloud": "<i class=\"fa-brands fa-soundcloud\" style=\"color: #2271b1;\"><\/i> <span>Soundcloud<\/span>",
+                "digg": "<i class=\"fa-brands fa-digg\" style=\"color: #2271b1;\"><\/i> <span>Digg<\/span>",
+                "tencent-weibo": "<i class=\"fa-brands fa-tencent-weibo\" style=\"color: #2271b1;\"><\/i> <span>Tencent Weibo<\/span>",
+                "symfony": "<i class=\"fa-brands fa-symfony\" style=\"color: #2271b1;\"><\/i> <span>Symfony<\/span>",
+                "maxcdn": "<i class=\"fa-brands fa-maxcdn\" style=\"color: #2271b1;\"><\/i> <span>Maxcdn<\/span>",
+                "etsy": "<i class=\"fa-brands fa-etsy\" style=\"color: #2271b1;\"><\/i> <span>Etsy<\/span>",
+                "facebook-messenger": "<i class=\"fa-brands fa-facebook-messenger\" style=\"color: #2271b1;\"><\/i> <span>Facebook Messenger<\/span>",
+                "audible": "<i class=\"fa-brands fa-audible\" style=\"color: #2271b1;\"><\/i> <span>Audible<\/span>",
+                "think-peaks": "<i class=\"fa-brands fa-think-peaks\" style=\"color: #2271b1;\"><\/i> <span>Think Peaks<\/span>",
+                "bilibili": "<i class=\"fa-brands fa-bilibili\" style=\"color: #2271b1;\"><\/i> <span>Bilibili<\/span>",
+                "erlang": "<i class=\"fa-brands fa-erlang\" style=\"color: #2271b1;\"><\/i> <span>Erlang<\/span>",
+                "cotton-bureau": "<i class=\"fa-brands fa-cotton-bureau\" style=\"color: #2271b1;\"><\/i> <span>Cotton Bureau<\/span>",
+                "dashcube": "<i class=\"fa-brands fa-dashcube\" style=\"color: #2271b1;\"><\/i> <span>Dashcube<\/span>",
+                "42-group": "<i class=\"fa-brands fa-42-group\" style=\"color: #2271b1;\"><\/i> <span>42 Group<\/span>",
+                "stack-exchange": "<i class=\"fa-brands fa-stack-exchange\" style=\"color: #2271b1;\"><\/i> <span>Stack Exchange<\/span>",
+                "elementor": "<i class=\"fa-brands fa-elementor\" style=\"color: #2271b1;\"><\/i> <span>Elementor<\/span>",
+                "square-pied-piper": "<i class=\"fa-brands fa-square-pied-piper\" style=\"color: #2271b1;\"><\/i> <span>Square Pied Piper<\/span>",
+                "creative-commons-nd": "<i class=\"fa-brands fa-creative-commons-nd\" style=\"color: #2271b1;\"><\/i> <span>Creative Commons Nd<\/span>",
+                "palfed": "<i class=\"fa-brands fa-palfed\" style=\"color: #2271b1;\"><\/i> <span>Palfed<\/span>",
+                "superpowers": "<i class=\"fa-brands fa-superpowers\" style=\"color: #2271b1;\"><\/i> <span>Superpowers<\/span>",
+                "resolving": "<i class=\"fa-brands fa-resolving\" style=\"color: #2271b1;\"><\/i> <span>Resolving<\/span>",
+                "xbox": "<i class=\"fa-brands fa-xbox\" style=\"color: #2271b1;\"><\/i> <span>Xbox<\/span>",
+                "searchengin": "<i class=\"fa-brands fa-searchengin\" style=\"color: #2271b1;\"><\/i> <span>Searchengin<\/span>",
+                "tiktok": "<i class=\"fa-brands fa-tiktok\" style=\"color: #2271b1;\"><\/i> <span>Tiktok<\/span>",
+                "square-facebook": "<i class=\"fa-brands fa-square-facebook\" style=\"color: #2271b1;\"><\/i> <span>Square Facebook<\/span>",
+                "renren": "<i class=\"fa-brands fa-renren\" style=\"color: #2271b1;\"><\/i> <span>Renren<\/span>",
+                "linux": "<i class=\"fa-brands fa-linux\" style=\"color: #2271b1;\"><\/i> <span>Linux<\/span>",
+                "glide": "<i class=\"fa-brands fa-glide\" style=\"color: #2271b1;\"><\/i> <span>Glide<\/span>",
+                "linkedin": "<i class=\"fa-brands fa-linkedin\" style=\"color: #2271b1;\"><\/i> <span>Linkedin<\/span>",
+                "hubspot": "<i class=\"fa-brands fa-hubspot\" style=\"color: #2271b1;\"><\/i> <span>Hubspot<\/span>",
+                "deploydog": "<i class=\"fa-brands fa-deploydog\" style=\"color: #2271b1;\"><\/i> <span>Deploydog<\/span>",
+                "twitch": "<i class=\"fa-brands fa-twitch\" style=\"color: #2271b1;\"><\/i> <span>Twitch<\/span>",
+                "ravelry": "<i class=\"fa-brands fa-ravelry\" style=\"color: #2271b1;\"><\/i> <span>Ravelry<\/span>",
+                "mixer": "<i class=\"fa-brands fa-mixer\" style=\"color: #2271b1;\"><\/i> <span>Mixer<\/span>",
+                "square-lastfm": "<i class=\"fa-brands fa-square-lastfm\" style=\"color: #2271b1;\"><\/i> <span>Square Lastfm<\/span>",
+                "vimeo": "<i class=\"fa-brands fa-vimeo\" style=\"color: #2271b1;\"><\/i> <span>Vimeo<\/span>",
+                "mendeley": "<i class=\"fa-brands fa-mendeley\" style=\"color: #2271b1;\"><\/i> <span>Mendeley<\/span>",
+                "uniregistry": "<i class=\"fa-brands fa-uniregistry\" style=\"color: #2271b1;\"><\/i> <span>Uniregistry<\/span>",
+                "figma": "<i class=\"fa-brands fa-figma\" style=\"color: #2271b1;\"><\/i> <span>Figma<\/span>",
+                "creative-commons-remix": "<i class=\"fa-brands fa-creative-commons-remix\" style=\"color: #2271b1;\"><\/i> <span>Creative Commons Remix<\/span>",
+                "cc-amazon-pay": "<i class=\"fa-brands fa-cc-amazon-pay\" style=\"color: #2271b1;\"><\/i> <span>Cc Amazon Pay<\/span>",
+                "dropbox": "<i class=\"fa-brands fa-dropbox\" style=\"color: #2271b1;\"><\/i> <span>Dropbox<\/span>",
+                "instagram": "<i class=\"fa-brands fa-instagram\" style=\"color: #2271b1;\"><\/i> <span>Instagram<\/span>",
+                "cmplid": "<i class=\"fa-brands fa-cmplid\" style=\"color: #2271b1;\"><\/i> <span>Cmplid<\/span>",
+                "facebook": "<i class=\"fa-brands fa-facebook\" style=\"color: #2271b1;\"><\/i> <span>Facebook<\/span>",
+                "gripfire": "<i class=\"fa-brands fa-gripfire\" style=\"color: #2271b1;\"><\/i> <span>Gripfire<\/span>",
+                "jedi-order": "<i class=\"fa-brands fa-jedi-order\" style=\"color: #2271b1;\"><\/i> <span>Jedi Order<\/span>",
+                "uikit": "<i class=\"fa-brands fa-uikit\" style=\"color: #2271b1;\"><\/i> <span>Uikit<\/span>",
+                "fort-awesome-alt": "<i class=\"fa-brands fa-fort-awesome-alt\" style=\"color: #2271b1;\"><\/i> <span>Fort Awesome Alt<\/span>",
+                "phabricator": "<i class=\"fa-brands fa-phabricator\" style=\"color: #2271b1;\"><\/i> <span>Phabricator<\/span>",
+                "ussunnah": "<i class=\"fa-brands fa-ussunnah\" style=\"color: #2271b1;\"><\/i> <span>Ussunnah<\/span>",
+                "earlybirds": "<i class=\"fa-brands fa-earlybirds\" style=\"color: #2271b1;\"><\/i> <span>Earlybirds<\/span>",
+                "trade-federation": "<i class=\"fa-brands fa-trade-federation\" style=\"color: #2271b1;\"><\/i> <span>Trade Federation<\/span>",
+                "autoprefixer": "<i class=\"fa-brands fa-autoprefixer\" style=\"color: #2271b1;\"><\/i> <span>Autoprefixer<\/span>",
+                "whatsapp": "<i class=\"fa-brands fa-whatsapp\" style=\"color: #2271b1;\"><\/i> <span>Whatsapp<\/span>",
+                "slideshare": "<i class=\"fa-brands fa-slideshare\" style=\"color: #2271b1;\"><\/i> <span>Slideshare<\/span>",
+                "google-play": "<i class=\"fa-brands fa-google-play\" style=\"color: #2271b1;\"><\/i> <span>Google Play<\/span>",
+                "viadeo": "<i class=\"fa-brands fa-viadeo\" style=\"color: #2271b1;\"><\/i> <span>Viadeo<\/span>",
+                "line": "<i class=\"fa-brands fa-line\" style=\"color: #2271b1;\"><\/i> <span>Line<\/span>",
+                "google-drive": "<i class=\"fa-brands fa-google-drive\" style=\"color: #2271b1;\"><\/i> <span>Google Drive<\/span>",
+                "servicestack": "<i class=\"fa-brands fa-servicestack\" style=\"color: #2271b1;\"><\/i> <span>Servicestack<\/span>",
+                "simplybuilt": "<i class=\"fa-brands fa-simplybuilt\" style=\"color: #2271b1;\"><\/i> <span>Simplybuilt<\/span>",
+                "bitbucket": "<i class=\"fa-brands fa-bitbucket\" style=\"color: #2271b1;\"><\/i> <span>Bitbucket<\/span>",
+                "imdb": "<i class=\"fa-brands fa-imdb\" style=\"color: #2271b1;\"><\/i> <span>Imdb<\/span>",
+                "deezer": "<i class=\"fa-brands fa-deezer\" style=\"color: #2271b1;\"><\/i> <span>Deezer<\/span>",
+                "raspberry-pi": "<i class=\"fa-brands fa-raspberry-pi\" style=\"color: #2271b1;\"><\/i> <span>Raspberry Pi<\/span>",
+                "jira": "<i class=\"fa-brands fa-jira\" style=\"color: #2271b1;\"><\/i> <span>Jira<\/span>",
+                "docker": "<i class=\"fa-brands fa-docker\" style=\"color: #2271b1;\"><\/i> <span>Docker<\/span>",
+                "screenpal": "<i class=\"fa-brands fa-screenpal\" style=\"color: #2271b1;\"><\/i> <span>Screenpal<\/span>",
+                "bluetooth": "<i class=\"fa-brands fa-bluetooth\" style=\"color: #2271b1;\"><\/i> <span>Bluetooth<\/span>",
+                "gitter": "<i class=\"fa-brands fa-gitter\" style=\"color: #2271b1;\"><\/i> <span>Gitter<\/span>",
+                "d-and-d": "<i class=\"fa-brands fa-d-and-d\" style=\"color: #2271b1;\"><\/i> <span>D And D<\/span>",
+                "microblog": "<i class=\"fa-brands fa-microblog\" style=\"color: #2271b1;\"><\/i> <span>Microblog<\/span>",
+                "cc-diners-club": "<i class=\"fa-brands fa-cc-diners-club\" style=\"color: #2271b1;\"><\/i> <span>Cc Diners Club<\/span>",
+                "gg-circle": "<i class=\"fa-brands fa-gg-circle\" style=\"color: #2271b1;\"><\/i> <span>Gg Circle<\/span>",
+                "pied-piper-hat": "<i class=\"fa-brands fa-pied-piper-hat\" style=\"color: #2271b1;\"><\/i> <span>Pied Piper Hat<\/span>",
+                "kickstarter-k": "<i class=\"fa-brands fa-kickstarter-k\" style=\"color: #2271b1;\"><\/i> <span>Kickstarter K<\/span>",
+                "yandex": "<i class=\"fa-brands fa-yandex\" style=\"color: #2271b1;\"><\/i> <span>Yandex<\/span>",
+                "readme": "<i class=\"fa-brands fa-readme\" style=\"color: #2271b1;\"><\/i> <span>Readme<\/span>",
+                "html5": "<i class=\"fa-brands fa-html5\" style=\"color: #2271b1;\"><\/i> <span>Html5<\/span>",
+                "sellsy": "<i class=\"fa-brands fa-sellsy\" style=\"color: #2271b1;\"><\/i> <span>Sellsy<\/span>",
+                "sass": "<i class=\"fa-brands fa-sass\" style=\"color: #2271b1;\"><\/i> <span>Sass<\/span>",
+                "wirsindhandwerk": "<i class=\"fa-brands fa-wirsindhandwerk\" style=\"color: #2271b1;\"><\/i> <span>Wirsindhandwerk<\/span>",
+                "buromobelexperte": "<i class=\"fa-brands fa-buromobelexperte\" style=\"color: #2271b1;\"><\/i> <span>Buromobelexperte<\/span>",
+                "salesforce": "<i class=\"fa-brands fa-salesforce\" style=\"color: #2271b1;\"><\/i> <span>Salesforce<\/span>",
+                "octopus-deploy": "<i class=\"fa-brands fa-octopus-deploy\" style=\"color: #2271b1;\"><\/i> <span>Octopus Deploy<\/span>",
+                "medapps": "<i class=\"fa-brands fa-medapps\" style=\"color: #2271b1;\"><\/i> <span>Medapps<\/span>",
+                "ns8": "<i class=\"fa-brands fa-ns8\" style=\"color: #2271b1;\"><\/i> <span>Ns8<\/span>",
+                "pinterest-p": "<i class=\"fa-brands fa-pinterest-p\" style=\"color: #2271b1;\"><\/i> <span>Pinterest P<\/span>",
+                "apper": "<i class=\"fa-brands fa-apper\" style=\"color: #2271b1;\"><\/i> <span>Apper<\/span>",
+                "fort-awesome": "<i class=\"fa-brands fa-fort-awesome\" style=\"color: #2271b1;\"><\/i> <span>Fort Awesome<\/span>",
+                "waze": "<i class=\"fa-brands fa-waze\" style=\"color: #2271b1;\"><\/i> <span>Waze<\/span>",
+                "cc-jcb": "<i class=\"fa-brands fa-cc-jcb\" style=\"color: #2271b1;\"><\/i> <span>Cc Jcb<\/span>",
+                "snapchat": "<i class=\"fa-brands fa-snapchat\" style=\"color: #2271b1;\"><\/i> <span>Snapchat<\/span>",
+                "fantasy-flight-games": "<i class=\"fa-brands fa-fantasy-flight-games\" style=\"color: #2271b1;\"><\/i> <span>Fantasy Flight Games<\/span>",
+                "rust": "<i class=\"fa-brands fa-rust\" style=\"color: #2271b1;\"><\/i> <span>Rust<\/span>",
+                "wix": "<i class=\"fa-brands fa-wix\" style=\"color: #2271b1;\"><\/i> <span>Wix<\/span>",
+                "square-behance": "<i class=\"fa-brands fa-square-behance\" style=\"color: #2271b1;\"><\/i> <span>Square Behance<\/span>",
+                "supple": "<i class=\"fa-brands fa-supple\" style=\"color: #2271b1;\"><\/i> <span>Supple<\/span>",
+                "rebel": "<i class=\"fa-brands fa-rebel\" style=\"color: #2271b1;\"><\/i> <span>Rebel<\/span>",
+                "css3": "<i class=\"fa-brands fa-css3\" style=\"color: #2271b1;\"><\/i> <span>Css3<\/span>",
+                "staylinked": "<i class=\"fa-brands fa-staylinked\" style=\"color: #2271b1;\"><\/i> <span>Staylinked<\/span>",
+                "kaggle": "<i class=\"fa-brands fa-kaggle\" style=\"color: #2271b1;\"><\/i> <span>Kaggle<\/span>",
+                "space-awesome": "<i class=\"fa-brands fa-space-awesome\" style=\"color: #2271b1;\"><\/i> <span>Space Awesome<\/span>",
+                "deviantart": "<i class=\"fa-brands fa-deviantart\" style=\"color: #2271b1;\"><\/i> <span>Deviantart<\/span>",
+                "cpanel": "<i class=\"fa-brands fa-cpanel\" style=\"color: #2271b1;\"><\/i> <span>Cpanel<\/span>",
+                "goodreads-g": "<i class=\"fa-brands fa-goodreads-g\" style=\"color: #2271b1;\"><\/i> <span>Goodreads G<\/span>",
+                "square-git": "<i class=\"fa-brands fa-square-git\" style=\"color: #2271b1;\"><\/i> <span>Square Git<\/span>",
+                "square-tumblr": "<i class=\"fa-brands fa-square-tumblr\" style=\"color: #2271b1;\"><\/i> <span>Square Tumblr<\/span>",
+                "trello": "<i class=\"fa-brands fa-trello\" style=\"color: #2271b1;\"><\/i> <span>Trello<\/span>",
+                "creative-commons-nc-jp": "<i class=\"fa-brands fa-creative-commons-nc-jp\" style=\"color: #2271b1;\"><\/i> <span>Creative Commons Nc Jp<\/span>",
+                "get-pocket": "<i class=\"fa-brands fa-get-pocket\" style=\"color: #2271b1;\"><\/i> <span>Get Pocket<\/span>",
+                "perbyte": "<i class=\"fa-brands fa-perbyte\" style=\"color: #2271b1;\"><\/i> <span>Perbyte<\/span>",
+                "grunt": "<i class=\"fa-brands fa-grunt\" style=\"color: #2271b1;\"><\/i> <span>Grunt<\/span>",
+                "weebly": "<i class=\"fa-brands fa-weebly\" style=\"color: #2271b1;\"><\/i> <span>Weebly<\/span>",
+                "connectdevelop": "<i class=\"fa-brands fa-connectdevelop\" style=\"color: #2271b1;\"><\/i> <span>Connectdevelop<\/span>",
+                "leanpub": "<i class=\"fa-brands fa-leanpub\" style=\"color: #2271b1;\"><\/i> <span>Leanpub<\/span>",
+                "black-tie": "<i class=\"fa-brands fa-black-tie\" style=\"color: #2271b1;\"><\/i> <span>Black Tie<\/span>",
+                "themeco": "<i class=\"fa-brands fa-themeco\" style=\"color: #2271b1;\"><\/i> <span>Themeco<\/span>",
+                "python": "<i class=\"fa-brands fa-python\" style=\"color: #2271b1;\"><\/i> <span>Python<\/span>",
+                "android": "<i class=\"fa-brands fa-android\" style=\"color: #2271b1;\"><\/i> <span>Android<\/span>",
+                "bots": "<i class=\"fa-brands fa-bots\" style=\"color: #2271b1;\"><\/i> <span>Bots<\/span>",
+                "free-code-camp": "<i class=\"fa-brands fa-free-code-camp\" style=\"color: #2271b1;\"><\/i> <span>Free Code Camp<\/span>",
+                "hornbill": "<i class=\"fa-brands fa-hornbill\" style=\"color: #2271b1;\"><\/i> <span>Hornbill<\/span>",
+                "js": "<i class=\"fa-brands fa-js\" style=\"color: #2271b1;\"><\/i> <span>Js<\/span>",
+                "ideal": "<i class=\"fa-brands fa-ideal\" style=\"color: #2271b1;\"><\/i> <span>Ideal<\/span>",
+                "git": "<i class=\"fa-brands fa-git\" style=\"color: #2271b1;\"><\/i> <span>Git<\/span>",
+                "dev": "<i class=\"fa-brands fa-dev\" style=\"color: #2271b1;\"><\/i> <span>Dev<\/span>",
+                "sketch": "<i class=\"fa-brands fa-sketch\" style=\"color: #2271b1;\"><\/i> <span>Sketch<\/span>",
+                "yandex-international": "<i class=\"fa-brands fa-yandex-international\" style=\"color: #2271b1;\"><\/i> <span>Yandex International<\/span>",
+                "cc-amex": "<i class=\"fa-brands fa-cc-amex\" style=\"color: #2271b1;\"><\/i> <span>Cc Amex<\/span>",
+                "uber": "<i class=\"fa-brands fa-uber\" style=\"color: #2271b1;\"><\/i> <span>Uber<\/span>",
+                "github": "<i class=\"fa-brands fa-github\" style=\"color: #2271b1;\"><\/i> <span>Github<\/span>",
+                "php": "<i class=\"fa-brands fa-php\" style=\"color: #2271b1;\"><\/i> <span>Php<\/span>",
+                "alipay": "<i class=\"fa-brands fa-alipay\" style=\"color: #2271b1;\"><\/i> <span>Alipay<\/span>",
+                "youtube": "<i class=\"fa-brands fa-youtube\" style=\"color: #2271b1;\"><\/i> <span>Youtube<\/span>",
+                "skyatlas": "<i class=\"fa-brands fa-skyatlas\" style=\"color: #2271b1;\"><\/i> <span>Skyatlas<\/span>",
+                "firefox-browser": "<i class=\"fa-brands fa-firefox-browser\" style=\"color: #2271b1;\"><\/i> <span>Firefox Browser<\/span>",
+                "replyd": "<i class=\"fa-brands fa-replyd\" style=\"color: #2271b1;\"><\/i> <span>Replyd<\/span>",
+                "suse": "<i class=\"fa-brands fa-suse\" style=\"color: #2271b1;\"><\/i> <span>Suse<\/span>",
+                "jenkins": "<i class=\"fa-brands fa-jenkins\" style=\"color: #2271b1;\"><\/i> <span>Jenkins<\/span>",
+                "twitter": "<i class=\"fa-brands fa-twitter\" style=\"color: #2271b1;\"><\/i> <span>Twitter<\/span>",
+                "rockrms": "<i class=\"fa-brands fa-rockrms\" style=\"color: #2271b1;\"><\/i> <span>Rockrms<\/span>",
+                "pinterest": "<i class=\"fa-brands fa-pinterest\" style=\"color: #2271b1;\"><\/i> <span>Pinterest<\/span>",
+                "buffer": "<i class=\"fa-brands fa-buffer\" style=\"color: #2271b1;\"><\/i> <span>Buffer<\/span>",
+                "npm": "<i class=\"fa-brands fa-npm\" style=\"color: #2271b1;\"><\/i> <span>Npm<\/span>",
+                "yammer": "<i class=\"fa-brands fa-yammer\" style=\"color: #2271b1;\"><\/i> <span>Yammer<\/span>",
+                "btc": "<i class=\"fa-brands fa-btc\" style=\"color: #2271b1;\"><\/i> <span>Btc<\/span>",
+                "dribbble": "<i class=\"fa-brands fa-dribbble\" style=\"color: #2271b1;\"><\/i> <span>Dribbble<\/span>",
+                "stumbleupon-circle": "<i class=\"fa-brands fa-stumbleupon-circle\" style=\"color: #2271b1;\"><\/i> <span>Stumbleupon Circle<\/span>",
+                "internet-explorer": "<i class=\"fa-brands fa-internet-explorer\" style=\"color: #2271b1;\"><\/i> <span>Internet Explorer<\/span>",
+                "stubber": "<i class=\"fa-brands fa-stubber\" style=\"color: #2271b1;\"><\/i> <span>Stubber<\/span>",
+                "telegram": "<i class=\"fa-brands fa-telegram\" style=\"color: #2271b1;\"><\/i> <span>Telegram<\/span>",
+                "old-republic": "<i class=\"fa-brands fa-old-republic\" style=\"color: #2271b1;\"><\/i> <span>Old Republic<\/span>",
+                "odysee": "<i class=\"fa-brands fa-odysee\" style=\"color: #2271b1;\"><\/i> <span>Odysee<\/span>",
+                "square-whatsapp": "<i class=\"fa-brands fa-square-whatsapp\" style=\"color: #2271b1;\"><\/i> <span>Square Whatsapp<\/span>",
+                "node-js": "<i class=\"fa-brands fa-node-js\" style=\"color: #2271b1;\"><\/i> <span>Node Js<\/span>",
+                "edge-legacy": "<i class=\"fa-brands fa-edge-legacy\" style=\"color: #2271b1;\"><\/i> <span>Edge Legacy<\/span>",
+                "slack": "<i class=\"fa-brands fa-slack\" style=\"color: #2271b1;\"><\/i> <span>Slack<\/span>",
+                "medrt": "<i class=\"fa-brands fa-medrt\" style=\"color: #2271b1;\"><\/i> <span>Medrt<\/span>",
+                "usb": "<i class=\"fa-brands fa-usb\" style=\"color: #2271b1;\"><\/i> <span>Usb<\/span>",
+                "tumblr": "<i class=\"fa-brands fa-tumblr\" style=\"color: #2271b1;\"><\/i> <span>Tumblr<\/span>",
+                "vaadin": "<i class=\"fa-brands fa-vaadin\" style=\"color: #2271b1;\"><\/i> <span>Vaadin<\/span>",
+                "quora": "<i class=\"fa-brands fa-quora\" style=\"color: #2271b1;\"><\/i> <span>Quora<\/span>",
+                "reacteurope": "<i class=\"fa-brands fa-reacteurope\" style=\"color: #2271b1;\"><\/i> <span>Reacteurope<\/span>",
+                "medium": "<i class=\"fa-brands fa-medium\" style=\"color: #2271b1;\"><\/i> <span>Medium<\/span>",
+                "amilia": "<i class=\"fa-brands fa-amilia\" style=\"color: #2271b1;\"><\/i> <span>Amilia<\/span>",
+                "mixcloud": "<i class=\"fa-brands fa-mixcloud\" style=\"color: #2271b1;\"><\/i> <span>Mixcloud<\/span>",
+                "flipboard": "<i class=\"fa-brands fa-flipboard\" style=\"color: #2271b1;\"><\/i> <span>Flipboard<\/span>",
+                "viacoin": "<i class=\"fa-brands fa-viacoin\" style=\"color: #2271b1;\"><\/i> <span>Viacoin<\/span>",
+                "critical-role": "<i class=\"fa-brands fa-critical-role\" style=\"color: #2271b1;\"><\/i> <span>Critical Role<\/span>",
+                "sitrox": "<i class=\"fa-brands fa-sitrox\" style=\"color: #2271b1;\"><\/i> <span>Sitrox<\/span>",
+                "discourse": "<i class=\"fa-brands fa-discourse\" style=\"color: #2271b1;\"><\/i> <span>Discourse<\/span>",
+                "joomla": "<i class=\"fa-brands fa-joomla\" style=\"color: #2271b1;\"><\/i> <span>Joomla<\/span>",
+                "mastodon": "<i class=\"fa-brands fa-mastodon\" style=\"color: #2271b1;\"><\/i> <span>Mastodon<\/span>",
+                "airbnb": "<i class=\"fa-brands fa-airbnb\" style=\"color: #2271b1;\"><\/i> <span>Airbnb<\/span>",
+                "wolf-pack-battalion": "<i class=\"fa-brands fa-wolf-pack-battalion\" style=\"color: #2271b1;\"><\/i> <span>Wolf Pack Battalion<\/span>",
+                "buy-n-large": "<i class=\"fa-brands fa-buy-n-large\" style=\"color: #2271b1;\"><\/i> <span>Buy N Large<\/span>",
+                "gulp": "<i class=\"fa-brands fa-gulp\" style=\"color: #2271b1;\"><\/i> <span>Gulp<\/span>",
+                "creative-commons-sampling-plus": "<i class=\"fa-brands fa-creative-commons-sampling-plus\" style=\"color: #2271b1;\"><\/i> <span>Creative Commons Sampling Plus<\/span>",
+                "strava": "<i class=\"fa-brands fa-strava\" style=\"color: #2271b1;\"><\/i> <span>Strava<\/span>",
+                "ember": "<i class=\"fa-brands fa-ember\" style=\"color: #2271b1;\"><\/i> <span>Ember<\/span>",
+                "canadian-maple-leaf": "<i class=\"fa-brands fa-canadian-maple-leaf\" style=\"color: #2271b1;\"><\/i> <span>Canadian Maple Leaf<\/span>",
+                "teamspeak": "<i class=\"fa-brands fa-teamspeak\" style=\"color: #2271b1;\"><\/i> <span>Teamspeak<\/span>",
+                "pushed": "<i class=\"fa-brands fa-pushed\" style=\"color: #2271b1;\"><\/i> <span>Pushed<\/span>",
+                "wordpress-simple": "<i class=\"fa-brands fa-wordpress-simple\" style=\"color: #2271b1;\"><\/i> <span>Wordpress Simple<\/span>",
+                "nutritionix": "<i class=\"fa-brands fa-nutritionix\" style=\"color: #2271b1;\"><\/i> <span>Nutritionix<\/span>",
+                "wodu": "<i class=\"fa-brands fa-wodu\" style=\"color: #2271b1;\"><\/i> <span>Wodu<\/span>",
+                "google-pay": "<i class=\"fa-brands fa-google-pay\" style=\"color: #2271b1;\"><\/i> <span>Google Pay<\/span>",
+                "intercom": "<i class=\"fa-brands fa-intercom\" style=\"color: #2271b1;\"><\/i> <span>Intercom<\/span>",
+                "zhihu": "<i class=\"fa-brands fa-zhihu\" style=\"color: #2271b1;\"><\/i> <span>Zhihu<\/span>",
+                "korvue": "<i class=\"fa-brands fa-korvue\" style=\"color: #2271b1;\"><\/i> <span>Korvue<\/span>",
+                "pix": "<i class=\"fa-brands fa-pix\" style=\"color: #2271b1;\"><\/i> <span>Pix<\/span>",
+                "steam-symbol": "<i class=\"fa-brands fa-steam-symbol\" style=\"color: #2271b1;\"><\/i> <span>Steam Symbol<\/span>"
+            },
+            "default_value": false,
+            "return_format": "value",
+            "multiple": 0,
+            "allow_null": 0,
+            "ui": 1,
+            "ajax": 0,
+            "placeholder": "",
+            "create_options": 0,
+            "save_options": 0
+        },
+        {
+            "key": "field_664c65c653f1c",
+            "label": "URL",
+            "name": "url",
+            "aria-label": "",
+            "type": "url",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "80",
+                "class": "",
+                "id": ""
+            },
+            "default_value": "",
+            "placeholder": ""
+        }
+    ],
+    "location": [
+        [
+            {
+                "param": "post_type",
+                "operator": "==",
+                "value": "social"
+            }
+        ]
+    ],
+    "menu_order": 0,
+    "position": "normal",
+    "style": "default",
+    "label_placement": "top",
+    "instruction_placement": "label",
+    "hide_on_screen": "",
+    "active": true,
+    "description": "",
+    "show_in_rest": 0,
+    "modified": 1764224435
+}

resources/css/app.css

@@ -1,3 +0,0 @@
-@import "tailwindcss" theme(static);
-@source "../views/";
-@source "../../app/";

resources/css/app.scss

@@ -0,0 +1,24 @@
+// Global Variables, Mixins, and Framework
+@use "global/variables";
+@use "global/mixins";
+@use "global/fonts";
+@use "global/typography";
+@use "global/framework";
+
+// Third Party Plugins
+@use "plugins/contact-form-7";
+@use "plugins/mce";
+
+// Sections
+@use "sections/header";
+@use "sections/footer";
+
+// Components
+@use "components/block";
+@use "components/forms";
+@use "components/button";
+@use "components/card";
+
+// Page Styles
+@use "views/page";
+

resources/css/components/_block.scss

@@ -0,0 +1,15 @@
+
+
+.has-bg-image {
+  position: relative;
+
+  >.container {
+    position: relative;
+    z-index: 1;
+  }
+
+  .badegg-block-background {
+    position: absolute;
+    inset: 0;
+  }
+}

resources/css/components/_button.scss

@@ -0,0 +1,111 @@
+@use "../global/fonts";
+@use "../global/variables/colours";
+
+button {
+  &%block,
+  &.block {
+    background-color: transparent;
+    border: none;
+    font-size: 1em;
+    padding: 0;
+  }
+}
+
+button,
+input[type="submit"] {
+  &.btn {
+    appearance: none;
+  }
+}
+
+%button,
+.btn {
+  display: inline-block;
+  padding: 0.5em 1.25em;
+  border: 0.125em solid colours.$black;
+  border-radius: 0.25em;
+  background-color: colours.$black;
+  color: colours.$white;
+  font-family: fonts.$font;
+  font-weight: 700;
+  text-decoration: none;
+  white-space: normal;
+  cursor: pointer;
+  transition: 300ms ease all;
+
+  .knockout & {
+    background-color: colours.$white;
+    border-color: colours.$white;
+    color: currentcolor;
+  }
+
+  &:hover,
+  &:focus {
+    color: colours.$white;
+    text-decoration: none;
+    background-color: rgba(colours.$black, 0.5);
+    border-color: rgba(colours.$black, 0.5);
+
+    .knockout & {
+      background-color: rgba(colours.$white, 0.5);
+      border-color: rgba(colours.$white, 0.5);
+      color: currentcolor;
+    }
+  }
+
+  &.outline {
+    border-color: colours.$black;
+    background-color: transparent;
+    color: colours.$black;
+
+    &:hover,
+    &:focus {
+      background-color: colours.$black;
+      color: colours.$white;
+    }
+
+    .knockout & {
+      @media screen {
+        border-color: colours.$white;
+        color: colours.$white;
+
+        &:hover,
+        &:focus {
+          background-color: colours.$white;
+          color: colours.$black;
+        }
+      }
+    }
+  }
+
+  &.wide {
+    padding-right: 3em;
+    padding-left: 3em;
+  }
+
+  &.thin {
+    padding-top: 0.5em;
+    padding-bottom: 0.5em;
+  }
+
+  &.full {
+    display: block;
+    width: 100%;
+    padding-right: 0.625em;
+    padding-left: 0.625em;
+    text-align: center;
+  }
+
+  &.small { font-size: 1em; }
+  &.smaller { font-size: 0.875em; }
+  &.big { font-size: 1.25em; }
+  &.bigger { font-size: 1.5em; }
+}
+
+.btn-wrap {
+  margin: 1.5em -0.25em -0.25em;
+
+  .btn {
+    margin: 0.25em;
+  }
+}

resources/css/components/_card.scss

@@ -0,0 +1,13 @@
+.card {
+  position: relative;
+  margin: 0.5em;
+  flex: 0 0 calc(100% - 1em);
+
+  &-wrap {
+    display: flex;
+    flex-wrap: wrap;
+    margin: -0.5em;
+  }
+}
+
+

resources/css/components/_forms.scss

@@ -0,0 +1,286 @@
+@use "../global/fonts";
+@use "../global/variables/breakpoints";
+@use "../global/variables/colours";
+
+input,
+textarea {
+  color: colours.$grey;
+  background: white;
+  font-weight: 400;
+  font-size: 1em;
+  font-family: fonts.$font;
+  width: 100%;
+  padding: 0.875em 1em;
+  margin: 0 0 1em;
+  // border-radius: 0.125em;
+  border: 0.0625em solid rgba(colours.$black, 0.1);
+  outline: none;
+  transition: all 300ms ease;
+
+  &::placeholder {
+    color: colours.$grey-light;
+  }
+
+  &:focus {
+    box-shadow: 0 0.25em 0.5em rgba(colours.$black, 0.1);
+  }
+}
+
+input[type="radio"],
+input[type="checkbox"] {
+  padding: 0;
+  margin: 0;
+  width: auto;
+
+  &:focus {
+    box-shadow: none;
+  }
+}
+
+select {
+  width: 100%;
+}
+
+.field-wrap {
+  flex: 1 1 calc(100% - 1em);
+  margin: 0 0.5em;
+  transition: all 300ms ease;
+
+  p {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  label {
+    flex: 0 0 100%;
+    max-width: 100%;
+    width: 100%;
+    order: -1;
+    margin: 0;
+  }
+
+  textarea,
+  input {
+    flex: 1 1 100%;
+    margin: 0;
+  }
+
+  /* stylelint-disable selector-class-pattern */
+  .mce_inline_error {
+    flex: 0 0 100%;
+    max-width: 100%;
+    width: 100%;
+    margin: 0;
+    font-family: fonts.$font;
+  }
+  /* stylelint-enable selector-class-pattern */
+
+  @media (min-width: breakpoints.$screen-sm) {
+    &.half {
+      flex: 0 0 calc(50% - 1em);
+      max-width: calc(50% - 1em);
+      width: calc(50% - 1em);
+    }
+  }
+}
+
+.form-footer {
+  p {
+    margin: 0;
+    line-height: 1.2;
+  }
+
+  button,
+  .button,
+  input[type="submit"] {
+    margin: 0;
+  }
+
+  .wpcf7-list-item {
+    margin: 0;
+    user-select: none;
+  }
+
+  .form-footer-button {
+    flex: 1 1 100%;
+    display: block;
+    margin: 2em 0 0;
+  }
+
+  @media (min-width: breakpoints.$screen-sm) {
+    display: flex;
+    flex-wrap: wrap;
+
+    .form-footer-button {
+      flex: 0 0 8.5em;
+      max-width: 8.5em;
+      width: 8.5em;
+      margin: 0 0 0 2em;
+      text-align: right;
+    }
+
+    .form-footer-text {
+      flex: 1 1 5em;
+      margin: auto;
+
+      p {
+        display: block;
+      }
+    }
+  }
+}
+
+.section-form {
+  button {
+    margin: 1em 0 0;
+  }
+
+  span.label {
+    font-weight: 700;
+  }
+
+  .textarea-wrap {
+    span.label {
+      display: none;
+    }
+  }
+
+  form {
+    display: flex;
+    flex-wrap: wrap;
+    margin: 1em -0.5em 0;
+    position: relative;
+
+    .wpcf7 {
+      .screen-reader-response {
+        display: none;
+      }
+
+      &-spinner {
+        position: absolute;
+        z-index: 1;
+        top: calc(50% - 12px);
+        left: calc(50% - 12px);
+      }
+
+      &-not-valid-tip {
+        background: colours.$error;
+        color: colours.$white;
+        padding: 0.5em 1em;
+        border-radius: 0 0 0.5em 0.5em;
+        font-weight: 700;
+      }
+
+      &-response-output {
+        margin: 1em 0.5em 0;
+        max-width: calc(100% - 1em);
+        width: calc(100% - 1em);
+        flex: 0 0 calc(100% - 1em);
+        text-align: center;
+        color: colours.$white;
+        font-family: fonts.$font;
+        font-weight: 700;
+        background: colours.$black;
+        border: 0.125em solid colours.$white;
+        padding: 0.5em 1em;
+        border-radius: 0.5em;
+      }
+
+      &-display-none {
+        display: none;
+      }
+
+      &-checkbox {
+        label {
+          display: block;
+          padding: 0 0 0 1.75em;
+          margin: 0;
+          font-weight: 700;
+        }
+
+        input[type="checkbox"] {
+          position: absolute;
+          z-index: 1;
+          top: 0;
+          left: 0;
+          appearance: none;
+          display: block;
+          width: 1.25em;
+          height: 1.25em;
+          border: 0.125em solid colours.$black;
+          background: transparent;
+          color: currentcolor;
+
+          &::before {
+            content: "\f00c";
+            position: absolute;
+            z-index: 1;
+            top: 0;
+            left: 0.125em;
+            font-family: "Font Awesome 6 Free", serif;
+            font-weight: 900;
+            opacity: 0;
+            transition: all 300ms ease;
+          }
+
+          &:checked {
+            &::before {
+              opacity: 1;
+            }
+          }
+        }
+      }
+    }
+
+    &.submitting {
+      .field-wrap:not(.form-footer) {
+        opacity: 0.1;
+      }
+
+      .form-footer {
+        .form-footer-text {
+          opacity: 0.1;
+        }
+
+        .form-footer-button input {
+          opacity: 0.1;
+        }
+      }
+    }
+
+    &.sent {
+      .wpcf7-response-output {
+        background: colours.$success;
+        border-color: colours.$white;
+      }
+    }
+
+    &.invalid {
+      .wpcf7-response-output {
+        background: colours.$error;
+        border-color: colours.$white;
+      }
+    }
+
+    .ajax-loader {
+      position: absolute;
+      z-index: 1;
+      top: calc(50% - 12px);
+      right: calc(50% - 12px);
+      display: block;
+      margin: 0;
+    }
+  }
+
+  &.knockout {
+    form {
+      .wpcf7 {
+        &-checkbox {
+          input[type="checkbox"] {
+            border-color: colours.$white;
+          }
+        }
+      }
+    }
+  }
+}

resources/css/editor.css

@@ -1 +0,0 @@
-@import "tailwindcss";

resources/css/editor.scss

@@ -0,0 +1,73 @@
+@use "app";
+@use "global/variables/colours";
+
+html :where(.wp-block) {
+  max-width: none;
+}
+
+.block-editor-block-list__layout .block-editor-block-list__block:not([contenteditable=true]) {
+  &:hover:after {
+    content: '';
+    outline: 2px solid colours.$wpblue;
+    position: absolute;
+    inset: 0;
+  }
+
+  &:focus:after {
+    outline-style: dashed;
+  }
+}
+
+.editor-styles-wrapper {
+  padding: 0;
+  background: transparent;
+}
+
+.editor-visual-editor {
+  &__post-title-wrapper {
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    padding: 1rem;
+    margin: 0 !important;
+    background: white;
+    box-shadow: 0 0.5rem 1rem rgba(black, 0.15);
+  }
+}
+
+.editor-styles-wrapper {
+  background: colours.$grey-lightest;
+
+  .block-list-appender {
+    width: 350px;
+    max-width: 90%;
+    margin: 1em auto;
+  }
+}
+
+.wp-block-post-title {
+  position: relative;
+  padding: 0.5rem;
+  border: 1px solid rgba(black, 0.3);
+  margin: 0;
+
+  &::before {
+    content: 'Page Title';
+    position: absolute;
+    top: -0.5rem;
+    left: 0.5rem;
+    color: rgba(black, 0.3);
+    font-size: 0.8rem;
+    display: block;
+    padding: 0 0.5rem;
+    margin: 0;
+    background: white;
+    line-height: 1;
+    font-weight: 400;
+  }
+}
+
+.is-root-container > .wp-block:not(.block-list-appender) {
+  max-width: none;
+  margin: 0;
+}

resources/css/global/_fonts.scss

@@ -0,0 +1,56 @@
+$font: "Ubuntu", Helvetica, Arial, sans-serif;
+
+/*
+ * Roots Fonts Setup
+ * https://roots.io/sage/docs/fonts-setup/
+ *
+ * Self-Hosted Google Fonts (Ubuntu Demo)
+ * https://gwfh.mranftl.com/fonts/ubuntu?subsets=latin
+ *
+ * Add the font to your Tailwind config
+ * tailwind.config.cjs
+ *
+ * Configure theme.json to use the font with Bud
+ */
+
+/* stylelint-disable */
+
+/* ubuntu-regular - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Ubuntu';
+  font-style: normal;
+  font-weight: 400;
+  src: url('../fonts/ubuntu-v20-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+ */
+       url('../fonts/ubuntu-v20-latin-regular.woff') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+
+/* ubuntu-italic - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Ubuntu';
+  font-style: italic;
+  font-weight: 400;
+  src: url('../fonts/ubuntu-v20-latin-italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+ */
+       url('../fonts/ubuntu-v20-latin-italic.woff') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+
+/* ubuntu-700 - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Ubuntu';
+  font-style: normal;
+  font-weight: 700;
+  src: url('../fonts/ubuntu-v20-latin-700.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+ */
+       url('../fonts/ubuntu-v20-latin-700.woff') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+
+/* ubuntu-700italic - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Ubuntu';
+  font-style: italic;
+  font-weight: 700;
+  src: url('../fonts/ubuntu-v20-latin-700italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+ */
+       url('../fonts/ubuntu-v20-latin-700italic.woff') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}

resources/css/global/_framework.scss

@@ -0,0 +1,4 @@
+@use "framework/breakpoints";
+@use "framework/normalise";
+@use "framework/colours";
+@use "framework/spacing";

resources/css/global/_mixins.scss

@@ -0,0 +1,4 @@
+@use "mixins/linear-gradient";
+@use "mixins/text-contrast";
+@use "mixins/generate-colour-classes";
+@use "mixins/generate-button-classes";

resources/css/global/_typography.scss

@@ -0,0 +1,148 @@
+@use "fonts";
+@use "variables/breakpoints";
+@use "variables/colours";
+@use "variables/spacing";
+
+.wysiwyg {
+  *:first-child {
+    margin-top: 0;
+  }
+
+  *:last-child {
+    margin-bottom: 0;
+  }
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  color: colours.$primary;
+  font-weight: 700;
+  font-family: fonts.$font;
+  line-height: 1.1em;
+  margin: 1.5em 0 0.25em;
+  padding: 0;
+
+  &.section-title {
+    margin-top: 0;
+  }
+
+  @media screen {
+    .knockout & {
+      color: colours.$white;
+    }
+  }
+}
+
+h1 {
+  font-size: 1.75em;
+  margin-top: 0;
+}
+
+h2 { font-size: 1.5em; }
+h3 { font-size: 1.25em; }
+
+h4,
+h5 { font-size: 1.15em; }
+
+@media (min-width: breakpoints.$screen-sm) {
+  h1 { font-size: 2.5em; }
+  h2 { font-size: 2em; }
+  h3 { font-size: 1.5em; }
+
+  h4,
+  h5 {
+    font-size: 1.25em;
+  }
+}
+
+p,
+li,
+td,
+label {
+  color: colours.$grey-darker;
+  font-family: fonts.$font;
+  font-weight: 400;
+  line-height: 1.5em;
+  margin: 0 0 0.8em;
+  padding: 0;
+
+  @media screen {
+    .knockout & {
+      color: colours.$white;
+    }
+  }
+}
+
+a {
+  color: colours.$primary;
+  text-decoration: none;
+  outline: none;
+  transition: all 300ms ease;
+
+  &:hover,
+  &:focus {
+    color: colours.$primary-dark;
+    text-decoration: none;
+  }
+
+  @media screen {
+    .knockout & {
+      color: colours.$white;
+
+      &:hover,
+      &:focus {
+        color: colours.$primary-light;
+      }
+    }
+  }
+}
+
+strong { font-weight: 700; }
+small { font-size: 0.8em; }
+
+li {
+  margin: 0.125em 0;
+  line-height: 1.5em;
+}
+
+ul,
+ol {
+  margin: 0 0 0.7em;
+  padding: 0 0 0 1.2em;
+  text-align: left;
+}
+
+.nolist {
+  margin: 0;
+  padding: 0;
+  text-align: inherit;
+  list-style: none;
+
+  li {
+    margin: 0;
+    padding: 0;
+  }
+}
+
+hr {
+  margin: 1.5em auto 2em;
+  height: 0;
+  border: 0 solid colours.$grey-light;
+  border-width: spacing.$borderThin 0 0;
+
+  @media screen {
+    .knockout & {
+      border-color: colours.$white;
+    }
+  }
+}
+
+.align {
+  &-left { text-align: left; }
+  &-centre, &-center { text-align: center; }
+  &-right { text-align: right; }
+}

resources/css/global/_variables.scss

@@ -0,0 +1,3 @@
+@use "variables/colours";
+@use "variables/breakpoints";
+@use "variables/spacing";

resources/css/global/framework/_breakpoints.scss

@@ -0,0 +1,15 @@
+@use "../variables/breakpoints";
+
+@each $label, $value in breakpoints.$breakpoints {
+  .min-#{$label} {
+    @media (min-width: $value) {
+      display: none;
+    }
+  }
+
+  .max-#{$label} {
+    @media (max-width: ($value - 0.0625)) {
+      display: none;
+    }
+  }
+}

resources/css/global/framework/_colours.scss

@@ -0,0 +1,13 @@
+@use "../mixins/generate-button-classes";
+@use "../mixins/generate-colour-classes";
+@use "../variables/colours";
+
+::selection {
+  color: colours.$white;
+  background: colours.$primary;
+}
+
+@each $color, $hex in colours.$colors {
+  @include generate-colour-classes.generate_colour_classes($color, $hex);
+  @include generate-button-classes.generate_button_colors($color, $hex);
+}

resources/css/global/framework/_normalise.scss

@@ -0,0 +1,44 @@
+@use "../variables/colours";
+
+* {
+  box-sizing: border-box;
+  backface-visibility: hidden; // removes jagged edges on rotated elements
+}
+
+html {
+  font-size: 16px;
+}
+
+body,
+html {
+  margin: 0;
+  padding: 0;
+  background: colours.$white;
+}
+
+.visually-hidden {
+  clip: rect(0, 0, 0, 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+  transition: all 300ms ease;
+}
+
+img.lazy,
+.lazy-bg,
+.lazy-loaded {
+  transition: all 300ms ease;
+}
+
+img.lazy,
+.lazy-bg {
+  filter: blur(0.25em);
+}

resources/css/global/framework/_spacing.scss

@@ -0,0 +1,114 @@
+@use "../variables/colours";
+@use "../variables/spacing";
+
+.brand {
+  display: block;
+  width: spacing.$brandWidth;
+  height: spacing.$brandHeight;
+
+  svg,
+  img {
+    display: block;
+    width: spacing.$brandWidth;
+    height: spacing.$brandHeight;
+  }
+
+  .knockout & {
+    @media screen {
+      .fill-primary {
+        fill: colours.$white;
+      }
+
+      .fill-grey {
+        fill: rgba(colours.$white, 0.8);
+      }
+    }
+  }
+}
+
+.container {
+  width: calc(100% - spacing.$innerMedium * 2);
+  margin: auto;
+
+  &-full { width: auto; }
+  &-large { max-width: spacing.$containerLarge; }
+  &-medium { max-width: spacing.$containerMedium; }
+  &-small { max-width: spacing.$containerSmall; }
+  &-narrow { max-width: spacing.$containerNarrow; }
+}
+
+.section {
+  padding: spacing.$sectionMedium 0;
+
+  &-small { padding: spacing.$sectionSmall 0; }
+  &-medium { padding: spacing.$sectionMedium 0; }
+  &-large { padding: spacing.$sectionLarge 0; }
+
+  &-zero-top { padding-top: 0; }
+  &-zero-bottom { padding-bottom: 0; }
+}
+
+.inner {
+  padding: spacing.$innerMedium;
+
+  &-small { padding: spacing.$innerSmall; }
+  &-large { padding: spacing.$innerLarge; }
+
+  &-zero-x {
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  &-zero-y {
+    padding-top: 0;
+    padding-top: 0;
+  }
+}
+
+.rounded {
+  border-radius: spacing.$borderRadius;
+
+  &-top {
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  &-bottom {
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+  }
+}
+
+.border {
+  border-style: solid;
+  border-width: spacing.$borderWidth;
+
+  &-thin { border-width: 0.0625em; }
+  &-regular { border-width: spacing.$borderWidth; }
+  &-thick { border-width: spacing.$borderThick; }
+  &-thicker { border-width: spacing.$borderThicker; }
+
+  &-top {
+    border-right-width: 0;
+    border-bottom-width: 0;
+    border-left-width: 0;
+  }
+
+  &-right {
+    border-top-width: 0;
+    border-bottom-width: 0;
+    border-left-width: 0;
+  }
+
+  &-bottom {
+    border-top-width: 0;
+    border-right-width: 0;
+    border-left-width: 0;
+  }
+
+  &-left {
+    border-top-width: 0;
+    border-right-width: 0;
+    border-bottom-width: 0;
+  }
+}

resources/css/global/mixins/_generate-button-classes.scss

@@ -0,0 +1,68 @@
+@use "../variables/colours";
+
+@use "sass:color";
+
+@mixin generate_button_colors($name, $hex) {
+
+  $buttons: (
+    ".btn",
+    "button",
+    "input[type=submit]",
+  );
+
+  @each $button in $buttons {
+    #{$button}.#{$name} {
+      color: colours.$white;
+      background: $hex;
+      border-color: $hex;
+
+      &:hover,
+      &:focus {
+        color: colours.$white;
+        background: color.adjust($hex, $lightness: 10%);
+        border-color: color.adjust($hex, $lightness: 10%);
+      }
+    }
+
+    #{$button}.#{$name}.outline {
+      color: $hex;
+      background: transparent;
+      border-color: $hex;
+
+      &:hover,
+      &:focus {
+        color: white;
+        background: #{$hex};
+        border-color: #{$hex};
+      }
+    }
+
+    @media screen {
+      *:not(.bg-#{$name}) #{$button}.#{$name} {
+        color: white;
+        background-color: $hex;
+        border-color: $hex;
+
+        &:hover,
+        &:focus {
+          color: white;
+          background-color: color.adjust($hex, $lightness: 10%);
+          border-color: color.adjust($hex, $lightness: 10%);
+        }
+      }
+
+      .bg-#{$name} #{$button}.#{$name} {
+        color: $hex;
+        background: white;
+        border-color: white;
+
+        &:hover,
+        &:focus {
+          color: white;
+          background: transparent;
+          border-color: white;
+        }
+      }
+    }
+  }
+}

resources/css/global/mixins/_generate-colour-classes.scss

@@ -0,0 +1,28 @@
+@use "text-contrast";
+
+@use "sass:color";
+
+@mixin generate_colour_classes($name, $hex) {
+  .#{$name} {
+    color: $hex;
+  }
+
+  .fill-#{$name} {
+    fill: $hex;
+  }
+
+  .border-#{$name} {
+    border-color: $hex;
+  }
+
+  @media screen {
+    .bg-#{$name} {
+      background-color: $hex;
+
+      ::selection {
+        @include text-contrast.text_contrast(color.invert($hex));
+        background: color.invert($hex);
+      }
+    }
+  }
+}

resources/css/global/mixins/_linear-gradient.scss

@@ -0,0 +1,5 @@
+// define as many $color-stops as needed
+@mixin linear-gradient($direction, $color-stops...) {
+  background: list.nth(list.nth($color-stops, 1), 1);
+  background: linear-gradient($direction, $color-stops);
+}

resources/css/global/mixins/_text-contrast.scss

@@ -0,0 +1,17 @@
+@use "../variables/colours";
+
+@use "sass:color";
+@use "sass:math";
+
+@mixin text-contrast($n, $dark: colours.$black, $light: colours.$white, $cutoff: 1.667) {
+  $brightness: math.round((color.channel($n, "red") * 299) + (color.channel($n, "green") * 587) + math.div((color.channel($n, "blue") * 114), 1000));
+  $light-color: math.round((color.channel(colours.$white, "red") * 299) + (color.channel(colours.$white, "green") * 587) + math.div((color.channel(colours.$white, "blue") * 114), 1000));
+
+  @if math.abs($brightness) < (math.div($light-color, $cutoff)) {
+    color: $light;
+  }
+
+  @else {
+    color: $dark;
+  }
+}

resources/css/global/variables/_breakpoints.scss

@@ -0,0 +1,33 @@
+@use "sass:math";
+
+$px: math.div(1, 16);
+
+$screen-xxs:   22.5em !default;
+$screen-xs:    30.0em !default;
+$screen-sm:    48.0em !default;
+$screen-md:    62.0em !default;
+$screen-lg:    75.0em !default;
+$screen-xl:    87.5em !default;
+$screen-xxl:   100.0em !default;
+$screen-xxxl:  120.0em !default;
+
+// So media queries don"t overlap when required
+$screen-xxs-max: ($screen-xs   - $px) !default;
+$screen-xs-max:  ($screen-sm   - $px) !default;
+$screen-sm-max:  ($screen-md   - $px) !default;
+$screen-md-max:  ($screen-lg   - $px) !default;
+$screen-lg-max:  ($screen-xl   - $px) !default;
+$screen-xl-max:  ($screen-xxl  - $px) !default;
+$screen-xxl-max: ($screen-xxxl - $px) !default;
+
+// Breakpoints
+$breakpoints: (
+  "screen-xxs":  $screen-xxs,
+  "screen-xs":   $screen-xs,
+  "screen-sm":   $screen-sm,
+  "screen-md":   $screen-md,
+  "screen-lg":   $screen-lg,
+  "screen-xl":   $screen-xl,
+  "screen-xxl":  $screen-xxl,
+  "screen-xxxl": $screen-xxxl,
+);

resources/css/global/variables/_colours.scss

@@ -0,0 +1,109 @@
+@use "sass:color";
+
+$wpblue: #2271b1;
+
+//== Status
+$success: #39b54a;
+$error: #be1e2d;
+$alert: #eed202;
+
+//== Brand Colours
+$primary: #337ab7;
+$secondary: #5bc0de;
+$tertiary: color.invert($primary);
+$quaternary: color.invert($secondary);
+
+//== Shades
+$white:               #FFFFFF;
+$grey:                #808080;
+$black:               #000000;
+
+//== Primary Tints
+$primary-darkest: color.adjust($primary, $lightness: -45%);
+$primary-darker: color.adjust($primary, $lightness: -30%);
+$primary-dark: color.adjust($primary, $lightness: -15%);
+$primary-light: color.adjust($primary, $lightness: 15%);
+$primary-lighter: color.adjust($primary, $lightness: 30%);
+$primary-lightest: color.adjust($primary, $lightness: 45%);
+
+//== Secondary Tints
+$secondary-darkest: color.adjust($secondary, $lightness: -45%);
+$secondary-darker: color.adjust($secondary, $lightness: -30%);
+$secondary-dark: color.adjust($secondary, $lightness: -15%);
+$secondary-light: color.adjust($secondary, $lightness: 15%);
+$secondary-lighter: color.adjust($secondary, $lightness: 30%);
+$secondary-lightest: color.adjust($secondary, $lightness: 45%);
+
+//== Tertiary Tints
+$tertiary-darkest: color.adjust($tertiary, $lightness: -45%);
+$tertiary-darker: color.adjust($tertiary, $lightness: -30%);
+$tertiary-dark: color.adjust($tertiary, $lightness: -15%);
+$tertiary-light: color.adjust($tertiary, $lightness: 15%);
+$tertiary-lighter: color.adjust($tertiary, $lightness: 30%);
+$tertiary-lightest: color.adjust($tertiary, $lightness: 45%);
+
+//== quaternary Tints
+$quaternary-darkest: color.adjust($quaternary, $lightness: -45%);
+$quaternary-darker: color.adjust($quaternary, $lightness: -30%);
+$quaternary-dark: color.adjust($quaternary, $lightness: -15%);
+$quaternary-light: color.adjust($quaternary, $lightness: 15%);
+$quaternary-lighter: color.adjust($quaternary, $lightness: 30%);
+$quaternary-lightest: color.adjust($quaternary, $lightness: 45%);
+
+//== six shades of grey
+$grey-darkest:        color.adjust(grey, $lightness: -40%);
+$grey-darker:         color.adjust(grey, $lightness: -25%);
+$grey-dark:           color.adjust(grey, $lightness: -10%);
+$grey-light:          color.adjust(grey, $lightness: 10%);
+$grey-lighter:        color.adjust(grey, $lightness: 25%);
+$grey-lightest:       color.adjust(grey, $lightness: 40%);
+
+//## Colour Array (used in generating colour classes).
+$colors: (
+  // shades
+  "black":     $black,
+  "grey-darkest": $grey-darkest,
+  "grey-darker": $grey-darker,
+  "grey-dark": $grey-dark,
+  "grey-light": $grey-light,
+  "grey-lighter": $grey-lighter,
+  "grey-lightest": $grey-lightest,
+  "white":     $white,
+  // status
+  "error":      $error,
+  "success":    $success,
+  "alert":      $alert,
+  // brand
+  "primary":    $primary,
+  "secondary":  $secondary,
+  "tertiary":   $tertiary,
+  "quaternary":   $quaternary,
+  // primary tints
+  "primary-darkest":  $primary-darkest,
+  "primary-darker":   $primary-darker,
+  "primary-dark":     $primary-dark,
+  "primary-light":    $primary-light,
+  "primary-lighter":  $primary-lighter,
+  "primary-lightest": $primary-lightest,
+  // secondary tints
+  "secondary-darkest":  $secondary-darkest,
+  "secondary-darker":   $secondary-darker,
+  "secondary-dark":     $secondary-dark,
+  "secondary-light":    $secondary-light,
+  "secondary-lighter":  $secondary-lighter,
+  "secondary-lightest": $secondary-lightest,
+  // tertiary tints
+  "tertiary-darkest":  $tertiary-darkest,
+  "tertiary-darker":   $tertiary-darker,
+  "tertiary-dark":     $tertiary-dark,
+  "tertiary-light":    $tertiary-light,
+  "tertiary-lighter":  $tertiary-lighter,
+  "tertiary-lightest": $tertiary-lightest,
+  // quaternary tints
+  "quaternary-darkest":  $quaternary-darkest,
+  "quaternary-darker":   $quaternary-darker,
+  "quaternary-dark":     $quaternary-dark,
+  "quaternary-light":    $quaternary-light,
+  "quaternary-lighter":  $quaternary-lighter,
+  "quaternary-lightest": $quaternary-lightest,
+);

resources/css/global/variables/_spacing.scss

@@ -0,0 +1,43 @@
+@use "sass:math";
+
+$offCanvasWidth:      17.5em;
+
+$brandWidth:          9em !default;
+$brandHeight:         3em !default;
+
+$tileAspectRatio:     math.div(400, 640) * 100%;
+$heroAspectRatio:     math.div(593, 1920) * 100vw;
+$slideAspectRatio:    math.div(733, 1920) * 100vw;
+
+$sectionSmallest:       0.500em;
+$sectionSmaller:        1.000em;
+$sectionSmall:          1.500em;
+$sectionMedium:         3.000em;
+$sectionLarge:          5.000em;
+$sectionLarger:         7.500em;
+$sectionLargest:       10.000em;
+
+$containerLarge:       73.125em;
+$containerMedium:      60.000em;
+$containerSmall:       50.000em;
+$containerNarrow:      34.000em;
+
+$innerLarger:           5.000em;
+$innerLarger:           3.000em;
+$innerLarge:            2.000em;
+$innerMedium:           1.500em;
+$innerSmall:            1.000em;
+$innerSmaller:          0.750em;
+$innerSmallest:         0.500em;
+
+$borderRadiusLargeer:   1.500em;
+$borderRadiusLarge:     1.000em;
+$borderRadius:          1.000em;
+$borderRadiusSmall:     0.500em;
+$borderRadiusSmaller:   0.250em;
+
+$borderThin:           0.0625em;
+$borderWidth:          0.1250em;
+$borderThick:          0.2500em;
+$borderThicker:        0.5000em;
+$borderThickest:       1.0000em;

resources/css/plugins/_contact-form-7.scss

@@ -0,0 +1,24 @@
+@use "../global/variables/colours";
+
+.wpcf7 .screen-reader-response {
+  display: none;
+}
+
+.wpcf7-response-output {
+  @extend p !optional;
+  @extend .container !optional;
+  @extend .container-narrow !optional;
+
+  padding: 1em 0 0;
+  margin-top: 2em;
+  border: 1px solid colours.$grey-light;
+  border-width: 1px 0 0;
+
+  .knockout & {
+    border-color: rgba(colours.$white, 0.3);
+  }
+}
+
+.wpcf7-display-none {
+  display: none;
+}

resources/css/plugins/_mce.scss

@@ -0,0 +1,14 @@
+@use "../global/variables/colours";
+
+#mce-responses {
+  .response {
+    padding: 0 0 1em;
+    margin: 0 0 1em;
+    font-size: 0.875em;
+    border-bottom: 1px solid colours.$grey-lighter;
+  }
+}
+
+.knockout #mce-responses .response {
+  border-bottom-color: rgba(colours.$white, 0.3);
+}

resources/js/app.js

@@ -2,3 +2,12 @@ import.meta.glob([
   '../images/**',
   '../fonts/**',
 ]);
+
+// import.meta.glob('../views/blocks/**/{style.scss,script.js,view.js}', { eager: true })
+
+import Header from '../views/sections/header/header.js';
+import LazyLoad from './lib/Lazy.js';
+
+LazyLoad();
+Header();
+

resources/js/blocks/components/AttachmentImage.jsx

@@ -0,0 +1,46 @@
+import { useSelect } from '@wordpress/data';
+
+/**
+ * AttachmentImage
+ *
+ * This component is used to display an image from the media library.
+ * It's meant as a JS companion to the PHP function `wp_get_attachment_image()`.
+ *
+ * @link https://www.briancoords.com/getting-wordpress-media-library-images-in-javascript/
+ *
+ * @param {object} props
+ * @param {number} props.imageId The ID of the image to display.
+ * @param {string} props.size The size of the image to display. Defaults to 'full'.
+ * @returns {*} React JSX
+ */
+export default function AttachmentImage({ imageId, size = 'full' }) {
+
+	const { image } = useSelect((select) => ({
+		image: select('core').getEntityRecord('postType', 'attachment', imageId),
+	}));
+
+	const imageAttributes = () =>{
+		let attributes = {
+			src: image.source_url,
+			alt: image.alt_text,
+			className: `attachment-${size} size-${size}`,
+			width: image.media_details.width,
+			height: image.media_details.height,
+		};
+		if (image.media_details && image.media_details.sizes && image.media_details.sizes[size]) {
+			attributes.src = image.media_details.sizes[size].source_url;
+			attributes.width = image.media_details.sizes[size].width;
+			attributes.height = image.media_details.sizes[size].height;
+		}
+
+		return attributes;
+	};
+
+	return (
+		<>
+			{image && (
+				<img {...imageAttributes()} />
+			)}
+		</>
+	)
+}

resources/js/blocks/components/BackgroundImage.jsx

@@ -0,0 +1,53 @@
+import { select } from '@wordpress/data';
+
+/**
+ * BackgroundImage
+ *
+ * This component is used to display a background image for a block based on its attributes.
+ *
+ * @param {object} props
+ * @param {string} props.background_url The desired full size url.
+ * @param {string} props.background_url_lazy Tiny lazy url.
+ * @param {boolean} props.background_lazy Whether or not to lazy load the background image.
+ * @param {object} props.background_position x and y coordinates as decimals from 0 to 1.
+ * @param {boolean} props.background_fixed Toggle for background-attachment: fixed.
+ * @param {number} props.background_opacity The opacity value applied to the image.
+ * @returns {*} React JSX
+ */
+export default function BackgroundImage({
+  background_url,
+  background_url_lazy,
+  background_lazy,
+  background_position = 'center',
+  background_fixed = false,
+  background_opacity = 70,
+}) {
+
+  if (background_url) {
+    let styles = {
+      backgroundImage: `url(${background_url})`,
+      backgroundPosition: `${ background_position.x * 100}% ${ background_position.y * 100}%`,
+      backgroundSize: 'cover',
+      backgroundAttachment: background_fixed ? 'fixed' : 'scroll',
+      opacity: Number(background_opacity) * 0.01,
+    }
+
+    let attributes = {
+      className: 'badegg-block-background',
+      style: styles,
+    };
+
+    if(background_lazy) {
+      attributes['data-bg'] = background_url;
+      attributes.style.backgroundImage = `url(${background_url_lazy})`;
+      attributes.className += ' lazy-bg';
+    }
+
+    return (
+      <div { ...attributes } />
+    )
+  } else {
+    return;
+  }
+
+}

resources/js/blocks/components/BlockSettings.jsx

@@ -0,0 +1,255 @@
+/**
+ * BlockSettings
+ *
+ * Bundles the <InspectorControls> used for several blocks
+ * *
+ * @param {object} props
+ * @param {number} props.attributes the data
+ * @param {string} props.setAttributes the state
+ * @returns {*} React JSX
+ */
+
+import { __ } from '@wordpress/i18n';
+import { select } from '@wordpress/data';
+import { useState, useEffect } from '@wordpress/element';
+import apiFetch from '@wordpress/api-fetch';
+
+import {
+	Panel,
+	PanelBody,
+	PanelRow,
+	SelectControl,
+	ToggleControl,
+	RangeControl,
+	ColorPalette,
+  FocalPointPicker,
+	Button,
+	Spinner,
+} from '@wordpress/components';
+
+import {
+	InspectorControls,
+  BlockControls,
+  AlignmentToolbar,
+	MediaUpload,
+	MediaUploadCheck,
+} from '@wordpress/block-editor';
+
+export default function BlockSettings({ attributes, setAttributes }) {
+	const [ configOptions, setConfigOptions ] = useState([]);
+	const [ isLoading, setIsLoading ] = useState(true);
+
+  useEffect( () => {
+		let isMounted = true;
+
+		apiFetch( { path: '/badegg/v1/blocks/config' } )
+			.then( ( data ) => {
+				if ( isMounted ) {
+					setConfigOptions( data );
+					setIsLoading( false );
+				}
+			} )
+			.catch( () => {
+				if ( isMounted ) {
+					setConfigOptions( null );
+					setIsLoading( false );
+				}
+			} );
+
+		return () => {
+			isMounted = false;
+		};
+	}, [] );
+
+  if ( isLoading ) {
+		return (
+			<InspectorControls>
+				<Panel>
+					<PanelBody>
+						<Spinner />
+					</PanelBody>
+				</Panel>
+			</InspectorControls>
+		);
+	}
+
+	if ( ! configOptions ) {
+		return null;
+	}
+
+  const {
+    alignment,
+		container_width,
+		padding_top,
+		padding_bottom,
+		background_hex,
+		background_tint,
+		background_image,
+    background_url,
+    background_lazy,
+    background_position,
+		background_opacity,
+		background_contrast,
+		background_fixed,
+	} = attributes;
+
+	return (
+    <>
+      <BlockControls>
+        <AlignmentToolbar
+          value={ alignment }
+          onChange={(value) => setAttributes({alignment: value})}
+        />
+      </BlockControls>
+      <InspectorControls>
+        <Panel className="badegg-components-panel">
+          <PanelBody title={ __("Spacing", "badegg") }>
+            <SelectControl
+              label={ __("Container Width", "badegg") }
+              value={ container_width }
+              options={ configOptions.container }
+              onChange={ (value) => setAttributes({ container_width: value }) }
+              __next40pxDefaultSize={ true }
+              __nextHasNoMarginBottom={ true }
+            />
+            <ToggleControl
+              label={ __('Top padding', 'badegg') }
+              checked={ padding_top }
+              onChange={(value) => setAttributes({ padding_top: value }) }
+              __nextHasNoMarginBottom
+            />
+            <ToggleControl
+              label={ __('Bottom padding', 'badegg') }
+              checked={ padding_bottom }
+              onChange={(value) => setAttributes({ padding_bottom: value }) }
+              __nextHasNoMarginBottom
+            />
+          </PanelBody>
+          <PanelBody title={ __("Background", "badegg") }>
+            <p style={{ textTransform: 'uppercase', fontSize: '11px' }} className="components-truncate components-text components-input-control__label">
+              { __('Colour', 'badegg') }
+            </p>
+            <ColorPalette
+              colors={ configOptions.colours }
+              value={ background_hex }
+              clearable={ false }
+              disableCustomColors={ true }
+              style={{ marginBottom: '16px' }}
+              onChange={ ( value ) => {
+                let slug, hex, selected = '';
+
+                if(value) {
+                  selected = configOptions.colours.find(
+                    ( c ) => c.color === value
+                  );
+
+                  hex = value;
+                }
+
+                if(selected) {
+                  slug = selected.slug;
+                }
+
+                setAttributes( {
+                  background_colour: slug,
+                  background_hex: hex,
+                });
+
+              } }
+            />
+
+            { 'background_colour' in attributes && attributes.background_colour && ![0, '0', 'white', 'black'].includes(attributes.background_colour) ? (
+              <>
+                <SelectControl
+                  label={ __("Tint", "badegg") }
+                  value={ background_tint }
+                  options={ configOptions.tints }
+                  onChange={ (value) => setAttributes({ background_tint: value }) }
+                  __next40pxDefaultSize={ true }
+                  __nextHasNoMarginBottom={ true }
+                />
+                <ToggleControl
+                  label={ __('Text Contrast', 'badegg') }
+                  checked={ background_contrast }
+                  onChange={(value) => setAttributes({ background_contrast: value }) }
+                  __nextHasNoMarginBottom
+                />
+              </>
+            ) : null }
+
+            { background_image != 0 && (
+              <>
+                <ToggleControl
+                  label={ __('Fixed Position', 'badegg') }
+                  checked={ background_fixed }
+                  onChange={(value) => setAttributes({ background_fixed: value }) }
+                  __nextHasNoMarginBottom
+                />
+                <ToggleControl
+                  label={ __('Lazy Loaded', 'badegg') }
+                  checked={ background_lazy }
+                  onChange={(value) => setAttributes({ background_lazy: value }) }
+                  __nextHasNoMarginBottom
+                />
+                <FocalPointPicker
+                  url={ background_url }
+                  value={ background_position }
+                  onDragStart={ (value) => setAttributes({ background_position: value }) }
+                  onDrag={ (value) => setAttributes({ background_position: value }) }
+                  onChange={ (value) => setAttributes({ background_position: value }) }
+                  __nextHasNoMarginBottom
+                />
+                <RangeControl
+                  __next40pxDefaultSize
+                  __nextHasNoMarginBottom
+                  label={ __("Opacity", "badegg") }
+                  value={ background_opacity }
+                  onChange={ ( value ) => setAttributes({ background_opacity: value }) }
+                  min={ 5 }
+                  max={ 100 }
+                />
+              </>
+            )}
+
+            <PanelRow>
+              <MediaUploadCheck>
+                <MediaUpload
+                  onSelect={ (media) => setAttributes({
+                    background_image: media.id,
+                    background_url: media.sizes.hero.url,
+                    background_url_lazy: media.sizes.lazy.url,
+                  })}
+                  allowedTypes={ ['image'] }
+                  value={ background_image }
+                  render={ ({ open }) => (
+                    <Button
+                      onClick={ open }
+                      variant="primary"
+                    >
+                      { background_image ?  __("Replace image", "badegg") :  __("Choose image", "badegg") }
+                    </Button>
+                  )}
+                />
+              </MediaUploadCheck>
+
+              { background_image != 0 && (
+                <Button
+                  onClick={ () => setAttributes({
+                      background_image: 0,
+                      background_url: '',
+                      background_url_lazy: '',
+                  }) }
+                  isDestructive
+                  variant="secondary"
+                >
+                  { __("Remove image", "badegg") }
+                </Button>
+              )}
+            </PanelRow>
+
+          </PanelBody>
+        </Panel>
+      </InspectorControls>
+    </>
+	);
+}

resources/js/blocks/lib/classNames.js

@@ -0,0 +1,59 @@
+export function containerClassNames(attributes, extraClasses = [])
+{
+
+  let classNames = [
+    'container',
+  ];
+
+  if('container_width' in attributes)
+    classNames.push(`container-${attributes.container_width}`);
+
+  if('alignment' in attributes)
+    classNames.push(`align-${attributes.alignment}`);
+
+  // combine arrays
+  classNames = classNames.concat(extraClasses);
+
+  return classNames;
+}
+
+export function sectionClassNames(attributes, defaultClasses = '', extraClasses = [])
+{
+  let classNames = [
+    'section',
+  ];
+
+  if('padding_top'in attributes && !attributes.padding_top)
+    classNames.push('section-zero-top');
+
+  if('padding_bottom'in attributes && !attributes.padding_bottom)
+    classNames.push('section-zero-bottom');
+
+  if('background_colour' in attributes && attributes.background_colour) {
+    let bg = `bg-${ attributes.background_colour }`;
+
+    if(
+      'background_tint' in attributes &&
+      attributes.background_tint != 0 &&
+      !['white', 'black'].includes(attributes.background_colour)
+    ) {
+      bg += `-${ attributes.background_tint }`;
+    }
+
+    classNames.push(bg);
+  }
+
+  if('background_image' in attributes && attributes.background_image != '0')
+    classNames.push('has-bg-image');
+
+  if('background_contrast' in attributes && attributes.background_contrast)
+    classNames.push('knockout');
+
+  // combine arrays
+  classNames = classNames.concat(defaultClasses).concat(extraClasses);
+
+  // remove duplicate items
+  classNames = [ ...new Set(classNames) ];
+
+  return classNames;
+}

resources/js/editor.js

@@ -1,5 +1,20 @@
 import domReady from '@wordpress/dom-ready';
+import blockParents from '../json/block-parents.json';
+import blockWhitelist from '../json/block-core-whitelist.json';
+import.meta.glob('../views/blocks/**/{index.jsx,index.js}', { eager: true })
 
 domReady(() => {
-  //
+  const restrictEditorParentBlocks = (settings, name) => {
+    if (blockWhitelist.includes(name)) {
+      settings.parent = blockParents;
+    }
+
+    return settings
+  }
+
+  wp.hooks.addFilter(
+      'blocks.registerBlockType',
+      'badegg/restrict-parent-blocks',
+      restrictEditorParentBlocks
+  );
 });

resources/js/lib/Lazy.js

@@ -0,0 +1,54 @@
+export default function LazyLoadInit()
+{
+  document.addEventListener('DOMContentLoaded', LazyLoad());
+}
+
+function LazyLoad() {
+
+  const lazyElements = [].slice.call(
+    document.querySelectorAll('img.lazy, .lazy-bg')
+  );
+
+  if ('IntersectionObserver' in window) {
+    const lazyObserver = new IntersectionObserver((entries, observer) => {
+      entries.forEach(entry => {
+        if (!entry.isIntersecting) return;
+
+        const el = entry.target;
+
+        // Handle <img>
+        if (el.tagName === 'IMG') {
+          el.src = el.dataset.src;
+
+          if (el.dataset.srcset) {
+            el.srcset = el.dataset.srcset;
+          }
+
+          el.classList.remove('lazy');
+        }
+
+        // Handle background images
+        else {
+          if (el.dataset.bg) {
+            el.style.backgroundImage = `url("${el.dataset.bg}")`;
+            el.classList.remove('lazy-bg');
+            el.classList.add('lazy-loaded');
+          }
+        }
+
+        observer.unobserve(el);
+      });
+    });
+
+    lazyElements.forEach(el => lazyObserver.observe(el));
+  } else {
+    // Optional fallback: load everything immediately
+    lazyElements.forEach(el => {
+      if (el.tagName === 'IMG' && el.dataset.src) {
+        el.src = el.dataset.src;
+      } else if (el.dataset.bg) {
+        el.style.backgroundImage = `url("${el.dataset.bg}")`;
+      }
+    });
+  }
+}

resources/js/lib/VideoSrcset.js

@@ -0,0 +1,24 @@
+export default function VideoSrcset( element )
+{
+  const sizes = JSON.parse(element.dataset.sizes);
+
+  Object.keys(sizes).forEach((key) => {
+    const size = key;
+    const source = element.querySelector('.bgvid-' + size);
+
+    if(source) {
+      const sourceWidth = source.dataset.width;
+      const poster = source.dataset.poster;
+
+      if(window.innerWidth >= sourceWidth) {
+        console.log('screen width is greater than or equal to the source width');
+        console.log('screen width: ' + window.innerWidth);
+        console.log('source width: ' + sourceWidth);
+
+        element.src = source.src;
+        element.poster = poster;
+        element.load;
+      }
+    }
+  });
+}

resources/json/block-attributes.json

@@ -0,0 +1,64 @@
+{
+  "container_width": {
+      "type": "string",
+      "default": ""
+  },
+  "alignment": {
+      "type": "string"
+  },
+  "padding_top": {
+      "type": "boolean",
+      "default": true
+  },
+  "padding_bottom": {
+      "type": "boolean",
+      "default": true
+  },
+  "background_colour": {
+      "type": "string",
+      "default": ""
+  },
+  "background_hex": {
+      "type": "string",
+      "default": ""
+  },
+  "background_tint": {
+      "type": "string",
+      "default": "0"
+  },
+  "background_image": {
+      "type": "integer",
+      "default": 0
+  },
+  "background_url": {
+    "type": "string",
+    "default": ""
+  },
+  "background_url_lazy": {
+    "type": "string",
+    "default": ""
+  },
+  "background_lazy": {
+    "type": "boolean",
+    "default": true
+  },
+  "background_opacity": {
+      "type": "integer",
+      "default": 30
+  },
+  "background_position": {
+      "type": "object",
+      "default": {
+        "x": 0.5,
+        "y": 0.5
+      }
+  },
+  "background_fixed": {
+      "type": "boolean",
+      "default": false
+  },
+  "background_contrast": {
+      "type": "boolean",
+      "default": false
+  }
+}

resources/json/block-core-whitelist.json

@@ -0,0 +1,26 @@
+[
+  "core/separator",
+  "core/spacer",
+
+  "core/cover",
+  "core/file",
+  "core/gallery",
+  "core/image",
+  "core/media-text",
+  "core/audio",
+  "core/video",
+
+  "core/footnotes",
+  "core/heading",
+  "core/list",
+  "core/code",
+  "core/details",
+  "core/list-item",
+  "core/missing",
+  "core/paragraph",
+  "core/preformatted",
+  "core/pullquote",
+  "core/quote",
+  "core/table",
+  "core/verse"
+]

resources/json/block-parents.json

@@ -0,0 +1,4 @@
+[
+  "acf/badegg-editor",
+  "badegg/article"
+]

resources/views/blocks/acfdemo/block.json

@@ -0,0 +1,28 @@
+{
+  "apiVersion": 3,
+  "name": "badegg/acfdemo",
+  "title": "ACF Demo",
+  "category": "badegg",
+  "icon": "media-document",
+  "description": "An example block powered by ACF",
+  "keywords": ["acf", "demo"],
+
+  "acf": {
+      "mode": "preview",
+      "validate": "false",
+      "renderCallback": "\\App\\Blocks\\render_acf"
+  },
+  "supports": {
+      "anchor": true,
+      "align": false,
+      "jsx": true
+  },
+  "example": {
+    "attributes": {
+      "mode": "preview",
+      "data": {
+        "inserter": true
+      }
+    }
+  }
+}

resources/views/blocks/acfdemo/editor.scss

@@ -0,0 +1,4 @@
+// block.json's editorStyle, applied in block editor and front end
+.wp-block-acf-demo.block-editor-block-list__block {
+  display: block;
+}

resources/views/blocks/acfdemo/index.js

@@ -0,0 +1 @@
+// block.json's editorScript, loaded only in the block editor

resources/views/blocks/acfdemo/render.blade.php

@@ -0,0 +1,10 @@
+@extends('layouts.block-acf', [
+  'block' => $block,
+  'is_preview' => $is_preview,
+  'context' => $context,
+  'knockout' => true,
+])
+
+@section('block-content')
+  {!! the_field('content') !!}
+@overwrite

resources/views/blocks/acfdemo/script.js

@@ -0,0 +1 @@
+// block.json's script, loaded in block editor and front end

resources/views/blocks/acfdemo/style.scss

@@ -0,0 +1,4 @@
+// block.json's style, applied in block editor and front end
+.wp-block-acf-demo {
+  display: block;
+}

resources/views/blocks/acfdemo/view.js

@@ -0,0 +1 @@
+// block.json's viewScript, applied on front end only

resources/views/blocks/article/README.md

@@ -0,0 +1,25 @@
+# Bad Egg's Article Builder
+
+Designed as a full width component, Article Builder bundles core wordpress blocks commonly used in articles into a classic editor like experience. 
+
+## Features
+- Uses the `<InnerBlocks/>` component with a whitelist defined in `resources/json/core-block-whitelist.json`
+- Provides spacing and background configuration options 
+- Default block attributes are defined in `resources/json/block-attributes.json` so that they are not needed in duplicate in `block.json`
+- A reusable customisation UI is defined in `resources/js/blocks/components/BlockSettings.jsx` so that multiple blocks can rely on the same controls 
+
+## Theme-level changes
+- All core wordpress blocks are disabled at the top level to prevent them from being used alongside full-width blocks designed to craft page layouts
+- Blocks that can use core whitelisted inner blocks are defined in `resources/json/block-parents.json`
+
+## Attributes
+- Top Padding
+- Bottom Padding
+- Container width
+- Background
+  - Colour
+  - Tint
+  - Image
+  - Image opacity
+  - Text contrast toggle
+  - Fixed position toggle

resources/views/blocks/article/block.json

@@ -0,0 +1,18 @@
+{
+  "apiVersion": 3,
+  "name": "badegg/article",
+  "title": "Article Builder",
+  "category": "badegg",
+  "icon": {
+    "src": "format-aside",
+    "foreground": "#f58762"
+  },
+  "description": "A wrapper to contain core blocks",
+  "supports": {
+    "html": true,
+    "color": {
+      "background": false,
+      "text": false
+    }
+  }
+}

resources/views/blocks/article/index.jsx

@@ -0,0 +1,63 @@
+// block.json's editorScript, loaded only in the block editor
+
+import metadata from './block.json';
+import { __ } from '@wordpress/i18n';
+import { registerBlockType } from '@wordpress/blocks';
+
+import {
+  useBlockProps,
+  InnerBlocks,
+} from '@wordpress/block-editor';
+
+import allowedBlocks from '../../../json/block-core-whitelist.json';
+import { containerClassNames, sectionClassNames } from '../../../js/blocks/lib/classNames';
+import BackgroundImage from '../../../js/blocks/components/BackgroundImage';
+import BlockSettings from '../../../js/blocks/components/BlockSettings';
+
+registerBlockType(metadata.name, {
+  edit({ attributes, setAttributes }) {
+    const blockProps = useBlockProps();
+    blockProps.className = sectionClassNames(attributes, blockProps.className).join(' ');
+
+    return (
+      <div { ...blockProps }>
+        <BlockSettings
+          attributes={ attributes }
+          setAttributes={ setAttributes }
+        />
+
+        <div className={ containerClassNames(attributes, [ 'wysiwyg' ]).join(' ') }>
+          <InnerBlocks
+            allowedBlocks={ allowedBlocks }
+            defaultBlock={
+              {
+                name: "core/paragraph",
+                attributes: {
+                  placeholder: "start typing",
+                }
+              }
+            }
+          />
+        </div>
+
+        <BackgroundImage { ...attributes } />
+
+      </div>
+    );
+  },
+  save({ attributes }) {
+    const blockProps = useBlockProps.save();
+    blockProps.className = sectionClassNames(attributes, blockProps.className, [ 'wysiwyg' ] ).join(' ');
+
+    return (
+      <div { ...blockProps }>
+        <div className={ containerClassNames(attributes, [ 'wysiwyg' ]).join(' ') }>
+          <InnerBlocks.Content />
+        </div>
+
+        <BackgroundImage { ...attributes } />
+
+      </div>
+    )
+  }
+});

resources/views/blocks/example/README.md

@@ -0,0 +1,40 @@
+# Bad Egg's Native Wordpress Block Example
+
+This block serves as a placeholder that can be copied and extended to build native Wordpress blocks.  
+
+## Features
+- Automatic registration and asset building through the theme's `app/blocks.php` file and `vite.config.js`
+- Automatic enqueueing of block scripts and styles if the correct files are included in the block's directory 
+- Supports Laravel Blade templates if the `render.blade.php` file is present, with access to the `$attributes`, `$block`, and `$content` variables.
+- Default block attributes are defined in `resources/json/block-attributes.json` so that they are not needed in duplicate in `block.json`
+- A reusable customisation UI is defined in `resources/js/blocks/components/BlockSettings.jsx` so that multiple blocks can rely on the same controls 
+
+## Directory Structure
+```
+app
+│   ...
+│
+│   blocks.php  ->  this is where the auto registration functions live
+│
+resources
+│   ...
+│
+└── js
+│   └── editor.js
+│
+└── views
+    │   ...
+    │
+    └── blocks
+        │   ...
+        │
+        └── example
+            │  README.md         ->   this file
+            │  block.json        ->   (required) the block's metadata
+            │  index.jsx         ->   (required) EditorScript
+            │  script.js         ->   (optional) Editor & Front end
+            │  view.js           ->   (optional) Front end
+            │  editor.scss       ->   (optional) Editor
+            │  style.scss        ->   (optional) Editor & Front end
+            │  render.blade.php  ->   (optional) falls back to index.jsx save
+```

resources/views/blocks/example/block.json

@@ -0,0 +1,15 @@
+{
+  "apiVersion": 3,
+  "name": "badegg/example",
+  "title": "Example",
+  "category": "badegg",
+  "icon": "cover-image",
+  "description": "This is an example of a custom native block",
+  "editorScript": "example-editor-script",
+  "editorStyle": "example-editor-style",
+  "style": "example-style",
+  "script": "example-script",
+  "supports": {
+    "html": false
+  }
+}

resources/views/blocks/example/editor.scss

@@ -0,0 +1,5 @@
+// block.json's editorStyle, applied in block editor and front end
+.wp-block-badegg-example.block-editor-block-list__block {
+  display: block;
+  border: 2px solid red;
+}