center: add more hbs templates

fuxiaohei · Oct 30, 2023 · afb76c0 · afb76c0
1 parent 2a08227
commit afb76c0
Show file tree

Hide file tree

Showing 8 changed files with 180 additions and 29 deletions.
diff --git a/binary/center/src/pages/mod.rs b/binary/center/src/pages/mod.rs
@@ -1,11 +1,7 @@
 use anyhow::Result;
 use axum::extract::Path;
 use axum::response::{IntoResponse, Response};
-use axum::{
-    body::Body,
-    routing::{any, get},
-    Router,
-};
+use axum::{body::Body, routing::get, Router};
 use axum_template::engine::Engine;
 use axum_template::RenderHtml;
 use handlebars::Handlebars;
@@ -19,7 +15,9 @@ type AppEngine = Engine<Handlebars<'static>>;
 pub fn router() -> Router {
     let hbs = init_templates().unwrap();
     Router::new()
-        .route("/dashboard", any(render_dashboard))
+        .route("/projects", get(render_projects))
+        .route("/projects/:name", get(render_project_single))
+        .route("/sign-in", get(render_signin))
         .route("/static/*path", get(render_static))
         .with_state(Engine::from(hbs))
 }
@@ -42,8 +40,17 @@ async fn render_static(Path(path): Path<String>) -> Response<Body> {
         .unwrap()
 }
 
-async fn render_dashboard(engine: AppEngine) -> impl IntoResponse {
-    RenderHtml("dashboard.hbs", engine, &())
+async fn render_projects(engine: AppEngine) -> impl IntoResponse {
+    RenderHtml("projects.hbs", engine, &())
+}
+
+async fn render_project_single(engine: AppEngine, Path(param): Path<String>) -> impl IntoResponse {
+    debug!("param: {}", param);
+    RenderHtml("project-single.hbs", engine, &())
+}
+
+async fn render_signin(engine: AppEngine) -> impl IntoResponse {
+    RenderHtml("signin.hbs", engine, &())
 }
 
 fn init_templates() -> Result<Handlebars<'static>> {

diff --git a/binary/center/src/server.rs b/binary/center/src/server.rs
@@ -2,12 +2,8 @@ use crate::apiv2;
 use crate::pages;
 use anyhow::Result;
 use axum::extract::DefaultBodyLimit;
-use axum::{
-    body::Body,
-    http::{Request, Response},
-    routing::any,
-    Router,
-};
+use axum::response::{IntoResponse, Redirect};
+use axum::{body::Body, http::Request, routing::any, Router};
 use std::net::SocketAddr;
 use std::process::exit;
 use tokio::signal;
@@ -35,10 +31,8 @@ pub async fn start(addr: SocketAddr) -> Result<()> {
 }
 
 /// default_handler is the default handler for all requests.
-async fn default_handler(_req: Request<Body>) -> Response<Body> {
-    let mut builder = Response::builder().status(200);
-    builder = builder.header("x-land-version", land_core::version::get());
-    builder.body(Body::from("Hello, Runtime.land!")).unwrap()
+async fn default_handler(_req: Request<Body>) -> impl IntoResponse {
+    Redirect::to("/projects").into_response()
 }
 
 async fn shutdown_signal() {

diff --git a/binary/center/templates/css/input.css b/binary/center/templates/css/input.css
@@ -41,13 +41,13 @@
   @apply block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white;
 }
 #main {
-  @apply max-w-4xl mx-auto my-6;
+  @apply max-w-4xl mx-auto my-6 min-h-[70%];
 }
 #project-top h1 {
   @apply text-3xl font-semibold;
 }
 #project-top .count {
-  @apply text-gray-500 leading-8;
+  @apply text-gray-400 block py-2;
 }
 #project-searchbar {
   @apply flex justify-between items-center my-4;
@@ -93,3 +93,16 @@
 .project-card .action-button {
   @apply px-3 py-2 rounded-lg text-white bg-emerald-600 hover:bg-emerald-700 duration-200;
 }
+
+#footer {
+  @apply border-t p-6 text-center text-gray-300 mt-6;
+}
+
+#sign-in-btn-container {
+  @apply text-center;
+  padding-top: 8rem;
+}
+
+#sign-in-button {
+  @apply text-xl px-4 py-2 bg-primary rounded-lg text-white hover:bg-white hover:border hover:border-primary hover:text-primary;
+}
diff --git a/binary/center/templates/partials/footer.hbs b/binary/center/templates/partials/footer.hbs
@@ -0,0 +1,4 @@
+<footer id="footer">
+    @2023 Runtime.land | v0.1.4 | 2023-10-30 02:39 UTC
+</footer>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.0.0/flowbite.min.js"></script>
diff --git a/binary/center/templates/partials/meta.hbs b/binary/center/templates/partials/meta.hbs
@@ -3,4 +3,8 @@
 <link rel="icon" type="image/png" href="/static/img/logo-v2.png" />
 <link href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.0.0/flowbite.min.css" rel="stylesheet" />
 <link href="/static/css/main.css" rel="stylesheet" />
-<title>Runtime.land</title>
+<title>Runtime.land</title>
+<script async crossorigin="anonymous" data-clerk-publishable-key="pk_test_cGV0LW1vb3NlLTc1LmNsZXJrLmFjY291bnRzLmRldiQ"
+    onload="window.Clerk.load()"
+    src="https://pet-moose-75.clerk.accounts.dev/npm/@clerk/clerk-js@4/dist/clerk.browser.js" type="text/javascript">
+    </script>
diff --git a/binary/center/templates/project-single.hbs b/binary/center/templates/project-single.hbs
@@ -0,0 +1,64 @@
+<!doctype html>
+<html>
+
+<head>
+    {{> partials/meta.hbs}}
+</head>
+
+<body>
+    {{> partials/navbar.hbs}}
+    <main id="main">
+        <div id="project-top">
+            <h1>spryest-pyknoses-242</h1>
+            <span class="count">PENDING PRODUCTION DEPLOYMENT</span>
+        </div>
+        <div id="project-navbar">
+
+        </div>
+        <div id="projects-list" class="mt-6">
+            <div class="flex space-x-4">
+                <div class="project-card">
+                    <div class="card-left">
+                        <div class="card-title">spryest-pyknoses-242</div>
+                        <div class="card-metadata">
+                            <span class="item">Rust</span>
+                            <span class="item">1 Deploys</span>
+                            <span class="item">30 Days ago</span>
+                        </div>
+                        <div class="card-link">
+                            <a href="#"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
+                                    class="w-5 h-5 inline-block mr-1">
+                                    <path fill-rule="evenodd"
+                                        d="M4.25 5.5a.75.75 0 00-.75.75v8.5c0 .414.336.75.75.75h8.5a.75.75 0 00.75-.75v-4a.75.75 0 011.5 0v4A2.25 2.25 0 0112.75 17h-8.5A2.25 2.25 0 012 14.75v-8.5A2.25 2.25 0 014.25 4h5a.75.75 0 010 1.5h-5z"
+                                        clip-rule="evenodd" />
+                                    <path fill-rule="evenodd"
+                                        d="M6.194 12.753a.75.75 0 001.06.053L16.5 4.44v2.81a.75.75 0 001.5 0v-4.5a.75.75 0 00-.75-.75h-4.5a.75.75 0 000 1.5h2.553l-9.056 8.194a.75.75 0 00-.053 1.06z"
+                                        clip-rule="evenodd" />
+                                </svg>
+                                spryest-pyknoses-242.binary.com</a>
+                        </div>
+                    </div>
+                    <div class="card-right">
+                        <a href="#" class="action-button">Running</a>
+                    </div>
+                </div>
+                <div class="project-card">
+                    <div class="card-left">
+                        <div class="card-title">spryest-pyknoses-242</div>
+                        <div class="card-metadata">
+                            <span class="item">Rust</span>
+                            <span class="item">1 Deploys</span>
+                            <span class="item">30 Days ago</span>
+                        </div>
+                    </div>
+                    <div class="card-right">
+                        <a href="#" class="action-button">Running</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+    {{> partials/footer.hbs}}
+</body>
+
+</html>
diff --git a/binary/center/templates/dashboard.hbs → binary/center/templates/projects.hbs b/binary/center/templates/dashboard.hbs → binary/center/templates/projects.hbs
@@ -32,7 +32,7 @@
         </div>
         <div id="projects-list" class="mt-6">
             <div class="flex space-x-4">
-                <div class="project-card flex justify-between w-1/2">
+                <div class="project-card">
                     <div class="card-left">
                         <div class="card-title">spryest-pyknoses-242</div>
                         <div class="card-metadata">
@@ -54,18 +54,26 @@
                         </div>
                     </div>
                     <div class="card-right">
-                        <a href="#" class="action-button">Running</a>
+                        <a href="/projects/spryest-pyknoses-242" class="action-button">Running</a>
+                    </div>
+                </div>
+                <div class="project-card">
+                    <div class="card-left">
+                        <div class="card-title">spryest-pyknoses-242</div>
+                        <div class="card-metadata">
+                            <span class="item">Rust</span>
+                            <span class="item">1 Deploys</span>
+                            <span class="item">30 Days ago</span>
+                        </div>
+                    </div>
+                    <div class="card-right">
+                        <a href="/projects/spryest-pyknoses-242" class="action-button">Running</a>
                     </div>
                 </div>
-                <div class="project-card w-1/2">w-1/2</div>
-            </div>
-            <div class="flex">
-                <div class="project-card w-1/2">w-1/2</div>
-                <div class="project-card w-1/2">w-1/2</div>
             </div>
         </div>
     </main>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.0.0/flowbite.min.js"></script>
+    {{> partials/footer.hbs}}
 </body>
 
 </html>
diff --git a/binary/center/templates/signin.hbs b/binary/center/templates/signin.hbs
@@ -0,0 +1,57 @@
+<!doctype html>
+<html>
+
+<head>
+    {{> partials/meta.hbs}}
+</head>
+
+<body>
+    <main id="login-main">
+        <div id="sign-in"></div>
+        <div id="sign-in-btn-container">
+            <button id="sign-in-button" disabled onclick="clerkOpen()">Loading Sign-in Panel via Clerk.js</button>
+        </div>
+    </main>
+    <script async crossorigin="anonymous"
+        data-clerk-publishable-key="pk_test_cGV0LW1vb3NlLTc1LmNsZXJrLmFjY291bnRzLmRldiQ" onload="clerkLoad()"
+        src="https://pet-moose-75.clerk.accounts.dev/npm/@clerk/clerk-js@4/dist/clerk.browser.js"
+        type="text/javascript">
+        </script>
+    <script type="text/javascript">
+        async function clerkLoad() {
+            await window.Clerk.load({
+                afterSignInUrl: "/projects",
+                afterSignUpUrl: "/projects",
+            });
+
+            // if clerk is signed in, redirect to projects page
+            if (window.Clerk.session && window.Clerk.user) {
+                await window.Clerk.navigate('/projects'); // TODO: target should from query string "redirect=xxx"
+                return;
+            }
+
+            // show sign-in panel
+            const signInComponent = document.querySelector('#sign-in');
+            window.Clerk.openSignIn(signInComponent, {
+                appearance: {
+                    baseTheme: "dark"
+                }
+            });
+
+            // update sign-in button to open sign-in panel
+            let button = document.querySelector('#sign-in-button');
+            button.disabled = false;
+            button.textContent = "Sign-in via Clerk.js"
+        }
+
+        async function clerkOpen() {
+            await window.Clerk.openSignIn({
+                appearance: {
+                    baseTheme: "dark"
+                }
+            });
+        }
+    </script>
+</body>
+
+</html>