feat: background blur effect; wallpaper fixes

src/app/app.component.html

@@ -1,8 +1,6 @@
-<div>
-  <div style="z-index: 10">
+<div class="background-filter">
+  <div class="non-blurred">
     <app-menubar id="menubar"></app-menubar>
     <router-outlet></router-outlet>
   </div>
-</div>
-
-<div id="background" class="bg-blur"></div>
+</div>

src/app/app.component.ts

@@ -1,12 +1,12 @@
-import { isPlatformBrowser } from '@angular/common';
-import { Component, ElementRef, Inject, OnInit, PLATFORM_ID, Renderer2 } from '@angular/core';
-import { RouterModule } from '@angular/router';
-import { initFlowbite } from 'flowbite';
-import { AppService } from './app.service';
-import { loadTheme } from './functions';
-import { MenubarComponent } from './menubar/menubar.component';
-import { RedirectGuard } from './redirect/redirect.guard';
-import { StartpageSettings } from './types';
+import { isPlatformBrowser } from "@angular/common"
+import { Component, ElementRef, Inject, OnInit, PLATFORM_ID, Renderer2 } from "@angular/core"
+import { RouterModule } from "@angular/router"
+import { initFlowbite } from "flowbite"
+import { AppService } from "./app.service"
+import { loadTheme } from "./functions"
+import { MenubarComponent } from "./menubar/menubar.component"
+import { RedirectGuard } from "./redirect/redirect.guard"
+import { StartpageSettings } from "./types"
 
 @Component({
     standalone: true,
@@ -37,6 +37,7 @@ export class AppComponent implements OnInit {
         } else {
             this.renderer.setStyle(this.el.nativeElement.ownerDocument.body, "backgroundColor", "#1e1e2e")
         }
+        this.appService.applyWallpaperStyle(this.el, this.renderer)
     }
 
     ngOnInit(): void {

src/app/app.routes.ts

@@ -1,10 +1,10 @@
-import { Route } from '@angular/router';
-import { generateRouterLink } from './functions';
-import { HomeComponent } from './home/home.component';
-import { RedirectGuard } from './redirect/redirect.guard';
-import { RedirectorComponent } from './redirector/redirector.component';
-import { SettingsComponent } from './settings/settings.component';
-import { ContactLinks, MenuBarItems, ServiceLinks } from './types';
+import { Route } from "@angular/router"
+import { generateRouterLink } from "./functions"
+import { HomeComponent } from "./home/home.component"
+import { RedirectGuard } from "./redirect/redirect.guard"
+import { RedirectorComponent } from "./redirector/redirector.component"
+import { SettingsComponent } from "./settings/settings.component"
+import { ContactLinks, MenuBarItems, ServiceLinks } from "./types"
 
 function generateExternalLinks(linkMap: ContactLinks | MenuBarItems | ServiceLinks): Route[] {
     return Object.values(linkMap).map((key) => {

src/app/app.service.ts

@@ -1,7 +1,7 @@
-import { ElementRef, Injectable, Renderer2 } from '@angular/core';
-import { defaultSettings } from '../../config';
-import { StartpageSettings } from './types';
-import { BehaviorSubject } from 'rxjs';
+import { ElementRef, Injectable, Renderer2 } from "@angular/core"
+import { BehaviorSubject } from "rxjs"
+import { defaultSettings } from "../../config"
+import { StartpageSettings } from "./types"
 
 @Injectable({
     providedIn: "root",
@@ -61,14 +61,17 @@ export class AppService {
      * @param renderer Renderer2 to the origin element.
      */
     applyWallpaperStyle(el: ElementRef, renderer: Renderer2): void {
-        renderer.setStyle(
-            el.nativeElement.ownerDocument.body,
-            "background-size",
-            this.settings.wallpaperFit ? "contain" : "",
-        )
+        if (this.settings.wallpaperFit) {
+            renderer.addClass(el.nativeElement.ownerDocument.body, "bg-contain")
+        } else {
+            renderer.removeClass(el.nativeElement.ownerDocument.body, "bg-contain")
+        }
 
-        // const blur = this.settings.wallpaperBlur ? "blur(16px)" : ""
-        // renderer.setStyle(el.nativeElement.ownerDocument.body, "filter", blur)
+        if (this.settings.wallpaperBlur) {
+            renderer.addClass(el.nativeElement.ownerDocument.body, "background-blurred")
+        } else {
+            renderer.removeClass(el.nativeElement.ownerDocument.body, "background-blurred")
+        }
     }
 
     /**

src/app/home/home.component.ts

@@ -1,14 +1,14 @@
-import { CommonModule, NgOptimizedImage } from '@angular/common';
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import { amountForumPostsHome } from '../../../config';
-import { JokesComponent } from '../jokes/jokes.component';
-import { LinkSectionComponent } from '../link-section/link-section.component';
-import { LinkComponent } from '../link/link.component';
-import { NewsComponent } from '../news/news.component';
-import { SearchComponent } from '../search/search.component';
-import { ToastComponent } from '../toast/toast.component';
-import { AppService } from '../app.service';
+import { CommonModule, NgOptimizedImage } from "@angular/common"
+import { ChangeDetectionStrategy, Component } from "@angular/core"
+import { FormsModule } from "@angular/forms"
+import { amountForumPostsHome } from "../../../config"
+import { AppService } from "../app.service"
+import { JokesComponent } from "../jokes/jokes.component"
+import { LinkSectionComponent } from "../link-section/link-section.component"
+import { LinkComponent } from "../link/link.component"
+import { NewsComponent } from "../news/news.component"
+import { SearchComponent } from "../search/search.component"
+import { ToastComponent } from "../toast/toast.component"
 
 @Component({
     selector: "app-home",

src/app/jokes/jokes.component.ts

@@ -1,6 +1,6 @@
-import { CommonModule } from '@angular/common';
-import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
-import jokes from './jokes';
+import { CommonModule } from "@angular/common"
+import { ChangeDetectionStrategy, Component, OnInit } from "@angular/core"
+import jokes from "./jokes"
 
 @Component({
     selector: "app-jokes",

src/app/link/link.component.ts

@@ -1,6 +1,6 @@
-import { CommonModule, NgOptimizedImage } from '@angular/common';
-import { Component, Input } from '@angular/core';
-import { RouterLink } from '@angular/router';
+import { CommonModule, NgOptimizedImage } from "@angular/common"
+import { Component, Input } from "@angular/core"
+import { RouterLink } from "@angular/router"
 
 @Component({
     selector: "app-link",

src/app/menubar/menubar.component.html

@@ -2,7 +2,7 @@
   class="bg-base/50 backdrop-blur fixed w-full z-20 top-0 start-0">
   <div class="flex flex-wrap items-center justify-between md:justify-end mx-auto p-4">
     <a class="flex md:mr-auto  items-center space-x-3 rtl:space-x-reverse" routerLink="/">
-      <img (click)="themeToggle.toggleTheme()" src="/favicon.png" class="h-8" alt="Garuda Logo">
+      <img src="/favicon.png" class="h-8" alt="Garuda Logo">
       <span class="self-center text-xl font-semibold whitespace-nowrap text-maroon"> {{ settings.welcomeText }}</span>
       <div class="w-full"></div>
     </a>
@@ -30,7 +30,7 @@
           } @else if (item.routerLink !== undefined) {
             <li [routerLink]="item.routerLink">
               <a
-                class="block text-lg py-2 px-3 text-maroon rounded hover:bg-surface0 hover:text-mauve md:hover:bg-transparent md:hover:text-mauve md:p-0">{{ item.title }}</a>
+                class="cursor-pointer block text-lg py-2 px-3 text-maroon rounded hover:bg-surface0 hover:text-mauve md:hover:bg-transparent md:hover:text-mauve md:p-0">{{ item.title }}</a>
             </li>
           }
         }

src/app/menubar/menubar.component.ts

@@ -1,10 +1,10 @@
-import { NgClass, NgStyle } from '@angular/common';
-import { ChangeDetectionStrategy, Component, ViewChild } from '@angular/core';
-import { RouterLink } from '@angular/router';
-import { menubarItems } from '../../../config';
-import { AppService } from '../app.service';
-import { ThemeToggleComponent } from '../theme-toggle/theme-toggle.component';
-import { MenuBarItems, StartpageSettings } from '../types';
+import { NgClass, NgStyle } from "@angular/common"
+import { ChangeDetectionStrategy, Component, ViewChild } from "@angular/core"
+import { RouterLink } from "@angular/router"
+import { menubarItems } from "../../../config"
+import { AppService } from "../app.service"
+import { ThemeToggleComponent } from "../theme-toggle/theme-toggle.component"
+import { MenuBarItems, StartpageSettings } from "../types"
 
 @Component({
     selector: "app-menubar",

src/app/settings/settings.component.html

@@ -85,6 +85,12 @@ <h1 class="bold text-maroon text-lg text-center">Configure startpage settings</h
                 class="relative w-11 h-6 bg-surface0/60 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-maroon dark:peer-focus:ring-mauve rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-maroon/60"></div>
               <span class="ms-3 mr-10 text-sm font-medium text-text">Fit wallpaper</span>
             </label>
+            <label class="inline-flex center items-center cursor-pointer">
+              <input type="checkbox" [formControl]="wallpaperBlur" class="sr-only peer">
+              <div
+                class="relative w-11 h-6 bg-surface0/60 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-maroon dark:peer-focus:ring-mauve rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-maroon/60"></div>
+              <span class="ms-3 mr-10 text-sm font-medium text-text">Blur background</span>
+            </label>
             <label class="inline-flex center items-center cursor-pointer">
               <input type="checkbox" [formControl]="jokesEnabled" class="sr-only peer">
               <div

src/app/settings/settings.component.ts

@@ -109,10 +109,10 @@ export class SettingsComponent implements AfterViewInit {
 
         if (settings.wallpaper === "custom") {
             this.appService.loadWallpaper(this.el, this.renderer, settings["wallpaperCustomUrl"])
-            this.applyWallpaperStyle()
-        } else if (settings.wallpaper !== "" && settings.wallpaper !== this.settings.wallpaper) {
+            this.appService.applyWallpaperStyle(this.el, this.renderer)
+        } else if (settings.wallpaper !== "") {
             this.appService.loadWallpaper(this.el, this.renderer, settings.wallpaper)
-            this.applyWallpaperStyle()
+            this.appService.applyWallpaperStyle(this.el, this.renderer)
         } else if (settings.wallpaper === "") {
             this.appService.loadWallpaper(this.el, this.renderer, null)
         }
@@ -126,8 +126,4 @@ export class SettingsComponent implements AfterViewInit {
 
         this.cdr.detectChanges()
     }
-
-    applyWallpaperStyle(): void {
-        this.appService.applyWallpaperStyle(this.el, this.renderer)
-    }
 }

src/app/theme-toggle/theme-toggle.component.ts

@@ -1,8 +1,8 @@
-import { CommonModule } from '@angular/common';
-import { Component, ElementRef, Renderer2 } from '@angular/core';
-import { AppService } from '../app.service';
-import { loadTheme } from '../functions';
-import { ToastComponent } from '../toast/toast.component';
+import { CommonModule } from "@angular/common"
+import { Component, ElementRef, Renderer2 } from "@angular/core"
+import { AppService } from "../app.service"
+import { loadTheme } from "../functions"
+import { ToastComponent } from "../toast/toast.component"
 
 @Component({
     selector: "app-theme-toggle",

src/index.html

@@ -11,7 +11,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <link rel="icon" type="image/x-icon" href="/favicon.png" />
 </head>
-<body id="app-ctp" class="max-h-svh bg-base mocha">
+<body id="app-ctp" class="bg-base mocha">
 <app-root></app-root>
 </body>
 </html>

src/styles.scss

@@ -30,7 +30,11 @@ body {
   font-family: "Fira Sans", sans-serif;
   font-style: normal;
   font-weight: 400;
+  left: 0;
   margin: 0;
+  position: fixed;
+  right: 0;
+  z-index: 10;
 }
 
 code,
@@ -45,12 +49,27 @@ samp {
   @apply text-sm selection:bg-mauve selection:text-base;
 }
 
-.bg-blur {
-  background-image: url("https://static.zenrows.com/content/large_archived_version_of_g2_reviews_page_e9898ad3ce.jpg");
-  filter: blur(8px);
-  -webkit-filter: blur(8px);
+.bg-contain {
+  background-size: contain;
+}
+
+.background-blurred .background-filter::after {
+  -webkit-backdrop-filter: blur(10px);
+  backdrop-filter: blur(10px);
+  content: "";
+  display: block;
   height: 100%;
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: cover;
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+
+.background-filter {
+  position: relative;
+}
+
+.non-blurred {
+  position: relative;
+  z-index: 1;
+  overflow: scroll;
 }