enhance help & help onboarding

CHANGELOG.md

@@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Invite for a contact to join immediately
 ### Changed
 - Send signed data to nostr endpoints to verify public key ownership.
+- Enhanced help & help onboarding.
 ### Changed in DB or environment
 - Uses Endorser.ch version 4.1.1
 

src/views/HelpOnboardingView.vue

@@ -13,7 +13,8 @@
     </div>
 
     <p>
-      To invite someone, generate a link to send to them from this page:
+      To invite someone the easiest way, send them a link that you generate from
+      this page:
       <router-link
         :to="{ name: 'invite-one' }"
         class="bg-gradient-to-b from-green-400 to-green-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md"
@@ -21,31 +22,42 @@
         <fa icon="envelope-open-text" class="fa-fw text-xl"
       /></router-link>
     </p>
-    <p>That's all it takes.</p>
+    <p>Then watch that page to see when they accept their invite.</p>
-    <p>Watch that page to see when people accept their invite.</p>
     <p>
-      That page is also reachable from the Contacts <fa icon="users" /> page
+      (That page is also reachable from the Contacts <fa icon="users" /> page
-      though the invitation <fa icon="envelope-open-text" /> icon.
+      though the invitation <fa icon="envelope-open-text" /> icon.)
     </p>
 
-    <h1 class="font-bold text-xl">Advanced</h1>
+    <h1 class="mt-4 font-bold text-xl">Next Steps</h1>
-    The following are optional steps for even more functionality:
+    Although not totally necessary, these are important to understand.
-    <!-- eslint-disable prettier/prettier -->
+
     <div class="ml-4">
-      <h1 class="font-bold text-xl">Install</h1>
+      <h1 class="font-bold text-xl">Backups</h1>
       <div>
         <p>
-          1) Have them visit TimeSafari.app in a browser, preferably Chrome or Safari.
+          Exporting backups (from the Account <fa icon="circle-user" /> screen)
-        </p>
+          is important for the case where they lose their device. This is
-        <p>
+          especially true for the Identifier Seed: that is theirs and and theirs
-          2) Have them "Install" the site to their desktop.
+          alone, and currently nobody else can recover it if they lose it. The
+          good thing is that anyone can create a new account and simply inform
+          their network of their new ID.
         </p>
       </div>
+    </div>
+
+    <h1 class="mt-4 font-bold text-xl">Advanced</h1>
+    The following are optional steps for even more functionality.
+
+    <!-- eslint-disable prettier/prettier -->
+    <div class="ml-4">
 
       <h1 class="font-bold text-xl">Add Contact & Register</h1>
       <p>
         You share even more information such as your picture and name when
-        you share with your QR code at these links: <fa icon="qrcode" /> Scanning
+        you share with your QR code at these links: <fa icon="qrcode" />
+      </p>
+      <p>
+        Scanning
         those with your cameras will automatically register people and add them
         to each other's contact lists.
       </p>
@@ -54,33 +66,37 @@
       </p>
       <div>
         <p>
-          3) Have them follow their yellow prompts.
+          1) Have them follow their yellow prompts.
         </p>
         <p>
-          4) Scan their QR, or have them tap on it to copy their info and send it to you.
+          2) Scan their QR, or have them tap on it to copy their info and send it to you.
           Then you can add them to your Contacts <fa icon="users" />
         </p>
         <p>
-          5) You can register them at their info page <fa icon="circle-info" />
+          3) You can register them at their info page <fa icon="circle-info" />
           and click on the register button <fa icon="person-circle-question" />
         </p>
         <p>
-          6) Add yourself to their Contacts <fa icon="users" />
+          4) Add yourself to their Contacts <fa icon="users" />
+        </p>
+      </div>
+
+      <h1 class="font-bold text-xl">Install</h1>
+      <div>
+        <p>
+          Have them visit TimeSafari.app in a browser, preferably Chrome or Safari,
+          and then look for the "Install" selection which adds this app to their desktop.
+          This enables other things, like the ability to "share" a photo from their
+          device directly to Time Safari, and it makes notifications more reliable.
         </p>
       </div>
 
       <h1 class="font-bold text-xl">Enable Notifications</h1>
       <div>
         <p>
-          7) Enable notifications from the Account page <fa icon="circle-user" />
+          Enable notifications from the Account page <fa icon="circle-user" />.
-        </p>
+          Those notifications might show up on the device depending on your settings.
-      </div>
+          For the most reliable habits, people should own alarm or some other ritual to look every day.
-
-      <h1 class="font-bold text-xl">Discuss Backups</h1>
-      <div>
-        <p>
-          8) Exporting backups <fa icon="circle-user" /> are important if they lose their phone
-          --- especially for the Identifier Seed!
         </p>
       </div>
 

src/views/HelpView.vue

@@ -515,6 +515,8 @@
           <fa v-show="!showDidCopy" icon="copy" class="text-slate-400 fa-fw" />
         </button>
         <span v-show="showDidCopy" class="ml-2 text-sm text-green-500">Copied</span>
+        You can donate online via
+        <a href="https://www.patreon.com/TimeSafari" target="_blank" class="text-blue-500">Patreon here</a>.
         For other donations, contact us.
       </p>