machankura/mempool
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Logo overrides, custom index.html

Browse Source
This commit is contained in:
Mononaut 2024-04-27 20:39:53 +00:00
parent 0d9602693b
commit f9fd589af2
No known key found for this signature in database
GPG Key ID: A3F058E41374C04E
7 changed files with 1181 additions and 1087 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/custom-sv-config.json
View File

@ -4,6 +4,7 @@
"branding": { "branding": {
"name": "onbtc", "name": "onbtc",
"title": "Oficina Nacional del Bitcoin", "title": "Oficina Nacional del Bitcoin",
"header_img": "/resources/onbtc.svg",
"img": "/resources/elsalvador.svg", "img": "/resources/elsalvador.svg",
"rounded_corner": true "rounded_corner": true
}, },

8
frontend/src/app/components/master-page/master-page.component.html
View File

@ -24,8 +24,12 @@
<div class="vertical-line"></div> <div class="vertical-line"></div>
</ng-template> </ng-template>
<ng-container *ngIf="{ val: connectionState$ | async } as connectionState"> <ng-container *ngIf="{ val: connectionState$ | async } as connectionState">
@if (enterpriseInfo?.header_img) {
<img [src]="enterpriseInfo?.header_img" alt="enterpriseInfo.title" height="36px">
} @else {
<app-svg-images *ngIf="!officialMempoolSpace" name="mempoolSpace" viewBox="0 0 500 126" class="mempool-logo" [ngStyle]="{'opacity': connectionState.val === 2 ? 1 : 0.5 }"></app-svg-images> <app-svg-images *ngIf="!officialMempoolSpace" name="mempoolSpace" viewBox="0 0 500 126" class="mempool-logo" [ngStyle]="{'opacity': connectionState.val === 2 ? 1 : 0.5 }"></app-svg-images>
<app-svg-images *ngIf="officialMempoolSpace" name="officialMempoolSpace" viewBox="0 0 500 126"></app-svg-images> <app-svg-images *ngIf="officialMempoolSpace" name="officialMempoolSpace" viewBox="0 0 500 126"></app-svg-images>
}
<div class="connection-badge"> <div class="connection-badge">
<div class="badge badge-warning" *ngIf="connectionState.val === 0" i18n="master-page.offline">Offline</div> <div class="badge badge-warning" *ngIf="connectionState.val === 0" i18n="master-page.offline">Offline</div>
<div class="badge badge-warning" *ngIf="connectionState.val === 1" i18n="master-page.reconnecting">Reconnecting...</div> <div class="badge badge-warning" *ngIf="connectionState.val === 1" i18n="master-page.reconnecting">Reconnecting...</div>
@ -41,8 +45,12 @@
<div class="vertical-line"></div> <div class="vertical-line"></div>
</ng-template> </ng-template>
<ng-container *ngIf="{ val: connectionState$ | async } as connectionState"> <ng-container *ngIf="{ val: connectionState$ | async } as connectionState">
@if (enterpriseInfo?.header_img) {
<img [src]="enterpriseInfo?.header_img" alt="enterpriseInfo.title" height="36px">
} @else {
<app-svg-images *ngIf="!officialMempoolSpace" name="mempoolSpace" viewBox="0 0 500 126" class="mempool-logo" [ngStyle]="{'opacity': connectionState.val === 2 ? 1 : 0.5 }"></app-svg-images> <app-svg-images *ngIf="!officialMempoolSpace" name="mempoolSpace" viewBox="0 0 500 126" class="mempool-logo" [ngStyle]="{'opacity': connectionState.val === 2 ? 1 : 0.5 }"></app-svg-images>
<app-svg-images *ngIf="officialMempoolSpace" name="officialMempoolSpace" viewBox="0 0 500 126"></app-svg-images> <app-svg-images *ngIf="officialMempoolSpace" name="officialMempoolSpace" viewBox="0 0 500 126"></app-svg-images>
}
<div class="connection-badge"> <div class="connection-badge">
<div class="badge badge-warning" *ngIf="connectionState.val === 0" i18n="master-page.offline">Offline</div> <div class="badge badge-warning" *ngIf="connectionState.val === 0" i18n="master-page.offline">Offline</div>
<div class="badge badge-warning" *ngIf="connectionState.val === 1" i18n="master-page.reconnecting">Reconnecting...</div> <div class="badge badge-warning" *ngIf="connectionState.val === 1" i18n="master-page.reconnecting">Reconnecting...</div>

2
frontend/src/app/services/enterprise.service.ts
View File

@ -50,7 +50,7 @@ export class EnterpriseService {
if (this.stateService.env.customize?.branding) { if (this.stateService.env.customize?.branding) {
const info = this.stateService.env.customize?.branding; const info = this.stateService.env.customize?.branding;
this.insertMatomo(info.site_id); this.insertMatomo(info.site_id);
this.seoService.setEnterpriseTitle(info.title); this.seoService.setEnterpriseTitle(info.title, true);
this.info$.next(info); this.info$.next(info);
} else { } else {
this.apiService.getEnterpriseInfo$(this.subdomain).subscribe((info) => { this.apiService.getEnterpriseInfo$(this.subdomain).subscribe((info) => {

6
frontend/src/app/services/seo.service.ts
View File

@ -50,8 +50,12 @@ export class SeoService {
this.metaService.updateTag({ property: 'og:meta:ready', content: 'ready'}); this.metaService.updateTag({ property: 'og:meta:ready', content: 'ready'});
} }
setEnterpriseTitle(title: string) { setEnterpriseTitle(title: string, override: boolean = false) {
if (override) {
this.baseTitle = title;
} else {
this.baseTitle = title + ' - ' + this.baseTitle; this.baseTitle = title + ' - ' + this.baseTitle;
}
this.resetTitle(); this.resetTitle();
} }

45
frontend/src/index.sv.html Normal file
View File

@ -0,0 +1,45 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Oficina Nacional del Bitcoin - Bitcoin Explorer</title>
<script src="/resources/config.js"></script>
<script src="/resources/customize.js"></script>
<base href="/">
<meta name="description" content="Explore the full Bitcoin ecosystem with The Mempool Open Source Project®. See the real-time status of your transactions, get network info, and more." />
<meta property="og:image" content="https://mempool.space/resources/previews/mempool-space-preview.jpg" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="2000" />
<meta property="og:image:height" content="1000" />
<meta property="og:description" content="Explore the full Bitcoin ecosystem with The Mempool Open Source Project®. See the real-time status of your transactions, get network info, and more." />
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@mempool">
<meta name="twitter:creator" content="@mempool">
<meta name="twitter:title" content="The Mempool Open Source Project®">
<meta name="twitter:description" content="Explore the full Bitcoin ecosystem with The Mempool Open Source Project®. See the real-time status of your transactions, get network info, and more." />
<meta name="twitter:image" content="https://mempool.space/resources/previews/mempool-space-preview.jpg" />
<meta name="twitter:domain" content="mempool.space">
<link rel="apple-touch-icon" sizes="180x180" href="/resources/favicons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/resources/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/resources/favicons/favicon-16x16.png">
<link rel="manifest" href="/resources/favicons/site.webmanifest">
<link rel="shortcut icon" href="/resources/favicons/favicon.ico">
<link id="canonical" rel="canonical" href="https://mempool.space">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="msapplication-TileColor" content="#000000">
<meta name="msapplication-config" content="/resources/favicons/browserconfig.xml">
<meta name="theme-color" content="#1d1f31">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<app-root></app-root>
</body>
</html>

84
frontend/src/resources/elsalvador.svg
View File

@ -7,8 +7,31 @@
viewBox="0 0 42.26523 42.986894" viewBox="0 0 42.26523 42.986894"
version="1.1" version="1.1"
id="svg5" id="svg5"
sodipodi:docname="elsalvador.svg"
inkscape:version="1.2.2 (b0a84865, 2022-12-01)"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"> xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview469"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
showgrid="false"
inkscape:zoom="2.8463012"
inkscape:cx="21.606989"
inkscape:cy="67.982966"
inkscape:window-width="1728"
inkscape:window-height="1051"
inkscape:window-x="0"
inkscape:window-y="38"
inkscape:window-maximized="1"
inkscape:current-layer="svg5" />
<defs <defs
id="defs2"> id="defs2">
<clipPath <clipPath
@ -19,15 +42,9 @@
id="path3810" /> id="path3810" />
</clipPath> </clipPath>
</defs> </defs>
<g
id="layer1"
transform="translate(-73.844614,-44.443426)">
<g
id="g1912"
transform="matrix(0.35277777,0,0,-0.35277777,-80.542642,240.94663)">
<g <g
id="g3806" id="g3806"
transform="matrix(1.0712585,0,0,1.0712585,423.38928,-41.000061)"> transform="matrix(0.37791618,0,0,-0.37791618,-5.0249309,210.96711)">
<g <g
id="g3808" /> id="g3808" />
<g <g
@ -42,74 +59,64 @@
</g> </g>
<g <g
id="g1994" id="g1994"
transform="matrix(1.3192867,0,0,1.3192867,517.37057,382.23187)" /> transform="matrix(0.46541502,0,0,-0.46541502,28.129579,61.660297)" />
<g <g
id="g1998" id="g1998"
transform="matrix(1.3192867,0,0,1.3192867,526.52417,394.92909)" /> transform="matrix(0.46541502,0,0,-0.46541502,31.358766,57.181)" />
<g <g
id="g2002" id="g2002"
transform="matrix(1.3192867,0,0,1.3192867,538.98378,384.09721)" /> transform="matrix(0.46541502,0,0,-0.46541502,35.754239,61.002247)" />
<g <g
id="g2006" id="g2006"
transform="matrix(1.3192867,0,0,1.3192867,553.35306,381.17539)" /> transform="matrix(0.46541502,0,0,-0.46541502,40.823402,62.033)" />
<g <g
id="g2010" id="g2010"
transform="matrix(1.3192867,0,0,1.3192867,564.29707,386.23208)" /> transform="matrix(0.46541502,0,0,-0.46541502,44.684205,60.249112)" />
<g <g
id="g2014" id="g2014"
transform="matrix(1.3192867,0,0,1.3192867,569.89757,387.51272)" /> transform="matrix(0.46541502,0,0,-0.46541502,46.659937,59.797331)" />
<g <g
id="g2018" id="g2018"
transform="matrix(1.3192867,0,0,1.3192867,595.97406,380.78937)" /> transform="matrix(0.46541502,0,0,-0.46541502,55.859143,62.169179)" />
<g <g
id="g2022" id="g2022"
transform="matrix(1.3192867,0,0,1.3192867,605.72583,394.92909)" /> transform="matrix(0.46541502,0,0,-0.46541502,59.299351,57.181)" />
<g <g
id="g2026" id="g2026"
transform="matrix(1.3192867,0,0,1.3192867,623.66668,382.83861)" /> transform="matrix(0.46541502,0,0,-0.46541502,65.628484,61.446253)" />
<g <g
id="g2030" id="g2030"
transform="matrix(1.3192867,0,0,1.3192867,645.02963,386.23208)" /> transform="matrix(0.46541502,0,0,-0.46541502,73.164857,60.249112)" />
<g <g
id="g2034" id="g2034"
transform="matrix(1.3192867,0,0,1.3192867,514.72038,364.90964)" /> transform="matrix(0.46541502,0,0,-0.46541502,27.194651,67.771195)" />
<g <g
id="g2038" id="g2038"
transform="matrix(1.3192867,0,0,1.3192867,527.65889,359.77854)" /> transform="matrix(0.46541502,0,0,-0.46541502,31.75907,69.581333)" />
<g <g
id="g2042" id="g2042"
transform="matrix(1.3192867,0,0,1.3192867,536.01222,363.24496)" /> transform="matrix(0.46541502,0,0,-0.46541502,34.705939,68.358457)" />
<g <g
id="g2046" id="g2046"
transform="matrix(1.3192867,0,0,1.3192867,552.32652,372.38934)" /> transform="matrix(0.46541502,0,0,-0.46541502,40.461261,65.132523)" />
<g <g
id="g2050" id="g2050"
transform="matrix(1.3192867,0,0,1.3192867,570.49046,359.77854)" /> transform="matrix(0.46541502,0,0,-0.46541502,46.869095,69.581333)" />
<g <g
id="g2054" id="g2054"
transform="matrix(1.3192867,0,0,1.3192867,575.66681,359.41389)" /> transform="matrix(0.46541502,0,0,-0.46541502,48.695196,69.709973)" />
<g <g
id="g2058" id="g2058"
transform="matrix(1.3192867,0,0,1.3192867,588.37721,372.38934)" /> transform="matrix(0.46541502,0,0,-0.46541502,53.179143,65.132523)" />
<g <g
id="g2062" id="g2062"
transform="matrix(1.3192867,0,0,1.3192867,600.31214,361.46617)" /> transform="matrix(0.46541502,0,0,-0.46541502,57.389521,68.985975)" />
<g <g
id="g2066" id="g2066"
transform="matrix(1.3192867,0,0,1.3192867,620.73707,373.73474)" /> transform="matrix(0.46541502,0,0,-0.46541502,64.594982,64.657896)" />
<g
id="g1734">
<rect
style="fill:#313945;fill-opacity:1;stroke:none;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none"
id="rect3899"
width="119.80694"
height="121.85262"
x="437.63318"
y="-557.01697"
transform="scale(1,-1)" />
<g <g
id="g10388" id="g10388"
transform="matrix(1.3192867,0,0,1.3192867,-217.93244,-154.01197)"> transform="matrix(0.46541502,0,0,-0.46541502,-231.26898,250.8352)">
<g <g
id="g2126" id="g2126"
transform="translate(523.73704,534.17142)"> transform="translate(523.73704,534.17142)">
@ -1125,7 +1132,4 @@
</g> </g>
</g> </g>
</g> </g>
</g>
</g>
</g>
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 86 KiB

After

Width:  |  Height:  |  Size: 80 KiB

32
frontend/src/resources/onbtc.svg Normal file
View File

@ -0,0 +1,32 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="166.66856mm"
height="27.910412mm"
viewBox="0 0 166.66856 27.910412"
version="1.1"
id="svg5"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs2" />
<g
id="layer1"
transform="translate(-15.744419,-40.187266)">
<text
xml:space="preserve"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:16.8847px;line-height:1;font-family:'Bembo Std';-inkscape-font-specification:'Bembo Std';fill:#d2d2d2;fill-opacity:1;stroke-width:3.37609;stroke-linecap:square"
x="15.491148"
y="50.942822"
id="text1855"><tspan
id="tspan1853"
style="stroke-width:3.37609"
x="15.491148"
y="50.942822">OFICINA NACIONAL</tspan><tspan
style="stroke-width:3.37609"
x="15.491148"
y="67.827522"
id="tspan1857">DEL BITCOIN</tspan></text>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB