fix(frontend): made cmd copyable

chaotic-cx · Jan 4, 2025 · 42e2bf6 · 42e2bf6
1 parent 6f53935
commit 42e2bf6
Show file tree

Hide file tree

Showing 10 changed files with 81 additions and 236 deletions.
diff --git a/flake.nix b/flake.nix
@@ -87,7 +87,7 @@
                 corepack pnpm install
               else
                 outcome=$(corepack pnpm install)
-                if  [[ !  "$outcome" =~ "Lockfile is up to date" ]]; then
+                if  [[ !  "$outcome" =~ "Already up to date" ]]; then
                   echo "Dependencies have been updated"
                 fi
               fi

diff --git a/frontend/src/app/app.config.ts b/frontend/src/app/app.config.ts
@@ -1,12 +1,12 @@
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 import { ApplicationConfig, LOCALE_ID, provideZoneChangeDetection } from '@angular/core';
-import { provideRouter } from '@angular/router';
-import { routes } from './app.routes';
 import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
-import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
+import { provideRouter } from '@angular/router';
 import { provideGarudaNG } from '@garudalinux/core';
-import { provideSFConfig } from 'ngx-highlight-js';
+import { provideHighlightOptions } from 'ngx-highlightjs';
 import { APP_CONFIG } from '../environments/app-config.token';
 import { environment } from '../environments/environment.dev';
+import { routes } from './app.routes';
 import { Catppuccin } from './theme';
 
 export const appConfig: ApplicationConfig = {
@@ -24,9 +24,14 @@ export const appConfig: ApplicationConfig = {
         ripple: true,
       },
     ),
+    provideHighlightOptions({
+      coreLibraryLoader: () => import('highlight.js/lib/core'),
+      languages: {
+        shell: () => import('highlight.js/lib/languages/shell.js'),
+      },
+    }),
     provideHttpClient(withInterceptorsFromDi()),
     provideRouter(routes),
-    provideSFConfig({ lang: 'shell' }),
     provideZoneChangeDetection({ eventCoalescing: true }),
     { provide: APP_CONFIG, useValue: environment },
     { provide: LOCALE_ID, useValue: 'en-GB' },

diff --git a/frontend/src/app/docs/docs.component.css b/frontend/src/app/docs/docs.component.css
@@ -0,0 +1,3 @@
+pre {
+  @apply cursor-pointer;
+}
diff --git a/frontend/src/app/docs/docs.component.html b/frontend/src/app/docs/docs.component.html
@@ -1,4 +1,4 @@
-<div highlight-js mode="default" class="chaotic-container-regular">
+<div class="chaotic-container-regular">
   <chaotic-title title="Documentation" subtitle="How to get started quickly."></chaotic-title>
 
   <div class="mt-5">
@@ -7,15 +7,19 @@
         We start by retrieving the primary key to enable the installation of our keyring and mirror list.
       </div>
       <div>
-        <pre class="whitespace-pre-wrap py-5 text-base"><code [innerHtml]="installRepo"
-                                                              language="shell"></code></pre>
-        <br />
+        <pre (click)="copyText(installRepo)" class="whitespace-pre-wrap py-5 text-base">
+          <code [highlight]="installRepo" 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>
-        <pre class="whitespace-pre-wrap py-5"><code [innerHtml]="appendRepo" language="shell"></code>
-      </pre>
+        <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>
-        <pre class="whitespace-pre-wrap py-5"><code [innerHtml]="syncMirrors" language="shell"></code>
-      </pre>
+        <pre class="whitespace-pre-wrap py-5"><code (click)="copyText(syncMirrors)" [highlight]="syncMirrors"
+                                                    language="shell" pTooltip="Copy to clipboard"
+                                                    tooltipPosition="top"></code></pre>
       </div>
     </p-panel>
   </div>
@@ -106,8 +110,9 @@
         the enabled mirrors. <br />
         This is why it is still better in such areas, where CDNs aren't well established. We recommend using it as
         follows:
-        <pre class="whitespace-pre-wrap py-5 pl-5"><code [innerHtml]="powerpillUsage"
-                                                         language="shell"></code></pre>
+        <pre class="whitespace-pre-wrap py-5 pl-5"><code (click)="copyText(powerpillUsage)" [highlight]="powerpillUsage"
+                                                         language="shell" pTooltip="Copy to clipboard"
+                                                         tooltipPosition="top"></code></pre>
         Make sure to insert all mirrors in your <i>pacman.conf</i> or use <i>chaotic-mirrorlist</i> with all of them
         active if using powerpill.
 
@@ -118,18 +123,23 @@
           >you can add the following</a
         >
         to <i>/etc/pacman.conf</i>:
-        <pre class="whitespace-pre-wrap py-5 pl-5"><code [innerHtml]="ignorePkg" language="shell"></code></pre>
+        <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 [innerHtml]="installPackage"
-                                                         language="shell"></code></pre>
+        <pre class="whitespace-pre-wrap py-5 pl-5"><code (click)="copyText(installPackage)" [highlight]="installPackage"
+                                                         language="shell" pTooltip="Copy to clipboard"
+                                                         tooltipPosition="top"></code></pre>
         Some AUR helpers like
         <a class="text-mauve" href="https://github.com/Morganamilo/paru" rel="noopener" target="_blank">paru</a>
         support this syntax as well.
-        <pre class="whitespace-pre-wrap py-5 pl-5"><code [innerHtml]="installPackageParu"
-                                                         language="shell"></code></pre>
+        <pre class="whitespace-pre-wrap py-5 pl-5"><code (click)="copyText(installPackageParu)"
+                                                         [highlight]="installPackageParu"
+                                                         language="shell" pTooltip="Copy to clipboard"
+                                                         tooltipPosition="top"></code></pre>
 
         <p-divider />
         <a>You must have the multilib repository enabled.</a>

diff --git a/frontend/src/app/docs/docs.component.ts b/frontend/src/app/docs/docs.component.ts
@@ -1,22 +1,21 @@
-import { isPlatformBrowser } from '@angular/common';
-import { Component, inject, OnInit, PLATFORM_ID } from '@angular/core';
-import hljs from 'highlight.js';
-import { CopyButtonPlugin } from './hljs-copybutton';
-import { HighlightJsDirective } from 'ngx-highlight-js';
-import { Panel } from 'primeng/panel';
+import { Component, inject, OnInit } from '@angular/core';
+import { Meta } from '@angular/platform-browser';
+import { Router, RouterLink } from '@angular/router';
+import { MessageToastService } from '@garudalinux/core';
+import { Highlight } from 'ngx-highlightjs';
 import { Divider } from 'primeng/divider';
+import { Panel } from 'primeng/panel';
+import { Tooltip } from 'primeng/tooltip';
 import { APP_CONFIG } from '../../environments/app-config.token';
 import { EnvironmentModel } from '../../environments/environment.model';
-import { TitleComponent } from '../title/title.component';
-import { Router, RouterLink } from '@angular/router';
-import { Meta } from '@angular/platform-browser';
 import { updateSeoTags } from '../functions';
+import { TitleComponent } from '../title/title.component';
 
 @Component({
   selector: 'chaotic-docs',
   templateUrl: './docs.component.html',
   styleUrl: './docs.component.css',
-  imports: [HighlightJsDirective, Panel, Divider, TitleComponent, RouterLink],
+  imports: [Panel, Divider, TitleComponent, RouterLink, Highlight, Tooltip],
 })
 export class DocsComponent implements OnInit {
   isBrowser = true;
@@ -29,28 +28,19 @@ export class DocsComponent implements OnInit {
   syncMirrors = '$ sudo pacman -Sy\n$ sudo pacman -Su ungoogled-chromium';
 
   private readonly appConfig: EnvironmentModel = inject(APP_CONFIG);
+  private readonly messageToastService = inject(MessageToastService);
   private readonly meta = inject(Meta);
-  private readonly platformId = inject(PLATFORM_ID);
   private readonly router = inject(Router);
 
   constructor() {
-    // Prevent document is not defined errors during building / SSR
-    this.isBrowser = isPlatformBrowser(this.platformId);
     this.installRepo =
       `$ 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'\n";
+      "$ sudo pacman -U 'https://cdn-mirror.chaotic.cx/chaotic-aur/chaotic-mirrorlist.pkg.tar.zst'";
   }
 
   ngOnInit() {
-    if (this.isBrowser) {
-      setTimeout(() => {
-        hljs.addPlugin(new CopyButtonPlugin());
-        hljs.highlightAll();
-      }, 500);
-    }
-
     updateSeoTags(
       this.meta,
       'Documentation',
@@ -59,4 +49,12 @@ export class DocsComponent implements OnInit {
       this.router.url,
     );
   }
+
+  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');
+    });
+  }
 }
diff --git a/frontend/src/app/docs/hljs-copybutton.ts b/frontend/src/app/docs/hljs-copybutton.ts
diff --git a/frontend/src/app/package-stats/package-stats.component.html b/frontend/src/app/package-stats/package-stats.component.html
@@ -1,7 +1,9 @@
 <div class="chaotic-container-wide-center">
   <chaotic-title
     title="Statistics and data"
-    subtitleHtml="Area for package statistics and other fun stuff.<br>Total users last month: {{ totalUsers() }}"
+    subtitleHtml="Area for package statistics and other fun stuff.<br>Total users last month: {{
+      totalUsers()
+    }}<br>All stats shown here are currently relating to one month of data."
   ></chaotic-title>
 
   <div>

diff --git a/package.json b/package.json
@@ -73,7 +73,7 @@
     "moleculer": "^0.14.35",
     "nestjs-omacache": "^1.1.6",
     "nestjs-pino": "^4.2.0",
-    "ngx-highlight-js": "^19.0.0",
+    "ngx-highlightjs": "^13.0.0",
     "passport": "^0.7.0",
     "passport-jwt": "^4.0.1",
     "passport-local": "^1.0.0",
@@ -99,7 +99,6 @@
     "@angular/cli": "~19.0.6",
     "@angular/compiler-cli": "19.0.5",
     "@angular/language-service": "19.0.5",
-    "@biomejs/biome": "^1.9.4",
     "@catppuccin/highlightjs": "1.0.0",
     "@catppuccin/palette": "^1.7.1",
     "@catppuccin/tailwindcss": "^0.1.6",
@@ -175,7 +174,8 @@
       "lmdb",
       "msgpackr-extract",
       "nestjs-pino",
-      "nx"
+      "nx",
+      "workerd"
     ]
   }
 }