feat: preserve history

src/components/AddressBar.astro

@@ -9,7 +9,7 @@ const placeholder = 'Type the URL of an article here';
 
 <div class="address-bar">
   <form>
-    <button aria-label="Home" title="Home" class="left-button" type="button" id="app-home" name="app-home" onclick="window.location.href = '/';" hidden>
+    <button aria-label="Home" title="Home" class="left-button" type="button" id="app-home" name="app-home" onclick="history.back();" hidden>
       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M17.51 3.87L15.73 2.1L5.84 12l9.9 9.9l1.77-1.77L9.38 12l8.13-8.13z"/></svg>
     </button>
     <input type="text" id="app-url" name="url" value={url} placeholder={placeholder} />

src/components/Library.astro

@@ -15,13 +15,12 @@ const {postDivSelector, skipSave = false} = Astro.props;
 <input type="checkbox" id="skipSave" name="skipSave" checked={skipSave} hidden />
 
 <script>
-  import { getPostCard } from '../utils/library'
+  import { getPostCard, renderPost } from '../utils/library'
   const cache = await caches.open('cozy-reader');
   const url = new URL(window.location.href);
   const response = await cache.match(url)
   const postDivSelector = document.getElementById('postDivSelector') as HTMLInputElement;
   const skipSave = document.getElementById('skipSave') as HTMLInputElement;
-  const postDiv = document.querySelector(postDivSelector?.value);
 
   if (!response) {
     if (!skipSave?.checked) {
@@ -66,14 +65,7 @@ const {postDivSelector, skipSave = false} = Astro.props;
         link.onclick = async (e) => {
           e.preventDefault();
           scroll(0,0);
-            const html = document.createElement('html');
+          renderPost(responseText, url, postDivSelector?.value)
-            html.innerHTML = responseText;
-            const newPost = html.querySelector('body')?.querySelector('#post');
-            if (postDiv && newPost?.innerHTML) {
-              postDiv.innerHTML = newPost.innerHTML
-              const homeBtn = document.getElementById('app-home') as HTMLButtonElement;
-              homeBtn.removeAttribute('disabled');
-            }
         }
         const item = document.createElement('li');
         item.appendChild(link);
@@ -82,6 +74,20 @@ const {postDivSelector, skipSave = false} = Astro.props;
 
       });
     });
+
+    window.onpopstate = async (data) => {
+      let url = data.state?.url;
+
+      if (!url) {
+        url = window.location.href;
+      }
+
+        const fullResponse = await cache.match(url)
+        fullResponse?.text().then(data => {
+          const responseText = data;
+          renderPost(responseText, url, postDivSelector?.value, true);
+        });
+    }
   }
 </script>
 

src/utils/library.ts

@@ -64,3 +64,24 @@ export function getPostCard(html: HTMLHtmlElement) {
     `;
   return postCard;
 }
+export function renderPost(responseText, url, postDivSelector: string, preventPushState = false) {
+            const postDiv = document.querySelector(postDivSelector);
+            const html = document.createElement('html');
+            html.innerHTML = responseText;
+            const newPost = html.querySelector('body')?.querySelector('#post');
+            if (postDiv && newPost?.innerHTML) {
+              postDiv.innerHTML = newPost.innerHTML
+              const homeBtn = document.getElementById('app-home') as HTMLButtonElement;
+              homeBtn.removeAttribute('disabled');
+              const appUrl = document.getElementById('app-url') as HTMLInputElement;
+              const cozyUrl = html.querySelector('meta[property="cozy:url"]')?.getAttribute('content');
+              if(cozyUrl !== '/') {
+                appUrl.value = cozyUrl || '';
+              }
+              if(!preventPushState) {
+                window.history.pushState({url}, '', url);
+              }
+              const submitBtn = document.getElementById('submit') as HTMLButtonElement;
+              submitBtn.removeAttribute('disabled');
+            }
+    }