scittle

john 2023-08-27T13:17:46.099949Z

I ended up needing to add some custom components to Squarespace. Thought, "why not use sci?" And boom, super easy. Just add the tags to the header script and then you can start calling it directly in the html custom components. Then you can use Squarespace's WYSIWYG editor to move the component around and resize it, etc

💡 3
🆒 6
🎉 7
john 2023-08-27T13:19:52.097399Z

You just have to put the code between script tags like usual:

john 2023-08-27T13:21:32.746859Z

You can have some components depend on code in other components in the same page, but if you do then you have to arrange the components in the page in dependency order. What I've been doing is adding all common code between components to custom code in the Title of the page, so it loads before everything else, and then I can rearrange components wherever I want

john 2023-08-27T13:23:59.948159Z

For the head section, you just go into Squarespace at Settings > Developer Tools > Code Injection. And then in the header section just add whatever you need:

john 2023-08-27T13:26:56.658419Z

Also, I'm using local-storage hooks with reframe to store the app-db to disk, so the component state is resilient to page reloads and navigation away and back. Seems like a very lightweight solution (from a devops perspective) for shipping client-side functionality quickly

john 2023-08-27T13:36:18.401669Z

I also recommend adding this to the custom CSS for the website in Developer Tools:

.sqs-edit-mode-active .code-block .sqs-blockStatus, .sqs-edit-mode-active .code-block .removed-script {
  display: none !important;
}
That will remove a warning text block (about custom omponents) that ends up stopping you from making custom components smaller than the warning block itself