acf stylised icon select for solid and regular sets

* 👷 Update workflow to not depend on package lock file

.github/labeler.yml

@@ -1,19 +1,15 @@
 build:
   - changed-files:
       - any-glob-to-any-file:
-          - .eslintrc.js
-          - .prettierrc
-          - .stylelintrc
-          - bud.config.js
-          - tsconfig.json
+          - vite.config.js
 dependencies:
   - changed-files:
       - any-glob-to-any-file:
-          - yarn.lock
+          - package-lock.json
 javascript:
   - changed-files:
       - any-glob-to-any-file:
-          - resources/scripts/**/*.js
+          - resources/js/**/*.js
 php:
   - changed-files:
       - any-glob-to-any-file:

.github/renovate.json

@@ -1,17 +1,23 @@
 {
-  "baseBranches": ["main"],
+  "baseBranches": [
+    "main"
+  ],
   "commitMessageAction": "⬆️ Bump",
   "commitMessageTopic": "{{depName}}",
-  "extends": ["config:base", "schedule:weekly"],
+  "extends": [
+    "config:recommended",
+    "schedule:weekly"
+  ],
+  "rangeStrategy": "bump",
   "packageRules": [
     {
-      "matchUpdateTypes": ["minor", "patch", "pin"]
-    },
-    {
-      "groupName": "Bud",
-      "matchPackagePrefixes": ["@roots/"],
-      "schedule": ["at any time"]
+      "matchUpdateTypes": [
+        "minor",
+        "patch",
+        "pin"
+      ],
+      "enabled": true
     }
   ],
-  "timezone": "America/Chicago"
+  "timezone": "America/Detroit"
 }

.github/workflows/main.yml

@@ -25,18 +25,34 @@ jobs:
         uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node }}
-          cache: 'yarn'
         env:
           NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
-      - name: Install dependencies using Yarn
-        run: yarn install --frozen-lockfile
+      - name: Install dependencies using npm
+        run: npm install
 
       - name: Build and compile assets
         run: |
-          yarn build
-          cat public/entrypoints.json
-          cat public/manifest.json
+          npm run build
+          cat public/build/manifest.json
+
+      - name: Validate theme.json
+        run: |
+          THEME_JSON="public/build/assets/theme.json"
+
+          if [ ! -f "$THEME_JSON" ]; then
+            echo "❌ theme.json not found"
+            exit 1
+          fi
+
+          jq -e '
+            (.settings.color.palette | length > 0) and
+            (.settings.typography.fontFamilies | length > 0) and
+            (.settings.typography.fontSizes | length > 0)
+          ' "$THEME_JSON" 2>&1 || {
+            echo "❌ Invalid theme.json structure or missing required values"
+            exit 1
+          }
 
   php:
     name: PHP ${{ matrix.php }}
@@ -44,7 +60,7 @@ jobs:
     if: "!contains(github.event.head_commit.message, '[ci skip]')"
     strategy:
       matrix:
-        php: ['8.1', '8.2']
+        php: ['8.2']
 
     steps:
       - name: Checkout the project

.gitignore

@@ -1,7 +1,6 @@
 /node_modules
 /vendor
-/public
+/public/*
+!/public/.gitkeep
 .env
-.budfiles
 npm-debug.log
-yarn-error.log

LICENSE.md

@@ -1,4 +1,4 @@
-Copyright (c) Roots Software Foundation LLC
+Copyright (c) Roots Software LLC
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of
 this software and associated documentation files (the "Software"), to deal in

README.md

@@ -1,54 +1,31 @@
 <p align="center">
-  <a href="https://roots.io/sage/">
-    <img alt="Sage" src="https://cdn.roots.io/app/uploads/logo-sage.svg" height="100">
-  </a>
+  <a href="https://roots.io/sage/"><img alt="Sage" src="https://cdn.roots.io/app/uploads/logo-sage.svg" height="100"></a>
 </p>
 
 <p align="center">
-  <a href="https://packagist.org/packages/roots/sage">
-    <img alt="Packagist Installs" src="https://img.shields.io/packagist/dt/roots/sage?label=projects%20created&colorB=2b3072&colorA=525ddc&style=flat-square">
-  </a>
-
-  <a href="https://github.com/roots/sage/actions/workflows/main.yml">
-    <img alt="Build Status" src="https://img.shields.io/github/actions/workflow/status/roots/sage/main.yml?branch=main&logo=github&label=CI&style=flat-square">
-  </a>
-
-  <a href="https://twitter.com/rootswp">
-    <img alt="Follow Roots" src="https://img.shields.io/badge/follow%20@rootswp-1da1f2?logo=twitter&logoColor=ffffff&message=&style=flat-square">
-  </a>
+  <a href="https://packagist.org/packages/roots/sage"><img alt="Packagist Installs" src="https://img.shields.io/packagist/dt/roots/sage?label=projects%20created&colorB=2b3072&colorA=525ddc&style=flat-square"></a>
+  <a href="https://github.com/roots/sage/actions/workflows/main.yml"><img alt="Build Status" src="https://img.shields.io/github/actions/workflow/status/roots/sage/main.yml?branch=main&logo=github&label=CI&style=flat-square"></a>
+  <a href="https://bsky.app/profile/roots.dev"><img alt="Follow roots.dev on Bluesky" src="https://img.shields.io/badge/follow-@roots.dev-0085ff?logo=bluesky&style=flat-square"></a>
 </p>
 
-<p align="center">Advanced WordPress starter theme with Tailwind CSS and Laravel Blade</p>
+# Sage
 
-<p align="center">
-  <a href="https://roots.io/sage/">Website</a> &nbsp;&nbsp; <a href="https://roots.io/sage/docs/installation/">Documentation</a> &nbsp;&nbsp; <a href="https://github.com/roots/sage/releases">Releases</a> &nbsp;&nbsp; <a href="https://discourse.roots.io/">Community</a>
-</p>
+**Advanced hybrid WordPress starter theme with Laravel Blade and Tailwind CSS**
+
+- 🔧 Clean, efficient theme templating with Laravel Blade
+- ⚡️ Modern front-end development workflow powered by Vite
+- 🎨 Out of the box support for Tailwind CSS
+- 🚀 Harness the power of Laravel with [Acorn integration](https://github.com/roots/acorn)
+- 📦 Block editor support built-in
+
+Sage brings proper PHP templating and modern JavaScript tooling to WordPress themes. Write organized, component-based code using Laravel Blade, enjoy instant builds and CSS hot-reloading with Vite, and leverage Laravel's robust feature set through Acorn.
+
+[Read the docs to get started](https://roots.io/sage/docs/installation/)
 
 ## Sponsors
 
-Sage is an open source project and completely free to use. If you've benefited from our projects and would like to support our future endeavors, please consider [sponsoring Roots](https://github.com/sponsors/roots).
+Sage is an open source project and completely free to use. If you've benefited from our projects and would like to support our future endeavors, [please consider sponsoring us](https://github.com/sponsors/roots).
 
 <div align="center">
-<a href="https://k-m.com/"><img src="https://cdn.roots.io/app/uploads/km-digital.svg" alt="KM Digital" width="120" height="90"></a> <a href="https://carrot.com/"><img src="https://cdn.roots.io/app/uploads/carrot.svg" alt="Carrot" width="120" height="90"></a> <a href="https://wordpress.com/"><img src="https://cdn.roots.io/app/uploads/wordpress.svg" alt="WordPress.com" width="120" height="90"></a> <a href="https://worksitesafety.ca/careers/"><img src="https://cdn.roots.io/app/uploads/worksite-safety.svg" alt="Worksite Safety" width="120" height="90"></a> <a href="https://40q.agency/"><img src="https://cdn.roots.io/app/uploads/40q.svg" alt="40Q" width="120" height="90"></a> <a href="https://www.itineris.co.uk/"><img src="https://cdn.roots.io/app/uploads/itineris.svg" alt="Itineris" width="120" height="90"></a>
+<a href="https://carrot.com/"><img src="https://cdn.roots.io/app/uploads/carrot.svg" alt="Carrot" width="120" height="90"></a> <a href="https://wordpress.com/"><img src="https://cdn.roots.io/app/uploads/wordpress.svg" alt="WordPress.com" width="120" height="90"></a> <a href="https://worksitesafety.ca/careers/"><img src="https://cdn.roots.io/app/uploads/worksite-safety.svg" alt="Worksite Safety" width="120" height="90"></a> <a href="https://40q.agency/"><img src="https://cdn.roots.io/app/uploads/40q.svg" alt="40Q" width="120" height="90"></a> <a href="https://www.itineris.co.uk/"><img src="https://cdn.roots.io/app/uploads/itineris.svg" alt="Itineris" width="120" height="90"></a> <a href="https://bonsai.so/"><img src="https://cdn.roots.io/app/uploads/bonsai.svg" alt="Bonsai" width="120" height="90"></a>
 </div>
-
-## Overview
-
-Sage is a WordPress starter theme with block editor support.
-
-- Harness the power of [Laravel](https://laravel.com) and its available packages thanks to [Acorn](https://github.com/roots/acorn)
-- Clean, efficient theme templating utilizing [Laravel Blade](https://laravel.com/docs/master/blade)
-- Modern frontend development workflow powered by [Bud](https://bud.js.org/)
-- Out of the box support for [Tailwind CSS](https://tailwindcss.com/)
-
-## Getting Started
-
-See the [Sage installation documentation](https://roots.io/sage/docs/installation/).
-
-## Stay Connected
-
-- Join us on Discord by [sponsoring us on GitHub](https://github.com/sponsors/roots)
-- Participate on [Roots Discourse](https://discourse.roots.io/)
-- Follow [@rootswp on Twitter](https://twitter.com/rootswp)
-- Read the [Roots Blog](https://roots.io/blog/)
-- Subscribe to the [Roots Newsletter](https://roots.io/newsletter/)

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):
+            $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',
+                        'fontawesome_regular',
+                        'fontawesome_solid',
+                    ];
+
+                    // 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/7.0.1/css/all.min.css',
+            false,
+            '7.0.1',
+            'all'
+        );
+    }
+}

app/Admin/Integrations.php

@@ -0,0 +1,38 @@
+<?php
+
+namespace App\Admin;
+
+class Integrations
+{
+    public function __construct()
+    {
+        add_action( 'wp_head',  [$this, 'FathomAnalytics']);
+        add_action( 'wp_footer',  [$this, 'FontAwesomeKit'], 100);
+    }
+
+    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;
+    }
+
+    public function FontAwesomeKit()
+    {
+        $kit = get_field('badegg_integrations_fontawesome_kit', 'option');
+
+        if($kit): ?>
+
+<!-- FontAwesome Kit -->
+<script src="https://kit.fontawesome.com/<?= $kit ?>.js" crossorigin="anonymous"></script>
+<!-- / FontAwesome Kit -->
+
+        <?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,328 @@
+<?php
+
+/**
+ * Theme Blocks.
+ */
+
+namespace App\Blocks;
+
+/**
+ * Disable block styles in frontend
+ */
+add_filter( 'should_load_separate_core_block_assets', '__return_false', 99 );
+add_filter( 'wp_img_tag_add_auto_sizes', '__return_false' );
+add_action( 'init', __NAMESPACE__ . '\\remove_action_block_inline' );
+add_action( 'wp_enqueue_scripts', __NAMESPACE__ . '\\disable_frontend_inline_css', 20 );
+add_action( 'template_redirect', __NAMESPACE__ . '\\delete_block_support_inline_css' );
+
+/**
+ * block editor back end tweaks
+ *  - 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_action( 'admin_init', __NAMESPACE__ . '\\admin_block_cleanup' );
+add_filter( 'block_type_metadata', __NAMESPACE__ . '\\unset_core_supports' );
+
+/**
+ * Custom blocks
+ */
+add_filter( 'block_categories_all' , __NAMESPACE__ . '\\add_categories' );
+add_filter( 'badegg_block_types_allow', __NAMESPACE__ . '\\allowed_list' );
+add_action( 'init', __NAMESPACE__ . '\\auto_register' );
+
+/**
+ * Core Blocks
+ */
+add_filter( 'render_block_core/details', __NAMESPACE__ . '\\core_details_modified', 10, 2 );
+add_filter( 'render_block_core/image', __NAMESPACE__ . '\\core_image_modified', 10, 2 );
+
+
+function remove_action_block_inline()
+{
+    remove_action( 'wp_enqueue_scripts', 'wp_enqueue_global_styles' );
+    remove_action( 'wp_enqueue_scripts', 'wp_enqueue_block_support_styles');
+    remove_action( 'wp_footer', 'wp_enqueue_global_styles', 1 );
+    remove_action( 'wp_body_open', 'wp_global_styles_render_svg_filters' );
+}
+
+function admin_block_cleanup()
+{
+    remove_action( 'enqueue_block_editor_assets', 'wp_enqueue_editor_block_directory_assets' );
+}
+
+function disable_frontend_inline_css()
+{
+    wp_dequeue_style( 'wp-block-library' );
+    wp_dequeue_style( 'wp-block-library-theme' );
+    wp_dequeue_style( 'classic-theme-styles' );
+}
+
+function delete_block_support_inline_css ()
+{
+	ob_start( function ( $html ) {
+		return preg_replace(
+			'#<style id=[\'"]core-block-supports-inline-css[\'"][^>]*>.*?</style>#s',
+			'',
+			$html
+		);
+	} );
+}
+
+function unset_core_supports($metadata){
+    $name = $metadata['name'];
+
+    if (str_starts_with($name, 'core/') ) {
+        unset($metadata['supports']['color']);
+        unset($metadata['supports']['typography']);
+        unset($metadata['supports']['border']);
+    }
+
+    return $metadata;
+}
+
+
+function allowed_list($allowed){
+    return array_merge($allowed, [
+        // 'core/categories',
+    ]);
+}
+
+function add_categories( $categories ) {
+
+        // Adding a new category.
+        $categories = array_merge([
+            [
+                'slug'  => 'badegg',
+                'title' => __('Provided by Bad Egg Digital'),
+            ],
+        ], $categories);
+
+        return $categories;
+}
+
+function auto_register() {
+    $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();
+    }
+}
+
+function core_details_modified($content, $block)
+{
+    $content = str_replace('</summary>', '</summary><div class="wp-block-details__inner inner inner-zero-x wysiwyg">', $content);
+    $content = str_replace('</details>', '</div></details>', $content);
+
+    return $content;
+}
+
+function core_image_modified($content, $block)
+{
+    if(!$content) return '';
+
+    $dom = new \DomDocument();
+    $dom->strictErrorChecking = false;
+    @$dom->loadHTML($content);
+
+    $images = @$dom->getElementsByTagName('img');
+    $figures = @$dom->getElementsByTagName('figure');
+
+    if(!$figures) return $content;
+
+    // get image data
+    $imageID = @$block['attrs']['id'];
+    $lazy = wp_get_attachment_image_src($imageID, 'lazy');
+    $specifiedSize = @wp_get_attachment_image_src($imageID, $block['sizeSlug']);
+    $large = wp_get_attachment_image_src($imageID, '2048x2048');
+
+    // create lightbox link node
+    $link = $dom->createElement('a');
+    $link->setAttribute('class', 'badegg-lightbox');
+    $link->setAttribute('target', '_blank');
+    $link->setAttribute('role', 'button');
+    $link->setAttribute('tabindex', '0');
+    $link->setAttribute('aria-label', __('expand image', 'badegg'));
+
+    foreach($images as $image) {
+        // define new image attributes
+        $src = $image->getAttribute('src');
+        $srcset = $image->getAttribute('srcset');
+        $class = $image->getAttribute('class');
+
+        // set image attributes
+        $image->setAttribute('src', $lazy[0]);
+        $image->setAttribute('srcset', '');
+        $image->setAttribute('data-src', $src);
+        $image->setAttribute('data-srcset', $srcset);
+        $image->setAttribute('class', $class . ' lazy');
+
+        if($specifiedSize) {
+            $image->setAttribute('width', $specifiedSize[1]);
+            $image->setAttribute('height', $specifiedSize[2]);
+        }
+
+        // clone lightbox link
+        $linkClone = $link->cloneNode();
+
+        // set lightbox link attributes
+        $linkClone->setAttribute('href', $large[0]);
+
+        // replace image with lightbox link
+        $image->parentNode->replaceChild($linkClone, $image);
+
+        // append original image to lightbox link
+        $linkClone->appendChild($image);
+    }
+
+    return $dom->saveHTML($figures[0]);
+}

app/setup.php

@@ -6,25 +6,56 @@
 
 namespace App;
 
-use function Roots\bundle;
+use Illuminate\Support\Facades\Vite;
 
 /**
- * Register the theme assets.
+ * Inject styles into the block editor.
+ *
+ * @return array
+ */
+add_filter('block_editor_settings_all', function ($settings) {
+    $style = Vite::asset('resources/css/editor.scss');
+
+    $settings['styles'][] = [
+        'css' => "@import url('{$style}')",
+    ];
+
+    return $settings;
+});
+
+/**
+ * Inject scripts into the block editor.
  *
  * @return void
  */
-add_action('wp_enqueue_scripts', function () {
-    bundle('app')->enqueue();
-}, 100);
+add_filter('admin_head', function () {
+    if (! get_current_screen()?->is_block_editor()) {
+        return;
+    }
+
+    $dependencies = json_decode(Vite::content('editor.deps.json'));
+
+    foreach ($dependencies as $dependency) {
+        if (! wp_script_is($dependency)) {
+            wp_enqueue_script($dependency);
+        }
+    }
+
+    echo Vite::withEntryPoints([
+        'resources/js/editor.js',
+    ])->toHtml();
+});
 
 /**
- * Register the theme assets with the block editor.
+ * Use the generated theme.json file.
  *
- * @return void
+ * @return string
  */
-add_action('enqueue_block_editor_assets', function () {
-    bundle('editor')->enqueue();
-}, 100);
+add_filter('theme_file_path', function ($path, $file) {
+    return $file === 'theme.json'
+        ? public_path('build/assets/theme.json')
+        : $path;
+}, 10, 2);
 
 /**
  * Register the initial theme setup.
@@ -122,3 +153,28 @@ 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('wp_head', function(){
+    if(file_exists(get_theme_file_path('resources/images/favicon/site.webmanifest'))) {
+        echo \Roots\view("partials.favicon")->render();
+    }
+});
+
+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);
+});

bud.config.js

@@ -1,80 +0,0 @@
-/**
- * Compiler configuration
- *
- * @see {@link https://roots.io/sage/docs sage documentation}
- * @see {@link https://bud.js.org/learn/config bud.js configuration guide}
- *
- * @type {import('@roots/bud').Config}
- */
-export default async (app) => {
-  /**
-   * Application assets & entrypoints
-   *
-   * @see {@link https://bud.js.org/reference/bud.entry}
-   * @see {@link https://bud.js.org/reference/bud.assets}
-   */
-  app
-    .entry('app', ['@scripts/app', '@styles/app'])
-    .entry('editor', ['@scripts/editor', '@styles/editor'])
-    .assets(['images']);
-
-  /**
-   * Set public path
-   *
-   * @see {@link https://bud.js.org/reference/bud.setPublicPath}
-   */
-  app.setPublicPath('/app/themes/sage/public/');
-
-  /**
-   * Development server settings
-   *
-   * @see {@link https://bud.js.org/reference/bud.setUrl}
-   * @see {@link https://bud.js.org/reference/bud.setProxyUrl}
-   * @see {@link https://bud.js.org/reference/bud.watch}
-   */
-  app
-    .setUrl('http://localhost:3000')
-    .setProxyUrl('http://example.test')
-    .watch(['resources/views', 'app']);
-
-  /**
-   * Generate WordPress `theme.json`
-   *
-   * @note This overwrites `theme.json` on every build.
-   *
-   * @see {@link https://bud.js.org/extensions/sage/theme.json}
-   * @see {@link https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-json}
-   */
-  app.wpjson
-    .setSettings({
-      background: {
-        backgroundImage: true,
-      },
-      color: {
-        custom: false,
-        customDuotone: false,
-        customGradient: false,
-        defaultDuotone: false,
-        defaultGradients: false,
-        defaultPalette: false,
-        duotone: [],
-      },
-      custom: {
-        spacing: {},
-        typography: {
-          'font-size': {},
-          'line-height': {},
-        },
-      },
-      spacing: {
-        padding: true,
-        units: ['px', '%', 'em', 'rem', 'vw', 'vh'],
-      },
-      typography: {
-        customFontSize: false,
-      },
-    })
-    .useTailwindColors()
-    .useTailwindFontFamily()
-    .useTailwindFontSize();
-};

composer.json

@@ -39,10 +39,12 @@
     }
   },
   "require": {
-    "php": ">=8.1"
+    "php": ">=8.2",
+    "roots/acorn": "^5.0",
+    "ourcodeworld/name-that-color": "dev-master"
   },
   "require-dev": {
-    "laravel/pint": "^1.13"
+    "laravel/pint": "^1.20"
   },
   "suggest": {
     "log1x/sage-directives": "A collection of useful Blade directives for WordPress and Sage (^1.0)."
@@ -54,11 +56,9 @@
   },
   "minimum-stability": "dev",
   "prefer-stable": true,
-  "extra": {
-    "acorn": {
-      "providers": [
-        "App\\Providers\\ThemeServiceProvider"
-      ]
-    }
+  "scripts": {
+    "post-autoload-dump": [
+      "Roots\\Acorn\\ComposerScripts::postAutoloadDump"
+    ]
   }
 }

functions.php

@@ -1,5 +1,7 @@
 <?php
 
+use Roots\Acorn\Application;
+
 /*
 |--------------------------------------------------------------------------
 | Register The Auto Loader
@@ -29,18 +31,33 @@ require $composer;
 |
 */
 
-if (! function_exists('\Roots\bootloader')) {
-    wp_die(
-        __('You need to install Acorn to use this theme.', 'sage'),
-        '',
-        [
-            'link_url' => 'https://roots.io/acorn/docs/installation/',
-            'link_text' => __('Acorn Docs: Installation', 'sage'),
-        ]
-    );
+Application::configure()
+    ->withProviders([
+        App\Providers\ThemeServiceProvider::class,
+    ])
+    ->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();
+    }
 }
 
-\Roots\bootloader()->boot();
+autoload_psr4('PostTypes');
+autoload_psr4('ACF');
+autoload_psr4('Utilities');
+autoload_psr4('Admin');
+
 
 /*
 |--------------------------------------------------------------------------
@@ -54,7 +71,7 @@ if (! function_exists('\Roots\bootloader')) {
 |
 */
 
-collect(['setup', 'filters'])
+collect(['setup', 'filters', 'blocks'])
     ->each(function ($file) {
         if (! locate_template($file = "app/{$file}.php", true, true)) {
             wp_die(

jsconfig.json

@@ -1,34 +0,0 @@
-{
-  "extends": [
-    "@roots/bud/config/jsconfig.json",
-    "@roots/sage/config/jsconfig.json"
-  ],
-  "compilerOptions": {
-    "baseUrl": "resources",
-    /**
-     * Resolve aliases
-     */
-    "paths": {
-      "@fonts/*": ["fonts/*"],
-      "@images/*": ["images/*"],
-      "@scripts/*": ["scripts/*"],
-      "@styles/*": ["styles/*"]
-    },
-    /**
-     * Type definitions
-     */
-    "types": [
-      "@roots/bud",
-      "@roots/bud-react",
-      "@roots/bud-postcss",
-      "@roots/bud-preset-recommend",
-      "@roots/bud-preset-wordpress",
-      "@roots/bud-tailwindcss",
-      "@roots/bud-wordpress-theme-json",
-      "@roots/sage"
-    ]
-  },
-  "files": ["bud.config.js"],
-  "include": ["resources"],
-  "exclude": ["node_modules", "public"]
-}

package.json

@@ -1,16 +1,13 @@
 {
   "name": "sage",
   "private": true,
-  "browserslist": [
-    "extends @roots/browserslist-config"
-  ],
   "engines": {
     "node": ">=20.0.0"
   },
   "type": "module",
   "scripts": {
-    "dev": "bud dev",
-    "build": "bud build",
+    "dev": "vite",
+    "build": "vite build",
     "translate": "npm run translate:pot && npm run translate:update",
     "translate:pot": "wp i18n make-pot . ./resources/lang/sage.pot --include=\"theme.json,patterns,app,resources\"",
     "translate:update": "for file in ./resources/lang/*.po; do wp i18n update-po ./resources/lang/sage.pot $file; done",
@@ -19,9 +16,10 @@
     "translate:mo": "wp i18n make-mo ./resources/lang ./resources/lang"
   },
   "devDependencies": {
-    "@roots/bud": "6.23.3",
-    "@roots/bud-tailwindcss": "6.23.3",
-    "@roots/sage": "6.23.3"
-  },
-  "dependencies": {}
+    "@roots/vite-plugin": "^1.0.2",
+    "fast-glob": "^3.3.3",
+    "laravel-vite-plugin": "^1.2.0",
+    "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,463 @@
+{
+    "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,
+            "selected": 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",
+                    "custom_palette_source": "",
+                    "palette_colors": "",
+                    "show_color_wheel": true
+                },
+                {
+                    "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",
+                    "parent_repeater": "field_67658e49aba4f",
+                    "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",
+                            "custom_palette_source": "",
+                            "palette_colors": "",
+                            "show_color_wheel": true
+                        },
+                        {
+                            "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",
+                            "custom_palette_source": "",
+                            "palette_colors": "",
+                            "show_color_wheel": true
+                        },
+                        {
+                            "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",
+                            "custom_palette_source": "",
+                            "palette_colors": "",
+                            "show_color_wheel": true
+                        },
+                        {
+                            "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",
+                            "custom_palette_source": "",
+                            "palette_colors": "",
+                            "show_color_wheel": true
+                        },
+                        {
+                            "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",
+                            "custom_palette_source": "",
+                            "palette_colors": "",
+                            "show_color_wheel": true
+                        },
+                        {
+                            "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",
+                            "custom_palette_source": "",
+                            "palette_colors": "",
+                            "show_color_wheel": true
+                        }
+                    ]
+                }
+            ]
+        },
+        {
+            "key": "field_67659ca28081d",
+            "label": "Company",
+            "name": "",
+            "aria-label": "",
+            "type": "tab",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "placement": "top",
+            "endpoint": 0,
+            "selected": 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,
+            "selected": 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": ""
+        },
+        {
+            "key": "field_698b36010d055",
+            "label": "Font Awesome Kit ID",
+            "name": "badegg_integrations_fontawesome_kit",
+            "aria-label": "",
+            "type": "text",
+            "instructions": "The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome. <a href=\"https:\/\/fontawesome.com\/\" target=\"_blank\" rel=\"noopener nofollow noindex\">Visit website<\/a>",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "default_value": "",
+            "maxlength": "",
+            "allow_in_bindings": 1,
+            "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,
+    "display_title": "",
+    "modified": 1770736471
+}

resources/acf/group_post_social.json

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

resources/css/app.scss

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

resources/css/components/_BadEggLightbox.scss

@@ -0,0 +1,92 @@
+#badegg-lightbox {
+  &-overlay,
+  &-image,
+  &-close {
+    transition: all 300ms ease;
+    opacity: 0;
+  }
+
+  &-modal {
+    position: fixed;
+    inset: 0;
+    z-index: 9999;
+    padding: 3em;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &-overlay {
+    position: absolute;
+    inset: 0;
+    background: rgba(white, 0.5);
+
+    .open & {
+      opacity: 1;
+      backdrop-filter: blur(1em);
+    }
+  }
+
+  &-image {
+    position: relative;
+    z-index: 2;
+    object-fit: contain;
+    max-width: 100%;
+    max-height: 100%;
+    width: auto;
+    height: auto;
+    transform: scale(0.8);
+
+    .open & {
+      transform: none;
+      opacity: 1;
+    }
+  }
+
+  &-close {
+    position: absolute;
+    z-index: 3;
+    top: 1em;
+    right: 1em;
+    display: block;
+    appearance: none;
+    border: none;
+    background: transparent;
+    border: 2px solid black;
+    border-radius: 50%;
+    width: 2em;
+    height: 2em;
+    cursor: pointer;
+    transform: scale(0.01) rotate(-360deg);
+
+    .open & {
+      opacity: 1;
+      transform: none;
+    }
+
+    &:hover,
+    &:focus {
+      transform: scale(1.2) rotate(90deg);
+    }
+
+    .admin-bar & {
+      top: calc(1em + 32px);
+
+      @media (max-width: 782px) {
+        top: calc(1em + 46px);
+      }
+    }
+
+    svg {
+      display: block;
+      width: 100%;
+      stroke: black;
+      stroke-width: 5;
+    }
+
+    &:focus {
+      outline: 2px dashed red;
+    }
+  }
+}

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/variables/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/variables/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.scss

@@ -0,0 +1,73 @@
+@use "app";
+@use "global/variables";
+
+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 variables.$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: variables.$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,54 @@
+/*
+ * 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 @@
+@forward "framework/breakpoints";
+@forward "framework/normalise";
+@forward "framework/colours";
+@forward "framework/spacing";

resources/css/global/_mixins.scss

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

resources/css/global/_typography.scss

@@ -0,0 +1,144 @@
+@use "variables";
+
+.wysiwyg {
+  > *:first-child {
+    margin-top: 0;
+  }
+
+  > *:last-child {
+    margin-bottom: 0;
+  }
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  color: variables.$primary;
+  font-weight: 700;
+  font-family: variables.$font;
+  line-height: 1.1em;
+  margin: 1.5em 0 0.25em;
+  padding: 0;
+
+  &.section-title {
+    margin-top: 0;
+  }
+
+  @media screen {
+    .knockout & {
+      color: variables.$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: variables.$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: variables.$grey-darker;
+  font-family: variables.$font;
+  font-weight: 400;
+  line-height: 1.5em;
+  margin: 0 0 0.8em;
+  padding: 0;
+
+  @media screen {
+    .knockout & {
+      color: variables.$white;
+    }
+  }
+}
+
+a {
+  color: variables.$primary;
+  text-decoration: none;
+  outline: none;
+  transition: all 300ms ease;
+
+  &:hover,
+  &:focus {
+    color: variables.$primary-dark;
+    text-decoration: none;
+  }
+
+  @media screen {
+    .knockout & {
+      color: variables.$white;
+
+      &:hover,
+      &:focus {
+        color: variables.$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;
+}
+
+.nolist {
+  margin: 0;
+  padding: 0;
+  text-align: inherit;
+  list-style: none;
+
+  li {
+    margin: 0;
+    padding: 0;
+  }
+}
+
+hr {
+  margin: 2em auto;
+  height: 0;
+  border: 0 solid variables.$grey-light;
+  border-width: variables.$borderThin 0 0;
+
+  @media screen {
+    .knockout & {
+      border-color: variables.$white;
+    }
+  }
+}
+
+.align {
+  &-left { text-align: left; }
+  &-centre, &-center { text-align: center; }
+  &-right { text-align: right; }
+}

resources/css/global/_variables.scss

@@ -0,0 +1,4 @@
+@forward "variables/fonts";
+@forward "variables/colours";
+@forward "variables/breakpoints";
+@forward "variables/spacing";

resources/css/global/framework/_breakpoints.scss

@@ -0,0 +1,15 @@
+@use "../variables";
+
+@each $label, $value in variables.$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,12 @@
+@use "../mixins";
+@use "../variables";
+
+::selection {
+  color: variables.$white;
+  background: variables.$primary;
+}
+
+@each $color, $hex in variables.$colors {
+  @include mixins.generate_colour_classes($color, $hex);
+  @include mixins.generate_button_colors($color, $hex);
+}

resources/css/global/framework/_normalise.scss

@@ -0,0 +1,49 @@
+@use "../variables";
+
+* {
+  box-sizing: border-box;
+  backface-visibility: hidden; // removes jagged edges on rotated elements
+}
+
+html {
+  font-size: 16px;
+}
+
+body,
+html {
+  margin: 0;
+  padding: 0;
+  background: variables.$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;
+}
+
+video {
+  max-width: 100%;
+  height: auto;
+}
+
+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,162 @@
+@use "../variables";
+
+.brand {
+  display: block;
+  width: variables.$brandWidth;
+  height: variables.$brandHeight;
+
+  svg,
+  img {
+    display: block;
+    width: variables.$brandWidth;
+    height: variables.$brandHeight;
+  }
+
+  .knockout & {
+    @media screen {
+      .fill-primary {
+        fill: variables.$white;
+      }
+
+      .fill-grey {
+        fill: rgba(variables.$white, 0.8);
+      }
+    }
+  }
+}
+
+figure {
+  margin: 0;
+  padding: 0;
+}
+
+.container {
+  width: calc(100% - variables.$innerMedium * 2);
+  margin: auto;
+
+  @container (min-width: #{variables.$screen-md}) {
+    width: calc(100% - variables.$innerLarge * 3);
+  }
+
+  @container (min-width: #{variables.$screen-lg}) {
+    width: calc(100% - variables.$innerLarge * 4);
+  }
+
+  &-full { width: auto; }
+  &-larger { max-width: variables.$containerLarger; }
+  &-large { max-width: variables.$containerLarge; }
+  &-medium { max-width: variables.$containerMedium; }
+  &-small { max-width: variables.$containerSmall; }
+  &-narrow { max-width: variables.$containerNarrow; }
+}
+
+.section {
+  padding: variables.$sectionMedium 0;
+
+  &-small {  padding: variables.$sectionSmall  unset; }
+  &-medium { padding: variables.$sectionMedium unset; }
+  &-large {  padding: variables.$sectionLarge  unset; }
+
+  @container (min-width: #{variables.$screen-md}) {
+    padding: (variables.$sectionMedium * 1.5) unset;
+
+    &-small { padding: (variables.$sectionSmall * 1.5) unset; }
+    &-medium { padding: (variables.$sectionMedium * 1.5) unset; }
+    &-large { padding: (variables.$sectionLarge * 1.5) unset; }
+  }
+
+  @container (min-width: #{variables.$screen-lg}) {
+    padding: (variables.$sectionMedium * 2) 0;
+
+    &-small { padding: (variables.$sectionSmall * 2) 0; }
+    &-medium { padding: (variables.$sectionMedium * 2) 0; }
+    &-large { padding: (variables.$sectionLarge * 2) 0; }
+  }
+
+  &-zero-top {    padding-top:    unset; }
+  &-zero-bottom { padding-bottom: unset; }
+}
+
+.inner {
+  padding: variables.$innerMedium;
+
+  &-largest {  padding: variables.$innerLargest;  }
+  &-larger {   padding: variables.$innerLarger;   }
+  &-large {    padding: variables.$innerLarge;    }
+  &-small {    padding: variables.$innerSmall;    }
+  &-smaller {  padding: variables.$innerSmaller;  }
+  &-smallest { padding: variables.$innerSmallest; }
+
+  @container (min-width: #{variables.$screen-md}) {
+    padding: (variables.$innerMedium * 1.5);
+
+    &-largest {  padding: (variables.$innerLargest * 1.25);  }
+    &-larger {   padding: (variables.$innerLarger * 1.25);   }
+    &-large {    padding: (variables.$innerLarge * 1.25);    }
+    &-small {    padding: (variables.$innerSmall * 1.25);    }
+    &-smaller {  padding: (variables.$innerSmaller * 1.25);  }
+    &-smallest { padding: (variables.$innerSmallest * 1.25); }
+  }
+
+  @container (min-width: #{variables.$screen-lg}) {
+    padding: (variables.$innerMedium * 2);
+
+    &-largest {  padding: (variables.$innerLargest * 1.5);  }
+    &-larger {   padding: (variables.$innerLarger * 1.5);   }
+    &-large {    padding: (variables.$innerLarge * 1.5);    }
+    &-small {    padding: (variables.$innerSmall * 1.5);    }
+    &-smaller {  padding: (variables.$innerSmaller * 1.5);  }
+    &-smallest { padding: (variables.$innerSmallest * 1.5); }
+  }
+
+  &-zero-x { padding-left: unset; padding-right: unset; }
+  &-zero-y { padding-top:  unset; padding-top:   unset; }
+}
+
+.rounded {
+  border-radius: variables.$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: variables.$borderWidth;
+
+  &-thin { border-width: 0.0625em; }
+  &-regular { border-width: variables.$borderWidth; }
+  &-thick { border-width: variables.$borderThick; }
+  &-thicker { border-width: variables.$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";
+
+@use "sass:color";
+
+@mixin generate_button_colors($name, $hex) {
+
+  $buttons: (
+    ".btn",
+    "button",
+    "input[type=submit]",
+  );
+
+  @each $button in $buttons {
+    #{$button}.#{$name} {
+      color: variables.$white;
+      background: $hex;
+      border-color: $hex;
+
+      &:hover,
+      &:focus {
+        color: variables.$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,39 @@
+@use "text-contrast";
+@use "../variables";
+
+@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);
+        @if($name == "white") {
+          color: variables.$white;
+          background: variables.$primary;
+        } @else if($name == "black") {
+          color: variables.$white;
+          background: variables.$primary-lighter;
+        } @else {
+          @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 "sass:color";
+@use "sass:math";
+
+@use "../variables";
+
+@mixin text-contrast($n, $dark: variables.$black, $light: variables.$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(variables.$white, "red") * 299) + (color.channel(variables.$white, "green") * 587) + math.div((color.channel(variables.$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/_fonts.scss

@@ -0,0 +1,2 @@
+$font: "Ubuntu", Helvetica, Arial, sans-serif;
+$blockquote: serif;

resources/css/global/variables/_spacing.scss

@@ -0,0 +1,49 @@
+@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;
+
+$containerLarger:      87.000em;
+$containerLarge:       73.125em;
+$containerMedium:      60.000em;
+$containerSmall:       50.000em;
+$containerNarrow:      34.000em;
+
+$innerLargest:          5.000em;
+$innerLarger:           3.000em;
+$innerLarge:            2.000em;
+$innerMedium:           1.500em;
+$innerSmall:            1.000em;
+$innerSmaller:          0.750em;
+$innerSmallest:         0.500em;
+
+$gap:                   1em;
+$gapSmall:              0.5em;
+$gapMedium:             1em;
+$gapLarge:              2em;
+
+$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";
+
+.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 variables.$grey-light;
+  border-width: 1px 0 0;
+
+  .knockout & {
+    border-color: rgba(variables.$white, 0.3);
+  }
+}
+
+.wpcf7-display-none {
+  display: none;
+}

resources/css/plugins/_mce.scss

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

resources/js/app.js

@@ -0,0 +1,12 @@
+import.meta.glob([
+  '../images/**',
+  '../fonts/**',
+]);
+
+import Header from '../views/sections/header/header.js';
+import LazyLoad from './lib/Lazy.js';
+import BadEggLightbox from './lib/BadEggLightbox';
+
+Header();
+LazyLoad();
+BadEggLightbox();

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,54 @@
+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,
+  disableLazyBG = false,
+}) {
+
+  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 && !disableLazyBG) {
+      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,260 @@
+/**
+ * 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;
+                }
+
+                let colourAttributes = {
+                  background_colour: slug,
+                  background_hex: hex,
+                };
+
+                if(!slug || [0, '0', 'white', 'black'].includes(slug)) {
+                  colourAttributes.background_tint = '0';
+                }
+
+                setAttributes( colourAttributes );
+
+              } }
+            />
+
+            { '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 }
+              />
+            ) : null }
+
+            <ToggleControl
+              label={ __('Text Contrast', 'badegg') }
+              checked={ background_contrast }
+              onChange={(value) => setAttributes({ background_contrast: value }) }
+              __nextHasNoMarginBottom
+            />
+
+            { 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 && !['', '0'].includes(attributes.container_width))
+    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_hex' in attributes && attributes.background_hex) {
+    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

@@ -0,0 +1,31 @@
+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
+  }
+
+  const coreInnerBlocks = (settings, name) => {
+    if (['core/media-text', 'core/details', 'core/quote'].includes(name)) {
+
+      settings.allowedBlocks = [
+        'core/paragraph',
+        'core/heading',
+        'core/list',
+      ];
+    }
+
+    return settings;
+  }
+
+  wp.hooks.addFilter( 'blocks.registerBlockType', 'badegg/restrict-parent-blocks', restrictEditorParentBlocks );
+  wp.hooks.addFilter( 'blocks.registerBlockType', 'badegg/core-inner-blocks', coreInnerBlocks );
+
+});

resources/js/lib/BadEggLightbox.js

@@ -0,0 +1,81 @@
+export default function BadEggLightbox()
+{
+  const lightboxes = document.querySelectorAll(".badegg-lightbox");
+
+  if(!lightboxes) return;
+
+  lightboxes.forEach(lightbox => {
+    const fullSize = lightbox.getAttribute('href');
+    const thumbnail = lightbox.querySelector("img");
+
+    lightbox.addEventListener("click", (e) => {
+      e.preventDefault();
+      // console.log(e);
+
+      modal(fullSize, thumbnail);
+    });
+
+  });
+}
+
+function modal(src = '', img = '')
+{
+  if(!src || !img) {
+    alert('Error: No image defined');
+    return;
+  }
+
+  const title = img.getAttribute("title") || '';
+  const alt = img.getAttribute("alt") || '';
+
+  const body = document.querySelector("body");
+
+  let template = `
+    <img id="badegg-lightbox-image" src="${src}" tabindex="0" title="${title}" alt="${alt}" />
+    <button id="badegg-lightbox-close" aria-label="close" aria-expanded="true" tabindex="0">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+        <line x2="32" y2="32"/>
+        <line x1="32" y2="32"/>
+      </svg>
+    </button>
+    <div id="badegg-lightbox-overlay"></div>
+  `;
+
+  let modal = document.createElement("div");
+
+  modal.setAttribute("id", "badegg-lightbox-modal");
+  modal.setAttribute("aria-modal", "true");
+  modal.innerHTML = template;
+
+  body.appendChild(modal);
+
+  setTimeout(() => modal.classList.add("open"), 100);
+
+  document.getElementById("badegg-lightbox-image").focus();
+
+  modalDeleteListener();
+}
+
+function modalDeleteListener()
+{
+  const modal = document.getElementById("badegg-lightbox-modal");
+
+  if(!modal) return;
+
+  const modalClose = document.getElementById("badegg-lightbox-close");
+  const modalOverlay = document.getElementById("badegg-lightbox-overlay");
+
+  modalClose.addEventListener("click", (e) => {
+    modal.remove();
+  });
+
+  modalOverlay.addEventListener("click", (e) => {
+    modal.remove();
+  });
+
+  document.addEventListener("keydown", (e) => {
+    if(e.key === 'Escape') {
+      modal.remove();
+    }
+  });
+}

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,22 @@
+[
+  "core/separator",
+  "core/spacer",
+
+  "core/gallery",
+  "core/image",
+  "core/media-text",
+  "core/audio",
+  "core/video",
+  "core/embed",
+
+  "core/footnotes",
+  "core/heading",
+  "core/list",
+  "core/details",
+  "core/list-item",
+  "core/missing",
+  "core/paragraph",
+  "core/quote",
+  "core/pullquote",
+  "core/verse"
+]

resources/json/block-parents.json

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

resources/json/font-awesome-regular.json

@@ -0,0 +1 @@
+["address-book","address-card","alarm-clock","angry","arrow-alt-circle-down","arrow-alt-circle-left","arrow-alt-circle-right","arrow-alt-circle-up","bar-chart","bell-slash","bell","bookmark","building","calendar-alt","calendar-check","calendar-days","calendar-minus","calendar-plus","calendar-times","calendar-xmark","calendar","camera-alt","camera","caret-square-down","caret-square-left","caret-square-right","caret-square-up","chart-bar","check-circle","check-square","chess-bishop","chess-king","chess-knight","chess-pawn","chess-queen","chess-rook","circle-check","circle-dot","circle-down","circle-left","circle-pause","circle-play","circle-question","circle-right","circle-stop","circle-up","circle-user","circle-xmark","circle","clipboard","clock-four","clock","clone","closed-captioning","cloud","comment-alt","comment-dots","comment","commenting","comments","compass","contact-book","contact-card","copy","copyright","credit-card-alt","credit-card","dizzy","dot-circle","drivers-license","edit","envelope-open","envelope","eye-slash","eye","face-angry","face-dizzy","face-flushed","face-frown-open","face-frown","face-grimace","face-grin-beam-sweat","face-grin-beam","face-grin-hearts","face-grin-squint-tears","face-grin-squint","face-grin-stars","face-grin-tears","face-grin-tongue-squint","face-grin-tongue-wink","face-grin-tongue","face-grin-wide","face-grin-wink","face-grin","face-kiss-beam","face-kiss-wink-heart","face-kiss","face-laugh-beam","face-laugh-squint","face-laugh-wink","face-laugh","face-meh-blank","face-meh","face-rolling-eyes","face-sad-cry","face-sad-tear","face-smile-beam","face-smile-wink","face-smile","face-surprise","face-tired","file-alt","file-archive","file-audio","file-clipboard","file-code","file-excel","file-image","file-lines","file-pdf","file-powerpoint","file-text","file-video","file-word","file-zipper","file","flag","floppy-disk","flushed","folder-blank","folder-closed","folder-open","folder","font-awesome-flag","font-awesome-logo-full","font-awesome","frown-open","frown","futbol-ball","futbol","gem","grimace","grin-alt","grin-beam-sweat","grin-beam","grin-hearts","grin-squint-tears","grin-squint","grin-stars","grin-tears","grin-tongue-squint","grin-tongue-wink","grin-tongue","grin-wink","grin","hand-back-fist","hand-lizard","hand-paper","hand-peace","hand-point-down","hand-point-left","hand-point-right","hand-point-up","hand-pointer","hand-rock","hand-scissors","hand-spock","hand","handshake-alt","handshake-simple","handshake","hard-drive","hdd","headphones-alt","headphones-simple","headphones","heart","home-alt","home-lg-alt","home","hospital-alt","hospital-wide","hospital","hourglass-2","hourglass-empty","hourglass-half","hourglass","house","id-badge","id-card","image","images","keyboard","kiss-beam","kiss-wink-heart","kiss","laugh-beam","laugh-squint","laugh-wink","laugh","lemon","life-ring","lightbulb","list-alt","map","meh-blank","meh-rolling-eyes","meh","message","minus-square","money-bill-1","money-bill-alt","moon","newspaper","note-sticky","object-group","object-ungroup","paper-plane","paste","pause-circle","pen-to-square","play-circle","plus-square","question-circle","rectangle-list","rectangle-times","rectangle-xmark","registered","sad-cry","sad-tear","save","share-from-square","share-square","smile-beam","smile-wink","smile","snowflake","soccer-ball","square-caret-down","square-caret-left","square-caret-right","square-caret-up","square-check","square-full","square-minus","square-plus","square","star-half-alt","star-half-stroke","star-half","star","sticky-note","stop-circle","sun","surprise","thumbs-down","thumbs-up","times-circle","times-rectangle","tired","trash-alt","trash-can","truck","user-alt","user-circle","user-large","user","vcard","window-close","window-maximize","window-minimize","window-restore","xmark-circle"]

resources/scripts/app.js

@@ -1,13 +0,0 @@
-import domReady from '@roots/sage/client/dom-ready';
-
-/**
- * Application entrypoint
- */
-domReady(async () => {
-  // ...
-});
-
-/**
- * @see {@link https://webpack.js.org/api/hot-module-replacement/}
- */
-if (import.meta.webpackHot) import.meta.webpackHot.accept(console.error);

resources/scripts/editor.js

@@ -1,9 +0,0 @@
-/**
- * @see {@link https://bud.js.org/extensions/bud-preset-wordpress/editor-integration/filters}
- */
-roots.register.filters('@scripts/filters');
-
-/**
- * @see {@link https://webpack.js.org/api/hot-module-replacement/}
- */
-if (import.meta.webpackHot) import.meta.webpackHot.accept(console.error);

resources/scripts/filters/button.filter.js

@@ -1,25 +0,0 @@
-/**
- * @see {@link https://developer.wordpress.org/block-editor/reference-guides/filters/block-filters/#blocks-registerblocktype}
- */
-export const hook = 'blocks.registerBlockType';
-
-/**
- * Filter handle
- */
-export const name = 'sage/button';
-
-/**
- * Filter callback
- *
- * @param {object} settings
- * @param {string} name
- * @returns modified settings
- */
-export function callback(settings, name) {
-  if (name !== 'core/button') return settings;
-
-  return {
-    ...settings,
-    styles: [{ label: 'Outline', name: 'outline' }],
-  };
-}

resources/styles/app.css

@@ -1,3 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;

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
+      }
+    }
+  }
+}