Reveal.js presenter mode for BookStack #5018

Closed
opened 2026-02-05 09:33:58 +03:00 by OVERLORD · 4 comments
Owner

Originally created by @vmario89 on GitHub (Oct 19, 2024).

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 https://github.com/BookStackApp/BookStack/issues/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 https://github.com/BookStackApp/BookStack/issues/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

Originally created by @vmario89 on GitHub (Oct 19, 2024). ### 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 https://github.com/BookStackApp/BookStack/issues/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 https://github.com/BookStackApp/BookStack/issues/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? - [X] 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_
OVERLORD added the 🌔 Out of scope🔨 Feature Request labels 2026-02-05 09:33:58 +03:00
Author
Owner

@vmario89 commented on GitHub (Oct 19, 2024):

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
@vmario89 commented on GitHub (Oct 19, 2024): 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
Author
Owner

@ssddanbrown commented on GitHub (Nov 19, 2024):

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
@ssddanbrown commented on GitHub (Nov 19, 2024): 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
Author
Owner

@vmario89 commented on GitHub (Dec 2, 2024):

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:

@vmario89 commented on GitHub (Dec 2, 2024): 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](https://codeberg.org/bookstack/hacks/src/branch/main/content/iframe-specific-tweaks) ```bash /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 ``` ```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&amp;theme=light](https://docs.somewhere.org/?iframe=true&theme=light) - [https://docs.somewhere.org/?iframe=true&amp;theme=dark](https://docs.somewhere.org/?iframe=true&theme=dark)
Author
Owner

@ssddanbrown commented on GitHub (Sep 3, 2025):

Following my last message, I'm going to go ahead and close this off as out of scope.

@ssddanbrown commented on GitHub (Sep 3, 2025): Following my last message, I'm going to go ahead and close this off as out of scope.
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/BookStack#5018