Merge pull request 'Upgrade to version 11.0.1' (#1) from v11.0.1 into main

* 👷 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/CloneGroup.php

@@ -0,0 +1,28 @@
+<?php
+
+namespace App\ACF;
+
+class CloneGroup
+{
+    public function __construct()
+    {
+
+    }
+    public function background()
+    {
+        return [
+            'contrast',
+            'bg_type',
+            'bg_colour',
+            'bg_tint',
+            'bg_opacity',
+            'bg_image',
+            'bg_video',
+            'pattern',
+            'pattern_top',
+            'pattern_bottom',
+            'padding_top',
+            'padding_bottom',
+        ];
+    }
+}

app/ACF/Dynamic.php

@@ -0,0 +1,102 @@
+<?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=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'   ]);
+    }
+
+    public function load_colours( $field )
+    {
+        $colour = new Utilities\Colour;
+        $NameThatColour = new NameThatColor;
+
+        $colours = $colour->values();
+
+        $field['choices'] = [];
+
+        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';
+            endif;
+        endforeach;
+
+        return $field;
+    }
+
+    public function load_fontawesome_regular_icons( $field )
+    {
+        $field['choices'] = [];
+        $field['choices'] = $this->fontawesome_choices('regular');
+
+        return $field;
+    }
+
+    public function load_fontawesome_solid_icons( $field )
+    {
+        $field['choices'] = [];
+        $field['choices'] = $this->fontawesome_choices('solid');
+
+        return $field;
+    }
+
+    public function load_fontawesome_brand_icons( $field )
+    {
+        $field['choices'] = [];
+        $field['choices'] = $this->fontawesome_choices('brands');
+
+        return $field;
+    }
+
+    public function fontawesome_choices($set = 'solid')
+    {
+        $path = get_stylesheet_directory() . '/resources/json/font-awesome-' . $set . '.json';
+
+        $json = @file_get_contents($path);
+
+        if(!$json) return false;
+        $icons = json_decode($json, true);
+
+        $choices = [
+            '0' => '<i class="fa-solid"></i> <span>Please select an icon</span>',
+        ];
+
+        foreach($icons as $slug => $props):
+            if(in_array($slug, range(0,9))) continue;
+
+            $choices[$slug] = '<i class="fa-'.$set.' fa-'.$slug.'" style="color: #2271b1;"></i> <span>' . (ucwords(str_replace('-', ' ', $slug))) . '</span>';
+        endforeach;
+
+        return $choices;
+    }
+}
+

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/Blocks.php

@@ -0,0 +1,135 @@
+<?php
+
+namespace App\Admin;
+
+class Blocks
+{
+    public function __construct()
+    {
+        add_action('allowed_block_types_all', [$this, 'blacklist'], 100, 2);
+    }
+
+    public function blacklist()
+    {
+        // Reference:
+        // https://www.wpexplorer.com/how-to-remove-gutenberg-blocks/
+        // https://www.wpexplorer.com/wordpress-core-blocks-list/
+
+        // Existing blocks with Blade templates
+        // https://roots.io/acorn/docs/rendering-blade-views/#existing-blocks-with-blade-templates
+
+        $blocks = array_keys( \WP_Block_Type_Registry::get_instance()->get_all_registered() );
+
+        $blacklist = [
+            // Design
+            'core/button',
+            'core/comment-template',
+            'core/home-link',
+            'core/navigation-link',
+            'core/navigation-submenu',
+            'core/buttons',
+            'core/column',
+            'core/columns',
+            'core/group',
+            'core/more',
+            'core/nextpage',
+            'core/separator',
+            'core/spacer',
+            'core/text-columns',
+
+            // Embed
+            'core/embed',
+
+            // Media
+            'core/cover',
+            'core/file',
+            'core/gallery',
+            'core/image',
+            'core/media-text',
+            'core/audio',
+            'core/video',
+
+            // Reusable
+            'core/block',
+
+            // Text
+            'core/footnotes',
+            'core/heading',
+            'core/list',
+            'core/code',
+            'core/details',
+            'core/freeform',
+            'core/list-item',
+            'core/missing',
+            'core/paragraph',
+            'core/preformatted',
+            'core/pullquote',
+            'core/quote',
+            'core/table',
+            'core/verse',
+
+            // Theme
+            'core/avatar',
+            'core/comment-author-name',
+            'core/comment-content',
+            'core/comment-date',
+            'core/comment-edit-link',
+            'core/comment-reply-link',
+            'core/comments',
+            'core/comments-pagination',
+            'core/comments-pagination-next',
+            'core/comments-pagination-numbers',
+            'core/comments-pagination-previous',
+            'core/comments-title',
+            'core/loginout',
+            'core/navigation',
+            'core/pattern',
+            'core/post-author',
+            'core/post-author-biography',
+            'core/post-author-name',
+            'core/post-comments-form',
+            'core/post-content',
+            'core/post-date',
+            'core/post-excerpt',
+            'core/post-featured-image',
+            'core/post-navigation-link',
+            'core/post-template',
+            'core/post-terms',
+            'core/post-title',
+            'core/query',
+            'core/query-no-results',
+            'core/query-pagination',
+            'core/query-pagination-next',
+            'core/query-pagination-numbers',
+            'core/query-pagination-previous',
+            'core/query-title',
+            'core/read-more',
+            'core/site-logo',
+            'core/site-tagline',
+            'core/site-title',
+            'core/template-part',
+            'core/term-description',
+            'core/post-comments',
+
+            // Widgets
+            'core/legacy-widget',
+            'core/widget-group',
+            'core/archives',
+            'core/calendar',
+            'core/categories',
+            'core/latest-comments',
+            'core/latest-posts',
+            'core/page-list',
+            'core/page-list-item',
+            'core/rss',
+            'core/search',
+            'core/shortcode',
+            'core/social-link',
+            'core/tag-cloud',
+            'core/html',
+            'core/social-links',
+        ];
+
+        return array_values( array_diff( $blocks, $blacklist ) );
+    }
+}

app/Admin/Comments.php

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

app/Admin/DisablePost.php

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

app/Admin/Enqueue.php

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

app/Admin/Integrations.php

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

app/Blocks/BadExample.php

@@ -0,0 +1,65 @@
+<?php
+
+namespace App\Blocks;
+use App\Utilities;
+use App\ACF;
+
+class BadExample
+{
+    public function __construct()
+    {
+        add_action('acf/init', [$this, 'init']);
+    }
+
+    public function init()
+    {
+        acf_register_block_type([
+            'name'              => 'badegg/bad-example',
+            'title'             => __('Bad Example'),
+            'description'       => __('This is an example block'),
+            'render_callback'   => [ $this, 'render'],
+            'category'          => 'layout',
+            'multiple'          => false,
+            'icon'              => [
+                'src'   => 'dismiss',
+            ],
+            'supports'          => [
+                'align' => false,
+            ],
+        ]);
+    }
+
+    public function render($block)
+    {
+        $CssClasses = new Utilities\CssClasses;
+        $Colour     = new Utilities\Colour;
+        $CloneGroup = new ACF\CloneGroup;
+
+        $data = [];
+
+        $fields = [
+            'heading',
+            'blurb',
+        ];
+
+        $fields = array_merge($fields, $CloneGroup->background());
+
+        foreach($fields as $field):
+            $data[$field] = get_field($field);
+        endforeach;
+
+        unset($block['data']);
+        $block['name'] = str_replace('acf/', '', $block['name']);
+
+        $data = array_merge($data, $block);
+        $data['section_classes'] = $CssClasses->section($data);
+        $data['block'] = $block;
+
+        $data['knockout'] = ($Colour->is_dark($data['bg_colour'], $data['bg_tint'], $data['contrast'])) ? null : 'knockout';
+
+        echo \Roots\view('blocks.bad-example', [
+            'data' => $data,
+            'block' => $block,
+        ])->render();
+    }
+}

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,168 @@
+<?php
+
+namespace App\Utilities;
+
+class Colour
+{
+    public function name2hex($colour = null, $tint = null)
+    {
+        if(!$colour) return false;
+
+        if($colour == 'black'):
+            $hex = '#000000';
+        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()
+    {
+        $colours = get_field('badegg_colours', 'option');
+
+        $values = [];
+
+        if($colours):
+            foreach($colours as $index => $props):
+                $index = $index + 1;
+                $hex = @$props['hex'];
+
+                if($hex) $values[$this->latinate($index)] = $hex;
+            endforeach;
+        endif;
+
+        $values['0'] = '#FFFFFF';
+        $values['black'] = '#000000';
+
+        return $values;
+    }
+
+    public function tints()
+    {
+      return [
+        'lightest'  =>  100,
+        'lighter'   =>  66,
+        'light'     =>  33,
+        '0'         =>   0,
+        'dark'      => -33,
+        'darker'    => -66,
+        'darkest'   => -100,
+      ];
+    }
+
+    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,105 @@
+<?php
+
+namespace App\Utilities;
+
+class CssClasses {
+    public function section($props = [])
+    {
+        $Colour = new Colour;
+        $hex = $Colour->name2hex(@$props['bg_colour'], @$props['bg_tint']);
+
+        $pattern = @$props['pattern'];
+        $pattern_top = @$props['pattern_top'];
+        $pattern_bottom = @$props['pattern_bottom'];
+
+        $classes = [
+            'section',
+            'section-' . str_replace('acf/', '', $props['name']),
+            'bg-' . $this->colourTint([
+                'colour' => @$props['bg_colour'],
+                'tint' => @$props['bg_tint'],
+            ]),
+        ];
+
+        if($Colour->is_dark($hex) && $this->is_knockout_block($props['name']))
+            $classes[] = 'knockout';
+
+        if(@$props['padding_top'])
+            $classes[] = 'section-zero-top';
+
+        if(@$props['padding_bottom'])
+            $classes[] = 'section-zero-bottom';
+
+        if($pattern):
+            if($pattern == 'both'):
+                $classes[] =  'pattern-top';
+                $classes[] =  'pattern-bottom';
+
+            else:
+                $classes[] = 'pattern-' . $pattern;
+
+            endif;
+
+            if(in_array($pattern, ['top', 'both']))
+                $classes[] = 'pattern-top-' . $this->colourTint($pattern_top);
+
+            if(in_array($pattern, ['bottom', 'both']))
+                $classes[] = 'pattern-bottom-' . $this->colourTint($pattern_bottom);
+
+        endif;
+
+        if(@$props['bg_image'])
+            $classes[] = "bg-watermarked";
+
+        if(@$props['className']) $args = array_merge($classes, explode(' ', $props['className']));
+
+        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 = [
+            'bad-example',
+        ];
+
+        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/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,23 @@ 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(),
+            'company_legal' => get_field('badegg_company_legal', 'option'),
+            'company_tel' => get_field('badegg_company_tel', 'option'),
+            'company_email' => get_field('badegg_company_email', 'option'),
+        ];
+    }
 }

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/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,20 @@ 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;
+
+}
+
+$image_srcset = new Utilities\ImageSrcset;
+$image_srcset->add(['name' => 'hero', 'width' => 1920, 'height' => 1000]);
+add_image_size('lazy', 50, 50);

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,34 @@ 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');
+autoload_psr4('Blocks');
+autoload_psr4('Ajax');
 
 /*
 |--------------------------------------------------------------------------

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,9 @@
     "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",
+    "laravel-vite-plugin": "^1.2.0",
+    "sass": "^1.93.2",
+    "vite": "^6.2.0"
+  }
 }

resources/acf/group_block_bad_example.json

@@ -0,0 +1,144 @@
+{
+    "key": "group_block_bad_example",
+    "title": "Block: Bad Example",
+    "fields": [
+        {
+            "key": "field_676599038e31d",
+            "label": "",
+            "name": "",
+            "aria-label": "",
+            "type": "message",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "message": "<h3><span class=\"dashicons dashicons-dismiss\"><\/span> Bad Example<\/h3>",
+            "new_lines": "wpautop",
+            "esc_html": 0
+        },
+        {
+            "key": "field_67659accdc794",
+            "label": "Content",
+            "name": "",
+            "aria-label": "",
+            "type": "tab",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "placement": "top",
+            "endpoint": 0
+        },
+        {
+            "key": "field_67659ad8dc795",
+            "label": "Example",
+            "name": "",
+            "aria-label": "",
+            "type": "message",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "message": "Place your block-specific custom fields here.",
+            "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-bad-example"
+            }
+        ]
+    ],
+    "menu_order": 0,
+    "position": "normal",
+    "style": "default",
+    "label_placement": "top",
+    "instruction_placement": "label",
+    "hide_on_screen": "",
+    "active": true,
+    "description": "",
+    "show_in_rest": 0,
+    "modified": 1734712286
+}

resources/acf/group_block_footer.json

@@ -0,0 +1,109 @@
+{
+    "key": "group_block_footer",
+    "title": "Clone: Block Footer",
+    "fields": [
+        {
+            "key": "field_67659b49a6db2",
+            "label": "Footer",
+            "name": "",
+            "aria-label": "",
+            "type": "tab",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "placement": "top",
+            "endpoint": 0
+        },
+        {
+            "key": "field_67659b49a754a",
+            "label": "Blurb",
+            "name": "blurb_footer",
+            "aria-label": "",
+            "type": "textarea",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "default_value": "",
+            "maxlength": "",
+            "rows": 3,
+            "placeholder": "",
+            "new_lines": ""
+        },
+        {
+            "key": "field_67659b7502137",
+            "label": "Links",
+            "name": "links",
+            "aria-label": "",
+            "type": "repeater",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "layout": "table",
+            "pagination": 0,
+            "min": 0,
+            "max": 2,
+            "collapsed": "",
+            "button_label": "Add Button",
+            "rows_per_page": 20,
+            "sub_fields": [
+                {
+                    "key": "field_67659b8702138",
+                    "label": "Button",
+                    "name": "button",
+                    "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_67659b7502137"
+                }
+            ]
+        }
+    ],
+    "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": 1734712326
+}

resources/acf/group_block_intro.json

@@ -0,0 +1,82 @@
+{
+    "key": "group_block_intro",
+    "title": "Clone: Block Intro",
+    "fields": [
+        {
+            "key": "field_67659970db415",
+            "label": "Introduction",
+            "name": "",
+            "aria-label": "",
+            "type": "tab",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "placement": "top",
+            "endpoint": 0
+        },
+        {
+            "key": "field_676599964d3cc",
+            "label": "Heading",
+            "name": "heading",
+            "aria-label": "",
+            "type": "text",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "default_value": "",
+            "maxlength": "",
+            "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": ""
+        }
+    ],
+    "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": 1734711913
+}

resources/acf/group_clone_background_settings.json

@@ -0,0 +1,547 @@
+{
+    "key": "group_clone_background_settings",
+    "title": "Clone: Background Settings",
+    "fields": [
+        {
+            "key": "field_672d3ba78bc40",
+            "label": "Background Type",
+            "name": "bg_type",
+            "aria-label": "",
+            "type": "select",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "20",
+                "class": "",
+                "id": ""
+            },
+            "choices": {
+                "0": "Solid Colour",
+                "image": "Still Photo",
+                "video": "Looping Video"
+            },
+            "default_value": 0,
+            "return_format": "value",
+            "multiple": 0,
+            "allow_null": 0,
+            "ui": 0,
+            "ajax": 0,
+            "placeholder": ""
+        },
+        {
+            "key": "field_67325dd23234e",
+            "label": "Background Colour",
+            "name": "bg_colour",
+            "aria-label": "",
+            "type": "select",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "20",
+                "class": "",
+                "id": ""
+            },
+            "choices": {
+                "primary": "<i class=\"fas fa-circle\" style=\"color: #7A74A6\"><\/i> Kimberly",
+                "secondary": "<i class=\"fas fa-circle\" style=\"color: #9C729E\"><\/i> Trendy Pink",
+                "tertiary": "<i class=\"fas fa-circle\" style=\"color: #B8728B\"><\/i> Turkish Rose",
+                "quaternary": "<i class=\"fas fa-circle\" style=\"color: #5875A0\"><\/i> Waikawa Gray",
+                "quinary": "<i class=\"fas fa-circle\" style=\"color: #4298B7\"><\/i> Boston Blue",
+                "black": "<i class=\"fas fa-circle\" style=\"color: #000000\"><\/i> Black",
+                "0": "<i class=\"fas fa-circle\" style=\"color: #FFFFFF\"><\/i> White"
+            },
+            "default_value": 0,
+            "return_format": "value",
+            "multiple": 0,
+            "allow_null": 0,
+            "ui": 1,
+            "ajax": 0,
+            "placeholder": ""
+        },
+        {
+            "key": "field_67325e213234f",
+            "label": "Background Tint",
+            "name": "bg_tint",
+            "aria-label": "",
+            "type": "select",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "20",
+                "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,
+            "ui": 1,
+            "ajax": 0,
+            "placeholder": ""
+        },
+        {
+            "key": "field_67350f526abf1",
+            "label": "Text Contrast",
+            "name": "contrast",
+            "aria-label": "",
+            "type": "select",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "20",
+                "class": "",
+                "id": ""
+            },
+            "choices": {
+                "0": "Auto",
+                "dark": "Force dark text",
+                "light": "Force light text"
+            },
+            "default_value": 0,
+            "return_format": "value",
+            "multiple": 0,
+            "allow_null": 0,
+            "ui": 0,
+            "ajax": 0,
+            "placeholder": ""
+        },
+        {
+            "key": "field_67325e3432350",
+            "label": "Opacity",
+            "name": "bg_opacity",
+            "aria-label": "",
+            "type": "range",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": [
+                [
+                    {
+                        "field": "field_672d3ba78bc40",
+                        "operator": "!=",
+                        "value": "0"
+                    }
+                ]
+            ],
+            "wrapper": {
+                "width": "20",
+                "class": "",
+                "id": ""
+            },
+            "default_value": 30,
+            "min": 5,
+            "max": 100,
+            "step": 5,
+            "prepend": "",
+            "append": "%"
+        },
+        {
+            "key": "field_6734b234f9c47",
+            "label": "Pattern Edge",
+            "name": "pattern",
+            "aria-label": "",
+            "type": "select",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "20",
+                "class": "",
+                "id": ""
+            },
+            "choices": {
+                "0": "Disabled",
+                "top": "Top",
+                "bottom": "Bottom",
+                "both": "Both"
+            },
+            "default_value": 0,
+            "return_format": "value",
+            "multiple": 0,
+            "allow_null": 0,
+            "ui": 0,
+            "ajax": 0,
+            "placeholder": ""
+        },
+        {
+            "key": "field_6734b2daf9c4b",
+            "label": "Top Pattern",
+            "name": "pattern_top",
+            "aria-label": "",
+            "type": "group",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": [
+                [
+                    {
+                        "field": "field_6734b234f9c47",
+                        "operator": "==",
+                        "value": "top"
+                    }
+                ],
+                [
+                    {
+                        "field": "field_6734b234f9c47",
+                        "operator": "==",
+                        "value": "both"
+                    }
+                ]
+            ],
+            "wrapper": {
+                "width": "40",
+                "class": "",
+                "id": ""
+            },
+            "layout": "block",
+            "sub_fields": [
+                {
+                    "key": "field_673514b45e977",
+                    "label": "Colour",
+                    "name": "colour",
+                    "aria-label": "",
+                    "type": "select",
+                    "instructions": "",
+                    "required": 0,
+                    "conditional_logic": 0,
+                    "wrapper": {
+                        "width": "50",
+                        "class": "",
+                        "id": ""
+                    },
+                    "choices": {
+                        "primary": "<i class=\"fas fa-circle\" style=\"color: #7A74A6\"><\/i> Kimberly",
+                        "secondary": "<i class=\"fas fa-circle\" style=\"color: #9C729E\"><\/i> Trendy Pink",
+                        "tertiary": "<i class=\"fas fa-circle\" style=\"color: #B8728B\"><\/i> Turkish Rose",
+                        "quaternary": "<i class=\"fas fa-circle\" style=\"color: #5875A0\"><\/i> Waikawa Gray",
+                        "quinary": "<i class=\"fas fa-circle\" style=\"color: #4298B7\"><\/i> Boston Blue",
+                        "black": "<i class=\"fas fa-circle\" style=\"color: #000000\"><\/i> Black",
+                        "0": "<i class=\"fas fa-circle\" style=\"color: #FFFFFF\"><\/i> White"
+                    },
+                    "default_value": false,
+                    "return_format": "",
+                    "multiple": 0,
+                    "allow_null": 0,
+                    "ui": 1,
+                    "ajax": 0,
+                    "placeholder": ""
+                },
+                {
+                    "key": "field_673514d85e978",
+                    "label": "Tint",
+                    "name": "tint",
+                    "aria-label": "",
+                    "type": "select",
+                    "instructions": "",
+                    "required": 0,
+                    "conditional_logic": 0,
+                    "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,
+                    "ui": 0,
+                    "ajax": 0,
+                    "placeholder": ""
+                }
+            ]
+        },
+        {
+            "key": "field_673514f15e979",
+            "label": "Bottom Pattern",
+            "name": "pattern_bottom",
+            "aria-label": "",
+            "type": "group",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "40",
+                "class": "",
+                "id": ""
+            },
+            "layout": "block",
+            "sub_fields": [
+                {
+                    "key": "field_673514f15e97a",
+                    "label": "Colour",
+                    "name": "colour",
+                    "aria-label": "",
+                    "type": "select",
+                    "instructions": "",
+                    "required": 0,
+                    "conditional_logic": 0,
+                    "wrapper": {
+                        "width": "50",
+                        "class": "",
+                        "id": ""
+                    },
+                    "choices": {
+                        "primary": "<i class=\"fas fa-circle\" style=\"color: #7A74A6\"><\/i> Kimberly",
+                        "secondary": "<i class=\"fas fa-circle\" style=\"color: #9C729E\"><\/i> Trendy Pink",
+                        "tertiary": "<i class=\"fas fa-circle\" style=\"color: #B8728B\"><\/i> Turkish Rose",
+                        "quaternary": "<i class=\"fas fa-circle\" style=\"color: #5875A0\"><\/i> Waikawa Gray",
+                        "quinary": "<i class=\"fas fa-circle\" style=\"color: #4298B7\"><\/i> Boston Blue",
+                        "black": "<i class=\"fas fa-circle\" style=\"color: #000000\"><\/i> Black",
+                        "0": "<i class=\"fas fa-circle\" style=\"color: #FFFFFF\"><\/i> White"
+                    },
+                    "default_value": false,
+                    "return_format": "value",
+                    "multiple": 0,
+                    "allow_null": 0,
+                    "ui": 1,
+                    "ajax": 0,
+                    "placeholder": ""
+                },
+                {
+                    "key": "field_673514f15e97b",
+                    "label": "Tint",
+                    "name": "tint",
+                    "aria-label": "",
+                    "type": "select",
+                    "instructions": "",
+                    "required": 0,
+                    "conditional_logic": [
+                        [
+                            {
+                                "field": "field_673514f15e97a",
+                                "operator": "!=",
+                                "value": "black"
+                            }
+                        ],
+                        [
+                            {
+                                "field": "field_673514f15e97a",
+                                "operator": "!=",
+                                "value": "0"
+                            }
+                        ]
+                    ],
+                    "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,
+                    "ui": 0,
+                    "ajax": 0,
+                    "placeholder": ""
+                }
+            ]
+        },
+        {
+            "key": "field_672d3b128bc39",
+            "label": "Background Image",
+            "name": "bg_image",
+            "aria-label": "",
+            "type": "image",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": [
+                [
+                    {
+                        "field": "field_672d3ba78bc40",
+                        "operator": "!=",
+                        "value": "0"
+                    }
+                ]
+            ],
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "return_format": "id",
+            "library": "all",
+            "min_width": "",
+            "min_height": "",
+            "min_size": "",
+            "max_width": "",
+            "max_height": "",
+            "max_size": "",
+            "mime_types": "",
+            "preview_size": "medium"
+        },
+        {
+            "key": "field_672d3b228bc3a",
+            "label": "Background Video",
+            "name": "bg_video",
+            "aria-label": "",
+            "type": "group",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": [
+                [
+                    {
+                        "field": "field_672d3ba78bc40",
+                        "operator": "==",
+                        "value": "video"
+                    }
+                ]
+            ],
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "layout": "block",
+            "sub_fields": [
+                {
+                    "key": "field_672d3b428bc3b",
+                    "label": "Extra Small",
+                    "name": "xs",
+                    "aria-label": "",
+                    "type": "file",
+                    "instructions": "",
+                    "required": 0,
+                    "conditional_logic": 0,
+                    "wrapper": {
+                        "width": "20",
+                        "class": "",
+                        "id": ""
+                    },
+                    "return_format": "array",
+                    "library": "all",
+                    "min_size": "",
+                    "max_size": "",
+                    "mime_types": "mp4"
+                },
+                {
+                    "key": "field_672d3b678bc3c",
+                    "label": "Small",
+                    "name": "sm",
+                    "aria-label": "",
+                    "type": "file",
+                    "instructions": "",
+                    "required": 0,
+                    "conditional_logic": 0,
+                    "wrapper": {
+                        "width": "20",
+                        "class": "",
+                        "id": ""
+                    },
+                    "return_format": "array",
+                    "library": "all",
+                    "min_size": "",
+                    "max_size": "",
+                    "mime_types": "mp4"
+                },
+                {
+                    "key": "field_672d3b728bc3d",
+                    "label": "Medium",
+                    "name": "md",
+                    "aria-label": "",
+                    "type": "file",
+                    "instructions": "",
+                    "required": 0,
+                    "conditional_logic": 0,
+                    "wrapper": {
+                        "width": "20",
+                        "class": "",
+                        "id": ""
+                    },
+                    "return_format": "array",
+                    "library": "all",
+                    "min_size": "",
+                    "max_size": "",
+                    "mime_types": "mp4"
+                },
+                {
+                    "key": "field_672d3b7a8bc3e",
+                    "label": "Large",
+                    "name": "lg",
+                    "aria-label": "",
+                    "type": "file",
+                    "instructions": "",
+                    "required": 0,
+                    "conditional_logic": 0,
+                    "wrapper": {
+                        "width": "20",
+                        "class": "",
+                        "id": ""
+                    },
+                    "return_format": "array",
+                    "library": "all",
+                    "min_size": "",
+                    "max_size": "",
+                    "mime_types": "mp4"
+                },
+                {
+                    "key": "field_672d3b838bc3f",
+                    "label": "Extra Large",
+                    "name": "xl",
+                    "aria-label": "",
+                    "type": "file",
+                    "instructions": "",
+                    "required": 0,
+                    "conditional_logic": 0,
+                    "wrapper": {
+                        "width": "20",
+                        "class": "",
+                        "id": ""
+                    },
+                    "return_format": "array",
+                    "library": "all",
+                    "min_size": "",
+                    "max_size": "",
+                    "mime_types": "mp4"
+                }
+            ]
+        }
+    ],
+    "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": 1733505903
+}

resources/acf/group_clone_block_settings.json

@@ -0,0 +1,132 @@
+{
+    "key": "group_clone_block_settings",
+    "title": "Clone: Block Settings",
+    "fields": [
+        {
+            "key": "field_673511c31122f",
+            "label": "Settings",
+            "name": "",
+            "aria-label": "",
+            "type": "tab",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "placement": "top",
+            "endpoint": 0
+        },
+        {
+            "key": "field_67350eb62cdf9",
+            "label": "Top Padding",
+            "name": "padding_top",
+            "aria-label": "",
+            "type": "radio",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "33.33",
+                "class": "",
+                "id": ""
+            },
+            "choices": [
+                "On",
+                "Off"
+            ],
+            "default_value": "",
+            "return_format": "value",
+            "allow_null": 0,
+            "other_choice": 0,
+            "layout": "horizontal",
+            "save_other_choice": 0
+        },
+        {
+            "key": "field_673510c1dc830",
+            "label": "Bottom Padding",
+            "name": "padding_bottom",
+            "aria-label": "",
+            "type": "radio",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "33.33",
+                "class": "",
+                "id": ""
+            },
+            "choices": [
+                "On",
+                "Off"
+            ],
+            "default_value": "",
+            "return_format": "value",
+            "allow_null": 0,
+            "other_choice": 0,
+            "layout": "horizontal",
+            "save_other_choice": 0
+        },
+        {
+            "key": "field_6735258c2d9ff",
+            "label": "Background",
+            "name": "",
+            "aria-label": "",
+            "type": "accordion",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "open": 0,
+            "multi_expand": 0,
+            "endpoint": 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
+        }
+    ],
+    "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": 1731536288
+}

resources/acf/group_clone_button.json

@@ -0,0 +1,118 @@
+{
+    "key": "group_clone_button",
+    "title": "Clone: Button",
+    "fields": [
+        {
+            "key": "field_672d3d7b2c273",
+            "label": "Link",
+            "name": "link",
+            "aria-label": "",
+            "type": "link",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "40",
+                "class": "",
+                "id": ""
+            },
+            "return_format": "array"
+        },
+        {
+            "key": "field_673529a2a37a1",
+            "label": "Class",
+            "name": "class",
+            "aria-label": "",
+            "type": "text",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "20",
+                "class": "",
+                "id": ""
+            },
+            "default_value": "",
+            "maxlength": "",
+            "placeholder": "",
+            "prepend": "",
+            "append": ""
+        },
+        {
+            "key": "field_672d3db22c274",
+            "label": "Colour",
+            "name": "colour",
+            "aria-label": "",
+            "type": "select",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "20",
+                "class": "",
+                "id": ""
+            },
+            "choices": {
+                "primary": "<i class=\"fas fa-circle\" style=\"color: #7A74A6\"><\/i> Kimberly",
+                "secondary": "<i class=\"fas fa-circle\" style=\"color: #9C729E\"><\/i> Trendy Pink",
+                "tertiary": "<i class=\"fas fa-circle\" style=\"color: #B8728B\"><\/i> Turkish Rose",
+                "quaternary": "<i class=\"fas fa-circle\" style=\"color: #5875A0\"><\/i> Waikawa Gray",
+                "quinary": "<i class=\"fas fa-circle\" style=\"color: #4298B7\"><\/i> Boston Blue",
+                "black": "<i class=\"fas fa-circle\" style=\"color: #000000\"><\/i> Black",
+                "0": "<i class=\"fas fa-circle\" style=\"color: #FFFFFF\"><\/i> White"
+            },
+            "default_value": 0,
+            "return_format": "value",
+            "multiple": 0,
+            "allow_null": 0,
+            "ui": 1,
+            "ajax": 0,
+            "placeholder": ""
+        },
+        {
+            "key": "field_672d3dc52c275",
+            "label": "Style",
+            "name": "style",
+            "aria-label": "",
+            "type": "select",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "20",
+                "class": "",
+                "id": ""
+            },
+            "choices": {
+                "0": "Solid",
+                "outline": "Outline"
+            },
+            "default_value": 0,
+            "return_format": "value",
+            "multiple": 0,
+            "allow_null": 0,
+            "ui": 0,
+            "ajax": 0,
+            "placeholder": ""
+        }
+    ],
+    "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": 1731537485
+}

resources/acf/group_options_global_settings.json

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

resources/acf/group_post_social.json

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

resources/css/app.scss

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

resources/css/components/_button.scss

@@ -0,0 +1,111 @@
+@use "../global/fonts";
+@use "../global/variables/colours";
+
+button {
+  &%block,
+  &.block {
+    background-color: transparent;
+    border: none;
+    font-size: 1em;
+    padding: 0;
+  }
+}
+
+button,
+input[type="submit"] {
+  &.button {
+    appearance: none;
+  }
+}
+
+%button,
+.button {
+  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; }
+}
+
+.button-wrap {
+  margin: 1.5em -0.25em -0.25em;
+
+  .button {
+    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,290 @@
+@use "../global/fonts";
+@use "../global/variables/breakpoints";
+@use "../global/variables/colours";
+
+textarea {
+  min-height: 10.375em;
+}
+
+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/global/_fonts.scss

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

resources/css/global/_framework.scss

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

resources/css/global/_mixins.scss

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

resources/css/global/_typography.scss

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

resources/css/global/_variables.scss

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

resources/css/global/framework/_breakpoints.scss

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

resources/css/global/framework/_colours.scss

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

resources/css/global/framework/_normalise.scss

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

resources/css/global/framework/_spacing.scss

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

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

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

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

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

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

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

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

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

resources/css/global/variables/_breakpoints.scss

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

resources/css/global/variables/_colours.scss

@@ -0,0 +1,105 @@
+@use "sass:color";
+
+//== Status
+$success: #39b54a;
+$error: #be1e2d;
+$alert: #eed202;
+
+//== Brand Colours
+$primary: #337ab7;
+$secondary: #5bc0de;
+$tertiary: color.invert($primary);
+$quaternary: color.invert($secondary);
+
+//== Primary Tints
+$primary-darkest: color.adjust($primary, $lightness: -30%);
+$primary-darker: color.adjust($primary, $lightness: -20%);
+$primary-dark: color.adjust($primary, $lightness: -10%);
+$primary-light: color.adjust($primary, $lightness: 10%);
+$primary-lighter: color.adjust($primary, $lightness: 20%);
+$primary-lightest: color.adjust($primary, $lightness: 30%);
+
+//== Secondary Tints
+$secondary-darkest: color.adjust($secondary, $lightness: -30%);
+$secondary-darker: color.adjust($secondary, $lightness: -20%);
+$secondary-dark: color.adjust($secondary, $lightness: -10%);
+$secondary-light: color.adjust($secondary, $lightness: 10%);
+$secondary-lighter: color.adjust($secondary, $lightness: 20%);
+$secondary-lightest: color.adjust($secondary, $lightness: 30%);
+
+//== Tertiary Tints
+$tertiary-darkest: color.adjust($tertiary, $lightness: -30%);
+$tertiary-darker: color.adjust($tertiary, $lightness: -20%);
+$tertiary-dark: color.adjust($tertiary, $lightness: -10%);
+$tertiary-light: color.adjust($tertiary, $lightness: 10%);
+$tertiary-lighter: color.adjust($tertiary, $lightness: 20%);
+$tertiary-lightest: color.adjust($tertiary, $lightness: 30%);
+
+//== quaternary Tints
+$quaternary-darkest: color.adjust($quaternary, $lightness: -30%);
+$quaternary-darker: color.adjust($quaternary, $lightness: -20%);
+$quaternary-dark: color.adjust($quaternary, $lightness: -10%);
+$quaternary-light: color.adjust($quaternary, $lightness: 10%);
+$quaternary-lighter: color.adjust($quaternary, $lightness: 20%);
+$quaternary-lightest: color.adjust($quaternary, $lightness: 30%);
+
+//== Shades
+$white:               white;
+$grey-lightest:       color.adjust(black, $lightness: 95%);
+$grey-lighter:        color.adjust(black, $lightness: 80%);
+$grey-light:          color.adjust(black, $lightness: 70%);
+$grey:                color.adjust(black, $lightness: 50%);
+$grey-dark:           color.adjust(black, $lightness: 40%);
+$grey-darker:         color.adjust(black, $lightness: 20%);
+$grey-darkest:        color.adjust(black, $lightness: 05%);
+$black:               black;
+
+//## Colour Array (used in generating colour classes).
+$colors: (
+  // shades
+  "black":     $black,
+  "grey-darkest": $grey-darkest,
+  "grey-darker": $grey-darker,
+  "grey-dark": $grey-dark,
+  "grey-light": $grey-light,
+  "grey-lighter": $grey-lighter,
+  "grey-lightest": $grey-lightest,
+  "white":     $white,
+  // status
+  "error":      $error,
+  "success":    $success,
+  "alert":      $alert,
+  // brand
+  "primary":    $primary,
+  "secondary":  $secondary,
+  "tertiary":   $tertiary,
+  "quaternary":   $quaternary,
+  // primary tints
+  "primary-darkest":  $primary-darkest,
+  "primary-darker":   $primary-darker,
+  "primary-dark":     $primary-dark,
+  "primary-light":    $primary-light,
+  "primary-lighter":  $primary-lighter,
+  "primary-lightest": $primary-lightest,
+  // secondary tints
+  "secondary-darkest":  $secondary-darkest,
+  "secondary-darker":   $secondary-darker,
+  "secondary-dark":     $secondary-dark,
+  "secondary-light":    $secondary-light,
+  "secondary-lighter":  $secondary-lighter,
+  "secondary-lightest": $secondary-lightest,
+  // tertiary tints
+  "tertiary-darkest":  $tertiary-darkest,
+  "tertiary-darker":   $tertiary-darker,
+  "tertiary-dark":     $tertiary-dark,
+  "tertiary-light":    $tertiary-light,
+  "tertiary-lighter":  $tertiary-lighter,
+  "tertiary-lightest": $tertiary-lightest,
+  // quaternary tints
+  "quaternary-darkest":  $quaternary-darkest,
+  "quaternary-darker":   $quaternary-darker,
+  "quaternary-dark":     $quaternary-dark,
+  "quaternary-light":    $quaternary-light,
+  "quaternary-lighter":  $quaternary-lighter,
+  "quaternary-lightest": $quaternary-lightest,
+);

resources/css/global/variables/_spacing.scss

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

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

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

resources/css/plugins/_mce.scss

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

resources/js/app.js

@@ -0,0 +1,18 @@
+import.meta.glob([
+  '../images/**',
+  '../fonts/**',
+]);
+
+import domReady from '@wordpress/dom-ready';
+import blocks from './blocks.js';
+import Header from './sections/header.js';
+import LazyLoad from './lib/Lazy.js';
+
+/**
+ * Application entrypoint
+ */
+domReady(async () => {
+  LazyLoad();
+  blocks();
+  Header();
+});

resources/js/blocks.js

@@ -0,0 +1,6 @@
+import BadExample from "./blocks/BadExample";
+
+export default function()
+{
+  BadExample();
+}

resources/js/blocks/BadExample.js

@@ -0,0 +1,4 @@
+export default function BadExample()
+{
+
+}

resources/js/editor.js

@@ -0,0 +1,5 @@
+import domReady from '@wordpress/dom-ready';
+
+domReady(() => {
+  //
+});

resources/js/lib/Lazy.js

@@ -0,0 +1,33 @@
+export default function LazyLoadInit()
+{
+  document.addEventListener('DOMContentLoaded', LazyLoad());
+}
+
+function LazyLoad() {
+
+  var lazyImages = [].slice.call(document.querySelectorAll('img.lazy'));
+
+  if ('IntersectionObserver' in window) {
+    let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
+      entries.forEach(function(entry) {
+        if (entry.isIntersecting) {
+          let lazyImage = entry.target;
+          lazyImage.src = lazyImage.dataset.src;
+
+          if(lazyImage.dataset.srcset) {
+            lazyImage.srcset = lazyImage.dataset.srcset;
+          }
+
+          lazyImage.classList.remove('lazy');
+          lazyImageObserver.unobserve(lazyImage);
+        }
+      });
+    });
+
+    lazyImages.forEach(function(lazyImage) {
+      lazyImageObserver.observe(lazyImage);
+    });
+  } else {
+    // Possibly fall back to a more compatible method here
+  }
+}

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/js/sections/header.js

@@ -0,0 +1,33 @@
+export default function Header() {
+  const body = document.querySelector("body");
+  // const menuToggle = document.querySelector(".js-menu-toggle");
+  // const menuClose = document.querySelector(".js-menu-close");
+
+  // menuToggle.addEventListener("click", (e) => {
+  //   e.preventDefault();
+  //   body.classList.toggle("menu-open");
+  // });
+
+  // menuClose.addEventListener("click", (e) => {
+  //   e.preventDefault();
+  //   body.classList.remove("menu-open");
+  // });
+
+  // document.addEventListener("keyup", function (event) {
+  //   if (event.key === "Escape") {
+  //     body.classList.remove("menu-open");
+  //   }
+  // });
+
+  document.addEventListener("scroll", () => {
+    const scrolled = document.scrollingElement.scrollTop;
+    const position = body.offsetTop;
+    const header = document.querySelector(".site-header");
+
+    if (scrolled > position + header.offsetHeight) {
+      body.classList.add("scrolled");
+    } else {
+      body.classList.remove("scrolled");
+    }
+  });
+}

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/components/image.blade.php

@@ -0,0 +1,15 @@
+@php($image = wp_get_attachment_image_src(@$id, 'medium'))
+
+<img
+  @if(@$lazy)
+    src="{{ wp_get_attachment_image_src($id, 'lazy')[0] }}"
+    data-src="{{ $image[0] }}"
+    class="lazy"
+  @else
+    src="{{ $image[0] }}"
+  @endif
+
+  alt="{{ get_post_meta( $id, '_wp_attachment_image_alt', true ) }}"
+  width="{{ $image[1] }}"
+  height="{{ $image[2] }}"
+/>

resources/views/components/socials.blade.php

@@ -0,0 +1,12 @@
+<ul class="socials nolist">
+  @foreach($socials as $social)
+    <li>
+      <a
+        class="fa-brands fa-{{ get_field('fontawesome_brands', $social) }}"
+        href="{{ get_field('url', $social) }}"
+        rel="noopener nofollow noreferrer"
+        target="_blank"
+      ><span class="visually-hidden">{{ get_the_title($social) }}</span></a>
+    </li>
+  @endforeach
+</ul>

resources/views/layouts/app.blade.php

@@ -5,6 +5,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     @php(do_action('get_header'))
     @php(wp_head())
+
+    @vite(['resources/css/app.scss', 'resources/js/app.js'])
   </head>
 
   <body @php(body_class())>

resources/views/layouts/block.blade.php

@@ -0,0 +1,34 @@
+<section id="{{ $block['id'] }}" class="{{ implode(' ', $data['section_classes']) }} {{ @$block['className'] }}">
+  @if(@$data['heading'] || @$data['blurb'])
+    <div class="section-intro container container-narrow align-centre wysiwyg bg-watermarked-content {{ @$data['knockout'] }}">
+      <h2>{{ @$data['heading'] }}</h2>
+      @include('components.divider')
+      <p>{{ @$data['blurb'] }}</p>
+    </div>
+  @endif
+
+  <div class="section container container-large block-content bg-watermarked-content">
+    @yield('block-content')
+  </div>
+
+  @if(@$data['links'])
+    <div class="section-footer container container-narrow align-centre wysiwyg bg-watermarked-content {{ @$data['knockout'] }}">
+      <div class="button-wrap">
+        @foreach($data['links'] as $link)
+          @include('components.button', $link)
+        @endforeach
+      </div>
+    </div>
+  @endif
+
+  @if(@$data['bg_image'])
+    <div class="bg-watermarked-image" style="opacity: {!! (@$data['bg_opacity'] ?: 30) * 0.01 !!}">
+      {!! $ImageSrcset->render([
+        'image' => $data['bg_image'],
+        'name' => 'hero',
+        'lazy' => true,
+      ]) !!}
+    </div>
+  @endif
+
+</section>

resources/views/partials/comments.blade.php

@@ -1,6 +1,6 @@
 @if (! post_password_required())
   <section id="comments" class="comments">
-    @if ($responses)
+    @if ($responses())
       <h2>
         {!! $title !!}
       </h2>
@@ -9,16 +9,16 @@
         {!! $responses !!}
       </ol>
 
-      @if ($paginated)
+      @if ($paginated())
         <nav aria-label="Comment">
           <ul class="pager">
-            @if ($previous)
+            @if ($previous())
               <li class="previous">
                 {!! $previous !!}
               </li>
             @endif
 
-            @if ($next)
+            @if ($next())
               <li class="next">
                 {!! $next !!}
               </li>
@@ -28,7 +28,7 @@
       @endif
     @endif
 
-    @if ($closed)
+    @if ($closed())
       <x-alert type="warning">
         {!! __('Comments are closed.', 'sage') !!}
       </x-alert>

resources/views/partials/content-page.blade.php

@@ -1,6 +1,6 @@
 @php(the_content())
 
-@if ($pagination)
+@if ($pagination())
   <nav class="page-nav" aria-label="Page">
     {!! $pagination !!}
   </nav>

resources/views/partials/content-single.blade.php

@@ -11,7 +11,7 @@
     @php(the_content())
   </div>
 
-  @if ($pagination)
+  @if ($pagination())
     <footer>
       <nav class="page-nav" aria-label="Page">
         {!! $pagination !!}