add head injection

This commit is contained in:
HRG @ SCExC 2024-06-08 15:30:28 -04:00
parent d2ad994716
commit 897dd38151
3 changed files with 38 additions and 24 deletions

View file

@ -231,7 +231,7 @@ function updateDb(db, appDb) {
} }
function updateStruct(db, struct) { function updateStruct(db, struct) {
const fields = ["name", "route_prefix"]; const fields = ["name", "route_prefix", "head_injection"];
console.log(struct, fields); console.log(struct, fields);
const values = fields.map((field) => struct[field]); const values = fields.map((field) => struct[field]);
const placeholders = fields.map((field) => `${field} = ?`).join(", "); const placeholders = fields.map((field) => `${field} = ?`).join(", ");
@ -436,7 +436,7 @@ function cloneStructure(
const toClone = new Set(cloneDbs); const toClone = new Set(cloneDbs);
const toAlias = new Set(); const toAlias = new Set();
console.log(toClone, dbIds) console.log(toClone, dbIds);
for (let { db_id } of dbIds) { for (let { db_id } of dbIds) {
if (!toClone.has(db_id.toString())) { if (!toClone.has(db_id.toString())) {
@ -503,23 +503,27 @@ function bootstrapTemplateWithHTMXetc(
blissRoute, blissRoute,
blissClone, blissClone,
blissCopy, blissCopy,
wrapHTML headInjection,
htmxRequest=false
) { ) {
if (htmlString.startsWith("<html>") || wrapHTML) { if (htmlString.toLowerCase().startsWith("<html>") || htmlString.toLowerCase().startsWith("<!doctype") || !htmxRequest) {
console.log("grow")
const $ = cheerio.load(htmlString); const $ = cheerio.load(htmlString);
let head = $("head"); let head = $("head");
// If <head> does not exist, prepend it to <html>
if (head.length === 0) { if (head.length === 0) {
$("html").prepend("<head></head>"); $("html").prepend("<head></head>");
head = $("head"); head = $("head");
} }
head.attr("id", "head")
head.append(` head.append(`
<script src="/js/hyperscript.js"></script> <script src="/js/hyperscript.js"></script>
<script src="/js/tailwind.js"></script> <script src="/js/tailwind.js"></script>
<script src="/js/htmx.js"></script> <script src="/js/htmx.js"></script>
<script src="/js/bliss_inspector.js"></script> <script src="/js/bliss_inspector.js"></script>
${headInjection || ""}
`); `);
if (blissRoute) { if (blissRoute) {
@ -529,12 +533,17 @@ function bootstrapTemplateWithHTMXetc(
} }
htmlString = $.html(); htmlString = $.html();
} else if (blissRoute) { console.log(htmlString)
} else if (htmxRequest && blissRoute) {
const $ = cheerio.load(htmlString, null, false); const $ = cheerio.load(htmlString, null, false);
$.root().children().attr("data-bliss-route", blissRoute); $.root().children().attr("data-bliss-route", blissRoute);
$.root().children().attr("data-bliss-clone", blissClone); $.root().children().attr("data-bliss-clone", blissClone);
if (blissCopy) $.root().children().attr("data-bliss-copy", blissCopy); if (blissCopy) $.root().children().attr("data-bliss-copy", blissCopy);
htmlString = $.html(); htmlString = $.html()
if (htmxRequest) {
htmlString += `<div id="head" hx-oob-swap="before_end">${headInjection}</div>`;
}
} }
return htmlString; return htmlString;
@ -765,7 +774,8 @@ app.get("/workshop/:structure_id/template/:template_id/preview", (req, res) => {
null, null,
null, null,
null, null,
true struct.head_injection,
false
) )
); );
}); });
@ -863,9 +873,14 @@ app.get("/workshop/:structure_id/settings", (req, res) => {
}); });
app.put("/workshop/:structure_id/settings", (req, res) => { app.put("/workshop/:structure_id/settings", (req, res) => {
console.log(req.body)
let structId = req.params.structure_id; let structId = req.params.structure_id;
let struct = getStructure(db, structId); let struct = getStructure(db, structId);
updateStruct(db, { ...struct, route_prefix: req.body.route_prefix }); updateStruct(db, {
...struct,
route_prefix: req.body.route_prefix,
head_injection: req.body.head_injection,
});
struct = getStructure(db, structId); struct = getStructure(db, structId);
res.send("success!"); res.send("success!");
@ -942,7 +957,9 @@ app.all("*", (req, res) => {
.get(routeMatch.id); .get(routeMatch.id);
let dbs = getDbsForStructure(db, route.structure_id); let dbs = getDbsForStructure(db, route.structure_id);
let __urlPrefix = getStructure(db, route.structure_id).route_prefix; const structure = getStructure(db, route.structure_id);
const __urlPrefix = structure.route_prefix
console.log(structure)
const allDbInstances = {}; const allDbInstances = {};
@ -950,6 +967,7 @@ app.all("*", (req, res) => {
let context = vm.createContext({ let context = vm.createContext({
req, req,
res, res,
eta,
getDb: function (alias) { getDb: function (alias) {
return allDbInstances[alias]; return allDbInstances[alias];
}, },
@ -967,30 +985,20 @@ app.all("*", (req, res) => {
context.module.exports = null; context.module.exports = null;
} }
res.rawSend = res.send;
res.send = (...args) => {
res.rawSend(
bootstrapTemplateWithHTMXetc(
args[0],
`/workshop/${route.structure_id}/route/${route.id}`,
`/workshop/${route.structure_id}/clone_modal/`,
verb == "GET" ? embedHTML(req.originalUrl) : null
)
);
};
res.render = (template, context) => { res.render = (template, context) => {
context = context || {}; context = context || {};
context.route = function (url) { context.route = function (url) {
return __urlPrefix ? path.join(__urlPrefix, url) : url; return __urlPrefix ? path.join(__urlPrefix, url) : url;
}; };
const eta = getTemplater(route.structure_id); const eta = getTemplater(route.structure_id);
console.log(route.method, "\n\n\n"); res.send(
res.rawSend(
bootstrapTemplateWithHTMXetc( bootstrapTemplateWithHTMXetc(
eta.render(template, context), eta.render(template, context),
`/workshop/${route.structure_id}/route/${route.id}`, `/workshop/${route.structure_id}/route/${route.id}`,
`/workshop/${route.structure_id}/clone_modal/`, `/workshop/${route.structure_id}/clone_modal/`,
verb == "GET" ? embedHTML(req.originalUrl) : null verb == "GET" ? embedHTML(req.originalUrl) : null,
structure.head_injection,
req.headers["hx-request"]
) )
); );
}; };

View file

@ -12,6 +12,7 @@ CREATE TABLE structures (
name TEXT NOT NULL, name TEXT NOT NULL,
user_id INTEGER, user_id INTEGER,
route_prefix TEXT, route_prefix TEXT,
head_injection TEXT,
cloned_from INTEGER, cloned_from INTEGER,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP, created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP, updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,

View file

@ -22,6 +22,11 @@
<label for="name">Route Prefix</label> <label for="name">Route Prefix</label>
<input name="route_prefix" value="<%= it.structure.route_prefix || "" %>"> <input name="route_prefix" value="<%= it.structure.route_prefix || "" %>">
</div> </div>
<div class="field-row-stacked">
<label for="name"><div>&lt;head&gt;</div><div></div></label>
<div class="text-xs"></div>
<textarea name="head_injection" value="<%= it.structure.route_prefix || "" %>"><%= it.structure.head_injection || "" %></textarea>
</div>
<button id="save-btn" type="submit">Save</button> <button id="save-btn" type="submit">Save</button>
<div id="result"></div> <div id="result"></div>
</form> </form>