Add funding URL (#213)

README.md

@@ -15,6 +15,7 @@ Manifest definition:
   "name": "ESPHome",
   "version": "2021.10.3",
   "home_assistant_domain": "esphome",
+  "funding_url": "https://esphome.io/guides/supporters.html",
   "builds": [
     {
       "chipFamily": "ESP32",

index.html

@@ -346,6 +346,7 @@
   "name": "ESPHome",
   "version": "2021.11.0",
   "home_assistant_domain": "esphome",
+  "funding_url": "https://esphome.io/guides/supporters.html",
   "new_install_prompt_erase": false,
   "builds": [
     {
@@ -395,6 +396,13 @@
         <code>new_install_improv_wait_time</code> to the number of seconds to
         wait. Set to <code>0</code> to disable Improv Serial detection.
       </p>
+      <p>
+        If your product accepts donations you can add
+        <code>funding_url</code> to your manifest. This allows you to link to
+        your page explaining the user how they can fund development. This link
+        is visible in the ESP Web Tools menu when connected to a device running
+        your firmware (as detected via Improv).
+      </p>
 
       <h3 id="customize">Customizing the look and feel</h3>
       <p>

src/const.ts

@@ -16,6 +16,7 @@ export interface Manifest {
   name: string;
   version: string;
   home_assistant_domain?: string;
+  funding_url?: string;
   /** @deprecated use `new_install_prompt_erase` instead */
   new_install_skip_erase?: boolean;
   new_install_prompt_erase?: boolean;

src/install-dialog.ts

@@ -245,6 +245,19 @@ class EwtInstallDialog extends LitElement {
             }}
           ></ewt-button>
         </div>
+        ${this._isSameFirmware && this._manifest.funding_url
+          ? html`
+              <div>
+                <a
+                  class="button"
+                  href=${this._manifest.funding_url}
+                  target="_blank"
+                >
+                  <ewt-button label="Fund Development"></ewt-button>
+                </a>
+              </div>
+            `
+          : ""}
         ${this._isSameVersion
           ? html`
               <div>

src/styles.ts

@@ -14,4 +14,8 @@ export const dialogStyles = css`
   a {
     color: var(--improv-primary-color, #03a9f4);
   }
+
+  a.button {
+    text-decoration: none;
+  }
 `;

static/firmware_build/manifest.json

@@ -2,6 +2,7 @@
   "name": "ESPHome",
   "version": "2022.3.0",
   "home_assistant_domain": "esphome",
+  "funding_url": "https://esphome.io/guides/supporters.html",
   "builds": [
     {
       "chipFamily": "ESP32",