make correct use of htmx caching

Austionian · Jul 3, 2024 · 8683edb · 8683edb
1 parent 63a58d1
commit 8683edb
Show file tree

Hide file tree

Showing 9 changed files with 116 additions and 99 deletions.
diff --git a/src/helpers.rs b/src/helpers.rs
@@ -24,7 +24,9 @@ use std::{fs, io};
 /// *value = "false".parse().unwrap();
 /// assert_eq!(get_template(&headers, "test"), "test_full.html".to_string());
 pub fn get_template(headers: &HeaderMap, template_name: &str) -> String {
-    if headers.get("HX-Request").is_some_and(|v| v == "true") {
+    if headers.get("HX-Request").is_some_and(|v| v == "true")
+        && headers.get("HX-History-Restore-Request").is_none()
+    {
         format!("partials/{template_name}.html")
     } else {
         format!("{template_name}.html")

diff --git a/src/routes/blog.rs b/src/routes/blog.rs
@@ -6,6 +6,7 @@ use axum::{
     extract::{Query, State},
     response::Html,
 };
+use hyper::header;
 use std::sync::Arc;
 
 #[derive(serde::Deserialize)]
@@ -63,10 +64,13 @@ pub async fn blog(
 
     // Return the response.
     match TEMPLATES.render(&template, &context) {
-        Ok(s) => Html(s),
+        Ok(s) => ([(header::VARY, "HX-Request")], Html(s)),
         Err(e) => {
             tracing::error!("Unable to load blog: {}", e);
-            Html("<html><body>Error</body></html>".to_string())
+            (
+                [(header::VARY, "HX-Request")],
+                Html("<html><body>Error</body></html>".to_string()),
+            )
         }
     }
 }
diff --git a/src/routes/post.rs b/src/routes/post.rs
@@ -6,6 +6,7 @@ use axum::extract::Path;
 use axum::http::HeaderMap;
 use axum::response::{Html, IntoResponse};
 use comrak::{markdown_to_html_with_plugins, plugins::syntect::SyntectAdapter, Options, Plugins};
+use hyper::header;
 use reqwest::Client;
 
 /// A handler function that will load a post, convert it to HTML, and
@@ -66,10 +67,13 @@ pub async fn get_blog_post(headers: HeaderMap, Path(post_name): Path<String>) ->
 
     // Return the response.
     match TEMPLATES.render(&template, &context) {
-        Ok(s) => Html(s),
+        Ok(s) => ([(header::VARY, "HX-Request")], Html(s)),
         Err(e) => {
             tracing::error!("Failed rendering the template: {}", e);
-            Html("<html><body>Error</body></html>".to_string())
+            (
+                [(header::VARY, "HX-Request")],
+                Html("<html><body>Error</body></html>".to_string()),
+            )
         }
     }
 }
diff --git a/templates/base.html b/templates/base.html
@@ -44,20 +44,25 @@
     </style>
     <link href="/assets/styles.css" rel="stylesheet" type="text/css" />
   </head>
-  <body class="bg-primary-50/10 dark:bg-black dark:text-gray-100 leading-relaxed font-mono">
+  <body
+    class="bg-primary-50/10 dark:bg-black dark:text-gray-100 leading-relaxed font-mono"
+  >
     <div
       class="relative inset-x-0 top-0 z-50"
       x-data="{ atTop: false, open: false }"
     >
-      {% set links = ["bl0g", "pr0jects"] %} {% include
-      "includes/header.html" %}
+      {% set links = ["bl0g", "pr0jects"] %} {% include "includes/header.html"
+      %}
       <div class="relative isolate px-2 sm:px-6 pt-14 lg:px-8">
         <div
           class="mx-auto max-w-6xl py-4 p-4 sm:p-8 text-primary-700 dark:text-primary-200"
-          hx-boost="true" hx-history="false"
+          hx-boost="true"
+          id="content"
+          hx-history-elt
         >
-        {% block body %} {% endblock %} {% include "includes/footer.html" %}
+          {% block body %} {% endblock %}
         </div>
+        {% include "includes/footer.html" %}
       </div>
     </div>
     <script src="/assets/js/htmx.min.js" defer></script>

diff --git a/templates/includes/list_of_posts.html b/templates/includes/list_of_posts.html
@@ -2,8 +2,8 @@
   {% for post in posts %}
   <a
     href="/bl0g/{{ post.title }}#"
-    hx-target="#outerReach"
-    hx-swap="outerHTML transition:true show:body:top"
+    hx-target="#content"
+    hx-swap="innerHTML transition:true show:body:top"
   >
     <div
       class="pt-6 sm:pt-2 group cursor-pointer mb-8 -ml-2 transition pl-2 pr-2 sm:pr-4 rounded-lg border border-transparent bg-white/10 dark:bg-transparent"

diff --git a/templates/includes/pagination.html b/templates/includes/pagination.html
@@ -6,8 +6,8 @@
     <a
       class="group inline-flex items-center border-t-2 border-transparent pr-1 pt-4 text-sm font-medium text-slate-500 hover:border-secondary-400 dark:hover:border-secondary-500 hover:text-secondary-500 cursor-pointer"
       href="{{ pagination.previous }}#"
-      hx-target="#outerReach"
-      hx-swap="outerHTML transition:true show:body:top"
+      hx-target="#content"
+      hx-swap="innerHTML transition:true show:body:top"
     >
       <svg
         class="mr-3 h-5 w-5 text-slate-500 group-hover:fill-secondary-500 group-hover:translate-x-1 transition"
@@ -30,8 +30,8 @@
     <a
       class="inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-slate-500 hover:border-secondary-400 dark:hover:border-secondary-500 hover:text-secondary-500 dark:hover:text-secondary-400 {% if pagination.current == page %} text-primary-400{% endif %} cursor-pointer"
       href="/bl0g?page={{ page }}#"
-      hx-target="#outerReach"
-      hx-swap="outerHTML transition:true show:body:top"
+      hx-target="#content"
+      hx-swap="innerHTML transition:true show:body:top"
       >{{ page }}</a
     >
     {% endfor %}
@@ -41,8 +41,8 @@
     <a
       class="group inline-flex items-center border-t-2 border-transparent pl-1 pt-4 text-sm font-medium text-slate-500 hover:border-secondary-400 dark:hover:border-secondary-500 hover:text-secondary-500 dark:hover:text-secondary-400 cursor-pointer"
       href="{{ pagination.next }}#"
-      hx-target="#outerReach"
-      hx-swap="outerHTML transition:true show:body:top"
+      hx-target="#content"
+      hx-swap="innerHTML transition:true show:body:top"
     >
       Next
       <svg

diff --git a/templates/index.html b/templates/index.html
@@ -1,90 +1,92 @@
 {% extends "base.html" %} {% block body %}
-<div id="outerReach">
-  <div class="lg:flex lg:justify-between lg:gap-4">
-    <div
-      class="lg:sticky lg:top-[10.5rem] lg:flex lg:h-[85vh] lg:max-h-screen lg:w-1/2 lg:flex-col lg:justify-between lg:pr-20"
-    >
-      <div class="group">
-        <div class="flex flex-col">
-          <img
-            src="/assets/images/selfportrait.webp"
-            alt="The author photographing a mirror"
-            class="rounded-full ring-1 ring-primary-800/50 dark:ring-primary-200/50 h-[100px] mr-5 w-[100px]"
-          />
-          <div class="mt-2 flex items-center">
-            <h2 class="text-4xl font-bold tracking-tight sm:text-5xl font-sans">
-              austin r<span class="font-mono text-secondary-400 dark:text-secondary-500 italic">00</span>ks
-            </h2>
-          </div>
+<div class="lg:flex lg:justify-between lg:gap-4">
+  <div
+    class="lg:sticky lg:top-[10.5rem] lg:flex lg:h-[85vh] lg:max-h-screen lg:w-1/2 lg:flex-col lg:justify-between lg:pr-20"
+  >
+    <div class="group">
+      <div class="flex flex-col">
+        <img
+          src="/assets/images/selfportrait.webp"
+          alt="The author photographing a mirror"
+          class="rounded-full ring-1 ring-primary-800/50 dark:ring-primary-200/50 h-[100px] mr-5 w-[100px]"
+        />
+        <div class="mt-2 flex items-center">
+          <h2 class="text-4xl font-bold tracking-tight sm:text-5xl font-sans">
+            austin r<span
+              class="font-mono text-secondary-400 dark:text-secondary-500 italic"
+              >00</span
+            >ks
+          </h2>
         </div>
-        <p class="text-lg font-medium tracking-tight sm:text-xl">
-          software engineer
+      </div>
+      <p class="text-lg font-medium tracking-tight sm:text-xl">
+        software engineer
+      </p>
+      <p class="mt-4 text-primary-700 dark:text-primary-300 font-light">
+        Curious and persistent, building quality experiences.
+      </p>
+    </div>
+    {% include 'includes/social.html' %}
+  </div>
+  <div class="lg:w-1/2 lg:px-1">
+    <div class="lg:mt-28">
+      <h2
+        class="block lg:hidden text-primary-700 dark:text-primary-300 font-bold"
+      >
+        ab0ut
+      </h2>
+      <div class="mt-6 lg:mt-0 space-y-4">
+        <p class="lg:mt-0">
+          I am an experienced software engineer passionate about learning and
+          building performant, correct applications. I've been recognized as a
+          individual performer and as a team player.
+        </p>
+        <p>
+          My engineering journey started on whim asking an employer for a
+          internship in a stairwell and becoming a product person for a small
+          SaaS app. From there I began building Python, JavaScript, and Rust
+          apps.
         </p>
-        <p class="mt-4 text-primary-700 dark:text-primary-300 font-light">
-          Curious and persistent, building quality experiences.
+        <p>
+          Outside of programming for work, I enjoy
+          <a
+            href="https://github.com/search?q=owner%3AAustionian+advent_of_code+OR+codecrafters&type=repositories"
+            >programming for fun</a
+          >, reading, and surfing Lake Michigan when time and weather and
+          children allow.
         </p>
       </div>
-      {% include 'includes/social.html' %}
     </div>
-    <div class="lg:w-1/2 lg:px-1">
-      <div class="lg:mt-28">
-        <h2 class="block lg:hidden text-primary-700 dark:text-primary-300 font-bold">
-          ab0ut
-        </h2>
-        <div class="mt-6 lg:mt-0 space-y-4">
-          <p class="lg:mt-0">
-            I am an experienced software engineer passionate about learning and
-            building performant, correct applications. I've been recognized as a
-            individual performer and as a team player.
-          </p>
-          <p>
-            My engineering journey started on whim asking an employer for a
-            internship in a stairwell and becoming a product person for a small
-            SaaS app. From there I began building Python, JavaScript, and Rust
-            apps.
-          </p>
-          <p>
-            Outside of programming for work, I enjoy <a
-              href="https://github.com/search?q=owner%3AAustionian+advent_of_code+OR+codecrafters&type=repositories"
-              >programming for fun</a
-            >, reading, and surfing Lake Michigan when time and weather and
-            children allow.
-          </p>
-        </div>
-      </div>
-      <div class="mt-10">{% include 'includes/work.html' %}</div>
-      <h2 class="mt-28 -mb-2 font-bold">recent p0sts</h2>
-      <div>{% include 'includes/list_of_posts.html' %}</div>
-      <div class="flex justify-end pt-6">
-        <a
-          href="/bl0g#"
-          hx-target="#outerReach"
-          hx-swap="outerHTML transition:true show:body:top"
-          class="group-hover:text-secondary-400"
+    <div class="mt-10">{% include 'includes/work.html' %}</div>
+    <h2 class="mt-28 -mb-2 font-bold">recent p0sts</h2>
+    <div>{% include 'includes/list_of_posts.html' %}</div>
+    <div class="flex justify-end pt-6">
+      <a
+        href="/bl0g#"
+        hx-target="#content"
+        hx-swap="innerHTML transition:true show:body:top"
+        class="group-hover:text-secondary-400"
+      >
+        <div
+          class="group flex flex-row items-center justify-center font-extralight"
         >
-          <div
-            class="group flex flex-row items-center justify-center font-extralight"
-          >
-            <div class="group-hover:text-secondary-400">
-              see m0re p0sts
-            </div>
-            <div class="ml-2 group-hover:text-secondary-400">
-              <svg
-                width="14"
-                height="14"
-                viewBox="0 0 14 14"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-                class="ml-2 fill-black dark:fill-white group-hover:fill-secondary-400 group-hover:translate-x-1 group-hover:-translate-y-1 transition"
-              >
-                <path
-                  d="M10.9639 8.92676L10.957 3.59473C10.957 3.42155 10.9023 3.28027 10.793 3.1709C10.6882 3.05697 10.5446 3 10.3623 3H5.03027C4.8571 3 4.7181 3.05697 4.61328 3.1709C4.50846 3.28027 4.45605 3.41016 4.45605 3.56055C4.45605 3.70638 4.51074 3.83398 4.62012 3.94336C4.73405 4.05273 4.86393 4.10742 5.00977 4.10742H6.58887L9.2959 4.01172L8.26367 4.89355L3.1709 10C3.05697 10.1094 3 10.237 3 10.3828C3 10.5332 3.05697 10.6676 3.1709 10.7861C3.28939 10.9046 3.42383 10.9639 3.57422 10.9639C3.72461 10.9639 3.85449 10.9092 3.96387 10.7998L9.06348 5.69336L9.95898 4.66113L9.84277 7.34766V8.9541C9.84277 9.09994 9.89746 9.22982 10.0068 9.34375C10.1208 9.45768 10.2529 9.51465 10.4033 9.51465C10.5492 9.51465 10.679 9.45996 10.793 9.35059C10.9069 9.23665 10.9639 9.09538 10.9639 8.92676Z"
-                />
-              </svg>
-            </div>
+          <div class="group-hover:text-secondary-400">see m0re p0sts</div>
+          <div class="ml-2 group-hover:text-secondary-400">
+            <svg
+              width="14"
+              height="14"
+              viewBox="0 0 14 14"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+              class="ml-2 fill-black dark:fill-white group-hover:fill-secondary-400 group-hover:translate-x-1 group-hover:-translate-y-1 transition"
+            >
+              <path
+                d="M10.9639 8.92676L10.957 3.59473C10.957 3.42155 10.9023 3.28027 10.793 3.1709C10.6882 3.05697 10.5446 3 10.3623 3H5.03027C4.8571 3 4.7181 3.05697 4.61328 3.1709C4.50846 3.28027 4.45605 3.41016 4.45605 3.56055C4.45605 3.70638 4.51074 3.83398 4.62012 3.94336C4.73405 4.05273 4.86393 4.10742 5.00977 4.10742H6.58887L9.2959 4.01172L8.26367 4.89355L3.1709 10C3.05697 10.1094 3 10.237 3 10.3828C3 10.5332 3.05697 10.6676 3.1709 10.7861C3.28939 10.9046 3.42383 10.9639 3.57422 10.9639C3.72461 10.9639 3.85449 10.9092 3.96387 10.7998L9.06348 5.69336L9.95898 4.66113L9.84277 7.34766V8.9541C9.84277 9.09994 9.89746 9.22982 10.0068 9.34375C10.1208 9.45768 10.2529 9.51465 10.4033 9.51465C10.5492 9.51465 10.679 9.45996 10.793 9.35059C10.9069 9.23665 10.9639 9.09538 10.9639 8.92676Z"
+              />
+            </svg>
           </div>
-        </a>
-      </div>
+        </div>
+      </a>
     </div>
   </div>
 </div>

diff --git a/templates/partials/blog.html b/templates/partials/blog.html
@@ -1,4 +1,4 @@
-<div id="outerReach">
+<div>
   <h1 class="text-2xl sm:text-3xl mt-28">
     bl<span class="font-mono">0</span>g
   </h1>

diff --git a/templates/partials/post.html b/templates/partials/post.html
@@ -1,4 +1,4 @@
-<div id="#outerReach">
+<div>
   <!-- scroll spy progress bar -->
   <!-- <div -->
   <!--   x-data="{offset: '0%'}" -->