Templates refactoring

2025-09-20 04:43:55 +02:00
parent b52b676dc0
commit 40dfe1aed8
15 changed files with 156 additions and 146 deletions
--- a/assets/css/main.css
+++ b/assets/css/main.css
--- a/src/domain.rs
+++ b/src/domain.rs
@@ -1,5 +1,7 @@
 mod new_subscriber;
+mod post;
 mod subscriber_email;

 pub use new_subscriber::NewSubscriber;
+pub use post::PostEntry;
 pub use subscriber_email::SubscriberEmail;
--- a/src/domain/post.rs
+++ b/src/domain/post.rs
@@ -0,0 +1,17 @@
+use chrono::{DateTime, Utc};
+use uuid::Uuid;
+
+pub struct PostEntry {
+    pub post_id: Uuid,
+    pub author: Option<String>,
+    pub title: String,
+    pub content: String,
+    pub published_at: DateTime<Utc>,
+}
+
+impl PostEntry {
+    #[allow(dead_code)]
+    pub fn formatted_date(&self) -> String {
+        self.published_at.format("%B %d, %Y").to_string()
+    }
+}
--- a/src/routes.rs
+++ b/src/routes.rs
@@ -22,7 +22,7 @@ pub use subscriptions_confirm::*;

 use crate::{
    authentication::AuthError,
-    templates::{InternalErrorTemplate, MessageTemplate},
+    templates::{InternalErrorTemplate, MessageTemplate, NotFoundTemplate},
 };

 #[derive(thiserror::Error)]
@@ -130,10 +130,6 @@ impl From<AuthError> for AppError {
    }
 }

-#[derive(Template)]
-#[template(path = "../templates/404.html")]
-struct NotFoundTemplate;
-
 pub async fn not_found() -> Response {
    (
        StatusCode::NOT_FOUND,
--- a/src/routes/admin/dashboard.rs
+++ b/src/routes/admin/dashboard.rs
@@ -1,4 +1,4 @@
-use crate::authentication::AuthenticatedUser;
+use crate::{authentication::AuthenticatedUser, templates::DashboardTemplate};
 use askama::Template;
 use axum::{
    Extension,
@@ -6,14 +6,6 @@ use axum::{
 };
 use uuid::Uuid;

-#[derive(Template)]
-#[template(path = "../templates/dashboard.html")]
-struct DashboardTemplate {
-    username: String,
-    idempotency_key_1: String,
-    idempotency_key_2: String,
-}
-
 pub async fn admin_dashboard(
    Extension(AuthenticatedUser { username, .. }): Extension<AuthenticatedUser>,
 ) -> Response {
--- a/src/routes/home.rs
+++ b/src/routes/home.rs
@@ -1,9 +1,7 @@
 use askama::Template;
 use axum::response::Html;

-#[derive(Template)]
-#[template(path = "../templates/home.html")]
-struct HomeTemplate;
+use crate::templates::HomeTemplate;

 pub async fn home() -> Html<String> {
    Html(HomeTemplate.render().unwrap())
--- a/src/routes/login.rs
+++ b/src/routes/login.rs
@@ -3,6 +3,7 @@ use crate::{
    routes::AppError,
    session_state::TypedSession,
    startup::AppState,
+    templates::LoginTemplate,
 };
 use anyhow::Context;
 use askama::Template;
@@ -15,10 +16,6 @@ use axum::{
 use axum::{http::StatusCode, response::Redirect};
 use secrecy::SecretString;

-#[derive(Template)]
-#[template(path = "../templates/login.html")]
-struct LoginTemplate;
-
 #[derive(serde::Deserialize)]
 pub struct LoginFormData {
    username: String,
--- a/src/routes/posts.rs
+++ b/src/routes/posts.rs
@@ -1,41 +1,18 @@
-use crate::{routes::AppError, startup::AppState};
+use crate::{
+    domain::PostEntry,
+    routes::AppError,
+    startup::AppState,
+    templates::{PostTemplate, PostsTemplate},
+};
 use anyhow::Context;
 use askama::Template;
 use axum::{
    extract::{Path, State},
    response::{Html, IntoResponse, Response},
 };
-use chrono::{DateTime, Utc};
 use sqlx::PgPool;
 use uuid::Uuid;

-struct PostEntry {
-    post_id: Uuid,
-    author: Option<String>,
-    title: String,
-    content: String,
-    published_at: DateTime<Utc>,
-}
-
-impl PostEntry {
-    #[allow(dead_code)]
-    fn formatted_date(&self) -> String {
-        self.published_at.format("%B %d, %Y").to_string()
-    }
-}
-
-#[derive(Template)]
-#[template(path = "../templates/posts.html")]
-struct PostsTemplate {
-    posts: Vec<PostEntry>,
-}
-
-#[derive(Template)]
-#[template(path = "../templates/post.html")]
-struct PostTemplate {
-    post: PostEntry,
-}
-
 pub async fn list_posts(
    State(AppState {
        connection_pool, ..
--- a/src/routes/subscriptions_confirm.rs
+++ b/src/routes/subscriptions_confirm.rs
@@ -1,4 +1,4 @@
-use crate::startup::AppState;
+use crate::{startup::AppState, templates::ConfirmTemplate};
 use askama::Template;
 use axum::{
    extract::{Query, State},
@@ -9,10 +9,6 @@ use serde::Deserialize;
 use sqlx::PgPool;
 use uuid::Uuid;

-#[derive(Template)]
-#[template(path = "../templates/confirm.html")]
-struct ConfirmTemplate;
-
 #[tracing::instrument(name = "Confirming new subscriber", skip(params))]
 pub async fn confirm(
    State(AppState {
--- a/src/templates.rs
+++ b/src/templates.rs
@@ -1,5 +1,7 @@
 use askama::Template;

+use crate::domain::PostEntry;
+
 #[derive(Template)]
 pub enum MessageTemplate {
    #[template(path = "../templates/success.html")]
@@ -11,3 +13,39 @@ pub enum MessageTemplate {
 #[derive(Template)]
 #[template(path = "../templates/500.html")]
 pub struct InternalErrorTemplate;
+
+#[derive(Template)]
+#[template(path = "../templates/login.html")]
+pub struct LoginTemplate;
+
+#[derive(Template)]
+#[template(path = "../templates/dashboard.html")]
+pub struct DashboardTemplate {
+    pub username: String,
+    pub idempotency_key_1: String,
+    pub idempotency_key_2: String,
+}
+
+#[derive(Template)]
+#[template(path = "../templates/home.html")]
+pub struct HomeTemplate;
+
+#[derive(Template)]
+#[template(path = "../templates/posts.html")]
+pub struct PostsTemplate {
+    pub posts: Vec<PostEntry>,
+}
+
+#[derive(Template)]
+#[template(path = "../templates/post.html")]
+pub struct PostTemplate {
+    pub post: PostEntry,
+}
+
+#[derive(Template)]
+#[template(path = "../templates/confirm.html")]
+pub struct ConfirmTemplate;
+
+#[derive(Template)]
+#[template(path = "../templates/404.html")]
+pub struct NotFoundTemplate;
--- a/templates/404.html
+++ b/templates/404.html
@@ -7,7 +7,7 @@
                <h1 class="text-4xl font-semibold text-gray-700 mb-4">404</h1>
                <h2 class="text-2xl font-semibold text-gray-500 mb-6">Not Found</h2>
                <p class="text-gray-600 mb-8 max-w-2xl mx-auto">
-                    Sorry, we couldn't find the page you're looking for. The page may have been moved, deleted, or the URL might be incorrect.
+                    Sorry, I couldn't find the page you're looking for. The page may have been moved, deleted, or the URL might be incorrect.
                </p>
                <div class="flex flex-col sm:flex-row gap-4 justify-center items-center">
                    <a href="/"
--- a/templates/500.html
+++ b/templates/500.html
@@ -7,7 +7,7 @@
                <h1 class="text-4xl font-semibold text-red-600 mb-4">500</h1>
                <h2 class="text-2xl font-semibold text-gray-500 mb-6">Internal Server Error</h2>
                <p class="text-gray-600 mb-8 max-w-2xl mx-auto">
-                    Something went wrong on the server. Please try again in a few minutes or contact me if the problem persists.
+                    Something went wrong. Please try again in a few minutes or contact me if the problem persists.
                </p>
                <div class="flex flex-col sm:flex-row gap-4 justify-center items-center">
                    <a href="/"
--- a/templates/base.html
+++ b/templates/base.html
@@ -16,27 +16,26 @@
    <header class="bg-white shadow-sm border-b border-gray-200 top-0 z-40">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between items-center h-16">
-          <div class="flex items-center space-x-6">
-            <a href="/"
-               class="flex items-center space-x-2 text-blue-600 hover:text-blue-700 transition-colors">
-              <div class="w-8 h-8 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-lg flex items-center justify-center">
-                <svg class="w-5 h-5 text-white"
+          <div class="flex items-center space-x-4 text-blue-600">
+            <div class="flex space-x-2 items-center">
+              <div class="w-6 h-6 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-lg flex items-center justify-center">
+                <svg class="w-4 h-4 text-white"
                     fill="none"
                     viewBox="0 0 24 24"
                     stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
                </svg>
              </div>
-              <span class="text-xl font-bold">zero2prod</span>
-            </a>
+              <span class="text-sm font-bold">zero2prod</span>
+            </div>
            <nav class="flex items-center space-x-2">
              <a href="/"
-                 class="flex items-center text-gray-700 hover:text-blue-600 hover:bg-blue-50 px-3 py-2 rounded-md text-sm font-medium transition-colors">
-                Home
+                 class="flex items-center text-gray-700 hover:underline underline-offset-2 decoration-1 decoration-blue-600 hover:text-blue-600 px-3 py-2 rounded-md text-sm font-medium transition-colors">
+                home
              </a>
              <a href="/posts"
-                 class="flex items-center text-gray-700 hover:text-blue-600 hover:bg-blue-50 px-3 py-2 rounded-md text-sm font-medium transition-colors">
-                Posts
+                 class="flex items-center text-gray-700 hover:underline underline-offset-2 decoration-1 decoration-blue-600 hover:text-blue-600 px-3 py-2 rounded-md text-sm font-medium transition-colors">
+                posts
              </a>
            </nav>
          </div>
@@ -44,7 +43,7 @@
            <a href="/admin/dashboard"
               hx-boost="true"
               class="bg-blue-600 text-white hover:bg-blue-700 px-4 py-2 rounded-md text-sm font-medium transition-colors">
-              Dashboard
+              dashboard
            </a>
          </nav>
        </div>
--- a/templates/home.html
+++ b/templates/home.html
@@ -1,83 +1,81 @@
 {% extends "base.html" %}
 {% block title %}Home{% endblock %}
 {% block content %}
-  <div class="flex-1 flex items-center justify-center">
-    <div class="max-w-4xl mx-auto">
-      <div class="bg-gradient-to-r from-blue-600 to-indigo-700 rounded-lg shadow-lg text-white p-8 mb-8">
-        <div class="max-w-3xl">
-          <h1 class="text-4xl font-bold mb-4">zero2prod</h1>
-          <p class="text-xl text-blue-100 mb-6">
-            Welcome to my blog! Stay updated on my latest projects and
-            thoughts. Subscribe (and unsubscribe) at any time.
-          </p>
-          <div class="flex flex-col sm:flex-row gap-4">
-            <a href="#newsletter-signup"
-               class="bg-white text-blue-600 hover:bg-gray-100 font-semibold py-3 px-6 rounded-md transition-colors text-center">
+  <div class="max-w-4xl mx-auto">
+    <div class="bg-gradient-to-r from-blue-600 to-indigo-700 rounded-lg shadow-lg text-white p-8 mb-8">
+      <div class="max-w-3xl">
+        <h1 class="text-4xl font-bold mb-4">zero2prod</h1>
+        <p class="text-xl text-blue-100 mb-6">
+          Welcome to my blog! Stay updated on my latest projects and
+          thoughts. Subscribe (and unsubscribe) at any time.
+        </p>
+        <div class="flex flex-col sm:flex-row gap-4">
+          <a href="#newsletter-signup"
+             class="bg-white text-blue-600 hover:bg-gray-100 font-semibold py-3 px-6 rounded-md transition-colors text-center">
+            Subscribe
+          </a>
+          <a href="https://gitea.alphonsepaix.xyz/alphonse/zero2prod"
+             target="_blank"
+             class="border border-white text-white hover:bg-white hover:text-blue-600 font-semibold py-3 px-6 rounded-md transition-colors text-center">
+            View code
+          </a>
+        </div>
+      </div>
+    </div>
+    <div class="grid md:grid-cols-2 gap-6 mb-8">
+      <div class="bg-white rounded-lg shadow-md p-6 border border-gray-200">
+        <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mb-4">
+          <svg class="w-6 h-6 text-green-600"
+               fill="none"
+               viewBox="0 0 24 24"
+               stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
+          </svg>
+        </div>
+        <h3 class="text-lg font-semibold text-gray-900 mb-2">Privacy first</h3>
+        <p class="text-gray-600 text-sm">
+          Zero spam, zero tracking, zero data sharing. Your email stays private
+          and secure. Unsubscribe at any time.
+        </p>
+      </div>
+      <div class="bg-white rounded-lg shadow-md p-6 border border-gray-200">
+        <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-4">
+          <svg class="w-6 h-6 text-purple-600"
+               fill="none"
+               viewBox="0 0 24 24"
+               stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
+          </svg>
+        </div>
+        <h3 class="text-lg font-semibold text-gray-900 mb-2">Quality content</h3>
+        <p class="text-gray-600 text-sm">
+          Curated insights on Rust backend development, performance tips, and
+          production war stories.
+        </p>
+      </div>
+    </div>
+    <div id="newsletter-signup"
+         class="bg-white rounded-lg shadow-md p-8 border border-gray-200">
+      <div class="max-w-2xl mx-auto text-center">
+        <h2 class="text-2xl font-bold text-gray-900 mb-4">Stay updated</h2>
+        <p class="text-gray-600 mb-6">Subscribe to my newsletter to get the latest updates.</p>
+        <form hx-post="/subscriptions"
+              hx-target="#subscribe-messages"
+              hx-swap="innerHTML"
+              class="max-w-md mx-auto">
+          <div class="flex flex-col sm:flex-row gap-3">
+            <input type="email"
+                   name="email"
+                   placeholder="you@example.com"
+                   required
+                   class="flex-1 px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" />
+            <button type="submit"
+                    class="bg-blue-600 text-white hover:bg-blue-700 font-medium py-3 px-6 rounded-md transition-colors">
              Subscribe
-            </a>
-            <a href="https://gitea.alphonsepaix.xyz/alphonse/zero2prod"
-               target="_blank"
-               class="border border-white text-white hover:bg-white hover:text-blue-600 font-semibold py-3 px-6 rounded-md transition-colors text-center">
-              View code
-            </a>
+            </button>
          </div>
-        </div>
-      </div>
-      <div class="grid md:grid-cols-2 gap-6 mb-8">
-        <div class="bg-white rounded-lg shadow-md p-6 border border-gray-200">
-          <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mb-4">
-            <svg class="w-6 h-6 text-green-600"
-                 fill="none"
-                 viewBox="0 0 24 24"
-                 stroke="currentColor">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
-            </svg>
-          </div>
-          <h3 class="text-lg font-semibold text-gray-900 mb-2">Privacy first</h3>
-          <p class="text-gray-600 text-sm">
-            Zero spam, zero tracking, zero data sharing. Your email stays private
-            and secure. Unsubscribe at any time.
-          </p>
-        </div>
-        <div class="bg-white rounded-lg shadow-md p-6 border border-gray-200">
-          <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-4">
-            <svg class="w-6 h-6 text-purple-600"
-                 fill="none"
-                 viewBox="0 0 24 24"
-                 stroke="currentColor">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
-            </svg>
-          </div>
-          <h3 class="text-lg font-semibold text-gray-900 mb-2">Quality content</h3>
-          <p class="text-gray-600 text-sm">
-            Curated insights on Rust backend development, performance tips, and
-            production war stories.
-          </p>
-        </div>
-      </div>
-      <div id="newsletter-signup"
-           class="bg-white rounded-lg shadow-md p-8 border border-gray-200">
-        <div class="max-w-2xl mx-auto text-center">
-          <h2 class="text-2xl font-bold text-gray-900 mb-4">Stay updated</h2>
-          <p class="text-gray-600 mb-6">Subscribe to my newsletter to get the latest updates.</p>
-          <form hx-post="/subscriptions"
-                hx-target="#subscribe-messages"
-                hx-swap="innerHTML"
-                class="max-w-md mx-auto">
-            <div class="flex flex-col sm:flex-row gap-3">
-              <input type="email"
-                     name="email"
-                     placeholder="you@example.com"
-                     required
-                     class="flex-1 px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" />
-              <button type="submit"
-                      class="bg-blue-600 text-white hover:bg-blue-700 font-medium py-3 px-6 rounded-md transition-colors">
-                Subscribe
-              </button>
-            </div>
-            <div id="subscribe-messages" class="mt-4"></div>
-          </form>
-        </div>
+          <div id="subscribe-messages" class="mt-4"></div>
+        </form>
      </div>
    </div>
  </div>
--- a/templates/login.html
+++ b/templates/login.html
@@ -1,7 +1,7 @@
 {% extends "base.html" %}
 {% block title %}Login - zero2prod{% endblock %}
 {% block content %}
-  <div class="min-h-[60vh] flex items-center justify-center">
+  <div class="flex-1 flex items-center justify-center">
    <div class="max-w-md w-full space-y-8">
      <div class="text-center">
        <h2 class="text-3xl font-bold text-gray-900">Login</h2>