From c6d0b071e9ba098dc746667ccd2410c8d7f0252a Mon Sep 17 00:00:00 2001
From: Ayo <ramon.aycojr@gmail.com>
Date: Wed, 14 Jun 2023 16:46:41 +0200
Subject: [PATCH] feat: add dynamic home button + gh link

---
 package-lock.json                          | 40 ---------
 package.json                               |  2 -
 src/components/AddressBar.astro            | 99 ++++++++++++----------
 src/components/Library.astro               |  9 +-
 src/components/Post.astro                  | 31 +++----
 src/layouts/Layout.astro                   | 11 ++-
 src/pages/index.astro                      | 12 +--
 src/utils/{library-utils.ts => library.ts} |  9 +-
 8 files changed, 91 insertions(+), 122 deletions(-)
 rename src/utils/{library-utils.ts => library.ts} (91%)

diff --git a/package-lock.json b/package-lock.json
index 508d18c..56488cc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,8 +8,6 @@
       "name": "@ayco/cozy",
       "version": "0.1.13",
       "dependencies": {
-        "@astro-reactive/form": "^0.8.1",
-        "@astro-reactive/validator": "^0.3.4",
         "@astrojs/netlify": "^2.2.2",
         "@extractus/article-extractor": "^7.2.15",
         "sass": "^1.62.1"
@@ -30,35 +28,6 @@
         "node": ">=6.0.0"
       }
     },
-    "node_modules/@astro-reactive/common": {
-      "version": "0.1.9",
-      "resolved": "https://registry.npmjs.org/@astro-reactive/common/-/common-0.1.9.tgz",
-      "integrity": "sha512-1qkN0wenlhTAnWQXPlq0SaG/3MCQzhI3x3Ttgin+1zGvVWRTRnsQrzOemW+NBX0VSm/oS0D3HO2ERQY74Ye0Ow=="
-    },
-    "node_modules/@astro-reactive/form": {
-      "version": "0.8.1",
-      "resolved": "https://registry.npmjs.org/@astro-reactive/form/-/form-0.8.1.tgz",
-      "integrity": "sha512-m/IgQLi4Nh96aS3rCAClAJA2RTZSYFnKAYHi5/dZ0o7SupGAEW1uEcsQHAA+J5KoIh3HW0upVQY09eeYdcdGrA==",
-      "dependencies": {
-        "@astro-reactive/common": "*",
-        "@astro-reactive/validator": "*",
-        "short-unique-id": "^4.4.4"
-      },
-      "peerDependencies": {
-        "astro": "^2.1.3"
-      }
-    },
-    "node_modules/@astro-reactive/validator": {
-      "version": "0.3.4",
-      "resolved": "https://registry.npmjs.org/@astro-reactive/validator/-/validator-0.3.4.tgz",
-      "integrity": "sha512-idxXh/ynMhjSYNPmapQOxvL6P+KVUXdu/YWUpXkj0dWHBSEyXAFBBgROeMLD+VWSymO6XfXJ+RAL/CjXRHu1zA==",
-      "dependencies": {
-        "@astro-reactive/common": "*"
-      },
-      "peerDependencies": {
-        "astro": "^2.1.3"
-      }
-    },
     "node_modules/@astrojs/compiler": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/@astrojs/compiler/-/compiler-1.5.0.tgz",
@@ -5165,15 +5134,6 @@
       "resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.2.0.tgz",
       "integrity": "sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w=="
     },
-    "node_modules/short-unique-id": {
-      "version": "4.4.4",
-      "resolved": "https://registry.npmjs.org/short-unique-id/-/short-unique-id-4.4.4.tgz",
-      "integrity": "sha512-oLF1NCmtbiTWl2SqdXZQbo5KM1b7axdp0RgQLq8qCBBLoq+o3A5wmLrNM6bZIh54/a8BJ3l69kTXuxwZ+XCYuw==",
-      "bin": {
-        "short-unique-id": "bin/short-unique-id",
-        "suid": "bin/short-unique-id"
-      }
-    },
     "node_modules/signal-exit": {
       "version": "3.0.7",
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
diff --git a/package.json b/package.json
index f913471..6c9fcc8 100644
--- a/package.json
+++ b/package.json
@@ -9,8 +9,6 @@
     "astro": "^2.5.7"
   },
   "dependencies": {
-    "@astro-reactive/form": "^0.8.1",
-    "@astro-reactive/validator": "^0.3.4",
     "@astrojs/netlify": "^2.2.2",
     "@extractus/article-extractor": "^7.2.15",
     "sass": "^1.62.1"
diff --git a/src/components/AddressBar.astro b/src/components/AddressBar.astro
index b4fea70..098ed6d 100644
--- a/src/components/AddressBar.astro
+++ b/src/components/AddressBar.astro
@@ -1,70 +1,77 @@
 ---
-import Form, { FormGroup } from "@astro-reactive/form";
-import { Validators } from "@astro-reactive/validator";
-
 export interface Props {
   url: string;
 }
 
 const { url } = Astro.props;
-const form = new FormGroup([
-  {
-    name: "url",
-    value: url,
-    placeholder: "Type a URL here",
-    validators: [Validators.required, Validators.minLength(11)],
-  },
-]);
 ---
 
 <div class="address-bar">
-  <Form
-    formGroups={form}
-    showValidationHints
-  />
-  <nav>
-  <a href="/"
-    >📚 Home</a
-  >
-  •
-  <a target="_blank" href="https://github.com/ayoayco/cozy"
-    >⭐️ GitHub</a
-  >
-  •
-  <a class="nav-badge" href="https://github.com/ayoayco/cozy-reader/releases/latest"><img alt="Alpha Version" src="https://img.shields.io/github/package-json/v/ayoayco/cozy?label=alpha" /></a>
-  </nav>
+  <form>
+    <button type="button" id="app-home" name="app-home" onclick="window.location.href = '/';">
+      <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="Type a URL here" />
+    <button type="button" id="gh-link" onclick="window.location.href ='https://github.com/ayoayco/cozy';">
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M20.375 8.174c.163-.4.688-1.987-.163-4.137c0 0-1.312-.413-4.3 1.625c-1.25-.35-2.587-.4-3.912-.4c-1.325 0-2.662.05-3.912.4c-2.988-2.05-4.3-1.625-4.3-1.625c-.85 2.15-.325 3.737-.163 4.137C2.612 9.262 2 10.662 2 12.362c0 6.437 4.162 7.887 9.975 7.887S22 18.799 22 12.362c0-1.7-.613-3.1-1.625-4.188ZM12 19.024c-4.125 0-7.475-.187-7.475-4.187c0-.95.475-1.85 1.275-2.588c1.338-1.225 3.625-.575 6.2-.575c2.588 0 4.85-.65 6.2.575c.813.738 1.275 1.625 1.275 2.588c0 3.987-3.35 4.187-7.475 4.187Zm-3.137-6.262c-.825 0-1.5 1-1.5 2.225s.674 2.237 1.5 2.237c.825 0 1.5-1 1.5-2.237c0-1.238-.675-2.225-1.5-2.225Zm6.274 0c-.825 0-1.5.987-1.5 2.225c0 1.237.675 2.237 1.5 2.237s1.5-1 1.5-2.237c0-1.238-.662-2.225-1.5-2.225Z"/></svg>
+    </a>
+  </form>
 </div>
 
+<script>
+  const homeBtn = document.getElementById('app-home') as HTMLButtonElement;
+  const urlInput = document.getElementById('app-url') as HTMLInputElement;
+  if (urlInput.value === '')
+    homeBtn.setAttribute('style', 'display: none');
+</script>
+
 <style lang="scss">
   .address-bar {
     text-align: center;
     width: 100%;
   }
 
-  nav {
-    padding: 0.5rem;
-    font-size: small;
-    a:hover {
-      text-decoration: underline;
-    }
-    a {
-      color: brown;
-      text-decoration: none;
-    }
-    img {
-      display: inline;
-      vertical-align: bottom;
-    }
-  }
-
-  :global(input) {
+  :global(form) {
     width: 100%;
-    text-align: center;
     border: 0px;
-    border-radius: 5px;
     padding: 0.5rem;
+    text-align: center;
+    border-radius: 5px;
+    border: 1px solid #555;
     background-color: #f5f5f5;
     box-shadow: 0 1px 3px 1px #ccc;
-    cursor: pointer;
+    display: flex;
+
+    :global(input[type="text"]) {
+      flex: 3;
+      background-color: transparent;
+      border: 0px;
+      padding: 0.5rem;
+    }
+
+    :global(button#app-home),
+    :global(button#gh-link) {
+      border: 0px;
+      background-color: transparent;
+      padding: 0px;
+      cursor: pointer;
+      color: #555;
+
+      :global(svg) {
+          border: 0px;
+          background-color: transparent;
+          width: 1.5rem;
+          height: 1.5rem;
+      }
+    }
+
+    :global(button#app-home) {
+      margin-right: 0.5rem;
+    }
+    :global(button#gh-link) {
+      margin-left: 0.5rem;
+      text-align: center;
+    }
+
   }
 </style>
diff --git a/src/components/Library.astro b/src/components/Library.astro
index f406ced..8c280f5 100644
--- a/src/components/Library.astro
+++ b/src/components/Library.astro
@@ -15,7 +15,7 @@ const {postDivSelector, skipSave = false} = Astro.props;
 <input type="checkbox" id="skipSave" name="skipSave" checked={skipSave} hidden />
 
 <script>
-  import { getPostCard } from '../utils/library-utils'
+  import { getPostCard } from '../utils/library'
   const cache = await caches.open('cozy-reader');
   const url = new URL(window.location.href);
   const response = await cache.match(url)
@@ -71,11 +71,15 @@ const {postDivSelector, skipSave = false} = Astro.props;
             const newPost = html.querySelector('body')?.querySelector('#post');
             if (postDiv && newPost?.innerHTML) {
               postDiv.innerHTML = newPost.innerHTML
+              const homeBtn = document.getElementById('app-home') as HTMLButtonElement;
+              homeBtn.setAttribute('style', 'display: block');
             }
         }
         const item = document.createElement('li');
         item.appendChild(link);
         list?.appendChild(item);
+
+
       });
     });
   }
@@ -105,7 +109,8 @@ const {postDivSelector, skipSave = false} = Astro.props;
         }
 
         :global(.post-card) {
-          padding-bottom: 0.5rem;
+          padding-bottom: 1rem;
+
           :global(.post-card__image) {
             float: left;
             margin: 0.25rem 0.5rem 0.25rem 0;
diff --git a/src/components/Post.astro b/src/components/Post.astro
index f2c55e6..4b73ea1 100644
--- a/src/components/Post.astro
+++ b/src/components/Post.astro
@@ -8,21 +8,22 @@ const { article } = Astro.props;
 const datePublished =
   article?.published && new Date(article.published).toDateString();
 ---
-{
-  article && (
-    <div id="post">
-      {article.source && <span class="source">{article.source}</span>}
-      {article.title && <h1 class="title">{article.title}</h1>}
-      {(article.author || datePublished) && (
-        <ul class="publish-info">
-          {article.author && <li>️{article.author} </li>}
-          {datePublished && <li>️{datePublished}</li>}
-        </ul>
-      )}
-      <content set:html={article.content} />
-    </div>
-  )
-}
+<div id="post">
+  {
+    article && article.url !== '/'  &&
+      <>
+        {article.source && <span class="source">{article.source}</span>}
+        {article.title && <h1 class="title">{article.title}</h1>}
+        {(article.author || datePublished) && (
+          <ul class="publish-info">
+            {article.author && <li>️{article.author} </li>}
+            {datePublished && <li>️{datePublished}</li>}
+          </ul>
+        )}
+        <content set:html={article.content} />
+      </>
+  }
+</div>
 
 <style is:global lang="scss">
 
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index c991270..a967329 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -40,13 +40,22 @@ const { meta } = Astro.props;
   </body>
 </html>
 
-<style>
+<style lang="scss">
   #app-wrapper {
     width: 100%;
     max-width: 650px;
     margin: 0 auto;
     padding: 0.5rem;
   }
+  #main-content {
+    * {
+      margin: 1rem 0;
+    }
+  
+    #post-wrapper {
+      padding: 0 1rem;
+    }
+  }
 </style>
 <style is:global lang="scss">
   :root {
diff --git a/src/pages/index.astro b/src/pages/index.astro
index ec7444e..9559143 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -19,7 +19,7 @@ try {
   article = await extract(url);
   if (!article ) {
     article = error;
-    // skipSave = true;
+    skipSave = true;
   }
 } catch {
   article = error;
@@ -32,17 +32,11 @@ if (url === '') {
     content: "<p>Enter a URL above to get started.</p>",
     url: '/'
   };
-  skipSave = true;
 }
 
 ---
 <Layout meta={article}>
     <AddressBar url={url} />
-    {
-      url
-      ? <Post slot="post" article={article} />
-      : 
-      <div slot="post" id="outlet"></div>
-    }
-    <Library skipSave={skipSave} slot="library" postDivSelector="#outlet" />
+    <Post slot="post" article={article} />
+    <Library skipSave={skipSave} slot="library" postDivSelector="#post"/>
 </Layout>
diff --git a/src/utils/library-utils.ts b/src/utils/library.ts
similarity index 91%
rename from src/utils/library-utils.ts
rename to src/utils/library.ts
index c6e9086..6154d3c 100644
--- a/src/utils/library-utils.ts
+++ b/src/utils/library.ts
@@ -11,9 +11,6 @@ export function getPostCard(html: HTMLHtmlElement) {
   const image = html
     .querySelector('meta[property="cozy:image"]')
     ?.getAttribute("content");
-  const url = html
-    .querySelector('meta[property="cozy:url"]')
-    ?.getAttribute("content");
   const source = html
     .querySelector('meta[property="cozy:source"]')
     ?.getAttribute("content");
@@ -39,19 +36,17 @@ export function getPostCard(html: HTMLHtmlElement) {
           <div class="post-card__meta">
             ${
               source
-                ? `
+                && `
                 <p class="post-card__source">${source}</p>
               `
-                : ""
             }
             ${
               published
-                ? `
+                && `
                 <p class="post-card__published">${
                   new Date(published)?.toLocaleDateString() || ""
                 }</p>
               `
-                : ""
             }
           </div>
           `