codinginbarn/bookstack-hacks
Fork 0
forked from bookstack/hacks
Code Pull requests Activity

Converted iframe hack to visual theme system hack

Browse source
This commit is contained in:
Dan Brown 2023-03-27 14:56:54 +01:00
commit 7cf63a462b
Signed by: danb
GPG key ID: 46D9F943C24A2EF9
4 changed files with 67 additions and 50 deletions
Download patch file Download diff file Expand all files Collapse all files

31
content/iframe-specific-tweaks/index.md Normal file
View file

@ -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">}}

36
content/iframe-specific-tweaks/layouts/parts/base-body-start.blade.php Normal file
View file

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