refactor code

src/app/app.component.html

@@ -19,7 +19,7 @@
   </div>
 
   <div class="progressbar-container"><div #progress_bar class="progressbar"></div></div>
-  <sidebar #sidebar [sections]="dataService.languagePack.sections" [languagesMenuItems]="dataService.languagesMenuItems"></sidebar>
+  <sidebar #sidebar></sidebar>
 
   <div id="home-start" style="position:relative; top: -30vh; display: table; height: 130vh; width: 100vw;">
     <div style="display: table-cell; vertical-align: middle; text-align: center;">
@@ -68,7 +68,7 @@ <h2 id="main-subheading" [innerHTML]="dataService.languagePack.subheading"></h2>
 
       <heading-card id="about-start" [heading]="dataService.languagePack.about" type="3" styleClass="alarm-clock-animated" style="margin-top: 5vh"></heading-card>
 
-      <about [content]="dataService.about" [langPack]="dataService.languagePack"></about>
+      <about></about>
 
       <div class="spacer" style="width: 100vw; height: 50vh"></div>
     </div>

src/app/components/about-card/about-card.component.html

@@ -18,8 +18,8 @@
 
   <div class="show-more-button" (click)="toggleExtension()">
     <div class="show-more">
-      <span *ngIf="!extended; else showLess">{{ langPack.showMore }}</span>
-      <ng-template #showLess>{{ langPack.showLess }}</ng-template>
+      <span *ngIf="!extended; else showLess">{{ dataService.languagePack.showMore }}</span>
+      <ng-template #showLess>{{ dataService.languagePack.showLess }}</ng-template>
     </div>
     <span class="icon pi pi-arrow-down" [class.extended]="extended"></span>
   </div>

src/app/components/about-card/about-card.component.ts

@@ -1,7 +1,8 @@
 import {Component, ElementRef, HostBinding, Input, ViewChild} from '@angular/core';
 import {NgIf} from "@angular/common";
-import {AboutCard, LanguagePack} from "../../data/model";
+import {AboutCard} from "../../data/model";
 import {ScrollTrigger} from "gsap/ScrollTrigger";
+import {DataService} from "../../data/data.service";
 
 @Component({
   selector: 'about-card',
@@ -15,14 +16,15 @@ import {ScrollTrigger} from "gsap/ScrollTrigger";
 export class AboutCardComponent {
 
   @Input({required: true}) content: AboutCard;
-  @Input({required: true}) langPack: LanguagePack;
 
   @ViewChild("text", {read: ElementRef}) textElement: ElementRef;
 
   @HostBinding("style.max-height") maxHeight: string = "22rem";
 
   extended: boolean = false;
 
+  constructor(readonly dataService: DataService) {}
+
   toggleExtension() {
     this.extended = !this.extended;
     if (this.extended) {

src/app/sections/about/about.component.html

@@ -1,5 +1,5 @@
-<about-card *ngFor="let about of content" [content]="about" [langPack]="langPack" class="alarm-clock-animated"></about-card>
-<about-card [langPack]="langPack" class="alarm-clock-animated" [content]="{title: 'Über diese Webseite', heading: appName, text: ' - Diese Webseite wurde von Anfang an als Template entworfen, mit dem Ziel, dass jeder selbst schnell und umkompliziert seine eigene Webseite erstellen kann. Innerhalb weniger Minuten sollte sich jeder damit eine moderne Lebenslauf-Webseite erstellen können. Der Code ist Open-Source und ich freue mich sehr über die Weiteverwendung oder Contributions! Durch die frühe Planung dessen im Design muss für das Verwenden des Templates kein Code angepasst werden. Deshalb ist keine Programmiererfahrung notwendig; alle Daten für die Webseite sind einfach in JSON Dateien konfigurierbar. In Zukunft ist ein simples Web-Tool geplant, mit dem das Template ausgefüllt werden können soll, um den Prozess noch einfacher zu gestalten. Nach Anpassung des Templates mit den eigenen Daten kann es einfach über GitHub Pages veröffentlicht werden. Die Beschriebung für all diese Schritte ist im GitHub Projekt enthalten.'}">
+<about-card *ngFor="let about of dataService.about" [content]="about" class="alarm-clock-animated"></about-card>
+<about-card class="alarm-clock-animated" [content]="{title: 'Über diese Webseite', heading: appName, text: ' - Diese Webseite wurde von Anfang an als Template entworfen, mit dem Ziel, dass jeder selbst schnell und umkompliziert seine eigene Webseite erstellen kann. Innerhalb weniger Minuten sollte sich jeder damit eine moderne Lebenslauf-Webseite erstellen können. Der Code ist Open-Source und ich freue mich sehr über die Weiteverwendung oder Contributions! Durch die frühe Planung dessen im Design muss für das Verwenden des Templates kein Code angepasst werden. Deshalb ist keine Programmiererfahrung notwendig; alle Daten für die Webseite sind einfach in JSON Dateien konfigurierbar. In Zukunft ist ein simples Web-Tool geplant, mit dem das Template ausgefüllt werden können soll, um den Prozess noch einfacher zu gestalten. Nach Anpassung des Templates mit den eigenen Daten kann es einfach über GitHub Pages veröffentlicht werden. Die Beschriebung für all diese Schritte ist im GitHub Projekt enthalten.'}">
   <div>
     <p></p>
     Folgende Technologien wurden für die Erstellung dieses Projekts verwendet:

src/app/sections/about/about.component.ts

@@ -1,11 +1,11 @@
-import {Component, Input} from '@angular/core';
+import {Component} from '@angular/core';
 import {AboutCardComponent} from "../../components/about-card/about-card.component";
-import {AboutCard, LanguagePack} from "../../data/model";
 import {appName, appVersion, githubURL} from "../../js/global.vars";
 import {BadgeModule} from "primeng/badge";
 import {BadgeComponent} from "../../components/badge/badge.component";
 import {NgForOf, NgIf} from "@angular/common";
 import {CustomButtonComponent} from "../../components/custom-button/custom-button.component";
+import {DataService} from "../../data/data.service";
 
 @Component({
   selector: 'about',
@@ -23,11 +23,10 @@ import {CustomButtonComponent} from "../../components/custom-button/custom-butto
 })
 export class AboutComponent {
 
-  @Input({required: true}) content: AboutCard[];
-  @Input({required: true}) langPack: LanguagePack;
-
   appVersion: string = appVersion;
   appName: string = appName;
   githubURL: string = githubURL;
 
+  constructor(readonly dataService: DataService) {}
+
 }

src/app/sections/sidebar/sidebar.component.html

@@ -1,14 +1,14 @@
 <div class="sidebar-container" style="height: 100vh">
   <div id="navbar">
     <!-- (hover)="hovered = true" [extended]="hovered" -->
-    <navbar-dot #navbar_dot *ngFor="let section of sections; index as i;" [section]="section" [active]="i===sectionActive">
+    <navbar-dot #navbar_dot *ngFor="let section of dataService.languagePack.sections; index as i;" [section]="section" [active]="i===sectionActive">
     </navbar-dot>
   </div>
 </div>
 
 <div class="sidebar-container">
   <div id="lang-selector">
-    <p-speedDial [model]="languagesMenuItems" direction="down" showIcon="pi pi-language" class="language-speed-dial"
+    <p-speedDial [model]="dataService.languagesMenuItems" direction="down" showIcon="pi pi-language" class="language-speed-dial"
                  buttonClassName="language-button">
     </p-speedDial>
   </div>

src/app/sections/sidebar/sidebar.component.ts

@@ -1,18 +1,14 @@
 import {
   ChangeDetectorRef,
   Component,
-  HostListener,
-  Input,
-  Output,
   QueryList,
   ViewChildren
 } from '@angular/core';
 import {NavbarDotComponent} from "../../components/navbar-dot/navbar-dot.component";
 import {NgForOf} from "@angular/common";
 import {SpeedDialModule} from "primeng/speeddial";
-import {Section} from "../../data/model";
-import {MenuItem} from "primeng/api";
 import {ScrollTrigger} from "gsap/ScrollTrigger";
+import {DataService} from "../../data/data.service";
 
 @Component({
   selector: 'sidebar',
@@ -27,20 +23,13 @@ import {ScrollTrigger} from "gsap/ScrollTrigger";
 })
 export class SidebarComponent {
 
-  @Input({required: true}) sections: Section[];
-  @Input({required: true}) languagesMenuItems: MenuItem[];
-
   // @Output() hovered: boolean = false;
 
   @ViewChildren("navbar_dot", {read: NavbarDotComponent}) dots: QueryList<NavbarDotComponent>;
 
   sectionActive = 0;
 
-  changeDetectorRef: ChangeDetectorRef;
-
-  constructor(changeDetectorRef: ChangeDetectorRef) {
-    this.changeDetectorRef = changeDetectorRef;
-  }
+  constructor(readonly changeDetectorRef: ChangeDetectorRef, readonly dataService: DataService) {}
 
   ngAfterViewInit(): void {
     this.addSelectedAnimation();
@@ -52,8 +41,8 @@ export class SidebarComponent {
   // }
 
   addSelectedAnimation() {
-    for (let i = 0; i < this.sections.length; i++) {
-      const section = this.sections[i];
+    for (let i = 0; i < this.dataService.languagePack.sections.length; i++) {
+      const section = this.dataService.languagePack.sections[i];
       ScrollTrigger.create({
         start: "top 50%",
         trigger: `#${section.id}`,