feat: adds scully

.scully/settings.yml

@@ -0,0 +1,2 @@
+identifier: k5h0b6uac7oeibr1
+allowErrorCollect: false

apache.Dockerfile

@@ -0,0 +1,4 @@
+FROM httpd:2.4
+
+RUN sed -i '/LoadModule rewrite_module/s/^#//g' /usr/local/apache2/conf/httpd.conf
+RUN sed -i 's#AllowOverride [Nn]one#AllowOverride All#' /usr/local/apache2/conf/httpd.conf

htaccess.file

@@ -0,0 +1,5 @@
+RewriteEngine On
+
+RewriteRule ^de$ /de/home/ [L]
+RewriteRule ^en$ /en/home/ [L]
+RewriteRule !^[a-z]{2}/ /de%{REQUEST_URI} [L,R=302]

package.json

@@ -10,7 +10,9 @@
     "e2e": "ng e2e",
     "translate-en": "poedit src/locales/messages.en.xlf",
     "extract-i18n": "ng xi18n localization --output-path src/locales && xliffmerge",
-    "xliffmerge": "./node_modules/ngx-i18nsupport/dist/xliffmerge"
+    "xliffmerge": "./node_modules/ngx-i18nsupport/dist/xliffmerge",
+    "scully": "scully",
+    "scully:serve": "scully serve"
   },
   "xliffmergeOptions": {
     "srcDir": "src/locales",
@@ -31,6 +33,9 @@
     "@angular/platform-browser": "~10.0.0",
     "@angular/platform-browser-dynamic": "~10.0.0",
     "@angular/router": "~10.0.0",
+    "@scullyio/init": "^1.0.1",
+    "@scullyio/ng-lib": "^1.0.0",
+    "@scullyio/scully": "^1.0.0",
     "ngx-i18nsupport": "^0.17.1",
     "rxjs": "~6.5.5",
     "tslib": "^2.0.0",
@@ -40,9 +45,10 @@
     "@angular-devkit/build-angular": "~0.1000.0",
     "@angular/cli": "~10.0.0",
     "@angular/compiler-cli": "~10.0.0",
-    "@types/node": "^12.11.1",
+    "@scullyio/scully-plugin-base-href-rewrite": "^1.0.0-beta.0",
     "@types/jasmine": "~3.5.0",
     "@types/jasminewd2": "~2.0.3",
+    "@types/node": "^12.19.4",
     "codelyzer": "^6.0.0-next.1",
     "jasmine-core": "~3.5.0",
     "jasmine-spec-reporter": "~5.0.0",

scully.localization.config.ts

@@ -0,0 +1,17 @@
+import {baseHrefRewrite} from '@scullyio/scully-plugin-base-href-rewrite';
+import {ScullyConfig, setPluginConfig} from '@scullyio/scully';
+
+const {FixStaticLinks} = require('./scully/plugins/fixStaticLinks');
+
+const defaultPostRenderers = [baseHrefRewrite, FixStaticLinks];
+setPluginConfig(baseHrefRewrite, {href: `/${process.env.LOCALE}/`});
+
+export const config: ScullyConfig = {
+  projectRoot: './src',
+  projectName: 'localization',
+  distFolder: `./dist/localization/${process.env.LOCALE}`,
+  outDir: `./dist/static/${process.env.LOCALE}`,
+  puppeteerLaunchOptions: {args: ['--no-sandbox', '--disable-setuid-sandbox']},
+  defaultPostRenderers,
+  routes: {}
+};

scully.log

@@ -0,0 +1,61 @@
+
+----------------------------------
+Using stored unhandled routes!.
+   To discover new routes in the angular app use "npm run scully -- --scanRoutes"
+----------------------------------
+
+----------------------------------
+Using stored unhandled routes!.
+   To discover new routes in the angular app use "npm run scully -- --scanRoutes"
+----------------------------------
+
+----------------------------------
+Using stored unhandled routes!.
+   To discover new routes in the angular app use "npm run scully -- --scanRoutes"
+----------------------------------
+
+----------------------------------
+Using stored unhandled routes!.
+   To discover new routes in the angular app use "npm run scully -- --scanRoutes"
+----------------------------------
+
+----------------------------------
+Using stored unhandled routes!.
+   To discover new routes in the angular app use "npm run scully -- --scanRoutes"
+----------------------------------
+
+----------------------------------
+Using stored unhandled routes!.
+   To discover new routes in the angular app use "npm run scully -- --scanRoutes"
+----------------------------------
+
+----------------------------------
+Using stored unhandled routes!.
+   To discover new routes in the angular app use "npm run scully -- --scanRoutes"
+----------------------------------
+
+----------------------------------
+Using stored unhandled routes!.
+   To discover new routes in the angular app use "npm run scully -- --scanRoutes"
+----------------------------------
+
+----------------------------------
+Using stored unhandled routes!.
+   To discover new routes in the angular app use "npm run scully -- --scanRoutes"
+----------------------------------
+Puppeteer error while rendering "/home"
+TimeoutError: Navigation timeout of 30000 ms exceeded
+ we will retry rendering this page up to 3 times.
+Puppeteer error while rendering "/hello"
+TimeoutError: Navigation timeout of 30000 ms exceeded
+ we will retry rendering this page up to 3 times.
+
+----------------------------------
+Using stored unhandled routes!.
+   To discover new routes in the angular app use "npm run scully -- --scanRoutes"
+----------------------------------
+
+----------------------------------
+Using stored unhandled routes!.
+   To discover new routes in the angular app use "npm run scully -- --scanRoutes"
+----------------------------------

scully/plugins/fixStaticLinks.js

@@ -0,0 +1,14 @@
+const {registerPlugin} = require('@scullyio/scully');
+
+const FixStaticLinksPlugin = 'fixStaticLinks';
+
+const fixStaticLinksPlugin = async (html) => {
+  const regex = new RegExp('(<a[^>]* href="\/)([^"]*)"', 'gmi');
+  html = html.replace(regex, `$1${process.env.LOCALE}/$2"`);
+
+  return Promise.resolve(html);
+};
+
+
+registerPlugin('router', 'fixStaticLinks', fixStaticLinksPlugin);
+exports.FixStaticLinksPlugin = FixStaticLinksPlugin;

scully/plugins/plugin.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.myPlugin = void 0;
+const scully_1 = require("@scullyio/scully");
+exports.myPlugin = 'myPlugin';
+const myFunctionPlugin = async (html) => {
+    return html;
+};
+const validator = async () => [];
+scully_1.registerPlugin('render', exports.myPlugin, myFunctionPlugin, validator);
+//# sourceMappingURL=plugin.js.map

scully/plugins/plugin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"plugin.js","sourceRoot":"","sources":["plugin.ts"],"names":[],"mappings":";;;AACA,6CAAmE;AAEtD,QAAA,QAAQ,GAAG,UAAU,CAAC;AAEnC,MAAM,gBAAgB,GAAG,KAAK,EAAE,IAAY,EAAmB,EAAE;IAC/D,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAEF,MAAM,SAAS,GAAG,KAAK,IAAI,EAAE,CAAC,EAAE,CAAC;AAEjC,uBAAc,CAAC,QAAQ,EAAE,gBAAQ,EAAE,gBAAgB,EAAE,SAAS,CAAC,CAAC"}

scully/plugins/plugin.ts

@@ -0,0 +1,12 @@
+
+import { registerPlugin, getPluginConfig } from '@scullyio/scully';
+
+export const myPlugin = 'myPlugin';
+
+const myFunctionPlugin = async (html: string): Promise<string> => {
+  return html;
+};
+
+const validator = async () => [];
+
+registerPlugin('render', myPlugin, myFunctionPlugin, validator);

scully/tsconfig.json

@@ -0,0 +1,19 @@
+
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "esModuleInterop": true,
+    "importHelpers": false,
+    "lib": ["ES2019", "dom"],
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "sourceMap": true,
+    "target": "es2018",
+    "types": ["node"],
+    "skipLibCheck": true,
+    "skipDefaultLibCheck": true,
+    "typeRoots": ["../node_modules/@types"],
+    "allowSyntheticDefaultImports": true
+  },
+  "exclude": ["./**/*spec.ts"]
+}

scullyfy.sh

@@ -0,0 +1,17 @@
+#!/bin/bash
+
+languages=(en de)
+
+rm -rf dist/static
+
+for language in "${languages[@]}"
+do
+    index_file="dist/localization/$language/index.html"
+    echo "Replace base href for $language in $index_file"
+    sed -i -e 's/"\/'$language'\/"/"\/"/g' $index_file
+    echo "Build scully for $language"
+    LOCALE=$language npm run scully -- --scanRoutes
+    LOCALE=$language npm run scully
+done
+
+cp htaccess.file dist/static/.htaccess

src/app/app-routing.module.ts

@@ -1,11 +1,18 @@
 import {NgModule} from '@angular/core';
 import {Routes, RouterModule} from '@angular/router';
+import {HomeComponent} from './home/home.component';
+import {HelloComponent} from './hello/hello.component';
 
 
-const routes: Routes = [];
+const routes: Routes = [
+  {path: '', redirectTo: '/home', pathMatch: 'full'},
+  {path: 'home', component: HomeComponent},
+  {path: 'hello', component: HelloComponent},
+];
 
 @NgModule({
   imports: [RouterModule.forRoot(routes)],
   exports: [RouterModule]
 })
-export class AppRoutingModule { }
+export class AppRoutingModule {
+}

src/app/app.component.html

@@ -1,2 +1,2 @@
-<h1 i18n>Hallo Welt</h1>
+<a routerLink="/home" i18n>Home</a> | <a routerLink="/hello" i18n>Hallo Welt</a>
 <router-outlet></router-outlet>

src/app/app.module.ts

@@ -3,14 +3,20 @@ import { NgModule } from '@angular/core';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
+import { ScullyLibModule } from '@scullyio/ng-lib';
+import { HomeComponent } from './home/home.component';
+import { HelloComponent } from './hello/hello.component';
 
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
+    HomeComponent,
+    HelloComponent
   ],
   imports: [
     BrowserModule,
-    AppRoutingModule
+    AppRoutingModule,
+    ScullyLibModule
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/hello/hello.component.html

@@ -0,0 +1 @@
+<p i18n>Willkommen beim Hello Component</p>

src/app/hello/hello.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HelloComponent } from './hello.component';
+
+describe('HelloComponent', () => {
+  let component: HelloComponent;
+  let fixture: ComponentFixture<HelloComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ HelloComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HelloComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/hello/hello.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-hello',
+  templateUrl: './hello.component.html',
+  styleUrls: ['./hello.component.scss']
+})
+export class HelloComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/home/home.component.html

@@ -0,0 +1 @@
+<p i18n>Willkommen beim Home Component</p>

src/app/home/home.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HomeComponent } from './home.component';
+
+describe('HomeComponent', () => {
+  let component: HomeComponent;
+  let fixture: ComponentFixture<HomeComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ HomeComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HomeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/home/home.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-home',
+  templateUrl: './home.component.html',
+  styleUrls: ['./home.component.scss']
+})
+export class HomeComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/assets/scully-routes.json

@@ -0,0 +1 @@
+[{"route":"/home"},{"route":"/hello"},{"route":"/"}]

src/locales/messages.en.xlf

@@ -2,12 +2,30 @@
 <xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
   <file source-language="de" datatype="plaintext" original="ng2.template" target-language="en">
     <body>
-    <trans-unit id="f3568c7ea2c6cd41cc00b5f08ac6427549982e32" datatype="html">
-        <source>Hallo Welt</source><target state="translated">Hello World</target>
+    <trans-unit id="92eee6be6de0b11c924e3ab27db30257159c0a7c" datatype="html">
+        <source>Home</source><target state="new">Home</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/app.component.html</context>
           <context context-type="linenumber">1</context>
         </context-group>
+      </trans-unit><trans-unit id="f3568c7ea2c6cd41cc00b5f08ac6427549982e32" datatype="html">
+        <source>Hallo Welt</source><target state="translated">Hello world</target>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/app.component.html</context>
+          <context context-type="linenumber">1</context>
+        </context-group>
+      </trans-unit><trans-unit id="cf0211d2c2c72fe643c2561c51576cb8cf617ec7" datatype="html">
+        <source>Willkommen beim Home Component</source><target state="translated">Welcome to the Home component</target>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/home/home.component.html</context>
+          <context context-type="linenumber">1</context>
+        </context-group>
+      </trans-unit><trans-unit id="1dc201b146b58046101dd6a37bcc69c474134525" datatype="html">
+        <source>Willkommen beim Hello Component</source><target state="translated">Welcome to the Hello component</target>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/hello/hello.component.html</context>
+          <context context-type="linenumber">1</context>
+        </context-group>
       </trans-unit></body>
   </file>
 </xliff>

src/locales/messages.xlf

@@ -2,6 +2,13 @@
 <xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
   <file source-language="de" datatype="plaintext" original="ng2.template">
     <body>
+      <trans-unit id="92eee6be6de0b11c924e3ab27db30257159c0a7c" datatype="html">
+        <source>Home</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/app.component.html</context>
+          <context context-type="linenumber">1</context>
+        </context-group>
+      </trans-unit>
       <trans-unit id="f3568c7ea2c6cd41cc00b5f08ac6427549982e32" datatype="html">
         <source>Hallo Welt</source>
         <context-group purpose="location">
@@ -9,6 +16,20 @@
           <context context-type="linenumber">1</context>
         </context-group>
       </trans-unit>
+      <trans-unit id="cf0211d2c2c72fe643c2561c51576cb8cf617ec7" datatype="html">
+        <source>Willkommen beim Home Component</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/home/home.component.html</context>
+          <context context-type="linenumber">1</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="1dc201b146b58046101dd6a37bcc69c474134525" datatype="html">
+        <source>Willkommen beim Hello Component</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/hello/hello.component.html</context>
+          <context context-type="linenumber">1</context>
+        </context-group>
+      </trans-unit>
     </body>
   </file>
 </xliff>

src/polyfills.ts

@@ -65,3 +65,9 @@ import 'zone.js/dist/zone';  // Included with Angular CLI.
 /***************************************************************************************************
  * APPLICATION IMPORTS
  */
+
+/***************************************************************************************************
+* SCULLY IMPORTS
+*/
+// tslint:disable-next-line: align
+import 'zone.js/dist/task-tracking';

start-apache-with-static-folder.sh

@@ -0,0 +1,5 @@
+#!/bin/bash
+
+
+docker build -t localization:latest -f apache.Dockerfile .
+docker run -it --rm --name localization -v "$PWD/dist/static":/usr/local/apache2/htdocs/ -p 8080:80 localization:latest

tsconfig.app.json

@@ -3,7 +3,7 @@
   "extends": "./tsconfig.base.json",
   "compilerOptions": {
     "outDir": "./out-tsc/app",
-    "types": []
+    "types": ["node"]
   },
   "files": [
     "src/main.ts",