I have a number of use-cases where the support for “unwrapped” HTML pages would be required. By “unwrapped” I mean without having BSS add any “head” and “body” elements that cannot be controlled.
One use-case is using HTMX alongside BSS: dynamically load “fragments” such as HTML form using HTMX. Unfortunately, creating an HTML page in BSS ends up having a page “wrapped” with unnecessary “head” and “body” elements inserted by BSS.
Another use-case is creating Web Components that can be dynamically loaded through HTMX or just a plain tag. Again, BSS insists in wrapping everything.
Is there a chance to have support for “unwrapped” HTML pages ?
Interesting thought yes. The reality of what that might look like though brings up many questions. First the fact that all the pages are checked for semantic HTML which clearly if you lose the <!doctype html> tag right away you have something other then semantic HTML.
This comes up when integrating Templating Languages or other code language as you will find your code suddenly changed to make it safe or entitized. Its no longer bootstrap html but bootstrap html with other code structures entitized.
That does not mean that the developers probably don’t already have this developed. If they were testing Wordpress integration they may have created just this thing. If so then it would be helpful to have html chunks without the head or js. From a templating standpoint you still may want to mod that code so I just jumped ahead and did it all after export. I mean what would you call the extensions on export ? .htmx, .htm, .html, or some other preferred CMS instructional method ? I just change that too after export using python when saving the file after opening and making whatever I want into want I want and saving file with new extension to the folder location it needs to be in.
For the purpose of the BSS Sites I could see this as a method of loading .htm files into pages using ajax etc. Again sometimes you need to go big and forget obtaining the method and go the route of already defined CMS positioned toward blogging, eccommerce, or other goals that have documentation for server side answers or headless. For BSS Sites they would have to go headless. That goes down the json rabbithole. I choose to export and use template language CMS with a mysql datatbase.
I think for your use case learning Python OS and Python Beautiful Soup Html Parser can easy handle the job at hand your asking for and open you up to much more learning and powerful solutions than adding this into BSS. Its really soup you want but just the carrots and peas.
Thanks for entertaining this discussion @twinstream . Let me clarify further my proposal.
I am suggesting we have a valid HTML document but with more control over what goes in the and elements i.e. the ability to remove bootstrap css and js. Maybe the term “unwrapped” was not the most appropriate one to explain what I had in mind.
Thank you for the suggestion! Even though I don’t think this would work for Bootstrap Studio, I appreciate that you have taken the time to share your idea. Many improvements in the app have come from people suggesting things we haven’t considered.
The main problem is that “unwrapped” pages will affect nearly every part of Bootstrap Studio’s functionality. For example on a page where Bootstrap has been removed, none of the built-in components would work, neither would the options in the sidebar. It isn’t even clear how the app is supposed to insert stylesheets or JavaScript files on these unwrapped pages, which may not have a head section or even a body, or consist of broken HTML entirely. These are just the most obvious ones, there are many more.
The app needs to lock down the head and body and limit certain types of code edits to guarantee that drag and drop and all other visual functionality works. If you need complete control over the HTML, editing the pages after exporting from the app is the only viable approach.
That gives a clearer picture of method of HTMX and using html as js module is creative.
I could picture creating the htmx files now as html pages in Bootstrap Studio and exporting those pages, open them with a automated python bsoup script, unwrap the html block, and save to the js folder in assets as .mjs files. Then turn around and import those .mjs files to use in the project and publish to BSS Sites…? or use in a self contained GPT enviornment that has its own AI structure safe gaurded without access to server capabilities. Of course remove bootstrap and slim and trim.
In the example I use mjs files as html templates because it’s a quick way just right click on a component in the overview panel and copy as html and paste it in a mjs file. The visibility for the mjs files is only on a dummy.html which is hided on export to make sure they never gets loaded as javascript.
You can also add two extensions to the htmx, the client-side-templates and the mustage. Then you can load json data and inject it into a HTML <template> with the data in curly braces. I added a button ‘List users’ to the example which load a users.json and put user cards on the html page.
The site will still be a static site with no backend server actions for that you need a backend server, if you have your own server you don’t publish to the bss hosting
Thats cool . I would like to look at this more so hopefully you can leave it up for a day or two. Question: Just where is the json data that is being loaded ? I did not see the json file or am just missing something ?
Update: I see it now in the js folder. user.json [{"id":1,"name":"Leanne Graham","username":"Bret","email":"Sincere@april.biz","address":{"street":"Kulas Light","suite":"Apt. 556","city":"Gwenborough","zipcode":"92998-3874","geo":{"lat":"-37.3159","lng":"81.1496"}},"phone":"1-770-736-8031 x56442","website":"hildegard.org","compa etc etc…
So, I solve my challenges through a number of solutions:
1- using “watchfiles” along my python uvicorn server to auto-reload my site;
2- using a websocket before my client side app and the server to help auto-reloading;
3- building a custom web component to include html page:
class IncludeHtml extends HTMLElement {
/*
Installation: ideally in <head>
Usage: <include-html name="somefile.html"></include-html>
In the included page (e.g. somefile.html):
<div include-not>This node will be excluded</div>
<script src="whatever_because_wont_be_executed.js"></script>
<script include-exec> console.log(`Executed!`); </script>
@author: jldupont
*/
connectedCallback() {
const name = this.getAttribute("name")
fetch(name).then((response) => {
console.debug(`Including: ${name}`);
return response.text()
}).then((text) => {
const parser = new DOMParser()
const doc = parser.parseFromString(text, "text/html");
const body = doc.querySelector("body")
const scripts_to_exec = this._process_scripts(body);
this._process_include_not(body);
this.after(...body.children);
this._exec_scripts(scripts_to_exec);
})
}
_process_include_not(parent) {
const to_remove = parent.querySelectorAll("[include-not]");
to_remove.forEach((node) => {
console.debug(`Removing node with id=`, node.id);
parent.removeChild(node);
})
}
_process_scripts(parent) {
let script_nodes_to_keep = [];
const script_nodes = parent.querySelectorAll("script");
script_nodes.forEach((script_node) => {
const should_keep = script_node.getAttribute("include-exec") != null;
if (should_keep)
script_nodes_to_keep.push(script_node);
parent.removeChild(script_node);
})
return script_nodes_to_keep;
}
_exec_scripts(scripts) {
scripts.forEach((script) => {
console.debug(`Executing script with id=`, script.id)
const newScript = document.createElement('script');
newScript.textContent = script.textContent;
this.after(newScript);
})
}
}
customElements.define("include-html", IncludeHtml);
So now my workflow is better (for me at least):
a) I can stay within BSS for more use-cases before exporting
b) When I export, I can quickly test things out through my locally running uvicorn server.
. I would like to look at this more so hopefully you can leave it up for a day or two. Question: Just where is the json data that is being loaded ? I did not see the json file or am just missing something ?