feat: allow configuring logo

README.md

@@ -8,19 +8,20 @@ The page is built with Angular.
 
 ## Changing links
 
-To change the links, edit the `constants.ts` file in the `src/assets` folder.
+To change the links, edit [config.ts](./config.ts) in the root directory.
 
+- `amountForumPostsHome` is the number of forum posts to show on the startpage.
+- `amountForumPostsSettings` is the number of forum posts to show on the settings page.
 - `contactLinks` is a list of links to contact pages.
+- `defaultSettings` is the default settings for the page.
+- `logos` and `logoList` control the logos shown above the search input.
 - `serviceLinks` is a list of links to our web services.
 - `SearchEngine` and `searchEngineMappings` to add or remove search engines from the list.
-- `defaultSettings` is the default settings for the page.
-- `amountForumPostsHome` is the number of forum posts to show on the startpage.
-- `amountForumPostsSettings` is the number of forum posts to show on the settings page.
 - `wallpapers` is a list of wallpapers to show on the settings page. `name` will be shown in the settings, `url` maybe a
   local file relative to the `public` folder or a link to an image.
-- `jokesApiUrl` is the Url used to query the jokes API [v2.jokeapi.dev](https://v2.jokeapi.dev/). You can customize the
-  jokes shown when visiting the site.
 
+Additionally,
+[jokes.ts](./src/app/jokes/jokes.ts) contains the list of excuses/jokes that will be shown on the main page.
 ## Get the tools
 
 To get started with this workspace, you need to install the following tools:
@@ -42,6 +43,8 @@ To run the dev server for your app, use:
 pnpm serve
 ```
 
+Visit [http://localhost:4200](http://localhost:4200) to see the app with live reload.
+
 To create a production bundle:
 
 ```sh

config.ts

@@ -1,6 +1,6 @@
-import { DefaultSettings, SearchEngineList, StartpageTheme, WallpaperList } from "./src/app/types"
+import { DefaultSettings, LogoList, SearchEngineList, StartpageTheme, WallpaperList } from "./src/app/types"
 
-const isProd = true
+const isProd = false
 export const GARUDA_FORUM_URL = isProd ? "https://forum.garudalinux.org" : "http://localhost:8010/proxy"
 
 // These are the items inside the menu.
@@ -192,6 +192,8 @@ export const searchEngineMappings: SearchEngineList = [
 // These are the settings defaults used
 export const defaultSettings: DefaultSettings = {
     jokesEnabled: true,
+    logo: "logos/violet-orange.png",
+    logoUrl: "",
     searchEngine: "searxng-privau" as SearchEngine,
     searchEngineName: "Custom",
     searchEngineUrl: "Set a custom search engine URL (omit %s)",
@@ -228,3 +230,21 @@ export const wallpapers: WallpaperList = [
 
 // Don't delete
 export const c = "nft5zX8CPAL4TW"
+
+// List for logo shown on the main page. Needs to have a fitting file in the public/logos folder.
+export const logos: LogoList = [
+    { name: "Black Metal", url: "logos/black-metal.png" },
+    { name: "Blue Metal", url: "logos/blue-metal.png" },
+    { name: "Blue", url: "logos/blue.png" },
+    { name: "Dr460nized", url: "logos/dr460nized.png" },
+    { name: "Green", url: "logos/green.png" },
+    { name: "Metal", url: "logos/metal.png" },
+    { name: "Orange", url: "logos/orange.png" },
+    { name: "Petrol", url: "logos/petrol.png" },
+    { name: "Pink", url: "logos/pink.png" },
+    { name: "Red", url: "logos/red.png" },
+    { name: "Solid", url: "logos/solid.png" },
+    { name: "Violet Orange", url: "logos/violet-orange.png" },
+    { name: "Custom", url: "custom" },
+]
+export const defaultLogo = "logos/violet-orange.png"

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,

src/app/app.service.ts

@@ -1,7 +1,7 @@
-import { ElementRef, Injectable, Renderer2 } from '@angular/core';
-import { BehaviorSubject } from 'rxjs';
-import { defaultSettings } from '../../config';
-import { StartpageSettings } from './types';
+import { ElementRef, Injectable, Renderer2 } from "@angular/core"
+import { BehaviorSubject } from "rxjs"
+import { defaultSettings } from "../../config"
+import { StartpageSettings } from "./types"
 
 @Injectable({
     providedIn: "root",

src/app/menubar/menubar.component.ts

@@ -1,10 +1,10 @@
-import { NgClass, NgStyle } from '@angular/common';
-import { 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 } from '../types';
+import { NgClass, NgStyle } from "@angular/common"
+import { 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 } from "../types"
 
 @Component({
     selector: "app-menubar",

src/app/search/search.component.html

@@ -1,5 +1,5 @@
 <div class="w-full">
-  <img src="/garuda.png" alt="Garuda Logo" width="100" class="mx-auto mb-5" />
+  <img src="{{ logo }}" alt="Garuda Logo" width="100" class="mx-auto mb-5" />
 </div>
 <div class="pt-5">
   <form class="max-w-md sm:mx-auto mx-10">

src/app/search/search.component.ts

@@ -1,8 +1,8 @@
 import { CommonModule, DOCUMENT } from "@angular/common"
-import { Component, Inject } from "@angular/core"
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Inject, OnInit } from "@angular/core"
 import { FormsModule } from "@angular/forms"
 import { RouterLink } from "@angular/router"
-import { SearchEngine, c, searchEngineMappings } from "../../../config"
+import { SearchEngine, defaultLogo, searchEngineMappings } from "../../../config"
 import { AppService } from "../app.service"
 import { SearchEngineEntry } from "../types"
 
@@ -12,14 +12,17 @@ import { SearchEngineEntry } from "../types"
     imports: [CommonModule, FormsModule, RouterLink],
     templateUrl: "./search.component.html",
     styleUrl: "./search.component.css",
+    changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class SearchComponent {
+export class SearchComponent implements OnInit {
     searchTerm = ""
     searchEngine: SearchEngine = "searxng"
     searchEngineData: SearchEngineEntry
+    logo = "/logos/violet-orange.png"
 
     constructor(
         private appService: AppService,
+        private cdr: ChangeDetectorRef,
         @Inject(DOCUMENT) public document: Document,
     ) {
         this.searchEngine = this.appService.settings.searchEngine
@@ -36,6 +39,23 @@ export class SearchComponent {
         }
     }
 
+    ngOnInit(): void {
+        this.appService.getSettings.subscribe((settings) => {
+            this.searchEngine = settings.searchEngine
+
+            console.log(this.searchEngine)
+            if (settings.logo === "custom" && this.appService.settings.logoUrl !== undefined) {
+                this.logo = this.appService.settings.logoUrl
+            } else if (settings.logo === undefined) {
+                this.logo = defaultLogo
+                this.appService.settings.logo = defaultLogo
+            } else {
+                this.logo = settings.logo
+            }
+            this.cdr.detectChanges()
+        })
+    }
+
     /**
      * Navigate to the search engine with the search term.
      */

src/app/settings/settings.component.html

@@ -79,6 +79,28 @@ <h1 class="bold text-maroon text-lg text-center">Configure startpage settings</h
                      class="block w-full md:w-3/4 p2 text-base text-maroon bg-surface0/60 backdrop-blur focus:ring-maroon focus:border-maroon rounded-lg">
             </div>
           }
+          <div class="mt-10">
+            <form>
+              <label for="select-logo" class="block mb-2 text-md text-text font-medium">Logo</label>
+              <select
+                name="select-logo"
+                id="select-logo"
+                [formControl]="logo"
+                class="block w-full md:w-3/4 p-2 text-base text-maroon rounded-lg bg-surface0/60 backdrop-blur focus:ring-maroon focus:border-maroon">
+                @for (logo of logos; track logo) {
+                  <option value="{{ logo.url }}">{{ logo.name }}</option>
+                }
+              </select>
+            </form>
+          </div>
+          @if (logo.value === "custom") {
+            <div class="mt-10">
+              <label for="input-search-name" class="block mb-2 text-md text-text">Custom logo URL</label>
+              <input type="text" id="input-logo-url"
+                     [formControl]="logoUrl"
+                     class="block w-full md:w-3/4 p-2 text-base text-maroon bg-surface0/60 backdrop-blur focus:ring-maroon focus:border-maroon rounded-lg">
+            </div>
+          }
           <div class="mt-10">
             <label class="inline-flex center justify-center
             items-center cursor-pointer">

src/app/settings/settings.component.ts

@@ -1,28 +1,29 @@
-import { CommonModule } from '@angular/common';
+import { CommonModule } from "@angular/common"
 import {
     AfterViewInit,
     ChangeDetectionStrategy,
     ChangeDetectorRef,
     Component,
     ElementRef,
-    Renderer2
-} from '@angular/core';
-import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { flavorEntries } from '@catppuccin/palette';
+    Renderer2,
+} from "@angular/core"
+import { FormControl, FormsModule, ReactiveFormsModule } from "@angular/forms"
+import { flavorEntries } from "@catppuccin/palette"
 import {
+    SearchEngine,
     amountForumPostsSettings,
     defaultSettings,
-    SearchEngine,
+    logos,
     searchEngineMappings,
-    wallpapers
-} from '../../../config';
-import { AppService } from '../app.service';
-import { loadTheme } from '../functions';
-import { LinkSectionComponent } from '../link-section/link-section.component';
-import { NewsComponent } from '../news/news.component';
-import { SearchComponent } from '../search/search.component';
-import { ToastComponent } from '../toast/toast.component';
-import { StartpageSettings, StartpageTheme } from '../types';
+    wallpapers,
+} from "../../../config"
+import { AppService } from "../app.service"
+import { loadTheme } from "../functions"
+import { LinkSectionComponent } from "../link-section/link-section.component"
+import { NewsComponent } from "../news/news.component"
+import { SearchComponent } from "../search/search.component"
+import { ToastComponent } from "../toast/toast.component"
+import { StartpageSettings, StartpageTheme } from "../types"
 
 @Component({
     selector: "app-settings",
@@ -43,13 +44,16 @@ import { StartpageSettings, StartpageTheme } from '../types';
 export class SettingsComponent implements AfterViewInit {
     protected readonly amountForumPostsSettings = amountForumPostsSettings
     protected readonly flavors = flavorEntries
+    protected readonly logos = logos
     protected readonly searchEngineMappings = searchEngineMappings
     protected readonly wallpapers = wallpapers
 
     // Default settings
     settings = defaultSettings as StartpageSettings
 
     jokesEnabled = new FormControl()
+    logo = new FormControl()
+    logoUrl = new FormControl("")
     theme = new FormControl("Choose your theme")
     searchEngine = new FormControl("Choose your search engine")
     searchEngineUrl = new FormControl("Set a custom search engine URL (omit %s)")
@@ -89,13 +93,15 @@ export class SettingsComponent implements AfterViewInit {
     saveSettings(): void {
         const settings: StartpageSettings = {
             jokesEnabled: this.jokesEnabled.value,
+            logo: this.logo.value,
+            logoUrl: this.logoUrl.value as string,
             searchEngine: this.searchEngine.value as SearchEngine,
             searchEngineName: this.searchEngineName.value as string,
             searchEngineUrl: this.searchEngineUrl.value as string,
             theme: this.theme.value as StartpageTheme,
-            wallpaper: this.wallpaper.value as string,
+            wallpaper: this.wallpaper.value,
             wallpaperBlur: this.wallpaperBlur.value as boolean,
-            wallpaperCustomUrl: this.wallpaperCustomUrl.value as string,
+            wallpaperCustomUrl: this.wallpaperCustomUrl.value,
             wallpaperFit: this.wallpaperFit.value as boolean,
             welcomeText: this.welcomeText.value as string,
         }

src/app/types.ts

@@ -1,4 +1,4 @@
-import { SearchEngine } from "../../config"
+import { SearchEngine, logos } from "../../config"
 
 export interface DiscourseFeed {
     users: User[]
@@ -134,6 +134,8 @@ export type SearchEngineList = SearchEngineEntry[]
 export interface StartpageSettings {
     [key: string]: any
     jokesEnabled: boolean
+    logo: string
+    logoUrl?: string
     searchEngine: SearchEngine
     searchEngineName: string
     searchEngineUrl: string
@@ -156,21 +158,8 @@ export interface WallpaperEntry {
 }
 export type WallpaperList = WallpaperEntry[]
 
-export interface JokeApiResponse {
-    error: boolean
-    category: string
-    type: string
-    joke: string
-    delivery: string
-    flags: {
-        nsfw: boolean
-        religious: boolean
-        political: boolean
-        racist: boolean
-        sexist: boolean
-        explicit: boolean
-    }
-    safe: boolean
-    id: number
-    lang: string
+export interface Logo {
+    name: string
+    url: string
 }
+export type LogoList = Logo[]