docs: ✏️ bundle the playground with the docs

README.md

@@ -47,7 +47,7 @@ It exposes a rich API to manage translations efficiently and cleanly. It provide
 - 🎥  Watch our instructional [video guides](https://www.youtube.com/watch?v=MYkYcafJdGw&list=PLTuTW7EgL6ouXk5BqE4zWdDJkAuC4HTWi)
 - 🚀  See it in action on [CodeSandbox](https://codesandbox.io/s/ngneat-transloco-kn52hs)
 - 😎  Use [schematics](https://ngneat.github.io/transloco/docs/schematics)
-- 👉  Checkout the [sample application](https://ngneat.github.io/transloco/sampleApp)
+- 👉  Checkout the [live application](https://ngneat.github.io/transloco/live-app)
 - 📖  Read the blog [posts](https://ngneat.github.io/transloco/docs/blog-posts)
 - 🍄  Join Transloco's [Gitter](https://gitter.im/ngneat-transloco/lobby?source=orgpage) room
 - ❓  Find answers in our [FAQ](https://ngneat.github.io/transloco/docs/faq) section

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

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

apps/transloco-playground/project.json

@@ -6,7 +6,7 @@
   "prefix": "transloco-nx-shell",
   "targets": {
     "build": {
-      "executor": "@angular-devkit/build-angular:browser",
+      "executor": "@nx/angular:webpack-browser",
       "outputs": ["{options.outputPath}"],
       "options": {
         "outputPath": "dist/apps/transloco-playground",
@@ -28,24 +28,22 @@
       },
       "configurations": {
         "production": {
-          "budgets": [
-            {
-              "type": "initial",
-              "maximumWarning": "500kb",
-              "maximumError": "1mb"
-            },
+          "fileReplacements": [
             {
-              "type": "anyComponentStyle",
-              "maximumWarning": "2kb",
-              "maximumError": "4kb"
+              "replace": "apps/transloco-playground/src/environments/environment.ts",
+              "with": "apps/transloco-playground/src/environments/environment.prod.ts"
             }
           ],
+          "outputHashing": "all"
+        },
+        "docs": {
           "fileReplacements": [
             {
               "replace": "apps/transloco-playground/src/environments/environment.ts",
-              "with": "apps/transloco-playground/src/environments/environment.prod.ts"
+              "with": "apps/transloco-playground/src/environments/environment.docs.ts"
             }
           ],
+          "indexFileTransformer": "apps/transloco-playground/index-html-transform.ts",
           "outputHashing": "all"
         },
         "development": {

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

@@ -5,7 +5,7 @@
       target="_blank"
       href="https://github.com/ngneat/transloco"
     >
-      <img height="50px" src="/assets/images/logo.svg" />
+      <img *ngIf="!isDocs" height="50px" src="/assets/images/logo.svg" />
     </a>
     <button
       class="navbar-toggler"

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

@@ -8,8 +8,8 @@
   top: 0;
   width: 100%;
   z-index: 1;
-  padding-left: 1rem;
-  padding-right: 1rem;
+  padding-inline: 1rem;
+  height: 66px;
 }
 
 .container {

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

@@ -4,6 +4,7 @@ import { RouterModule } from '@angular/router';
 import { Subscription, take } from 'rxjs';
 
 import { TranslocoService, LangDefinition } from '@ngneat/transloco';
+import { environment } from '../environments/environment';
 
 @Component({
   selector: 'app-root',
@@ -13,6 +14,7 @@ import { TranslocoService, LangDefinition } from '@ngneat/transloco';
   imports: [CommonModule, RouterModule],
 })
 export class AppComponent implements OnDestroy {
+  isDocs = environment.isDocs;
   service = inject(TranslocoService);
   availableLangs = this.service.getAvailableLangs() as LangDefinition[];
   private subscription: Subscription | null;

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

@@ -1,3 +1,12 @@
+<h6 class="mb" *ngIf="isDocs">
+  You can find the source code for this app in the
+  <a
+    target="_blank"
+    href="https://github.com/ngneat/transloco/tree/master/apps/transloco-playground"
+    >transloco repo</a
+  >.
+</h6>
+
 <h3 class="mb">Structural Directive</h3>
 <ul class="list-group structural">
   <ng-container *transloco="let t; currentLang as currentLang">

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

@@ -2,6 +2,7 @@ import { CommonModule } from '@angular/common';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 
 import { TranslocoModule } from '@ngneat/transloco';
+import { environment } from '../../environments/environment';
 
 @Component({
   selector: 'app-on-push',
@@ -12,6 +13,7 @@ import { TranslocoModule } from '@ngneat/transloco';
   imports: [CommonModule, TranslocoModule],
 })
 export class OnPushComponent {
+  isDocs = environment.isDocs;
   dynamic = '🦄';
   key = 'home';
 

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

@@ -2,12 +2,15 @@ import { inject, Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 
 import { Translation, TranslocoLoader } from '@ngneat/transloco';
+import { environment } from '../environments/environment';
 
 @Injectable({ providedIn: 'root' })
 export class TranslocoHttpLoader implements TranslocoLoader {
   private http = inject(HttpClient);
 
   getTranslation(lang: string) {
-    return this.http.get<Translation>(`/assets/i18n/${lang}.json`);
+    return this.http.get<Translation>(
+      `${environment.baseUrl}/assets/i18n/${lang}.json`
+    );
   }
 }

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

@@ -0,0 +1,5 @@
+export const environment = {
+  production: true,
+  baseUrl: `${location.origin}/transloco/transloco-playground`,
+  isDocs: true,
+};

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

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

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

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

docs/.gitignore

@@ -18,3 +18,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+static/transloco-playground

docs/docusaurus.config.js

@@ -7,12 +7,15 @@ module.exports = {
   favicon: 'img/favicon.ico',
   organizationName: 'ngneat',
   projectName: 'transloco',
+  trailingSlash: false,
   themeConfig: {
     image: 'img/large-logo.png',
-    metadata: [{
-      name: 'google-site-verification',
-      content: 'zLIQAxOp2sGFy10UE51HAMtWTqg7J8z1hpTxZR9G1WA'
-    }],
+    metadata: [
+      {
+        name: 'google-site-verification',
+        content: 'zLIQAxOp2sGFy10UE51HAMtWTqg7J8z1hpTxZR9G1WA',
+      },
+    ],
     algolia: {
       appId: 'O8JZ6BVNRL',
       apiKey: '921502728c526dfe7f906bae383e64ae',
@@ -40,13 +43,13 @@ module.exports = {
           position: 'left',
         },
         {
-          to: 'sampleApp',
-          activeBasePath: 'sampleApp',
-          label: 'Sample App',
+          to: 'live-app',
+          activeBasePath: 'live-app',
+          label: 'Live App',
           position: 'left',
         },
         {
-          href: 'https://stackblitz.com/edit/ngneat-transloco',
+          href: 'https://codesandbox.io/s/ngneat-transloco-kn52hs',
           label: 'Playground',
           position: 'left',
           className: 'header-playground-link',
@@ -111,7 +114,6 @@ module.exports = {
         {
           title: 'More',
           items: [
-
             {
               label: 'GitHub',
               href: 'https://github.com/ngneat/transloco/',
@@ -160,41 +162,41 @@ module.exports = {
           {
             from: '/docs/inline-loaders',
             to: '/docs/lazy-load/inline-loaders',
-          },          
+          },
           {
             from: '/docs/scope-configuration',
             to: '/docs/lazy-load/scope-configuration',
-          },          
+          },
           {
             from: '/docs/installation',
             to: '/docs/getting-started/installation',
-          },                   
+          },
           {
             from: '/docs/config-options',
             to: '/docs/getting-started/config-options',
-          },                             
+          },
           {
             from: '/docs/plugins/preload',
             to: '/docs/plugins/preload-langs',
-          },                                       
+          },
           {
             from: '/docs/tools/comments/optimize',
             to: '/docs/tools/optimize',
-          },                                        
+          },
           {
             from: '/docs/schematics/add',
             to: '/docs/schematics/ng-add',
-          },                                          
+          },
           {
             from: '/docs/transpiler/additional-functionality',
             to: '/docs/additional-functionality',
-          },                                               
+          },
           {
             from: '/docs/plugins/persist',
             to: '/docs/plugins/persist-translations',
-          },          
+          },
         ],
-      }
-    ]
-  ]
+      },
+    ],
+  ],
 };

docs/package.json

@@ -3,11 +3,14 @@
   "version": "0.0.0",
   "private": true,
   "scripts": {
+    "prestart": "ORIGIN='http://localhost:3000' npm run build-playground",
     "start": "docusaurus start",
+    "prebuild": "ORIGIN='https://ngneat.github.io' npm run build-playground",
     "build": "docusaurus build",
     "serve": "docusaurus serve",
     "swizzle": "docusaurus swizzle",
-    "deploy": "GIT_USER=NetanelBasal USE_SSH=true docusaurus deploy"
+    "deploy": "npm run build && GIT_USER=NetanelBasal USE_SSH=true docusaurus deploy --skip-build",
+    "build-playground": "npm run build:playground-docs --prefix=../ && cp -r ../dist/apps/transloco-playground ./static"
   },
   "dependencies": {
     "@docusaurus/core": "2.4.1",

docs/src/pages/sampleApp.js → docs/src/pages/live-app.js

@@ -2,21 +2,24 @@ import React from 'react';
 import Layout from '@theme/Layout';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 
-function SampleApp() {
+export default function LiveApp() {
   const context = useDocusaurusContext();
   const { siteConfig = {} } = context;
   const iframeStyle = { width: '100%', minHeight: '80vh', marginLeft: '0' };
   return (
     <Layout
       description="Transloco the Angular translations library (i18n) sample app"
       keywords={['Angular', 'Transloco', 'i18n', 'translations', 'translate']}
-      permalink={siteConfig.baseUrl + 'sampleApp'}
+      permalink={siteConfig.baseUrl + 'live-app'}
     >
       <main>
-        <iframe src="https://transloco-playground.surge.sh" width="100%" frameBorder="0" style={iframeStyle}></iframe>
+        <iframe
+          src="transloco-playground/index.html"
+          width="100%"
+          frameBorder="0"
+          style={iframeStyle}
+        ></iframe>
       </main>
     </Layout>
   );
 }
-
-export default SampleApp;