adding htmx

assets/main.css

@@ -544,10 +544,72 @@ video {
   display: block;
 }
 
+.inline-flex {
+  display: inline-flex;
+}
+
+.flex-row {
+  flex-direction: row;
+}
+
+.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)));
+}
+
+.rounded-md {
+  border-radius: 0.375rem;
+}
+
+.bg-indigo-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(79 70 229 / var(--tw-bg-opacity));
+}
+
+.px-2 {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+
+.px-2\.5 {
+  padding-left: 0.625rem;
+  padding-right: 0.625rem;
+}
+
+.px-8 {
+  padding-left: 2rem;
+  padding-right: 2rem;
+}
+
+.py-1 {
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+}
+
+.py-1\.5 {
+  padding-top: 0.375rem;
+  padding-bottom: 0.375rem;
+}
+
+.py-4 {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+
+.text-sm {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
 .font-bold {
   font-weight: 700;
 }
 
+.font-semibold {
+  font-weight: 600;
+}
+
 .text-green-500 {
   --tw-text-opacity: 1;
   color: rgb(34 197 94 / var(--tw-text-opacity));
@@ -557,3 +619,44 @@ video {
   --tw-text-opacity: 1;
   color: rgb(99 102 241 / var(--tw-text-opacity));
 }
+
+.text-white {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
+.underline {
+  text-decoration-line: underline;
+}
+
+.shadow-sm {
+  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.hover\:bg-indigo-500:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(99 102 241 / var(--tw-bg-opacity));
+}
+
+.hover\:text-indigo-300:hover {
+  --tw-text-opacity: 1;
+  color: rgb(165 180 252 / var(--tw-text-opacity));
+}
+
+.focus-visible\:outline:focus-visible {
+  outline-style: solid;
+}
+
+.focus-visible\:outline-2:focus-visible {
+  outline-width: 2px;
+}
+
+.focus-visible\:outline-offset-2:focus-visible {
+  outline-offset: 2px;
+}
+
+.focus-visible\:outline-indigo-600:focus-visible {
+  outline-color: #4f46e5;
+}

package-lock.json

@@ -7,7 +7,6 @@
     "": {
       "name": "achubb_backend",
       "version": "1.0.0",
-      "license": "ISC",
       "devDependencies": {
         "prettier": "^3.1.1",
         "prettier-plugin-tailwindcss": "^0.5.9",

src/main.rs

@@ -23,7 +23,9 @@ async fn main() -> anyhow::Result<()> {
     let assets_path = std::env::current_dir().unwrap();
     let port = 8000_u16;
     let addr = std::net::SocketAddr::from(([0, 0, 0, 0], port));
+    let api_router = Router::new().route("/hello", get(hello_from_the_server));
     let router = Router::new()
+        .nest("/api", api_router)
         .route("/", get(hello))
         .route("/another-page", get(another_page))
         .nest_service(
@@ -78,3 +80,7 @@ async fn another_page() -> impl IntoResponse {
 #[derive(Template)]
 #[template(path = "another-page.html")]
 struct AnotherPageTemplate;
+
+async fn hello_from_the_server() -> &'static str {
+    "Hello!"
+}

templates/base.html

@@ -6,6 +6,9 @@
     <link href="https://rsms.me/inter/inter.css" rel="stylesheet" />
     <!-- Allow any inheriting page to set it's own title -->
     <title>{% block title %}{{ title }}{% endblock %}</title>
+
+    <script src="/assets/htmx.min.js"></script>
+
     <!-- Allow any inheriting page to extend head with additional assets -->
     {% block head %}{% endblock %}
 </head>

templates/hello.html

@@ -2,7 +2,23 @@
 {% extends "base.html" %}
 
 {% block title %}Hello!{% endblock %}
- 
+
 {% block content %}
-<h1 class="text-green-500">Howdy!</h1>
+<div class="inline-flex flex-row space-x-2 px-8 py-4">
+    <h1 class="text-green-500">Howdy!</h1>
+    <a
+        href="/another-page"
+        class="text-indigo-500 underline hover:text-indigo-300"
+        >
+        Another page
+    </a>
+     <button
+        type="button"
+        hx-get="/api/hello"
+        hx-swap="innerHtml"
+        class="rounded-md bg-indigo-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+        >
+        Say hello
+    </button>
+</div>
 {% endblock %}