chore(demo): show github star in runtime

taiga-family · Oct 13, 2024 · b9c65d7 · b9c65d7
1 parent 9c91f0f
commit b9c65d7
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 12 deletions.
diff --git a/projects/demo/src/environments/environment.prod.ts b/projects/demo/src/environments/environment.prod.ts
@@ -1,4 +1,5 @@
 export const environment = {
+    github: 'https://api.github.com/repos/taiga-family/taiga-ui',
     production: true,
     ym: 87890624,
 };
diff --git a/projects/demo/src/modules/app/app.component.ts b/projects/demo/src/modules/app/app.component.ts
@@ -1,13 +1,22 @@
+import {HttpClient, HttpClientModule} from '@angular/common/http';
 import type {OnInit} from '@angular/core';
-import {Component, DestroyRef, inject, ViewEncapsulation} from '@angular/core';
+import {Component, DestroyRef, inject, signal, ViewEncapsulation} from '@angular/core';
 import {takeUntilDestroyed, toSignal} from '@angular/core/rxjs-interop';
 import {NavigationEnd, Router} from '@angular/router';
 import {changeDetection} from '@demo/emulate/change-detection';
+import {environment} from '@demo/environments/environment';
 import {DemoRoute} from '@demo/routes';
 import {TuiDemo} from '@demo/utils';
 import {WA_LOCAL_STORAGE} from '@ng-web-apis/common';
 import {ResizeObserverService} from '@ng-web-apis/resize-observer';
-import {TuiButton, TuiDataList, TuiDropdown} from '@taiga-ui/core';
+import {
+    TuiButton,
+    TuiDataList,
+    TuiDropdown,
+    tuiFormatNumber,
+    TuiIcon,
+} from '@taiga-ui/core';
+import {TuiBadge, TuiBadgedContent} from '@taiga-ui/kit';
 import {TuiSheetModule, TuiTextfieldControllerModule} from '@taiga-ui/legacy';
 import {distinctUntilChanged, filter, map, startWith} from 'rxjs';
 
@@ -23,11 +32,15 @@ import {TUI_VERSION_MANAGER_PROVIDERS} from './version-manager/version-manager.p
     selector: 'app',
     imports: [
         CustomHost,
+        HttpClientModule,
         TuiAlgoliaSearch,
+        TuiBadge,
+        TuiBadgedContent,
         TuiButton,
         TuiDataList,
         TuiDemo,
         TuiDropdown,
+        TuiIcon,
         TuiSheetModule,
         TuiTextfieldControllerModule,
         VersionManager,
@@ -55,10 +68,12 @@ import {TUI_VERSION_MANAGER_PROVIDERS} from './version-manager/version-manager.p
 })
 export class App extends AbstractDemo implements OnInit {
     private readonly destroyRef = inject(DestroyRef);
+    private readonly http = inject(HttpClient);
     private readonly ym = inject(YaMetrikaService);
     protected readonly router = inject(Router);
     protected readonly storage = inject(WA_LOCAL_STORAGE);
     protected readonly routes = DemoRoute;
+    protected readonly stars = signal('');
 
     protected readonly isLanding = toSignal(
         this.router.events.pipe(
@@ -73,6 +88,13 @@ export class App extends AbstractDemo implements OnInit {
     public override async ngOnInit(): Promise<void> {
         await super.ngOnInit();
         this.enableYandexMetrika();
+
+        this.http
+            .get<Record<string, any>>(environment.github)
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((response) =>
+                this.stars.set(tuiFormatNumber(response['stargazers_count'])),
+            );
     }
 
     private enableYandexMetrika(): void {

diff --git a/projects/demo/src/modules/app/app.template.html b/projects/demo/src/modules/app/app.template.html
@@ -71,16 +71,37 @@
                 </ng-template>
             </button>
 
-            <a
-                appearance="icon"
-                href="https://github.com/taiga-family/taiga-ui"
-                iconStart="assets/images/github.svg"
-                rel="noreferrer"
-                target="_blank"
-                title="Taiga UI source code on GitHub"
-                tuiLink
-                class="app-link"
-            ></a>
+            <tui-badged-content>
+                <tui-icon
+                    appearance="flat"
+                    icon="@tui.star"
+                    size="s"
+                    style="color: orange"
+                    tuiBadge
+                    tuiSlot="bottom"
+                />
+
+                <a
+                    href="https://github.com/taiga-family/taiga-ui"
+                    rel="noreferrer"
+                    target="_blank"
+                    title="Taiga UI source code on GitHub"
+                >
+                    <button
+                        appearance="whiteblock"
+                        size="s"
+                        tuiButton
+                        type="button"
+                        class="app-link"
+                    >
+                        <tui-icon
+                            icon="@tui.github"
+                            [style.height.rem]="1"
+                        />
+                        {{ stars() }}
+                    </button>
+                </a>
+            </tui-badged-content>
 
             <a
                 appearance="icon"