docs: ✏️ Update the playground

apps/transloco-playground/src/app/app.component.html

@@ -1,13 +1,11 @@
-<nav class="navbar navbar-expand-lg navbar-light bg-light">
+<nav class="flex w-full px-4 navbar navbar-expand-lg navbar-light bg-light">
   <div>
     <a
       class="navbar-brand"
       target="_blank"
-      href="https://github.com/jsverse/transloco"
+      href="https://jsverse.gitbook.io/transloco/"
     >
-      @if (!isDocs) {
-        <img height="50px" src="/assets/images/logo.svg" />
-      }
+      <img height="50px" src="/assets/images/logo.svg" />
     </a>
     <button
       class="navbar-toggler"
@@ -21,11 +19,7 @@
     </button>
   </div>
 
-  <div
-    id="navbarSupportedContent"
-    style="padding-right: 180px"
-    class="collapse navbar-collapse"
-  >
+  <div id="navbarSupportedContent" class="flex-1 collapse navbar-collapse">
     <ul class="navbar-nav mr-auto">
       <li class="nav-item" routerLinkActive="active">
         <a
@@ -94,13 +88,15 @@
     </ul>
   </div>
 
-  <div class="lang-btns">
+  <div class="flex gap-2">
+    <a href="https://jsverse.gitbook.io/transloco/" class="inline-block btn"
+      >📖</a
+    >
     @for (lang of availableLangs; track lang; let last = $last) {
       <button
         class="btn my-2 my-sm-0"
         [attr.data-cy]="lang.id"
         (click)="changeLang(lang.id)"
-        [class.mr-10]="!last"
         [class.btn-primary]="activeLang === lang.id"
         [class.btn-secondary]="activeLang !== lang.id"
       >
@@ -110,6 +106,6 @@
   </div>
 </nav>
 
-<div class="container">
+<main class="p-4">
   <router-outlet />
-</div>
+</main>

apps/transloco-playground/src/app/app.component.scss

@@ -4,19 +4,9 @@
 
 .navbar {
   box-shadow: 0 0 2px;
-  position: fixed;
-  top: 0;
-  width: 100%;
-  z-index: 1;
-  padding-inline: 1rem;
   height: 66px;
 }
 
-.container {
-  margin-top: 130px;
-  z-index: 0;
-}
-
 .btn:focus {
   box-shadow: none !important;
 }
@@ -37,12 +27,7 @@
   border-color: #cd298d;
 }
 
-.lang-btns {
-  right: 10px;
-  top: 15px;
-  position: fixed;
-}
-
-.mr-10 {
-  margin-right: 10px;
+main {
+  height: calc(100vh - 66px);
+  overflow: auto;
 }

apps/transloco-playground/src/app/app.routes.ts

@@ -5,7 +5,7 @@ import { INLINE_LOADERS_ROUTES } from './inline-loaders/inline-loaders.routes';
 import { LAZY_MULTIPLE_SCOPES_ROUTES } from './lazy-multiple-scopes/lazy-multiple-scopes.routes';
 import { LAZY_SCOPE_ALIAS_ROUTES } from './lazy-scope-alias/lazy-scope-alias.routes';
 import { LAZY_ROUTES } from './lazy/lazy.routes';
-import { OnPushComponent } from './on-push/on-push.component';
+import { HomeComponent } from './home/home.component';
 import { SCOPE_SHARING_ROUTES } from './scope-sharing/scope-sharing.routes';
 import { TRANSPILERS_ROUTES } from './transpilers/transpilers.routes';
 import { MULTI_LANGS_ROUTES } from './multi-langs/multi-langs.routes';
@@ -19,7 +19,7 @@ export const ROUTES: Routes = [
   },
   {
     path: 'home',
-    component: OnPushComponent,
+    component: HomeComponent,
   },
   LAZY_ROUTES,
   TRANSPILERS_ROUTES,

apps/transloco-playground/src/app/home/home.component.html

@@ -0,0 +1,122 @@
+<h6 class="mb-6"></h6>
+
+<div class="text-center mb-4">
+  <h1>Welcome to the Transloco Playground</h1>
+  <a href="https://jsverse.gitbook.io/transloco/" class="btn btn-primary"
+    >📖 Read the docs</a
+  >
+</div>
+
+<div class="flex justify-around">
+  <div class="info-container">
+    <h4>🎉 Explore Transloco's Capabilities!</h4>
+    <p>
+      This playground serves as a showcase of Transloco's powerful features and
+      flexibility. Dive into real-world examples and see how it can elevate your
+      localization workflows.
+    </p>
+  </div>
+
+  <div class="info-container">
+    <h4>📚 Looking for More?</h4>
+    <p>
+      For detailed guides, advanced topics, and setup instructions, head over to
+      the
+      <a href="https://jsverse.gitbook.io/transloco/"
+        >official Transloco documentation</a
+      >.
+    </p>
+  </div>
+
+  <div class="info-container">
+    <h4>🤿 Dive into the implementation</h4>
+    <p>
+      You can find the source code for this app in the
+      <a
+        target="_blank"
+        href="https://github.com/jsverse/transloco/tree/master/apps/transloco-playground"
+        >transloco repo</a
+      >.
+    </p>
+  </div>
+</div>
+
+<div class="flex justify-around flex-wrap gap-2">
+  <div>
+    <h3 class="mb-6">Structural Directive</h3>
+    <ul class="list-group structural">
+      <ng-container *transloco="let t; currentLang as currentLang">
+        <li class="list-group-item" data-cy="regular">
+          <b>Regular: </b>{{ t('home') }}
+        </li>
+        <li class="list-group-item" data-cy="with-params">
+          <b>With params: </b>{{ t('alert', { value: dynamic }) }}
+        </li>
+        <li class="list-group-item" data-cy="with-translation-reuse">
+          <b>With translation reuse: </b> {{ t('a.b.c') }}
+        </li>
+        <ng-container *transloco="let staticT; lang: 'en|static'">
+          <li class="list-group-item" data-cy="static-lang-en">
+            <b>Static lang 'en': </b> {{ staticT('home') }}
+          </li>
+        </ng-container>
+        <li class="list-group-item" data-cy="current-lang">
+          <b>Current Lang: </b>{{ currentLang }}
+        </li>
+      </ng-container>
+    </ul>
+  </div>
+  <div>
+    <h3 class="my-6">Directive</h3>
+    <ul class="list-group">
+      <li class="list-group-item" data-cy="d-regular">
+        <b>Regular: </b><span transloco="home"></span>
+      </li>
+      <li
+        class="list-group-item"
+        (click)="changeParam()"
+        data-cy="d-with-params"
+      >
+        <b>(click) With params: </b
+        ><span transloco="alert" [translocoParams]="{ value: dynamic }"></span>
+      </li>
+      <li class="list-group-item" data-cy="d-with-translation-reuse">
+        <b>With translation reuse: </b> <span transloco="a.b.c"></span>
+      </li>
+      <li class="list-group-item" (click)="changeKey()" data-cy="d-dynamic-key">
+        (click) <b>Dynamic key: </b> <span [transloco]="key"></span>
+      </li>
+      <li class="list-group-item" data-cy="d-static-lang-es">
+        <b>Static lang 'es': </b
+        ><span transloco="home" translocoLang="es|static"></span>
+      </li>
+    </ul>
+  </div>
+  <div>
+    <h3 class="my-6">Pipe</h3>
+    <ul class="list-group pipe">
+      <li class="list-group-item" data-cy="p-regular">
+        <b>Regular: </b>{{ 'home' | transloco }}
+      </li>
+      <li class="list-group-item" data-cy="p-with-params">
+        <b>With params: </b>{{ 'alert' | transloco: { value: dynamic } }}
+      </li>
+      <li class="list-group-item" data-cy="p-with-translation-reuse">
+        <b>With translation reuse: </b> {{ 'a.b.c' | transloco }}
+      </li>
+      <li class="list-group-item" data-cy="p-static-lang-en">
+        <b>Static lang 'en': </b>{{ 'home' | transloco: {} : 'en|static' }}
+      </li>
+    </ul>
+  </div>
+  <div>
+    <h3 class="my-6">Translation in {{ '@for' }}</h3>
+    <ul class="list-group">
+      @for (key of translateList; track key) {
+        <li class="list-group-item" data-cy="translation-loop">
+          {{ key | transloco }}
+        </li>
+      }
+    </ul>
+  </div>
+</div>

apps/transloco-playground/src/app/home/home.component.scss

@@ -0,0 +1,15 @@
+.info-container {
+  flex-basis: 28%;
+}
+
+.justify-around {
+  justify-content: space-around;
+}
+
+.flex-wrap {
+  flex-wrap: wrap;
+}
+
+.mb-4 {
+  margin-bottom: 16px;
+}

apps/transloco-playground/src/app/on-push/on-push.component.spec.ts → apps/transloco-playground/src/app/home/home.component.spec.ts

@@ -4,12 +4,12 @@ import { TranslocoService } from '@jsverse/transloco';
 
 import { getTranslocoModule } from '../transloco-testing.module';
 
-import { OnPushComponent } from './on-push.component';
+import { HomeComponent } from './home.component';
 
 describe('OnPushComponent', () => {
-  let spectator: Spectator<OnPushComponent>;
+  let spectator: Spectator<HomeComponent>;
   const createComponent = createComponentFactory({
-    component: OnPushComponent,
+    component: HomeComponent,
     imports: [
       getTranslocoModule({
         translocoConfig: { reRenderOnLangChange: true },

apps/transloco-playground/src/app/on-push/on-push.component.ts → apps/transloco-playground/src/app/home/home.component.ts

@@ -5,14 +5,14 @@ import { TranslocoModule } from '@jsverse/transloco';
 import { environment } from '../../environments/environment';
 
 @Component({
-  selector: 'app-on-push',
-  templateUrl: './on-push.component.html',
-  styleUrls: ['./on-push.component.scss'],
+  selector: 'app-home',
+  templateUrl: './home.component.html',
+  styleUrls: ['./home.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [TranslocoModule],
 })
-export class OnPushComponent {
+export class HomeComponent {
   isDocs = environment.isDocs;
   dynamic = '🦄';
   key = 'home';

apps/transloco-playground/src/app/locale/locale.component.html

@@ -19,7 +19,7 @@ <h5>Select any locale from the list to see his format:</h5>
   }
 </select>
 
-<h3 class="mtb">Date Format</h3>
+<h3 class="my-6">Date Format</h3>
 
 <ul class="list-group">
   <li class="list-group-item" data-cy="date-regular">
@@ -49,7 +49,7 @@ <h3 class="mtb">Date Format</h3>
   </li>
 </ul>
 
-<h3 class="mtb">Number Format</h3>
+<h3 class="my-6">Number Format</h3>
 <ul class="list-group">
   <li class="list-group-item" data-cy="number-decimal">
     <b>Decimal number: </b>{{ 1234567890 | translocoDecimal }}
@@ -69,7 +69,7 @@ <h3 class="mtb">Number Format</h3>
   </li>
 </ul>
 
-<h3 class="mtb">Currency Format</h3>
+<h3 class="my-6">Currency Format</h3>
 <ul class="list-group">
   <li class="list-group-item" data-cy="currency-symbol-only">
     <b>Symbol: </b>{{ currencySymbol }}