chore(demo): show github star in runtime

taiga-family · Oct 14, 2024 · d7bc432 · d7bc432
1 parent 9c91f0f
commit d7bc432
Show file tree

Hide file tree

Showing 5 changed files with 71 additions and 14 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,24 @@
+import {isPlatformServer} from '@angular/common';
+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,
+    PLATFORM_ID,
+    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, 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 +34,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,
@@ -54,11 +69,14 @@ import {TUI_VERSION_MANAGER_PROVIDERS} from './version-manager/version-manager.p
     ],
 })
 export class App extends AbstractDemo implements OnInit {
+    private readonly isServer = isPlatformServer(inject(PLATFORM_ID));
     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 +91,21 @@ export class App extends AbstractDemo implements OnInit {
     public override async ngOnInit(): Promise<void> {
         await super.ngOnInit();
         this.enableYandexMetrika();
+
+        if (this.isServer) {
+            return;
+        }
+
+        this.http
+            .get<Record<string, any>>(environment.github)
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((response) =>
+                this.stars.set(
+                    Intl.NumberFormat('en', {notation: 'compact'}).format(
+                        response['stargazers_count'],
+                    ),
+                ),
+            );
     }
 
     private enableYandexMetrika(): void {

diff --git a/projects/demo/src/modules/app/app.style.less b/projects/demo/src/modules/app/app.style.less
@@ -33,7 +33,8 @@ app {
 }
 
 @media @tui-mobile {
-    .app-link {
+    // Increasing specificity
+    .app-link.app-link {
         display: none;
     }
 

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 class="app-link">
+                <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"

diff --git a/projects/demo/used-icons.ts b/projects/demo/used-icons.ts
@@ -10,6 +10,8 @@ export const TUI_USED_ICONS = [
     '@tui.settings',
     '@tui.chevron-down',
     '@tui.ellipsis',
+    '@tui.star',
+    '@tui.github',
     '@tui.calendar',
     '@tui.visa-mono',
     '@tui.mastercard-mono',
@@ -19,7 +21,6 @@ export const TUI_USED_ICONS = [
     '@tui.trash',
     '@tui.layout-grid',
     '@tui.x',
-    '@tui.star',
     '@tui.check',
     '@tui.user',
     '@tui.chevron-left',