diff --git a/crates/tuono/src/source_builder/static_files.rs b/crates/tuono/src/source_builder/static_files.rs index 99c2c80a..0eacb984 100644 --- a/crates/tuono/src/source_builder/static_files.rs +++ b/crates/tuono/src/source_builder/static_files.rs @@ -9,6 +9,7 @@ export const renderFn = serverSideRendering(routeTree) pub const CLIENT_ENTRY_DATA: &str = "// File automatically generated by tuono import { hydrate } from 'tuono/hydration' +import '../src/styles/global.css' // Import the generated route tree import { routeTree } from './routeTree.gen' diff --git a/examples/tuono/Cargo.toml b/examples/tuono/Cargo.toml index 8b115c24..5ba88e75 100644 --- a/examples/tuono/Cargo.toml +++ b/examples/tuono/Cargo.toml @@ -12,6 +12,7 @@ axum = {version = "0.7.5", features = ["json"]} tokio = { version = "1.37.0", features = ["full"] } tower-http = {version = "0.5.2", features = ["fs"]} serde = { version = "1.0.202", features = ["derive"] } -tuono_lib = "0.0.6" +tuono_lib = { path = "../../crates/tuono_lib/"} serde_json = "1.0" +reqwest = {version = "0.12.4", features = ["json"]} diff --git a/examples/tuono/public/react.svg b/examples/tuono/public/react.svg new file mode 100644 index 00000000..8fe604f2 --- /dev/null +++ b/examples/tuono/public/react.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/examples/tuono/public/rust.svg b/examples/tuono/public/rust.svg new file mode 100644 index 00000000..7f66780e --- /dev/null +++ b/examples/tuono/public/rust.svg @@ -0,0 +1,4 @@ + + + + diff --git a/examples/tuono/src/routes/__root.tsx b/examples/tuono/src/routes/__root.tsx index 60bbbbba..52d29f69 100644 --- a/examples/tuono/src/routes/__root.tsx +++ b/examples/tuono/src/routes/__root.tsx @@ -1,5 +1,4 @@ import type { ReactNode } from 'react' -import { Link } from 'tuono' interface RootRouteProps { children: ReactNode @@ -7,10 +6,7 @@ interface RootRouteProps { export default function RootRoute({ children }: RootRouteProps): JSX.Element { return ( <> - -
{children}
+
{children}
) } diff --git a/examples/tuono/src/routes/about.tsx b/examples/tuono/src/routes/about.tsx deleted file mode 100644 index 418ec160..00000000 --- a/examples/tuono/src/routes/about.tsx +++ /dev/null @@ -1,3 +0,0 @@ -export default function AboutPage(): JSX.Element { - return

About page

-} diff --git a/examples/tuono/src/routes/index.rs b/examples/tuono/src/routes/index.rs index fb2a041a..8feca98d 100644 --- a/examples/tuono/src/routes/index.rs +++ b/examples/tuono/src/routes/index.rs @@ -3,12 +3,12 @@ use tuono_lib::{Request, Response}; #[derive(Serialize)] struct MyResponse<'a> { - description: &'a str, + subtitle: &'a str, } #[tuono_lib::handler] -fn get_server_side_props(req: &Request) -> Response { +async fn get_server_side_props(_req: Request<'_>, _fetch: reqwest::Client) -> Response { Response::Props(Box::new(MyResponse { - description: "This descriptions comes from the rust server", + subtitle: "The react / rust fullstack framework", })) } diff --git a/examples/tuono/src/routes/index.tsx b/examples/tuono/src/routes/index.tsx index 0fe72eb2..23f8bbe0 100644 --- a/examples/tuono/src/routes/index.tsx +++ b/examples/tuono/src/routes/index.tsx @@ -1,7 +1,7 @@ import type { TuonoProps } from 'tuono' type IndexProps = { - description: string + subtitle: string } export default function IndexPage({ data, @@ -13,8 +13,29 @@ export default function IndexPage({ return ( <> -

Index Page

-

{data?.description}

+
+ + Crates + + + Npm + +
+
+

+ TUONO +

+
+ + +
+
+
+

{data?.subtitle}

+ + Github + +
) } diff --git a/examples/tuono/src/styles/global.css b/examples/tuono/src/styles/global.css new file mode 100644 index 00000000..bc4a7312 --- /dev/null +++ b/examples/tuono/src/styles/global.css @@ -0,0 +1,89 @@ +@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); + +@keyframes rotate { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} + +* { + box-sizing: border-box; + margin: 0; + padding: 0; + font-family: 'Poppins', sans-serif; + font-weight: 400; + font-style: normal; +} + +body { + background: #fbfbfb; +} + +main { + width: 673px; + margin: 20px auto; +} + +.header { + display: flex; + gap: 20px; +} + +.header a { + color: black; + font-size: 18px; + font-weight: 600; + text-decoration: none; + z-index: 2; +} + +.title-wrap { + height: 200px; +} + +.title { + position: absolute; + font-size: 200px; + line-height: 200px; + z-index: 0; + letter-spacing: -2px; + margin-left: -8px; +} + +.title span { + opacity: 0; +} + +.logo { + margin-left: 240px; + position: relative; + top: 25px; +} + +.logo img { + position: absolute; +} + +.rust { + animation: rotate 6s ease-in-out infinite; +} + +.react { + top: 33px; + left: 28px; + animation: rotate 6s linear infinite reverse; +} + +.subtitle { + font-size: 30px; + line-height: 30px; + letter-spacing: -1px; +} + +.subtitle-wrap { + display: flex; + justify-content: space-between; +}