fix image paths

Author: fmalcher

blog/2016-06-angular-for-all-platforms/README.md

@@ -23,25 +23,25 @@ Vereinfacht ausgedrückt ist die Angular-2-Architektur in zwei Teile aufgeteilt:
 - __Plattform-spezifischer Teil__: hier geschieht die Magie. Es werden plattformspezifische Renderer verwendet, um die unterschiedlichen Zielplattformen abzubilden. Jene Renderer haben die Aufgabe, aus den „Proto Views“ einen „Visual Tree“ zu generieren. Dieser kann dann verwendet werden, um die Oberfläche anzuzeigen. Der Renderer ist ebenso dafür verantwortlich, Änderungen und Events zwischen „Proto Views“ und „Visual Tree“ auszutauschen.
 
 
-![Angular2 Platform Agnostic](./images/Angular2-platform-agnostic.png "Angular2 Platform Agnostic")
+![Angular2 Platform Agnostic](images/Angular2-platform-agnostic.png "Angular2 Platform Agnostic")
 
 Durch diese durchdachte Architektur ist es möglich, neue Ziele zu definieren. Es müssen nur die notwendigen Erweiterungen implementiert werden.
 
 
 ## Native Mobile Anwendungen
 
-![Login Screen](./images/LoginScreen.png "Login Screen")
+![Login Screen](images/LoginScreen.png "Login Screen")
 
 Auf Grundlage der plattformunabhängigen Architektur von Angular kann [NativeScript](https://www.nativescript.org/) seine Stärken zeigen. NativeScript ist ein Open-Source-Framework, mit dem man native Apps für iOS, Android und [bald](https://www.nativescript.org/blog/details/nativescript-runtime-preview-for-windows-10) auch Windows 10 bzw. Windows Phone 10 entwickeln kann. „Nativ“ bedeutet, dass tatsächlich echte native UI-Elemente aus der JavaScript-Umgebung heraus angesprochen werden können. Seit Mitte 2015 arbeiten das Angular-Team und das NativeScript-Team zusammen, um beide Frameworks miteinander zu verbinden. Das Ergebnis dieser Zusammenarbeit ist NativeScript 2.0 ([News](http://sdtimes.com/nativescript-2-0-brings-mobile-strategy-options-angularjs-developers/)).
 
 Die Lösung für Angular besteht darin, dass sehr spezielles Markup in HTML definiert wird. Diese Markup kann dann vom DOM-Adapter „Parse5“ geparst werden. Den größten Anteil an der Umsetzung nimmt der „NativeScript Renderer“ ein. Dieser garantiert nicht zuletzt den Austausch zwischen „Proto Views“ und  den nativen UI Komponenten der jeweiligen Platform:
 
-![Angular2 with NativeScript](./images/Angular2-with-NativeScript.png "Angular2 with NativeScript")
+![Angular2 with NativeScript](images/Angular2-with-NativeScript.png "Angular2 with NativeScript")
 
 
 ## Warum NativeScript?
 
-![Login Screen](./images/nativescript-loves-angular.png)
+![Login Screen](images/nativescript-loves-angular.png)
 
 ### Kurzum: es funktioniert wunderbar mit Angular
 
@@ -70,7 +70,7 @@ export class MyComponent {
 
 ### Abstraktionsschicht
 
-NativeScript hat eine 	beträchtliche Abstraktionsschicht an Board, welche die Unterschiede zwischen den unterstützen  Zielplattformen (iOS, Android, UWP) ausbügelt. Hierdurch kann man mit einer einzigen Code-Basis alle nennenswerten Geräte bedienen. Besonders wichtig ist eine gescheite UI-Abstraktion, bei der jede [UI-Komponente](http://docs.nativescript.org/ui/ui-views) eine eigene native Implementierung besitzen muss. Zum Glück müssen wir nicht diese spezifische Implementierungen selbst entwickeln. Es wurde bereits eine grundlegende Auswahl an Bedienelementen vom NativeScript-Team umsetzt. So können wir folgendes Markup definieren und erhalten eine ***native Oberfläche***, die in allen Betriebsystemen die jeweils zu erwarteten Bedienelemente besitzt:
+NativeScript hat eine beträchtliche Abstraktionsschicht an Board, welche die Unterschiede zwischen den unterstützen  Zielplattformen (iOS, Android, UWP) ausbügelt. Hierdurch kann man mit einer einzigen Code-Basis alle nennenswerten Geräte bedienen. Besonders wichtig ist eine gescheite UI-Abstraktion, bei der jede [UI-Komponente](http://docs.nativescript.org/ui/ui-views) eine eigene native Implementierung besitzen muss. Zum Glück müssen wir nicht diese spezifische Implementierungen selbst entwickeln. Es wurde bereits eine grundlegende Auswahl an Bedienelementen vom NativeScript-Team umsetzt. So können wir folgendes Markup definieren und erhalten eine ***native Oberfläche***, die in allen Betriebsystemen die jeweils zu erwarteten Bedienelemente besitzt:
 
 ```HTML
 @Component({

blog/2016-06-angular-for-all-platforms/README_EN.md

@@ -12,28 +12,28 @@ In simple terms the architecture is split into two parts:
 - Platform agnostic - where your markup (HTML) is parsed by a Dom Adapter and then compiled into a set of Proto Views. This process is not specific to any platforms and most of its pieces can be shared between platforms.
 - Platform specific - here is where the magic happens. To target each platform you need a Platform Specific Renderer, which based on the Proto Views generates a Visual Tree (used to display the UI). The Renderer is also responsible for propagating the changes and events between the Proto Views and the Visual Tree.
 
-![Angular2 Platform Agnostic](./images/Angular2-platform-agnostic.png "Angular2 Platform Agnostic")
+![Angular2 Platform Agnostic](images/Angular2-platform-agnostic.png "Angular2 Platform Agnostic")
 
 With this architecture in place it was a matter of creating the necessary extensions to target different platforms.  
 
 
 ## Adding mobile to the picture
 
 
-![Login Screen](./images/LoginScreen.png "Login Screen")
+![Login Screen](images/LoginScreen.png "Login Screen")
 
 This opened up the doors to [NativeScript](https://www.nativescript.org/), an Open Source framework for building iOS, Android and ([soon](https://www.nativescript.org/blog/details/nativescript-runtime-preview-for-windows-10)) Windows Universal apps with 100% Native UI.
 Since the middle of 2015 both the Angular and the NativeScript teams have been working on bringing the two together. This resulted in the creation of NativeScript 2.0 ([news](http://sdtimes.com/nativescript-2-0-brings-mobile-strategy-options-angularjs-developers/)).
 
 As a result NativeScript uses HTML as the markup to define the UI structure and Parse 5 as the DOM adapter. The biggest work was in implementing the NativeScript Renderer, which provides communication between the Proto Views and the Native UI components.
 
 Here is how this fits in the Angular 2 architecture.
-![Angular2 with NativeScript](./images/Angular2-with-NativeScript.png "Angular2 with NativeScript")
+![Angular2 with NativeScript](images/Angular2-with-NativeScript.png "Angular2 with NativeScript")
 
 
 ## Why NativeScript
 
-![Login Screen](./images/nativescript-loves-angular.png)
+![Login Screen](images/nativescript-loves-angular.png)
 
 ### It works with Angular 2
 You can use all of the [Angular 2 syntax](https://angular.io/docs/ts/latest/guide/template-syntax.html#) and get a mobile app as a result:

blog/2019-11-ngx-semantic-version/README.md

@@ -139,7 +139,7 @@ It can easily be determined what version part will be increased and much more.
 
 If you want to try you _commitlint_ separately, you can even try it out using `npx`:
 
-![commitlint cli](./commitlint.svg)
+![commitlint cli](commitlint.svg)
 
 _ngx-semantic-version_ will add the configuration file `commitlint.config.js` which can be adjusted later by your personal needs.
 
@@ -170,7 +170,7 @@ The tool _commitizen_ is there to help beginners and to prevent your own neglige
 It introduces a lots of restrictions for our commit messages so that it's easier for developers to follow the pattern.
 [Commitizen](https://www.npmjs.com/package/commitizen) will help you to always define a commit message in the appropriate format using an interactive CLI:
 
-![commitizen cli](./commitizen.svg)
+![commitizen cli](commitizen.svg)
 
 When adding _ngx-semantic-version_ it will configure _commitizen_ to use the _conventional changelog_ style as well:
 
@@ -186,7 +186,7 @@ When adding _ngx-semantic-version_ it will configure _commitizen_ to use the _co
 
 If you are using Visual Studio Code, you can also use the extension [Visual Studio Code Commitizen Support](https://marketplace.visualstudio.com/items?itemName=KnisterPeter.vscode-commitizen) which will let you type the commit message directly in the editor:
 
-![commitizen vscode plugin](./commitizen-vscode.gif)
+![commitizen vscode plugin](commitizen-vscode.gif)
 
 
 

blog/2020-01-everything-github/README.md

@@ -421,13 +421,13 @@ then we want to use a personal access token. The procedure is as following:
    You won’t be able to see it again later! 
 If you want to remember the token later, save it in a secure place only (e.g. a password manager).
     Please make sure that the token has the following permissions:
-   ![repo access](./screenshot_5_repo-access.png)
+   ![repo access]screenshot_5_repo-access.png)
 
 2. Open your Angular app's GitHub repo.
 
 3. Go to **Settings** > **Secrets** and click on **Add a new secret**.
 
-    ![add new secret](./screenshot_5_add-new-secret.png)
+    ![add new secret](screenshot_5_add-new-secret.png)
 
     Secrets are encrypted environment variables and only exposed to selected GitHub Actions.
     GitHub automatically redacts secrets printed to the log, but you should avoid printing secrets to the log intentionally.
@@ -436,7 +436,7 @@ If you want to remember the token later, save it in a secure place only (e.g. a
     If you prefer, you can also choose the name `PERSONAL_TOKEN` for all further steps.
     Finish this chapter by clicking the green **Add secret** button. 
 
-    ![secret name and value](./screenshot_5_secret-token-value.png)
+    ![secret name and value](screenshot_5_secret-token-value.png)
 
     It is perfectly fine not to store the token anywhere else.
     You can always create new tokens and just throw the old ones away.
@@ -448,7 +448,7 @@ GitHub Actions usage is free for public repositories, as mentioned before.
 
 1. Again in our repo, we go to **Actions** and click on **Set up workflow yourself**.
 
-    ![setup workflow](./screenshot_5_setup-workflow.png)
+    ![setup workflow](screenshot_5_setup-workflow.png)
 
 2. An editor will open. Keep the file name (e.g. `main.yml`) as it is and simply replace the entire content with the following example:
 
@@ -530,7 +530,7 @@ GitHub Actions usage is free for public repositories, as mentioned before.
 
 6. Click on **Start commit**, add message and description if you like and click on **Commit new file**. This will add the config file to the repo.
 
-    ![start commit](./screenshot_5_start-commit.png)
+    ![start commit](screenshot_5_start-commit.png)
 
 4.  **Done!** 🚀.  
 
@@ -608,7 +608,7 @@ In our example the app should be accessible through the domain `everything-githu
     The `<username>` (or organisation name) is in our case `angular-schule`.
     As an example, the following screenshot shows the required setting for the DNS provider [cloudflare.com](https://cloudflare.com):
       
-    ![Screenshot Cloudflare](./screenshot_6_cname-cloudflare.png)
+    ![Screenshot Cloudflare](screenshot_6_cname-cloudflare.png)
 
 2. Now we have to adjust the `ng deploy` command a little bit!
     By using our own domain, we no longer have to use a subdirectory.
@@ -626,7 +626,7 @@ In our example the app should be accessible through the domain `everything-githu
 
 3. It is important that you have an SSL certificate, because otherwise Chrome will tell your visitors that your website is not secure:
 
-    ![Screenshot Not Secure](./screenshot_6_not-secure.png)
+    ![Screenshot Not Secure](screenshot_6_not-secure.png)
 
     **Pretty ugly, isn't it?**  
     The good news: nowadays you don't have to spend money for a SSL certificate anymore!
@@ -635,7 +635,7 @@ In our example the app should be accessible through the domain `everything-githu
     You can make the necessary changes in the repository settings.
     Go to **Settings** > GitHub Pages and select **Enforce HTTPS**, to enable HTTPS encryption for your site:
 
-    ![Screenshot HTTPS GitHub](./screenshot_6_https-github.png)
+    ![Screenshot HTTPS GitHub](screenshot_6_https-github.png)
 
     It can take up to 24 hours before this option is available.
     As soon as the change is applied, you can now surf the website via HTTPS:  
@@ -662,12 +662,12 @@ We need to use the same `--cname` parameter as described before, but we have to
       The `<username>` (or organisation name) is in our case `angular-schule`.
       As an example, the following screenshot shows the required setting for the DNS provider [cloudflare.com](https://cloudflare.com):
 
-      ![Screenshot CNAME flatteing 1](./screenshot_6_cname-flattening-cloudflare1.png)
+      ![Screenshot CNAME flatteing 1](screenshot_6_cname-flattening-cloudflare1.png)
 
       We should also set a `CNAME` entry for `www`, as many people always type in this subdomain.
       The final settings should look like this:
 
-      ![Screenshot CNAME flatteing 2](./screenshot_6_cname-flattening-cloudflare2.png)
+      ![Screenshot CNAME flatteing 2](screenshot_6_cname-flattening-cloudflare2.png)
     
     * To create an `A` record, point your apex domain to the following IP addresses from GitHub:
       ```

blog/2020-01-ngrx-data-views/README.md

@@ -179,7 +179,7 @@ But how can we solve this?
 Abstractly speaking: Currently we retrieve the data normalized via the API (1) and put it normalized into the state (2).
 Then we use selectors (3) to retrieve the data normalized in each component and only then de-normalize it on each and every template (4) that displays it.
 
-![Normalization points](./normalization_points.svg)
+![Normalization points](normalization_points.svg)
 
 It seems there are three points where we could intervene and do the de-normalization instead:
 

blog/2020-05-data-team-interview/README.md

@@ -45,4 +45,4 @@ Die Schulung ist somit auch eine Motivation für uns, an Projekten mit Angular z
 
 **🅰️ Ferdinand:**<br>**Vielen Dank für das interessante Gespräch und die Einblicke, Marcel! Wir wünschen euch viel Spaß mit Angular und viel Erfolg in euren Projekten!**
 
-![Das DATA-team nach erfolgreich abgeschlossener Angular-Schulung](./teamfoto.jpg)
+![Das DATA-team nach erfolgreich abgeschlossener Angular-Schulung](teamfoto.jpg)

blog/2021-12-rxjs-turn-signal/README.md

@@ -64,7 +64,7 @@ const stepTimeMs = 500;
 const rawSignal$ = timer(0, stepTimeMs).pipe(map(e => e % 2 === 0));
 ```
 
-![Marble Diagram](./marble-map.svg)
+![Marble Diagram](marble-map.svg)
 
 ## The trigger
 
@@ -128,7 +128,7 @@ press$.pipe(
 
 In the following marble diagram you can see that emissions from the source are being ignored as long as the signal is running.
 
-![Marble Diagram](./marble-exhaustmap.svg)
+![Marble Diagram](marble-exhaustmap.svg)
 
 ## Displaying the signal
 
@@ -183,7 +183,7 @@ timer(0, 1000).pipe(
 ).subscribe(e => console.log(e));
 ```
 
-![Marble Diagram](./marble-takeuntilsimple.svg)
+![Marble Diagram](marble-takeuntilsimple.svg)
 
 Back to our turn signal, things become a little more challenging.
 The signalling period must be terminated when at least 3 cycles have passed *and* the trigger has been released.
@@ -246,7 +246,7 @@ press$.pipe(
 )
 ```
 
-![Marble Diagram](./marble-takeuntil.svg)
+![Marble Diagram](marble-takeuntil.svg)
 
 ## Switching off the light
 
@@ -300,7 +300,7 @@ While a signal cycle is running, all other presses will be ignored.
 The signal ends after the trigger is released and at least 3 cycles have been finished.
 Regardless of how the interrupted signal ends, it will always switch off the light when it leaves the room.
 
-![Marble Diagram](./marble-final.svg)
+![Marble Diagram](marble-final.svg)
 
 Here is the full code:
 

blog/2022-05-typed-forms/README.md

@@ -10,7 +10,7 @@ keywords:
   - Reactive Forms
   - Typed Forms
 language: de
-thumbnail: ./typedforms.jpg
+thumbnail: typedforms.jpg
 ---
 
 Mit Version 14 von Angular erscheint ein lang erwartetes Feature: *stark typisierte Formulare!*

build/blog.service.ts

@@ -57,7 +57,7 @@ export class BlogService {
 
   /** convert markdown README to full blog post object */
   private readmeToBlogEntry(readmeMarkdown: string, folder: string) {
-    const parser = new JekyllMarkdownParser(this.config.markdownBaseUrl + folder);
+    const parser = new JekyllMarkdownParser(this.config.markdownBaseUrl + folder + '/');
     const parsedJekyllMarkdown = parser.parse(readmeMarkdown);
 
     const meta = parsedJekyllMarkdown.parsedYaml || {};