make page embedding and custom layouts easier and less error prone

  - The `embed` property now automatically adds the `_sqlpage_embed` parameter to the embedded page URL to render it as an embeddable fragment.
  - When an embedded page is rendered, the `shell` component is automatically replaced by a `shell-empty` component, to avoid displaying a duplicate shell and creating invalid duplicated page metadata in the response.

see #799

Author: lovasoa

CHANGELOG.md

@@ -18,6 +18,9 @@
  - In the map component, add support for map pins with a description but no title.
 - Improved error messages when a parameter of a sqlpage function is invalid. Error traces used to be truncated, and made it hard to understand the exact cause of the error in some cases. In particular, calls to `sqlpage.fetch` would display an unhelpful error message when the HTTP request definition was invalid. `sqlpage.fetch` now also throws an error if the HTTP request definition contains unknown fields.
 - Make the `headers` field of the `sqlpage.fetch` function parameter optional. It defaults to sending a User-Agent header containing the SQLPage version.
+- Make custom layout creations with the `card` component easier and less error-prone:
+  - The `embed` property now automatically adds the `_sqlpage_embed` parameter to the embedded page URL to render it as an embeddable fragment.
+  - When an embedded page is rendered, the `shell` component is automatically replaced by a `shell-empty` component, to avoid displaying a duplicate shell and creating invalid duplicated page metadata in the response.
 
 ## 0.32.1 (2025-01-03)
 

sqlpage/sqlpage.js

@@ -4,7 +4,9 @@ const nonce = document.currentScript.nonce;
 function sqlpage_card() {
   for (const c of document.querySelectorAll("[data-pre-init=card]")) {
     c.removeAttribute("data-pre-init");
-    fetch(c.dataset.embed)
+    const url = new URL(c.dataset.embed, window.location.href);
+    url.searchParams.set("_sqlpage_embed", "1");
+    fetch(url)
       .then((res) => res.text())
       .then((html) => {
         const body = c.querySelector(".card-content");

src/render.rs

@@ -653,8 +653,16 @@ impl<W: std::io::Write> HtmlRenderContext<W> {
         let shell_row = rows_iter
             .next()
             .expect("shell row should exist at this point");
+        let mut shell_component =
+            get_object_str(&shell_row, "component").expect("shell should exist");
+        if request_context.is_embedded && shell_component != FRAGMENT_SHELL_COMPONENT {
+            log::warn!(
+                "Embedded pages cannot use a shell component! Ignoring the '{shell_component}' component and its properties: {shell_row}"
+            );
+            shell_component = FRAGMENT_SHELL_COMPONENT;
+        }
         let mut shell_renderer = Self::create_renderer(
-            get_object_str(&shell_row, "component").expect("shell should exist"),
+            shell_component,
             Arc::clone(&app_state),
             0,
             request_context.content_security_policy.nonce,