It was like that when I got here

.sqlx/query-8f568c34f779acebeb3ddec7193812043f01e718143e028058614bfc1c9265c9.json

@@ -0,0 +1,14 @@
+{
+  "db_name": "PostgreSQL",
+  "query": "DELETE FROM paste WHERE id = $1",
+  "describe": {
+    "columns": [],
+    "parameters": {
+      "Left": [
+        "Uuid"
+      ]
+    },
+    "nullable": []
+  },
+  "hash": "8f568c34f779acebeb3ddec7193812043f01e718143e028058614bfc1c9265c9"
+}

.sqlx/query-a1945bd23b49ad7bf7aab90f624c7f9d71756f1ad47ce4d8a66fa77c83bd6fdc.json

@@ -0,0 +1,35 @@
+{
+  "db_name": "PostgreSQL",
+  "query": "SELECT id, title, content from paste LIMIT $1 OFFSET $2",
+  "describe": {
+    "columns": [
+      {
+        "ordinal": 0,
+        "name": "id",
+        "type_info": "Uuid"
+      },
+      {
+        "ordinal": 1,
+        "name": "title",
+        "type_info": "Text"
+      },
+      {
+        "ordinal": 2,
+        "name": "content",
+        "type_info": "Text"
+      }
+    ],
+    "parameters": {
+      "Left": [
+        "Int8",
+        "Int8"
+      ]
+    },
+    "nullable": [
+      false,
+      false,
+      false
+    ]
+  },
+  "hash": "a1945bd23b49ad7bf7aab90f624c7f9d71756f1ad47ce4d8a66fa77c83bd6fdc"
+}

.sqlx/query-b3a91e683e3a0edd655140eaf788e7ad18447b27c87c9009f8d14e2a9046a3b4.json

@@ -0,0 +1,16 @@
+{
+  "db_name": "PostgreSQL",
+  "query": "INSERT INTO paste (id, title, content) VALUES ($1, $2, $3) ON CONFLICT DO NOTHING",
+  "describe": {
+    "columns": [],
+    "parameters": {
+      "Left": [
+        "Uuid",
+        "Text",
+        "Text"
+      ]
+    },
+    "nullable": []
+  },
+  "hash": "b3a91e683e3a0edd655140eaf788e7ad18447b27c87c9009f8d14e2a9046a3b4"
+}

.sqlx/query-c1e8d4b7bc7e5e088a7a88bf0dcf6a19ac454a4d2b79ed8aa3f79e507ca55f41.json

@@ -0,0 +1,16 @@
+{
+  "db_name": "PostgreSQL",
+  "query": "UPDATE paste SET title = $2, content = $3 WHERE id = $1",
+  "describe": {
+    "columns": [],
+    "parameters": {
+      "Left": [
+        "Uuid",
+        "Text",
+        "Text"
+      ]
+    },
+    "nullable": []
+  },
+  "hash": "c1e8d4b7bc7e5e088a7a88bf0dcf6a19ac454a4d2b79ed8aa3f79e507ca55f41"
+}

.sqlx/query-ea3d1dd65be91a19d3ed1570cabb733103086502d2a2c6dd696cd97493157ed7.json

@@ -0,0 +1,22 @@
+{
+  "db_name": "PostgreSQL",
+  "query": "SELECT content FROM paste WHERE id = $1",
+  "describe": {
+    "columns": [
+      {
+        "ordinal": 0,
+        "name": "content",
+        "type_info": "Text"
+      }
+    ],
+    "parameters": {
+      "Left": [
+        "Uuid"
+      ]
+    },
+    "nullable": [
+      false
+    ]
+  },
+  "hash": "ea3d1dd65be91a19d3ed1570cabb733103086502d2a2c6dd696cd97493157ed7"
+}

Cargo.toml

@@ -4,24 +4,31 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-axum = { version = "0.7.5", default-features = false, features = ["http1", "json", "macros", "matched-path", "tokio", "tower-log", "tracing", "query", "form"] }
+askama = "0.12.1"
-axum-extra = { version = "0.9.3", features = ["async-read-body"] }
+askama_axum = "0.4.0"
+async-trait = "0.1.83"
+axum = { version = "0.7.6", default-features = false, features = ["http1", "json", "macros", "matched-path", "tokio", "tower-log", "tracing", "query", "form"] }
+axum-codec = { version = "0.0.13", features = ["cbor"] }
+axum-core = "0.4.5"
+axum-extra = { version = "0.9.4", features = ["async-read-body"] }
+bytes = "1.7.2"
 chrono = { version = "0.4.38", default-features = false, features = ["alloc", "clock"] }
 eyre = "0.6.12"
 figment = { version = "0.10.19", features = ["env", "toml"] }
 http = "1.1.0"
 maud = { version = "0.26.0", features = ["axum"] }
-memory-serve = "0.4.5"
+memory-serve = "0.6.0"
-serde = { version = "1.0.203", features = ["derive"] }
+mime = "0.3.17"
-sqlx = { version = "0.7.4", features = ["runtime-tokio", "postgres", "uuid"] }
+serde = { version = "1.0.210", features = ["derive"] }
-thiserror = "1.0.61"
+sqlx = { version = "0.8.2", features = ["runtime-tokio", "postgres", "uuid"] }
-tokio = { version = "1.38.0", features = ["rt-multi-thread", "macros", "fs", "io-std"] }
+thiserror = "1.0.64"
-tower-http = { version = "0.5.2", features = ["trace", "fs"] }
+tokio = { version = "1.40.0", features = ["rt-multi-thread", "macros", "fs", "io-std"] }
+tower-http = { version = "0.6.1", features = ["trace", "fs"] }
 tracing = "0.1.40"
 tracing-subscriber = "0.3.18"
-ulid = { version = "1.1.2", features = ["uuid", "serde"] }
+ulid = { version = "1.1.3", features = ["uuid", "serde"] }
-url = { version = "2.5.0", features = ["serde"] }
+url = { version = "2.5.2", features = ["serde"] }
-uuid = "1.8.0"
+uuid = "1.10.0"
 
 [profile.release]
 strip = true

askama.toml

@@ -0,0 +1,2 @@
+[general]
+whitespace = "minimize"

flake.lock

@@ -8,11 +8,11 @@
         "rust-analyzer-src": "rust-analyzer-src"
       },
       "locked": {
-        "lastModified": 1717741716,
+        "lastModified": 1727159616,
-        "narHash": "sha256-v71DDu2gb02iBIAhUwu5mQZNtYD45QcbEqahqsOCCyU=",
+        "narHash": "sha256-1VjZ+khJwZphRJZy2HvbMSCgi3OV7mu8RjVzqCxVi2k=",
         "owner": "nix-community",
         "repo": "fenix",
-        "rev": "05f2a8ae62c45637b20d162fa2dd450b79e71c27",
+        "rev": "4306d494985e00719573bbdeb863c27c6d83dc9c",
         "type": "github"
       },
       "original": {
@@ -26,11 +26,11 @@
         "systems": "systems"
       },
       "locked": {
-        "lastModified": 1710146030,
+        "lastModified": 1726560853,
-        "narHash": "sha256-SZ5L6eA7HJ/nmkzGG7/ISclqe6oZdOZTNoesiInkXPQ=",
+        "narHash": "sha256-X6rJYSESBVr3hBoH0WbKE5KvhPU5bloyZ2L4K60/fPQ=",
         "owner": "numtide",
         "repo": "flake-utils",
-        "rev": "b1d9ab70662946ef0850d488da1c9019f3a9752a",
+        "rev": "c1dfcf08411b08f6b8615f7d8971a2bfa81d5e8a",
         "type": "github"
       },
       "original": {
@@ -41,11 +41,11 @@
     },
     "nixpkgs": {
       "locked": {
-        "lastModified": 1717602782,
+        "lastModified": 1726937504,
-        "narHash": "sha256-pL9jeus5QpX5R+9rsp3hhZ+uplVHscNJh8n8VpqscM0=",
+        "narHash": "sha256-bvGoiQBvponpZh8ClUcmJ6QnsNKw0EMrCQJARK3bI1c=",
         "owner": "NixOS",
         "repo": "nixpkgs",
-        "rev": "e8057b67ebf307f01bdcc8fba94d94f75039d1f6",
+        "rev": "9357f4f23713673f310988025d9dc261c20e70c6",
         "type": "github"
       },
       "original": {
@@ -65,11 +65,11 @@
     "rust-analyzer-src": {
       "flake": false,
       "locked": {
-        "lastModified": 1717583671,
+        "lastModified": 1727104575,
-        "narHash": "sha256-+lRAmz92CNUxorqWusgJbL9VE1eKCnQQojglRemzwkw=",
+        "narHash": "sha256-lB/ZS0SnHyE8Z3G8DIL/QJPg6w6x5ZhgVO2pBqnz89g=",
         "owner": "rust-lang",
         "repo": "rust-analyzer",
-        "rev": "48bbdd6a74f3176987d5c809894ac33957000d19",
+        "rev": "3d0343251fe084b335b55c17a52bb4a3527b1bd0",
         "type": "github"
       },
       "original": {

flake.nix

@@ -44,7 +44,7 @@
             postgresql
             sqlfluff
             sqlx-cli
-            tailwindcss
+            dart-sass
           ];
         };
       }

src/app/api/links.rs

@@ -15,38 +15,11 @@ use crate::{app::SharedState, error::AppError};
 pub fn resource() -> Resource<SharedState> {
     Resource::named("links")
         .create(create_link)
-        .show(get_link_info)
+        .show(show_link)
         .update(update_link)
         .destroy(delete_link)
 }
 
-#[derive(Serialize)]
-struct Link {
-    id: Ulid,
-    slug: String,
-    destination: String,
-}
-
-async fn get_link_info(
-    State(SharedState { db, .. }): State<SharedState>,
-    Path(id): Path<Ulid>,
-) -> Result<Json<Link>, AppError> {
-    match query!(
-        "SELECT id, slug, destination FROM link WHERE id = $1",
-        Uuid::from(id),
-    )
-    .fetch_optional(&db)
-    .await?
-    {
-        Some(r) => Ok(Json(Link {
-            id: Ulid::from(r.id),
-            slug: r.slug,
-            destination: r.destination,
-        })),
-        None => Err(AppError::LinkNotFoundId(id)),
-    }
-}
-
 #[derive(Deserialize)]
 struct CreateLinkRequestBody {
     slug: String,
@@ -79,6 +52,33 @@ async fn create_link(
     }
 }
 
+#[derive(Serialize)]
+struct Link {
+    id: Ulid,
+    slug: String,
+    destination: String,
+}
+
+async fn show_link(
+    State(SharedState { db, .. }): State<SharedState>,
+    Path(id): Path<Ulid>,
+) -> Result<Json<Link>, AppError> {
+    match query!(
+        "SELECT id, slug, destination FROM link WHERE id = $1",
+        Uuid::from(id),
+    )
+    .fetch_optional(&db)
+    .await?
+    {
+        Some(r) => Ok(Json(Link {
+            id: Ulid::from(r.id),
+            slug: r.slug,
+            destination: r.destination,
+        })),
+        None => Err(AppError::LinkNotFoundId(id)),
+    }
+}
+
 #[derive(Deserialize)]
 struct UpdateLinkRequestBody {
     destination: Url,

src/app/api/mod.rs

@@ -1,9 +1,21 @@
 mod links;
+mod pastes;
 
 use axum::Router;
+use serde::Deserialize;
 
 use super::SharedState;
 
 pub fn router() -> Router<SharedState> {
-    Router::new().merge(links::resource())
+    Router::new()
+        .merge(links::resource())
+        .merge(pastes::resource())
+}
+
+#[derive(Deserialize)]
+struct Pagination {
+    #[serde(default)]
+    limit: Option<i64>,
+    #[serde(default)]
+    offset: i64,
 }

src/app/api/pastes.rs

@@ -0,0 +1,144 @@
+use axum::{
+    extract::{Path, Query, State},
+    Json,
+};
+use axum_codec::Codec;
+use http::StatusCode;
+use serde::Deserialize;
+use sqlx::query;
+use ulid::Ulid;
+use uuid::Uuid;
+
+use super::Pagination;
+use crate::{
+    app::{resource::Resource, SharedState},
+    error::AppError,
+};
+
+pub fn resource() -> Resource<SharedState> {
+    Resource::named("pastes")
+        .index(list_pastes)
+        .create(create_paste)
+        .show(show_paste)
+        .update(update_paste)
+        .destroy(delete_paste)
+}
+
+#[axum_codec::apply(encode)]
+struct Paste {
+    id: Ulid,
+    title: String,
+    content: String,
+}
+
+async fn list_pastes(
+    State(SharedState { db, .. }): State<SharedState>,
+    Query(Pagination { limit, offset }): Query<Pagination>,
+) -> Result<Codec<Vec<Paste>>, AppError> {
+    Ok(Codec(
+        query!(
+            "SELECT id, title, content from paste LIMIT $1 OFFSET $2",
+            limit,
+            offset,
+        )
+        .fetch_all(&db)
+        .await?
+        .into_iter()
+        .map(|r| Paste {
+            id: Ulid::from(r.id),
+            title: r.title,
+            content: r.content,
+        })
+        .collect(),
+    ))
+}
+
+#[axum_codec::apply(decode)]
+struct CreatePasteRequestBody {
+    title: String,
+    content: String,
+}
+
+async fn create_paste(
+    State(SharedState { db, .. }): State<SharedState>,
+    Codec(CreatePasteRequestBody { title, content }): Codec<CreatePasteRequestBody>,
+) -> Result<Codec<Paste>, AppError> {
+    let id = Ulid::new();
+
+    match query!(
+        "INSERT INTO paste (id, title, content) VALUES ($1, $2, $3) ON CONFLICT DO NOTHING",
+        Uuid::from(id),
+        title,
+        content,
+    )
+    .execute(&db)
+    .await?
+    .rows_affected()
+    {
+        1 => Ok(Codec(Paste { id, title, content })),
+        0 => Err(AppError::UlidConflict(id)),
+        rows => Err(AppError::ImpossibleAffectedRows(rows)),
+    }
+}
+
+async fn show_paste(
+    State(SharedState { db, .. }): State<SharedState>,
+    Path(id): Path<Ulid>,
+) -> Result<Codec<Paste>, AppError> {
+    match query!(
+        "SELECT title, content FROM paste WHERE id = $1",
+        Uuid::from(id),
+    )
+    .fetch_optional(&db)
+    .await?
+    {
+        Some(r) => Ok(Codec(Paste {
+            id,
+            title: r.title,
+            content: r.content,
+        })),
+        None => Err(AppError::PasteNotFound(id)),
+    }
+}
+
+#[derive(Deserialize)]
+struct UpdatePasteRequestBody {
+    title: String,
+    content: String,
+}
+
+async fn update_paste(
+    State(SharedState { db, .. }): State<SharedState>,
+    Path(id): Path<Ulid>,
+    Json(UpdatePasteRequestBody { title, content }): Json<UpdatePasteRequestBody>,
+) -> Result<StatusCode, AppError> {
+    match query!(
+        "UPDATE paste SET title = $2, content = $3 WHERE id = $1",
+        Uuid::from(id),
+        title,
+        content,
+    )
+    .execute(&db)
+    .await?
+    .rows_affected()
+    {
+        1 => Ok(StatusCode::NO_CONTENT),
+        0 => Err(AppError::PasteNotFound(id)),
+        rows => Err(AppError::ImpossibleAffectedRows(rows)),
+    }
+}
+
+async fn delete_paste(
+    State(SharedState { db, .. }): State<SharedState>,
+    Path(id): Path<Ulid>,
+) -> Result<StatusCode, AppError> {
+    match query!("DELETE FROM paste WHERE id = $1", Uuid::from(id))
+        .execute(&db)
+        .await?
+        .rows_affected()
+    {
+        1 => Ok(StatusCode::NO_CONTENT),
+        0 => Err(AppError::PasteNotFound(id)),
+        rows => Err(AppError::ImpossibleAffectedRows(rows)),
+    }
+}

src/app/mod.rs

@@ -1,5 +1,6 @@
 mod api;
 mod pages;
+mod resource;
 mod root;
 
 use std::sync::Arc;

src/app/pages/admin/pastes.rs

@@ -1,3 +1,4 @@
+use askama::Template;
 use axum::{
     extract::{Query, State},
     response::Redirect,
@@ -61,6 +62,13 @@ async fn show_pastes(
     ))
 }
 
+#[derive(Template)]
+#[template(path = "admin/paste-new.html")]
+struct CreatePasteTemplate {
+    paste_title: String,
+    paste_content: String,
+}
+
 #[derive(Deserialize)]
 struct CreatePasteFieldsOptional {
     title: Option<String>,
@@ -69,22 +77,12 @@ struct CreatePasteFieldsOptional {
 
 async fn show_create_paste(
     Query(CreatePasteFieldsOptional { title, content }): Query<CreatePasteFieldsOptional>,
-) -> Markup {
+) -> CreatePasteTemplate {
-    page(
+    CreatePasteTemplate {
-        "Create Paste",
+        paste_title: title.unwrap_or_default(),
-        &[BC_INDEX, BC_ADMIN, BC_PASTES],
+        paste_content: content.unwrap_or_default(),
-        html! {
-            form method="post" action="/admin/pastes" {
-                fieldset {
-                    legend { "Paste" }
-                    input class="w-full" type="text" name="title" placeholder="Paste title" required value=(title.unwrap_or_default());
-                    textarea class="w-full min-h-32" name="content" placeholder="Paste content" required { (content.unwrap_or_default()) }
-                    input type="submit" value="Create";
     }
 }
-        },
-    )
-}
 
 #[derive(Deserialize)]
 struct CreatePasteFields {

src/app/pages/pastes_public.rs

@@ -1,42 +1,60 @@
 // 01HZT59RTH4R6P1TYE6NMAFYEP 018FF454-E351-260D-60EB-CE3568A7F9D6
 
+use askama_axum::Template;
 use axum::{
     extract::{Path, State},
     routing::get,
     Router,
 };
-use maud::{html, Markup};
 use sqlx::query;
 use ulid::Ulid;
 use uuid::Uuid;
 
-use super::{page, Breadcrumb, BC_INDEX};
 use crate::{app::SharedState, error::AppError};
 
 pub(super) fn router() -> Router<SharedState> {
-    Router::new().route("/:id", get(show_paste))
+    Router::new()
+        .route("/:id", get(show_paste))
+        .route("/:id/raw", get(show_paste_raw))
 }
 
-const BC_PASTES_PUBLIC: Breadcrumb = Breadcrumb::new_static("Pastes", "/p");
+#[derive(Template)]
+#[template(path = "paste.html")]
+struct PasteTemplate {
+    id: Ulid,
+    title: String,
+    content: String,
+}
 
 async fn show_paste(
     Path(id): Path<Ulid>,
     State(SharedState { db, .. }): State<SharedState>,
-) -> Result<Markup, AppError> {
+) -> Result<PasteTemplate, AppError> {
     match query!(
         "SELECT title, content FROM paste WHERE id = $1",
-        Uuid::from(id)
+        Uuid::from(id),
     )
     .fetch_optional(&db)
     .await?
     {
-        Some(r) => Ok(page(
+        Some(r) => Ok(PasteTemplate {
-            &r.title,
+            id,
-            &[BC_INDEX, BC_PASTES_PUBLIC],
+            title: r.title,
-            html! {
+            content: r.content,
-                pre class="p-4 border border-bd-base rounded-xl" { (r.content) }
+        }),
-            },
+        None => Err(AppError::PasteNotFound(id)),
-        )),
+    }
+}
+
+async fn show_paste_raw(
+    Path(id): Path<Ulid>,
+    State(SharedState { db, .. }): State<SharedState>,
+) -> Result<String, AppError> {
+    match query!("SELECT content FROM paste WHERE id = $1", Uuid::from(id))
+        .fetch_optional(&db)
+        .await?
+    {
+        Some(r) => Ok(r.content),
         None => Err(AppError::PasteNotFound(id)),
     }
 }

src/app/resource.rs

@@ -0,0 +1,140 @@
+use axum::{routing::MethodRouter, Router};
+use axum_codec::{
+    handler::Input,
+    routing::{delete, get, post, put},
+    CodecHandler, IntoCodecResponse,
+};
+
+/// A resource which defines a set of conventional CRUD routes.
+#[derive(Debug)]
+#[must_use]
+pub struct Resource<S = ()> {
+    pub(crate) name: String,
+    pub(crate) router: Router<S>,
+}
+
+impl<S> Resource<S>
+where
+    S: Clone + Send + Sync + 'static,
+{
+    /// Create a `Resource` with the given name.
+    ///
+    /// All routes will be nested at `/{resource_name}`.
+    pub fn named(resource_name: &str) -> Self {
+        Self {
+            name: resource_name.to_owned(),
+            router: Router::new(),
+        }
+    }
+
+    /// Add a handler at `GET /{resource_name}`.
+    pub fn index<H, I, D, T>(self, handler: H) -> Self
+    where
+        H: CodecHandler<T, I, D, S> + Clone + Send + Sync + 'static,
+        I: Input + Send + 'static,
+        D: IntoCodecResponse + Send + Sync + 'static,
+        S: Clone + Send + Sync + 'static,
+        T: 'static,
+    {
+        let path = self.index_create_path();
+        self.route(&path, get(handler).into())
+    }
+
+    /// Add a handler at `POST /{resource_name}`.
+    pub fn create<H, I, D, T>(self, handler: H) -> Self
+    where
+        H: CodecHandler<T, I, D, S> + Clone + Send + Sync + 'static,
+        I: Input + Send + 'static,
+        D: IntoCodecResponse + Send + Sync + 'static,
+        S: Clone + Send + Sync + 'static,
+        T: 'static,
+    {
+        let path = self.index_create_path();
+        self.route(&path, post(handler).into())
+    }
+
+    /// Add a handler at `GET /{resource_name}/new`.
+    pub fn new<H, I, D, T>(self, handler: H) -> Self
+    where
+        H: CodecHandler<T, I, D, S> + Clone + Send + Sync + 'static,
+        I: Input + Send + 'static,
+        D: IntoCodecResponse + Send + Sync + 'static,
+        S: Clone + Send + Sync + 'static,
+        T: 'static,
+    {
+        let path = format!("/{}/new", self.name);
+        self.route(&path, get(handler).into())
+    }
+
+    /// Add a handler at `GET /{resource_name}/:{resource_name}_id`.
+    pub fn show<H, I, D, T>(self, handler: H) -> Self
+    where
+        H: CodecHandler<T, I, D, S> + Clone + Send + Sync + 'static,
+        I: Input + Send + 'static,
+        D: IntoCodecResponse + Send + Sync + 'static,
+        S: Clone + Send + Sync + 'static,
+        T: 'static,
+    {
+        let path = self.show_update_destroy_path();
+        self.route(&path, get(handler).into())
+    }
+
+    /// Add a handler at `GET /{resource_name}/:{resource_name}_id/edit`.
+    pub fn edit<H, I, D, T>(self, handler: H) -> Self
+    where
+        H: CodecHandler<T, I, D, S> + Clone + Send + Sync + 'static,
+        I: Input + Send + 'static,
+        D: IntoCodecResponse + Send + Sync + 'static,
+        S: Clone + Send + Sync + 'static,
+        T: 'static,
+    {
+        let path = format!("/{0}/:{0}_id/edit", self.name);
+        self.route(&path, get(handler).into())
+    }
+
+    /// Add a handler at `PUT or PATCH /resource_name/:{resource_name}_id`.
+    pub fn update<H, I, D, T>(self, handler: H) -> Self
+    where
+        H: CodecHandler<T, I, D, S> + Clone + Send + Sync + 'static,
+        I: Input + Send + 'static,
+        D: IntoCodecResponse + Send + Sync + 'static,
+        S: Clone + Send + Sync + 'static,
+        T: 'static,
+    {
+        let path = self.show_update_destroy_path();
+        // it's 12 AM and I don't know how to get `MethodFilter` to work
+        self.route(&path, put(handler.clone()).patch(handler).into())
+    }
+
+    /// Add a handler at `DELETE /{resource_name}/:{resource_name}_id`.
+    pub fn destroy<H, I, D, T>(self, handler: H) -> Self
+    where
+        H: CodecHandler<T, I, D, S> + Clone + Send + Sync + 'static,
+        I: Input + Send + 'static,
+        D: IntoCodecResponse + Send + Sync + 'static,
+        S: Clone + Send + Sync + 'static,
+        T: 'static,
+    {
+        let path = self.show_update_destroy_path();
+        self.route(&path, delete(handler).into())
+    }
+
+    fn index_create_path(&self) -> String {
+        format!("/{}", self.name)
+    }
+
+    fn show_update_destroy_path(&self) -> String {
+        format!("/{0}/:{0}_id", self.name)
+    }
+
+    fn route(mut self, path: &str, method_router: MethodRouter<S>) -> Self {
+        self.router = self.router.route(path, method_router);
+        self
+    }
+}
+
+impl<S> From<Resource<S>> for Router<S> {
+    fn from(resource: Resource<S>) -> Self {
+        resource.router
+    }
+}

src/error.rs

@@ -1,4 +1,5 @@
 use axum::{body::Body, response::IntoResponse};
+use axum_codec::{ContentType, IntoCodecResponse};
 use http::StatusCode;
 use tracing::{error, field};
 use ulid::Ulid;
@@ -55,3 +56,34 @@ impl IntoResponse for AppError {
         .into_response()
     }
 }
+
+impl IntoCodecResponse for AppError {
+    fn into_codec_response(self, content_type: ContentType) -> axum_core::response::Response<Body> {
+        error!(err = field::display(&self));
+        match self {
+            Self::LinkExists(_) => (StatusCode::BAD_REQUEST, "Link already exists"),
+            Self::LinkNotFoundId(_) | Self::LinkNotFoundSlug(_) => {
+                (StatusCode::NOT_FOUND, "Link not found")
+            }
+            Self::PasteNotFound(_) => (StatusCode::NOT_FOUND, "Paste not found"),
+            Self::ImpossibleAffectedRows(_) => (
+                StatusCode::INTERNAL_SERVER_ERROR,
+                "Database returned an impossible number of affected rows",
+            ),
+            Self::UlidConflict(_) => (StatusCode::INTERNAL_SERVER_ERROR, "ULID conflict real???"),
+            Self::Database(_) => (
+                StatusCode::INTERNAL_SERVER_ERROR,
+                "A database error has occured",
+            ),
+            Self::Io(_) => (
+                StatusCode::INTERNAL_SERVER_ERROR,
+                "An I/O error has occured",
+            ),
+            Self::Other(_) => (
+                StatusCode::INTERNAL_SERVER_ERROR,
+                "An unknown error has occured",
+            ),
+        }
+        .into_codec_response(content_type)
+    }
+}

static/script.js

@@ -6,3 +6,9 @@ document
                 e.getAttribute("datetime")
             ).toLocaleString())
     );
+
+function copyPasteContent() {
+    navigator.clipboard
+        .writeText(document.getElementById("paste-content").textContent)
+        .catch((e) => console.error(e));
+}

static/style.css

@@ -1,795 +1,142 @@
-/*
+/* Tailwind palette */
-! tailwindcss v3.4.3 | MIT License | https://tailwindcss.com
+/* Yes, it's that simple.
-*/
+ * https://tailwindcss.com/docs/customizing-spacing#default-spacing-scale
+ * https://github.com/tailwindlabs/tailwindcss/blob/ac6d4a6e8e9ae7ca197bf98d933ae2f205be3635/packages/tailwindcss/src/compat/default-theme.ts#L909 */
+/* https://github.com/tailwindlabs/tailwindcss/blob/ac6d4a6e8e9ae7ca197bf98d933ae2f205be3635/packages/tailwindcss/src/compat/default-theme.ts#L715 */
+html {
+  color-scheme: light dark;
+}
 
-/*
+/* These need switchable client-side */
-1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
+:root {
-2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
+  /* Foreground */
-*/
+  --color-fg-base: #334155;
+  --color-fg-deemphasized: #475569;
+  --color-fg-headings: #0f172a;
+  /* Background */
+  --color-bg-base: #f1f5f9;
+  --color-bg-raised-1: #e2e8f0;
+  --color-bg-raised-2: #cbd5e1;
+  /* Borders */
+  --color-bd-base: #cbd5e1;
+  --color-bd-highlighted: #64748b;
+}
+@media (prefers-color-scheme: dark) {
+  :root {
+    /* Foreground */
+    --color-fg-base: #cbd5e1;
+    --color-fg-deemphasized: #94a3b8;
+    --color-fg-headings: #f1f5f9;
+    /* Background */
+    --color-bg-base: #0f172a;
+    --color-bg-raised-1: #1e293b;
+    --color-bg-raised-2: #334155;
+    /* Borders */
+    --color-bd-base: #334155;
+    --color-bd-highlighted: #64748b;
+  }
+}
 
-*,
+/* https://github.com/tailwindlabs/tailwindcss/blob/ac6d4a6e8e9ae7ca197bf98d933ae2f205be3635/packages/tailwindcss/src/compat/default-theme.ts#L162 */
-::before,
+* {
-::after {
   box-sizing: border-box;
-  /* 1 */
-  border-width: 0;
-  /* 2 */
-  border-style: solid;
-  /* 2 */
-  border-color: #e5e7eb;
-  /* 2 */
-}
-
-::before,
-::after {
-  --tw-content: '';
-}
-
-/*
-1. Use a consistent sensible line-height in all browsers.
-2. Prevent adjustments of font size after orientation changes in iOS.
-3. Use a more readable tab size.
-4. Use the user's configured `sans` font-family by default.
-5. Use the user's configured `sans` font-feature-settings by default.
-6. Use the user's configured `sans` font-variation-settings by default.
-7. Disable tap highlights on iOS
-*/
-
-html,
-:host {
-  line-height: 1.5;
-  /* 1 */
-  -webkit-text-size-adjust: 100%;
-  /* 2 */
-  -moz-tab-size: 4;
-  /* 3 */
-  -o-tab-size: 4;
-     tab-size: 4;
-  /* 3 */
-  font-family: sans-serif;
-  /* 4 */
-  font-feature-settings: normal;
-  /* 5 */
-  font-variation-settings: normal;
-  /* 6 */
-  -webkit-tap-highlight-color: transparent;
-  /* 7 */
-}
-
-/*
-1. Remove the margin in all browsers.
-2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
-*/
-
-body {
-  margin: 0;
-  /* 1 */
-  line-height: inherit;
-  /* 2 */
-}
-
-/*
-1. Add the correct height in Firefox.
-2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
-3. Ensure horizontal rules are visible by default.
-*/
-
-hr {
-  height: 0;
-  /* 1 */
-  color: inherit;
-  /* 2 */
-  border-top-width: 1px;
-  /* 3 */
-}
-
-/*
-Add the correct text decoration in Chrome, Edge, and Safari.
-*/
-
-abbr:where([title]) {
-  -webkit-text-decoration: underline dotted;
-          text-decoration: underline dotted;
-}
-
-/*
-Remove the default font size and weight for headings.
-*/
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-size: inherit;
-  font-weight: inherit;
-}
-
-/*
-Reset links to optimize for opt-in styling instead of opt-out.
-*/
-
-a {
-  color: inherit;
-  text-decoration: inherit;
-}
-
-/*
-Add the correct font weight in Edge and Safari.
-*/
-
-b,
-strong {
-  font-weight: bolder;
-}
-
-/*
-1. Use the user's configured `mono` font-family by default.
-2. Use the user's configured `mono` font-feature-settings by default.
-3. Use the user's configured `mono` font-variation-settings by default.
-4. Correct the odd `em` font sizing in all browsers.
-*/
-
-code,
-kbd,
-samp,
-pre {
-  font-family: monospace;
-  /* 1 */
-  font-feature-settings: normal;
-  /* 2 */
-  font-variation-settings: normal;
-  /* 3 */
-  font-size: 1em;
-  /* 4 */
-}
-
-/*
-Add the correct font size in all browsers.
-*/
-
-small {
-  font-size: 80%;
-}
-
-/*
-Prevent `sub` and `sup` elements from affecting the line height in all browsers.
-*/
-
-sub,
-sup {
-  font-size: 75%;
-  line-height: 0;
-  position: relative;
-  vertical-align: baseline;
-}
-
-sub {
-  bottom: -0.25em;
-}
-
-sup {
-  top: -0.5em;
-}
-
-/*
-1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
-2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
-3. Remove gaps between table borders by default.
-*/
-
-table {
-  text-indent: 0;
-  /* 1 */
-  border-color: inherit;
-  /* 2 */
-  border-collapse: collapse;
-  /* 3 */
-}
-
-/*
-1. Change the font styles in all browsers.
-2. Remove the margin in Firefox and Safari.
-3. Remove default padding in all browsers.
-*/
-
-button,
-input,
-optgroup,
-select,
-textarea {
-  font-family: inherit;
-  /* 1 */
-  font-feature-settings: inherit;
-  /* 1 */
-  font-variation-settings: inherit;
-  /* 1 */
-  font-size: 100%;
-  /* 1 */
-  font-weight: inherit;
-  /* 1 */
-  line-height: inherit;
-  /* 1 */
-  letter-spacing: inherit;
-  /* 1 */
-  color: inherit;
-  /* 1 */
-  margin: 0;
-  /* 2 */
-  padding: 0;
-  /* 3 */
-}
-
-/*
-Remove the inheritance of text transform in Edge and Firefox.
-*/
-
-button,
-select {
-  text-transform: none;
-}
-
-/*
-1. Correct the inability to style clickable types in iOS and Safari.
-2. Remove default button styles.
-*/
-
-button,
-input:where([type='button']),
-input:where([type='reset']),
-input:where([type='submit']) {
-  -webkit-appearance: button;
-  /* 1 */
-  background-color: transparent;
-  /* 2 */
-  background-image: none;
-  /* 2 */
-}
-
-/*
-Use the modern Firefox focus style for all focusable elements.
-*/
-
-:-moz-focusring {
-  outline: auto;
-}
-
-/*
-Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
-*/
-
-:-moz-ui-invalid {
-  box-shadow: none;
-}
-
-/*
-Add the correct vertical alignment in Chrome and Firefox.
-*/
-
-progress {
-  vertical-align: baseline;
-}
-
-/*
-Correct the cursor style of increment and decrement buttons in Safari.
-*/
-
-::-webkit-inner-spin-button,
-::-webkit-outer-spin-button {
-  height: auto;
-}
-
-/*
-1. Correct the odd appearance in Chrome and Safari.
-2. Correct the outline style in Safari.
-*/
-
-[type='search'] {
-  -webkit-appearance: textfield;
-  /* 1 */
-  outline-offset: -2px;
-  /* 2 */
-}
-
-/*
-Remove the inner padding in Chrome and Safari on macOS.
-*/
-
-::-webkit-search-decoration {
-  -webkit-appearance: none;
-}
-
-/*
-1. Correct the inability to style clickable types in iOS and Safari.
-2. Change font properties to `inherit` in Safari.
-*/
-
-::-webkit-file-upload-button {
-  -webkit-appearance: button;
-  /* 1 */
-  font: inherit;
-  /* 2 */
-}
-
-/*
-Add the correct display in Chrome and Safari.
-*/
-
-summary {
-  display: list-item;
-}
-
-/*
-Removes the default spacing and border for appropriate elements.
-*/
-
-blockquote,
-dl,
-dd,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-hr,
-figure,
-p,
-pre {
-  margin: 0;
-}
-
-fieldset {
-  margin: 0;
-  padding: 0;
-}
-
-legend {
-  padding: 0;
-}
-
-ol,
-ul,
-menu {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-/*
-Reset default styling for dialogs.
-*/
-
-dialog {
-  padding: 0;
-}
-
-/*
-Prevent resizing textareas horizontally by default.
-*/
-
-textarea {
-  resize: vertical;
-}
-
-/*
-1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
-2. Set the default placeholder color to the user's configured gray 400 color.
-*/
-
-input::-moz-placeholder, textarea::-moz-placeholder {
-  opacity: 1;
-  /* 1 */
-  color: #9ca3af;
-  /* 2 */
-}
-
-input::placeholder,
-textarea::placeholder {
-  opacity: 1;
-  /* 1 */
-  color: #9ca3af;
-  /* 2 */
-}
-
-/*
-Set the default cursor for buttons.
-*/
-
-button,
-[role="button"] {
-  cursor: pointer;
-}
-
-/*
-Make sure disabled buttons don't get the pointer cursor.
-*/
-
-:disabled {
-  cursor: default;
-}
-
-/*
-1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
-2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
-   This can trigger a poorly considered lint error in some tools but is included by design.
-*/
-
-img,
-svg,
-video,
-canvas,
-audio,
-iframe,
-embed,
-object {
-  display: block;
-  /* 1 */
-  vertical-align: middle;
-  /* 2 */
-}
-
-/*
-Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
-*/
-
-img,
-video {
-  max-width: 100%;
-  height: auto;
-}
-
-/* Make elements with the HTML hidden attribute stay hidden by default */
-
-[hidden] {
-  display: none;
-}
-
-*, ::before, ::after {
-  --tw-border-spacing-x: 0;
-  --tw-border-spacing-y: 0;
-  --tw-translate-x: 0;
-  --tw-translate-y: 0;
-  --tw-rotate: 0;
-  --tw-skew-x: 0;
-  --tw-skew-y: 0;
-  --tw-scale-x: 1;
-  --tw-scale-y: 1;
-  --tw-pan-x:  ;
-  --tw-pan-y:  ;
-  --tw-pinch-zoom:  ;
-  --tw-scroll-snap-strictness: proximity;
-  --tw-gradient-from-position:  ;
-  --tw-gradient-via-position:  ;
-  --tw-gradient-to-position:  ;
-  --tw-ordinal:  ;
-  --tw-slashed-zero:  ;
-  --tw-numeric-figure:  ;
-  --tw-numeric-spacing:  ;
-  --tw-numeric-fraction:  ;
-  --tw-ring-inset:  ;
-  --tw-ring-offset-width: 0px;
-  --tw-ring-offset-color: #fff;
-  --tw-ring-color: rgb(59 130 246 / 0.5);
-  --tw-ring-offset-shadow: 0 0 #0000;
-  --tw-ring-shadow: 0 0 #0000;
-  --tw-shadow: 0 0 #0000;
-  --tw-shadow-colored: 0 0 #0000;
-  --tw-blur:  ;
-  --tw-brightness:  ;
-  --tw-contrast:  ;
-  --tw-grayscale:  ;
-  --tw-hue-rotate:  ;
-  --tw-invert:  ;
-  --tw-saturate:  ;
-  --tw-sepia:  ;
-  --tw-drop-shadow:  ;
-  --tw-backdrop-blur:  ;
-  --tw-backdrop-brightness:  ;
-  --tw-backdrop-contrast:  ;
-  --tw-backdrop-grayscale:  ;
-  --tw-backdrop-hue-rotate:  ;
-  --tw-backdrop-invert:  ;
-  --tw-backdrop-opacity:  ;
-  --tw-backdrop-saturate:  ;
-  --tw-backdrop-sepia:  ;
-  --tw-contain-size:  ;
-  --tw-contain-layout:  ;
-  --tw-contain-paint:  ;
-  --tw-contain-style:  ;
-}
-
-::backdrop {
-  --tw-border-spacing-x: 0;
-  --tw-border-spacing-y: 0;
-  --tw-translate-x: 0;
-  --tw-translate-y: 0;
-  --tw-rotate: 0;
-  --tw-skew-x: 0;
-  --tw-skew-y: 0;
-  --tw-scale-x: 1;
-  --tw-scale-y: 1;
-  --tw-pan-x:  ;
-  --tw-pan-y:  ;
-  --tw-pinch-zoom:  ;
-  --tw-scroll-snap-strictness: proximity;
-  --tw-gradient-from-position:  ;
-  --tw-gradient-via-position:  ;
-  --tw-gradient-to-position:  ;
-  --tw-ordinal:  ;
-  --tw-slashed-zero:  ;
-  --tw-numeric-figure:  ;
-  --tw-numeric-spacing:  ;
-  --tw-numeric-fraction:  ;
-  --tw-ring-inset:  ;
-  --tw-ring-offset-width: 0px;
-  --tw-ring-offset-color: #fff;
-  --tw-ring-color: rgb(59 130 246 / 0.5);
-  --tw-ring-offset-shadow: 0 0 #0000;
-  --tw-ring-shadow: 0 0 #0000;
-  --tw-shadow: 0 0 #0000;
-  --tw-shadow-colored: 0 0 #0000;
-  --tw-blur:  ;
-  --tw-brightness:  ;
-  --tw-contrast:  ;
-  --tw-grayscale:  ;
-  --tw-hue-rotate:  ;
-  --tw-invert:  ;
-  --tw-saturate:  ;
-  --tw-sepia:  ;
-  --tw-drop-shadow:  ;
-  --tw-backdrop-blur:  ;
-  --tw-backdrop-brightness:  ;
-  --tw-backdrop-contrast:  ;
-  --tw-backdrop-grayscale:  ;
-  --tw-backdrop-hue-rotate:  ;
-  --tw-backdrop-invert:  ;
-  --tw-backdrop-opacity:  ;
-  --tw-backdrop-saturate:  ;
-  --tw-backdrop-sepia:  ;
-  --tw-contain-size:  ;
-  --tw-contain-layout:  ;
-  --tw-contain-paint:  ;
-  --tw-contain-style:  ;
-}
-
-.static {
-  position: static;
-}
-
-.flex {
-  display: flex;
-}
-
-.table {
-  display: table;
-}
-
-.min-h-32 {
-  min-height: 8rem;
-}
-
-.w-full {
-  width: 100%;
-}
-
-.gap-2 {
-  gap: 0.5rem;
-}
-
-.rounded-xl {
-  border-radius: 0.75rem;
-}
-
-.border {
-  border-width: 1px;
-}
-
-.border-bd-base {
-  --tw-border-opacity: 1;
-  border-color: rgb(51 65 85 / var(--tw-border-opacity));
-}
-
-.p-4 {
-  padding: 1rem;
 }
 
 body {
-  margin-left: auto;
+  font-family: Inter, "Inter Variable", sans-serif;
-  margin-right: auto;
+  color: var(--color-fg-base);
-  display: flex;
+  background-color: var(--color-bg-base);
+  padding: 4rem 2rem;
+  margin: 0 auto;
   max-width: 56rem;
-  flex-direction: column;
-  gap: 2rem;
-  --tw-bg-opacity: 1;
-  background-color: rgb(15 23 42 / var(--tw-bg-opacity));
-  padding-left: 1rem;
-  padding-right: 1rem;
-  padding-top: 4rem;
-  padding-bottom: 4rem;
-  --tw-text-opacity: 1;
-  color: rgb(203 213 225 / var(--tw-text-opacity));
 }
-
+body.wide {
-@media not all and (min-width: 1024px) {
+  max-width: 72rem;
+}
+@media not all and (min-width: var(--max-width-lg)) {
   body {
-    padding-top: 2rem;
+    padding: 2rem;
-    padding-bottom: 2rem;
   }
 }
-
+body header {
-header {
+  margin-bottom: 2rem;
-  div {
-    margin-bottom: 0.25rem;
 }
-  div {
+body header h1 {
-    display: flex;
+  margin: 0;
-  }
+  color: var(--color-fg-headings);
-  div {
+  font-size: 1.875rem;
-    gap: 0.5rem;
-  }
-  div {
-    font-size: 1.125rem;
-    line-height: 1.75rem;
-  }
-  div {
-    --tw-text-opacity: 1;
-    color: rgb(148 163 184 / var(--tw-text-opacity));
-  }
-  h1 {
-    font-size: 3rem;
-    line-height: 1;
-  }
-  h1 {
   font-weight: 800;
 }
-  h1 {
+body footer {
-    --tw-text-opacity: 1;
+  color: var(--color-fg-deemphasized);
-    color: rgb(255 255 255 / var(--tw-text-opacity));
+  margin-top: 2rem;
-  }
-}
-
-footer {
   text-align: center;
-  --tw-text-opacity: 1;
-  color: rgb(148 163 184 / var(--tw-text-opacity));
 }
 
-a.tl {
+body.paste header {
-  text-decoration-line: underline;
-}
-
-a.tl:hover {
-  --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity));
-  text-decoration-line: none;
-}
-
-a.tl:focus-visible {
-  --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity));
-  text-decoration-line: none;
-}
-
-table {
-  table-layout: auto;
-  border-collapse: collapse;
-  border-width: 1px;
-  --tw-border-opacity: 1;
-  border-color: rgb(51 65 85 / var(--tw-border-opacity));
-  thead tr th {
-    border-width: 1px;
-  }
-  thead tr th {
-    --tw-border-opacity: 1;
-    border-color: rgb(51 65 85 / var(--tw-border-opacity));
-  }
-  thead tr th {
-    padding-left: 0.5rem;
-    padding-right: 0.5rem;
-  }
-  thead tr th {
-    padding-top: 0.25rem;
-    padding-bottom: 0.25rem;
-  }
-  thead tr th {
-    text-align: left;
-  }
-  tbody tr td {
-    border-width: 1px;
-  }
-  tbody tr td {
-    --tw-border-opacity: 1;
-    border-color: rgb(51 65 85 / var(--tw-border-opacity));
-  }
-  tbody tr td {
-    padding-left: 0.5rem;
-    padding-right: 0.5rem;
-  }
-  tbody tr td {
-    padding-top: 0.25rem;
-    padding-bottom: 0.25rem;
-  }
-}
-
-form fieldset {
   display: flex;
-  flex-direction: column;
+  justify-content: space-between;
-  gap: 1rem;
+  align-items: end;
-  border-radius: 0.75rem;
+}
-  border-width: 1px;
+body.paste header .action-buttons {
-  --tw-border-opacity: 1;
+  display: flex;
-  border-color: rgb(51 65 85 / var(--tw-border-opacity));
+  justify-content: end;
-  padding: 1rem;
+  gap: 0.5rem;
-  padding-top: 0.5rem;
+}
-  input[type="text"],
+body.paste header .action-buttons button,
-    textarea {
+body.paste header .action-buttons [role=button] {
+  background-color: var(--color-bg-raised-1);
+  padding: 0.25rem 0.75rem;
+  border: 1px solid var(--color-bd-base);
   border-radius: 0.5rem;
-  }
-  input[type="text"],
-    textarea {
-    border-width: 1px;
-  }
-  input[type="text"],
-    textarea {
-    --tw-border-opacity: 1;
-    border-color: rgb(51 65 85 / var(--tw-border-opacity));
-  }
-  input[type="text"],
-    textarea {
-    background-color: transparent;
-  }
-  input[type="text"],
-    textarea {
-    padding-left: 0.75rem;
-    padding-right: 0.75rem;
-  }
-  input[type="text"],
-    textarea {
-    padding-top: 0.5rem;
-    padding-bottom: 0.5rem;
-  }
-  input[type="text"]:hover,
-    textarea:hover {
-    --tw-border-opacity: 1;
-    border-color: rgb(100 116 139 / var(--tw-border-opacity));
-  }
-  input[type="text"]:focus-visible,
-    textarea:focus-visible {
-    --tw-border-opacity: 1;
-    border-color: rgb(100 116 139 / var(--tw-border-opacity));
-  }
-  input[type="submit"] {
-    margin-left: auto;
-  }
-  input[type="submit"] {
   cursor: pointer;
+  color: inherit;
+  font-size: 0.875rem;
+  text-decoration: none;
 }
-  input[type="submit"] {
+body.paste header .action-buttons button:hover, body.paste header .action-buttons button:focus-visible,
+body.paste header .action-buttons [role=button]:hover,
+body.paste header .action-buttons [role=button]:focus-visible {
+  background-color: var(--color-bg-raised-2);
+  border-color: var(--color-bd-highlighted);
+}
+body.paste main pre {
+  background-color: var(--color-bg-raised-1);
+  padding: 1rem;
+  border: 1px solid var(--color-bd-base);
+  border-radius: 0.75rem;
+  margin: 0;
+}
+
+body.admin-pastes main form input[type=text],
+body.admin-pastes main form textarea,
+body.admin-pastes main form input[type=submit] {
+  padding: 0.5rem 0.75rem;
   border-radius: 0.5rem;
+  background-color: var(--color-bg-raised-1);
+  border: 1px solid var(--color-bd-base);
+  font-size: inherit;
 }
-  input[type="submit"] {
+body.admin-pastes main form input[type=text]:hover, body.admin-pastes main form input[type=text]:focus-visible,
-    border-width: 1px;
+body.admin-pastes main form textarea:hover,
+body.admin-pastes main form textarea:focus-visible,
+body.admin-pastes main form input[type=submit]:hover,
+body.admin-pastes main form input[type=submit]:focus-visible {
+  background-color: var(--color-bg-raised-2);
+  border-color: var(--color-bd-highlighted);
 }
-  input[type="submit"] {
+body.admin-pastes main form input[type=text],
-    --tw-border-opacity: 1;
+body.admin-pastes main form textarea {
-    border-color: rgb(51 65 85 / var(--tw-border-opacity));
+  width: 100%;
+  margin-bottom: 1rem;
 }
-  input[type="submit"] {
+body.admin-pastes main form textarea {
-    padding-left: 0.75rem;
+  min-height: 8rem;
-    padding-right: 0.75rem;
-  }
-  input[type="submit"] {
-    padding-top: 0.5rem;
-    padding-bottom: 0.5rem;
-  }
-  input[type="submit"]:hover {
-    --tw-border-opacity: 1;
-    border-color: rgb(100 116 139 / var(--tw-border-opacity));
-  }
-  input[type="submit"]:focus-visible {
-    --tw-border-opacity: 1;
-    border-color: rgb(100 116 139 / var(--tw-border-opacity));
 }
+body.admin-pastes main form input[type=submit] {
+  cursor: pointer;
+  margin-left: auto;
+  display: block;
 }
+
+/*# sourceMappingURL=style.css.map */

static/style.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../styles/tailwind/_colors.scss","../styles/tailwind/_spacing.scss","../styles/_theme.scss","../styles/tailwind/_border-radius.scss","../styles/style.scss","../styles/tailwind/_text.scss"],"names":[],"mappings":"AAAA;ACAA;AAAA;AAAA;AAOA;ACHA;EACE;;;AAGF;AACA;AACE;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;AAEA;EACA;EACA;;AAEA;EAfF;AAgBI;IACA;IACA;IACA;AAEA;IACA;IACA;IACA;AAEA;IACA;IACA;;;;ACrCJ;ACKA;EACI;;;AAGJ;EAEI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI,WHDQ;;AGIZ;EAbJ;IAcQ;;;AAGJ;EACI;;AAEA;EACI;EACA;EACA,WC1BI;ED2BJ,aCEY;;ADEpB;EACI;EACA;EACA;;;AAKJ;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAEA;AAAA;EAEI;EACA;EACA;EACA,eDvDR;ECwDQ;EACA;EACA,WC9DD;ED+DC;;AAEA;AAAA;AAAA;EAEI;EACA;;AAOZ;EAEI;EACA;EACA;EACA,eD3EJ;EC4EI;;;AAOJ;AAAA;AAAA;EAGI;EACA,eDxFJ;ECyFI;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;EAEI;EACA;;AAIR;AAAA;EAEI;EACA;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA","file":"style.css"}

styles/_theme.scss

@@ -0,0 +1,53 @@
+@use "tailwind/colors";
+@use "tailwind/spacing";
+@use "tailwind/text";
+
+html {
+  color-scheme: light dark;
+}
+
+/* These need switchable client-side */
+:root {
+  /* Foreground */
+  --color-fg-base: #{colors.$slate-700};
+  --color-fg-deemphasized: #{colors.$slate-600};
+  --color-fg-headings: #{colors.$slate-900};
+
+  /* Background */
+  --color-bg-base: #{colors.$slate-100};
+  --color-bg-raised-1: #{colors.$slate-200};
+  --color-bg-raised-2: #{colors.$slate-300};
+
+  /* Borders */
+  --color-bd-base: #{colors.$slate-300};
+  --color-bd-highlighted: #{colors.$slate-500};
+
+  @media (prefers-color-scheme: dark) {
+    /* Foreground */
+    --color-fg-base: #{colors.$slate-300};
+    --color-fg-deemphasized: #{colors.$slate-400};
+    --color-fg-headings: #{colors.$slate-100};
+
+    /* Background */
+    --color-bg-base: #{colors.$slate-900};
+    --color-bg-raised-1: #{colors.$slate-800};
+    --color-bg-raised-2: #{colors.$slate-700};
+
+    /* Borders */
+    --color-bd-base: #{colors.$slate-700};
+    --color-bd-highlighted: #{colors.$slate-500};
+  }
+}
+
+@mixin heading($disable-margin: false) {
+  color: var(--color-fg-headings);
+  @if $disable-margin {
+    margin: 0;
+  }
+}
+
+@mixin heading2($disable-margin: false) {
+  @include heading($disable-margin);
+  font-size: text.$font-size-4xl;
+  font-weight: text.$font-weight-bold;
+}

styles/style.scss

@@ -0,0 +1,138 @@
+@use "theme";
+@use "tailwind/border-radius";
+@use "tailwind/spacing";
+@use "tailwind/text";
+
+* {
+    box-sizing: border-box;
+}
+
+body {
+    // @apply flex flex-col gap-8 px-4 py-16 mx-auto max-w-4xl bg-slate-900 text-fg-base max-lg:py-8;
+    font-family: Inter, "Inter Variable", sans-serif;
+    color: var(--color-fg-base);
+    background-color: var(--color-bg-base);
+    padding: spacing.s(16) spacing.s(8);
+    margin: 0 auto;
+    max-width: spacing.$max-width-4xl;
+
+    &.wide {
+        max-width: spacing.$max-width-6xl;
+    }
+
+    @media not all and (min-width: var(--max-width-lg)) {
+        padding: spacing.s(8);
+    }
+
+    header {
+        margin-bottom: spacing.s(8);
+
+        h1 {
+            margin: 0;
+            color: var(--color-fg-headings);
+            font-size: text.$font-size-3xl;
+            font-weight: text.$font-weight-extrabold;
+        }
+    }
+
+    footer {
+        color: var(--color-fg-deemphasized);
+        margin-top: spacing.s(8);
+        text-align: center;
+    }
+}
+
+body.paste {
+    header {
+        display: flex;
+        justify-content: space-between;
+        align-items: end;
+
+        .action-buttons {
+            display: flex;
+            justify-content: end;
+            gap: spacing.s(2);
+
+            button,
+            [role="button"] {
+                background-color: var(--color-bg-raised-1);
+                padding: spacing.s(1) spacing.s(3);
+                border: 1px solid var(--color-bd-base);
+                border-radius: border-radius.$br-lg;
+                cursor: pointer;
+                color: inherit;
+                font-size: text.$font-size-sm;
+                text-decoration: none;
+
+                &:hover,
+                &:focus-visible {
+                    background-color: var(--color-bg-raised-2);
+                    border-color: var(--color-bd-highlighted);
+                }
+            }
+        }
+    }
+
+    main {
+        pre {
+            // pre class="p-4 border border-bd-base rounded-xl" { (r.content) }
+            background-color: var(--color-bg-raised-1);
+            padding: spacing.s(4);
+            border: 1px solid var(--color-bd-base);
+            border-radius: border-radius.$br-xl;
+            margin: 0;
+        }
+    }
+}
+
+body.admin-pastes {
+    main form {
+        input[type="text"],
+        textarea,
+        input[type="submit"] {
+            padding: spacing.s(2) spacing.s(3);
+            border-radius: border-radius.$br-lg;
+            background-color: var(--color-bg-raised-1);
+            border: 1px solid var(--color-bd-base);
+            font-size: inherit;
+
+            &:hover,
+            &:focus-visible {
+                background-color: var(--color-bg-raised-2);
+                border-color: var(--color-bd-highlighted);
+            }
+        }
+
+        input[type="text"],
+        textarea {
+            width: 100%;
+            margin-bottom: spacing.s(4);
+        }
+
+        textarea {
+            min-height: spacing.s(32);
+        }
+
+        input[type="submit"] {
+            cursor: pointer;
+            margin-left: auto;
+            display: block;
+        }
+    }
+}
+
+a.tl {
+    // @apply underline hover:no-underline hover:text-white focus-visible:no-underline focus-visible:text-white;
+}
+
+table {
+    // @apply table-auto border-collapse border border-bd-base;
+
+    thead tr th {
+        // @apply border border-bd-base px-2 py-1 text-left;
+    }
+
+    tbody tr td {
+        // @apply border border-bd-base px-2 py-1;
+    }
+}

styles/tailwind/_border-radius.scss

@@ -0,0 +1,10 @@
+/* https://github.com/tailwindlabs/tailwindcss/blob/ac6d4a6e8e9ae7ca197bf98d933ae2f205be3635/packages/tailwindcss/src/compat/default-theme.ts#L162 */
+$br-none: 0px;
+$br-sm: 0.125rem;
+$br-default: 0.25rem;
+$br-md: 0.375rem;
+$br-lg: 0.5rem;
+$br-xl: 0.75rem;
+$br-2xl: 1rem;
+$br-3xl: 1.5rem;
+$br-full: 9999px;

styles/tailwind/_colors.scss

@@ -0,0 +1,12 @@
+/* Tailwind palette */
+$slate-50: #f8fafc;
+$slate-100: #f1f5f9;
+$slate-200: #e2e8f0;
+$slate-300: #cbd5e1;
+$slate-400: #94a3b8;
+$slate-500: #64748b;
+$slate-600: #475569;
+$slate-700: #334155;
+$slate-800: #1e293b;
+$slate-900: #0f172a;
+$slate-950: #020617;

styles/tailwind/_screens.scss

@@ -0,0 +1,6 @@
+/* https://github.com/tailwindlabs/tailwindcss/blob/ac6d4a6e8e9ae7ca197bf98d933ae2f205be3635/packages/tailwindcss/src/compat/default-theme.ts#L885 */
+$screen-sm: 640px;
+$screen-md: 768px;
+$screen-lg: 1024px;
+$screen-xl: 1280px;
+$screen-2xl: 1536px;

styles/tailwind/_spacing.scss

@@ -0,0 +1,25 @@
+/* Yes, it's that simple.
+ * https://tailwindcss.com/docs/customizing-spacing#default-spacing-scale
+ * https://github.com/tailwindlabs/tailwindcss/blob/ac6d4a6e8e9ae7ca197bf98d933ae2f205be3635/packages/tailwindcss/src/compat/default-theme.ts#L909 */
+@function s($n) {
+  @return 0.25rem * $n;
+}
+
+/* https://github.com/tailwindlabs/tailwindcss/blob/ac6d4a6e8e9ae7ca197bf98d933ae2f205be3635/packages/tailwindcss/src/compat/default-theme.ts#L715 */
+$max-width-none: none;
+$max-width-xs: 20rem;
+$max-width-sm: 24rem;
+$max-width-md: 28rem;
+$max-width-lg: 32rem;
+$max-width-xl: 36rem;
+$max-width-2xl: 42rem;
+$max-width-3xl: 48rem;
+$max-width-4xl: 56rem;
+$max-width-5xl: 64rem;
+$max-width-6xl: 72rem;
+$max-width-7xl: 80rem;
+$max-width-full: 100%;
+$max-width-min: min-content;
+$max-width-max: max-content;
+$max-width-fit: fit-content;
+$max-width-prose: 65ch;

styles/tailwind/_text.scss

@@ -0,0 +1,37 @@
+$font-size-xs: 0.75rem;
+$font-size-sm: 0.875rem;
+$font-size-base: 1rem;
+$font-size-lg: 1.125rem;
+$font-size-xl: 1.25rem;
+$font-size-2xl: 1.5rem;
+$font-size-3xl: 1.875rem;
+$font-size-4xl: 2.25rem;
+$font-size-5xl: 3rem;
+$font-size-6xl: 3.75rem;
+$font-size-7xl: 4.5rem;
+$font-size-8xl: 6rem;
+$font-size-9xl: 8rem;
+
+$line-height-xs: 1rem;
+$line-height-sm: 1.25rem;
+$line-height-base: 1.5rem;
+$line-height-lg: 1.75rem;
+$line-height-xl: 1.75rem;
+$line-height-2xl: 2rem;
+$line-height-3xl: 2.25rem;
+$line-height-4xl: 2.5rem;
+$line-height-5xl: 1;
+$line-height-6xl: 1;
+$line-height-7xl: 1;
+$line-height-8xl: 1;
+$line-height-9xl: 1;
+
+$font-weight-thin: 100;
+$font-weight-extralight: 200;
+$font-weight-light: 300;
+$font-weight-normal: 400;
+$font-weight-medium: 500;
+$font-weight-semibold: 600;
+$font-weight-bold: 700;
+$font-weight-extrabold: 800;
+$font-weight-black: 900;

tailwind.config.js

@@ -1,34 +0,0 @@
-/** @type {import("tailwindcss/colors")} */
-const colors = require("tailwindcss/colors");
-
-/** @type {import("tailwindcss").Config} */
-module.exports = {
-  content: ["./src/app/pages/**/*.rs"],
-  theme: {
-    fontFamily: {
-      sans: ["sans-serif"],
-      mono: ["monospace"],
-    },
-    extend: {
-      colors: {
-        fg: {
-          base: colors.slate[300],
-          deemphasized: colors.slate[400],
-          headings: colors.white,
-        },
-        bg: {
-          base: colors.slate[900],
-          raised: {
-            // backgrounds
-            1: colors.slate[800],
-            2: colors.slate[700],
-          },
-        },
-        bd: {
-          base: colors.slate[700],
-          highlighted: colors.slate[500],
-        },
-      },
-    },
-  },
-};

templates/admin/base.html

@@ -0,0 +1,12 @@
+{% extends "../base.html" %}
+
+{% block bodyClass %}admin{% endblock %}
+
+{% block header %}
+<h1>{{title}}</h1>
+{% endblock %}
+
+{% block main %}
+{{main}}
+{% call super() %}
+{% endblock %}

templates/admin/paste-new.html

@@ -0,0 +1,18 @@
+{% extends "../base.html" %}
+
+{% block title %}Create Paste{% endblock %}
+
+{% block bodyClass %}admin-pastes{% endblock %}
+
+{% block header %}
+<h1>Create Paste</h1>
+{% endblock %}
+
+{% block main %}
+<form method="post" action="/admin/pastes">
+    <input type="text" name="title" placeholder="Paste title" required value="{{paste_title}}" />
+    <textarea name="content" placeholder="Paste content" required>{{paste_content}}</textarea>
+    <input type="submit" value="Create" />
+</form>
+{% call super() %}
+{% endblock %}

templates/admin/pastes.html

@@ -0,0 +1,12 @@
+{% extends "../base.html" %}
+
+{% block bodyClass %}admin-pastes{% endblock %}
+
+{% block header %}
+<h1>Pastes</h1>
+{% endblock %}
+
+{% block main %}
+
+{% call super() %}
+{% endblock %}

templates/base.html

@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>{% block title %}{{title}}{% endblock %} | NCPN</title>
+        <link rel="stylesheet" href="/style.css" />
+        <script src="/script.js" defer></script>
+        <noscript>
+            <style>
+                .jsonly {
+                    display: none;
+                }
+            </style>
+        </noscript>
+        {% block head %}{% endblock %}
+    </head>
+    <body class="{% block bodyClass %}{% endblock %}">
+        <header>{% block header %}{% endblock %}</header>
+        <main>{% block main %}{% endblock %}</main>
+        <footer>Running NCPN v?.??</footer>
+    </body>
+</html>

templates/paste.html

@@ -0,0 +1,16 @@
+{% extends "base.html" %}
+
+{% block bodyClass %}paste{% endblock %}
+
+{% block header %}
+<h1>{{title}}</h1>
+<div class="action-buttons">
+    <a role="button" href="/p/{{id}}/raw">Raw</a>
+    <button class="jsonly" onclick="copyPasteContent()">Copy</button>
+</div>
+{% endblock %}
+
+{% block main %}
+<pre id="paste-content">{{content}}</pre>
+{% call super() %}
+{% endblock %}

templates/test.html

@@ -0,0 +1 @@
+Hello, {{ name }}!