improve docs

vemonet · Mar 1, 2024 · 35ff6b5 · 35ff6b5
1 parent 616cf0b
commit 35ff6b5
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 16 deletions.
diff --git a/js/src/nanopub.rs b/js/src/nanopub.rs
@@ -150,7 +150,7 @@ impl NpProfileJs {
     }
 }
 
-/// Return a random server
+/// Return a random server or the main nanopub server. Default to random server
 #[wasm_bindgen(js_name = getNpServer)]
 pub fn get_np_server(random: Option<bool>) -> String {
     get_server(random.unwrap_or(true)).to_string()

diff --git a/lib/docs/demo.html b/lib/docs/demo.html
@@ -81,6 +81,22 @@ <h1 class="text-xl font-semibold">✍️ Nanopublication signing playground 🕹
         <button id="publish-btn" class="p-2 rounded-md text-slate-400 bg-slate-800 hover:bg-slate-600">
           <i class="fas fa-upload mr-2"></i> Publish Nanopublication
         </button>
+        <!-- Toggle to publish to test or prod server -->
+        <div class="flex items-center justify-center">
+          <span class="mr-2 text-sm">Test Server</span>
+          <label for="toggleProd" class="flex items-center cursor-pointer">
+            <div class="relative">
+              <input type="checkbox" id="toggleProd" class="sr-only" />
+              <div class="block bg-gray-600 w-14 h-8 rounded-full"></div>
+              <div class="dot absolute left-1 top-1 bg-white w-6 h-6 rounded-full transition"></div>
+            </div>
+          </label>
+          <span class="ml-2 text-sm">Production Network</span>
+        </div>
+      </div>
+
+      <div id="success-msg" class="hidden mt-4 p-4 bg-green-800 rounded-md text-white">
+        <p>Successfully published to <a id="np-url" class="text-blue-300" target="_blank"></a></p>
       </div>
 
       <!-- Output editor -->
@@ -158,23 +174,34 @@ <h1 class="text-xl font-semibold">✍️ Nanopublication signing playground 🕹
           monaco.editor.setModelMarkers(ieditor.getModel(), 'errors', []);
           const rdfStr = ieditor.getValue();
           const privKey = document.getElementById('private-key').value
-          const serverUrl = (publish) ? getNpServer() : "" // Empty is test server
-          if (serverUrl && publish) {
-            console.log(`Publishing to ${serverUrl}`)
-          }
           const profile = new NpProfile(privKey, orcid, "Your Name", "");
-          try {
-            // const checked = new Nanopub(rdfStr).check();
-            // console.log("CHECKED", checked.info());
-            // const np = new Nanopub(rdfStr).sign(profile)
+          if (!publish) {
+            try {
+              const signed = new Nanopub(rdfStr).sign(profile)
+              oeditor.setValue(signed.get_rdf());
+              console.log("Signed Nanopub:", signed.info());
+            } catch (err) {
+              displayError(err);
+              console.error("Error:", err);
+            }
+          } else {
+            const serverUrl = (document.getElementById('toggleProd').checked) ? getNpServer() : ""
+            // Empty is test server
+            try {
+              const np = await new Nanopub(rdfStr).publish(profile, serverUrl);
+              oeditor.setValue(np.get_rdf());
+              console.log("Published Nanopub:", np.info());
+              const npUrlElem = document.getElementById('np-url');
+              const npUrl = (serverUrl) ? np.info().uri : `https://np.test.knowledgepixels.com/${np.info().trusty_hash}`
+              npUrlElem.textContent = npUrl;
+              npUrlElem.href = npUrl;
+              document.getElementById('success-msg').classList.remove('hidden');
 
-            const np = await new Nanopub(rdfStr).publish(profile, serverUrl);
-            oeditor.setValue(np.get_rdf());
-            console.log("Published Nanopub:", np.info());
-          } catch (err) {
-            // oeditor.setValue(error.toString());
-            displayError(err);
-            console.error("Error:", err);
+            } catch (err) {
+              // oeditor.setValue(error.toString());
+              displayError(err);
+              console.error("Error:", err);
+            }
           }
           rdfOutput.classList.remove("hidden");
         }
@@ -230,6 +257,7 @@ <h1 class="text-xl font-semibold">✍️ Nanopublication signing playground 🕹
 
         function displayError(err) {
           oeditor.setValue(err);
+          document.getElementById('success-msg').classList.add('hidden');
           // Handle error msg with line and position returned by nt/ttl/trig parsers
           const match = err.match(/(.*?) on line (\d+) at position (\d+)/);
           const [msg, lineNumber, position] = (match)
@@ -302,5 +330,19 @@ <h1 class="text-xl font-semibold">✍️ Nanopublication signing playground 🕹
       resize: vertical;
       width: 100%;
     }
+    /* Additional styles for toggle button */
+    .dot {
+      transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
+    }
+    input:checked ~ .dot {
+      transform: translateX(100%);
+      opacity: 1;
+    }
+    .block, .dot {
+      opacity: 0.5;
+    }
+    input:checked ~ .block {
+      opacity: 1;
+    }
   </style>
 </html>