fix(theme): correctly set default theme; add footer

chaotic-cx · Jul 21, 2024 · 8904e28 · 8904e28
1 parent 268c2a0
commit 8904e28
Show file tree

Hide file tree

Showing 12 changed files with 2,389 additions and 1,779 deletions.
diff --git a/frontend/src/app/app.component.html b/frontend/src/app/app.component.html
@@ -107,4 +107,12 @@
         </div>
     </nav>
     <router-outlet />
+    <footer class="bg-base">
+        <div class="mx-auto pt-4 text-center text-sm">
+            <p class="text-mauve">
+                <a class="text-mauve" href="https://aur.chaotic.cx" rel="noopener" target="_blank">Chaotic-AUR</a>
+                &copy; 2024
+            </p>
+        </div>
+    </footer>
 </div>
diff --git a/frontend/src/app/app.component.ts b/frontend/src/app/app.component.ts
@@ -9,7 +9,7 @@ import {
     OnInit,
     PLATFORM_ID,
     Renderer2,
-    ViewEncapsulation
+    ViewEncapsulation,
 } from "@angular/core"
 import { RouterLink, RouterLinkActive, RouterOutlet } from "@angular/router"
 import { initFlowbite } from "flowbite"
@@ -24,7 +24,7 @@ import { StatusComponent } from "./status/status.component"
     imports: [RouterOutlet, StatusComponent, RouterLink, RouterLinkActive, NgOptimizedImage, Highlight],
     templateUrl: "./app.component.html",
     styleUrl: "./app.component.css",
-    encapsulation: ViewEncapsulation.None
+    encapsulation: ViewEncapsulation.None,
 })
 export class AppComponent implements OnInit, AfterViewInit {
     title = "aur.chaotic.cx"
@@ -33,16 +33,10 @@ export class AppComponent implements OnInit, AfterViewInit {
         @Inject(PLATFORM_ID) private platformId: object,
         private el: ElementRef,
         private httpClient: HttpClient,
-        private renderer: Renderer2
-    ) {
-    }
+        private renderer: Renderer2,
+    ) {}
 
     ngOnInit(): void {
-        const theme = localStorage.getItem("theme")
-        if (theme) {
-            loadTheme(theme, this.renderer, this.el)
-        }
-
         TimeAgo.addDefaultLocale(en)
 
         if (isPlatformBrowser(this.platformId)) {
@@ -51,14 +45,21 @@ export class AppComponent implements OnInit, AfterViewInit {
     }
 
     ngAfterViewInit(): void {
+        const theme = localStorage.getItem("theme")
+        if (theme && theme !== "mocha") {
+            loadTheme(theme, this.renderer, this.el)
+        } else {
+            this.renderer.setStyle(this.el.nativeElement.ownerDocument.body, "backgroundColor", "#1e1e2e")
+        }
+
         // Cause stats metrics to be pre-generated by calling its URL,
         // which are then cached in the backend for 5 minutes
         const routesToPreCache = [
             "30d/users",
             "30d/packages",
             "30d/rank/30/packages",
             "30d/rank/30/countries",
-            "30d/user-agents"
+            "30d/user-agents",
         ]
         routesToPreCache.forEach((route) => {
             this.httpClient.get(CAUR_CACHED_METRICS_URL + route)

diff --git a/frontend/src/app/home/home.component.html b/frontend/src/app/home/home.component.html
@@ -1,5 +1,5 @@
 <div class="chaotic-container-regular0">
-    <div class="container md:max-w-sm" [style.width.%]="70">
+    <div [style.width.%]="70" class="container md:max-w-sm">
         <app-chaotic-attractor></app-chaotic-attractor>
     </div>
 
@@ -20,16 +20,16 @@ <h1 class="mb-4 text-xl font-extrabold leading-none tracking-tight text-maroon m
         </p>
         <div class="flex justify-center">
             <a
-                class="mr-3 inline-flex items-center justify-center rounded-lg bg-maroon px-5 py-3 text-center text-base font-medium transition ease-in-out hover:scale-125 hover:bg-mauve"
                 ariaCurrentWhenActive="page"
+                class="mr-3 inline-flex items-center justify-center rounded-lg bg-maroon px-5 py-3 text-center text-base font-medium transition ease-in-out hover:scale-125 hover:bg-mauve"
                 routerLink="docs"
                 routerLinkActive="active"
             >
                 Start using now
             </a>
             <a
-                class="ml-3 inline-flex rounded-lg bg-maroon px-5 py-3 text-center text-base font-medium transition ease-in-out hover:scale-125 hover:bg-mauve"
                 (click)="toggleTheme()"
+                class="ml-3 inline-flex rounded-lg bg-maroon px-5 py-3 text-center text-base font-medium transition ease-in-out hover:scale-125 hover:bg-mauve"
             >
                 Toggle theme
             </a>

diff --git a/frontend/src/app/home/home.component.ts b/frontend/src/app/home/home.component.ts
@@ -1,10 +1,10 @@
+import { loadTheme } from "@./shared-lib"
 import { NgOptimizedImage } from "@angular/common"
 import { AfterViewInit, Component, ElementRef, Renderer2 } from "@angular/core"
 import { RouterLink, RouterLinkActive } from "@angular/router"
 import { ChaoticAttractorComponent } from "../chaotic-attractor/chaotic-attractor.component"
 import { MirrorMapComponent } from "../mirror-map/mirror-map.component"
 import { NewsChannelComponent } from "../news-channel/news-channel.component"
-import { loadTheme } from "@./shared-lib"
 
 @Component({
     selector: "app-home",
@@ -15,19 +15,18 @@ import { loadTheme } from "@./shared-lib"
         RouterLinkActive,
         ChaoticAttractorComponent,
         MirrorMapComponent,
-        NewsChannelComponent
+        NewsChannelComponent,
     ],
     templateUrl: "./home.component.html",
-    styleUrl: "./home.component.css"
+    styleUrl: "./home.component.css",
 })
 export class HomeComponent implements AfterViewInit {
     currentTheme: undefined | string = "mocha"
 
     constructor(
         private el: ElementRef,
-        private renderer: Renderer2
-    ) {
-    }
+        private renderer: Renderer2,
+    ) {}
 
     ngAfterViewInit(): void {
         const savedTheme = localStorage.getItem("theme")

diff --git a/frontend/src/app/package-list/package-list.component.ts b/frontend/src/app/package-list/package-list.component.ts
@@ -9,7 +9,7 @@ import { FormsModule, ReactiveFormsModule } from "@angular/forms"
     standalone: true,
     imports: [CommonModule, ReactiveFormsModule, FormsModule],
     templateUrl: "./package-list.component.html",
-    styleUrl: "./package-list.component.css"
+    styleUrl: "./package-list.component.css",
 })
 export class PackageListComponent {
     packageList: any[] = []
@@ -41,7 +41,7 @@ export class PackageListComponent {
 
             pkgArray.push({
                 name: pkgname,
-                fullString: pkg
+                fullString: pkg,
             })
         })
 

diff --git a/frontend/src/app/status/status.component.ts b/frontend/src/app/status/status.component.ts
@@ -1,15 +1,15 @@
 import { CAUR_API_URL, CurrentQueue, StatsObject } from "@./shared-lib"
 import { AfterViewInit, Component } from "@angular/core"
+import { Router } from "@angular/router"
 import { Axios } from "axios"
 import { DeployLogComponent } from "../deploy-log/deploy-log.component"
-import { Router } from "@angular/router"
 
 @Component({
     selector: "app-status",
     standalone: true,
     imports: [DeployLogComponent],
     templateUrl: "./status.component.html",
-    styleUrl: "./status.component.css"
+    styleUrl: "./status.component.css",
 })
 export class StatusComponent implements AfterViewInit {
     currentQueue: CurrentQueue = []
@@ -18,8 +18,7 @@ export class StatusComponent implements AfterViewInit {
     loading = true
     showFullPackages = false
 
-    constructor(private router: Router) {
-    }
+    constructor(private router: Router) {}
 
     ngAfterViewInit(): void {
         void this.getQueueStats()
@@ -35,7 +34,7 @@ export class StatusComponent implements AfterViewInit {
 
         const axios = new Axios({
             baseURL: CAUR_API_URL,
-            timeout: 10000
+            timeout: 10000,
         })
         axios
             .get("queue/stats")
@@ -53,7 +52,7 @@ export class StatusComponent implements AfterViewInit {
                         returnQueue.push({
                             status: Object.keys(currentQueue[index])[0],
                             count: Object.values(currentQueue[index])[0].count,
-                            packages: nameWithoutRepo
+                            packages: nameWithoutRepo,
                         })
                     }
                 }

diff --git a/frontend/src/index.html b/frontend/src/index.html
@@ -20,7 +20,7 @@
             rel="stylesheet"
         />
     </head>
-    <body class="mb-20 bg-base">
+    <body class="pb-10 bg-base">
         <app-root></app-root>
     </body>
 </html>
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
@@ -15,9 +15,7 @@
 
     .text-input {
         @apply autofill-text;
-        /* set text colour (white) */
         @apply autofill:shadow-[inset_0_0_0px_1000px_var(--ctp-mocha-surface0)];
-        /* set 'background' colour (black)*/
     }
 }
 

diff --git a/migrations.json b/migrations.json
@@ -0,0 +1,22 @@
+{
+    "migrations": [
+        {
+            "cli": "nx",
+            "version": "19.5.0-beta.1",
+            "requires": {
+                "@angular/core": ">=18.1.0"
+            },
+            "description": "Update the @angular/cli package version to ~18.1.0.",
+            "factory": "./src/migrations/update-19-5-0/update-angular-cli",
+            "package": "@nx/angular",
+            "name": "update-angular-cli-version-18-1-0"
+        },
+        {
+            "version": "18.1.0",
+            "description": "Updates calls to afterRender with an explicit phase to the new API",
+            "factory": "./migrations/after-render-phase/bundle",
+            "package": "@angular/core",
+            "name": "migration-after-render-phase"
+        }
+    ]
+}