Add webln-v4v form to send boosts via alby browser-extension

themes/jb/assets/css/main.sass

@@ -2,5 +2,6 @@
 @import "libs/bulma/bulma"
 @import "components"
 @import "libs"
+@import "webln-v4v"
 #wrapper
   padding-top: 4rem

themes/jb/assets/css/webln-v4v.sass

@@ -0,0 +1,47 @@
+// WebLN-V4V
+// For reference: https://github.com/podverse/webln-v4v/blob/main/app/styles/sample-variable-overrides.scss
+// These overrides attempt to use as many Bulma variable as possible, to make it 
+// match the theme nicely.
+
+.webln-v4v-container
+    margin: 24px 0;
+    display: flex;
+    justify-content: center;
+
+webln-v4v
+  --webln-background-color: #{$body-background-color};
+  --webln-text: #{$text};
+  --webln-font-family: #{$family-sans-serif};
+  --webln-max-width: 500px;
+
+  --webln-link-color: rgba(255,255,255,.7);
+  --webln-link-color-active: rgba(255,255,255,.7);
+  --webln-link-color-visited: rgba(255,255,255,.7);
+  --webln-link-color-hover: #fff;
+
+  --webln-text-input-background-color: #363636;
+  --webln-input-border: #2d2d2d;
+  --webln-input-placeholder: rgb(194 194 194 / 40%);
+
+  --webln-button-border-radius: #{$radius};
+  --webln-button-font-size: #{$size-normal};
+  --webln-button-padding-v: #{$button-padding-vertical};
+  --webln-button-padding-h: #{$button-padding-horizontal};
+
+  --webln-button-primary-background-color: #ffc300;
+  --webln-button-primary-text-color: #{$button-color};
+  --webln-button-primary-background-color-hover: #ffd44a;
+
+  --webln-button-secondary-background-color: #{$grey-dark};
+  --webln-button-secondary-text-color: #{$button-color};
+  --webln-button-secondary-background-color-hover: #{$grey};
+
+  --webln-button-focus-box-shadow: none;
+  --webln-button-focus-ouline-color: #fff;
+
+  --webln-button-disabled-background-color: #{$grey-light};
+  --webln-button-disabled-color: #{$grey-lighter};
+
+  --webln-table-border-color: #{$grey-lighter};
+  --webln-error-outline-color: #{$danger};
+  --webln-error-text-color: #{$danger};

themes/jb/layouts/episode/single.html

@@ -24,6 +24,9 @@ <h1>{{ .Title }}
         {{ partial "episode/podverseplayer.html" . }}
 
         {{ partial "episode/support.html" . }}
+
+        {{ partial "episode/webln-v4v.html" . }}
+
         {{ .Content }}
 
 

themes/jb/layouts/partials/episode/webln-v4v.html

@@ -0,0 +1,34 @@
+{{/*  https://github.com/podverse/webln-v4v/blob/main/docs/quick-start.md#customize-the-webcomponent-attributes-mostly-optional  */}}
+
+
+{{/*  TODO: Maybe download this into  themes/jb/assests/js/libs */}}
+<script async="true" src="https://cdn.jsdelivr.net/npm/webln-v4v@latest/dist/webcomponent.js"></script>
+
+
+<div class="webln-v4v-container">
+    <webln-v4v
+        app_name="JupiterBroadcasting.com"
+        content_type="podcast"
+
+        {{/* 
+            These "has_*_terms" values will make the to show by default, this way is
+            easier to handle in terms of the UI.
+            TODO: Ask if showing the terms is required? if so, will need to use cookies
+                    to save the user's answer. Can be done using the events from 
+                    webln-v4v.
+        */}}
+        has_accepted_terms="true"
+        has_rejected_terms="false"
+
+        {{/*  TODO: Podcast index id  */}}
+        podcast_podcast_index_id=""
+
+        episode_guid="{{ print .Params.episode_guid}}"
+        episode_title="{{ print .Title }}"
+        header_text="Send Bitcoin donation to support the show"
+        recipient_label="Amount"
+        v4v_tag='{ "method": "keysend", "suggested": 5e-8, "type": "lightning", "recipients": [ { "address": "03cf7e9b79a3230749db642ad690889065ec35b9ded184266d4fce424ab75470fc", "customKey": "", "customValue": "", "fee": false, "name": "Brent", "split": 50, "type": "node" }, { "address": "037d284d2d7e6cec7623adbe600450a73b42fb90800989f05a862464b05408df39", "customKey": "", "customValue": "", "fee": false, "name": "Podcaster", "split": 50, "type": "node" }, { "address": "03ae9f91a0cb8ff43840e3c322c4c61f019d8c1c3cea15a25cfc425ac605e61a4a", "customKey": "", "customValue": "", "fee": true, "name": "Podcastindex.org", "split": 1, "type": "node" } ] }'
+    />
+</div>
+
+