Best way to add arbitrary HTML code

pablormier commented 10 years ago

Is there any way to easily embed custom HTML code? what I know so far is that you can add custom html in the decoration head tag, but I'm trying to add bootstrap components (like jumbotron) and the head tag is not suitable for this purpose.

Other option that I considered is to create a custom jumbotron component such as the <carousel> to inject custom bootstrap components but this requires to modify the custom reflow velocity template. A different (maybe better) option is to use javascript code to inject specific html in the document using the head tag. Any ideas? thx

andriusvelykis commented 10 years ago

If the jumbotron is in a single page only, then you can just add HTML to that page directly. It will be rendered as part of the page 'content'.

If you want to add something to the template, I think you will need to fork the skin and edit the template.. I think that would be the "Maven way" of customizing the appearance. Arbitrary HTML code is a very open-ended feature - changing the skin itself may be more flexible for such cases.

pablormier commented 10 years ago

Thanks @andriusvelykis. But, for the first case, how do you add HTML directly as part of the content? In my case, I want to add a jumbotron just in the index, which is generated using markdown (index.md). Is there any way to add html in the site.xml file (or embedding it in markdown files), or with "adding HTML directly to the page" you mean to simply create an index.html with the additional component?

andriusvelykis commented 10 years ago

I think it should work both ways - either code everything in HTML and create the index.html file as your page content, or just add the HTML to the Markdown file (index.md). Markdown allows arbitrary HTML within the file - it will be rendered as expected. I am not sure how will my sectioning work in that case, but please do try.

pablormier commented 10 years ago

I've tried it. It does not work as expected (<div> tags are removed in the output html). Maybe is a feature not supported by Doxia 1.3. Anyway, I will try to do it later with XDoc and <source> tags. In the worst case, a custom index.html or even inserting the code dynamically with javascript would work for me. Thanks again.

pablormier commented 10 years ago

Just in case someone is interested in this topic, it seems that there is a confirmed bug in Doxia =< 1.5 which causes Doxia to ignore <div> elements in Markdown files https://jira.codehaus.org/browse/DOXIA-515. The problem is fixed in the (still unreleased) Doxia 1.6.

andriusvelykis commented 10 years ago

Super! Good catch :)

So does it work correctly with Doxia 1.6? I.e. can you add the jumbotron directly to the page?

pablormier commented 10 years ago

Unfortunately I could not find Doxia 1.6 snapshots out there. I will try it as soon as it is available.

pablormier commented 10 years ago

I was playing again with different configurations and I've found that fortunately, there is an old version of doxia 1.0 that seems to include the html tags pretty well. To use it, I added the following plugin dependency to the maven plugin:

<plugin>
    <groupId>org.apache.maven.plugins</groupId>
    <artifactId>maven-site-plugin</artifactId>
    <version>3.3</version>
    <dependencies>
    ...

    <dependency>
        <groupId>net.ju-n.maven.doxia</groupId>
        <artifactId>doxia-module-markdown</artifactId>
        <version>1.0.0</version>
    </dependency>
</plugin>

Then, in order to add the jumbotron element, I've defined a new columns section in the site.xml. Here is how my config looks like:

<pages>
  <index>
      <sections>
      <!-- section used for the Jumbotron -->
      <columns>1</columns>
      <!-- rest of sections -->
      <columns>3</columns>
      <body />
      <sidebar />
      </sections>
  </inde>
  ...
</pages>

I've used <columns>1</columns> instead of another section <body> cause the first one generates a correct <div class="span12"> whereas the <body> generates a <div class="span8">.

Then, in the index.md file, I've just added the jumbotron html snippet in the first section:

<div class="jumbotron">
    <div class="container">
    <center>
    <p><img alt="logo" src="logo.png"></img></p>
    <p>Slogan</p>
    <p><a class="btn btn-primary btn-lg" role="button">Download</a></p>
    </center>
    </div>
</div>

---

## <i class="fa fa-rocket"></i> Column 1

Content of the column 1

## <i class="fa fa-cogs"></i> Column 2

Content of the column 2

## <i class="fa fa-github-alt"></i> Column 3

Content of the column 3

Note that now I can also include bootstrap glyphicons or font-awesome icons just adding the <i class=..></i> in the markdown file :D.

However, this version of the markdown plugin has other drawbacks. For example, the generation of source code snippets does not work as expected (it removes the indentation of the code). Let's see if all these things work well in doxia 1.6.

pablormier commented 10 years ago

By the way, here is the final result with Reflow Skin using Doxia 1.0 http://citiususc.github.io/hipster/. The integration of the jumbotron and the awesome font icons worked really nice :)

andriusvelykis commented 10 years ago

Awesome! Looks great :)

andriusvelykis / reflow-maven-skin

Best way to add arbitrary HTML code #33