Converted iframe hack to visual theme system hack

diff --git a/content/iframe-specific-tweaks/index.md b/content/iframe-specific-tweaks/index.md
new file mode 100644 (file)
index 0000000..2072a6f
--- /dev/null
+++ b/content/iframe-specific-tweaks/index.md
@@ -0,0 +1,31 @@
++++
+title = "IFrame Specific Tweaks"
+author = "@vincent @ssddanbrown"
+date = 2023-03-20T00:00:00Z
+updated = 2023-03-27T00:00:00Z
+tested = "v23.02.2"
++++
+
+This hack will add custom styles & scripts, hiding many parts of the interface while adding additional light/dark mode control,
+intended to provide a cleaner view that's suitable for use within iframes embedded on external pages.
+
+This can be useful if you use BookStack as a knowledge base, and you want to integrate contextual help for your app, with content from BookStack.
+
+#### Considerations
+
+- The forced dark/light mode control works via JavaScript, so will not run where a user has
+JavaScript disabled although this is relatively rare.
+
+#### Usage
+
+Use the original page url, with the GET query params `iframe=true` and `theme=dark|light`. For example:
+
+```html
+<iframe src="https://docs.example.com/books/my-book/page/my-page?iframe=true&theme=dark"></iframe>
+```
+
+The styles and script logic provided is just an example starting point. You should customize these to suit your own needs.
+
+#### Code
+
+{{<hack file="layouts/parts/base-body-start.blade.php" type="visual">}}

diff --git a/content/iframe-specific-tweaks/layouts/parts/base-body-start.blade.php b/content/iframe-specific-tweaks/layouts/parts/base-body-start.blade.php
new file mode 100644 (file)
index 0000000..ad640f9
--- /dev/null
+++ b/content/iframe-specific-tweaks/layouts/parts/base-body-start.blade.php
@@ -0,0 +1,36 @@
+<!-- Check if there's a "iframe=true" query parameter in the request -->
+@if(request()->query('iframe') === 'true')
+
+    <!-- Set styles for when we're in "iframe mode" -->
+    <!-- Most of these hide elements to provide a simple "embedded view" -->
+    <style>
+        #header,
+        #sidebar,
+        #content .button,
+        .tri-layout-right,
+        .grid.third.gap-xxl,
+        .comments-container,
+        #main-content > .mb-m,
+        .tri-layout-mobile-tabs
+        {
+            display: none
+        }
+
+        .content-wrap.card
+        {
+            margin: 0;
+            border: none;
+            box-shadow: none;
+        }
+    </style>
+
+    <!-- Add a script to control dark-mode via JavaScript -->
+    <!-- if there's also a 'theme' query paramter -->
+    @if(request()->query('theme'))
+        <script nonce="{{ $cspNonce }}">
+            // Use JavaScript to toggle the 'dark-mode' class on the HTML element to enable/disable
+            // dark mode based on whether the `theme` query parameter is 'dark'.
+            document.documentElement.classList.toggle('dark-mode', {{ request()->query('theme') === 'dark' ? 'true' : 'false' }});
+        </script>
+    @endif
+@endif
\ No newline at end of file

diff --git a/content/page-as-iframe/head.html b/content/page-as-iframe/head.html
deleted file mode 100644 (file)
index da926e5..0000000
--- a/content/page-as-iframe/head.html
+++ /dev/null
@@ -1,24 +0,0 @@
-<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');
-</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
deleted file mode 100644 (file)
index 4b0ff76..0000000
--- a/content/page-as-iframe/index.md
+++ /dev/null
@@ -1,26 +0,0 @@
-+++
-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">}}