feat: initial styling and page setup

CalliEve · May 27, 2024 · aa416f7 · aa416f7
1 parent 9b522d9
commit aa416f7
Show file tree

Hide file tree

Showing 10 changed files with 101 additions and 6 deletions.
diff --git a/.gitignore b/.gitignore
@@ -65,3 +65,7 @@ tags
 
 # End of https://www.toptal.com/developers/gitignore/api/rust,rust-analyzer,vim,visualstudiocode
 
+node_modules/
+package-lock.json
+package.json
+
diff --git a/Dockerfile b/Dockerfile
@@ -5,11 +5,12 @@ WORKDIR /metro_map_site
 ENV RUST_BACKTRACE=1
 
 RUN apt-get update \
-    && apt-get install -y pkg-config libssl-dev \
+    && apt-get install -y pkg-config libssl-dev nodejs npm \
     && cargo install --locked trunk \
     && rustup toolchain install nightly \
     && rustup default nightly \
-    && rustup target add wasm32-unknown-unknown 
+    && rustup target add wasm32-unknown-unknown \
+    && npm install -D tailwindcss
 
 COPY . .
 

diff --git a/index.html b/index.html
@@ -1,5 +1,12 @@
 <!DOCTYPE html>
-<html>
-  <head></head>
-  <body></body>
+<html lang="en" class="h-full">
+  <head>
+    <meta charset="utf-8" />
+    <link data-trunk rel="rust" data-wasm-opt="z" />
+    <!--<link data-trunk rel="icon" type="image/ico" href="/public/favicon.ico" />-->
+    <link data-trunk rel="tailwind-css" href="/style/tailwind.css" />
+    <title>Algorithmically-Assisted Metro Map Design</title>
+  </head>
+
+  <body class="h-full"></body>
 </html>
diff --git a/src/components/canvas.rs b/src/components/canvas.rs
@@ -0,0 +1,10 @@
+use leptos::*;
+
+#[component]
+pub fn Canvas() -> impl IntoView {
+    view! {
+        <div class="flex bg-zinc-50 dark:bg-neutral-700 text-black dark:text-white">
+            <canvas id="canvas" class="grow m-5"/>
+        </div>
+    }
+}
diff --git a/src/components/mod.rs b/src/components/mod.rs
@@ -0,0 +1,7 @@
+mod canvas;
+mod navbar;
+mod sidebar;
+
+pub use canvas::Canvas;
+pub use navbar::Navbar;
+pub use sidebar::Sidebar;
diff --git a/src/components/navbar.rs b/src/components/navbar.rs
@@ -0,0 +1,14 @@
+use leptos::*;
+
+#[component]
+pub fn Navbar() -> impl IntoView {
+    view! {
+    <nav class="relative flex w-full items-center justify-between bg-zinc-100 py-2 shadow-dark-mild shadow-sm dark:shadow-neutral-900 dark:bg-neutral-750 lg:py-4">
+      <div class="flex w-full items-center justify-between px-3">
+        <div class="ms-2">
+          <a class="text-2xl font-extrabold text-black dark:text-white" href="#">Metro Map Editor</a>
+        </div>
+      </div>
+    </nav>
+    }
+}
diff --git a/src/components/sidebar.rs b/src/components/sidebar.rs
@@ -0,0 +1,10 @@
+use leptos::*;
+
+#[component]
+pub fn Sidebar() -> impl IntoView {
+    view! {
+        <div class="h-full w-full flex flex-column bg-zinc-100 py-2 shadow-right shadow-dark-mild dark:shadow-black dark:bg-neutral-750 text-black dark:text-white px-2">
+            <div class="px-3 py-3 w-full">sidebar</div>
+        </div>
+    }
+}
diff --git a/src/main.rs b/src/main.rs
@@ -1,5 +1,26 @@
 use leptos::*;
 
+mod components;
+
+pub use components::*;
+
 fn main() {
-    mount_to_body(|| view! { <p>"Hello world!"</p> })
+    mount_to_body(|| view! { <App/> })
+}
+
+#[component]
+fn App() -> impl IntoView {
+    view! {
+        <header>
+            <Navbar/>
+        </header>
+        <div class="h-full flex flex-row justify-start items-center">
+            <div class="h-full flex-none w-1/5 md:w-52">
+                <Sidebar/>
+            </div>
+            <div class="h-full grow">
+                <Canvas/>
+            </div>
+        </div>
+    }
 }
diff --git a/style/tailwind.css b/style/tailwind.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -0,0 +1,18 @@
+module.exports = {
+  content: {
+    files: ["*.html", "./src/**/*.rs"],
+  },
+  theme: {
+    extend: {
+      boxShadow: {
+        right: "4px 0 6px -1px rgb(0 0 0 / 0.1)",
+      },
+      colors: {
+        neutral: {
+          750: "#333333",
+        },
+      },
+    },
+  },
+  plugins: [],
+};