chore(demo): add external stackblitz playground (#9084)

projects/demo/src/environments/environment.prod.ts

@@ -1,4 +1,6 @@
 export const environment = {
     production: true,
     ym: 87890624,
+    playground:
+        'https://stackblitz.com/~/github.com/taiga-family/taiga-playground?file=src/app/app.component.html',
 };

projects/demo/src/modules/app/app.component.ts

@@ -3,6 +3,7 @@ import {Component, DestroyRef, inject, ViewEncapsulation} from '@angular/core';
 import {takeUntilDestroyed} 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';
@@ -61,6 +62,7 @@ export class App extends AbstractDemo implements OnInit {
     protected readonly router = inject(Router);
     protected readonly storage = inject(WA_LOCAL_STORAGE);
     protected readonly routes = DemoRoute;
+    protected readonly playground = environment.playground;
 
     protected readonly isLanding$ = this.router.events.pipe(
         filter((event) => event instanceof NavigationEnd),

projects/demo/src/modules/app/app.template.html

@@ -107,10 +107,12 @@
             <a
                 appearance="icon"
                 iconStart="assets/icons/stackblitz.svg"
+                rel="noreferrer"
+                target="_blank"
                 title="Taiga UI StackBlitz Starter"
                 tuiLink
                 class="app-link"
-                [routerLink]="routes.StackblitzStarter"
+                [href]="playground"
             ></a>
         </div>
         <div

projects/demo/src/modules/app/stackblitz/stackblitz.service.ts

@@ -5,9 +5,9 @@ import type {TuiCodeEditor} from '@taiga-ui/addon-doc';
 import {PolymorpheusComponent} from '@taiga-ui/polymorpheus';
 
 import {TsFileComponentParser} from '../classes';
+import {StackblitzEditButton} from './edit';
 import {StackblitzDepsService} from './stackblitz-deps.service';
 import {AbstractTuiStackblitzResourcesLoader} from './stackblitz-resources-loader';
-import {StackblitzEditButton} from './starter/stackblitz-edit';
 import {appPrefix, getSupportFiles, prepareLess, prepareSupportFiles} from './utils';
 
 const APP_COMP_META = {

projects/demo/src/modules/app/stackblitz/starter/index.ts

@@ -1,56 +1,17 @@
-import {isPlatformBrowser} from '@angular/common';
-import type {OnInit} from '@angular/core';
-import {ChangeDetectionStrategy, Component, inject, PLATFORM_ID} from '@angular/core';
-import {TuiDemo} from '@demo/utils';
-import {tuiRawLoad, tuiTryParseMarkdownCodeBlock} from '@taiga-ui/addon-doc';
+import {ChangeDetectionStrategy, Component, inject} from '@angular/core';
+import {environment} from '@demo/environments/environment';
+import {WA_WINDOW} from '@ng-web-apis/common';
 import {TuiLoader} from '@taiga-ui/core';
 
-import {TuiStackblitzService} from '../stackblitz.service';
-import {appPrefix} from '../utils';
-
 @Component({
     standalone: true,
-    imports: [TuiDemo, TuiLoader],
+    imports: [TuiLoader],
     templateUrl: './index.html',
     styleUrls: ['./index.less'],
     changeDetection: ChangeDetectionStrategy.OnPush,
-    providers: [TuiStackblitzService],
 })
-export default class Page implements OnInit {
-    private readonly isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
-    private readonly stackblitz = inject(TuiStackblitzService);
-
-    public async ngOnInit(): Promise<void> {
-        if (this.isBrowser) {
-            await this.openStackblitz();
-        }
-    }
-
-    protected async openStackblitz(): Promise<void> {
-        const [appTemplate, appComponent] = await Promise.all(
-            [
-                import('./files/app.template.html.md?raw'),
-                import('./files/app.component.ts.md?raw'),
-            ].map(tuiRawLoad),
-        ).then((markdowns) => markdowns.map((md) => tuiTryParseMarkdownCodeBlock(md)[0]));
-
-        return this.stackblitz.openStarter(
-            {
-                title: 'Taiga UI Starter',
-                description:
-                    'A starter with Taiga UI library\nDocumentation: https://taiga-ui.dev',
-                files: {
-                    [appPrefix`app.template.html`]: appTemplate ?? '',
-                    [appPrefix`app.component.ts`]: appComponent ?? '',
-                    [appPrefix`app.style.less`]:
-                        "@import '@taiga-ui/core/styles/taiga-ui-local.less';",
-                },
-            },
-            {
-                newWindow: false,
-                openFile: appPrefix`app.template.html`,
-                hideExplorer: true,
-            },
-        );
+export default class Page {
+    constructor() {
+        inject(WA_WINDOW).location.replace(environment.playground);
     }
 }