Add about box (#208)

* add about popover

* add partial

* tidy up about box

* hide on mobile for now

Co-authored-by: dskvr <dskvr@users.noreply.github.com>

relays.yaml

@@ -185,7 +185,7 @@ relays:
   - wss://relay.nostr.lu.ke
   - wss://relay.nostrgraph.net
   - wss://private-nostr.v0l.io
-  - "wss://relay.nvote.co:443"
+  - wss://relay.nvote.co:443
   - wss://relay.nostrprotocol.net
   - wss://nostr.itssilvestre.com
   - wss://nostr.whoop.ph
@@ -193,14 +193,20 @@ relays:
   - wss://nostr.chaker.net
   - wss://nostr-1.nbo.angani.co
   - wss://nostr3.actn.io
-  - wss://nostr.relayer.se
   - wss://relay.nostr.nu
   - wss://relay.taxi
-  - wss://relay.nostrprotocol.net
   - wss://nostr.easydns.ca
   - wss://nostr.bostonbtc.com
   - wss://no-str.org
-  - wss://nostr.thesimplekid.com
   - wss://knostr.neutrine.com
+  - wss://nostrical.com
+  - wss://nostr.milou.lol
+  - wss://relay.snort.social
+  - wss://nostr.pobblelabs.org
+  - wss://nostr-relay.bitcoin.ninja
+  - wss://pow32.nostr.land
+  - wss://nostr.simatime.com
+  - wss://nostrex.fly.dev
+  - wss://nostr.kollider.xyz
   - wss://relay.nostr.band
   - wss://relay.nosphr.com

src/components/layout/HeaderComponent.vue

@@ -45,7 +45,8 @@
         </div>
 
         <div class="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0">
-          
+          <About />
+
           <DarkMode />
           
           <!-- Profile dropdown -->
@@ -162,10 +163,10 @@ import UserLib from '@/shared/user-lib.js'
 // import PreferencesComponent from '@/components/PreferencesComponent.vue'
 import AuthComponent from '@/components/user/AuthComponent.vue'
 import DarkMode from '@/components/partials/DarkMode.vue'
+import About from '@/components/partials/AboutNostrWatch.vue'
 
 import {version} from '../../../package.json'
 
-
 export default defineComponent({
   title: "nostr.watch registry & network status",
   name: 'HeaderComponent',
@@ -173,6 +174,7 @@ export default defineComponent({
     // PreferencesComponent,
     AuthComponent,
     DarkMode,
+    About,
     Disclosure, DisclosureButton, DisclosurePanel, Menu, MenuButton, MenuItem, MenuItems,
     Bars3Icon, XMarkIcon
   },

src/components/partials/AboutNostrWatch.vue

@@ -0,0 +1,43 @@
+<template>
+  <Popover class="relative mr-2 sm:hidden md:hidden">
+    <PopoverButton>🤍</PopoverButton>
+    <PopoverPanel class="absolute border border-slate-600 rounded-md -left-48 mt-3 z-9000 bg-white dark:bg-slate-900">
+      <div class="w-96 px-3 py-5">
+        <div class="font-bold text-md pb-3">
+          I launched nostr.watch as a prototype for fun
+          and a few weeks later nostr took off. Built 
+          with Vue3/Pinia, Tailwind and nostr-relay-inspector.
+          <span class="italic text-black">Thank you for giving me something positive to focus on.</span>
+        </div>
+        <div class="border-t text-md pt-3 border-slate-700">
+          <img alt="sandwich" src="https://cloudflare-ipfs.com/ipfs/QmeCYiohwh8mKgYTaBNXHQ8etRJpVYpiBSqhdkVx5dWP4a" class="block m-auto h-14 w-14 rounded-full mb-2" />
+          <span>Follow me for updates and bad sandwich jokes</span>
+          <span class="block relative cursor-pointer py-1 px-1" @click="RelaysLib.copy('npub1uac67zc9er54ln0kl6e4qp2y6ta3enfcg7ywnayshvlw9r5w6ehsqq99rx')">
+            <code class="block truncate">npub1uac67zc9er54ln0kl6e4qp2y6ta3enfcg7ywnayshvlw9r5w6ehsqq99rx</code>
+            <span ref="about_msg_copied" class="text-xs">click to copy</span>
+          </span>
+          <span>
+            <span ref="about_msg_copied" class="text-xs mr-1">
+              NIP-05 & 
+              <span class="inline-block">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-3 h-3">
+                  <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z" />
+                </svg>
+              </span>
+            </span>
+            <a class="inline-block" href="lightning:bread@sandwich.farm">bread@sandwich.farm</a> 
+          </span>
+        </div>
+      </div>
+      <img src="/solutions.jpg" alt="" />
+    </PopoverPanel>
+  </Popover>
+</template>
+
+<script setup>
+  import { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue'
+  import RelaysLib from '@/shared/relays-lib'
+</script>
+
+<script>
+</script>

src/shared/relays-lib.js

@@ -169,4 +169,11 @@ export default {
         return self.result?.[b]?.latency.final-self.result?.[a]?.latency.final;
       };
     },
+    async copy(text) {
+      try {
+        await navigator.clipboard.writeText(text);
+      } catch($e) {
+        ////console.log('Cannot copy');
+      }
+    },
 }

vue.config.js

@@ -5,11 +5,15 @@ const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");
 
 module.exports = defineConfig({
   transpileDependencies: true,
+  
   devServer: {
     port: 8080
   },
   configureWebpack: {
     // watch: true,
+    output: {
+      filename: '[name].[hash].bundle.js'
+    },
     experiments: {
       topLevelAwait: true
     },