sycamore-rs · lukechu10 · Dec 28, 2021 · Nov 28, 2021 · Nov 28, 2021 · Nov 30, 2021
diff --git a/Cargo.toml b/Cargo.toml
@@ -8,6 +8,7 @@ members = [
   "examples/components",
   "examples/context",
   "examples/counter",
+  "examples/page-visit-counter-tailwindcss",
   "examples/hello",
   "examples/hello-builder",
   "examples/hydrate",

diff --git a/examples/page-visit-counter-tailwindcss/Cargo.toml b/examples/page-visit-counter-tailwindcss/Cargo.toml
@@ -0,0 +1,17 @@
+[package]
+name = "page-visit-counter-tailwindcss"
+version = "0.1.0"
+edition = "2018"
+publish = false
+authors = ["Aayush Attri <attriaayush@yahoo.com>"]
+
+# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
+
+[dependencies]
+reqwasm = "0.4.0"
+anyhow = "1.0"
+serde = "1.0"
+console_error_panic_hook = "0.1.7"
+console_log = "0.2.0"
+log = "0.4.14"
+sycamore = { path = "../../packages/sycamore", features = ["futures"] }
diff --git a/examples/page-visit-counter-tailwindcss/Trunk.toml b/examples/page-visit-counter-tailwindcss/Trunk.toml
@@ -0,0 +1,9 @@
+[build]
+target = "index.html"
+dist = "dist"
+
+[[hooks]]
+stage = "build"
+command = "sh"
+command_arguments = ["-c", "npx -y -c tailwindcss -o ./dist/.stage/tailwind.css"]
+
diff --git a/examples/page-visit-counter-tailwindcss/index.html b/examples/page-visit-counter-tailwindcss/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link href="/tailwind.css" type="text/css" rel="stylesheet" />
+    <title>TailwindCSS Example App</title>
+  </head>
+  <body></body>
+</html>
diff --git a/examples/page-visit-counter-tailwindcss/src/main.rs b/examples/page-visit-counter-tailwindcss/src/main.rs
@@ -0,0 +1,61 @@
+use anyhow::Result;
+use reqwasm::http::Request;
+use serde::{Deserialize, Serialize};
+use sycamore::futures::spawn_local_in_scope;
+use sycamore::prelude::*;
+
+// API that counts visits to the web-page
+const API_BASE_URL: &str = "https://api.countapi.xyz/hit";
+
+#[derive(Serialize, Deserialize, Default, Debug)]
+struct Visits {
+    value: u64,
+}
+
+async fn fetch_visits(id: &str) -> Result<Visits> {
+    let url = format!("{}/{}/hits", API_BASE_URL, id);
+    let resp = Request::get(&url).send().await?;
+
+    let body = resp.json::<Visits>().await?;
+    Ok(body)
+}
+
+#[component(RenderVisits<G>)]
+fn render_visits(counter: ReadSignal<u64>) -> View<G> {
+    view! {
+        div(class="flex h-screen") {
+            div(class="m-auto") {
+            h1(class="text-3xl text-blue-700 mb-2 p-1") { "Page Visit Counter" }
+            p(class="text-xl p-2") {
+                "Total visits: "
+                span(class="text-green-500") {
+                    (counter.get())
+                }
+                }
+            }
+        }
+    }
+}
+
+#[component(App<G>)]
+fn app() -> View<G> {
+    let counter = Signal::<u64>::new(0);
+
+    create_effect(cloned!((counter) => move || {
+        spawn_local_in_scope(cloned!((counter) => async move {
+            let website_id = "page-visit-counter-tailwindcss.tyz";
+            let visits = fetch_visits(website_id).await.unwrap_or_default();
+
+            counter.set(visits.value);
+        }))
+    }));
+
+    view! { RenderVisits(counter.handle()) }
+}
+
+fn main() {
+    console_error_panic_hook::set_once();
+    console_log::init_with_level(log::Level::Debug).unwrap();
+
+    sycamore::render(|| view! { App() });
+}
diff --git a/examples/page-visit-counter-tailwindcss/tailwind.css b/examples/page-visit-counter-tailwindcss/tailwind.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/website/sitemap_index.xml b/website/sitemap_index.xml
@@ -78,6 +78,7 @@
 <url><loc>https://sycamore-rs.netlify.app/examples/higher-order-components</loc><changefreq>monthly</changefreq><priority>0.5</priority></url>
 <url><loc>https://sycamore-rs.netlify.app/examples/hydrate</loc><changefreq>monthly</changefreq><priority>0.5</priority></url>
 <url><loc>https://sycamore-rs.netlify.app/examples/iteration</loc><changefreq>monthly</changefreq><priority>0.5</priority></url>
+<url><loc>https://sycamore-rs.netlify.app/examples/page-visit-counter-tailwindcss</loc><changefreq>monthly</changefreq><priority>0.5</priority></url>
 <url><loc>https://sycamore-rs.netlify.app/examples/ssr</loc><changefreq>monthly</changefreq><priority>0.5</priority></url>
 <url><loc>https://sycamore-rs.netlify.app/examples/todomvc</loc><changefreq>monthly</changefreq><priority>0.5</priority></url>
 <url><loc>https://sycamore-rs.netlify.app/examples/tweened</loc><changefreq>monthly</changefreq><priority>0.5</priority></url>