Add hackernews-axum example

2022-11-15 14:08:09 -08:00 · 2022-11-15 14:08:09 -08:00 · 3885816699
parent 7498282936
commit 3885816699
16 changed files with 1048 additions and 1 deletions
--- a/Cargo.toml
+++ b/Cargo.toml
@ -19,6 +19,7 @@ members = [
  "examples/counters-stable",
  "examples/fetch",
  "examples/hackernews",
+  "examples/hackernews-axum",
  "examples/parent-child",
  "examples/router",
  "examples/todomvc",
--- a/examples/hackernews-axum/Cargo.toml
+++ b/examples/hackernews-axum/Cargo.toml
@ -0,0 +1,39 @@
+[package]
+name = "leptos-hackernews-axum"
+version = "0.1.0"
+edition = "2021"
+
+[lib]
+crate-type = ["cdylib", "rlib"]
+
+[dependencies]
+anyhow = "1"
+console_log = "0.2"
+console_error_panic_hook = "0.1"
+futures = "0.3"
+cfg-if = "1"
+leptos = { path = "../../../leptos/leptos", default-features = false, features = [
+	"serde",
+] }
+leptos_meta = { path = "../../../leptos/meta", default-features = false }
+leptos_router = { path = "../../../leptos/router", default-features = false }
+log = "0.4"
+simple_logger = "2"
+serde = { version = "1", features = ["derive"] }
+serde_json = "1"
+gloo-net = { version = "0.2", features = ["http"] }
+reqwest = { version = "0.11", features = ["json"] }
+axum = { version = "0.5.17", optional=true }
+tower = { version = "0.4.13", optional=true }
+tower-http = { version = "0.3.4", features = ["fs"], optional = true }
+tokio = { version = "1.0", features = ["full"], optional = true }
+
+[features]
+default = ["csr"]
+csr = ["leptos/csr", "leptos_meta/csr", "leptos_router/csr"]
+hydrate = ["leptos/hydrate", "leptos_meta/hydrate", "leptos_router/hydrate"]
+ssr = ["dep:axum", "dep:tower", "dep:tower-http", "dep:tokio", "leptos/ssr", "leptos_meta/ssr", "leptos_router/ssr"]
+
+[package.metadata.cargo-all-features]
+denylist = ["axum", "tower", "tower-http", "tokio"]
+skip_feature_sets = [["csr", "ssr"], ["csr", "hydrate"], ["ssr", "hydrate"]]
--- a/examples/hackernews-axum/LICENSE
+++ b/examples/hackernews-axum/LICENSE
@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Greg Johnston
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
--- a/examples/hackernews-axum/README.md
+++ b/examples/hackernews-axum/README.md
@ -0,0 +1,20 @@
+# Leptos Hacker News Example with Axum
+
+This example creates a basic clone of the Hacker News site. It showcases Leptos' ability to create both a client-side rendered app, and a server side rendered app with hydration, in a single repository. This repo differs from the main Hacker News example by using Axum as it's server.
+
+## Client Side Rendering
+To run it as a Client Side App, you can issue  `trunk serve --open` in the root. This will build the entire
+app into one CRS bundle
+
+## Server Side Rendering With Hydration
+To run it as a server side app with hydration, first you should run 
+```bash
+wasm-pack build --target=web --no-default-features --features=hydrate
+```
+to generate the Webassembly to provide hydration features for the server.
+Then run the server with `cargo run` to serve the server side rendered HTML and the WASM bundle for hydration. 
+```bash
+cargo run --no-default-features --features=ssr
+```
+> Note that if your hydration code changes, you will have to rerun the wasm-pack command above
+> This should be temporary, and vastly improve once cargo-leptos becomes ready for prime time!
--- a/examples/hackernews-axum/index.html
+++ b/examples/hackernews-axum/index.html
@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<link data-trunk rel="rust" data-wasm-opt="z"/>
+		<link data-trunk rel="css" href="./style.css"/>
+	</head>
+	<body></body>
+</html>
--- a/examples/hackernews-axum/src/api.rs
+++ b/examples/hackernews-axum/src/api.rs
@ -0,0 +1,78 @@
+use leptos::Serializable;
+use serde::{Deserialize, Serialize};
+
+pub fn story(path: &str) -> String {
+    format!("https://node-hnapi.herokuapp.com/{path}")
+}
+
+pub fn user(path: &str) -> String {
+    format!("https://hacker-news.firebaseio.com/v0/user/{path}.json")
+}
+
+#[cfg(not(feature = "ssr"))]
+pub async fn fetch_api<T>(path: &str) -> Option<T>
+where
+    T: Serializable,
+{
+    let json = gloo_net::http::Request::get(path)
+        .send()
+        .await
+        .map_err(|e| log::error!("{e}"))
+        .ok()?
+        .text()
+        .await
+        .ok()?;
+    T::from_json(&json).ok()
+}
+
+#[cfg(feature = "ssr")]
+pub async fn fetch_api<T>(path: &str) -> Option<T>
+where
+    T: Serializable,
+{
+    let json = reqwest::get(path)
+        .await
+        .map_err(|e| log::error!("{e}"))
+        .ok()?
+        .text()
+        .await
+        .ok()?;
+    T::from_json(&json).map_err(|e| log::error!("{e}")).ok()
+}
+
+#[derive(Debug, Deserialize, Serialize, PartialEq, Eq, Clone)]
+pub struct Story {
+    pub id: usize,
+    pub title: String,
+    pub points: Option<i32>,
+    pub user: Option<String>,
+    pub time: usize,
+    pub time_ago: String,
+    #[serde(alias = "type")]
+    pub story_type: String,
+    pub url: String,
+    #[serde(default)]
+    pub domain: String,
+    #[serde(default)]
+    pub comments: Option<Vec<Comment>>,
+    pub comments_count: Option<usize>,
+}
+
+#[derive(Debug, Deserialize, Serialize, PartialEq, Eq, Clone)]
+pub struct Comment {
+    pub id: usize,
+    pub level: usize,
+    pub user: Option<String>,
+    pub time: usize,
+    pub time_ago: String,
+    pub content: Option<String>,
+    pub comments: Vec<Comment>,
+}
+
+#[derive(Debug, Deserialize, Serialize, PartialEq, Eq, Clone)]
+pub struct User {
+    pub created: usize,
+    pub id: String,
+    pub karma: i32,
+    pub about: Option<String>,
+}
--- a/examples/hackernews-axum/src/handlers.rs
+++ b/examples/hackernews-axum/src/handlers.rs
@ -0,0 +1,42 @@
+use cfg_if::cfg_if;
+
+cfg_if! {
+    if #[cfg(feature = "ssr")] {
+use axum::{
+    body::{boxed, Body, BoxBody},
+    http::{Request, Response, StatusCode, Uri},
+};
+use tower::ServiceExt;
+use tower_http::services::ServeDir;
+
+pub async fn file_handler(uri: Uri) -> Result<Response<BoxBody>, (StatusCode, String)> {
+    let res = get_static_file(uri.clone()).await?;
+    println!("{:?}", res);
+
+    if res.status() == StatusCode::NOT_FOUND {
+        // try with `.html`
+        // TODO: handle if the Uri has query parameters
+        match format!("{}.html", uri).parse() {
+            Ok(uri_html) => get_static_file(uri_html).await,
+            Err(_) => Err((StatusCode::INTERNAL_SERVER_ERROR, "Invalid URI".to_string())),
+        }
+    } else {
+        Ok(res)
+    }
+}
+
+async fn get_static_file(uri: Uri) -> Result<Response<BoxBody>, (StatusCode, String)> {
+    let req = Request::builder().uri(uri).body(Body::empty()).unwrap();
+
+    // `ServeDir` implements `tower::Service` so we can call it with `tower::ServiceExt::oneshot`
+    // When run normally, the root should be the crate root
+    match ServeDir::new("./pkg").oneshot(req).await {
+        Ok(res) => Ok(res.map(boxed)),
+        Err(err) => Err((
+            StatusCode::INTERNAL_SERVER_ERROR,
+            format!("Something went wrong: {}", err),
+        )),
+    }
+}
+    }
+}
--- a/examples/hackernews-axum/src/lib.rs
+++ b/examples/hackernews-axum/src/lib.rs
@ -0,0 +1,49 @@
+use cfg_if::cfg_if;
+use leptos::*;
+use leptos_meta::*;
+use leptos_router::*;
+mod api;
+mod handlers;
+mod routes;
+use routes::nav::*;
+use routes::stories::*;
+use routes::story::*;
+use routes::users::*;
+
+#[component]
+pub fn App(cx: Scope) -> Element {
+    provide_context(cx, MetaContext::default());
+
+    view! {
+        cx,
+        <div>
+            <Stylesheet href="/static/style.css".into()/>
+            <Router>
+                <Nav />
+                <main>
+                    <Routes>
+                        <Route path="users/:id" element=|cx| view! { cx,  <User/> }/>
+                        <Route path="stories/:id" element=|cx| view! { cx,  <Story/> }/>
+                        <Route path="*stories" element=|cx| view! { cx,  <Stories/> }/>
+                    </Routes>
+                </main>
+            </Router>
+        </div>
+    }
+}
+
+// Needs to be in lib.rs AFAIK because wasm-bindgen needs us to be compiling a lib. I may be wrong.
+cfg_if! {
+    if #[cfg(feature = "hydrate")] {
+        use wasm_bindgen::prelude::wasm_bindgen;
+
+        #[wasm_bindgen]
+        pub fn main() {
+            _ = console_log::init_with_level(log::Level::Debug);
+            console_error_panic_hook::set_once();
+            leptos::hydrate(body().unwrap(), move |cx| {
+                view! { cx, <App/> }
+            });
+        }
+    }
+}
--- a/examples/hackernews-axum/src/main.rs
+++ b/examples/hackernews-axum/src/main.rs
@ -0,0 +1,133 @@
+use cfg_if::cfg_if;
+use leptos::*;
+
+// boilerplate to run in different modes
+cfg_if! {
+    if #[cfg(feature = "ssr")] {
+        // use actix_files::{Files, NamedFile};
+        // use actix_web::*;
+        use axum::{
+            routing::{get},
+            Router,
+            body::Bytes,
+            response::{IntoResponse, Response},
+        };
+        use std::net::SocketAddr;
+        use futures::StreamExt;
+        use leptos_meta::*;
+        use leptos_router::*;
+        use leptos_hackernews_axum::*;
+        use crate::handlers::file_handler;
+        use std::io;
+
+        #[get("/static/style.css")]
+        async fn css() -> impl Responder {
+            NamedFile::open_async("./style.css").await
+        }
+
+        // match every path — our router will handle actual dispatch
+        #[get("{tail:.*}")]
+        async fn render_app(req: Request) -> StreamBody<impl Stream<Item = io::Result<Bytes>> {
+            let path = req.path();
+
+            let query = req.query_string();
+            let path = if query.is_empty() {
+                "http://leptos".to_string() + path
+            } else {
+                "http://leptos".to_string() + path + "?" + query
+            };
+
+            let app = move |cx| {
+                let integration = ServerIntegration { path: path.clone() };
+                provide_context(cx, RouterIntegrationContext::new(integration));
+
+                view! { cx, <App/> }
+            };
+
+            let head = r#"<!DOCTYPE html>
+                <html lang="en">
+                    <head>
+                        <meta charset="utf-8"/>
+                        <meta name="viewport" content="width=device-width, initial-scale=1"/>
+                        <script type="module">import init, { main } from '/pkg/leptos_hackernews_axum.js'; init().then(main);</script>"#;
+            let tail = "</body></html>";
+
+                let stream = futures::stream::once(async { head.to_string() })
+                    .chain(render_to_stream(move |cx| {
+                        let app = app(cx);
+                        let head = use_context::<MetaContext>(cx)
+                            .map(|meta| meta.dehydrate())
+                            .unwrap_or_default();
+                        format!("{head}</head><body>{app}")
+                    }))
+                    .chain(futures::stream::once(async { tail.to_string() }))
+                    .map(|html| Ok(Bytes::from(html)) as Result<Bytes>);
+                    StreamBody::new(stream)
+        }
+
+        #[tokio::main]
+        async fn main() -> std::io::Result<()> {
+            let addr = SocketAddr::from(([127, 0, 0, 1], 3000));
+
+            log::debug!("serving at {addr}");
+
+            simple_logger::init_with_level(log::Level::Debug).expect("couldn't initialize logging");
+
+            // uncomment these lines (and .bind_openssl() below) to enable HTTPS, which is sometimes
+            // necessary for proper HTTP/2 streaming
+
+            // load TLS keys
+            // to create a self-signed temporary cert for testing:
+            // `openssl req -x509 -newkey rsa:4096 -nodes -keyout key.pem -out cert.pem -days 365 -subj '/CN=localhost'`
+            // let mut builder = SslAcceptor::mozilla_intermediate(SslMethod::tls()).unwrap();
+            // builder
+            //     .set_private_key_file("key.pem", SslFiletype::PEM)
+            //     .unwrap();
+            // builder.set_certificate_chain_file("cert.pem").unwrap();
+
+            // HttpServer::new(|| {
+            //     App::new()
+            //         .service(css)
+            //         .service(
+            //             web::scope("/pkg")
+            //                 .service(Files::new("", "./dist"))
+            //                 .wrap(middleware::Compress::default()),
+            //         )
+            //         .service(render_app)
+            // })
+            // .bind(("127.0.0.1", 8080))?
+            // // replace .bind with .bind_openssl to use HTTPS
+            // //.bind_openssl(&format!("{}:{}", host, port), builder)?
+            // .run()
+            // .await
+
+            // build our application with a route
+            let app = Router::new()
+            // `GET /` goes to `root`
+            .nest("/pkg", get(file_handler));
+
+            // run our app with hyper
+            // `axum::Server` is a re-export of `hyper::Server`
+            tracing::debug!("listening on {}", addr);
+            axum::Server::bind(&addr)
+                .serve(app.into_make_service())
+                .await
+                .unwrap();
+
+        }
+
+        // client-only stuff for Trunk
+        else {
+            use leptos_hackernews::*;
+
+            pub fn main() {
+                console_error_panic_hook::set_once();
+                _ = console_log::init_with_level(log::Level::Debug);
+                console_error_panic_hook::set_once();
+                mount_to_body(|cx| {
+                    view! { cx, <App/> }
+                });
+            }
+        }
+    }
+}
--- a/examples/hackernews-axum/src/routes.rs
+++ b/examples/hackernews-axum/src/routes.rs
@ -0,0 +1,4 @@
+pub mod nav;
+pub mod stories;
+pub mod story;
+pub mod users;
--- a/examples/hackernews-axum/src/routes/nav.rs
+++ b/examples/hackernews-axum/src/routes/nav.rs
@ -0,0 +1,30 @@
+use leptos::*;
+use leptos_router::*;
+
+#[component]
+pub fn Nav(cx: Scope) -> Element {
+    view! { cx,
+        <header class="header">
+            <nav class="inner">
+                <A href="/">
+                    <strong>"HN"</strong>
+                </A>
+                <A href="/new">
+                    <strong>"New"</strong>
+                </A>
+                <A href="/show">
+                    <strong>"Show"</strong>
+                </A>
+                <A href="/ask">
+                    <strong>"Ask"</strong>
+                </A>
+                <A href="/job">
+                    <strong>"Jobs"</strong>
+                </A>
+                <a class="github" href="http://github.com/gbj/leptos" target="_blank" rel="noreferrer">
+                    "Built with Leptos"
+                </a>
+            </nav>
+        </header>
+    }
+}
--- a/examples/hackernews-axum/src/routes/stories.rs
+++ b/examples/hackernews-axum/src/routes/stories.rs
@ -0,0 +1,154 @@
+use leptos::*;
+use leptos_router::*;
+
+use crate::api;
+
+fn category(from: &str) -> &'static str {
+    match from {
+        "new" => "newest",
+        "show" => "show",
+        "ask" => "ask",
+        "job" => "jobs",
+        _ => "news",
+    }
+}
+
+#[component]
+pub fn Stories(cx: Scope) -> Element {
+    let query = use_query_map(cx);
+    let params = use_params_map(cx);
+    let page = move || {
+        query
+            .with(|q| q.get("page").and_then(|page| page.parse::<usize>().ok()))
+            .unwrap_or(1)
+    };
+    let story_type = move || {
+        params
+            .with(|p| p.get("stories").cloned())
+            .unwrap_or_else(|| "top".to_string())
+    };
+    let stories = create_resource(
+        cx,
+        move || (page(), story_type()),
+        move |(page, story_type)| async move {
+            let path = format!("{}?page={}", category(&story_type), page);
+            api::fetch_api::<Vec<api::Story>>(&api::story(&path)).await
+        },
+    );
+
+    let hide_more_link = move || stories.read().unwrap_or(None).unwrap_or_default().len() < 28;
+
+    view! {
+        cx,
+        <div class="news-view">
+            <div class="news-list-nav">
+                <span>
+                    {move || if page() > 1 {
+                        view! {
+                            cx,
+                            <a class="page-link"
+                                href=move || format!("/{}?page={}", story_type(), page() - 1)
+                                attr:aria_label="Previous Page"
+                            >
+                                "< prev"
+                            </a>
+                        }
+                    } else {
+                        view! {
+                            cx,
+                            <span class="page-link disabled" aria-hidden="true">
+                                "< prev"
+                            </span>
+                        }
+                    }}
+                </span>
+                <span>"page " {page}</span>
+                <span class="page-link"
+                    class:disabled=hide_more_link
+                    aria-hidden=hide_more_link
+                >
+                    <a href=move || format!("/{}?page={}", story_type(), page() + 1)
+                        aria-label="Next Page"
+                    >
+                        "more >"
+                    </a>
+                </span>
+            </div>
+            <main class="news-list">
+                <div>
+                    <Suspense fallback=view! { cx,  <p>"Loading..."</p> }>
+                        {move || match stories.read() {
+                            None => None,
+                            Some(None) => Some(view! { cx,  <p>"Error loading stories."</p> }),
+                            Some(Some(stories)) => {
+                                Some(view! { cx,
+                                    <ul>
+                                        <For each=move || stories.clone() key=|story| story.id>{
+                                            move |cx: Scope, story: &api::Story| {
+                                                view! { cx,
+                                                    <Story story=story.clone() />
+                                                }
+                                            }
+                                        }</For>
+                                    </ul>
+                                })
+                            }
+                        }}
+                    </Suspense>
+                </div>
+            </main>
+        </div>
+    }
+}
+
+#[component]
+fn Story(cx: Scope, story: api::Story) -> Element {
+    view! { cx,
+         <li class="news-item">
+            <span class="score">{story.points}</span>
+            <span class="title">
+                {if !story.url.starts_with("item?id=") {
+                    view! { cx,
+                        <span>
+                            <a href=story.url target="_blank" rel="noreferrer">
+                                {story.title.clone()}
+                            </a>
+                            <span class="host">"("{story.domain}")"</span>
+                        </span>
+                    }
+                } else {
+                    let title = story.title.clone();
+                    view! { cx,  <A href=format!("/stories/{}", story.id)>{title.clone()}</A> }
+                }}
+            </span>
+            <br />
+            <span class="meta">
+                {if story.story_type != "job" {
+                    view! { cx,
+                        <span>
+                            {"by "}
+                            {story.user.map(|user| view ! { cx, <A href=format!("/users/{}", user)>{user.clone()}</A>})}
+                            {format!(" {} | ", story.time_ago)}
+                            <A href=format!("/stories/{}", story.id)>
+                                {if story.comments_count.unwrap_or_default() > 0 {
+                                    format!("{} comments", story.comments_count.unwrap_or_default())
+                                } else {
+                                    "discuss".into()
+                                }}
+                            </A>
+                        </span>
+                    }
+                } else {
+                    let title = story.title.clone();
+                    view! { cx,  <A href=format!("/item/{}", story.id)>{title.clone()}</A> }
+                }}
+            </span>
+            {(story.story_type != "link").then(|| view! { cx,
+                <span>
+                    //{" "}
+                    <span class="label">{story.story_type}</span>
+                </span>
+            })}
+        </li>
+    }
+}
--- a/examples/hackernews-axum/src/routes/story.rs
+++ b/examples/hackernews-axum/src/routes/story.rs
@ -0,0 +1,103 @@
+use crate::api;
+use leptos::*;
+use leptos_router::*;
+
+#[component]
+pub fn Story(cx: Scope) -> Element {
+    let params = use_params_map(cx);
+    let story = create_resource(
+        cx,
+        move || params().get("id").cloned().unwrap_or_default(),
+        move |id| async move { api::fetch_api::<api::Story>(&api::story(&format!("item/{id}"))).await },
+    );
+
+    view! { cx,
+        <div>
+            {move || story.read().map(|story| match story {
+                None => view! { cx,  <div class="item-view">"Error loading this story."</div> },
+                Some(story) => view! { cx,
+                    <div class="item-view">
+                        <div class="item-view-header">
+                        <a href=story.url target="_blank">
+                            <h1>{story.title}</h1>
+                        </a>
+                        <span class="host">
+                            "("{story.domain}")"
+                        </span>
+                        {story.user.map(|user| view! { cx,  <p class="meta">
+                            {story.points}
+                            " points | by "
+                            <A href=format!("/users/{}", user)>{user.clone()}</A>
+                            {format!(" {}", story.time_ago)}
+                        </p>})}
+                        </div>
+                        <div class="item-view-comments">
+                        <p class="item-view-comments-header">
+                            {if story.comments_count.unwrap_or_default() > 0 {
+                                format!("{} comments", story.comments_count.unwrap_or_default())
+                            } else {
+                                "No comments yet.".into()
+                            }}
+                        </p>
+                        <ul class="comment-children">
+                            <For each=move || story.comments.clone().unwrap_or_default() key=|comment| comment.id>
+                                {move |cx, comment: &api::Comment| view! { cx,  <Comment comment=comment.clone() /> }}
+                            </For>
+                        </ul>
+                    </div>
+                </div>
+            }})}
+        </div>
+    }
+}
+
+#[component]
+pub fn Comment(cx: Scope, comment: api::Comment) -> Element {
+    let (open, set_open) = create_signal(cx, true);
+
+    view! { cx,
+        <li class="comment">
+        <div class="by">
+            <A href=format!("/users/{}", comment.user.clone().unwrap_or_default())>{comment.user.clone()}</A>
+            {format!(" {}", comment.time_ago)}
+        </div>
+        <div class="text" inner_html=comment.content></div>
+        {(!comment.comments.is_empty()).then(|| {
+            view! { cx,
+                <div>
+                    <div class="toggle" class:open=open>
+                        <a on:click=move |_| set_open.update(|n| *n = !*n)>
+                            {
+                                let comments_len = comment.comments.len();
+                                move || if open() {
+                                    "[-]".into()
+                                } else {
+                                    format!("[+] {}{} collapsed", comments_len, pluralize(comments_len))
+                                }
+                            }
+                        </a>
+                    </div>
+                    {move || open().then({
+                        let comments = comment.comments.clone();
+                        move || view! { cx,
+                            <ul class="comment-children">
+                                <For each=move || comments.clone() key=|comment| comment.id>
+                                    {|cx, comment: &api::Comment| view! { cx, <Comment comment=comment.clone() /> }}
+                                </For>
+                            </ul>
+                        }
+                    })}
+                </div>
+            }
+        })}
+        </li>
+    }
+}
+
+fn pluralize(n: usize) -> &'static str {
+    if n == 1 {
+        " reply"
+    } else {
+        " replies"
+    }
+}
--- a/examples/hackernews-axum/src/routes/users.rs
+++ b/examples/hackernews-axum/src/routes/users.rs
@ -0,0 +1,39 @@
+use crate::api::{self, User};
+use leptos::*;
+use leptos_router::*;
+
+#[component]
+pub fn User(cx: Scope) -> Element {
+    let params = use_params_map(cx);
+    let user = create_resource(
+        cx,
+        move || params().get("id").cloned().unwrap_or_default(),
+        move |id| async move { api::fetch_api::<User>(&api::user(&id)).await },
+    );
+    view! { cx,
+        <div class="user-view">
+            {move || user.read().map(|user| match user {
+                None => view! { cx,  <h1>"User not found."</h1> },
+                Some(user) => view! { cx,
+                    <div>
+                        <h1>"User: " {&user.id}</h1>
+                        <ul class="meta">
+                            <li>
+                                <span class="label">"Created: "</span> {user.created}
+                            </li>
+                            <li>
+                            <span class="label">"Karma: "</span> {user.karma}
+                            </li>
+                            {user.about.as_ref().map(|about| view! { cx,  <li inner_html=about class="about"></li> })}
+                        </ul>
+                        <p class="links">
+                            <a href=format!("https://news.ycombinator.com/submitted?id={}", user.id)>"submissions"</a>
+                            " | "
+                            <a href=format!("https://news.ycombinator.com/threads?id={}", user.id)>"comments"</a>
+                        </p>
+                    </div>
+                }
+            })}
+        </div>
+    }
+}
--- a/examples/hackernews-axum/style.css
+++ b/examples/hackernews-axum/style.css
@ -0,0 +1,326 @@
+body {
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-size: 15px;
+	background-color: #f2f3f5;
+	margin: 0;
+	padding-top: 55px;
+	color: #34495e;
+	overflow-y: scroll
+}
+
+a {
+	color: #34495e;
+	text-decoration: none
+}
+
+.header {
+	background-color: #335d92;
+	position: fixed;
+	z-index: 999;
+	height: 55px;
+	top: 0;
+	left: 0;
+	right: 0
+}
+
+.header .inner {
+	max-width: 800px;
+	box-sizing: border-box;
+	margin: 0 auto;
+	padding: 15px 5px
+}
+
+.header a {
+	color: rgba(255, 255, 255, .8);
+	line-height: 24px;
+	transition: color .15s ease;
+	display: inline-block;
+	vertical-align: middle;
+	font-weight: 300;
+	letter-spacing: .075em;
+	margin-right: 1.8em
+}
+
+.header a:hover {
+	color: #fff
+}
+
+.header a.active {
+	color: #fff;
+	font-weight: 400
+}
+
+.header a:nth-child(6) {
+	margin-right: 0
+}
+
+.header .github {
+	color: #fff;
+	font-size: .9em;
+	margin: 0;
+	float: right
+}
+
+.logo {
+	width: 24px;
+	margin-right: 10px;
+	display: inline-block;
+	vertical-align: middle
+}
+
+.view {
+	max-width: 800px;
+	margin: 0 auto;
+	position: relative
+}
+
+.fade-enter-active,
+.fade-exit-active {
+	transition: all .2s ease
+}
+
+.fade-enter,
+.fade-exit-active {
+	opacity: 0
+}
+
+@media (max-width:860px) {
+	.header .inner {
+		padding: 15px 30px
+	}
+}
+
+@media (max-width:600px) {
+	.header .inner {
+		padding: 15px
+	}
+
+	.header a {
+		margin-right: 1em
+	}
+
+	.header .github {
+		display: none
+	}
+}
+
+.news-view {
+	padding-top: 45px
+}
+
+.news-list,
+.news-list-nav {
+	background-color: #fff;
+	border-radius: 2px
+}
+
+.news-list-nav {
+	padding: 15px 30px;
+	position: fixed;
+	text-align: center;
+	top: 55px;
+	left: 0;
+	right: 0;
+	z-index: 998;
+	box-shadow: 0 1px 2px rgba(0, 0, 0, .1)
+}
+
+.news-list-nav .page-link {
+	margin: 0 1em
+}
+
+.news-list-nav .disabled {
+	color: #aaa
+}
+
+.news-list {
+	position: absolute;
+	margin: 30px 0;
+	width: 100%;
+	transition: all .5s cubic-bezier(.55, 0, .1, 1)
+}
+
+.news-list ul {
+	list-style-type: none;
+	padding: 0;
+	margin: 0
+}
+
+@media (max-width:600px) {
+	.news-list {
+		margin: 10px 0
+	}
+}
+
+.news-item {
+	background-color: #fff;
+	padding: 20px 30px 20px 80px;
+	border-bottom: 1px solid #eee;
+	position: relative;
+	line-height: 20px
+}
+
+.news-item .score {
+	color: #335d92;
+	font-size: 1.1em;
+	font-weight: 700;
+	position: absolute;
+	top: 50%;
+	left: 0;
+	width: 80px;
+	text-align: center;
+	margin-top: -10px
+}
+
+.news-item .host,
+.news-item .meta {
+	font-size: .85em;
+	color: #626262
+}
+
+.news-item .host a,
+.news-item .meta a {
+	color: #626262;
+	text-decoration: underline
+}
+
+.news-item .host a:hover,
+.news-item .meta a:hover {
+	color: #335d92
+}
+
+.item-view-header {
+	background-color: #fff;
+	padding: 1.8em 2em 1em;
+	box-shadow: 0 1px 2px rgba(0, 0, 0, .1)
+}
+
+.item-view-header h1 {
+	display: inline;
+	font-size: 1.5em;
+	margin: 0;
+	margin-right: .5em
+}
+
+.item-view-header .host,
+.item-view-header .meta,
+.item-view-header .meta a {
+	color: #626262
+}
+
+.item-view-header .meta a {
+	text-decoration: underline
+}
+
+.item-view-comments {
+	background-color: #fff;
+	margin-top: 10px;
+	padding: 0 2em .5em
+}
+
+.item-view-comments-header {
+	margin: 0;
+	font-size: 1.1em;
+	padding: 1em 0;
+	position: relative
+}
+
+.item-view-comments-header .spinner {
+	display: inline-block;
+	margin: -15px 0
+}
+
+.comment-children {
+	list-style-type: none;
+	padding: 0;
+	margin: 0
+}
+
+@media (max-width:600px) {
+	.item-view-header h1 {
+		font-size: 1.25em
+	}
+}
+
+.comment-children .comment-children {
+	margin-left: 1.5em
+}
+
+.comment {
+	border-top: 1px solid #eee;
+	position: relative
+}
+
+.comment .by,
+.comment .text,
+.comment .toggle {
+	font-size: .9em;
+	margin: 1em 0
+}
+
+.comment .by {
+	color: #626262
+}
+
+.comment .by a {
+	color: #626262;
+	text-decoration: underline
+}
+
+.comment .text {
+	overflow-wrap: break-word
+}
+
+.comment .text a:hover {
+	color: #335d92
+}
+
+.comment .text pre {
+	white-space: pre-wrap
+}
+
+.comment .toggle {
+	background-color: #fffbf2;
+	padding: .3em .5em;
+	border-radius: 4px
+}
+
+.comment .toggle a {
+	color: #626262;
+	cursor: pointer
+}
+
+.comment .toggle.open {
+	padding: 0;
+	background-color: transparent;
+	margin-bottom: -.5em
+}
+
+.user-view {
+	background-color: #fff;
+	box-sizing: border-box;
+	padding: 2em 3em
+}
+
+.user-view h1 {
+	margin: 0;
+	font-size: 1.5em
+}
+
+.user-view .meta {
+	list-style-type: none;
+	padding: 0
+}
+
+.user-view .label {
+	display: inline-block;
+	min-width: 4em
+}
+
+.user-view .about {
+	margin: 1em 0
+}
+
+.user-view .links a {
+	text-decoration: underline
+}
--- a/examples/hackernews/README.md
+++ b/examples/hackernews/README.md
@ -14,7 +14,7 @@ wasm-pack build --target=web --no-default-features --features=hydrate
 to generate the Webassembly to provide hydration features for the server.
 Then run the server with `cargo run` to serve the server side rendered HTML and the WASM bundle for hydration. 
 ```bash
-cargo run --no-default-features --features=ssr`
+cargo run --no-default-features --features=ssr
 ```
 > Note that if your hydration code changes, you will have to rerun the wasm-pack command above
 > This should be temporary, and vastly improve once cargo-leptos becomes ready for prime time!