🧱 Use SSR on the website local server.

celestia-island · Oct 29, 2024 · 1f0e9b7 · 1f0e9b7
1 parent 21e26f1
commit 1f0e9b7
Show file tree

Hide file tree

Showing 7 changed files with 76 additions and 55 deletions.
diff --git a/Cargo.toml b/Cargo.toml
@@ -62,7 +62,7 @@ stylist = { version = "^0.13", features = [
     "ssr",
     "hydration",
 ] }
-yew = { version = "^0.21", features = ["ssr", "hydration"] }
+yew = { version = "^0.21", features = ["csr", "ssr", "hydration"] }
 yew-router = "^0.18"
 
 tokio = { version = "^1", features = ["full"] }

diff --git a/website/Cargo.toml b/website/Cargo.toml
@@ -44,6 +44,9 @@ yew = { workspace = true }
 yew-router = { workspace = true }
 
 [dev-dependencies]
+hikari-website = { path = "." }
+hikari-boot = { path = "../packages/boot" }
+
 env_logger = { workspace = true }
 tokio = { workspace = true }
 

diff --git a/website/examples/dev/main.rs b/website/examples/dev/main.rs
@@ -1,13 +1,14 @@
+mod render;
 mod r#static;
 
 use anyhow::Result;
 use log::info;
 use std::net::SocketAddr;
 
-use axum::serve;
+use axum::{serve, Router};
 use tokio::net::TcpListener;
 
-#[tokio::main(flavor = "multi_thread")]
+#[tokio::main]
 async fn main() -> Result<()> {
     env_logger::builder()
         .filter_level(log::LevelFilter::Info)
@@ -18,8 +19,9 @@ async fn main() -> Result<()> {
         .and_then(|s| s.parse().ok())
         .unwrap_or(8080);
 
-    let router = r#static::route()
-        .await?
+    let router = Router::new()
+        .nest("/", r#static::route().await?)
+        .nest("/", render::route().await?)
         .into_make_service_with_connect_info::<SocketAddr>();
 
     info!("Site will run on http://localhost:{port}");

diff --git a/website/examples/dev/render.rs b/website/examples/dev/render.rs
@@ -0,0 +1,55 @@
+use anyhow::Result;
+
+use axum::{
+    extract::Path,
+    http::{header, HeaderMap, StatusCode},
+    response::IntoResponse,
+    routing::get,
+    Router,
+};
+
+use hikari_boot::Application;
+use hikari_website::app::App;
+
+pub async fn html(url: String) -> Result<impl IntoResponse, (StatusCode, String)> {
+    let raw = App::render_to_string(url, Default::default())
+        .await
+        .map_err(|err| (StatusCode::INTERNAL_SERVER_ERROR, err.to_string()))?;
+    let raw = format!(
+        r#"
+<body>
+<div id='app'>
+    <script src='./a.js'></script>
+    <script>
+    (async () => {{
+        await __wasm_vendor_entry('./a.wasm');
+        (await (new __wasm_vendor_entry.WebHandle())).start();
+    }})()
+    </script>
+    {raw}
+</div>
+</body>"#
+    );
+
+    {
+        let mut headers = HeaderMap::new();
+        headers.insert(header::CONTENT_TYPE, "text/html".parse().unwrap());
+
+        Ok((headers, raw))
+    }
+}
+
+pub async fn route() -> Result<Router> {
+    let router = Router::new()
+        .route("/", get(|| async { html("/".to_string()).await }))
+        .route(
+            "/guide/:id",
+            get(move |Path(id): Path<String>| async move { html(format!("/guide/{}", id)).await }),
+        )
+        .route(
+            "/component/:id",
+            get(move |Path(id): Path<String>| async move { html(format!("/component/{}", id)).await }),
+        );
+
+    Ok(router)
+}
diff --git a/website/examples/dev/static.rs b/website/examples/dev/static.rs
@@ -7,29 +7,6 @@ use axum::{
     Router,
 };
 
-pub async fn html() -> Result<impl IntoResponse, (StatusCode, String)> {
-    {
-        let mut headers = HeaderMap::new();
-        headers.insert(header::CONTENT_TYPE, "text/html".parse().unwrap());
-
-        Ok((
-            headers,
-            r#"
-<body>
-<div id='app'>
-    <script src='./a.js'></script>
-    <script>
-    (async () => {
-        await __wasm_vendor_entry('./a.wasm');
-        (await (new __wasm_vendor_entry.WebHandle())).start();
-    })()
-    </script>
-</div>
-</body>"#,
-        ))
-    }
-}
-
 pub async fn wasm() -> Result<impl IntoResponse, (StatusCode, String)> {
     {
         let mut headers = HeaderMap::new();
@@ -66,7 +43,6 @@ pub async fn js() -> Result<impl IntoResponse, (StatusCode, String)> {
 
 pub async fn route() -> Result<Router> {
     let router = Router::new()
-        .route("/", get(html))
         .route("/a.wasm", get(wasm))
         .route("/a.js", get(js));
 

diff --git a/website/src/app.rs b/website/src/app.rs
@@ -28,6 +28,15 @@ pub enum Routes {
 
 derive_struct!(AppStates {
     color: ColorMap = COLOR_MAP.clone()
+    data: enum PageData {
+        Portal
+        Guide { id: String, raw: String }
+        Component(enum {
+            Button,
+            ButtonGroup,
+            // TODO: Add more components.
+        })
+    } = Portal
 });
 
 #[derive(Clone, Debug, DeriveApplication)]

diff --git a/website/src/web_entry.rs b/website/src/web_entry.rs
@@ -1,10 +1,7 @@
 use wasm_bindgen::prelude::*;
 use web_sys::window;
 
-use crate::{
-    app::{App, AppStates},
-    utils::rgb_to_dec,
-};
+use crate::app::{App, AppStates};
 
 #[derive(Clone)]
 #[wasm_bindgen]
@@ -28,28 +25,7 @@ impl WebHandle {
                 .expect("Cannot get document object")
                 .get_element_by_id("app")
                 .expect("Cannot get root element"),
-            AppStates {
-                primary_color: rgb_to_dec(0x4c8dae),
-                secondary_color: rgb_to_dec(0x065279),
-
-                error_color: rgb_to_dec(0xc3272b),
-                warning_color: rgb_to_dec(0xca6924),
-                success_color: rgb_to_dec(0x0aa344),
-                info_color: rgb_to_dec(0xbacac6),
-
-                primary_text_color: rgb_to_dec(0x161823),
-                secondary_text_color: rgb_to_dec(0x50616d),
-                button_text_color: rgb_to_dec(0xf0f0f4),
-                disabled_text_color: rgb_to_dec(0xe0f0e9),
-                placeholder_text_color: rgb_to_dec(0xc2ccd0),
-
-                shadow_color_rgba: "rgba(0, 0, 0, 0.6)".into(),
-                background_color: rgb_to_dec(0xf2fdff),
-
-                large_text_size: "18px".into(),
-                medium_text_size: "16px".into(),
-                small_text_size: "14px".into(),
-            },
+            AppStates::default(), // TODO: Read from raw HTML.
         );
         Ok(())
     }