chore: 🤖 add back the transformer

Author: shaharkazaz

.github/workflows/ci.yml

@@ -11,7 +11,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        target: ['ci:build', 'ci:test', 'ci:lint', 'ci:e2e', 'build docs']
+        target: ['ci:build', 'ci:test', 'ci:lint', 'ci:e2e']
     runs-on: ubuntu-latest
     name: ${{ matrix.target }}
     steps:

.github/workflows/deploy-demo-app.yml

@@ -1,5 +1,5 @@
 # Simple workflow for deploying static content to GitHub Pages
-name: Deploy static content to Pages
+name: Deploy playground to Pages
 
 on:
   # Runs on pushes targeting the default branch
@@ -34,19 +34,19 @@ jobs:
 
       - name: Setup
         uses: ./.github/actions/step-setup
-        
+
       - name: Setup Pages
         uses: actions/configure-pages@v5
 
       - name: Build playground
-        run: npm run build:playground
-        
+        run: ORIGIN='https://jsverse.github.io/transloco/' npm run build:playground
+
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v3
         with:
           # Upload entire repository
           path: 'dist/apps/transloco-playground'
-          
+
       - name: Deploy to GitHub Pages
         id: deployment
         uses: actions/deploy-pages@v4

apps/transloco-playground/index-html-transform.ts

@@ -0,0 +1,13 @@
+import { Target } from '@angular-devkit/architect';
+import * as cheerio from 'cheerio';
+
+export default (_: Target, indexHtml: string) => {
+  if (!process.env.ORIGIN) {
+    return indexHtml;
+  }
+
+  const $ = cheerio.load(indexHtml);
+  $('base').attr('href', process.env.ORIGIN);
+
+  return $.html();
+};

apps/transloco-playground/project.json

@@ -6,7 +6,7 @@
   "prefix": "transloco-nx-shell",
   "targets": {
     "build": {
-      "executor": "@nx/angular:browser-esbuild",
+      "executor": "@nx/angular:webpack-browser",
       "outputs": ["{options.outputPath}"],
       "options": {
         "outputPath": "dist/apps/transloco-playground",
@@ -36,6 +36,16 @@
           ],
           "outputHashing": "all"
         },
+        "docs": {
+          "fileReplacements": [
+            {
+              "replace": "apps/transloco-playground/src/environments/environment.ts",
+              "with": "apps/transloco-playground/src/environments/environment.docs.ts"
+            }
+          ],
+          "indexHtmlTransformer": "apps/transloco-playground/index-html-transform.ts",
+          "outputHashing": "all"
+        },
         "development": {
           "buildOptimizer": false,
           "optimization": false,

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

@@ -0,0 +1,16 @@
+import { Directive, ElementRef, inject, input, OnInit } from '@angular/core';
+
+import { environment } from '../environments/environment';
+
+@Directive({
+  selector: 'img[appSrc]',
+  standalone: true,
+})
+export class AppSrcDirective implements OnInit {
+  host = inject(ElementRef).nativeElement as HTMLImageElement;
+  appSrc = input<string>();
+
+  ngOnInit() {
+    this.host.src = `${environment.baseUrl}${this.appSrc()}`;
+  }
+}

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

@@ -5,7 +5,7 @@
       target="_blank"
       href="https://jsverse.gitbook.io/transloco/"
     >
-      <img height="50px" src="/assets/images/logo.svg" />
+      <img height="50px" appSrc="assets/images/logo.svg" />
     </a>
     <button
       class="navbar-toggler"

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

@@ -5,18 +5,17 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 import { LangDefinition, TranslocoService } from '@jsverse/transloco';
 
-import { environment } from '../environments/environment';
+import { AppSrcDirective } from './app-src.directive';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
   standalone: true,
-  imports: [RouterModule],
+  imports: [RouterModule, AppSrcDirective],
 })
 export class AppComponent {
   private destroyRef = inject(DestroyRef);
-  isDocs = environment.isDocs;
   service = inject(TranslocoService);
   availableLangs = this.service.getAvailableLangs() as LangDefinition[];
 

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

@@ -13,7 +13,6 @@ import { environment } from '../../environments/environment';
   imports: [TranslocoModule],
 })
 export class HomeComponent {
-  isDocs = environment.isDocs;
   dynamic = '🦄';
   key = 'home';
 

apps/transloco-playground/src/environments/environment.docs.ts

@@ -0,0 +1,4 @@
+export const environment = {
+  production: true,
+  baseUrl: `/transloco`,
+};

apps/transloco-playground/src/environments/environment.prod.ts

@@ -1,5 +1,4 @@
 export const environment = {
   production: true,
   baseUrl: '',
-  isDocs: false,
 };

apps/transloco-playground/src/environments/environment.ts

@@ -5,7 +5,6 @@
 export const environment = {
   production: false,
   baseUrl: '',
-  isDocs: false,
 };
 
 /*

apps/transloco-playground/src/index.html

@@ -6,7 +6,7 @@
     <base href="/" />
 
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+    <link rel="icon" href="assets/images/logo.svg" />
     <link
       href="https://fonts.googleapis.com/css?family=Roboto&display=swap"
       rel="stylesheet"