Add a hack for a simpler Bootstack pages layout inside iframes.

diff --git a/content/page-as-iframe/head.html b/content/page-as-iframe/head.html
new file mode 100644 (file)
index 0000000..75c2a84
--- /dev/null
+++ b/content/page-as-iframe/head.html
@@ -0,0 +1,26 @@
+<script>
+    var query = new URLSearchParams(location.search);
+    document.documentElement.classList.toggle('dark-mode', query.get('theme') == 'dark');
+    document.documentElement.classList.toggle('in-iframe', query.get('iframe') == 'true');
+    document.documentElement.classList.toggle('logged-out', localStorage.length === 0);
+    document.documentElement.classList.toggle('logged-in', localStorage.length > 0);
+</script>
+<style>
+    .in-iframe #header,
+    .in-iframe #sidebar,
+    .in-iframe #content .button,
+    .in-iframe .tri-layout-right,
+    .in-iframe .grid.third.gap-xxl,
+    .in-iframe .comments-container,
+    .in-iframe #main-content > .mb-m,
+    .in-iframe .tri-layout-mobile-tabs
+    {
+        display: none
+    }
+    .in-iframe .content-wrap.card
+    {
+        margin: 0;
+        border: none;
+        box-shadow: none;
+    }
+</style>
\ No newline at end of file

diff --git a/content/page-as-iframe/index.md b/content/page-as-iframe/index.md
new file mode 100644 (file)
index 0000000..4b0ff76
--- /dev/null
+++ b/content/page-as-iframe/index.md
@@ -0,0 +1,26 @@
++++
+title = "Overloading CSS to view a book page in a iframe"
+author = "@vincent"
+date = 2023-03-20T00:00:00Z
+updated = 2023-03-20T00:00:00Z
+tested = "v22.11.1"
++++
+
+This hack will add classes on the HTML root element, and hide some components when displayed inside an iframe.
+
+This can be useful use Bookstack as a Knowledge Base, and you want to integrate contextual help for your app, with content from Bookstack.
+
+#### Considerations
+
+This works via JavaScript, so is not assured to run since a user could have
+JavaScript disabled although this is relatively rare.
+
+### Usage
+
+Use the original page url, with the GET query params `iframe=true` and `theme=dark|default`.
+
+For example: `bookstack-instance.io/books/my-book/page/my-page?iframe=true&theme=dark`
+
+#### Code
+
+{{<hack file="head.html" type="head">}}