thanks for your library! Unfortunately I am struggling to find out how to pass a simple variable to the template e.g.

let actual = html! {
    : doctype::HTML;
    html {
        head {
            title : "Hello world!";
        }
    }
}

how would I pass the variable title using your example ? I also think web templates are mostly used to display data so perhaps you can add that to the example..not sure why the calculations are important in this scenario! sorry if I misunderstood something... am I also right to assume that normal HTML has to be translated into the rust tags inside html! to work right ?

Closes https://github.com/Stebalien/horrorshow-rs/issues/7

I use suggestion from https://github.com/Stebalien/horrorshow-rs/issues/7#issuecomment-223713500

I added labels_sep_by! because I wanted to be able to customize delimiters. I use it to generate the style attribute of the element.

@Stebalien I couldn't get this to work labels!("active" if false) since:

expr and stmt variables may only be followed by one of: => , ;

according to https://doc.rust-lang.org/book/macros.html

Any suggestions?

As a prenote I only have a general idea of how rust works and are making a web site/server to learn it.

I have multiple functions that return Box<RenderBox> that are later used in a function that returns the rendered string.

Version: 0.6.2

Log

error: no rules expected the token `tmpl`
   --> src\resources\partials\element.rs:131:5
    |
131 | /     box_html! {
132 | |         nav(class="nav nav_top full_width") {
133 | |             ul(class="nav__menu flex flex--nowrap flex__center wrapper") {
134 | |                 li(class="nav__items--container") {
...   |
151 | |         }
152 | |     }
    | |_____^
    |
    = note: this error originates in a macro outside of the current crate

Code

    box_html! {
        nav(class="nav nav_top full_width") {
            ul(class="nav__menu flex flex--nowrap flex__center wrapper") {
                li(class="nav__items--container") {
                    ul(class="nav__items--list flex flex--nowrap") {
                        li(class="flex__item") {
                            a(href="/", class="nav__link") {
                                : "Story";
                                b : "Archive";
                            }
                        }
                        : navbar_item(item_grow)
                        @ if navbar_drawer {
                            : navbar_drawer(drawer);
                        } else {
                            : navbar_item(item_login);
                        }
                    }
                }
            }
        }
    }

I had a need for something like https://github.com/JedWatson/classnames

I came up with the following macro:

macro_rules! classnames {

    // base cases

    ($name: expr) => (
        format!("{}", $name)
    );

    ($name:expr => $should_include:expr) => (
        if $should_include {
            format!("{}", $name)
        } else {
            format!("")
        }
    );

    // expansions

    ($name:expr, $($tail:tt)+) => {
        format!("{} {}", $name, classnames!($($tail)*))

    };

    ($name:expr => $should_include:expr, $($tail:tt)+) => {
        if $should_include {
            format!("{} {}", $name, classnames!($($tail)*))
        } else {
            classnames!($($tail)*)
        };
    };

}

// usage:
html!{

    div(class = classnames!("active" => true, "button-style")) {
        : "this is a button"
    }

    div(class = classnames!("active" => false, "button-style")) {
        : "this is a button"
    }
}

rust playground with examples: https://is.gd/e6Jahb

I just learned rust macros to make this; it can probably be refactored into something more nicer.

I'm wondering if this utility macro would be something worth adding to horrorshow. I can try to PR.

edited on github, let's see what travis says :)

right now if I have a Box<RenderBox + Send> i need to coerce it to a Box<RenderBox> before it becomes useful. Not that that's a blocker, but it's annoying.

The code that is causing this error is below:

fn make_div() -> Box<dyn RenderBox> {
    box_html! {
        div(id="renders-incorrectly");
    }
}

The final div with id renders-incorrectly doesn't render <div id="renders-incorrectly"></div>. Instead, it renders <div id="renders-incorrectly"> and then appends a closing </div> at the end of the entire document. Replacing that div with:

:Raw("<div id=\"renders-correctly\"></div>");

fixes the problem, although I think they should be the same thing.

I'd like to look into this problem and try to fix it myself when I get the time.

I had some code fail on me with borrow errors that I found impossible to resolve without jumping through hoops like wrapper types and other hacks

fn foo() -> impl RenderOnce {
    let b = true;
    html!(
        @if !b {
            : "hello";
        }
    )
}

It's common in Rust web server frameworks to manage instances of bytes::Bytes, which is essentially a reference counted Vec. It's sufficiently ubiquitous that I think there'd be value in adding write_to_bytes or into_bytes to Template (perhaps behind a feature flag).

Say I wanted to make a layout that I can inject different content into based on a route. How could I go about doing so?

fn layout(page_title: String, content: ???) -> String {
  format!("{}",html!{
    head {
      title : page_title;
    }
    body {
      :content
    }
  })
}

fn home_content() -> Box<RenderOnce> {

  box_html! {
    h1 { :"Home Page" }
  }
}

fn about_content() -> Box<RenderOnce> {

  box_html! {
    h1 { :"About Us" }
  }
}

fn contact_content() -> Box<RenderOnce> {

  box_html! {
    h1 { :"Contact Us" }
  }
}

//and i could call the layout like this

layout(String::from("Home"),home_content());
layout(String::from("About"),about_content());
layout(String::from("Contact"),contact_content());

I want to fold some Horrorshow templates, I'm using Horrorshow to make directory listings. However, I'm having a hard time understanding how to make this work, because I can't match on the output of html! and I can't fold over them either.

I'm sorry for the glorified support request, I'll try to rework your advice into a pull-request which adds examples to the documentation if you like.

Here's the code I want to write, but the only way to make it work I have found is passing around the rendered HTML by calling .into_string().unwrap() on the html! output every time.

(Sorry for the large blurb of code, the first map is largely irrelevant but I thought it would be useful for context.)

  fn list_directories_recursive(&self, path: &Path) -> Option<String> {
        let listings = path
        .read_dir().unwrap()
        .filter_map(|de| de.ok())         // remove invalid paths
        .map(|de| de.path())              // DirectoryEntry -> Path
        .filter(|p| self.visible_path(p)) // remove invisible paths
        .map(|path| {
            if let &Some(href) = &path.as_os_str().to_str() {
                if let &Some(file_name) = &path.file_name() {
                    if let Some(name) = file_name.to_str() {
                        let href = href.replacen(".", "", 1); // ./thing -> /thing
                        let name = name.replacen("/", "", 1); // ./dir/thing -> thing

                        return Some((path, href, name));
                    }
                }
            }

            None
        })
        .filter_map(|s| s)               // remove empty/non-UTF directories
        .map(|(path, href, name)| {      // Path -> String
            html! {
                @if self.list_recursively && path.is_dir() {
                    @if let Some(sub) = self.list_directories_recursive(&path) {
                        : sub
                    }
                }
                tr {
                    td {
                        a(href=&href) {
                            : name
                        }
                    }
                }
            }
        })
        .fold(html! {}, |acc, html| html! {
            : acc;
            : html;
        })
        .into_string().unwrap();

        if listings.len() != 0 {
            Some(listings)
        } else {
            None
        }

This is necessary to be able to safely e.g., have colors for elements that are determined at runtime. It is also necessary to support proper URL handling.

The data structure created by horrorshow might easily be suitable to create a DOM from it as well, in parallel to serialization to text-encoded HTML. Some features of horrorshow might be unsupported (I'm unsure as to how much raw text can be used with modern DOM APIs), but that might be acceptable for use cases.

The typed-html crate provides something some steps in that direction (I haven't seen an example of actual shared HTML, but it can be used to render either to HTML or to dodrio), but is not actively maintained any more, and horrorshow's syntax seems nicer to me.

The application I see for it would be to use the same code to render things server side, but (with a vastly different backend) to also perform client-side updates from WASM.

There was one previous issue in that direction (#29) where DOM was described as out-of-scope, so this is more about exploring DOM creation based on horrorshow, for which I'd like to gather input here:

• Has creating a DOM from RenderOnce objects been attempted?
• Are there any major known showstoppers?
• Would the project be open to (possibly under a feature flag) exposing internals that would allow other crates to implement DOM rendering based on horrorshow's templates? (I'm far from understanding its internals yet, but that could for example be a trait around TemplateBuffer that can be implemented by a DOM builder.)

Hi, I think I have a (partial) solution to the nesting problem: a function to format content as-if it is a nested and indented HTML element.

For instance, if I generate some HTML like so:

let content = html! {
    ul {
        li { : "toot" }
    }
}

I get the following HTML:

<ul><li>toot</li></ul>

As an aside, this puzzles me, is there anything I can do to get indented output? It'd be a great feature to me, I would expect output like this

<ul>
    <li>
        toot
    </li>
</ul>

Anyway, now I want to insert it into an HTML page:

let page = html! {
    html {
        body {
            : Raw(content)
        }
    }
}

And this gets me:

<html><body><ul><li>toot</li></ul></body></html>

Now, what I'm suggesting is a function or character to insert raw text with newlines and an indent, like so:

let page = html! {
    html {
        body {
            > content
        }
    }
}

Or perhaps: > Raw(content), or : Block(content), or some other variant.

For the result:

<html><body>
    <ul><li>toot</li></ul>
</body></html>

It would take the indent level from the parent's indent level and add one to it. If the raw content is multiline, it would indent all lines separately, like so:

<html><body>
    <ul><li>toot</li></ul>
    <ul><li>toot</li></ul>
</body></html>

What do you think? Would this be hard to implement? It'd really be a boon to getting nice formatted HTML output out of my Markdown server project (https://gitlab.com/willemmali-rust/markbrowse).