admonition-blocks conversion bug/enhancement

nidomiro commented 4 years ago

I have the following code as test:

[TIP]
.Info
=====
Go to this URL to learn more about it:

* http://asciidoc.org

Or you could return to the xref:first[] or <<purpose,Purpose>>.
=====

Asciidoctor-pdf renders the same statement as:

Asciidoctor-html5s currently renders it as:

<aside class="admonition-block tip" role="doc-tip">
    <h6 class="block-title">
        <span class="title-label">Tip: </span>
        Info
    </h6>
    <p>Go to this URL to learn more about it:</p>
    <div class="ulist">
        <ul>
            <li><a class="bare" href="http://asciidoc.org">http://asciidoc.org</a></li>
        </ul>
    </div>
    <p>Or you could return to the <a href="#first">First Steps</a> or <a href="#purpose">Purpose</a>.</p>
</aside>

This is impossible to style correctly and the Info is at the wrong place (See stackoverflow). In general it would be very good to encapsulate the "content" of every admonition in another div in order to be able to style it correctly.

I would expect something like this:

<aside class="admonition-block tip" role="doc-tip">
    <h6 class="block-title">
        <span class="title-label">Tip: </span>
    </h6>
    <div class="block-content"> <!-- or some other class-name -->
        <h6 class="block-title">Info</h6>
        <p>Go to this URL to learn more about it:</p>
        <div class="ulist">
            <ul>
                <li><a class="bare" href="http://asciidoc.org">http://asciidoc.org</a></li>
            </ul>
        </div>
        <p>Or you could return to the <a href="#first">First Steps</a> or <a href="#purpose">Purpose</a>.</p>
    </div>
</aside>

dflock commented 3 years ago

I'd like to fix this, but I'm not sure how to make asciidoctor use my local checkout?

I have the repo checked out locally in ~/dev/asciidoctor-html5s, with the following gems installed:

$ gem list

*** LOCAL GEMS ***

asciidoctor (2.0.10)
asciidoctor-html5s (0.5.0)
bigdecimal (default: 1.3.4)
cmath (default: 1.0.0)
concurrent-ruby (1.1.7)
csv (default: 1.0.0)
date (default: 1.0.0)
dbm (default: 1.0.0)
did_you_mean (1.2.0)
etc (default: 1.0.0)
fcntl (default: 1.0.0)
fiddle (default: 1.0.0)
fileutils (default: 1.0.2)
gdbm (default: 2.0.0)
haml (5.1.2)
io-console (default: 0.4.6)
ipaddr (default: 1.2.0)
json (default: 2.1.0)
minitest (5.10.3)
multi_json (1.15.0)
net-telnet (0.1.1)
openssl (default: 2.1.1)
power_assert (0.2.7)
psych (default: 3.0.2)
pygments.rb (1.2.1)
rake (12.3.1)
rdoc (default: 6.0.1)
rouge (3.23.0)
scanf (default: 1.0.0)
sdbm (default: 1.0.0)
stringio (default: 0.0.1)
strscan (default: 1.0.0)
temple (0.8.2)
test-unit (3.2.5)
thread_safe (0.3.6)
tilt (2.0.10)
webrick (default: 1.4.2)
zlib (default: 1.0.0)

I'm running this command:

$ asciidoctor \
-r asciidoctor-html5s -b html5s \
-T ~/dev/asciidoctor-html5s \
~/dev/test.adoc

This works, and produces output that uses html5s, but I think it's using the installed gems, not the local templates - because any changes I make to the local repo .slim templates don't affect the output? If I leave the -r asciidoctor-html5s -b html5s parts out, then it doesn't use htmls at all, but seems to use the default asciidoctor html backend, I think.

What do I need to do to make asciidoctor use the local templates?

nidomiro commented 3 years ago

I have currently no knowledge in ruby. The Readme states that it uses slim but the templates are compiled to pure ruby : https://github.com/jirutka/asciidoctor-html5s#requirements

Using https://stackoverflow.com/a/31540740/1469540 I found out that asciidoctor-html5s is installed at /var/lib/gems/2.7.0/gems/asciidoctor-html5s-0.5.0/lib/asciidoctor-html5s.rb (via gem which asciidoctor-html5s)

I hope my information helps ;)

koiuo commented 2 years ago

Have you happened to see https://github.com/jirutka/asciidoctor-html5s/issues/11?

It has a styling example from @jirutka , and it looks, like the result you looking for may actually be achievable

garyritchie commented 6 months ago

I'd like to fix this, but I'm not sure how to make asciidoctor use my local checkout?

I have the repo checked out locally in ~/dev/asciidoctor-html5s, with the following gems installed:
$ gem list

*** LOCAL GEMS ***

asciidoctor (2.0.10)
asciidoctor-html5s (0.5.0)
bigdecimal (default: 1.3.4)
cmath (default: 1.0.0)
concurrent-ruby (1.1.7)
csv (default: 1.0.0)
date (default: 1.0.0)
dbm (default: 1.0.0)
did_you_mean (1.2.0)
etc (default: 1.0.0)
fcntl (default: 1.0.0)
fiddle (default: 1.0.0)
fileutils (default: 1.0.2)
gdbm (default: 2.0.0)
haml (5.1.2)
io-console (default: 0.4.6)
ipaddr (default: 1.2.0)
json (default: 2.1.0)
minitest (5.10.3)
multi_json (1.15.0)
net-telnet (0.1.1)
openssl (default: 2.1.1)
power_assert (0.2.7)
psych (default: 3.0.2)
pygments.rb (1.2.1)
rake (12.3.1)
rdoc (default: 6.0.1)
rouge (3.23.0)
scanf (default: 1.0.0)
sdbm (default: 1.0.0)
stringio (default: 0.0.1)
strscan (default: 1.0.0)
temple (0.8.2)
test-unit (3.2.5)
thread_safe (0.3.6)
tilt (2.0.10)
webrick (default: 1.4.2)
zlib (default: 1.0.0)
I'm running this command:
$ asciidoctor \
-r asciidoctor-html5s -b html5s \
-T ~/dev/asciidoctor-html5s \
~/dev/test.adoc
This works, and produces output that uses html5s, but I think it's using the installed gems, not the local templates - because any changes I make to the local repo .slim templates don't affect the output? If I leave the -r asciidoctor-html5s -b html5s parts out, then it doesn't use htmls at all, but seems to use the default asciidoctor html backend, I think.

What do I need to do to make asciidoctor use the local templates?

This is what worked for me...

Gemfile:

...
gem 'asciidoctor-html5s'
gem 'slim' # for use with templates

I've also cloned the asciidoctor-html5s repo. Templates I want to modify are first copied to ./TEMPLATE/.

Then I can:

asciidoctor --trace  -r asciidoctor-html5s -b html5s -T ./TEMPLATE/html5s -E slim -o BUILD/index.html COPY/index.adoc

jirutka / asciidoctor-html5s

admonition-blocks conversion bug/enhancement #20