Support for LBRY and Spee.ch links on .tech

app/helpers/fetch-metadata.js

@@ -92,6 +92,8 @@ module.exports = exports = (data, socket) => {
       body.file_path = uploadResponse.filename;
 
       return publishMeme(body).then(publishResponse => {
+        let explorerNotice = "";
+
         if (publishResponse.error) {
           socket.send(JSON.stringify({
             details: "Meme publish failed",
@@ -110,20 +112,33 @@ module.exports = exports = (data, socket) => {
           return;
         }
 
+        if (
+          publishResponse.result &&
+          publishResponse.result.claim_address
+        ) explorerNotice = `
+          <p class="playground__description success">
+            To see Proof of Work (lol) that your meme is on the LBRY blockchain, <a href="https://explorer.lbry.io/address/${publishResponse.result.claim_address}" rel="noopener noreferrer" target="_blank" title="Your meme, on our blockchain explorer">check it out</a> on our blockchain explorer! Please note that it may take a couple minutes for the transaction to be confirmed.
+            <br/><br/>
+            You can also check out your meme on <a href="https://open.lbry.io/${publishResponse.result.lbrytech_claim_name}#${publishResponse.result.claim_id}" rel="noopener noreferrer" target="_blank" title="Your meme, on LBRY">LBRY</a> or <a href="https://spee.ch/${publishResponse.result.claim_id}/${publishResponse.result.lbrytech_claim_name}" rel="noopener noreferrer" target="_blank" title="Your meme, on LBRY">Spee.ch</a>!
+          </p>
+
+          <br/>
+        `;
+
+        delete publishResponse.result.lbrytech_claim_name;
+
         const renderedCode = prism.highlight(
           stringifyObject(publishResponse, { indent: "  ", singleQuotes: false }),
           prism.languages.json,
           "json"
         );
 
-        let explorerNotice = "";
+        /*
+        https://open.lbry.io/Yet--another-test-733dd99009#59b368ed4b616108fe27d308fa8e22602acc762f
+        https://open.lbry.io/claim_show#adee1be89febd3d89f51581601bca52d75a710a8
 
-        if (
-          publishResponse.result &&
-          publishResponse.result.claim_address
-        ) explorerNotice = `
-          <p class="playground__description success">To see Proof of Work (lol) that your meme is on the LBRY blockchain, <a href="https://explorer.lbry.io/address/${publishResponse.result.claim_address}" rel="noopener noreferrer" target="_blank" title="Your meme, on our blockchain explorer">check it out</a> on our blockchain explorer! Please note that it may take a couple minutes for the transaction to be confirmed.</p><br/>
-        `;
+        You are generating the claim name, so you'd know it.  it would be https://open.lbry.io/claim-name#claim_id (claim id comes from the return). You can also run a claim_show with the claim id parameter to get name if that's easier. The spee.ch link would just be https://spee.ch/claimid/claimname
+        */
 
         return socket.send(JSON.stringify({
           example: data.example,

app/sass/init/_extends.scss

@@ -125,6 +125,41 @@
   padding-bottom: 0.5rem;
 }
 
+.button {
+  @extend .__button-padding-horizontal;
+  color: $white;
+  font-size: 1rem;
+  line-height: 2rem;
+  position: relative;
+  transition: background-color 0.2s;
+
+  &::after {
+    width: calc(100% + 2px); height: calc(100% + 2px);
+    top: -1px; left: -1px;
+
+    content: "";
+    position: absolute;
+    transition: background-color 0.2s;
+    z-index: -1;
+  }
+
+  &:not(:hover) {
+    background-color: $black;
+
+    &::after {
+      background-color: $black;
+    }
+  }
+
+  &:hover {
+    background-color: $teal;
+
+    &::after {
+      background-color: $teal;
+    }
+  }
+}
+
 
 
 /*!

app/sass/pages/_playground.scss

@@ -399,43 +399,11 @@
   button,
   span {
     height: 100%;
-    line-height: 2rem;
   }
 
   button {
     width: 6rem;
-
-    color: $white;
-    font-size: 1rem;
-    position: relative;
     text-transform: lowercase;
-    transition: background-color 0.2s;
-
-    &::after {
-      width: calc(100% + 2px); height: calc(100% + 2px);
-      top: -1px; left: -1px;
-
-      content: "";
-      position: absolute;
-      transition: background-color 0.2s;
-      z-index: -1;
-    }
-
-    &:not(:hover) {
-      background-color: $black;
-
-      &::after {
-        background-color: $black;
-      }
-    }
-
-    &:hover {
-      background-color: $teal;
-
-      &::after {
-        background-color: $teal;
-      }
-    }
   }
 
   input {
@@ -455,6 +423,7 @@
     color: rgba($black, 0.5);
     cursor: default;
     font-size: 1rem;
+    line-height: 2rem;
     text-align: right;
   }
 }

app/sockets.js

@@ -285,7 +285,7 @@ function generateMemeCreator(socket) {
       </fieldset>
 
       <fieldset>
-        <button data-action="upload image" class="__button-black" type="button">Submit</button>
+        <button data-action="upload image" class="button" type="button">Submit</button>
       </fieldset>
     </form>
   `;