feat: daisyui (#9)

* feat(tailwind): npm instead of cdn * fix(app): serving favicon now * fix(htmx): local file instead of cdn * fix: sane cargo compat bounds * fix: update cargo.lock * feat(templates): quote fixes to author * feat(daisyui): daisyui components * feat(README): daisyui and screenshot * chore: bump version to 0.2.0
storopoli · Jan 13, 2024 · 15c5396 · 15c5396
1 parent c0a63bc
commit 15c5396
Show file tree

Hide file tree

Showing 12 changed files with 97 additions and 49 deletions.
diff --git a/.gitignore b/.gitignore
@@ -9,3 +9,9 @@ target/
 # MSVC Windows builds of rustc generate these, which store debugging information
 *.pdb
 
+# Node Soydev stuff
+node_modules
+package-lock.json
+
+# Tailwind
+assets/main.css
diff --git a/Cargo.lock b/Cargo.lock
diff --git a/Cargo.toml b/Cargo.toml
@@ -1,28 +1,28 @@
 [package]
 name = "stoic-quotes"
-version = "0.1.2"
+version = "0.2.0"
 edition = "2021"
 authors = ["Jose Storopoli <jose@storopoli.io>"]
 description = "Stoic quotes API backend"
 license = "MIT"
 readme = "README.md"
 
 [dependencies]
-anyhow = "1.0.79"
-askama = "0.12.1"
-axum = "0.7.3"
-lazy_static = "1.4.0"
-rand = "0.8.5"
-serde = { version = "1.0.195", features = ["derive"] }
-serde_json = "1.0.111"
-tokio = { version = "1.35.1", features = ["full"] }
-tower-http = { version = "0.5.0", features = ["tracing", "trace"] }
-tracing = "0.1.40"
-tracing-subscriber = "0.3.18"
+anyhow = "1"
+askama = "0.12"
+axum = "0.7"
+lazy_static = "1"
+rand = "0.8"
+serde = { version = "1", features = ["derive"] }
+serde_json = "1"
+tokio = { version = "1", features = ["full"] }
+tower-http = { version = "0.5", features = ["tracing", "trace", "fs"] }
+tracing = "0.1"
+tracing-subscriber = "0.3"
+
+[dev-dependencies]
+http-body-util = "0.1"
+tower = { version = "0.4", features = ["util"] }
 
 [profile.release]
 lto = true
-
-[dev-dependencies]
-http-body-util = "0.1.0"
-tower = { version = "0.4.13", features = ["util"] }
diff --git a/README.md b/README.md
@@ -10,6 +10,7 @@ The whole app runs with [Rust](https://rust-lang.org) using
 - [askama](https://djc.github.io/askama/)
 - [htmx](https://htmx.org)
 - [tailwindcss](https://tailwindcss.com/)
+- [daisyui](https://daisyui.com)
 - [Satoshi Font](https://www.fontshare.com/fonts/satoshi)
 
 <div align="center">

diff --git a/assets/htmx.min.js b/assets/htmx.min.js
diff --git a/package.json b/package.json
@@ -0,0 +1,6 @@
+{
+  "devDependencies": {
+    "daisyui": "^4.6",
+    "tailwindcss": "^3.4"
+  }
+}
diff --git a/screenshot.png b/screenshot.png
diff --git a/src/app.rs b/src/app.rs
@@ -2,7 +2,8 @@
 
 use crate::pages::{plain_quote, quote, root};
 use axum::{http::header::USER_AGENT, http::Request, response::Response, routing::get, Router};
-use tower_http::trace::TraceLayer;
+use std::{env::current_dir, path::PathBuf};
+use tower_http::{services::ServeDir, trace::TraceLayer};
 use tracing::info;
 
 /// Handles the User Agent header
@@ -29,11 +30,16 @@ async fn handle_user_agent<T>(req: Request<T>) -> Response {
 /// Creates an Axum [`Router`] that only handles GET requests to
 /// `/` and `/quote`.
 pub fn app() -> Router {
+    let assets_path: PathBuf = current_dir().unwrap();
     // Create a router
     info!("initializing router...");
     Router::new()
         .route("/", get(handle_user_agent))
         .route("/quote", get(quote))
+        .nest_service(
+            "/assets",
+            ServeDir::new(format!("{}/assets", assets_path.to_str().unwrap())),
+        )
         // We can still add middleware
         .layer(TraceLayer::new_for_http())
 }

diff --git a/styles/tailwind.css b/styles/tailwind.css
@@ -0,0 +1,11 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@import url("https://api.fontshare.com/v2/css?f[]=satoshi@1&display=swap");
+
+@layer base {
+    div {
+        font-family: "Satoshi", system-ui, sans-serif;
+    }
+}
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -0,0 +1,18 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+    content: ["./src/**/*.{html,js}", "./templates/**/*.{html,js}"],
+    theme: {
+        extend: {},
+    },
+    plugins: [require("daisyui")],
+    daisyui: {
+        themes: [
+            {
+                dark: {
+                    ...require("daisyui/src/theming/themes")["dark"],
+                    accent: "#826BA8",
+                },
+            },
+        ],
+    },
+};
diff --git a/templates/index.html b/templates/index.html
@@ -1,29 +1,14 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" data-theme="dark">
 
 <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Stoic Quotes</title>
-    <link rel="icon" type="image/x-icon" href="https://github.com/storopoli/stoic-quotes/raw/main/assets/favicon.ico" />
-    <script src="https://unpkg.com/htmx.org@1.9.10"
-        integrity="sha384-D1Kt99CQMDuVetoL1lrYwg5t+9QdHe7NLX/SoJYkXDFfX37iInKRy5xLSi8nO7UC"
-        crossorigin="anonymous"></script>
-    <link rel="stylesheet" href="https://unpkg.com/tailwindcss@2.2.19/dist/tailwind.min.css"
-        integrity="sha384-HtMZLkYo+pR5/u7zCzXxMJP6QoNnQJt1qkHM0EaOPvGDIzaVZbmYr/TlvUZ/sKAg" crossorigin="anonymous" />
-    <style>
-        @tailwind base;
-        @tailwind components;
-        @tailwind utilities;
-
-        @import url("https://api.fontshare.com/v2/css?f[]=satoshi@1&display=swap");
-
-        @layer base {
-            div {
-                font-family: "Satoshi", system-ui, sans-serif;
-            }
-        }
-    </style>
+    <link rel="icon" type="image/x-icon" href="/assets/favicon.ico" />
+    <link href="/assets/main.css" rel="stylesheet" />
+    <!-- htmx v 1.9.10 -->
+    <script src="/assets/htmx.min.js"></script>
     <!-- htmx transition -->
     <style>
         @keyframes fade-in {
@@ -71,22 +56,23 @@
 </head>
 
 <body>
-    <div class="min-h-screen bg-gray-800 flex flex-col items-center justify-center text-white">
-        <div class="mx-4 border-4 border-gray-600 p-10 rounded-lg bg-gray-900">
+    <div class="min-h-screen flex flex-col items-center justify-center text-white">
+        <div class="card card-bordered border-accent bg-base-300 shadow-2xl mx-4 p-10 rounded-lg">
             <blockquote hx-get="/quote" hx-swap="outerHTML" hx-trigger="load" id="quote" class="text-center">
                 Please Enable JavaScript (I know, it sucks...)
             </blockquote>
         </div>
         <button hx-get="/quote" hx-trigger="click" hx-target="#quote" hx-swap="outerHTML transition:true"
-            class="mt-10 flex justify-center items-center w-14 h-14 text-xl transition-colors duration-300 transform bg-gray-800 rounded-lg hover:bg-gray-500 focus:outline-none focus:ring focus:ring-gray-300 focus:ring-opacity-80">
-            <svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 24 24" fill="currentColor">
-                <path fill="evenodd" clip="evenodd"
-                    d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z" />
+            class="btn btn-accent bg-base-300 mt-10">
+            <svg class="w-6 h-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                stroke-width="1.5" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round"
+                    d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99" />
             </svg>
         </button>
-        <a href="https://github.com/storopoli/stoic-quotes" target="_blank" rel="noopener noreferrer"
-            class="mt-10 flex">
-            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
+        <a class="mt-10 flex hover:text-accent" href="https://github.com/storopoli/stoic-quotes" target="_blank"
+            rel="noopener noreferrer">
+            <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
                 <path fill="evenodd" clip="evenodd"
                     d="M12 2C6.477 2 2 6.477 2 12c0 4.418 2.865 8.166 6.839 9.489.5.092.682-.217.682-.482 0-.237-.009-.866-.014-1.7-2.782.603-3.369-1.34-3.369-1.34-.454-1.156-1.11-1.462-1.11-1.462-.908-.62.069-.608.069-.608 1.003.07 1.532 1.03 1.532 1.03.891 1.529 2.341 1.088 2.912.833.091-.646.349-1.086.635-1.337-2.22-.253-4.555-1.11-4.555-4.943 0-1.091.39-1.984 1.03-2.682-.103-.253-.447-1.27.098-2.646 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 7.07c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.026 2.747-1.026.547 1.376.203 2.394.1 2.646.64.699 1.028 1.591 1.028 2.682 0 3.841-2.337 4.687-4.565 4.934.359.31.678.92.678 1.852 0 1.336-.012 2.415-.012 2.741 0 .267.18.578.688.48A10.017 10.017 0 0022 12C22 6.477 17.523 2 12 2z">
                 </path>

diff --git a/templates/quote.html b/templates/quote.html
@@ -1,4 +1,4 @@
 <blockquote id="quote" class="text-center">
     <p class="text-2xl font-semibold md:text-4xl">"{{ text }}"</p>
-    <footer class="mt-4 text-xl">- {{ author }}</footer>
+    <footer class="mt-4 text-xl text-right italic">{{ author }}</footer>
 </blockquote>