ngx-serp-preview
Version:
SERP (Search Engine Result Page) Preview Component for Angular
72 lines • 16.6 kB
JavaScript
import { ChangeDetectionStrategy, Component, ViewEncapsulation, HostBinding, Input, } from '@angular/core';
import { NgxMdIconModule } from 'ngx-md-icon';
import { mdiDotsVertical, mdiEarth } from '@mdi/js';
import { NgIf, NgOptimizedImage } from '@angular/common';
import * as i0 from "@angular/core";
import * as i1 from "ngx-md-icon";
export class NgxSerpGoogleComponent {
constructor(cdRef) {
this.cdRef = cdRef;
this.class = 'ngx-serp-google';
this.url = 'example.com';
this.formattedUrl = '';
this.formattedDescription = '';
this.formattedTitle = '';
this.siteIcon = mdiEarth;
this.menuIcon = mdiDotsVertical;
}
ngOnInit() { }
ngOnChanges(changes) {
if (changes['url']) {
this.formattedUrl = this.formatUrl(this.url);
}
if (changes['description'] && this.description?.length) {
this.formattedDescription = this.truncateString(this.description, 155);
}
if (changes['title'] && this.title?.length) {
this.formattedTitle = this.truncateString(this.title, 60);
}
}
ngOnDestroy() { }
formatUrl(url) {
return 'https://' + url.replace(/https?:\/\//, '').replace(/\//g, ' › ');
}
/**
* Truncate String
*/
truncateString(inputStr, maxLength) {
const words = inputStr.split(' ');
let str = '';
for (let i = 0; i < words.length; i++) {
const word = words[i];
if (str.length + word.length > maxLength) {
str += ' ...';
break;
}
else {
str += ' ' + word;
}
}
str = str.trim();
return str;
}
}
NgxSerpGoogleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NgxSerpGoogleComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
NgxSerpGoogleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", type: NgxSerpGoogleComponent, isStandalone: true, selector: "ngx-serp-google", inputs: { siteName: "siteName", title: "title", description: "description", url: "url", faviconUrl: "faviconUrl" }, host: { properties: { "class": "this.class" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"ngx-serp-google__header\">\n <div class=\"\">\n <div class=\"ngx-serp-google__header-icon\">\n <ng-container *ngIf=\"faviconUrl; else mdIcon\">\n <img [src]=\"faviconUrl\" fill>\n </ng-container>\n <ng-template #mdIcon>\n <md-icon [icon]=\"siteIcon\"></md-icon>\n </ng-template>\n </div>\n </div>\n <div class=\"\">\n <div class=\"ngx-serp-google__header-title\">{{ siteName }}</div>\n <div class=\"ngx-serp-google__header-url\">\n {{ formattedUrl }}\n </div>\n </div>\n <div class=\"ngx-serp-google__header-menu\">\n <md-icon [icon]=\"menuIcon\" middle></md-icon>\n </div>\n</div>\n<div class=\"ngx-serp-google__title\">{{ formattedTitle }}</div>\n<div class=\"ngx-serp-google__description\">{{ formattedDescription }}</div>\n", styles: ["body.dark .ngx-serp-google{--ngx-serp-google-site: #dadce0;--ngx-serp-google-url: #bdc1c6;--ngx-serp-google-title: #8ab4f8;--ngx-serp-google-description: #bdc1c6}.ngx-serp-google{--ngx-serp-google-site: #202124;--ngx-serp-google-url: #4d5156;--ngx-serp-google-title: #1a0dab;--ngx-serp-google-description: #4d5156;display:block;font-family:arial,sans-serif;letter-spacing:normal;font-weight:400}.ngx-serp-google__header{display:flex;align-items:center;justify-content:flex-start}.ngx-serp-google__header-icon{margin-right:12px;background-color:#e2eeff;height:28px;width:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center}.ngx-serp-google__header-icon .md-icon{width:18px;height:18px;font-size:18px}.ngx-serp-google__header-icon .md-icon path{color:#0060f0}.ngx-serp-google__header-icon img{width:18px;height:auto}.ngx-serp-google__header-title{color:var(--ngx-serp-google-site);font-size:14px;max-width:300px;display:block;line-height:20px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.ngx-serp-google__header-url{font-size:12px;line-height:18px;color:var(--ngx-serp-google-url);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:330px}.ngx-serp-google__header-menu{align-self:flex-end}.ngx-serp-google__header-menu .md-icon{width:18px;height:18px;font-size:18px;position:relative;top:4px;left:4px}.ngx-serp-google__header-menu .md-icon path{color:var(--ngx-serp-google-url)}.ngx-serp-google__title{color:var(--ngx-serp-google-title);max-width:600px;font-size:20px;font-weight:400;display:block;line-height:1.3;margin-top:6px;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ngx-serp-google__description{color:var(--ngx-serp-google-description);display:block;font-size:14px;line-height:1.58;word-wrap:break-word;max-width:600px}\n"], dependencies: [{ kind: "ngmodule", type: NgxMdIconModule }, { kind: "component", type: i1.NgxMdIconComponent, selector: "md-icon", inputs: ["icon", "icons", "texts", "middle", "xViewBox", "yViewBox", "xTextPos", "yTextPos"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NgxSerpGoogleComponent, decorators: [{
type: Component,
args: [{ selector: 'ngx-serp-google', standalone: true, imports: [NgxMdIconModule, NgOptimizedImage, NgIf], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"ngx-serp-google__header\">\n <div class=\"\">\n <div class=\"ngx-serp-google__header-icon\">\n <ng-container *ngIf=\"faviconUrl; else mdIcon\">\n <img [src]=\"faviconUrl\" fill>\n </ng-container>\n <ng-template #mdIcon>\n <md-icon [icon]=\"siteIcon\"></md-icon>\n </ng-template>\n </div>\n </div>\n <div class=\"\">\n <div class=\"ngx-serp-google__header-title\">{{ siteName }}</div>\n <div class=\"ngx-serp-google__header-url\">\n {{ formattedUrl }}\n </div>\n </div>\n <div class=\"ngx-serp-google__header-menu\">\n <md-icon [icon]=\"menuIcon\" middle></md-icon>\n </div>\n</div>\n<div class=\"ngx-serp-google__title\">{{ formattedTitle }}</div>\n<div class=\"ngx-serp-google__description\">{{ formattedDescription }}</div>\n", styles: ["body.dark .ngx-serp-google{--ngx-serp-google-site: #dadce0;--ngx-serp-google-url: #bdc1c6;--ngx-serp-google-title: #8ab4f8;--ngx-serp-google-description: #bdc1c6}.ngx-serp-google{--ngx-serp-google-site: #202124;--ngx-serp-google-url: #4d5156;--ngx-serp-google-title: #1a0dab;--ngx-serp-google-description: #4d5156;display:block;font-family:arial,sans-serif;letter-spacing:normal;font-weight:400}.ngx-serp-google__header{display:flex;align-items:center;justify-content:flex-start}.ngx-serp-google__header-icon{margin-right:12px;background-color:#e2eeff;height:28px;width:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center}.ngx-serp-google__header-icon .md-icon{width:18px;height:18px;font-size:18px}.ngx-serp-google__header-icon .md-icon path{color:#0060f0}.ngx-serp-google__header-icon img{width:18px;height:auto}.ngx-serp-google__header-title{color:var(--ngx-serp-google-site);font-size:14px;max-width:300px;display:block;line-height:20px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.ngx-serp-google__header-url{font-size:12px;line-height:18px;color:var(--ngx-serp-google-url);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:330px}.ngx-serp-google__header-menu{align-self:flex-end}.ngx-serp-google__header-menu .md-icon{width:18px;height:18px;font-size:18px;position:relative;top:4px;left:4px}.ngx-serp-google__header-menu .md-icon path{color:var(--ngx-serp-google-url)}.ngx-serp-google__title{color:var(--ngx-serp-google-title);max-width:600px;font-size:20px;font-weight:400;display:block;line-height:1.3;margin-top:6px;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ngx-serp-google__description{color:var(--ngx-serp-google-description);display:block;font-size:14px;line-height:1.58;word-wrap:break-word;max-width:600px}\n"] }]
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { class: [{
type: HostBinding
}], siteName: [{
type: Input
}], title: [{
type: Input
}], description: [{
type: Input
}], url: [{
type: Input
}], faviconUrl: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmd4LXNlcnAtZ29vZ2xlLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1zZXJwLXByZXZpZXcvc3JjL2xpYi9jb21wb25lbnRzL25neC1zZXJwLWdvb2dsZS9uZ3gtc2VycC1nb29nbGUuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXNlcnAtcHJldmlldy9zcmMvbGliL2NvbXBvbmVudHMvbmd4LXNlcnAtZ29vZ2xlL25neC1zZXJwLWdvb2dsZS5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ0osdUJBQXVCLEVBQ3ZCLFNBQVMsRUFNVCxpQkFBaUIsRUFDakIsV0FBVyxFQUNYLEtBQUssR0FDUCxNQUFNLGVBQWUsQ0FBQztBQUV2QixPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0sYUFBYSxDQUFDO0FBQzlDLE9BQU8sRUFBRSxlQUFlLEVBQUUsUUFBUSxFQUFpQixNQUFNLFNBQVMsQ0FBQztBQUNuRSxPQUFPLEVBQUUsSUFBSSxFQUFFLGdCQUFnQixFQUFFLE1BQU0saUJBQWlCLENBQUM7OztBQVd6RCxNQUFNLE9BQU8sc0JBQXNCO0lBMEJoQyxZQUFvQixLQUF3QjtRQUF4QixVQUFLLEdBQUwsS0FBSyxDQUFtQjtRQXhCckMsVUFBSyxHQUFHLGlCQUFpQixDQUFDO1FBWTFCLFFBQUcsR0FBVyxhQUFhLENBQUM7UUFLNUIsaUJBQVksR0FBVyxFQUFFLENBQUM7UUFDMUIseUJBQW9CLEdBQVcsRUFBRSxDQUFDO1FBQ2xDLG1CQUFjLEdBQVcsRUFBRSxDQUFDO1FBRTVCLGFBQVEsR0FBRyxRQUFRLENBQUM7UUFDcEIsYUFBUSxHQUFHLGVBQWUsQ0FBQztJQUVhLENBQUM7SUFFaEQsUUFBUSxLQUFVLENBQUM7SUFFbkIsV0FBVyxDQUFDLE9BQXNCO1FBQy9CLElBQUksT0FBTyxDQUFDLEtBQUssQ0FBQyxFQUFFO1lBQ2pCLElBQUksQ0FBQyxZQUFZLEdBQUcsSUFBSSxDQUFDLFNBQVMsQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLENBQUM7U0FDL0M7UUFDRCxJQUFJLE9BQU8sQ0FBQyxhQUFhLENBQUMsSUFBSSxJQUFJLENBQUMsV0FBVyxFQUFFLE1BQU0sRUFBRTtZQUNyRCxJQUFJLENBQUMsb0JBQW9CLEdBQUcsSUFBSSxDQUFDLGNBQWMsQ0FBQyxJQUFJLENBQUMsV0FBVyxFQUFFLEdBQUcsQ0FBQyxDQUFDO1NBQ3pFO1FBQ0QsSUFBSSxPQUFPLENBQUMsT0FBTyxDQUFDLElBQUksSUFBSSxDQUFDLEtBQUssRUFBRSxNQUFNLEVBQUU7WUFDekMsSUFBSSxDQUFDLGNBQWMsR0FBRyxJQUFJLENBQUMsY0FBYyxDQUFDLElBQUksQ0FBQyxLQUFLLEVBQUUsRUFBRSxDQUFDLENBQUM7U0FDNUQ7SUFDSixDQUFDO0lBRUQsV0FBVyxLQUFVLENBQUM7SUFFZCxTQUFTLENBQUMsR0FBVztRQUMxQixPQUFPLFVBQVUsR0FBRyxHQUFHLENBQUMsT0FBTyxDQUFDLGFBQWEsRUFBRSxFQUFFLENBQUMsQ0FBQyxPQUFPLENBQUMsS0FBSyxFQUFFLEtBQUssQ0FBQyxDQUFDO0lBQzVFLENBQUM7SUFFRDs7T0FFRztJQUNLLGNBQWMsQ0FBQyxRQUFnQixFQUFFLFNBQWlCO1FBQ3ZELE1BQU0sS0FBSyxHQUFHLFFBQVEsQ0FBQyxLQUFLLENBQUMsR0FBRyxDQUFDLENBQUM7UUFDbEMsSUFBSSxHQUFHLEdBQUcsRUFBRSxDQUFDO1FBQ2IsS0FBSyxJQUFJLENBQUMsR0FBRyxDQUFDLEVBQUUsQ0FBQyxHQUFHLEtBQUssQ0FBQyxNQUFNLEVBQUUsQ0FBQyxFQUFFLEVBQUU7WUFDcEMsTUFBTSxJQUFJLEdBQUcsS0FBSyxDQUFDLENBQUMsQ0FBQyxDQUFDO1lBQ3RCLElBQUksR0FBRyxDQUFDLE1BQU0sR0FBRyxJQUFJLENBQUMsTUFBTSxHQUFHLFNBQVMsRUFBRTtnQkFDdkMsR0FBRyxJQUFJLE1BQU0sQ0FBQztnQkFDZCxNQUFNO2FBQ1I7aUJBQU07Z0JBQ0osR0FBRyxJQUFJLEdBQUcsR0FBRyxJQUFJLENBQUM7YUFDcEI7U0FDSDtRQUNELEdBQUcsR0FBRyxHQUFHLENBQUMsSUFBSSxFQUFFLENBQUM7UUFFakIsT0FBTyxHQUFHLENBQUM7SUFDZCxDQUFDOzttSEFsRVMsc0JBQXNCO3VHQUF0QixzQkFBc0IscVFDMUJuQyw4MEJBdUJBLHUxRERIYSxlQUFlLHNNQUFvQixJQUFJOzJGQU12QyxzQkFBc0I7a0JBVGxDLFNBQVM7K0JBQ0csaUJBQWlCLGNBQ2YsSUFBSSxXQUNQLENBQUMsZUFBZSxFQUFFLGdCQUFnQixFQUFFLElBQUksQ0FBQyxtQkFHakMsdUJBQXVCLENBQUMsTUFBTSxpQkFDaEMsaUJBQWlCLENBQUMsSUFBSTt3R0FJOUIsS0FBSztzQkFEWCxXQUFXO2dCQUlMLFFBQVE7c0JBRGQsS0FBSztnQkFJQyxLQUFLO3NCQURYLEtBQUs7Z0JBSUMsV0FBVztzQkFEakIsS0FBSztnQkFJQyxHQUFHO3NCQURULEtBQUs7Z0JBSUMsVUFBVTtzQkFEaEIsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gICBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcbiAgIENvbXBvbmVudCxcbiAgIE9uSW5pdCxcbiAgIE9uRGVzdHJveSxcbiAgIENoYW5nZURldGVjdG9yUmVmLFxuICAgT25DaGFuZ2VzLFxuICAgU2ltcGxlQ2hhbmdlcyxcbiAgIFZpZXdFbmNhcHN1bGF0aW9uLFxuICAgSG9zdEJpbmRpbmcsXG4gICBJbnB1dCxcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBTdWJzY3JpcHRpb24gfSBmcm9tICdyeGpzJztcbmltcG9ydCB7IE5neE1kSWNvbk1vZHVsZSB9IGZyb20gJ25neC1tZC1pY29uJztcbmltcG9ydCB7IG1kaURvdHNWZXJ0aWNhbCwgbWRpRWFydGgsIG1kaUdsb2JlTW9kZWwgfSBmcm9tICdAbWRpL2pzJztcbmltcG9ydCB7IE5nSWYsIE5nT3B0aW1pemVkSW1hZ2UgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuXG5AQ29tcG9uZW50KHtcbiAgIHNlbGVjdG9yOiAnbmd4LXNlcnAtZ29vZ2xlJyxcbiAgIHN0YW5kYWxvbmU6IHRydWUsXG4gICBpbXBvcnRzOiBbTmd4TWRJY29uTW9kdWxlLCBOZ09wdGltaXplZEltYWdlLCBOZ0lmXSxcbiAgIHRlbXBsYXRlVXJsOiAnLi9uZ3gtc2VycC1nb29nbGUuY29tcG9uZW50Lmh0bWwnLFxuICAgc3R5bGVVcmxzOiBbJy4vbmd4LXNlcnAtZ29vZ2xlLmNvbXBvbmVudC5zY3NzJ10sXG4gICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgIGVuY2Fwc3VsYXRpb246IFZpZXdFbmNhcHN1bGF0aW9uLk5vbmUsXG59KVxuZXhwb3J0IGNsYXNzIE5neFNlcnBHb29nbGVDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQsIE9uQ2hhbmdlcywgT25EZXN0cm95IHtcbiAgIEBIb3N0QmluZGluZygpXG4gICBwdWJsaWMgY2xhc3MgPSAnbmd4LXNlcnAtZ29vZ2xlJztcblxuICAgQElucHV0KClcbiAgIHB1YmxpYyBzaXRlTmFtZT86IHN0cmluZztcblxuICAgQElucHV0KClcbiAgIHB1YmxpYyB0aXRsZT86IHN0cmluZztcblxuICAgQElucHV0KClcbiAgIHB1YmxpYyBkZXNjcmlwdGlvbj86IHN0cmluZztcblxuICAgQElucHV0KClcbiAgIHB1YmxpYyB1cmw6IHN0cmluZyA9ICdleGFtcGxlLmNvbSc7XG5cbiAgIEBJbnB1dCgpXG4gICBwdWJsaWMgZmF2aWNvblVybD86IHN0cmluZztcblxuICAgcHVibGljIGZvcm1hdHRlZFVybDogc3RyaW5nID0gJyc7XG4gICBwdWJsaWMgZm9ybWF0dGVkRGVzY3JpcHRpb246IHN0cmluZyA9ICcnO1xuICAgcHVibGljIGZvcm1hdHRlZFRpdGxlOiBzdHJpbmcgPSAnJztcblxuICAgcHVibGljIHNpdGVJY29uID0gbWRpRWFydGg7XG4gICBwdWJsaWMgbWVudUljb24gPSBtZGlEb3RzVmVydGljYWw7XG5cbiAgIGNvbnN0cnVjdG9yKHByaXZhdGUgY2RSZWY6IENoYW5nZURldGVjdG9yUmVmKSB7fVxuXG4gICBuZ09uSW5pdCgpOiB2b2lkIHt9XG5cbiAgIG5nT25DaGFuZ2VzKGNoYW5nZXM6IFNpbXBsZUNoYW5nZXMpOiB2b2lkIHtcbiAgICAgIGlmIChjaGFuZ2VzWyd1cmwnXSkge1xuICAgICAgICAgdGhpcy5mb3JtYXR0ZWRVcmwgPSB0aGlzLmZvcm1hdFVybCh0aGlzLnVybCk7XG4gICAgICB9XG4gICAgICBpZiAoY2hhbmdlc1snZGVzY3JpcHRpb24nXSAmJiB0aGlzLmRlc2NyaXB0aW9uPy5sZW5ndGgpIHtcbiAgICAgICAgIHRoaXMuZm9ybWF0dGVkRGVzY3JpcHRpb24gPSB0aGlzLnRydW5jYXRlU3RyaW5nKHRoaXMuZGVzY3JpcHRpb24sIDE1NSk7XG4gICAgICB9XG4gICAgICBpZiAoY2hhbmdlc1sndGl0bGUnXSAmJiB0aGlzLnRpdGxlPy5sZW5ndGgpIHtcbiAgICAgICAgIHRoaXMuZm9ybWF0dGVkVGl0bGUgPSB0aGlzLnRydW5jYXRlU3RyaW5nKHRoaXMudGl0bGUsIDYwKTtcbiAgICAgIH1cbiAgIH1cblxuICAgbmdPbkRlc3Ryb3koKTogdm9pZCB7fVxuXG4gICBwcml2YXRlIGZvcm1hdFVybCh1cmw6IHN0cmluZyk6IHN0cmluZyB7XG4gICAgICByZXR1cm4gJ2h0dHBzOi8vJyArIHVybC5yZXBsYWNlKC9odHRwcz86XFwvXFwvLywgJycpLnJlcGxhY2UoL1xcLy9nLCAnIOKAuiAnKTtcbiAgIH1cblxuICAgLyoqXG4gICAgKiBUcnVuY2F0ZSBTdHJpbmdcbiAgICAqL1xuICAgcHJpdmF0ZSB0cnVuY2F0ZVN0cmluZyhpbnB1dFN0cjogc3RyaW5nLCBtYXhMZW5ndGg6IG51bWJlcik6IHN0cmluZyB7XG4gICAgICBjb25zdCB3b3JkcyA9IGlucHV0U3RyLnNwbGl0KCcgJyk7XG4gICAgICBsZXQgc3RyID0gJyc7XG4gICAgICBmb3IgKGxldCBpID0gMDsgaSA8IHdvcmRzLmxlbmd0aDsgaSsrKSB7XG4gICAgICAgICBjb25zdCB3b3JkID0gd29yZHNbaV07XG4gICAgICAgICBpZiAoc3RyLmxlbmd0aCArIHdvcmQubGVuZ3RoID4gbWF4TGVuZ3RoKSB7XG4gICAgICAgICAgICBzdHIgKz0gJyAuLi4nO1xuICAgICAgICAgICAgYnJlYWs7XG4gICAgICAgICB9IGVsc2Uge1xuICAgICAgICAgICAgc3RyICs9ICcgJyArIHdvcmQ7XG4gICAgICAgICB9XG4gICAgICB9XG4gICAgICBzdHIgPSBzdHIudHJpbSgpO1xuXG4gICAgICByZXR1cm4gc3RyO1xuICAgfVxufVxuIiwiPGRpdiBjbGFzcz1cIm5neC1zZXJwLWdvb2dsZV9faGVhZGVyXCI+XG4gICA8ZGl2IGNsYXNzPVwiXCI+XG4gICAgICA8ZGl2IGNsYXNzPVwibmd4LXNlcnAtZ29vZ2xlX19oZWFkZXItaWNvblwiPlxuICAgICAgICAgPG5nLWNvbnRhaW5lciAqbmdJZj1cImZhdmljb25Vcmw7IGVsc2UgbWRJY29uXCI+XG4gICAgICAgICAgICA8aW1nIFtzcmNdPVwiZmF2aWNvblVybFwiIGZpbGw+XG4gICAgICAgICA8L25nLWNvbnRhaW5lcj5cbiAgICAgICAgIDxuZy10ZW1wbGF0ZSAjbWRJY29uPlxuICAgICAgICAgICAgPG1kLWljb24gW2ljb25dPVwic2l0ZUljb25cIj48L21kLWljb24+XG4gICAgICAgICA8L25nLXRlbXBsYXRlPlxuICAgICAgPC9kaXY+XG4gICA8L2Rpdj5cbiAgIDxkaXYgY2xhc3M9XCJcIj5cbiAgICAgIDxkaXYgY2xhc3M9XCJuZ3gtc2VycC1nb29nbGVfX2hlYWRlci10aXRsZVwiPnt7IHNpdGVOYW1lIH19PC9kaXY+XG4gICAgICA8ZGl2IGNsYXNzPVwibmd4LXNlcnAtZ29vZ2xlX19oZWFkZXItdXJsXCI+XG4gICAgICAgICB7eyBmb3JtYXR0ZWRVcmwgfX1cbiAgICAgIDwvZGl2PlxuICAgPC9kaXY+XG4gICA8ZGl2IGNsYXNzPVwibmd4LXNlcnAtZ29vZ2xlX19oZWFkZXItbWVudVwiPlxuICAgICAgPG1kLWljb24gW2ljb25dPVwibWVudUljb25cIiBtaWRkbGU+PC9tZC1pY29uPlxuICAgPC9kaXY+XG48L2Rpdj5cbjxkaXYgY2xhc3M9XCJuZ3gtc2VycC1nb29nbGVfX3RpdGxlXCI+e3sgZm9ybWF0dGVkVGl0bGUgfX08L2Rpdj5cbjxkaXYgY2xhc3M9XCJuZ3gtc2VycC1nb29nbGVfX2Rlc2NyaXB0aW9uXCI+e3sgZm9ybWF0dGVkRGVzY3JpcHRpb24gfX08L2Rpdj5cbiJdfQ==