search

asciidoctor / asciidoctor-reveal.js

:crystal_ball: A reveal.js converter for Asciidoctor and Asciidoctor.js. Write your slides in AsciiDoc!
http://asciidoctor.org
Other
295 stars 188 forks source link

Doc: AsciiDoc markup for Reveal.js self-hosted #230

Open obilodeau opened 5 years ago

obilodeau commented 5 years ago

Like here:

Ref #226.

mojavelinux commented 5 years ago

I think it's great idea to host an example to let people see what's possible (a short of show and tell).

host it on Asciidoctor-related property

I recommend to either:

a) host it out of the GitHub Pages for this repository, hence asciidoctor.github.io/asciidoctor-reveal.js or b) host it on Netlify (I can help you get that set up).

The benefit of Netlify is that it will run a custom build task before it deploys the site (it's essentially a combined CI server + hosting environment).

GitHub Pages requires a more sophisticated CI arrangement because you have to push the code back to the gh-pages branch of this repository.

Both asciidoctor.org and the forthcoming docs.asciidoctor.org are hosted on Netlify.

bcouetil commented 5 years ago

Hey,

I've moved it and linked it in another presentation including new stuff : https://bcouetil.gitlab.io/academy/sample/reveal/reveal-my-asciidoc.html

One link only, since light/dark themes are now selectable live.

Would love to have your feedback @obilodeau and @mojavelinux 😄

I still have to update the source on my github and enrich the extension-lab with the c3js rework.

mojavelinux commented 5 years ago

@bcouetil You may want to reach out to @Mogztter about the fate of c3js integration. As I've suggested, I really think that needs to become an independent extension so that it can be more easily reused (and naturally improved over time).

ggrossetie commented 5 years ago

I've created a similar extension (written in JavaScript) based upon Chartist.js: https://github.com/Mogztter/asciidoctor-chart

bcouetil commented 5 years ago

Chartist is good too, I looked into it before choosing c3js. But it is mostly static, and since I focus on live presentations, I prefer the dynamism of c3js, mainly the hovering effects and being able to switch series on/off (I know that you can also make series appear on click, but I did not manage to go beyond the first click, with my limited JS knowledge).

I've updated my public repo with the c3js Ruby extension : https://github.com/bcouetil/asciidoctor-maven-sample/blob/master/src/docs/asciidoc/lib/c3js-block-macro/extension.rb

I've simplified the extension-labs plugin, with a simple mindset : just feed options to c3js without pre-processing them. This makes it very easy to include lots of options, I've included everything I need : 

  # type = line : line/spline/step/area/area-spline/area-step/bar/scatter/pie/donut/gauge
  # height = 500 : whole chart height in pixels
  # width = 1000 : whole chart width in pixels
  # data-labels = false : Show labels on each data points.
  # x-type = indexed : timeseries/category/indexed
  # x-tick-angle = 0 : Rotate x axis tick text.
  # x-label = undefined : label of x axis
  # y-label = undefined : label of y axis
  # y-range = undefined_undefined : y axis min and max values separated by '_'
  # horizontal = false : rotate x & y
  # order = desc : desc/asc/null
  # legend = bottom : legend position bottom/right/inset

I've left untouched the CSV handing part, without testing it, don't know if it still works.

I've something that I did not manage to do with my little knowledge of both Ruby and Asciidoctor architecture : make the colors part of a chart-config.cfg file, like it's possible for plantUML with plantuml-config.cfg. This would allow a general look consistency with the overall theme, without having to define colors on each and every charts. For now, this is hardcoded to follow my theme.

Ready to help on anything to make this part of the wonderful Asciidoctor project 😍 Feel free to arrange and include this where it needs to be.

😄

bcouetil commented 5 years ago

Hey ! I've added word cloud generation from https://github.com/jasondavies/d3-cloud, you can check it out 😃

It's pure inline JS for now, an extension would be great. But this already ate up all my current free time, I have to stop procastinate and do the actual presentation work I'm supposed to 😄

bcouetil commented 5 years ago

In fact I found time to make a quick Ruby extension, this was easier than I thought, I even added fragments as an option ! 😄

obilodeau commented 4 years ago

We can now selectively host converted examples using our netlify integration (#346). We should try to create an example slide deck that highlights why using AsciiDoc and Asciidoctor reveal.js beats using markdown with reveal.js for slides.