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

feat: add dynamic home button + gh link
2023-06-14 16:47:12 +02:00 · 2023-06-14 16:47:12 +02:00 · 8bde4d7001
commit 8bde4d7001
parent ad1b670ddc c6d0b071e9
8 changed files with 91 additions and 122 deletions
--- 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",
--- 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"
--- 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>
--- 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;
--- 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">

--- 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 {
--- 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>
--- a/src/utils/library-utils.ts
+++ b/src/utils/library-utils.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>
          `