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

Download | Visual Theme System

 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

Latest Hacks

WYSIWYG Editor Autocomplete Suggestions

This hack adds custom autocomplete suggestions to the WYSIWYG page editor (TinyMCE). An autocomplete popup box will show after a “trigger character” (: as configured by default in this hack) is entered after a space, or at the start of a line. »

Last Tested On v23.05

WYSIWYG Editor Footnotes

This hack adds some level of “footnote” support to the WYSIWYG editor. A new “Footnote” button is added to the toolbar, next to the “Italic” button, that allows you to insert a new footnote reference. »

Last Tested On v23.05

Custom WYSIWYG Editor Buttons

This hack provides an example of adding custom actions to the WYSIWYG page editor (TinyMCE). By default, this adds an additional “…” overflow menu to the end of the WYSWIYG toolbar, which contains a single new “Insert Cat” button that has a custom icon. »

Last Tested On v23.02

IFrame Specific Tweaks

Last Tested On v23.02.2