content for online consumption using "dynamic" elements or widgets

Previous Topic Next Topic
 
classic Classic list List threaded Threaded
3 messages Options
Reply | Threaded
Open this post in threaded view
|

content for online consumption using "dynamic" elements or widgets

eitan
hello,

i'm using asciidoctor at the moment to write "lab instructions" type documents.  it all works well enough.

i'm interested in improving the quality of these instructions by producing documentation that's not necessarily static, not for print.  i'm specifically looking for features such as these:

* the ability to show two (or more) alternative sets of instructions by using a tab widget.  here's a simple example of what i mean, taken from the spring.io projects, where they display both maven and gradle dependency information, and an end-user can simply pick the one that is applicable to their situation:

http://projects.spring.io/spring-boot/#quick-start

i'm not particular about how things render.  i think a simple tab view would do just fine.  other than a renderer, this would necessitate the ability to annotate a paragraph or section of a document as an "alternative."


* the ability to expose a clipboard "copy" button to make it easy for students to grab a link or a piece of information, like https://clipboardjs.com/ or what we see on github when you want to clone a repository.

here also i suspect there would have to be a way to annotate a piece of text that an author would be interested in exposing for copy-to-clipboard consumption.

* expandable/collapsible sections, that makes it easy for a reader to focus on one section of a potentially lengthy listing.

i.e. i want to produce web-based/online instructions that are not necessarily designed to be printed, but rather interacted with.

[a] does any tooling exists either within or outside the realm of asciidoc that might lend itself to this use case?
[b] do you have any suggestions on how i might go about producing such an end result?

thanks!
/ eitan

Ted
Reply | Threaded
Open this post in threaded view
|

Re: content for online consumption using "dynamic" elements or widgets

Ted
eitan wrote
[a] does any tooling exists either within or outside the realm of asciidoc that might lend itself to this use case?
[b] do you have any suggestions on how i might go about producing such an end result?
I don't know of any tooling that would do what you want without writing code.

My suggestion would solve this by doing some web development.

Start with the pieces you need. Try to find pure CSS solutions. Example: https://webdesignerhut.com/examples/pure-css-tabs/ has a CSS tabs solution.

Then work on your Asciidoc file to get the HTML output to come close to what works with the CSS

= Lab Instructions
:docinfo1:

== Choose one

Choose one of the following tabs.


[#tab-content1.tab-content]
=== Choice One
This is the content for choice one.

[#tab-content2.tab-content]
=== Choice Two
This is the content for choice two.

[#tab-content3.tab-content]
=== Choice Three
This is the content for choice three.

Then add your CSS into the docinfo.html file.

Then start debugging and modify the CSS to work with your HTML output from Asciidoctor.

You could even include JavaScript in your docinfo.html file which would be one way to inject the ClipBoardJS.
It might be a challenge to get all the CSS and JavaScript to work in harmony with the Asciidoctor output to HTML.




- Ted @TedAtCIS
Reply | Threaded
Open this post in threaded view
|

Re: content for online consumption using "dynamic" elements or widgets

eitan
hi ted,
  thanks for the suggestion.  sounds like a plan.
/ eitan