Voyager has finally added support for spoilers! This was the 9th issue reported in Voyager’s Github project, back in June last year. (Since then, Voyager users have created nearly 600 issues with around 500 being resolved!)

It was a huge undertaking, involving a few different packages and nearly one hundred unit tests in order to ensure proper parsing logic.

Also, I’ve published Voyager’s spoiler plugin with AGPL-3.0, so any other FOSS lemmy app using Remark for markdown parsing can more easily add spoiler support :)

So, now Voyager should properly parse spoilers, check it out below! Shortly, I will add support in the Markdown toolbar so you can easily create your own.

(by the way - this release also adds support for horizontal rules. Voyager should now support all of the official Markdown syntax.)

Formatting

The Lemmy spoiler format is based on the CommonMark Container Block Directive proposal. In fact, the spoiler plugin was forked from remark’s directive plugin (this plugin is not flexible enough to be compatible with markdown-it-directive, what lemmy-ui is using, without forking). Their behavior is very similar to Markdown code blocks. Here’s the “happy path” syntax (but there’s edge cases that behave similar to edge cases of markdown code blocks):

::: spoiler Hi there!
Some text
:::

Some examples

Below are some examples stress testing the spoiler parsing.

The spoiler syntax happy path

Some text


👋 Hi there with bonus colons and spaces!

This is a spoiler message. Boo! 👻

Nested spoiler!

This spoiler is nested within the “Hi there!” spoiler. I don’t know why you’d want to nest spoilers… But you can 😆


Spoiler in a quote with implicit closing fence

You can quote spoilers. 🤔 idk why you’d want to but you can.


A spoiler at the end of the post

Bonus dog for tapping spoiler

  • kill_dash_nine@lemm.ee
    link
    fedilink
    English
    arrow-up
    8
    ·
    edit-2
    4 months ago

    The only thing I can see that would be helpful would be something that visually distinguishes that something is a spoiler; a color, a spoiler icon, etc.

    Whatever I put here is your only indication

    that this is secret text

    Visual cues feel important to being able to assess what I am looking at as unless I read this post, it wouldn’t have been clear to me that this is a spoiler.

    Thanks for everything you do for this app. To me, it’s the Lemmy standard for a fantastic app and has made leaving Reddit simple.