Icons with XHTML
Locked
 
|
Hi guys,
my admonition paragraph icons don't appear. I'm generating my maven site with asciidoctor and i have defined IMPORTANT: blah blah but this gets rendered as Important | blah blah |
and not blah blah | So looks like the tag is not generated. I read here http://asciidoc.org/userguide.html#X88 icons attribute can only be used on xhtml11 or html5 and the maven plugin is using just xhtml not xhtml11 (with xhtml11 it doesn't find the view). Could this be the problem? Also according to this http://www.w3schools.com/html/html_xhtml.asp the i tag is for italics in XHTML. |
|
|
Ok formatting got screwed, so I'll post it again here:
Hi guys, my admonition paragraph icons don't appear. I'm generating my maven site with asciidoctor and i have defined IMPORTANT: blah blah but this gets rendered as <td class="icon"> Important </td> <td class="content"> blah blah </td> and not <td class="icon"><i class="icon-note" title="Note"></i></td><td class="content"> blah blah </td> So looks like the <i>tag is not generated. I read here http://asciidoc.org/userguide.html#X88 icons attribute can only be used on xhtml11 or html5 and the maven plugin is using just xhtml not xhtml11 (with xhtml11 it doesn't find the view). Could this be the problem? Also according to this http://www.w3schools.com/html/html_xhtml.asp the i tag is for italics in XHTML. |
|
|
That certainly seems like a bug, but I'm not sure where to file it (core or AsciidoctorJ)
—
Sent from Mailbox On Thu, May 8, 2014 at 1:57 AM, paranoiabla [via Asciidoctor :: Discussion] <[hidden email]> wrote:
|
|
|
Well I don't know either. Can you please tell me which project, and I will report it.
|
|
|
Probably core Asciidoctor.
—
Sent from Mailbox On Fri, May 9, 2014 at 12:38 AM, paranoiabla [via Asciidoctor :: Discussion] <[hidden email]> wrote:
|
|
|
Administrator
|
Let's not assume this is a bug in Asciidoctor core until we sort out what's really going on. It seems to me like a configuration problem in the Asciidoctor Maven plugin that could be resolved with an improvement to the docs. Can you explain how you setup your build? Better yet, do you have a public repository you can point us to that demonstrates this problem. As I mentioned in the issue report, this is likely a problem with the stylesheets not being passed through to the output correctly. We'll get to the bottom of the issue :) -Dan p.s. Per your question about the backends, don't worry about what the AsciiDoc Python documentation says about backends. The html5 (and its alias, html) backend in Asciidoctor is consistent with the "html5" backend in AsciiDoc Python. The xhtml5 (and its alias xhtml) backend in Asciidoctor is the same output, except that the output can be parsed by an XML parse (all short HTML tags are closed and boolean HTML attributes have values). p.p.s While it's true that the <i> tag is the "italic" tag in HTML, font-based icon sets tend to overload the meaning of this tag as "icon" for the purpose of showing a font-based icon. That's why we use it for the font-based admonition icons. On Sun, May 11, 2014 at 2:16 AM, paranoiabla [via Asciidoctor :: Discussion] <[hidden email]> wrote: Here it is: -- Dan Allen | http://google.com/profiles/dan.j.allen |
|
|
Hi guys,
here's a sample project: https://github.com/paranoiabla/asciidoctor-maven-test I'm not sure who is generating the output xhtml, but it contains this snippet: <td class="icon"> Note </td> so it's not picked up by asciidoctor.css and hence not styled with the icon. |
|
|
Any news on this one? Did you manage the check the sample project?
|
|
|
Haven't been able to. Been busy with the day job, sorry. On Wed, May 21, 2014 at 9:47 AM, paranoiabla [via Asciidoctor :: Discussion] <[hidden email]> wrote: Any news on this one? Did you manage the check the sample project? -- |
|
In reply to this post by paranoiabla
I'm interested in this too. I'm brand new to Ruby and Asciidoctor.js. But I've figured out that adding
:icons: font to the AsciiDoc text file causes the Admonition icons to appear when you create an HTML file from the Ruby command line. So I've been trying to make that work on a web page where I'm pasting in text and using JavaScript to render with Asciidoctor.js and opal.js. But so far I cannot make it work. It does make me wonder how to toggle the use of font icons with Asciidoctor.js
- Ted
@TedAtCIS
|
|
|
Did you guys try my repository? Is there anything else I can do to help you reproduce this problem?
|
|
Administrator
|
Petar, The main problem was that the site module in the Asciidoctor Maven plugin was running with the default safe mode, which is secure. You cannot control the icons setting in that mode. I patched the master and 1.5.0.preview-testing branches so that the safe mode is now set to "unsafe" just like the main Asciidoctor Maven plugin.
Once I got that solved, I ran into another problem with the XHTML. It appears that the Maven site module "sanitizes" the XHTML that Asciidoctor produces. One of the changes is makes is to (conveniently) remove the class attribute from the "i" tag. That completely breaks the font-based icons because it leaves behind "<i></i>".
I worked around this issue by changing the tag name from "i" to "span". See https://github.com/asciidoctor/asciidoctor-maven-plugin/blob/master/src/main/java/org/asciidoctor/maven/site/AsciidoctorParser.java#L53
First, build and install the Asciidoctor Maven plugin from the 1.5.0.preview-testing branch. Next, add the following HTML in the <head> element of your template (or include these styles in one of your stylesheets):
```html <style> td.icon [class^="icon-"]:before { font-size: 2.5em; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); cursor: default; }
td.icon .icon-note:before { content: "\f05a"; color: #005498; color: #003f72; } td.icon .icon-tip:before { content: "\f0eb"; text-shadow: 1px 1px 2px rgba(155, 155, 0, 0.8); color: #111; }
td.icon .icon-warning:before { content: "\f071"; color: #bf6900; } td.icon .icon-caution:before { content: "\f06d"; color: #bf3400; } td.icon .icon-important:before { content: "\f06a"; color: #bf0000; }
</style> <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.1/css/font-awesome.min.css"/>
``` Also, make sure to change the value of the source-highlighter attribute to "coderay" instead of "pygments". You can't use Pygments with AsciidoctorJ. The Ruby code it relies on is not Java friendly.
Now, just run "mvn site:site" and it should work! Be aware that the mangling of the "i" tag isn't the only problem you are going to hit. There are several features of AsciiDoc that rely on CSS (such as the font-based icons). If the Maven site plugin strips away CSS classes, you may lose the context you need to identify and style the output correctly. I'm not sure what to do about that problem. IMO, the Maven site plugin shouldn't be messing with the primary HTML content of a page.
I hope that helps! -Dan On Tue, Jun 17, 2014 at 5:46 AM, paranoiabla [via Asciidoctor :: Discussion] <[hidden email]> wrote: Did you guys try my repository? Is there anything else I can do to help you reproduce this problem? Dan Allen | http://google.com/profiles/dan.j.allen
|
|
Administrator
|
In reply to this post by Ted
On Wed, May 21, 2014 at 2:00 PM, Ted [via Asciidoctor :: Discussion] <[hidden email]> wrote: It does make me wonder how to toggle the use of font icons with Asciidoctor.js I recommend that you look at the Asciidoctor Live Preview Chrome extension, which demonstrates how this is done. See the following two lines:
|
|
|
Hi Dan,
thank you for your reply :) I did what you told me: 1) git pull 2) git checkout 1.5.0.preview-testing 3) mvn clean install 4) cd ../myproj/ 5) mvn clean site -o -pl . and now i get this exception: [ERROR] Failed to execute goal org.apache.maven.plugins:maven-site-plugin:3.3:site (default-site) on project myproj: Execution default-site of goal org.apache.maven.plugins:maven-site-plugin:3.3:site failed: (RuntimeError) Couldn't find a view in @views for document -> [Help 1] org.apache.maven.lifecycle.LifecycleExecutionException: Failed to execute goal org.apache.maven.plugins:maven-site-plugin:3.3:site (default-site) on project myproj: Execution default-site of goal org.apache.maven.plugins:maven-site-plugin:3.3:site failed: (RuntimeError) Couldn't find a view in @views for document at org.apache.maven.lifecycle.internal.MojoExecutor.execute(MojoExecutor.java:224) at org.apache.maven.lifecycle.internal.MojoExecutor.execute(MojoExecutor.java:153) at org.apache.maven.lifecycle.internal.MojoExecutor.execute(MojoExecutor.java:145) at org.apache.maven.lifecycle.internal.LifecycleModuleBuilder.buildProject(LifecycleModuleBuilder.java:84) at org.apache.maven.lifecycle.internal.LifecycleModuleBuilder.buildProject(LifecycleModuleBuilder.java:59) at org.apache.maven.lifecycle.internal.LifecycleStarter.singleThreadedBuild(LifecycleStarter.java:183) at org.apache.maven.lifecycle.internal.LifecycleStarter.execute(LifecycleStarter.java:161) at org.apache.maven.DefaultMaven.doExecute(DefaultMaven.java:317) at org.apache.maven.DefaultMaven.execute(DefaultMaven.java:152) at org.apache.maven.cli.MavenCli.execute(MavenCli.java:555) at org.apache.maven.cli.MavenCli.doMain(MavenCli.java:214) at org.apache.maven.cli.MavenCli.main(MavenCli.java:158) at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method) at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:57) at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43) at java.lang.reflect.Method.invoke(Method.java:601) at org.codehaus.plexus.classworlds.launcher.Launcher.launchEnhanced(Launcher.java:289) at org.codehaus.plexus.classworlds.launcher.Launcher.launch(Launcher.java:229) at org.codehaus.plexus.classworlds.launcher.Launcher.mainWithExitCode(Launcher.java:415) at org.codehaus.plexus.classworlds.launcher.Launcher.main(Launcher.java:356) Caused by: org.apache.maven.plugin.PluginExecutionException: Execution default-site of goal org.apache.maven.plugins:maven-site-plugin:3.3:site failed: (RuntimeError) Couldn't find a view in @views for document at org.apache.maven.plugin.DefaultBuildPluginManager.executeMojo(DefaultBuildPluginManager.java:115) at org.apache.maven.lifecycle.internal.MojoExecutor.execute(MojoExecutor.java:208) ... 19 more Caused by: org.jruby.exceptions.RaiseException: (RuntimeError) Couldn't find a view in @views for document at RUBY.render(jar:file:/home/petar/.m2/repository/org/asciidoctor/asciidoctor-java-integration/1.5.0.preview1/asciidoctor-java-integration-1.5.0.preview1.jar!/gems/asciidoctor-1.5.0.preview.1/lib/asciidoctor/renderer.rb:146) at RUBY.render(jar:file:/home/petar/.m2/repository/org/asciidoctor/asciidoctor-java-integration/1.5.0.preview1/asciidoctor-java-integration-1.5.0.preview1.jar!/gems/asciidoctor-1.5.0.preview.1/lib/asciidoctor/document.rb:795) at RUBY.render(jar:file:/home/petar/.m2/repository/org/asciidoctor/asciidoctor-java-integration/1.5.0.preview1/asciidoctor-java-integration-1.5.0.preview1.jar!/gems/asciidoctor-1.5.0.preview.1/lib/asciidoctor.rb:1023) at RUBY.render(<script>:59) Maybe you forgot to commit some part of it? at org.jruby.gen.InterfaceImpl2091240778.render(org/jruby/gen/InterfaceImpl2091240778.gen:13) |
|
Administrator
|
Try running mvn site without any additional flags first, just in case. I can't see why you should be getting a template error. Do you have an Asciidoctor version defined anywhere else in your pom.xml files? On Jun 18, 2014 6:53 AM, "paranoiabla [via Asciidoctor :: Discussion]" <[hidden email]> wrote:
Hi Dan, |
«
Return to Asciidoctor :: Discussion
|
1 view|%1 views
| Free forum by Nabble | Edit this page |