fix: 🐛 Load Truss components from an external CDN

Truss components were breaking because of a Webpack configuration issue. While the exact issue isn't clear, there is a lot webpack in the modern WordPress front end. Rather than load Truss components using webpack, we'll load them externally from unpkg until a better solution emerges, if there is one.

Author: knice

functions.php

@@ -66,10 +66,6 @@ function ucsc_favicons() { ?>
 	<link rel="apple-touch-icon" href="<?php echo esc_url( get_stylesheet_directory_uri() ); ?>/images/favicons/apple-icon.png">
 	<link rel="manifest" href="<?php echo esc_url( get_stylesheet_directory_uri() ); ?>/images/favicons/manifest.webmanifest">
 
-	<!-- Script and style to include our components library, Truss.  -->
-	<script type="module" src="<?php echo esc_url( get_template_directory_uri() ); ?>/build/truss.js"></script>
-	<link rel="stylesheet" href="<?php echo esc_url( get_template_directory_uri() ); ?>/build/truss.css">
-
 	<?php
 }
 add_action( 'wp_head', 'ucsc_favicons' );
@@ -349,3 +345,13 @@ function ucsc_add_custom_body_close_code() {
 }
 
 
+add_action( 'wp_footer', 'ucsc_truss_assets' );
+
+function ucsc_truss_assets() { ?>
+
+<!-- Script and style to include our components library, Truss.  -->
+<script type="module" src="https://unpkg.com/@ucsantacruz/truss@latest/dist/ucsc-trss/ucsc-trss.esm.js"></script>
+<link rel="stylesheet" href="https://unpkg.com/@ucsantacruz/truss@latest/dist/ucsc-trss/ucsc-trss.css">
+
+<?php
+}

package-lock.json

@@ -59,8 +59,5 @@
 		"style.css",
 		"patterns",
 		"*.php"
-	],
-	"dependencies": {
-		"@ucsantacruz/truss": "^0.7.5"
-	}
+	]
 }

package.json

@@ -27,5 +27,4 @@
 //===============================
 @import "theme-regions/footer";
 @import "theme-regions/site-header";
-@import "theme-regions/ucsc-footer";
 @import "theme-regions/site-footer";

src/scss/style.scss

@@ -2,19 +2,19 @@
  * External Dependencies
  */
 const path = require('path');
-const CopyPlugin = require('copy-webpack-plugin');
 /**
  * WordPress Dependencies
  */
 const defaultConfig = require('@wordpress/scripts/config/webpack.config.js');
 
+console.log();
+
 module.exports = {
 	...defaultConfig,
 	...{
 		entry: {
 			index: path.resolve(process.cwd(), 'src', 'index.js'),
 			theme: path.resolve(process.cwd(), 'src', 'theme.js'),
-			truss: path.resolve(process.cwd(), 'src', 'truss.js'),
 		},
 	},
 };