rename thumbnail to header, get image dimensions

fmalcher · fmalcher · commit c2027cb227ef · 2024-11-18T11:10:44.000+01:00
diff --git a/blog/2016-06-angular-for-all-platforms/README.md b/blog/2016-06-angular-for-all-platforms/README.md
@@ -8,7 +8,7 @@ keywords:
   - Angular
   - NativeScript
 language: de
-thumbnail: images/nativescript-loves-angular.png
+header: images/nativescript-loves-angular.png
 ---
 
 In den letzten Jahre haben mehr als eine Million Entwickler erfolgreich mit AngularJS Single-Page-Anwendungen erstellt. Angular ist damit das populärste Framework um client-seitige Webanwendungen zu entwickeln (siehe z.B.  [Stack Overflow](http://stackoverflow.com/research/developer-survey-2016#most-popular-technologies-per-occupation)). Allerdings blieb das Framework dabei bislang immer auf das Web beschränkt. Das bedeutet, dass man bis dato völlig andere Tools, Programmiersprachen und Frameworks benötigte, um Anwendungen für den Desktop oder für mobile Geräte an den Start zu bringen.
diff --git a/blog/2016-10-angular-date-value-accessor/README.md b/blog/2016-10-angular-date-value-accessor/README.md
@@ -10,8 +10,8 @@ keywords:
   - DateValueAccessor
   - DATE_VALUE_ACCESSOR
 language: en
-thumbnail: img/screenshot.png
-darken-thumbnail: true
+header: img/screenshot.png
+darken-header: true
 ---
 
 ## The problem
diff --git a/blog/2017-09-termine/README.md b/blog/2017-09-termine/README.md
@@ -7,7 +7,7 @@ last-change: 2017-10-28
 keywords:
   - Angular
 language: de
-thumbnail: banner.jpg
+header: banner.jpg
 ---
 
 Als Trainer der Angular.Schule veranstalten wir regelmäßig Workshops zu Angular.  
diff --git a/blog/2017-10-extension-pack/README.md b/blog/2017-10-extension-pack/README.md
@@ -7,7 +7,7 @@ keywords:
   - Angular
   - VSCode
 language: de
-thumbnail: angular-shield-overflow.png
+header: angular-shield-overflow.png
 ---
 
 Gut vorbereitet in den Workshop:  
diff --git a/blog/2017-11-angular2-ueberblick-mit-live-coding/README.md b/blog/2017-11-angular2-ueberblick-mit-live-coding/README.md
@@ -7,7 +7,7 @@ keywords:
   - Angular
   - Angular2
 language: de
-thumbnail: teaser.jpg
+header: teaser.jpg
 ---
 
 <div class="video-container"><iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/U9crt6__AVA?rel=0" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen title="YouTube-Video"></iframe></div>
diff --git a/blog/2017-11-native-mobile-apps-mit-nativescript-und-angular/README.md b/blog/2017-11-native-mobile-apps-mit-nativescript-und-angular/README.md
@@ -7,7 +7,7 @@ keywords:
   - Angular
   - NativeScript
 language: de
-thumbnail: teaser.jpg
+header: teaser.jpg
 ---
 
 <div class="video-container"><iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/pFId3_cs2_Q?rel=0" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen title="YouTube-Video"></iframe></div>
diff --git a/blog/2017-12-redux-mit-angular/README.md b/blog/2017-12-redux-mit-angular/README.md
@@ -11,7 +11,7 @@ keywords:
   - immutable
   - seamless-immutable
 language: de
-thumbnail: teaser.png
+header: teaser.png
 ---
 
 <div class="video-container"><iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/w6Wy3JgLt_E?rel=0" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen title="YouTube-Video"></iframe></div>
diff --git a/blog/2017-12-tdd-mit-angular/README.md b/blog/2017-12-tdd-mit-angular/README.md
@@ -10,7 +10,7 @@ keywords:
   - protractor
   - karma
 language: de
-thumbnail: teaser.png
+header: teaser.png
 ---
 
 <div class="video-container"><iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/KLJ5usDMv08?rel=0" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen title="YouTube-Video"></iframe></div>
diff --git a/blog/2018-01-cfp-dwx2018-angular/README.md b/blog/2018-01-cfp-dwx2018-angular/README.md
@@ -8,7 +8,7 @@ keywords:
   - DWX
   - CFP
 language: de
-thumbnail: dwx2018-header.jpg
+header: dwx2018-header.jpg
 ---
 
 In meiner Rolle als [Track-Chair](https://www.developer-week.de/adboard/) für den Themenbereich __Angular__ wurde ich mehrfach gefragt, nach welchen Kriterien ich die Auswahl treffen werde.
diff --git a/blog/2018-01-termine/README.md b/blog/2018-01-termine/README.md
@@ -7,7 +7,7 @@ last-change: 2018-06-02
 keywords:
   - Angular
 language: de
-thumbnail: banner.jpg
+header: banner.jpg
 ---
 
 Als Trainer der Angular.Schule veranstalten wir regelmäßig Schulungen zu Angular.  
diff --git a/blog/2018-02-rxjs-own-log-operator/README.md b/blog/2018-02-rxjs-own-log-operator/README.md
@@ -10,7 +10,7 @@ keywords:
   - Observable
   - Angular
 language: en
-thumbnail: birds-meeting-1309186.jpg
+header: birds-meeting-1309186.jpg
 ---
 
 
diff --git a/blog/2018-03-pure-immutable-operations/README.md b/blog/2018-03-pure-immutable-operations/README.md
@@ -8,7 +8,7 @@ keywords:
   - Array
   - TypeScript
 language: en
-thumbnail: glass-cube-and-sphere-1423317.jpg
+header: glass-cube-and-sphere-1423317.jpg
 ---
 
 ## Without any framework
diff --git a/blog/2018-04-swagger-codegen/README.md b/blog/2018-04-swagger-codegen/README.md
@@ -8,7 +8,7 @@ keywords:
   - Codegen
   - TypeScript
 language: en
-thumbnail: swagger-banner.png
+header: swagger-banner.png
 ---
 
 **In this article, we will take a look at swagger codegen. It will save you a ton of work and pain by generating HTTP services automatically from your swagger API description.**
diff --git a/blog/2018-05-one-app-per-customer/README.md b/blog/2018-05-one-app-per-customer/README.md
@@ -8,7 +8,7 @@ keywords:
   - NgModule
   - Modules
 language: en
-thumbnail: 100-apps.png
+header: 100-apps.png
 ---
 
 **In this article, I will discuss some ideas how to produce individual Angular apps.
diff --git a/blog/2018-06-5-useful-effects-without-actions/README.md b/blog/2018-06-5-useful-effects-without-actions/README.md
@@ -13,7 +13,7 @@ keywords:
   - Observables
   - Redux
 language: en
-thumbnail: canyonlands.jpg
+header: canyonlands.jpg
 ---
 
 **In this article we will discuss how we can leverage the power of Effects in NgRx. We will use observable streams other than the usual action stream to build some powerful and neat effects.**
diff --git a/blog/2018-06-apollo-graphql-code-generator/README.md b/blog/2018-06-apollo-graphql-code-generator/README.md
@@ -11,7 +11,7 @@ keywords:
   - Angular
   - TypeScript
 language: en
-thumbnail: graphql-header.png
+header: graphql-header.png
 ---
 
 **In this article, I will give a short introduction to GraphQL and then we shall look at at Apollo Angular and the GraphQL code generator. We will combine the flexibility of Graphql with the safety of strongly typed TypeScript code that is consistent between server and client.**
diff --git a/blog/2018-06-swagger-codegen-is-now-openapi-generator/README.md b/blog/2018-06-swagger-codegen-is-now-openapi-generator/README.md
@@ -8,7 +8,7 @@ keywords:
   - NgModule
   - Modules
 language: en
-thumbnail: logo_header.png
+header: logo_header.png
 ---
 
 **[William Cheng](https://github.com/wing328), top contributor to Swagger Codegen,
diff --git a/blog/2018-06-talks/README.md b/blog/2018-06-talks/README.md
@@ -12,7 +12,7 @@ keywords:
   - GraphQL
   - Chrome Dev Tools
 language: de
-thumbnail: banner.jpg
+header: banner.jpg
 ---
 
 Im Juni 2018 halten wir eine Reihe von Talks auf mehreren Konferenzen.
diff --git a/blog/2019-01-termine/README.md b/blog/2019-01-termine/README.md
@@ -7,7 +7,7 @@ last-change: 2019-01-03
 keywords:
   - Angular
 language: de
-thumbnail: banner.jpg
+header: banner.jpg
 sticky: false
 ---
 
diff --git a/blog/2019-02-third-party-libraries-and-widgets/README.md b/blog/2019-02-third-party-libraries-and-widgets/README.md
@@ -9,7 +9,7 @@ keywords:
   - library
   - libraries
 language: en
-thumbnail: pixabay-books-1655783.jpg
+header: pixabay-books-1655783.jpg
 ---
 
 **For an upcoming workshop we were asked how to integrate third-party libraries into an Angular application.
diff --git a/blog/2019-06-angular-graphql/README.md b/blog/2019-06-angular-graphql/README.md
@@ -10,7 +10,7 @@ keywords:
   - GraphQL
   - GraphQL-codegen
 language: de
-thumbnail: banner-graphql.png
+header: banner-graphql.png
 ---
 
 Im Juni 2019 halten einen neuen Talk auf den beiden Konferenzen Developer Week und enterJS. Wir stellen Ihnen GraphQL und Angular vor.
diff --git a/blog/2019-07-resolvers/README.md b/blog/2019-07-resolvers/README.md
@@ -14,7 +14,7 @@ keywords:
   - Reactive Programming
   - Observables
 language: en
-thumbnail: resolvers-header.jpg
+header: resolvers-header.jpg
 hidden: false
 ---
 
diff --git a/blog/2019-08-ng-deploy/README.md b/blog/2019-08-ng-deploy/README.md
@@ -10,7 +10,7 @@ keywords:
   - ng deploy
   - ng-deploy
 language: en
-thumbnail: space-shuttle.jpg
+header: space-shuttle.jpg
 hidden: false
 ---
 
diff --git a/blog/2019-11-ngx-semantic-version/README.md b/blog/2019-11-ngx-semantic-version/README.md
@@ -18,7 +18,7 @@ keywords:
   - Conventional Commits
   - Conventional Changelog
 language: en
-thumbnail: ngx-semantic-version-header.jpg
+header: ngx-semantic-version-header.jpg
 ---
 
 **In this article I will introduce the new tool `ngx-semantic-version`.
diff --git a/blog/2020-01-everything-github/README.md b/blog/2020-01-everything-github/README.md
@@ -22,7 +22,7 @@ keywords:
   - CI
   - Build Pipeline
 language: en
-thumbnail: everything-github.png
+header: everything-github.png
 ---
 
 **In this article we want to use several tools from the GitHub universe to launch a website with Angular.
diff --git a/blog/2020-01-ngrx-data-views/README.md b/blog/2020-01-ngrx-data-views/README.md
@@ -15,7 +15,7 @@ keywords:
   - NgRx Entities
   - Memoization
 language: en
-thumbnail: data-views-header.jpg
+header: data-views-header.jpg
 
 ---
 
diff --git a/blog/2020-02-rxjs-train-window/README.md b/blog/2020-02-rxjs-train-window/README.md
@@ -9,7 +9,7 @@ keywords:
   - Reactive Programming
   - Observable
 language: en
-thumbnail: rxjs-train.jpg
+header: rxjs-train.jpg
 
 ---
 
diff --git a/blog/2020-03-corona/README.md b/blog/2020-03-corona/README.md
@@ -9,7 +9,7 @@ keywords:
   - Remote
   - Online
 language: de
-thumbnail: homeoffice_angular.jpg
+header: homeoffice_angular.jpg
 ---
 
 In diesen Tagen überschlagen sich die Ereignisse in Europa und der Welt rund um das Thema Coronavirus (COVID-19).  
diff --git a/blog/2020-05-data-team-interview/README.md b/blog/2020-05-data-team-interview/README.md
@@ -4,7 +4,7 @@ author: Angular.Schule Team
 mail: team@angular.schule
 published: 2020-05-08
 language: de
-thumbnail: datateam.png
+header: datateam.png
 ---
 
 Die Firma [DATA-team](https://www.data-team.de) aus Leipzig hat sich auf Softwareentwicklung für Mahnwesen und Vollstreckung spezialisiert. Im Februar 2020 hat das sympathische Entwicklerteam zusammen mit der Angular.Schule einen soliden Start in Angular gemacht. Im Gespräch heute ist Marcel Jänicke, der die 4-tägige Inhouse-Schulung bei DATA-team organisiert hat.
diff --git a/blog/2020-06-corona-lockerung/README.md b/blog/2020-06-corona-lockerung/README.md
@@ -9,7 +9,7 @@ keywords:
   - Remote
   - Online
 language: de
-thumbnail: img_maske.jpg
+header: img_maske.jpg
 ---
 
 **Update Januar 2021:**  
diff --git a/blog/2021-03-video-rekursive-zaubershow/README.md b/blog/2021-03-video-rekursive-zaubershow/README.md
@@ -10,7 +10,7 @@ keywords:
   - rekursiv
   - Rekursion
 language: de
-thumbnail: marbles.png
+header: marbles.png
 ---
 
 <div class="video-container"><iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/78bfWXlNI7s" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen title="YouTube-Video"></iframe></div>
diff --git a/blog/2021-12-rxjs-turn-signal/README.md b/blog/2021-12-rxjs-turn-signal/README.md
@@ -10,7 +10,7 @@ keywords:
   - Observable
   - Car
 language: en
-thumbnail: rxjs-turnsignal.jpg
+header: rxjs-turnsignal.jpg
 ---
 
 
diff --git a/blog/2022-05-standalone-components/README.md b/blog/2022-05-standalone-components/README.md
@@ -13,7 +13,7 @@ keywords:
   - Standalone Pipes
   - Standalone Directives
 language: de
-thumbnail: ./standalone.jpg
+header: ./standalone.jpg
 ---
 
 Das wohl am heißesten diskutierte aktuelle Feature von Angular 14 sind die *Standalone Components*.
diff --git a/blog/2022-05-typed-forms/README.md b/blog/2022-05-typed-forms/README.md
@@ -10,7 +10,7 @@ keywords:
   - Reactive Forms
   - Typed Forms
 language: de
-thumbnail: typedforms.jpg
+header: typedforms.jpg
 ---
 
 Mit Version 14 von Angular erscheint ein lang erwartetes Feature: *stark typisierte Formulare!*
diff --git a/blog/2022-11-use-define-for-class-fields/README.md b/blog/2022-11-use-define-for-class-fields/README.md
@@ -13,7 +13,7 @@ keywords:
   - Class Properties
   - useDefineForClassFields
 language: en
-thumbnail: usedefineforclassfields.jpg
+header: usedefineforclassfields.jpg
 sticky: false
 ---
 
diff --git a/blog/2023-11-neues-logo/README.md b/blog/2023-11-neues-logo/README.md
@@ -10,7 +10,7 @@ keywords:
   - Logo
   - Angular 17
 language: de
-thumbnail: header-logo.png
+header: header-logo.png
 ---
 
 Die neue Major-Version 17 von Angular wurde Anfang November veröffentlicht. Für das Team und die Community war es ein besonderes Release: Angular wartet nicht nur mit spannenden neuen Features auf, sondern präsentiert sich seit 6. November 2023 in einem neuen Gewand.
diff --git a/blog/2024-11-effect-afterrendereffect/README.md b/blog/2024-11-effect-afterrendereffect/README.md
@@ -13,7 +13,7 @@ keywords:
   - afterRenderEffect
   - Angular 19
 language: en
-thumbnail: effect.jpg
+header: effect.jpg
 sticky: false
 ---
 
diff --git a/blog/2024-11-linked-signal/README.md b/blog/2024-11-linked-signal/README.md
@@ -13,7 +13,7 @@ keywords:
   - Angular 19
   - Computed Signals 
 language: en
-thumbnail: linkedsignal.jpg
+header: linkedsignal.jpg
 sticky: false
 ---
 
diff --git a/build/blog.service.ts b/build/blog.service.ts
@@ -1,4 +1,5 @@
 import * as emoji from 'node-emoji'
+import sizeOf from 'image-size';
 import { readdir, readFile } from 'fs/promises';
 
 import { JekyllMarkdownParser } from './jekyll-markdown-parser';
@@ -62,10 +63,12 @@ export class BlogService {
 
     const meta = parsedJekyllMarkdown.parsedYaml || {};
 
-    if (meta.thumbnail &&
-      !meta.thumbnail.startsWith('http') &&
-      !meta.thumbnail.startsWith('//')) {
-      meta.thumbnail = this.config.markdownBaseUrl + folder + '/' + meta.thumbnail;
+
+    if (meta.header) {
+      const url = meta.header;
+      const relativePath = this.config.blogPostsFolder + '/' + folder + '/' + meta.header;
+      const { width, height } = this.getImageDimensions(relativePath);
+      meta.header = { url, width, height };
     }
 
     return {
@@ -74,6 +77,11 @@ export class BlogService {
       meta: meta
     } as BlogEntry;
   }
+
+  private getImageDimensions(path: string) {
+    const { width, height } = sizeOf(path);
+    return { width, height };
+  }
 }
 
 
diff --git a/build/package-lock.json b/build/package-lock.json
diff --git a/build/package.json b/build/package.json
diff --git a/build/types.ts b/build/types.ts
diff --git a/build/utils.ts b/build/utils.ts
