Merge pull request #38 from ayoayco/feat/home-and-gh-buttons

feat: add dynamic home button + gh link

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",

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"

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
+  <form>
-    formGroups={form}
+    <button type="button" id="app-home" name="app-home" onclick="window.location.href = '/';">
-    showValidationHints
+      <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>
-  <nav>
+    <input type="text" id="app-url" name="url" value={url} placeholder="Type a URL here" />
-  <a href="/"
+    <button type="button" id="gh-link" onclick="window.location.href ='https://github.com/ayoayco/cozy';">
-    >📚 Home</a
+      <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>
-  <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>
 </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 {
+  :global(form) {
+    width: 100%;
+    border: 0px;
+    padding: 0.5rem;
+    text-align: center;
+    border-radius: 5px;
+    border: 1px solid #555;
+    background-color: #f5f5f5;
+    box-shadow: 0 1px 3px 1px #ccc;
+    display: flex;
+
+    :global(input[type="text"]) {
+      flex: 3;
+      background-color: transparent;
+      border: 0px;
       padding: 0.5rem;
-    font-size: small;
-    a:hover {
-      text-decoration: underline;
     }
-    a {
+
-      color: brown;
+    :global(button#app-home),
-      text-decoration: none;
+    :global(button#gh-link) {
-    }
+      border: 0px;
-    img {
+      background-color: transparent;
-      display: inline;
+      padding: 0px;
-      vertical-align: bottom;
+      cursor: pointer;
+      color: #555;
+
+      :global(svg) {
+          border: 0px;
+          background-color: transparent;
+          width: 1.5rem;
+          height: 1.5rem;
       }
     }
 
-  :global(input) {
+    :global(button#app-home) {
-    width: 100%;
+      margin-right: 0.5rem;
+    }
+    :global(button#gh-link) {
+      margin-left: 0.5rem;
       text-align: center;
-    border: 0px;
+    }
-    border-radius: 5px;
+
-    padding: 0.5rem;
-    background-color: #f5f5f5;
-    box-shadow: 0 1px 3px 1px #ccc;
-    cursor: pointer;
   }
 </style>

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;

src/components/Post.astro

@@ -8,9 +8,10 @@ const { article } = Astro.props;
 const datePublished =
   article?.published && new Date(article.published).toDateString();
 ---
-{
+<div id="post">
-  article && (
+  {
-    <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) && (
@@ -20,9 +21,9 @@ const datePublished =
           </ul>
         )}
         <content set:html={article.content} />
-    </div>
+      </>
-  )
+  }
-}
+</div>
 
 <style is:global lang="scss">
 

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 {

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} />
-    {
+    <Post slot="post" article={article} />
-      url
+    <Library skipSave={skipSave} slot="library" postDivSelector="#post"/>
-      ? <Post slot="post" article={article} />
-      : 
-      <div slot="post" id="outlet"></div>
-    }
-    <Library skipSave={skipSave} slot="library" postDivSelector="#outlet" />
 </Layout>

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>
           `