Michilis/lnbits
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor move home / into vue components (#3498)

Browse Source
This commit is contained in:
dni ⚡
2025-11-10 14:48:27 +01:00
committed by GitHub
parent c9270bbf7f
commit bd50a3c546
16 changed files with 491 additions and 740 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lnbits/static/bundle-components.min.js
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
lnbits/static/bundle.min.css
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
lnbits/static/css/base.css
+47
View File
@@ -215,6 +215,53 @@ body.body--dark .q-drawer {
backdrop-filter: blur(6px);
}
:root {
--size: 100px;
--gap: 25px;
}
.home .btn-fixed-width {
/* width: 45%; */
}
.home .wrapper {
display: flex;
flex-direction: column;
gap: var(--gap);
margin: auto;
max-width: 100%;
}
.home .marquee {
display: flex;
overflow: hidden;
user-select: none;
gap: var(--gap);
height: max-content;
mask-image: linear-gradient(to right, hsla(0, 0%, 0%, 0), hsl(0, 0%, 0%) 20%, hsl(0, 0%, 0%) 80%, hsla(0, 0%, 0%, 0));
}
.home .marquee__group {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: space-around;
gap: var(--gap);
min-width: 100%;
animation: scroll-x 60s linear infinite;
}
.home .marquee:hover .marquee__group {
animation-play-state: paused;
}
.home .marquee__group div {
width: var(--size);
}
@keyframes scroll-x {
from {
transform: translateX(0);
}
to {
transform: translateX(calc(-100% - var(--gap)));
}
}
[v-cloak] {
display: none;
}
lnbits/static/js/components/lnbits-home-logos.js
+104
View File
@@ -0,0 +1,104 @@
window.app.component('lnbits-home-logos', {
template: '#lnbits-home-logos',
mixins: [window.windowMixin],
data() {
return {
logos: [
{
href: 'https://github.com/ElementsProject/lightning',
lightSrc: '/static/images/clnl.png',
darkSrc: '/static/images/cln.png'
},
{
href: 'https://github.com/lightningnetwork/lnd',
lightSrc: '/static/images/lnd.png',
darkSrc: '/static/images/lnd.png'
},
{
href: 'https://opennode.com',
lightSrc: '/static/images/opennodel.png',
darkSrc: '/static/images/opennode.png'
},
{
href: 'https://lnpay.co/',
lightSrc: '/static/images/lnpayl.png',
darkSrc: '/static/images/lnpay.png'
},
{
href: 'https://github.com/rootzoll/raspiblitz',
lightSrc: '/static/images/blitzl.png',
darkSrc: '/static/images/blitz.png'
},
{
href: 'https://start9.com/',
lightSrc: '/static/images/start9l.png',
darkSrc: '/static/images/start9.png'
},
{
href: 'https://getumbrel.com/',
lightSrc: '/static/images/umbrell.png',
darkSrc: '/static/images/umbrel.png'
},
{
href: 'https://mynodebtc.com',
lightSrc: '/static/images/mynodel.png',
darkSrc: '/static/images/mynode.png'
},
{
href: 'https://github.com/shesek/spark-wallet',
lightSrc: '/static/images/sparkl.png',
darkSrc: '/static/images/spark.png'
},
{
href: 'https://voltage.cloud',
lightSrc: '/static/images/voltagel.png',
darkSrc: '/static/images/voltage.png'
},
{
href: 'https://breez.technology/sdk/',
lightSrc: '/static/images/breezl.png',
darkSrc: '/static/images/breez.png'
},
{
href: 'https://blockstream.com/lightning/greenlight/',
lightSrc: '/static/images/greenlightl.png',
darkSrc: '/static/images/greenlight.png'
},
{
href: 'https://getalby.com',
lightSrc: '/static/images/albyl.png',
darkSrc: '/static/images/alby.png'
},
{
href: 'https://zbd.gg',
lightSrc: '/static/images/zbdl.png',
darkSrc: '/static/images/zbd.png'
},
{
href: 'https://phoenix.acinq.co/server',
lightSrc: '/static/images/phoenixdl.png',
darkSrc: '/static/images/phoenixd.png'
},
{
href: 'https://boltz.exchange/',
lightSrc: '/static/images/boltzl.svg',
darkSrc: '/static/images/boltz.svg'
},
{
href: 'https://www.blink.sv/',
lightSrc: '/static/images/blink_logol.png',
darkSrc: '/static/images/blink_logo.png'
}
]
}
},
computed: {
showLogos() {
return (
this.LNBITS_DENOMINATION == 'sats' &&
this.SITE_TITLE == 'LNbits' &&
this.LNBITS_SHOW_HOME_PAGE_ELEMENTS == true
)
}
}
})
lnbits/static/js/init-app.js
+5
View File
@@ -193,6 +193,11 @@ const routes = [
path: '/first_install',
name: 'FirstInstall',
component: PageFirstInstall
},
{
path: '/',
name: 'PageHome',
component: PageHome
}
]
lnbits/static/js/index.js → lnbits/static/js/pages/home.js
+56 -20
View File
@@ -1,13 +1,9 @@
window.app = Vue.createApp({
el: '#vue',
window.PageHome = {
template: '#page-home',
mixins: [window.windowMixin],
data() {
return {
disclaimerDialog: {
show: false,
data: {},
description: ''
},
lnurl: '',
isUserAuthorized: false,
authAction: 'login',
authMethod: 'username-password',
@@ -22,11 +18,50 @@ window.app = Vue.createApp({
}
},
computed: {
showClaimLnurl() {
return (
this.lnurl !== '' &&
this.allowRegister &&
'user-id-only' in this.LNBITS_AUTH_METHODS
)
},
formatDescription() {
return LNbits.utils.convertMarkdown(this.description)
return LNbits.utils.convertMarkdown(this.SITE_DESCRIPTION)
},
isAccessTokenExpired() {
return this.$q.cookies.get('is_access_token_expired')
},
allowRegister() {
return this.LNBITS_NEW_ACCOUNTS_ALLOWED
},
// TODO: this makes no sense
hasCustomImage() {
return this.LNBITS_CUSTOM_IMAGE
},
showHomepageElements() {
return this.HOMEPAGE_ELEMENTS_ENABLED
},
siteTitle() {
return this.SITE_TITLE || ''
},
siteTagline() {
return this.SITE_TAGLINE || ''
},
adsEnabled() {
return this.AD_SPACE_ENABLED && this.AD_SPACE && this.AD_SPACE.length > 0
},
adsTitle() {
return this.AD_SPACE_TITLE || ''
},
ads() {
return this.AD_SPACE.map(ad => ad.split(';'))
},
lnbitsBannerEnabled() {
return (
this.LNBITS_DENOMINATION == 'sats' &&
this.SITE_TITLE == 'LNbits' &&
this.LNBITS_SHOW_HOME_PAGE_ELEMENTS == true
)
}
},
methods: {
@@ -101,23 +136,24 @@ window.app = Vue.createApp({
}
},
created() {
this.description = this.SITE_DESCRIPTION
this.allowedRegister = this.LNBITS_NEW_ACCOUNTS_ALLOWED
this.authAction =
!this.allowedRegister ||
Quasar.LocalStorage.getItem('lnbits.disclaimerShown')
? 'login'
: 'register'
this.isUserAuthorized = !!this.$q.cookies.get('is_lnbits_user_authorized')
const _acccess_cookies_for_safari_refresh_do_not_delete = document.cookie
const _access_cookies_for_safari_refresh_do_not_delete = document.cookie
if (this.isUserAuthorized) {
window.location.href = '/wallet'
}
this.reset_key = new URLSearchParams(window.location.search).get(
'reset_key'
)
const urlParams = new URLSearchParams(window.location.search)
this.reset_key = urlParams.get('reset_key')
if (this.reset_key) {
this.authAction = 'reset'
}
// check if lightning parameters are present in the URL
if (urlParams.has('lightning')) {
this.lnurl = urlParams.get('lightning')
}
}
})
}
lnbits/static/scss/base.scss
+1
View File
@@ -1,6 +1,7 @@
@import 'themes';
@import 'borders';
@import 'background';
@import 'home';
[v-cloak] {
display: none;
lnbits/static/scss/home.scss
+60
View File
@@ -0,0 +1,60 @@
:root {
--size: 100px;
--gap: 25px;
}
.home {
.btn-fixed-width {
/* width: 45%; */
}
.wrapper {
display: flex;
flex-direction: column;
gap: var(--gap);
margin: auto;
max-width: 100%;
}
.marquee {
display: flex;
overflow: hidden;
user-select: none;
gap: var(--gap);
height: max-content;
mask-image: linear-gradient(
to right,
hsl(0 0% 0% / 0),
hsl(0 0% 0% / 1) 20%,
hsl(0 0% 0% / 1) 80%,
hsl(0 0% 0% / 0)
);
}
.marquee__group {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: space-around;
gap: var(--gap);
min-width: 100%;
animation: scroll-x 60s linear infinite;
}
.marquee:hover .marquee__group {
animation-play-state: paused;
}
.marquee__group div {
width: var(--size);
}
@keyframes scroll-x {
from {
transform: translateX(0);
}
to {
transform: translateX(calc(-100% - var(--gap)));
}
}
}
lnbits/static/vendor.json
+2
View File
@@ -43,6 +43,7 @@
"js/lnurl.js"
],
"components": [
"js/pages/home.js",
"js/pages/extensions_builder.js",
"js/pages/extensions.js",
"js/pages/first-install.js",
@@ -66,6 +67,7 @@
"js/components/admin/lnbits-admin-site-customisation.js",
"js/components/admin/lnbits-admin-library.js",
"js/components/admin/lnbits-admin-audit.js",
"js/components/lnbits-home-logos.js",
"js/components/lnbits-new-user-wallet.js",
"js/components/lnbits-qrcode.js",
"js/components/lnbits-qrcode-lnurl.js",