Removed ui/ux and websites + upgrade to v22

src/app/about/about.component.html

@@ -14,7 +14,6 @@
     <li>Illustrator</li>
     <li class="indent">verpakkingen<span>10+</span></li>
     <li class="indent">logo's & huisstijlen<span>20+</span></li>
-    <li>UI/UX<span>5+</span></li>
   </ul>
  </div>
 </div>

src/app/about/about.component.scss

@@ -1,4 +1,4 @@
-@import "../../vars.scss";
+@use "../../vars" as *;
 
 :host {
   padding: 2rem 0;

src/app/app.component.ts

@@ -1,5 +1,5 @@
-import { Component } from '@angular/core';
-import { RouterOutlet } from '@angular/router';
+import { Component, inject, OnInit, PLATFORM_ID } from '@angular/core';
+import { isPlatformBrowser } from '@angular/common';
 import { HeroComponent } from "./hero/hero.component";
 import { HeaderComponent } from "./header/header.component";
 import { ServicesComponent } from "./services/services.component";
@@ -10,15 +10,21 @@ import { AboutComponent } from "./about/about.component";
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [RouterOutlet, HeroComponent, HeaderComponent, ServicesComponent, FooterComponent, PortfolioComponent, AboutComponent],
+  imports: [HeroComponent, HeaderComponent, ServicesComponent, FooterComponent, PortfolioComponent, AboutComponent],
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss'
 })
-export class AppComponent {
+export class AppComponent implements OnInit {
   title = 'Ontvlambaar';
   theme = "dark"
 
+  private readonly platformId = inject(PLATFORM_ID);
+
   private detectColorScheme(): void {
+    // if (!isPlatformBrowser(this.platformId)) {
+    //   return;
+    // }
+
     this.theme = localStorage.getItem("theme") ?? 'dark';
     document.documentElement.setAttribute("data-theme", this.theme);
   }
@@ -28,8 +34,13 @@ export class AppComponent {
   }
 
   themeChange(theme: string) {
-    localStorage.setItem("theme", theme);
     this.theme = theme;
+
+    // if (!isPlatformBrowser(this.platformId)) {
+    //   return;
+    // }
+
+    localStorage.setItem("theme", theme);
     document.documentElement.setAttribute("data-theme", this.theme);
   }
 }

src/app/app.config.server.ts

@@ -1,11 +1,12 @@
 import { mergeApplicationConfig, ApplicationConfig } from '@angular/core';
-import { provideServerRendering } from '@angular/platform-server';
+import { provideServerRendering, withRoutes } from '@angular/ssr';
 import { appConfig } from './app.config';
+import { serverRoutes } from './app.routes.server';
 
 const serverConfig: ApplicationConfig = {
   providers: [
-    provideServerRendering()
-  ]
+    provideServerRendering(withRoutes(serverRoutes)),
+  ],
 };
 
 export const config = mergeApplicationConfig(appConfig, serverConfig);

src/app/app.routes.server.ts

@@ -0,0 +1,8 @@
+import { RenderMode, ServerRoute } from '@angular/ssr';
+
+export const serverRoutes: ServerRoute[] = [
+  {
+    path: '**',
+    renderMode: RenderMode.Prerender,
+  },
+];

src/app/footer/footer.component.scss

@@ -1,4 +1,4 @@
-@import "../../vars.scss";
+@use "../../vars" as *;
 
 :host {
   display: flex;

src/app/header/header.component.scss

@@ -1,4 +1,4 @@
-@import "../../vars.scss";
+@use "../../vars" as *;
 
 ul {
   list-style: none;

src/app/hero/hero.component.scss

@@ -1,4 +1,4 @@
-@import "../../vars.scss";
+@use "../../vars" as *;
 
 :host {
   flex-direction: column;

src/app/portfolio/portfolio.component.html

@@ -12,10 +12,3 @@
   </div>
   <img src="assets/services/Branding-800.webp" alt="Zetwerk voorbeeld">
 </div>
-<div class="left">
-  <div>
-    <h2>UI/UX</h2>
-    <p>Een goede vormgeving gaat verder dan alleen mooi zijn; het moet ook gebruiksvriendelijk zijn. Met een sterk ontwerp voor jouw website zorg ik ervoor dat gebruikers moeiteloos hun weg vinden. Door een combinatie van esthetiek en functionaliteit creëer ik een intuïtieve ervaring die aansluit bij de behoeften van de gebruiker en het doel van jouw project.</p>
-  </div>
-  <img src="assets/services/UX-UI-800.webp" alt="Zetwerk voorbeeld">
-</div>

src/app/portfolio/portfolio.component.scss

@@ -1,4 +1,4 @@
-@import "../../vars.scss";
+@use "../../vars" as *;
 
 :host {
   display: flex;

src/app/services/services.component.html

@@ -14,9 +14,4 @@
     <img src="assets/logos-light.svg" alt="Logos" class="only-on-light" />
     <h2>Logo's en huisstijlen</h2>
   </div>
-  <div class="service">
-    <img src="assets/ui-ux-dark.svg" alt="UI/UX" class="only-on-dark" />
-    <img src="assets/ui-ux-light.svg" alt="UI/UX" class="only-on-light" />
-    <h2>UI/UX</h2>
-  </div>
 </div>

src/app/services/services.component.scss

@@ -1,4 +1,4 @@
-@import "../../vars";
+@use "../../vars" as *;
 
 .wrapper {
   display: flex;
@@ -9,7 +9,6 @@
 
 .service {
   display: flex;
-  width: calc(50% - 1rem);
   height: 4rem;
   flex-shrink: 0;
   align-self: center;

src/app/toggle/toggle.component.ts

@@ -1,4 +1,5 @@
-import { Component, input, output, signal, WritableSignal } from '@angular/core';
+import { isPlatformBrowser } from '@angular/common';
+import { AfterViewInit, Component, inject, input, output, PLATFORM_ID, signal, WritableSignal } from '@angular/core';
 import { DotLottie } from '@lottiefiles/dotlottie-web';
 
 @Component({
@@ -8,10 +9,12 @@ import { DotLottie } from '@lottiefiles/dotlottie-web';
   templateUrl: './toggle.component.html',
   styleUrl: './toggle.component.scss'
 })
-export class ToggleComponent {
+export class ToggleComponent implements AfterViewInit {
   private darkLottie: any = undefined;
   private lightLottie: any = undefined;
 
+  private readonly platformId = inject(PLATFORM_ID);
+
   toggleOn = output<boolean>();
   toggleValue = input<boolean>();
   private isChanging: WritableSignal<boolean> = signal<boolean>(false);
@@ -20,6 +23,10 @@ export class ToggleComponent {
 
 
   ngAfterViewInit(): void {
+    if (!isPlatformBrowser(this.platformId)) {
+      return;
+    }
+
     this.isDarkMode.set(this.toggleValue());
     this.darkLottie = new DotLottie({
       autoplay: false,

src/index.html

@@ -4,8 +4,8 @@
   <meta charset="utf-8">
   <title>Ontvlambaar</title>
   <base href="/">
-  <meta name="description" content="Grafische vormgeving en zetwerk voor boeken, verpakkingen, logos, huisttijlen en UI/UX ">
-  <meta name="keywords" content="Graphic Designer, Design, Logo design, ontwerp, vormgeving, visitekaartjes, huisstijl, website, dtp, flyer, affiche, poster, magazine, boek, ontvlambaar, gent">
+  <meta name="description" content="Grafische vormgeving en zetwerk voor boeken, verpakkingen, logos en huisttijlen">
+  <meta name="keywords" content="Graphic Designer, Design, Logo design, ontwerp, vormgeving, visitekaartjes, huisstijl, dtp, flyer, affiche, poster, magazine, boek, ontvlambaar, gent, oost-vlaanderen, oost vlaanderen, vlaamse ardennen">
   <meta name="author" content="Lotte De Vlam (Ontvlambaar)">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">

src/main.server.ts

@@ -1,7 +1,8 @@
-import { bootstrapApplication } from '@angular/platform-browser';
+import { BootstrapContext, bootstrapApplication } from '@angular/platform-browser';
 import { AppComponent } from './app/app.component';
 import { config } from './app/app.config.server';
 
-const bootstrap = () => bootstrapApplication(AppComponent, config);
+const bootstrap = (context: BootstrapContext) =>
+  bootstrapApplication(AppComponent, config, context);
 
 export default bootstrap;