Hacks & Customizations
These hacks are unsupported customizations meant as unofficial workarounds.
They can cause instability, introduce issues and may conflict with future updates. Apply at your own risk!

IFrame Specific Tweaks

  • Authors: @vincent @ssddanbrown
  • Created: 20th Mar 2023
  • Updated: 27th Mar 2023
  • Last Tested On: 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:

1
<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

layouts/parts/base-body-start.blade.php
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
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

Request an Update

Hack not working on the latest version of BookStack?
You can request this hack to be updated & tested for a small one-time fee.
This helps keeps these hacks updated & maintained in a sustainable manner.


Latest Hacks