improving example about horrorshow-rs HOT 17 CLOSED

If you mean passing the title as a seperate string then this:

let page_title = "Hello world!";

let actual = html! {
  : doctype::HTML;
  html {
    head {
      title : page_title;
    }
  }
}

from horrorshow-rs.

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...

The point is that you can put any rust expression there (variable, function call, or otherwise). If you want a more thorough example, I recommend that you look at the blog example in the examples directory.

am I also right to assume that normal HTML has to be translated into the rust tags inside html! to work right ?

You can technically put in raw HTML but you need to tell horrorshow to treat it as raw text:

html! {
    html {
        body : Raw("<p>Raw <i>HTML</i>. <b>WARNING</b>: This will <i>not</i> be escaped.</p>")
    }
}

However, unless you're mixing in pre-rendered HTML, I recommend using the rusty syntax (easier to read, IMO, definitely easier to write).

from horrorshow-rs.

@Txuritan thanks a lot for your reply! I knew I was missing something! but this works only for the page title e.g.

  	let page_title = "Hello world!";
    	let mytext = "this is just a text";

//Response::text("Welcome to your first app :)")
let actual = html! {
: doctype::HTML;
html {
head {
title : page_title;
}
body {
// attributes
h1(id="heading") {
// Insert escaped text
: "Hello! This is "
}
p {
// Insert raw text (unescaped)
: Raw("Let's count to 10!")

            }
            
            h2 (id="test") {
                // Insert raw text (unescaped)
                : mytext;
            }

let mytext = "this is just a text"; doesn't seem to appear!

from horrorshow-rs.

@Stebalien thanks a lot for your reply. Can you use variables in raw?
My question was just to understand how it works in practice. Sometimes is easier to port a design made in HTML but my understanding is that with horror show the philosophy is to write the html equivalent in rust right ?

from horrorshow-rs.

@Txuritan sorry..my bad I was actually running the wrong file! on the same spirit how would you use CSS in the example ?

from horrorshow-rs.

Can you use variables in raw?

You can put anything you want. Everything between the : and the ; is a normal rust expression (Raw is actually just a normal tuple struct with a special Render implementation that doesn't escape the text).

CSS

I'd suggest putting it in a separate file and linking to it using link(rel="stylesheet", type="text/css", href="path/to/my.css"); (as you would in normal HTML).

My question was just to understand how it works in practice. Sometimes is easier to port a design made in HTML but my understanding is that with horror show the philosophy is to write the html equivalent in rust right ?

Horrorshow isn't very opinionated; it's not a framework. It's really just a tool to allow easily building HTML documents in rust without a bunch of nasty string formatting and manual text escaping (which is rather easy to get wrong).

However, if you just want to include a bunch of pre-formatted HTML (no variables), you can use the include_str macro from the standard library along with Raw to compile it into your program. That is:

html! {
    html {
        head {
            title : "my title";
        }
        body {
            : "some content";
            : Raw(include_str!("static.html"))
        }
    }
}

from horrorshow-rs.

@Stebalien thanks a lot for your reply!! much appreciated. For some javascript that has to be in the is there any way to do it without using raw and escaping all the tags manually ?

from horrorshow-rs.

Unfortunately, no. Horrorshow doesn't understand javascript (or javascript escaping). If you absolutely have to inline the javascript in a head element, you'll have to escape it yourself (although Raw(my_js.replace('/', "\\/")) should do it).

I've considered adding support for, e.g., inline js/css but, doing that correctly would probably require understanding different HTML tags. At the moment, horrorshow is actually quite dumb. It just turns tag; into <tag />, tag { } into <tag></tag>, and tag : "thing" into <tag>thing</tag>. It doesn't actually make any decisions based on tag.

from horrorshow-rs.

@Stebalien thanks a lot. This is very useful!

from horrorshow-rs.

@Stebalien I managed to display data so thanks again! One issue that I think also a future example could benefit from is how to write forms?
form (action="/note" method="POST" enctype="text/plain") or also
p (form action...) do not seem to work
error: no rules expected the token append_attrs
--> main.rs:123:14
|
123 | let actual = html! {
| _________^
124 | | : doctype::HTML;
125 | | html {
126 | | head {
... |
192 | | }
193 | | }.into_string().unwrap();
| |^
|
thanks!

from horrorshow-rs.

Ah. The issue here isn't forms, its specifying multiple attributes. You need commas between them. I've updated the main example to show how to do this.

The other issue is #18 but, unfortunately, fixing this is next to impossible.

from horrorshow-rs.

@Stebalien thanks again for the prompt help 👍 I saw the updated example. Note that it works only with use horrorshow::helper::doctype; not horror show::doctype so you might want to fix that.

Now

 input(type="text" ,name="Title", placeholder="Some text");
                 input (type="submit");

works fine!

but textarea (name="Notes", cols="40", rows="5"); doesn't like it gets populated with the code immediately after it any idea? :)

from horrorshow-rs.

Note that it works only with use horrorshow::helper::doctype; not horror show::doctype so you might want to fix that.

Hm. None of the examples I know about use horrorshow::doctype (they all import doctype using use horrorshow::helpers::* and then use it directly).

Now...

No idea. Could you post a complete example?

from horrorshow-rs.

sure

        (GET) (/t) => {
        	
        	let page_title = "Notes App";
        	let mytext = "Note App I am a variable mytext";
        	let batman = "Gotham";
        	let superman = "Superman will arrive shortly";
        	
let actual = format!("{}", html! {
        : doctype::HTML;
        html {
            head {
                title : page_title;
                link(rel="stylesheet", type="text/css", href="https://cloud.typography.com/7964312/7143592/css/fonts.css");
            }
            body {
                // attributes
                h1(id="heading") {
                    // Insert escaped text
                    : "Template working with variables now"
             
                }
               
                            
                //style (font-family="Tugsten A;")
                p (style= "font-family: Gotham A, Gotham B;font-style: normal;font-weight: 400;"){
                    // Insert raw text = (unescaped)
                    
                    : batman;
                    : "Batman is here";
                 
                 form (action="/note", method="POST", enctype="text/plain");
                
                 
                 input(type="text" ,name="Title", placeholder="Some text");
                 input (type="submit");
                 textarea (name="Notes", cols="40", rows="5");

                  
                }
                
                p (style= "font-family: Tungsten A, Tungsten B;font-style: normal;font-weight: 400;font-size:30pt;"){
                   
  
                    : superman;
                    
         
                }

                
                h2 (id="test") {
                    // Insert raw text (unescaped)
                    : mytext;
                }
                ol(id="count") {
                    // You can embed for loops, while loops, and if statements.
                    @ for i in 0..10 {
                        li(first? = (i == 0)) {
                            // Format some text.
                            : format_args!("{}", i+1)
                        }
                    }
                }
                // You need semi-colons for tags without children.
                br; br;
                p {
                    // You can also embed closures.
                    |tmpl| {
                        tmpl << "Easy!";

                    }
                }
            }
        }
    });
    
    
            rouille::Response::html (actual)

        },

returns

from horrorshow-rs.

okay a bit of a hack ;) for now but it works

:Raw("</textarea>");

should be passed after

textarea (name="abcd"....)

to avoid the issue above

from horrorshow-rs.

Actually, it looks like you want textarea(name="abcde",...) {}. Note the {}. textarea(name="abcde"); will be rendered as <textarea name="abcde"/>, textarea(name="abcde") {} will be rendered as <textarea name="abcde"></textarea>.

P.s., please try to nicely format code examples (backticks + proper indentation). It makes them much easier to read.

from horrorshow-rs.

@Stebalien yeah!! 💯 this does it!! Thanks to your great help it now works perfectly fine 🥇
sorry for the formatting...just very new to rust!

from horrorshow-rs.