Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add a "Share" Button #4932

Open
1 task done
pasekit opened this issue Apr 8, 2024 · 1 comment
Open
1 task done

Add a "Share" Button #4932

pasekit opened this issue Apr 8, 2024 · 1 comment

Comments

@pasekit
Copy link

pasekit commented Apr 8, 2024

Describe the feature you'd like

The problem with using Bookstack as a PWA is that you cannot simply copy the link to the page. On a desktop, it is still possible to get the link via the browser menu, but this actually happens outside the app. However, this is not possible on a smartphone.

My current workaround is to go out of the page and then press and hold the link to the page.

My suggestion:
Add a "Share" button below the export button. Perhaps with several options as with exporting, such as copy link, share in another app.

Describe the benefits this would bring to existing BookStack users

You always work completely in the web app and do not have to switch to browser functions. In my humble opinion, sharing pages is also a common use.

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

Yes, for desktop clients via the three-point menu> More tools> Use copy link

Alternatively, navigate out of the page and then copy the link from it.

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?

3 months to 1 year

Additional context

No response

@Man-in-Black
Copy link
Contributor

Dan just helped me with the same question over on Discord and got a perfect solution for me, because I got the same problem when I want to copy the URL.
The discussion can be found here: https://discord.com/channels/578552496637739008/1172518752751988816

For the feature to work you need to use the visual theme system.
Create a theme and within that theme create the following file and folder: entities.share-link.blade.php
Put in the following code:

<button type="button"
        id="share-link-button"
        data-success-text="Link copied to clipboard!"
        class="icon-list-item text-link">
    <span>@icon('share')</span>
    <span>{{ trans('common.share') }}</span>
</button>
<script nonce="{{ $cspNonce }}">
    (async function() {
        const shareButton = document.getElementById('share-link-button');
        shareButton.addEventListener('click', event => {
           copyTextToClipboard(window.location.href);
           window.$events.success(shareButton.dataset.successText);
        });

        async function copyTextToClipboard(text) {
            if (window.isSecureContext && navigator.clipboard) {
                await navigator.clipboard.writeText(text);
                return;
            }

            // Backup option where we can't use the navigator.clipboard API
            const tempInput = document.createElement('textarea');
            tempInput.style = 'position: absolute; left: -1000px; top: -1000px;';
            tempInput.value = text;
            document.body.appendChild(tempInput);
            tempInput.select();
            document.execCommand('copy');
            document.body.removeChild(tempInput);
        }
    })()
</script>

Now you need to add a line to each show.blade.php of the pages, books, chapters and shelves. I've put this directly under the export button:

            @if($watchOptions->canWatch() && !$watchOptions->isWatching())
                @include('entities.watch-action', ['entity' => $page])
            @endif
            @if(user()->hasAppAccess())
                @include('entities.favourite-action', ['entity' => $page])
            @endif
            @if(userCan('content-export'))
                @include('entities.export-menu', ['entity' => $page])
            @endif
            @include('entities.share-link', ['entity' => $page])
        </div>

    </div>
@stop

look for the link with the "share-link" in it.

Thats all, now you have a "share" button in your instance:
image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Development

No branches or pull requests

2 participants