Merge branch 'main' of github.com:ayoayco/cozy-reader

README.md

@@ -4,6 +4,36 @@ Store all your favorite online articles for safe-keeping. That's it. That's the
 
 👉 [**cozy-reader.netlify.app/**](https://cozy-reader.netlify.app/)
 
-<!--
+| Cozy | Actual |
-using modern browser features and progressively enhanced user experience
+|--------|--------|
--->
+| ![cozy](https://github.com/ayoayco/cozy-reader/assets/4262489/802f25ae-d970-4df4-8b87-f65cbc7fe24c) | ![actual](https://github.com/ayoayco/cozy-reader/assets/4262489/dc7ab81f-8353-4d7b-9388-f08a3772b9d4) |
+
+## Usage / Options
+
+**1. Copy, Paste**
+
+It's simple. When you open an article and want to turn it into a more cozy reading experience, just copy the url and paste it to the cozy app's address bar.
+
+*Oh, you're too lazy for that?*
+
+**2. One-click Bookmark**
+
+A bookmarklet could run a script to open the current page for you on Cozy. You can create this new bookmark titled 'Get cozy!' and put the following as value for the URL:
+
+```
+javascript:(function(){ window.open('https://cozy-reader.netlify.app/?url=%27 + window.location.href, %27_self%27); })();
+```
+
+This is possible on all major browsers, including Safari on iOS (where I personally use this often). Some screenshots:
+
+| Firefox | Chrome |
+| --- | --- |
+| ![Screenshot from 2023-05-13 08-31-41](https://github.com/ayoayco/cozy-reader/assets/4262489/9b296d4f-2722-483a-bbc2-431c6b2ae996) | ![Screenshot from 2023-05-12 23-32-08](https://github.com/ayoayco/cozy-reader/assets/4262489/144b74f8-3949-46b9-849c-351e4af0ac12) |
+
+*Oh, you don't want a bookmark?*
+
+**3. One-click Extension then...**
+
+It doesn't exist yet... I'll probably get to creating a browser extension at some point. Either that, or I'll write a CONTRIBUTING.md. PRs welcome forever. 
+
+🧸

package-lock.json

@@ -1,5 +1,5 @@
 {
-  "name": "@ayoayco/cozy-reader",
+  "name": "cozy-reader",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {

src/components/address-bar.astro

@@ -27,6 +27,7 @@ const form = new FormGroup([
       value: "Get cozy!",
     }}
   />
+  <a class="repo-link" href="https://github.com/ayoayco/cozy-reader">Star on GitHub</a>
 </div>
 
 <style is:inline>
@@ -53,4 +54,8 @@ const form = new FormGroup([
     color: white;
     font-weight: bolder;
   }
+  a.repo-link {
+    font-size: x-small;
+    color: brown;
+  }
 </style>