~eanyanwu/toph

6027b37d013d6303497bec308871ecdc9d909105 — Eze 2 months ago e9978e8
Add README example
4 files changed, 81 insertions(+), 1 deletions(-)

M README.md
A assets/html-output.png
A components.html
M src/lib.rs
M README.md => README.md +42 -1
@@ 1,3 1,44 @@
# Toph 
# Toph

Server-side html templating in Rust.

Here is an example to whet your appetite:

![HTML Output](./assets/html-output.png)

```rust
use toph::component::{stack, cluster};
use toph::tag::{div_, body_, button_, head_, html_, doctype_};
use toph::{Node, attr};

const BUTTON: &str = "
button {
  padding: 0.5rem 1.25rem;
  font-weight: bold;
  border: 2px solid black;
  box-shadow: 2px 2px black;
}";

const CARD: &str = ".card { padding: 1rem; border: 5px solid black; }";

pub fn custom_card<I: IntoIterator<Item = N>, N>(children: I) -> Node
where
    N: Into<Node>,
{
    div_.with(attr![class = "card"])
        .stylesheet(CARD)
        .set(children)
}

fn main() {
    let button = |text: &str| button_.set([text]).stylesheet(BUTTON);
    let left = custom_card([stack(3, [button("Hello"), button("World")])]);
    let right = custom_card([stack(3, [button("Goodbye"), button("World")])]);
    let html = [
        doctype_,
        html_.set([head_, body_.set([cluster(3, [left, right])])]),
    ];

    std::fs::write("components.html", Node::render(html)).unwrap();
}
```

A assets/html-output.png => assets/html-output.png +0 -0
A components.html => components.html +35 -0
@@ 0,0 1,35 @@
<!DOCTYPE html><html><head><style>t-stack {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

t-stack>* {
  margin-block: 0;
}

t-stack>*+* {
  margin-block-start: var(--t-stack-space);
}

t-stack:only-child {
  block-size: 100%;
}

t-stack> :nth-child(3) {
  margin-block-end: auto;
}
</style><style>.card { padding: 1rem; border: 5px solid black; }</style><style>
button {
  padding: 0.5rem 1.25rem;
  font-weight: bold;
  border: 2px solid black;
  box-shadow: 2px 2px black;
}</style><style>t-cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--t-cluster-gap);
  justify-content: flex-start;
  align-items: center;
}
</style></head><body><t-cluster style="--t-cluster-gap: 1.096875rem;"><div class="card"><t-stack style="--t-stack-space: 1.096875rem;"><button>Hello</button><button>World</button></t-stack></div><div class="card"><t-stack style="--t-stack-space: 1.096875rem;"><button>Goodbye</button><button>World</button></t-stack></div></t-cluster></body></html>
\ No newline at end of file

M src/lib.rs => src/lib.rs +4 -0
@@ 148,3 148,7 @@ mod encode;
mod node;

pub use node::{tag, Node};

#[doc = include_str!("../README.md")]
#[cfg(doctest)]
pub struct ReadmeDocTests;