feat(frontend): new logo, updated news feed, cleanup

frontend/public/news.json

@@ -3273,5 +3273,100 @@
         "emoji": "🥰"
       }
     ]
+  },
+  {
+    "id": 666,
+    "type": "message",
+    "date": "2025-01-03T20:53:07",
+    "date_unixtime": "1735933987",
+    "edited": "2025-01-03T20:53:10",
+    "edited_unixtime": "1735933990",
+    "from": "Chaotic-AUR",
+    "from_id": "channel1293714071",
+    "author": "Nιƈσ",
+    "text": [
+      "While it hasn't been half a year since the last rework of our website, another one just reached production 😌\n\nThis time the focus was pretty much on improving the way we retrieve information, as well as enhancing the amount of information shown to end users and maintainers while improving the look and feel to be more modern than before. \n\nSome highlights include: \n- A new ",
+      {
+        "type": "text_link",
+        "text": "mirror page",
+        "href": "https://aur.chaotic.cx/mirrors"
+      },
+      " showing the router's data (the same as the map uses)\n- Enhanced ",
+      {
+        "type": "text_link",
+        "text": "statistics pages",
+        "href": "https://aur.chaotic.cx/stats"
+      },
+      ", using ChartJS for visualization (these seem to be glitchy at times, but this apparently happens in official examples as well) \n- Much more overall data is available for ",
+      {
+        "type": "text_link",
+        "text": "packages",
+        "href": "https://aur.chaotic.cx/packages"
+      },
+      ", ",
+      {
+        "type": "text_link",
+        "text": "deployment logs",
+        "href": "https://aur.chaotic.cx/deployments"
+      },
+      " and other places\n- All dependencies on the Telegram API in the backend has been dropped. The news feeds is served as static file instead, and deploy logs come from our database\n- Speed should be improved as well, thanks to better ways of obtaining data and lazy loading\n- The news feed received real, and proper formatting\n- ",
+      {
+        "type": "text_link",
+        "text": "Build status",
+        "href": "https://aur.chaotic.cx/status"
+      },
+      " now shows ongoing pipelines, and allows retrieving status updates for build processes (e.g., \"waiting for builder\")\n- Data is displayed using fully searchable tables\n- And of course, theming was tremendously improved! 🎨\n\nThings left to do include moving the backend to a speedier location (if stuff loads slowly, this is the reason) and maybe adding more charts for statistics 🧑‍💻"
+    ],
+    "text_entities": [
+      {
+        "type": "plain",
+        "text": "While it hasn't been half a year since the last rework of our website, another one just reached production 😌\n\nThis time the focus was pretty much on improving the way we retrieve information, as well as enhancing the amount of information shown to end users and maintainers while improving the look and feel to be more modern than before. \n\nSome highlights include: \n- A new "
+      },
+      {
+        "type": "text_link",
+        "text": "mirror page",
+        "href": "https://aur.chaotic.cx/mirrors"
+      },
+      {
+        "type": "plain",
+        "text": " showing the router's data (the same as the map uses)\n- Enhanced "
+      },
+      {
+        "type": "text_link",
+        "text": "statistics pages",
+        "href": "https://aur.chaotic.cx/stats"
+      },
+      {
+        "type": "plain",
+        "text": ", using ChartJS for visualization (these seem to be glitchy at times, but this apparently happens in official examples as well) \n- Much more overall data is available for "
+      },
+      {
+        "type": "text_link",
+        "text": "packages",
+        "href": "https://aur.chaotic.cx/packages"
+      },
+      {
+        "type": "plain",
+        "text": ", "
+      },
+      {
+        "type": "text_link",
+        "text": "deployment logs",
+        "href": "https://aur.chaotic.cx/deployments"
+      },
+      {
+        "type": "plain",
+        "text": " and other places\n- All dependencies on the Telegram API in the backend has been dropped. The news feeds is served as static file instead, and deploy logs come from our database\n- Speed should be improved as well, thanks to better ways of obtaining data and lazy loading\n- The news feed received real, and proper formatting\n- "
+      },
+      {
+        "type": "text_link",
+        "text": "Build status",
+        "href": "https://aur.chaotic.cx/status"
+      },
+      {
+        "type": "plain",
+        "text": " now shows ongoing pipelines, and allows retrieving status updates for build processes (e.g., \"waiting for builder\")\n- Data is displayed using fully searchable tables\n- And of course, theming was tremendously improved! 🎨\n\nThings left to do include moving the backend to a speedier location (if stuff loads slowly, this is the reason) and maybe adding more charts for statistics 🧑‍💻"
+      }
+    ]
   }
 ]

frontend/public/site.webmanifest

@@ -0,0 +1,11 @@
+{
+  "name": "",
+  "short_name": "",
+  "icons": [
+    { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
+    { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
+  ],
+  "theme_color": "#ffffff",
+  "background_color": "#ffffff",
+  "display": "standalone"
+}

frontend/src/app/about/about.component.html

@@ -226,11 +226,11 @@ <h3 class="text-maroon pb-5 text-center text-lg font-bold">{{ member.name }}</h3
             </a>
           </li>
           <li>
-            Dr Juan Carlos Ponce Campuzano, creator of the Aizawa applet and our logo
             <a class="text-mauve" href="https://www.patreon.com/jcponce" rel="noopener" target="_blank"
-              >(check his Patreon)</a
-            >
+              >Dr Juan Carlos Ponce Campuzano</a
+            >, creator of the Aizawa applet and our logo
           </li>
+          <li>BlackStarMuzic for creating the clean version of our logo</li>
           <li>Frogging Family and Linux Gaming Dev Discord servers</li>
           <li>
             André,

frontend/src/app/app.component.html

@@ -1,6 +1,6 @@
 <div class="background min-h-svh">
   <garuda-shell [menuItems]="items">
-    <img garudaShellBarStart ngSrc="assets/logo.webp" width="28" height="28" alt="logo" />
+    <img garudaShellBarStart ngSrc="assets/logo.png" width="28" height="28" alt="logo" />
     <div class="mt-5" [@routerTransition]="prepareRoute(routerOutlet)">
       <router-outlet #routerOutlet="outlet"></router-outlet>
     </div>

frontend/src/app/home/home.component.html

@@ -1,10 +1,19 @@
 <div class="h-svh">
   <div class="container mx-auto mt-5 rounded-3xl md:max-w-sm"></div>
 
-  <div class="surface-section mt-10 px-4 py-8 md:mt-36 md:px-6 lg:px-8">
+  <div class="surface-section mt-5 px-4 py-8 md:mt-10 md:px-6 lg:px-8">
     <div class="text-center">
-      <i class="pi pi-spin pi-spinner text-maroon" style="font-size: 5rem"></i>
-      <div class="text-maroon my-10 text-3xl font-bold">Chaotic-AUR</div>
+      <img
+        ngSrc="assets/logo.png"
+        alt="logo"
+        class="mx-auto cursor-pointer"
+        width="741"
+        height="711"
+        [priority]="true"
+        [style]="isWide() ? 'width: 360px' : 'width: 80%'"
+        (click)="openApplet()"
+      />
+      <div class="text-maroon mb-10 mt-20 text-3xl font-bold">Chaotic-AUR</div>
       <div class="text-mauve my-10 text-4xl font-bold">Automated building repo for AUR packages 👨🏻‍💻</div>
       <div class="text-text my-5 text-2xl">Building AUR packages for you, so you don't have to!</div>
       <div>
@@ -26,7 +35,7 @@
 
 <div
   pAnimateOnScroll
-  class="animate-duration-1000 mx-auto my-10 h-lvh"
+  class="animate-duration-1000 mx-auto my-10 h-svh"
   enterClass="animate-fadein"
   leaveClass="animate-fadeout"
   [once]="false"
@@ -40,5 +49,7 @@
   leaveClass="animate-fadeout"
   [once]="false"
 >
-  <chaotic-mirror-map></chaotic-mirror-map>
+  @defer {
+    <chaotic-mirror-map></chaotic-mirror-map>
+  }
 </div>

frontend/src/app/home/home.component.ts

@@ -1,10 +1,12 @@
-import { Component } from '@angular/core';
+import { Component, inject, OnInit, signal } from '@angular/core';
 import { NewsfeedComponent } from '../newsfeed/newsfeed.component';
-import { ButtonDirective, ButtonLabel } from 'primeng/button';
+import { ButtonDirective, ButtonIcon, ButtonLabel } from 'primeng/button';
 import { Ripple } from 'primeng/ripple';
 import { MirrorMapComponent } from '../mirror-map/mirror-map.component';
 import { RouterLink } from '@angular/router';
 import { AnimateOnScrollModule } from 'primeng/animateonscroll';
+import { NgOptimizedImage } from '@angular/common';
+import { BreakpointObserver } from '@angular/cdk/layout';
 
 @Component({
   selector: 'chaotic-home',
@@ -16,10 +18,28 @@ import { AnimateOnScrollModule } from 'primeng/animateonscroll';
     ButtonLabel,
     MirrorMapComponent,
     RouterLink,
+    NgOptimizedImage,
+    ButtonIcon,
   ],
   templateUrl: './home.component.html',
   styleUrl: './home.component.css',
 })
-export class HomeComponent {
-  constructor() {}
+export class HomeComponent implements OnInit {
+  isWide = signal<boolean>(true);
+  observer = inject(BreakpointObserver);
+
+  ngOnInit() {
+    this.observer.observe('(min-width: 768px)').subscribe((result) => {
+      this.isWide.set(result.matches);
+    });
+  }
+
+  /**
+   * Many thanks for adapting the original applet and letting us use it!
+   * Attribution-NonCommercial-ShareAlike 4.0 International (CC BY-NC-SA 4.0)
+   * Copyright (c) 2018 Juan Carlos Ponce Campuzano
+   */
+  openApplet() {
+    window.location.href = 'https://aur.chaotic.cx/aizawa/index.html';
+  }
 }

frontend/src/index.html

@@ -8,10 +8,13 @@
     <title>Chaotic-AUR</title>
     <base href="/" />
 
-    <link href="/favicon.png" rel="icon" type="image/x-icon" />
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
+    <link rel="manifest" href="/site.webmanifest" />
+    <link rel="sitemap" href="/sitemap-index.xml" />
     <link href="https://avatars.githubusercontent.com" rel="preconnect" />
     <link href="https://builds.garudalinux.org" rel="preconnect" />
-    <link rel="sitemap" href="/sitemap-index.xml" />
 
     <!-- Highlight-js-ngx requires these -->
     <script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release/build/highlight.min.js" [async]="true"></script>