How to achieve incremental bullets?

[ccamara]

I am wondering if there is a way to achieve incremental bullets functionality.

I know we can use fragments in either verbose or compact notation, but both of them parse the * character used for bullets as a character, not a bullet. On the other hand, if I put the bullet outside the fragment, the bullet point gets rendered even though its content is not yet visible.

[joshed-io]

Thanks for opening the issue. The bullet showing before the content is a known issue definitely needs to be fixed. It might take me a few days to get to it. In the meantime you could try the Markdown shortcode or raw HTML and do it the Reveal.js way. https://github.com/hakimel/reveal.js/blob/master/README.md#fragments

Le mar. 21 mai 2019 à 18:28, Carlos Cámara notifications@github.com a écrit :

I am wondering if there is a way to achieve incremental bullets functionality.

I know we can use fragments in either verbose or compact notation, but both of them parse the * character used for bullets as a character, not a bullet. On the other hand, if I put the bullet outside the fragment, the bullet point gets rendered even though its content is not yet visible.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/dzello/reveal-hugo/issues/36?email_source=notifications&email_token=AABKVOJCF3LQXD6XPHQFKFLPWQPKZA5CNFSM4HOMXK2KYY3PNVWWK3TUL52HS4DFUVEXG43VMWVGG33NNVSW45C7NFSM4GVAKE5Q, or mute the thread https://github.com/notifications/unsubscribe-auth/AABKVOLKKH5M3C5QI4QMA7DPWQPKZANCNFSM4HOMXK2A .

[ccamara]

Ok, thank you. Yes, it was my intention to use this workaround, but I was wondering if there was a native reveal-hugo way to do it.

[mtlynch]

Would love to see this feature as well.

My current workaround might be useful to others:

<ul>
{{% fragment %}}<li>One</li>{{% /fragment %}}
{{% fragment %}}<li>Two</li>{{% /fragment %}}
{{% fragment %}}<li>Three</li>{{% /fragment %}}
</ul>

[ShaunaGordon]

@mtlynch 's solution didn't work for me on the latest Hugo (though in hindsight, it might be due to the change in how the delimiters work; it's possible that using {{< instead of {{% would make that work again, but the nature of the different delimiters is confusing as hell to me).

Regardless, I still find that to be a clunky workaround, so I fiddled around with a new shortcode and came up with this:

{{ $items := split .Inner "\n" }}

<ul>
{{- range $item := $items -}}
    {{- if $item -}}
        <li class="fragment">{{- $item -}}</li>
    {{- end -}}
{{- end -}}
</ul>

Which is then used like this:

{{< fraglist >}}
One
Two
Three
{{< /fraglist >}}

The advantage to this is that it's more succinct (no individual fragment items), more semantic (puts the fragment class on the list items, instead of on a wrapper span), and includes the bullets. (Note: using the % delimiters and Markdown list marks don't work here, because of how the content is processed.)

It could be improved by taking an option for the list type and not totally blowing up on nested lists. I will probably end up resolving the latter before too long, as I'm actively dealing with this for a presentation I need this week, and I might deal with the former at some point, just because I'm a completionist. It's a quick and dirty first draft, though.

[ShaunaGordon]

Nested lists are proving to be more of an endeavor than I had anticipated, so I won't be able to get to it at the moment, but perhaps someone could pick up from here.

My initial thought was to just nest the lists with nested shortcodes:

{{< fraglist >}}
Thing
    {{< fraglist >}}
    Subthing
    {{< /fraglist >}}
Other thing
{{< /fraglist >}}

That...technically....kind of....works....in the sense that it does create the sublist and doesn't totally blow up. However, it puts the sublist into its own list item, kind of like this:

<ul>
    <li>Thing</li>
   <li><ul>
      <li>Subthing</li>
    </ul></li>
</ul>

when it should be this:

<ul>
    <li>Thing
      <ul>
        <li>Subthing</li>
    </ul></li>
</ul>

This results in double-bullets and I think an extra bullet (I don't feel like testing it again right now -- I already feel like I'm going cross-eyed from this presentation -- but IIRC, it put the opening UL into its own LI tag and the rest of the sublist into its own, too). Whatever the rendering details, it's very much incorrect, but it's somewhat close. I just don't really know how to get it over the finish line at the moment, and I have a sneaking suspicion there might be a cleaner way to do this and I just don't know what that is (perhaps the answer to his will help with how to handle definition lists...).

[zottelsheep]

For those who want to use no shortcodes and don't care if the whole presentation has incremental bullets: I put this line into layout/partials/reveal-hugo/slides.html. Works out for me, even with nested lists.

{{- $content := replace .Content "<li>" "<li class=\"fragment\">" -}}

Would love to be able to toggle it with a config option, so you can set it via the front-matter, but I can't get it to work.

<!-- Add fragment class to list-elements when auto_increment is set --> 
{{- if (.Param "reveal_hugo.auto_increment")  -}}
  {{- $content := replace .Content "<li>" "<li class=\"fragment\">" -}}
{{ end }}

Tried adding this if-Block around it, but then it doesn't work any more. I'm new to hugo, so maybe someone can help me :)

[davidovich]

You might simulate the wanted result by using hugo goldmark attributes and some inline styles:

in your config.toml enable attributes:

[markup.goldmark.parser.attribute]
block = true

Then in your markdown

- One
{ class="fragment" style="display: list-item"}
- Two
{ class="fragment" style="display: list-item"}
- Three
{ class="fragment" style="display: list-item"}

The display:list-item overrides the default centered bullet list that you would get otherwise.