jirutka / asciidoctor-html5s Goto Github PK

Since we use KaTeX instead of MathJaX, asciimath is not supported anyway. So when user define just :stem:, latexmath should be used.

I'm working on a stylesheet factory that's compatible with a semantic HTML5 output.
One popular request is to be able to create an off-canvas Table Of Contents with a button to toggle it.

I think it will be easier to style the <button> if we put it outside the <nav> ?

<button aria-expanded="false">Table Of Contents</button>
<nav id="navigation">
  <ul>
    <li><a href="#section-1">Section 1</a></li>
    <li><a href="#section-2">Section 2</a></li>
    <li><a href="#section-3">Section 3</a></li>
    <li><a href="#section-4">Section 4</a></li>
  </ul>
</nav>

What do you think ?

Hi, I find this library far much better than the vanilla Asciidoctor for outputting HTML, but it seems there's a little problem.

When you use a recyclable footnote inside table, the original footnote and the copied footnotes always get different numbers.

test.ad:

|===

|cellfootnote:intable[footnote!]

|cellfootnote:intable[]
|===

paragraphfootnote:notintable[footnote?]

another paragraphfootnote:notintable[]

asciidoctor -r asciidoctor-html5s -b html5s test.ad

While,

asciidoctor -b html5 test.ad

I'd like to add the loading attribute to the images in my HTML output from the HTML5s backend.
https://web.dev/native-lazy-loading/

What is the best way to pass these into the output?

I'm learning AsciiDoc and Asciidoctor and I'm in the midst of styling my admonitions. I want to use text rather than an image or icon for each admonition title-label. asciidoctor-html5s automatically puts a colon after the admonition text, e.g.:

NOTE:
a little note

What is a good way to remove the colon (:) after NOTE (and CAUTION, IMPORTANT, TIP, WARNING) if I do not want to recompile this extension? I do not know Ruby and do not have my system set up for Ruby development. Possible solutions might involve:

• doing something in my CSS to remove the trailing colon
• editing some file or files on my system that asciidoctor-html5s will pick up when it is run (but I'd rather not have to maintain any such edit on all my devices)

It seems that the colon happens because of line 3 in asciidoctor-html5s/data/templates/admonition.html.slim:

- capture
  h6.block-title class=('label-only' unless title?)
    span.title-label ="#{local_attr :textlabel}: "
    =title
  = html_tag_if !blocks?, :p
    =content
- if admonition_aside?
  aside.admonition-block id=id class=[(attr :name), role] role=admonition_aria
    - yield_capture
- else
  section.admonition-block id=id class=[(attr :name), role] role=admonition_aria
    - yield_capture

Thank you for any tips or suggestions!

When doing something like:

----
a -> b 
----

It replaces to:

<div class="listing-block"><pre>a -&gt; b</pre></div>

Instead of keeping things verbatim. According to https://asciidoctor.org/docs/user-manual/#attributes-2 They shouldn't be substituted.

One thing I liked about the about titles from OG AsciiDoc is that titles can be used more like an annotation rather than needing to be a physical <h*> heading. What this means is that it this title does not become a part of the document outline. If I wanted a heading like that I would have used ======. According to the spec, headings like this seem to be a suggestion and not a requirement as there are a lot of sections that don't need this type of outlining header. However, I'm actively willing be told this is a bad assumption about browsers and other readers perceive the document, as well as better understand the HTML spec. To me, it seems like maybe <header> makes more sense without any specified <h*> as it's not a requirement and isn't treated as a part of the outline, but not entirely sure.

I'm using this package to render my asciidoc files with hugo.

I found that having a ordered list right after a unordered list causes a wrong html-nesting.
The ordered list will be inside the last list item of the unordered list.

The following asciidoc source was used for the test:

sdfhkjdfg


* a
* b
* c





1. a
2. b
.. abc
3. c


sdfhkjdfg

* a
* b
* c


sdfhkjdfg


1. a
2. b
.. abc
3. c

sdfhkjdfg

will result in

<p>sdfhkjdfg</p>
<div class="ulist">
    <ul>
        <li>a</li>
        <li>b</li>
        <li>c
            <ol class="arabic">
                <li>a</li>
                <li>b
                    <ol class="loweralpha" type="a">
                        <li>abc</li>
                    </ol>
                </li>
                <li>c</li>
            </ol>
        </li>
    </ul>
</div>
<p>sdfhkjdfg</p>
<div class="ulist">
    <ul>
        <li>a</li>
        <li>b</li>
        <li>c</li>
    </ul>
</div>
<p>sdfhkjdfg</p>
<div class="olist arabic">
    <ol class="arabic">
        <li>a</li>
        <li>b
            <ol class="loweralpha" type="a">
                <li>abc</li>
            </ol>
        </li>
        <li>c</li>
    </ol>
</div>
<p>sdfhkjdfg</p>

I would expect the following output:

<p>sdfhkjdfg</p>
<div class="ulist">
    <ul>
        <li>a</li>
        <li>b</li>
        <li>c</li>
    </ul>
</div>
<div class="olist arabic">
    <ol class="arabic">
        <li>a</li>
        <li>b
            <ol class="loweralpha" type="a">
                <li>abc</li>
            </ol>
        </li>
        <li>c</li>
    </ol>
</div>
<p>sdfhkjdfg</p>
<div class="ulist">
    <ul>
        <li>a</li>
        <li>b</li>
        <li>c</li>
    </ul>
</div>
<p>sdfhkjdfg</p>
<div class="olist arabic">
    <ol class="arabic">
        <li>a</li>
        <li>b
            <ol class="loweralpha" type="a">
                <li>abc</li>
            </ol>
        </li>
        <li>c</li>
    </ol>
</div>
<p>sdfhkjdfg</p>

Hi, another issue about example blocks (i did not check with another block type) when they are preceeded by a .title

====
This is an example
====

is rendered as:

<div class="example-block"><div class="example"><p>This is an example</p></div></div>

but

.my nice example
====
This is an example
====

generates a figure:

<figure class="example-block"><figcaption>Example 1. my nice example</figcaption>
<div class="example"><p>This is an example</p></div></figure>

where i would expect more:

<div class="example-block"><div class="example"><h6 class="block-title">my nice example</h6><p>This is an example</p></div></div>

is there something wrong about titling a block ?

I did a test run with Asciidoctor 2.2.4 and it works fine for me. At the same time I see that there is a dependency "@asciidoctor/core": ">=2.0.0 <2.2.0".

Would you mind if I try to create a PR to update that dependency to "@asciidoctor/core": ">=2.0.0 <2.3.0"?

Just wanted to say " thank you" for maintaining this repo. It is very useful.

Using backend with import statements, causes the following output Object freezing is not supported by Opal followed by error:

    uninitialized constant Asciidoctor::Converter
      Converter: uninitialized constant Asciidoctor::Converter

This might be problem with all backends perhaps, first one I am using. Are backends in general usable for in browser usage with asciidoctor.js? I found no manual for backend usage.

Here is the change in my project that introduces the error: smolijar/emily-editor@5a22333

[source]
----
1 // <1>
2 // <2>
----
<1> 1
<2> 2

Some text in here.

[source]
----
1 // <1>
2 // <2>
----
<1> 1
<2> 2

Where is this?

== Heading

This is actually here.

Downstream issue: https://gitlab.fit.cvut.cz/course-pages/course-pages/issues/102

Callout lists doesn't seem to be working. Example from Asciidoctor doctest.

Document source

[source, ruby]
----
require 'sinatra' // <1>

get '/hi' do  # <2>
  "Hello World!" ;; <3>
end
----
<1> Library import
<2> URL mapping
<3> Content for response

Exception and callstack

/Users/majko/Projects/course-pages/packages/generator/lib/index.js:95
        throw err
        ^
find_by: undefined method `find_by' for nil
    at NilClass_alloc.$$method_missing [as $method_missing] (/Users/majko/Projects/course-pages/node_modules/opal-runtime/src/opal.js:3772:56)
    at NilClass_alloc.method_missing_stub [as $find_by] (/Users/majko/Projects/course-pages/node_modules/opal-runtime/src/opal.js:1202:35)
    at Opal.send (/Users/majko/Projects/course-pages/node_modules/opal-runtime/src/opal.js:1610:19)
    at TMP_25 (/Users/majko/Projects/course-pages/node_modules/asciidoctor.js/dist/node/asciidoctor.js:4227:33)
    at Object.Opal.yield1 (/Users/majko/Projects/course-pages/node_modules/opal-runtime/src/opal.js:1393:14)
    at Array.$$each [as $each] (/Users/majko/Projects/course-pages/node_modules/opal-runtime/src/opal.js:12478:26)
    at Opal.send (/Users/majko/Projects/course-pages/node_modules/opal-runtime/src/opal.js:1610:19)
    at $Section.$$find_by [as $find_by] (/Users/majko/Projects/course-pages/node_modules/asciidoctor.js/dist/node/asciidoctor.js:4222:28)
    at Opal.send (/Users/majko/Projects/course-pages/node_modules/opal-runtime/src/opal.js:1610:19)
    at TMP_25 (/Users/majko/Projects/course-pages/node_modules/asciidoctor.js/dist/node/asciidoctor.js:4227:33)

I recently started to use this to build my Hugo site with this. As I understand it, Hugo parses the outputted HTML to get the table of contents and excludes it from the HTML. It is extracted to a variable so that themes can make more better use out of it.

After switching to the html5s backend, I noticed the toc is printed on integrate into third-party projectsthe page itself and it seems that Hugo is not able to parse it from the HTML. I suspect Hugo expects to find the toc in some specific type of an element and the way html5s outputs it is not compatible.

Output from stock html5 backend

<div id="toc" class="toc">
  <div id="toctitle">Table of Contents</div>
  <ul class="sectlevel1">
    <li><a href="#_note">Note!</a></li>
    <li><a href="#_support">Support</a></li>
    <li><a href="#_usage">Usage</a></li>
  </ul>
</div>

Output from html5s backend

<nav id="toc" class="toc" role="doc-toc">
  <h2 id="toc-title">Table of Contents</h2>
  <ol class="toc-list level-1">
    <li><a href="#_note">Note!</a></li>
    <li><a href="#_support">Support</a></li>
    <li><a href="#_usage">Usage</a></li>
  </ol>
</nav>

Now, I'm not sure wether this is a Hugo issue or what but I thought I'd start here since one of the goals of the project is to integrate into third-party projects. I'm hoping to find some kind of configuration that allows Hugo to get the toc from the output of html5s.

lib/asciidoctor/html5s.rb contains a line require 'asciidoctor/html5s/converter' but this file does not exist.

After commenting the line I get: missing converter for backend 'html5s' as the next error.

Great job! This was something really needed. I see that now it's also available for Asciidoctor Ruby (if I remember correctly, initially it was only supported for the Node version).

I wanted to ask you if there are some CSS stylesheets (or even better, SASS/SCSS project) designed for the HTML output of this backend — e.g. sample documents or books that one could look at for inspiration.

Also, are you planning to create a SASS (or Less, etc.) core library to go with this repository, or even a dedicated "factory template"?

I'm planning to use this extension in an upcoming book publication, so I'll probably be looking into adapting some existing SASS framework to go with it, and I'll be happy to share it when (and if) I manage to (but it won't be anywere soon, though). But of course, any existing examples resources would be a helpful inspiration and starting point in that direction. Having gone through the whole process in the past (for pandoc templates) I know too weel that it can take a good deal of time to create a good stylesheet that covers all the possible elements, layout variants and options (especially if it has to be also mobile and tablet friendly).

Having a customizable SASS framework to go with this project, allowing to produce fully-templated HTML5 docs would be a great milestone, especially if it was an easy to use framework around which different templates-styles could be built. I hope I'll be able to contribute my share in that direction because I use AsciiDoc a lot and I really feel the need for a semantic-HTML alternative like this, and means to customize templates easily.

TIP and INFO admonition blocks use <aside> as an outmost enclosing element.
The other admonition blocks, CAUTION, IMPORTANT and WARNING, use <section> for the same purpose.

Both use the same CSS class, so this is not an immediate issue.

Is there a reason behind the inconsistency or is it just an oversight?

related to #20

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>

Hi and thanks so much for your work.

Just to report my validator htmlhint is not happy that the tbody is not balanced in the tables. (missing )
not sure it really should be in html5… but it is the only error i get :-)

Blockquote spec says it’s used to quote a source, and an abstract isn’t a quote.

I'm quite happy with html5s as it provides very clean an minimal HTML that is easy to integrate with for example a blog.

I found that it adds divs around lists (ol and ul), and sections around every hX. Looking into the source the tags will not be necessary until you use titles for lists, or classes for sections.

I'm currently removing these as post-processing steps to receive a minimal HTML. I wonder if I could provide my own sub-templates that override for example olist.html.slim? I assume removing the extra wrapping HTML elements would not suit everyone else.

I'm using the Node.js version of this library. Thanks!