Basic form validation!

Readme.md

@@ -1,10 +1,10 @@
 # About appticles
 
-A bunch of miniapps or appticles created for [minimo.io](https://minimo.io).
+A bunch of mini-apps or appticles created for [minimo.io](https://minimo.io).
 
-These micro-apps were embedded on blog posts for adding extra functionality. They were developed primarily using the Svelte Framework or Alpine.js. Most of them as proof-of-concepts.
+These micro-apps were embedded on blog posts for adding extra functionality. They were developed primarily using the Svelte Framework or Alpine.js. Most of them just as proof-of-concepts and for learning purposes.
 
-The site itself was built using [Eleventy](https://github.com/11ty/eleventy).
+The site [minimo.io](https://github.com/minimo-io/minimo-11ty) itself was built using [Eleventy](https://github.com/11ty/eleventy).
 
 ## Get in touch.
 

nostr-followback/README.md

@@ -5,10 +5,20 @@ Let promote some reciprocity here! 😹
 
 ## ToDo
 
--   Remove SvelteKit (just Vite + Svelte).
+-   Actually load builds at minimo.io/app/ or something alike.
--   Add forms
+-   Ask community for help about the bug (see below) so I can keep understanding the protocol and the library.
--   Polish the proof-of-concept code.
+-   Polish the proof-of-concept code, making it TS code and remove `// @ts-nocheck`!
--   Configure Vite for the miniapp to be loaded in the article's url as base.
+-   Create interfaces or new types instead of loose variables
 -   Save followbackers and not followbackers in lists to see details.
 -   Create an UI/UX that's worth looking at.
+-   Close connection with relays after all is checked
+-   Show the relay list to be used
 -   Upload a localStorage list of relays
+
+-   ~~Configure Vite for the miniapp to be loaded in the article's url as base.~~
+-   ~~Remove SvelteKit (just Vite + Svelte).~~
+
+## BUG
+
+-   **When user follows lots of people, progress freezes:**<br>
+    [NDK](https://github.com/nostr-dev-kit/ndk) keeps trying to re-connect to relays, and progress slows down or halts completly. Maybe slow requests down? Are they blocking the requests because they are too many too fast?

nostr-followback/src/App.svelte

@@ -17,12 +17,12 @@
     let unknownFollowBack = 0;
     let totalCountOfContactsChecked = 0;
 
-    $: progress = ((totalCountOfContactsChecked / followsCount) * 100).toFixed();
+    $: progress = ((totalCountOfContactsChecked / followsCount) * 100).toFixed() | 0;
 
     let originalFollow = [];
     let notFollowersBack = [];
 
-    async function bootstrap() {
+    async function checkFollowBacks() {
         try {
             const ndk = new NDK({
                 explicitRelayUrls: relays,
@@ -92,13 +92,14 @@
         }
     }
 
-    //bootstrap();
+    //checkFollowBacks();
 </script>
 
-<h1>Who does not follows you on Nostr</h1>
+<h1>Nostr Followback</h1>
+<p>Let's find out who does not follow you back in Nostr!</p>
 
 <form class="npub-form">
-    <input type="text" bind:value={npubToQuery} placeholder={npubToQuery} />
+    <input disabled={querying && progress < 100} type="text" placeholder="An npub to check" bind:value={npubToQuery} />
     <input
         type="button"
         on:click={async () => {
@@ -111,31 +112,29 @@
             notFollowBackCount = 0;
             unknownFollowBack = 0;
             totalCountOfContactsChecked = 0;
-            bootstrap();
+            await checkFollowBacks();
         }}
+        disabled={!npubToQuery && progress < 100}
         value="Analyze"
     />
 </form>
 
-{#if !querying}
+<!-- {#if !querying}
     {npubToQuery}
-{/if}
+{/if} -->
-
-<hr />
 
 {#if userThumb}
     <div class="user-box">
         <img src={userThumb} width="50" style="border-radius:100%;" alt="user-thumb" />
-        User: {userName} |  Follows: {followsCount}
+        User:
-        <br />
+        <a href="https://primal.net/p/{npubToQuery}">{userName}</a>
-        {npubToQuery}
+        |  Follows: {followsCount}
-        <br />
         <br />
         Unknown: {unknownFollowBack} | Follow_Back: {followBackCount} |
-        <strong>Not_Follow_Back</strong>
+        <strong>👉 Not_Follow_Back</strong>
         :
-        <span title="Actually Counted">{notFollowBackCount}</span>
+        <!-- <span title="Actually Counted">{notFollowBackCount}</span>
-        /
+        / -->
         <span title="Actualy counted">{notFollowersBack.length}</span>
         <br />
         {#if progress < 100}
@@ -180,7 +179,7 @@
       </ul> -->
     </div>
 {:else if !querying}
-    <p>Let's find out who does not follow you back in Nostr!</p>
+    <!-- <p>Let's find out who does not follow you back in Nostr!</p> -->
 {:else}
     <div class="loader">Loading data...</div>
 {/if}

nostr-followback/src/app.css

@@ -1,79 +1,6 @@
-:root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-.card {
-  padding: 2em;
-}
-
 #app {
-  max-width: 1280px;
+    max-width: 1280px;
-  margin: 0 auto;
+    margin: 0 auto;
-  padding: 2rem;
+    padding: 2rem;
-  text-align: center;
+    text-align: center;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
 }

nostr-followback/vite.config.ts

@@ -4,4 +4,5 @@ import { svelte } from "@sveltejs/vite-plugin-svelte";
 // https://vitejs.dev/config/
 export default defineConfig({
     plugins: [svelte()],
+    base: "/app/nostr-followback",
 });