feat(addon-doc): full prerender page for ssr and improve SEO

taiga-family · Sep 18, 2024 · e367b1e · e367b1e
1 parent e7642cb
commit e367b1e
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 56 deletions.
diff --git a/projects/addon-doc/components/example/example.component.ts b/projects/addon-doc/components/example/example.component.ts
@@ -12,8 +12,8 @@ import {
 } from '@taiga-ui/addon-doc/tokens';
 import type {TuiRawLoaderContent} from '@taiga-ui/addon-doc/types';
 import {tuiRawLoadRecord} from '@taiga-ui/addon-doc/utils';
+import {TuiLet} from '@taiga-ui/cdk/directives/let';
 import {TuiMapperPipe} from '@taiga-ui/cdk/pipes/mapper';
-import {TUI_IS_E2E} from '@taiga-ui/cdk/tokens';
 import type {TuiContext} from '@taiga-ui/cdk/types';
 import {TuiAlertService} from '@taiga-ui/core/components/alert';
 import {TuiButton} from '@taiga-ui/core/components/button';
@@ -49,6 +49,7 @@ import {TuiDocExampleGetTabsPipe} from './example-get-tabs.pipe';
         TuiButton,
         TuiDocCode,
         TuiDocExampleGetTabsPipe,
+        TuiLet,
         TuiLink,
         TuiLoader,
         TuiMapperPipe,
@@ -81,7 +82,6 @@ export class TuiDocExample {
     protected readonly options = inject(TUI_DOC_EXAMPLE_OPTIONS);
     protected readonly texts = inject(TUI_DOC_EXAMPLE_TEXTS);
     protected readonly codeEditor = inject(TUI_DOC_CODE_EDITOR, {optional: true});
-    protected readonly isE2E = inject(TUI_IS_E2E);
     protected readonly codeActions =
         inject<ReadonlyArray<PolymorpheusContent<TuiContext<string>>>>(
             TUI_DOC_CODE_ACTIONS,

diff --git a/projects/addon-doc/components/example/example.style.less b/projects/addon-doc/components/example/example.style.less
@@ -112,23 +112,6 @@
     }
 }
 
-.t-content {
-    will-change: opacity;
-    block-size: 0;
-    visibility: hidden;
-    opacity: 0;
-}
-
-.t-content_animated {
-    transition: opacity 300ms ease-in-out;
-}
-
-.t-content_visible {
-    block-size: auto;
-    visibility: visible;
-    opacity: 1;
-}
-
 tui-doc-code {
     overflow: hidden;
 }
diff --git a/projects/addon-doc/components/example/example.template.html b/projects/addon-doc/components/example/example.template.html
@@ -88,44 +88,30 @@
         <div
             *ngFor="let tab of tabs; let index = index"
             class="t-content"
-            [class.t-content_animated]="!isE2E"
-            [class.t-content_visible]="activeItemIndex === index"
         >
-            <ng-container
-                *ngIf="index === defaultTabIndex; else anotherTab"
-                [ngTemplateOutlet]="preview"
-            />
-            <ng-template #anotherTab>
-                <ng-container
-                    [ngTemplateOutlet]="codeSection"
-                    [ngTemplateOutletContext]="{$implicit: files?.[tabs?.[activeItemIndex] || 0] || ''}"
-                />
-            </ng-template>
+            <div
+                *ngIf="index === defaultTabIndex"
+                automation-id="tui-doc-example"
+                class="t-demo"
+                [style.display]="activeItemIndex === index && index === defaultTabIndex ? 'block' : 'none'"
+            >
+                <ng-content />
+                <ng-container *polymorpheusOutlet="lazyComponent$ | async as text">
+                    {{ text }}
+                </ng-container>
+            </div>
+
+            <tui-doc-code
+                *tuiLet="files?.[tabs?.[index] || 0] || '' as code"
+                [code]="code"
+                [style.display]="activeItemIndex === index && index !== defaultTabIndex ? 'block' : 'none'"
+            >
+                <ng-container *ngFor="let action of codeActions">
+                    <ng-container *polymorpheusOutlet="action as text; context: {$implicit: code}">
+                        {{ text }}
+                    </ng-container>
+                </ng-container>
+            </tui-doc-code>
         </div>
     </ng-container>
 </div>
-
-<ng-template #preview>
-    <div
-        automation-id="tui-doc-example"
-        class="t-demo"
-    >
-        <ng-content />
-        <ng-container *polymorpheusOutlet="lazyComponent$ | async as text">
-            {{ text }}
-        </ng-container>
-    </div>
-</ng-template>
-
-<ng-template
-    #codeSection
-    let-code
->
-    <tui-doc-code [code]="code">
-        <ng-container *ngFor="let action of codeActions">
-            <ng-container *polymorpheusOutlet="action as text; context: {$implicit: code}">
-                {{ text }}
-            </ng-container>
-        </ng-container>
-    </tui-doc-code>
-</ng-template>