From 2391ecded6e7343e98a56480fb6e0bc369520a67 Mon Sep 17 00:00:00 2001
From: Kiro Bondarev <kiro@bondarev.io>
Date: Mon, 18 Jul 2022 01:16:04 -0400
Subject: [PATCH 1/2] Add webln-v4v partial to the episode page (WIP)

---
 themes/jb/layouts/episode/single.html         |  3 ++
 .../layouts/partials/episode/webln-v4v.html   | 34 +++++++++++++++++++
 2 files changed, 37 insertions(+)
 create mode 100644 themes/jb/layouts/partials/episode/webln-v4v.html

diff --git a/themes/jb/layouts/episode/single.html b/themes/jb/layouts/episode/single.html
index d1a0ddaae..6af4f88c4 100644
--- a/themes/jb/layouts/episode/single.html
+++ b/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 }}
 
 
diff --git a/themes/jb/layouts/partials/episode/webln-v4v.html b/themes/jb/layouts/partials/episode/webln-v4v.html
new file mode 100644
index 000000000..5c1f2ee47
--- /dev/null
+++ b/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>
+
+

From 33f92cdf9f61b2669e710c1bb98feebecf5187a1 Mon Sep 17 00:00:00 2001
From: Kiro Bondarev <kiro@bondarev.io>
Date: Mon, 18 Jul 2022 01:26:04 -0400
Subject: [PATCH 2/2] Customize the style of the webln-v4v form

---
 themes/jb/assets/css/main.sass      |  1 +
 themes/jb/assets/css/webln-v4v.sass | 47 +++++++++++++++++++++++++++++
 2 files changed, 48 insertions(+)
 create mode 100644 themes/jb/assets/css/webln-v4v.sass

diff --git a/themes/jb/assets/css/main.sass b/themes/jb/assets/css/main.sass
index 943df07a0..f596f4e90 100644
--- a/themes/jb/assets/css/main.sass
+++ b/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
diff --git a/themes/jb/assets/css/webln-v4v.sass b/themes/jb/assets/css/webln-v4v.sass
new file mode 100644
index 000000000..0dd0379c8
--- /dev/null
+++ b/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};
\ No newline at end of file