feat: render cached post to page

README.md

@@ -10,9 +10,9 @@ Cozy is your modern-day reading assistant.
 ## Roadmap
 | Feature | Status |
 | --- | --- |
-| Remove distractions| Done |
-| Save to a Reading Library | In-Progress |
-| PWA: Offline access to library | |
+| Remove distractions| ✅ DONE |
+| Save to a Reading Library | ✅ DONE |
+| PWA: Offline access to library | 🛠️ In-progress |
 | AI insights | |
 | Browser Extensions | |
 

src/components/Library.astro

@@ -1,20 +1,26 @@
+---
+export interface Props {
+  postDivSelector: string
+}
+
+const {postDivSelector} = Astro.props;
+---
 <div id="library"></div>
 
+<input value={postDivSelector} name="postDivSelector" id="postDivSelector" hidden />
+
 <script>
   const cache = await caches.open('cozy-reader');
   const url = new URL(window.location.href);
-  console.log('client script loaded', url);
   const response = await cache.match(url)
-  if (response) {
-    console.log('cache hit', response);
-  } else {
-    console.log('cache miss');
+  if (!response) {
     await cache.add(url);
   }
 
-  const cachedResponses = await cache.keys();
-  console.log(cachedResponses);
+  const postDivSelector = document.getElementById('postDivSelector') as HTMLInputElement;
+  const postDiv = document.querySelector(postDivSelector?.value);
 
+  const cachedResponses = await cache.keys();
   const library = document.getElementById('library');
   const list = document.createElement('ul');
   cachedResponses.forEach(response => {
@@ -22,6 +28,21 @@
     const link = document.createElement('a');
     link.innerText = url;
     link.href = url;
+    link.onclick = async (e) => {
+      e.preventDefault();
+      const fullResponse = await cache.match(url)
+      fullResponse?.text().then(data => {
+        const html = document.createElement('html');
+        html.innerHTML = data;
+        const body = html.querySelector('body');
+        const newPost = body?.querySelector('#post');
+        console.log(body?.querySelector('#post'));
+        if (postDiv && newPost?.innerHTML) {
+          postDiv.innerHTML = (newPost.innerHTML)
+        }
+      });
+
+    }
     const item = document.createElement('li');
     item.appendChild(link);
     list?.appendChild(item);

src/components/post.astro

@@ -11,7 +11,7 @@ const datePublished =
 
 {
   article && (
-    <div class="post">
+    <div id="post">
       {article.source && <span class="source">{article.source}</span>}
       {article.title && <h1 class="title">{article.title}</h1>}
       {(article.author || datePublished) && (
@@ -26,7 +26,7 @@ const datePublished =
 }
 
 <style is:inline>
-  div.post {
+  div#post {
     max-width: 600px;
     margin: 1em auto;
     padding: 1em;

src/pages/index.astro

@@ -21,6 +21,6 @@ try {
 ---
 <Layout title={url !== "" ?  article?.title : "Your modern-day reading assistant"}>
   <AddressBar url={url} />
-  <Library />
+  <Library postDivSelector="#post" />
   {url && <Post article={article} />}
 </Layout>