format

lnbits/extensions/example/templates/example/index.html

@@ -52,7 +52,14 @@
   <q-card-section>
     <div class="text-h5 q-mb-md">
       Extension Development Guide
-      <small>(also check the <a class="text-primary" href="http://docs.lnbits.org/devs/development.html">docs</a>)</small>
+      <small
+        >(also check the
+        <a
+          class="text-primary"
+          href="http://docs.lnbits.org/devs/development.html"
+          >docs</a
+        >)</small
+      >
     </div>
 
     <q-card unelevated flat>
@@ -188,7 +195,8 @@
                   <p>
                     LNbits uses
                     <a href="https://vuejs.org/" class="text-primary">Vue</a>
-                    for best-in-class, responsive and high-performance components.
+                    for best-in-class, responsive and high-performance
+                    components.
                   </p>
 
                   <p>Typical example of Vue components in a frontend script:</p>
@@ -198,8 +206,7 @@
                   /><br /><br />
 
                   <p>
-                    Content can be
+                    Content can be conditionally rendered using Vue's
-                    conditionally rendered using Vue's
                     <code class="bg-grey-3 text-black">v-if</code>:
                   </p>
                   <img
@@ -258,42 +265,82 @@
                 </q-tab-panel>
                 <q-tab-panel name="qrcodes" class="text-body1">
                   <div class="text-h5 q-mb-md">QR Codes</div>
-                  <p>For most purposes use Quasar's inbuilt VueQrcode library:</p>
+                  <p>
+                    For most purposes use Quasar's inbuilt VueQrcode library:
+                  </p>
                   <img src="./static/qrcode-example1.png" />
                   <p>
                     LNbits does also include a handy
                     <a
                       href="../docs#/default/img_api_v1_qrcode__data__get"
                       class="text-primary"
-                      > QR code enpoint</a
+                    >
+                      QR code enpoint</a
                     >
                   </p>
-                  {% raw
+                  {% raw %} You can use via
-                    %} You can use via <a href="/api/v1/qrcode/some-data-you-want-in-a-qrcode" class="text-primary">{{protocol + location}}{% endraw %}/api/v1/qrcode/some-data-you-want-in-a-qrcode:</a><br />
+                  <a
+                    href="/api/v1/qrcode/some-data-you-want-in-a-qrcode"
+                    class="text-primary"
+                    >{{protocol + location}}{% endraw
+                    %}/api/v1/qrcode/some-data-you-want-in-a-qrcode:</a
+                  ><br />
                   <br />
                   <img src="./static/qrcode-example.png" />
                   <br />
-                  <img class="bg-white" width="300px" src="/api/v1/qrcode/some-data-you-want-in-a-qrcode" />
+                  <img
+                    class="bg-white"
+                    width="300px"
+                    src="/api/v1/qrcode/some-data-you-want-in-a-qrcode"
+                  />
 
                   <br />
-
                 </q-tab-panel>
 
                 <q-tab-panel name="websockets" class="text-body1">
                   <div class="text-h5 q-mb-md">Websockets</div>
-                  <p>Fastapi includes a great <a class="text-primary" href="https://fastapi.tiangolo.com/advanced/websockets/#websockets-client">websocket tool</a></p>
-                  {% raw
-                    %}
                   <p>
-                    A few LNbits extensions also make use of a weird and useful websocket/GET tool built into LNbits, such as extensions Copilot and LNURLDevices<br/>
+                    Fastapi includes a great
-                    You can subscribe to websocket with <code class="bg-grey-3 text-black">wss:{{location}}/api/v1/ws/{SOME-ID}</code><br/>
+                    <a
-                    You can post to any clients subscribed to the endpoint with <code class="bg-grey-3 text-black">{{protocol + location}}/api/v1/ws/{SOME-ID}/{THE-DATA-YOU-WANT-TO-POST}</code><br/>
+                      class="text-primary"
+                      href="https://fastapi.tiangolo.com/advanced/websockets/#websockets-client"
+                      >websocket tool</a
+                    >
+                  </p>
+                  {% raw %}
+                  <p>
+                    A few LNbits extensions also make use of a weird and useful
+                    websocket/GET tool built into LNbits, such as extensions
+                    Copilot and LNURLDevices<br />
+                    You can subscribe to websocket with
+                    <code class="bg-grey-3 text-black"
+                      >wss:{{location}}/api/v1/ws/{SOME-ID}</code
+                    ><br />
+                    You can post to any clients subscribed to the endpoint with
+                    <code class="bg-grey-3 text-black"
+                      >{{protocol +
+                      location}}/api/v1/ws/{SOME-ID}/{THE-DATA-YOU-WANT-TO-POST}</code
+                    ><br />
                     <br />
-                 <strong></div><div id="text-to-change">DEMO: Hit <a target="_blank" href="/api/v1/ws/32872r23g29/blah%20blah%20blah" class="text-primary">{{protocol + location}}/api/v1/ws/32872r23g29/blah%20blah%20blah</a> in a different browser window to change this text to `blah blah blah`.</div></strong>
+                    <strong
+                      ><div id="text-to-change">
+                        DEMO: Hit
+                        <a
+                          target="_blank"
+                          href="/api/v1/ws/32872r23g29/blah%20blah%20blah"
+                          class="text-primary"
+                          >{{protocol +
+                          location}}/api/v1/ws/32872r23g29/blah%20blah%20blah</a
+                        >
+                        in a different browser window to change this text to
+                        `blah blah blah`.
+                      </div></strong
+                    >
                     <br />
                     Function used in this demo:<br />
-                 <img src="./static/websocket-example.png" />
+                    <img src="./static/websocket-example.png" /></p
-                </q-tab-panel>
+                ></q-tab-panel>
+
                 {% endraw %}
               </q-tab-panels>
             </template>
@@ -337,7 +384,7 @@
       return {
         ///// Declare models/variables /////
         protocol: window.location.protocol,
-        location: "//" + window.location.hostname,
+        location: '//' + window.location.hostname,
         thingDialog: {
           show: false,
           data: {}
@@ -386,7 +433,7 @@
         this.ws = new WebSocket(localUrl)
         this.ws.addEventListener('message', async ({data}) => {
           const res = data.toString()
-        document.getElementById("text-to-change").innerHTML = res
+          document.getElementById('text-to-change').innerHTML = res
         })
       },
       sendThingDialog() {