From 42e71df3c65f8cffab4fdcf18f6deb7d7aac417d Mon Sep 17 00:00:00 2001
From: Ayo <ramon.aycojr@gmail.com>
Date: Sun, 4 Jun 2023 14:03:28 +0200
Subject: [PATCH 1/3] feat: initial use of cache api

---
 src/components/Library.astro | 30 ++++++++++++++++++++++++++++++
 src/pages/index.astro        |  3 +++
 2 files changed, 33 insertions(+)
 create mode 100644 src/components/Library.astro

diff --git a/src/components/Library.astro b/src/components/Library.astro
new file mode 100644
index 0000000..55761ed
--- /dev/null
+++ b/src/components/Library.astro
@@ -0,0 +1,30 @@
+<div id="library"></div>
+
+<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');
+    await cache.add(url);
+  }
+
+  const cachedResponses = await cache.keys();
+  console.log(cachedResponses);
+
+  const library = document.getElementById('library');
+  const list = document.createElement('ul');
+  cachedResponses.forEach(response => {
+    const {url} = response;
+    const link = document.createElement('a');
+    link.innerText = url;
+    link.href = url;
+    const item = document.createElement('li');
+    item.appendChild(link);
+    list?.appendChild(item);
+  })
+  library?.appendChild(list);
+</script>
\ No newline at end of file
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 59577ea..c2cf81c 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -3,6 +3,7 @@ import { extract } from "@extractus/article-extractor";
 import AddressBar from "../components/AddressBar.astro";
 import Post from "../components/Post.astro";
 import Layout from "../layouts/Layout.astro";
+import Library from "../components/Library.astro";
 
 const params = Astro.url.searchParams;
 const url = params.get('url') || '';
@@ -16,8 +17,10 @@ try {
     content: "<p>The article extractor did not get any result.</p>",
   };
 }
+
 ---
 <Layout title={url !== "" ?  article?.title : "Your modern-day reading assistant"}>
   <AddressBar url={url} />
+  <Library />
   {url && <Post article={article} />}
 </Layout>

From c8672fc4eb0e8c1adce09279281c673682ae85ed Mon Sep 17 00:00:00 2001
From: Ayo <ramon.aycojr@gmail.com>
Date: Sun, 4 Jun 2023 14:56:04 +0200
Subject: [PATCH 2/3] feat: render cached post to page

---
 README.md                    |  6 +++---
 src/components/Library.astro | 35 ++++++++++++++++++++++++++++-------
 src/components/post.astro    |  4 ++--
 src/pages/index.astro        |  2 +-
 4 files changed, 34 insertions(+), 13 deletions(-)

diff --git a/README.md b/README.md
index d004758..86cd9f8 100644
--- a/README.md
+++ b/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 | |
 
diff --git a/src/components/Library.astro b/src/components/Library.astro
index 55761ed..f9aa478 100644
--- a/src/components/Library.astro
+++ b/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);
diff --git a/src/components/post.astro b/src/components/post.astro
index 2e3dcf6..7e39808 100644
--- a/src/components/post.astro
+++ b/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;
diff --git a/src/pages/index.astro b/src/pages/index.astro
index c2cf81c..54684ad 100644
--- a/src/pages/index.astro
+++ b/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>

From 4e2256c6d364be2b1e722aeac31b97afaca80fd2 Mon Sep 17 00:00:00 2001
From: Ayo <ramon.aycojr@gmail.com>
Date: Sun, 4 Jun 2023 15:46:48 +0200
Subject: [PATCH 3/3] style: layout

---
 src/components/Library.astro | 46 +++++++++++++++++++++++-------------
 src/components/post.astro    |  5 ----
 src/layouts/layout.astro     | 25 +++++++++++++++++++-
 src/pages/index.astro        | 14 ++++++++---
 4 files changed, 65 insertions(+), 25 deletions(-)

diff --git a/src/components/Library.astro b/src/components/Library.astro
index f9aa478..34e0a82 100644
--- a/src/components/Library.astro
+++ b/src/components/Library.astro
@@ -5,7 +5,9 @@ export interface Props {
 
 const {postDivSelector} = Astro.props;
 ---
-<div id="library"></div>
+<div id="library">
+  <ul id="post-list"></ul>
+</div>
 
 <input value={postDivSelector} name="postDivSelector" id="postDivSelector" hidden />
 
@@ -21,31 +23,43 @@ const {postDivSelector} = Astro.props;
   const postDiv = document.querySelector(postDivSelector?.value);
 
   const cachedResponses = await cache.keys();
-  const library = document.getElementById('library');
-  const list = document.createElement('ul');
-  cachedResponses.forEach(response => {
-    const {url} = response;
+  const list = document.querySelector('#post-list');
+
+  cachedResponses
+  .filter(request => {
+    const urlObj = new URL(request.url);
+    return urlObj.search !== '';
+  })
+  .forEach(async (request) => {
+    const {url} = request;
     const link = document.createElement('a');
-    link.innerText = url;
+
+
+    let responseText;
+
+    const fullResponse = await cache.match(url)
+    fullResponse?.text().then(data => {
+      responseText = data;
+      const html = document.createElement('html');
+      html.innerHTML = responseText;
+      const title = html.querySelector('title');
+      link.innerText = (title?.innerText || url).replace('Cozy 🧸 | ', '');
+    });
+
     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'));
+        html.innerHTML = responseText;
+        const newPost = html.querySelector('body')?.querySelector('#post');
         if (postDiv && newPost?.innerHTML) {
           postDiv.innerHTML = (newPost.innerHTML)
         }
-      });
-
     }
     const item = document.createElement('li');
     item.appendChild(link);
     list?.appendChild(item);
-  })
-  library?.appendChild(list);
+  });
+
 </script>
\ No newline at end of file
diff --git a/src/components/post.astro b/src/components/post.astro
index 7e39808..f09a26a 100644
--- a/src/components/post.astro
+++ b/src/components/post.astro
@@ -26,11 +26,6 @@ const datePublished =
 }
 
 <style is:inline>
-  div#post {
-    max-width: 600px;
-    margin: 1em auto;
-    padding: 1em;
-  }
   @counter-style publish-icons {
     system: cyclic;
     symbols: "️✍️" "🗓️";
diff --git a/src/layouts/layout.astro b/src/layouts/layout.astro
index ada80b9..a31c0e6 100644
--- a/src/layouts/layout.astro
+++ b/src/layouts/layout.astro
@@ -16,10 +16,33 @@ const { title } = Astro.props;
     <title>{appTitle} {title && `| ${title}`}</title>
   </head>
   <body>
-    <slot />
+    <slot name="address-bar" />
+    <div id="main-content">
+      <div id="post-wrapper">
+        <slot name="post" />
+      </div>
+      <div id="library-wrapper">
+        <slot name="library" />
+      </div>
+    </div>
   </body>
 </html>
 
+<style>
+  #main-content {
+    display: flex;
+    padding: 1em;
+    max-width: 1000px;
+    margin: 0 auto;
+  }
+  #post-wrapper, #library-wrapper {
+    flex: 1
+  }
+  #post-wrapper {
+    flex-grow: 2;
+  }
+</style>
+
 <style is:global>
   :root {
     --system-ui: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 54684ad..9536769 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -18,9 +18,17 @@ try {
   };
 }
 
+if (url === '') {
+  article = {
+    title: "Welcome to Cozy 🧸",
+    author: "Ayo Ayco",
+    content: "<p>Enter a URL in the address bar above to get started.</p>",
+  };
+}
+
 ---
 <Layout title={url !== "" ?  article?.title : "Your modern-day reading assistant"}>
-  <AddressBar url={url} />
-  <Library postDivSelector="#post" />
-  {url && <Post article={article} />}
+    <AddressBar slot="address-bar" url={url} />
+    <Post slot="post" article={article} />
+    <Library slot="library" postDivSelector="#post" />
 </Layout>