Reveal.js presenter mode for BookStack

[vmario89]

Describe the feature you'd like

Hi, i was looking for a way to "present" a given BookStack page to the public with a beamer for instance. Imagine you have a group of people and want to share tutorial stuff at a place in live.

For HackMD/CodiMD, which is using Markdown and has integrated reveal.js, you can do easy presentations with some basic syntax.

i did not find any fitting related issue to the topic yet. Has somebody made some experiences with this?

you will find a good example at https://pad.ccc-p.org/p/fa04#/

https://revealjs.com/demo/?view=scroll

i dont know. I found #1482 but this lists a different topic in my eyes. I was also looking for a way to have a good redable view without all the sidebars (like #465 suggests, but it is closed)

Describe the benefits this would bring to existing BookStack users

Bookstack could be used to make presentations of books, information, documentation to people

Can the goal of this request already be achieved via other means?

no

Have you searched for an existing open/closed issue?

• I have searched for existing issues and none cover my fundamental request

How long have you been using BookStack?

Under 3 months

Additional context

No response

[vmario89]

i think it would require

• to add https://revealjs.com/installation libraries in script section
• a button to show the markdown page in presentation mode (maybe it has to be passed as an attribute to the url?)
• a check that the page type must be written in markdown mode

[ssddanbrown]

Hi @vmario89,
Specifically supporting a present mode is something I'd consider as out of scope, as that would be a whole other area/use-case to support which has had little prior request.

I was also looking for a way to have a good redable view without all the sidebars

Here are some options for this:

• Print view (then print as PDF)
• Export as HTML or PDF
• Most browsers now have a reader mode

[vmario89]

Hi Dan, i understand your point and know that including too much features is just hard and makes maintenance unreliable at a certain point. maybe someone finds a good idea how to do it as community contribution anyhow.

having a presentation mode would include more: some kind of navigation buttons to jump to previous/next page, defining start and end of a page (page breaks, etc.).

i did a fullscreen view the following way. only missing some kind of switching button to enable/disable that mode.

Tweak: Seiten als Iframe / "Distraction Free" Modus

Dieser Hack basiert auf https://codeberg.org/bookstack/hacks/src/branch/main/content/iframe-specific-tweaks

/cd var/www/vhosts/docs.somewhere.org/resources/views/layouts/parts/
cp base-body-start.blade.php base-body-start.blade.php.original
vim base-body-start.blade.php

<!-- 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;
        }
		.print-hidden {
            display: none;
		}
		.tri-layout-container {
			display: block !important;
			margin: 0px !important;
		}
		@media screen and (min-width: 1400px) {
    		.tri-layout-middle-contents {
        		max-width: 100%;
    		}
		}
		.page-content { 
			max-width: 100%;
		}
		.back-to-top {
            display: none !important;
		}
		.tri-layout-middle {
			padding-top: 0px !important;
		}
		.mt-m {
			margin-top: 0px !important;
		}
    </style>

    <!-- Add a script to control dark-mode via JavaScript -->
    <!-- if there's also a 'theme' query parameter -->
    @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

Eine Seite kann dann wie folgt aufgerufen werden:

• https://docs.somewhere.org/?iframe=true&theme=light
• https://docs.somewhere.org/?iframe=true&theme=dark