Added mprocs config and playing around with htmx

assets/main.css

@@ -540,24 +540,44 @@ video {
   --tw-backdrop-sepia:  ;
 }
 
+.m-0 {
+  margin: 0px;
+}
+
 .block {
   display: block;
 }
 
+.flex {
+  display: flex;
+}
+
 .inline-flex {
   display: inline-flex;
 }
 
+.list-none {
+  list-style-type: none;
+}
+
 .flex-row {
   flex-direction: row;
 }
 
+.justify-between {
+  justify-content: space-between;
+}
+
 .space-x-2 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(0.5rem * var(--tw-space-x-reverse));
   margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
 }
 
+.overflow-hidden {
+  overflow: hidden;
+}
+
 .rounded-md {
   border-radius: 0.375rem;
 }
@@ -567,6 +587,10 @@ video {
   background-color: rgb(79 70 229 / var(--tw-bg-opacity));
 }
 
+.p-0 {
+  padding: 0px;
+}
+
 .px-2 {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
@@ -597,6 +621,15 @@ video {
   padding-bottom: 1rem;
 }
 
+.text-center {
+  text-align: center;
+}
+
+.text-lg {
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+}
+
 .text-sm {
   font-size: 0.875rem;
   line-height: 1.25rem;
@@ -660,3 +693,10 @@ video {
 .focus-visible\:outline-indigo-600:focus-visible {
   outline-color: #4f46e5;
 }
+
+@media (min-width: 1024px) {
+  .lg\:text-2xl {
+    font-size: 1.5rem;
+    line-height: 2rem;
+  }
+}

mprocs.yaml

@@ -0,0 +1,5 @@
+procs:
+  cargo_run:
+    shell: "cargo watch -x run"
+  tailwind_run:
+    shell: "npx tailwindcss -i styles/tailwind.css -o assets/main.css --watch"

src/html.rs

@@ -0,0 +1,27 @@
+use askama::Template;
+use axum::{
+    http::StatusCode,
+    response::{Html, IntoResponse, Response},
+};
+/// A wrapper type that we'll use to encapsulate HTML parsed by askama into valid HTML for axum to serve.
+pub struct HtmlTemplate<T>(pub T);
+
+/// Allows us to convert Askama HTML templates into valid HTML for axum to serve in the response.
+impl<T> IntoResponse for HtmlTemplate<T>
+where
+    T: Template,
+{
+    fn into_response(self) -> Response {
+        // Attempt to render the template with askama
+        match self.0.render() {
+            // If we're able to successfully parse and aggregate the template, serve it
+            Ok(html) => Html(html).into_response(),
+            // If we're not, return an error or some bit of fallback HTML
+            Err(err) => (
+                StatusCode::INTERNAL_SERVER_ERROR,
+                format!("Failed to render template. Error: {}", err),
+            )
+                .into_response(),
+        }
+    }
+}

src/lib.rs

@@ -1,14 +1,14 @@
 use anyhow::Context;
 use askama::Template;
 use axum::{
-    http::StatusCode,
-    response::{Html, IntoResponse, Response},
+    response::IntoResponse,
     routing::get,
     Router,
 };
 use tower_http::services::ServeDir;
 use tracing::info;
 use tracing_subscriber::{layer::SubscriberExt, util::SubscriberInitExt};
+mod html;
 
 pub async fn run() -> anyhow::Result<()> {
     tracing_subscriber::registry()
@@ -26,6 +26,7 @@ pub async fn run() -> anyhow::Result<()> {
     let router = Router::new()
         .nest("/api", api_router)
         .route("/", get(hello))
+        .route("/navbar", get(navbar))
         .route("/another-page", get(another_page))
         .nest_service(
             "/assets",
@@ -41,39 +42,25 @@ pub async fn run() -> anyhow::Result<()> {
 
 async fn hello() -> impl IntoResponse {
     let template = HelloTemplate {};
-    HtmlTemplate(template)
+    html::HtmlTemplate(template)
 }
 
 #[derive(Template)]
 #[template(path = "hello.html")]
 struct HelloTemplate;
 
-/// A wrapper type that we'll use to encapsulate HTML parsed by askama into valid HTML for axum to serve.
-struct HtmlTemplate<T>(T);
+#[derive(Template)]
+#[template(path = "test-navbar.html")]
+struct NavbarTemplate;
 
-/// Allows us to convert Askama HTML templates into valid HTML for axum to serve in the response.
-impl<T> IntoResponse for HtmlTemplate<T>
-where
-    T: Template,
-{
-    fn into_response(self) -> Response {
-        // Attempt to render the template with askama
-        match self.0.render() {
-            // If we're able to successfully parse and aggregate the template, serve it
-            Ok(html) => Html(html).into_response(),
-            // If we're not, return an error or some bit of fallback HTML
-            Err(err) => (
-                StatusCode::INTERNAL_SERVER_ERROR,
-                format!("Failed to render template. Error: {}", err),
-            )
-                .into_response(),
-        }
-    }
+async fn navbar() -> impl IntoResponse {
+    let template = NavbarTemplate {};
+    html::HtmlTemplate(template)
 }
 
 async fn another_page() -> impl IntoResponse {
     let template = AnotherPageTemplate {};
-    HtmlTemplate(template)
+    html::HtmlTemplate(template)
 }
 
 #[derive(Template)]

templates/hello.html

@@ -20,5 +20,9 @@
         >
         Say hello
     </button>
+    <br>
+    <div>
+        <a href="/navbar">Load Navbar</a>
+    </div>
 </div>
 {% endblock %}

templates/test-navbar.html

@@ -0,0 +1,18 @@
+<!-- prettier-ignore -->
+{% extends "base.html" %}
+
+{% block title %}Another page to test out the navbar{% endblock %}
+
+{% block content %}
+<h1 class="font-bold text-indigo-500">Navbar test</h1>
+<div class="overflow-hidden text-center m-0">
+    <ul class="p-0 flex justify-between list-none text-lg lg:text-2xl">
+        <li><a class="text-red" href="/blog">Blog</a></li>
+        <li><a class="text-red" href="/projects">Projects</a></li>
+        <li><a class="text-red" href="/now">Now</a></li>
+        <li><a class="text-red" href="/about">About</a></li>
+        <li><a class="text-red" href="/contact">Contact</a></li>
+    </ul>
+</div>
+TESTING ADDING More text
+{% endblock %}