mirror of
https://github.com/lnbits/lnbits.git
synced 2025-06-19 13:21:08 +02:00
Merge pull request #1324 from lnbits/MEGA
Moved example ext sub-menu for mobile
This commit is contained in:
Arc
GitHub
commit
e9a166f634
@ -67,7 +67,7 @@
|
|||||||
>
|
>
|
||||||
<q-tab name="frameworks" label="Frameworks"></q-tab>
|
<q-tab name="frameworks" label="Frameworks"></q-tab>
|
||||||
<q-tab name="tools" label="Useful Tools"></q-tab>
|
<q-tab name="tools" label="Useful Tools"></q-tab>
|
||||||
<q-tab name="structure" label="File Structure"></q-tab>
|
<q-tab name="goodpractice" label="Good Practice"></q-tab>
|
||||||
<q-tab name="enviroment" label="Dev Enviroment"></q-tab>
|
<q-tab name="enviroment" label="Dev Enviroment"></q-tab>
|
||||||
<q-tab name="submission" label="Submisson to LNbits repo"></q-tab>
|
<q-tab name="submission" label="Submisson to LNbits repo"></q-tab>
|
||||||
</q-tabs>
|
</q-tabs>
|
||||||
@ -79,200 +79,189 @@
|
|||||||
<div class="text-h6">Frameworks</div>
|
<div class="text-h6">Frameworks</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<q-splitter v-model="splitterModel">
|
<template>
|
||||||
<template v-slot:before>
|
<q-tabs align="left" v-model="framworktab" inline-label>
|
||||||
<q-tabs v-model="framworktab" vertical>
|
<q-tab name="fastapi"
|
||||||
<q-tab name="fastapi"
|
><img src="./static/fastapi-framework.png" />FASTAPI</q-tab
|
||||||
><img src="./static/fastapi-framework.png" />FASTAPI</q-tab
|
>
|
||||||
>
|
<q-tab name="quasar"
|
||||||
<q-tab name="quasar"
|
><img src="./static/quasar-framework.png" />QUASAR</q-tab
|
||||||
><img src="./static/quasar-framework.png" />QUASAR</q-tab
|
>
|
||||||
>
|
<q-tab name="vuejs"
|
||||||
<q-tab name="vuejs"
|
><img src="./static/vuejs-framework.png" />VUE-JS</q-tab
|
||||||
><img src="./static/vuejs-framework.png" />VUE-JS</q-tab
|
>
|
||||||
>
|
</q-tabs>
|
||||||
</q-tabs>
|
</template>
|
||||||
</template>
|
|
||||||
|
|
||||||
<template v-slot:after>
|
<template>
|
||||||
<q-tab-panels v-model="framworktab">
|
<q-tab-panels v-model="framworktab">
|
||||||
<q-tab-panel name="fastapi" class="text-body1">
|
<q-tab-panel name="fastapi" class="text-body1">
|
||||||
<a href="https://fastapi.tiangolo.com/"
|
<a href="https://fastapi.tiangolo.com/"
|
||||||
><img src="./static/fastapilogo.png"
|
><img src="./static/fastapilogo.png"
|
||||||
/></a>
|
/></a>
|
||||||
<p>
|
<p>
|
||||||
LNbits API is built using
|
LNbits API is built using
|
||||||
<a
|
<a href="https://fastapi.tiangolo.com/" class="text-primary"
|
||||||
href="https://fastapi.tiangolo.com/"
|
>FastAPI</a
|
||||||
class="text-primary"
|
>, a high-performance, easy to code API framework.<br /><br />
|
||||||
>FastAPI</a
|
FastAPI auto-generates swagger UI docs for testing endpoints
|
||||||
>, a high-performance, easy to code API framework.<br /><br />
|
<a class="text-primary" href="../docs">/docs</a>
|
||||||
FastAPI auto-generates swagger UI docs for testing
|
</p>
|
||||||
endpoints <a class="text-primary" href="../docs">/docs</a>
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<i>
|
<i>
|
||||||
<strong>TIP:</strong> Although it is possible for
|
<strong>TIP:</strong> Although it is possible for extensions
|
||||||
extensions to use other extensions API endpoints (such as
|
to use other extensions API endpoints (such as with the
|
||||||
with the Satspay and Onchain extension), ideally an
|
Satspay and Onchain extension), ideally an extension should
|
||||||
extension should only use LNbits
|
only use LNbits
|
||||||
<a href="../docs#/default" class="text-primary">core</a>
|
<a href="../docs#/default" class="text-primary">core</a>
|
||||||
endpoints. </i
|
endpoints. </i
|
||||||
><br /><br />
|
><br /><br />
|
||||||
|
|
||||||
<code class="bg-grey-3 text-black">views.py</code> is used
|
<code class="bg-grey-3 text-black">views.py</code> is used for
|
||||||
for setting application routes:
|
setting application routes:
|
||||||
<img src="./static/fastapi-example.png" />
|
<img src="./static/fastapi-example.png" /><br /><br />
|
||||||
<code class="bg-grey-3 text-black">views_api.py</code> is
|
<code class="bg-grey-3 text-black">views_api.py</code> is used
|
||||||
used for setting application API endpoints:
|
for setting application API endpoints:<br />
|
||||||
<img src="./static/fastapi-example2.png" />
|
<img src="./static/fastapi-example2.png" />
|
||||||
</q-tab-panel>
|
</q-tab-panel>
|
||||||
|
|
||||||
<q-tab-panel name="quasar" class="text-body1">
|
<q-tab-panel name="quasar" class="text-body1">
|
||||||
<a href="https://quasar.dev/"
|
<a href="https://quasar.dev/"
|
||||||
><img src="./static/quasarlogo.png"
|
><img src="./static/quasarlogo.png"
|
||||||
/></a>
|
/></a>
|
||||||
<p>
|
<p>
|
||||||
LNbits uses
|
LNbits uses
|
||||||
<a class="text-primary" href="https://quasar.dev/"
|
<a class="text-primary" href="https://quasar.dev/"
|
||||||
>Quasar Framework</a
|
>Quasar Framework</a
|
||||||
>
|
|
||||||
for frontend deisgn elements. Quasar Framework is an
|
|
||||||
open-source Vue.js based framework for building apps.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<i>
|
|
||||||
<strong>TIP:</strong> Look through
|
|
||||||
<code class="bg-grey-3 text-black">/template</code> files
|
|
||||||
in other extensions for examples of Quasar elements being
|
|
||||||
used. </i
|
|
||||||
><br /><br />
|
|
||||||
|
|
||||||
<p>
|
|
||||||
In the below example we make a dialogue popup box (box can
|
|
||||||
be triggered
|
|
||||||
<q-btn
|
|
||||||
size="sm"
|
|
||||||
color="primary"
|
|
||||||
@click="thingDialog.show = true"
|
|
||||||
>here</q-btn
|
|
||||||
>): <q-tooltip>Exmple of a tooltip!</q-tooltip>
|
|
||||||
</p>
|
|
||||||
<img src="./static/quasar-example.png" /><br /><br />
|
|
||||||
<div class="text-h6">Useful links:</div>
|
|
||||||
<q-btn
|
|
||||||
color="primary"
|
|
||||||
type="a"
|
|
||||||
href="https://quasar.dev/style/"
|
|
||||||
>Style (typography, spacing, etc)</q-btn
|
|
||||||
>
|
>
|
||||||
<q-btn
|
for frontend deisgn elements. Quasar Framework is an
|
||||||
color="primary"
|
open-source Vue.js based framework for building apps.
|
||||||
type="a"
|
</p>
|
||||||
href="https://quasar.dev/vue-components/"
|
|
||||||
>Genral components (cards, buttons, popup dialogs,
|
|
||||||
etc)</q-btn
|
|
||||||
>
|
|
||||||
<q-btn
|
|
||||||
color="primary"
|
|
||||||
type="a"
|
|
||||||
href="https://quasar.dev/layout/grid"
|
|
||||||
>Layouts (rows/columns, flexbox)</q-btn
|
|
||||||
>
|
|
||||||
</q-tab-panel>
|
|
||||||
|
|
||||||
<q-tab-panel
|
<i>
|
||||||
v-if="someBool == true"
|
<strong>TIP:</strong> Look through
|
||||||
name="vuejs"
|
<code class="bg-grey-3 text-black">/template</code> files in
|
||||||
class="text-body1"
|
other extensions for examples of Quasar elements being used. </i
|
||||||
|
><br /><br />
|
||||||
|
|
||||||
|
<p>
|
||||||
|
In the below example we make a dialogue popup box (box can
|
||||||
|
be triggered
|
||||||
|
<q-btn
|
||||||
|
size="sm"
|
||||||
|
color="primary"
|
||||||
|
@click="thingDialog.show = true"
|
||||||
|
>here</q-btn
|
||||||
|
>): <q-tooltip>Exmple of a tooltip!</q-tooltip>
|
||||||
|
</p>
|
||||||
|
<img src="./static/quasar-example.png" /><br /><br />
|
||||||
|
<div class="text-h6">Useful links:</div>
|
||||||
|
<q-btn
|
||||||
|
color="primary"
|
||||||
|
type="a"
|
||||||
|
href="https://quasar.dev/style/"
|
||||||
|
>Style (typography, spacing, etc)</q-btn
|
||||||
>
|
>
|
||||||
<a href="https://vuejs.org/">
|
<q-btn
|
||||||
<img src="./static/vuejslogo.png"
|
color="primary"
|
||||||
/></a>
|
type="a"
|
||||||
<p>
|
href="https://quasar.dev/vue-components/"
|
||||||
LNbits uses
|
>Genral components (cards, buttons, popup dialogs,
|
||||||
<a href="https://vuejs.org/" class="text-primary">Vue</a>
|
etc)</q-btn
|
||||||
components for best-in-class high-performance and
|
>
|
||||||
responsive performance.
|
<q-btn
|
||||||
</p>
|
color="primary"
|
||||||
|
type="a"
|
||||||
|
href="https://quasar.dev/layout/grid"
|
||||||
|
>Layouts (rows/columns, flexbox)</q-btn
|
||||||
|
>
|
||||||
|
</q-tab-panel>
|
||||||
|
|
||||||
<p>
|
<q-tab-panel
|
||||||
Typical example of Vue components in a frontend script:
|
v-if="someBool == true"
|
||||||
</p>
|
name="vuejs"
|
||||||
<img
|
class="text-body1"
|
||||||
src="./static/script-example.png"
|
>
|
||||||
style="max-width: 800px"
|
<a href="https://vuejs.org/">
|
||||||
/><br /><br />
|
<img src="./static/vuejslogo.png"
|
||||||
|
/></a>
|
||||||
|
<p>
|
||||||
|
LNbits uses
|
||||||
|
<a href="https://vuejs.org/" class="text-primary">Vue</a>
|
||||||
|
components for best-in-class high-performance and responsive
|
||||||
|
performance.
|
||||||
|
</p>
|
||||||
|
|
||||||
<p>
|
<p>Typical example of Vue components in a frontend script:</p>
|
||||||
In a page body, models can be called. <br />Content can be
|
<img
|
||||||
conditionally rendered using Vue's
|
src="./static/script-example.png"
|
||||||
<code class="bg-grey-3 text-black">v-if</code>:
|
style="max-width: 800px"
|
||||||
</p>
|
/><br /><br />
|
||||||
<img
|
|
||||||
src="./static/vif-example.png"
|
<p>
|
||||||
style="max-width: 800px"
|
In a page body, models can be called. <br />Content can be
|
||||||
/>
|
conditionally rendered using Vue's
|
||||||
</q-tab-panel>
|
<code class="bg-grey-3 text-black">v-if</code>:
|
||||||
</q-tab-panels>
|
</p>
|
||||||
</template>
|
<img
|
||||||
</q-splitter>
|
src="./static/vif-example.png"
|
||||||
|
style="max-width: 800px"
|
||||||
|
/>
|
||||||
|
</q-tab-panel>
|
||||||
|
</q-tab-panels>
|
||||||
|
</template>
|
||||||
</div>
|
</div>
|
||||||
</q-tab-panel>
|
</q-tab-panel>
|
||||||
|
|
||||||
<q-tab-panel name="tools">
|
<q-tab-panel name="tools">
|
||||||
<div class="text-h6">Useful Tools</div>
|
<div class="text-h6">Useful Tools</div>
|
||||||
<div>
|
<div>
|
||||||
<q-splitter v-model="splitterModel">
|
<template>
|
||||||
<template v-slot:before>
|
<q-tabs v-model="usefultab" align="left">
|
||||||
<q-tabs v-model="usefultab" vertical>
|
<q-tab name="magicalg">MAGICAL G</q-tab>
|
||||||
<q-tab name="magicalg">MAGICAL G</q-tab>
|
<q-tab name="exchange">EXCHANGE RATES</q-tab>
|
||||||
<q-tab name="exchange">EXCHANGE RATES</q-tab>
|
</q-tabs>
|
||||||
</q-tabs>
|
</template>
|
||||||
</template>
|
|
||||||
|
|
||||||
<template v-slot:after>
|
<template>
|
||||||
<q-tab-panels v-model="usefultab">
|
<q-tab-panels v-model="usefultab">
|
||||||
<q-tab-panel name="magicalg" class="text-body1">
|
<q-tab-panel name="magicalg" class="text-body1">
|
||||||
<div class="text-h5 q-mb-md">Magical G</div>
|
<div class="text-h5 q-mb-md">Magical G</div>
|
||||||
<p>
|
<p>
|
||||||
A magical "g" (ie
|
A magical "g" (ie
|
||||||
<code class="bg-grey-3 text-black"
|
|
||||||
>this.g.user.wallets[0].inkey</code
|
|
||||||
>) is always available, with info about the user, wallets
|
|
||||||
and extensions:
|
|
||||||
</p>
|
|
||||||
<code class="text-caption"
|
|
||||||
>{% raw %}{{ g }}{% endraw %}</code
|
|
||||||
>
|
|
||||||
</q-tab-panel>
|
|
||||||
<q-tab-panel name="exchange">
|
|
||||||
<div class="text-h6">Exchange rates</div>
|
|
||||||
<p>
|
|
||||||
LNbits includes a handy
|
|
||||||
<a
|
|
||||||
href="../docs#/default/api_fiat_as_sats_api_v1_conversion_post"
|
|
||||||
class="text-primary"
|
|
||||||
>exchange rate function</a
|
|
||||||
>, that streams rates from 6 different sources.
|
|
||||||
</p>
|
|
||||||
Exchange rate API:<br />
|
|
||||||
<img src="./static/conversion-example.png" /><br /><br />
|
|
||||||
Exchange rate functions, included using
|
|
||||||
<code class="bg-grey-3 text-black"
|
<code class="bg-grey-3 text-black"
|
||||||
>from lnbits.utils.exchange_rates import
|
>this.g.user.wallets[0].inkey</code
|
||||||
fiat_amount_as_satoshis</code
|
>) is always available, with info about the user, wallets
|
||||||
>:<br />
|
and extensions:
|
||||||
<img src="./static/conversion-example2.png" />
|
</p>
|
||||||
</q-tab-panel>
|
<code class="text-caption">{% raw %}{{ g }}{% endraw %}</code>
|
||||||
</q-tab-panels>
|
</q-tab-panel>
|
||||||
</template>
|
<q-tab-panel name="exchange">
|
||||||
</q-splitter>
|
<div class="text-h6">Exchange rates</div>
|
||||||
|
<p>
|
||||||
|
LNbits includes a handy
|
||||||
|
<a
|
||||||
|
href="../docs#/default/api_fiat_as_sats_api_v1_conversion_post"
|
||||||
|
class="text-primary"
|
||||||
|
>exchange rate function</a
|
||||||
|
>, that streams rates from 6 different sources.
|
||||||
|
</p>
|
||||||
|
Exchange rate API:<br />
|
||||||
|
<img src="./static/conversion-example.png" /><br /><br />
|
||||||
|
Exchange rate functions, included using
|
||||||
|
<code class="bg-grey-3 text-black"
|
||||||
|
>from lnbits.utils.exchange_rates import
|
||||||
|
fiat_amount_as_satoshis</code
|
||||||
|
>:<br />
|
||||||
|
<img src="./static/conversion-example2.png" />
|
||||||
|
</q-tab-panel>
|
||||||
|
</q-tab-panels>
|
||||||
|
</template>
|
||||||
</div>
|
</div>
|
||||||
</q-tab-panel>
|
</q-tab-panel>
|
||||||
|
|
||||||
<q-tab-panel name="structure">
|
<q-tab-panel name="goodpractice">
|
||||||
<div class="text-h6">File Structure</div>
|
<div class="text-h6">Good Practice</div>
|
||||||
Coming soon...
|
Coming soon...
|
||||||
</q-tab-panel>
|
</q-tab-panel>
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user