feat: clarify docs wording, fixup/cleanup

frontend/src/app/build-status/build-status.component.css

@@ -5,3 +5,7 @@
 ::ng-deep .p-datatable {
   width: unset !important;
 }
+
+.p-tab {
+  @apply mx-auto;
+}

frontend/src/app/build-status/build-status.component.html

@@ -380,7 +380,7 @@
     </p-tabs>
   }
 </div>
-@if (dialogData().pipeline?.source) {
+@if (dialogData().pipeline.source) {
   <p-dialog header="Pipeline details" [modal]="true" [(visible)]="dialogVisible" [style]="{ width: '90vw' }">
     <div class="mb-5 ml-2.5">
       <p>Source: {{ dialogData().pipeline.source }}</p>

frontend/src/app/build-status/build-status.component.ts

@@ -1,24 +1,24 @@
-import { ChangeDetectorRef, Component, inject, OnInit, signal } from '@angular/core';
-import { CommonModule } from '@angular/common';
 import { Build, BuildClass, BuildStatus, PipelineWithExternalStatus } from '@./shared-lib';
-import { Timeline } from 'primeng/timeline';
+import { BreakpointObserver } from '@angular/cdk/layout';
+import { CommonModule } from '@angular/common';
+import { ChangeDetectorRef, Component, inject, OnInit, signal } from '@angular/core';
+import { Meta } from '@angular/platform-browser';
+import { Router } from '@angular/router';
+import { MessageToastService } from '@garudalinux/core';
+import { Mutex } from 'async-mutex';
 import { Card } from 'primeng/card';
+import { Dialog } from 'primeng/dialog';
+import { Ripple } from 'primeng/ripple';
+import { Skeleton } from 'primeng/skeleton';
 import { TableModule } from 'primeng/table';
-import { BuildClassPipe } from '../pipes/build-class.pipe';
+import { Tab, TabList, TabPanel, TabPanels, Tabs } from 'primeng/tabs';
+import { Timeline } from 'primeng/timeline';
+import { Tooltip } from 'primeng/tooltip';
+import { retry } from 'rxjs';
 import { AppService } from '../app.service';
 import { startShortPolling } from '../functions';
-import { retry } from 'rxjs';
-import { BreakpointObserver } from '@angular/cdk/layout';
-import { Tab, TabList, TabPanel, TabPanels, Tabs } from 'primeng/tabs';
-import { MessageToastService } from '@garudalinux/core';
+import { BuildClassPipe } from '../pipes/build-class.pipe';
 import { TitleComponent } from '../title/title.component';
-import { Dialog } from 'primeng/dialog';
-import { Tooltip } from 'primeng/tooltip';
-import { Skeleton } from 'primeng/skeleton';
-import { Mutex } from 'async-mutex';
-import { Ripple } from 'primeng/ripple';
-import { Router } from '@angular/router';
-import { Meta } from '@angular/platform-browser';
 
 @Component({
   selector: 'chaotic-build-status',
@@ -75,7 +75,10 @@ export class BuildStatusComponent implements OnInit {
   observer = inject(BreakpointObserver);
   router = inject(Router);
 
-  dialogData = signal<PipelineWithExternalStatus>({} as PipelineWithExternalStatus);
+  dialogData = signal<PipelineWithExternalStatus>({
+    pipeline: {},
+    commit: [],
+  } as unknown as PipelineWithExternalStatus); // Workaround for silencing Angular warning
   dialogVisible = signal<boolean>(false);
   pipelineWithStatus = signal<PipelineWithExternalStatus[]>([]);
 

frontend/src/app/docs/docs.component.html

@@ -4,23 +4,58 @@
   <div class="mt-5">
     <p-panel header="Setup">
       <div class="chaotic-panel">
-        We start by retrieving the primary key to enable the installation of our keyring and mirror list.
+        We start by retrieving the
+        <a
+          class="text-mauve"
+          href="https://keyserver.ubuntu.com/pks/lookup?search=3056513887B78AEB&fingerprint=on&op=index"
+        >
+          primary key</a
+        >
+        to enable the installation of our keyring and mirror list.
       </div>
       <div>
-        <pre (click)="copyText(installRepo)" class="whitespace-pre-wrap py-5 text-base"><code [highlight]="installRepo"
+        <pre (click)="copyText(receiveKeys)" class="whitespace-pre-wrap py-5 text-base"><code [highlight]="receiveKeys"
                                                                                               language="shell"
                                                                                               pTooltip="Copy to clipboard"
                                                                                               tooltipPosition="top"></code><br></pre>
         <p-divider />
-        <p>Then, we append (adding at the end) the following to <i>/etc/pacman.conf</i>:</p>
+        <div class="chaotic-panel">
+          This allows us to install our
+          <a class="text-mauve" href="https://github.com/chaotic-aur/keyring" rel="noopener" target="_blank"
+            >chaotic-keyring</a
+          >
+          and
+          <a
+            class="text-mauve"
+            href="https://gitlab.com/chaotic-aur/pkgbuilds/-/tree/main/chaotic-mirrorlist"
+            rel="noopener"
+            target="_blank"
+            >chaotic-mirrorlist</a
+          >
+          packages.
+        </div>
+        <div>
+          <pre (click)="copyText(installRepoPackages)" class="whitespace-pre-wrap py-5 text-base"><code
+          [highlight]="installRepoPackages"
+          language="shell"
+          pTooltip="Copy to clipboard"
+          tooltipPosition="top"></code><br></pre>
+          <p-divider />
+        </div>
+        <p>Then, we append (adding at the end) the following to <code>/etc/pacman.conf</code>:</p>
         <pre class="whitespace-pre-wrap py-5"><code (click)="copyText(appendRepo)" [highlight]="appendRepo"
                                                     language="shell" pTooltip="Copy to clipboard"
                                                     tooltipPosition="top"></code></pre>
         <p-divider />
-        <p>After syncing your mirror lists, the repository is ready to use!</p>
+        <p>We recommend running a full system update along syncing our mirrorlist.</p>
         <pre class="whitespace-pre-wrap py-5"><code (click)="copyText(syncMirrors)" [highlight]="syncMirrors"
                                                     language="shell" pTooltip="Copy to clipboard"
                                                     tooltipPosition="top"></code></pre>
+        <p-divider />
+        <p>After having completed this action, the repository is ready to use! 🚀</p>
+        <pre class="whitespace-pre-wrap py-5"><code (click)="copyText(installPackage)" [highlight]="installPackage"
+                                                    language="shell" pTooltip="Copy to clipboard"
+                                                    tooltipPosition="top"></code></pre>
       </div>
     </p-panel>
   </div>
@@ -123,15 +158,17 @@
         <a class="text-mauve" href="https://www.archlinux.org/pacman/pacman.conf.5.html" rel="noopener" target="_blank"
           >you can add the following</a
         >
-        to <i>/etc/pacman.conf</i>:
+        to <code>/etc/pacman.conf</code>:
         <pre class="whitespace-pre-wrap py-5 pl-5"><code (click)="copyText(ignorePkg)" [innerHtml]="ignorePkg"
                                                          language="shell" pTooltip="Copy to clipboard"
                                                          tooltipPosition="top"></code></pre>
 
         <p-divider />
 
         You can pick the repository from which to download a package like this:
-        <pre class="whitespace-pre-wrap py-5 pl-5"><code (click)="copyText(installPackage)" [highlight]="installPackage"
+        <pre
+          class="whitespace-pre-wrap py-5 pl-5"
+        ><code (click)="copyText(installPackageSpecific)" [highlight]="installPackageSpecific"
                                                          language="shell" pTooltip="Copy to clipboard"
                                                          tooltipPosition="top"></code></pre>
         Some AUR helpers like

frontend/src/app/docs/docs.component.ts

@@ -18,26 +18,27 @@ import { TitleComponent } from '../title/title.component';
   imports: [Panel, Divider, TitleComponent, RouterLink, Highlight, Tooltip],
 })
 export class DocsComponent implements OnInit {
-  isBrowser = true;
-  installRepo: string;
-  appendRepo = '[chaotic-aur]\nInclude = /etc/pacman.d/chaotic-mirrorlist';
-  installPackage = '$ sudo pacman -S chaotic-aur/mesa-tkg-git';
-  installPackageParu = '$ paru -S chaotic-aur/firefox-hg';
-  powerpillUsage = '$ sudo pacman -Sy\n$ sudo powerpill -Su\n$ paru -Su';
-  ignorePkg = 'IgnorePkg = ...';
-  syncMirrors = '$ sudo pacman -Sy\n$ sudo pacman -Su ungoogled-chromium';
+  readonly appendRepo = '[chaotic-aur]\nInclude = /etc/pacman.d/chaotic-mirrorlist';
+  readonly ignorePkg = 'IgnorePkg = ...';
+  readonly installPackage = '$ sudo pacman -S ungoogled-chromium';
+  readonly installPackageParu = '$ paru -S chaotic-aur/firefox-hg';
+  readonly installPackageSpecific = '$ sudo pacman -S chaotic-aur/mesa-tkg-git';
+  readonly installRepoPackages =
+    "$ sudo pacman -U 'https://cdn-mirror.chaotic.cx/chaotic-aur/chaotic-keyring.pkg.tar.zst'\n" +
+    "$ sudo pacman -U 'https://cdn-mirror.chaotic.cx/chaotic-aur/chaotic-mirrorlist.pkg.tar.zst'";
+  readonly powerpillUsage = '$ sudo pacman -Sy && sudo powerpill -Su && paru -Su';
+  readonly receiveKeys: string;
+  readonly syncMirrors = '$ sudo pacman -Syu';
 
   private readonly appConfig: EnvironmentModel = inject(APP_CONFIG);
   private readonly messageToastService = inject(MessageToastService);
   private readonly meta = inject(Meta);
   private readonly router = inject(Router);
 
   constructor() {
-    this.installRepo =
+    this.receiveKeys =
       `$ sudo pacman-key --recv-key ${this.appConfig.primaryKey} --keyserver keyserver.ubuntu.com\n` +
-      `$ sudo pacman-key --lsign-key ${this.appConfig.primaryKey}\n` +
-      "$ sudo pacman -U 'https://cdn-mirror.chaotic.cx/chaotic-aur/chaotic-keyring.pkg.tar.zst'\n" +
-      "$ sudo pacman -U 'https://cdn-mirror.chaotic.cx/chaotic-aur/chaotic-mirrorlist.pkg.tar.zst'";
+      `$ sudo pacman-key --lsign-key ${this.appConfig.primaryKey}`;
   }
 
   ngOnInit() {
@@ -53,8 +54,14 @@ export class DocsComponent implements OnInit {
   copyText(text: string) {
     if (!navigator.clipboard) return;
 
-    navigator.clipboard.writeText(text.replaceAll('$ ', '')).then(() => {
-      this.messageToastService.info('Copied', 'The text has been copied to your clipboard');
-    });
+    navigator.clipboard
+      .writeText(text.replaceAll('$ ', ''))
+      .then(() => {
+        this.messageToastService.info('Copied', 'The text has been copied to your clipboard');
+      })
+      .catch((err) => {
+        this.messageToastService.error('Copied', 'Failed copying to clipboard');
+        console.error(err);
+      });
   }
 }

frontend/src/app/functions.ts

@@ -1,6 +1,4 @@
-import { type Deployment } from '@./shared-lib';
 import { Meta } from '@angular/platform-browser';
-import { Message } from './newsfeed/interfaces';
 
 /**
  * Poll for new deployments.
@@ -13,123 +11,6 @@ export function startShortPolling(interval: any, func: () => void): void {
   clearInterval(initialInterval);
 }
 
-/**
- * Generate the URL for the repository.
- * @param deployment The deployment to generate the URL for.
- * @param repoUrls The URLs for the repositories, derived from appConfig
- * @returns The URL for the repository, in which the PKGBUILD is located.
- */
-export function generateRepoUrl(
-  deployment: Deployment,
-  repoUrls: {
-    garuda: string;
-    chaotic: string;
-  },
-): string | undefined {
-  if (deployment.repo.match(/chaotic-aur$/) !== null) {
-    deployment.sourceUrl = repoUrls.chaotic;
-    return deployment.sourceUrl;
-  }
-  if (deployment.repo.match(/garuda$/) !== null) {
-    deployment.sourceUrl = repoUrls.garuda;
-    return deployment.sourceUrl;
-  }
-  return undefined;
-}
-
-/**
- * Get the current date and time in a human-readable format.
- */
-export function getNow(): string {
-  return new Date().toLocaleString('en-GB', { timeZone: 'UTC' });
-}
-
-/**
- * Check if the user is on a mobile device.
- * https://dev.to/timhuang/a-simple-way-to-detect-if-browser-is-on-a-mobile-device-with-javascript-44j3
- * @returns True if the user is on a mobile device, false otherwise.
- */
-export function checkIfMobile() {
-  return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
-}
-
-/**
- * Convert the entity object of a Telegram message to HTML.
- * @param message The Telegram message to convert.
- * @returns A string containing the message as HTML.
- */
-export function entityToHtml(message: Message): string {
-  let returnValue = '';
-  if (!message.text) {
-    return '';
-  } else if (typeof message.text === 'string') {
-    returnValue = message.text;
-  } else {
-    returnValue = message.text
-      .map((item) => {
-        if (typeof item === 'string') {
-          return item;
-        } else {
-          switch (item.type) {
-            case 'text_link':
-              return `<a class="text-mauve" href="${item.href}" target="_blank">${item.text}</a>`;
-            case 'bold':
-              return `<strong>${item.text}</strong>`;
-            case 'code':
-              return `<code>${item.text}</code>`;
-            case 'italic':
-              return `<em>${item.text}</em>`;
-            case 'pre':
-              return `<pre>${item.text}</pre>`;
-            case 'strikethrough':
-              return `<s>${item.text}</s>`;
-            case 'underline':
-              return `<u>${item.text}</u>`;
-            case 'mention':
-              return `<a class="text-mauve" href="https://t.me/${item.text.replace('@', '')}" target="_blank">${item.text}</a>`;
-            case 'email':
-              return `<a class="text-mauve" href="mailto:${item.text}">${item.text}</a>`;
-            case 'phone_number':
-              return `<a class="text-mauve" href="tel:${item.text}">${item.text}</a>`;
-            default:
-              return item.text;
-          }
-        }
-      })
-      .join('');
-  }
-  return returnValue.replaceAll('\n', '<br>');
-}
-
-const getTag = (entity: any) => {
-  switch (entity.type) {
-    case 'bold':
-      return '<strong>';
-    case 'text_link':
-      return `<a href="${entity.href}" target="_blank">`;
-    case 'url':
-      return `<a href="${entity.text}" target="_blank">`;
-    case 'italic':
-      return '<em>';
-    case 'code':
-      return '<code>';
-    case 'strikethrough':
-      return '<s>';
-    case 'underline':
-      return '<u>';
-    case 'pre':
-      return '<pre>';
-    case 'mention':
-      return `<a href="https://t.me/${entity.text.replace('@', '')}" target="_blank">`;
-    case 'email':
-      return `<a href="mailto:${entity.text}">`;
-    case 'phone_number':
-      return `<a href="tel:${entity.text}">`;
-  }
-
-  return undefined;
-};
-
 /**
  * Shuffle an array.
  * @param array The array to shuffle.

frontend/src/app/newsfeed/interfaces.ts

@@ -20,7 +20,7 @@ export interface Message {
   from: string;
   from_id: string;
   author: string;
-  text: (string | TextEntity)[];
+  text: (string | TextEntity)[] | string;
   text_entities: TextEntity[];
   reactions: Reaction[];
 }