From adaa65c1aa5550abaca904d814241a5721958140 Mon Sep 17 00:00:00 2001 From: OrthogonalStar Date: Sat, 17 Feb 2024 15:36:43 -0500 Subject: [PATCH] Added mprocs config and playing around with htmx --- assets/main.css | 40 ++++++++++++++++++++++++++++++++++++++ mprocs.yaml | 5 +++++ src/html.rs | 27 +++++++++++++++++++++++++ src/lib.rs | 35 +++++++++++---------------------- templates/hello.html | 4 ++++ templates/test-navbar.html | 18 +++++++++++++++++ 6 files changed, 105 insertions(+), 24 deletions(-) create mode 100644 mprocs.yaml create mode 100644 src/html.rs create mode 100644 templates/test-navbar.html diff --git a/assets/main.css b/assets/main.css index 7fda79d..1560afb 100644 --- a/assets/main.css +++ b/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; + } +} diff --git a/mprocs.yaml b/mprocs.yaml new file mode 100644 index 0000000..8a780b0 --- /dev/null +++ b/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" diff --git a/src/html.rs b/src/html.rs new file mode 100644 index 0000000..b3cc214 --- /dev/null +++ b/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(pub T); + +/// Allows us to convert Askama HTML templates into valid HTML for axum to serve in the response. +impl IntoResponse for HtmlTemplate +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(), + } + } +} diff --git a/src/lib.rs b/src/lib.rs index 0b64b58..6a103f9 100644 --- a/src/lib.rs +++ b/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); +#[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 IntoResponse for HtmlTemplate -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)] diff --git a/templates/hello.html b/templates/hello.html index d6ae395..f261101 100644 --- a/templates/hello.html +++ b/templates/hello.html @@ -20,5 +20,9 @@ > Say hello +
+ {% endblock %} diff --git a/templates/test-navbar.html b/templates/test-navbar.html new file mode 100644 index 0000000..c980d3b --- /dev/null +++ b/templates/test-navbar.html @@ -0,0 +1,18 @@ + +{% extends "base.html" %} + +{% block title %}Another page to test out the navbar{% endblock %} + +{% block content %} +

Navbar test

+
+ +
+TESTING ADDING More text +{% endblock %}