From 42e2bf6de9d06254352d99232e381bc485dd8993 Mon Sep 17 00:00:00 2001 From: Nico Jensch Date: Sat, 4 Jan 2025 18:15:28 +0100 Subject: [PATCH] fix(frontend): made cmd copyable --- flake.nix | 2 +- frontend/src/app/app.config.ts | 15 ++- frontend/src/app/docs/docs.component.css | 3 + frontend/src/app/docs/docs.component.html | 40 ++++--- frontend/src/app/docs/docs.component.ts | 40 +++---- frontend/src/app/docs/hljs-copybutton.ts | 91 -------------- .../package-stats.component.html | 4 +- package.json | 6 +- pnpm-lock.yaml | 112 +++--------------- tsconfig.base.json | 4 +- 10 files changed, 81 insertions(+), 236 deletions(-) delete mode 100644 frontend/src/app/docs/hljs-copybutton.ts diff --git a/flake.nix b/flake.nix index f6ac8687..f35df639 100644 --- 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 index 301db7da..e69fbdf2 100644 --- 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 index e69de29b..0653a269 100644 --- 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 index 7c032702..59524bc4 100644 --- a/frontend/src/app/docs/docs.component.html +++ b/frontend/src/app/docs/docs.component.html @@ -1,4 +1,4 @@ -
+
@@ -7,15 +7,19 @@ We start by retrieving the primary key to enable the installation of our keyring and mirror list.
-
-
+ 
+
+

Then, we append (adding at the end) the following to /etc/pacman.conf:

- 

-
+
+

After syncing your mirror lists, the repository is ready to use!

- 

-
+
@@ -106,8 +110,9 @@ the enabled mirrors.
This is why it is still better in such areas, where CDNs aren't well established. We recommend using it as follows: -
+
Make sure to insert all mirrors in your pacman.conf or use chaotic-mirrorlist with all of them active if using powerpill. @@ -118,18 +123,23 @@ >you can add the following to /etc/pacman.conf: -
+
You can pick the repository from which to download a package like this: -
+
Some AUR helpers like paru support this syntax as well. -
+
You must have the multilib repository enabled. diff --git a/frontend/src/app/docs/docs.component.ts b/frontend/src/app/docs/docs.component.ts index b20e5df0..576e3765 100644 --- 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 deleted file mode 100644 index 88cffd93..00000000 --- a/frontend/src/app/docs/hljs-copybutton.ts +++ /dev/null @@ -1,91 +0,0 @@ -/* eslint-disable @typescript-eslint/no-non-null-assertion */ -/* eslint-disable @typescript-eslint/ban-types */ - -/** - * @author Arron Hunt - * @copyright Copyright 2021. All rights reserved. - */ - -/** - * Adds a copy button to highlightjs code blocks - */ -export class CopyButtonPlugin { - hook!: Function | undefined; - callback!: Function | undefined; - - /** - * Create a new CopyButtonPlugin class instance - * @param {Object} [options] - Functions that will be called when a copy event fires - * @param {CopyCallback} [options.callback] - * @param {Hook} [options.hook] - */ - constructor({ hook, callback }: { hook?: Function | undefined; callback?: Function | undefined } = {}) { - this.hook = hook; - this.callback = callback; - } - - 'after:highlightElement'({ el, text }: { el: Element; text: string }) { - // Create the copy button and append it to the codeblock. - const button = Object.assign(document.createElement('button'), { - innerHTML: 'Copy', - className: 'hljs-copy-button', - }); - button.dataset['copied'] = 'false'; - el.parentElement!.classList.add('hljs-copy-wrapper'); - el.parentElement!.appendChild(button); - - // Add a custom proprety to the code block so that the copy button can reference and match its background-color value. - el.parentElement!.style.setProperty('--hljs-theme-background', window.getComputedStyle(el).backgroundColor); - - const hook = this.hook; - const callback = this.callback; - - button.onclick = () => { - if (!navigator.clipboard) return; - - let newText = text; - if (hook && typeof hook === 'function') { - newText = hook(text, el) || text; - } - - navigator.clipboard - .writeText(newText) - .then(() => { - button.innerHTML = 'Copied!'; - button.dataset['copied'] = 'true'; - - let alert: HTMLDivElement | null = Object.assign(document.createElement('div'), { - role: 'status', - className: 'hljs-copy-alert', - innerHTML: 'Copied to clipboard', - }); - el.parentElement!.appendChild(alert); - - setTimeout(() => { - if (alert) { - button.innerHTML = 'Copy'; - button.dataset['copied'] = 'false'; - el.parentElement!.removeChild(alert); - alert = null; - } - }, 2000); - }) - .then(() => { - if (typeof callback === 'function') return callback(newText, el); - }); - }; - } -} - -type CopyCallback = Function; -/** - * @param {string} text - The raw text copied to the clipboard. - * @param {HTMLElement} el - The code block element that was copied from. - * @returns {undefined} - */ -type Hook = Function; -/** - * @param {string} text - The raw text copied to the clipboard. - * @param {HTMLElement} el - The code block element that was copied from. - * @returns {string|undefined} - */ diff --git a/frontend/src/app/package-stats/package-stats.component.html b/frontend/src/app/package-stats/package-stats.component.html index 15a2c160..bb2cf1d8 100644 --- a/frontend/src/app/package-stats/package-stats.component.html +++ b/frontend/src/app/package-stats/package-stats.component.html @@ -1,7 +1,9 @@
diff --git a/package.json b/package.json index 142dbfad..0e6a7b6c 100644 --- 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" ] } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index cdaeda20..b45468ee 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -146,9 +146,9 @@ importers: nestjs-pino: specifier: ^4.2.0 version: 4.2.0(@nestjs/common@10.4.15(reflect-metadata@0.2.2)(rxjs@7.8.1))(pino-http@10.3.0) - ngx-highlight-js: - specifier: ^19.0.0 - version: 19.0.0 + ngx-highlightjs: + specifier: ^13.0.0 + version: 13.0.0(@angular/cdk@19.0.4(@angular/common@19.0.5(@angular/core@19.0.5(rxjs@7.8.1)(zone.js@0.15.0))(rxjs@7.8.1))(@angular/core@19.0.5(rxjs@7.8.1)(zone.js@0.15.0))(rxjs@7.8.1))(@angular/common@19.0.5(@angular/core@19.0.5(rxjs@7.8.1)(zone.js@0.15.0))(rxjs@7.8.1))(@angular/core@19.0.5(rxjs@7.8.1)(zone.js@0.15.0))(rxjs@7.8.1) passport: specifier: ^0.7.0 version: 0.7.0 @@ -219,9 +219,6 @@ importers: '@angular/language-service': specifier: 19.0.5 version: 19.0.5 - '@biomejs/biome': - specifier: ^1.9.4 - version: 1.9.4 '@catppuccin/highlightjs': specifier: 1.0.0 version: 1.0.0 @@ -1275,59 +1272,6 @@ packages: '@bcoe/v8-coverage@0.2.3': resolution: {integrity: sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==} - '@biomejs/biome@1.9.4': - resolution: {integrity: sha512-1rkd7G70+o9KkTn5KLmDYXihGoTaIGO9PIIN2ZB7UJxFrWw04CZHPYiMRjYsaDvVV7hP1dYNRLxSANLaBFGpog==} - engines: {node: '>=14.21.3'} - hasBin: true - - '@biomejs/cli-darwin-arm64@1.9.4': - resolution: {integrity: sha512-bFBsPWrNvkdKrNCYeAp+xo2HecOGPAy9WyNyB/jKnnedgzl4W4Hb9ZMzYNbf8dMCGmUdSavlYHiR01QaYR58cw==} - engines: {node: '>=14.21.3'} - cpu: [arm64] - os: [darwin] - - '@biomejs/cli-darwin-x64@1.9.4': - resolution: {integrity: sha512-ngYBh/+bEedqkSevPVhLP4QfVPCpb+4BBe2p7Xs32dBgs7rh9nY2AIYUL6BgLw1JVXV8GlpKmb/hNiuIxfPfZg==} - engines: {node: '>=14.21.3'} - cpu: [x64] - os: [darwin] - - '@biomejs/cli-linux-arm64-musl@1.9.4': - resolution: {integrity: sha512-v665Ct9WCRjGa8+kTr0CzApU0+XXtRgwmzIf1SeKSGAv+2scAlW6JR5PMFo6FzqqZ64Po79cKODKf3/AAmECqA==} - engines: {node: '>=14.21.3'} - cpu: [arm64] - os: [linux] - - '@biomejs/cli-linux-arm64@1.9.4': - resolution: {integrity: sha512-fJIW0+LYujdjUgJJuwesP4EjIBl/N/TcOX3IvIHJQNsAqvV2CHIogsmA94BPG6jZATS4Hi+xv4SkBBQSt1N4/g==} - engines: {node: '>=14.21.3'} - cpu: [arm64] - os: [linux] - - '@biomejs/cli-linux-x64-musl@1.9.4': - resolution: {integrity: sha512-gEhi/jSBhZ2m6wjV530Yy8+fNqG8PAinM3oV7CyO+6c3CEh16Eizm21uHVsyVBEB6RIM8JHIl6AGYCv6Q6Q9Tg==} - engines: {node: '>=14.21.3'} - cpu: [x64] - os: [linux] - - '@biomejs/cli-linux-x64@1.9.4': - resolution: {integrity: sha512-lRCJv/Vi3Vlwmbd6K+oQ0KhLHMAysN8lXoCI7XeHlxaajk06u7G+UsFSO01NAs5iYuWKmVZjmiOzJ0OJmGsMwg==} - engines: {node: '>=14.21.3'} - cpu: [x64] - os: [linux] - - '@biomejs/cli-win32-arm64@1.9.4': - resolution: {integrity: sha512-tlbhLk+WXZmgwoIKwHIHEBZUwxml7bRJgk0X2sPyNR3S93cdRq6XulAZRQJ17FYGGzWne0fgrXBKpl7l4M87Hg==} - engines: {node: '>=14.21.3'} - cpu: [arm64] - os: [win32] - - '@biomejs/cli-win32-x64@1.9.4': - resolution: {integrity: sha512-8Y5wMhVIPaWe6jw2H+KlEm4wP/f7EW3810ZLmDlrEEy5KvBsb9ECEfu/kMWD484ijfQ8+nIi0giMgu9g1UAuuA==} - engines: {node: '>=14.21.3'} - cpu: [x64] - os: [win32] - '@catppuccin/highlightjs@1.0.0': resolution: {integrity: sha512-Cq0b5pNkzAxTf7QwXkGcMnfEawOdaJP9wQJNsLO1PCqml+NgMe7mOknH3l/j/0Q3bgjijm+N26B8BAYiv18oQg==} @@ -6832,8 +6776,13 @@ packages: '@nestjs/common': ^8.0.0 || ^9.0.0 || ^10.0.0 pino-http: ^6.4.0 || ^7.0.0 || ^8.0.0 || ^9.0.0 || ^10.0.0 - ngx-highlight-js@19.0.0: - resolution: {integrity: sha512-nok7xywD9LXOvYTgWIQSlUeXyBgSVKMJdrpEfRFyiNg+WbVwO9iH/AFzFM0vc+UyB9lmMSWr5WHxCTPf15WZ4Q==} + ngx-highlightjs@13.0.0: + resolution: {integrity: sha512-ucE9lV/C1BWoOWq2Iw+L5xVpl1ijSYIAcCPUNm/u8wzVKScDnuiDODpJ9PnBGjRjwatyqI97BHOpijATJi2T+A==} + peerDependencies: + '@angular/cdk': '>=19.0.0' + '@angular/common': '>=19.0.0' + '@angular/core': '>=19.0.0' + rxjs: '>=7.0.0' node-abort-controller@3.1.1: resolution: {integrity: sha512-AGK2yQKIjRuqnc6VkX2Xj5d+QW8xZ87pa1UK6yA6ouUyuxfHuMP6umE5QK7UmTeOAymo+Zx1Fxiuw9rVx8taHQ==} @@ -10427,41 +10376,6 @@ snapshots: '@bcoe/v8-coverage@0.2.3': {} - '@biomejs/biome@1.9.4': - optionalDependencies: - '@biomejs/cli-darwin-arm64': 1.9.4 - '@biomejs/cli-darwin-x64': 1.9.4 - '@biomejs/cli-linux-arm64': 1.9.4 - '@biomejs/cli-linux-arm64-musl': 1.9.4 - '@biomejs/cli-linux-x64': 1.9.4 - '@biomejs/cli-linux-x64-musl': 1.9.4 - '@biomejs/cli-win32-arm64': 1.9.4 - '@biomejs/cli-win32-x64': 1.9.4 - - '@biomejs/cli-darwin-arm64@1.9.4': - optional: true - - '@biomejs/cli-darwin-x64@1.9.4': - optional: true - - '@biomejs/cli-linux-arm64-musl@1.9.4': - optional: true - - '@biomejs/cli-linux-arm64@1.9.4': - optional: true - - '@biomejs/cli-linux-x64-musl@1.9.4': - optional: true - - '@biomejs/cli-linux-x64@1.9.4': - optional: true - - '@biomejs/cli-win32-arm64@1.9.4': - optional: true - - '@biomejs/cli-win32-x64@1.9.4': - optional: true - '@catppuccin/highlightjs@1.0.0': {} '@catppuccin/palette@1.7.1': {} @@ -16670,9 +16584,13 @@ snapshots: '@nestjs/common': 10.4.15(reflect-metadata@0.2.2)(rxjs@7.8.1) pino-http: 10.3.0 - ngx-highlight-js@19.0.0: + ngx-highlightjs@13.0.0(@angular/cdk@19.0.4(@angular/common@19.0.5(@angular/core@19.0.5(rxjs@7.8.1)(zone.js@0.15.0))(rxjs@7.8.1))(@angular/core@19.0.5(rxjs@7.8.1)(zone.js@0.15.0))(rxjs@7.8.1))(@angular/common@19.0.5(@angular/core@19.0.5(rxjs@7.8.1)(zone.js@0.15.0))(rxjs@7.8.1))(@angular/core@19.0.5(rxjs@7.8.1)(zone.js@0.15.0))(rxjs@7.8.1): dependencies: + '@angular/cdk': 19.0.4(@angular/common@19.0.5(@angular/core@19.0.5(rxjs@7.8.1)(zone.js@0.15.0))(rxjs@7.8.1))(@angular/core@19.0.5(rxjs@7.8.1)(zone.js@0.15.0))(rxjs@7.8.1) + '@angular/common': 19.0.5(@angular/core@19.0.5(rxjs@7.8.1)(zone.js@0.15.0))(rxjs@7.8.1) + '@angular/core': 19.0.5(rxjs@7.8.1)(zone.js@0.15.0) highlight.js: 11.11.1 + rxjs: 7.8.1 tslib: 2.8.1 node-abort-controller@3.1.1: {} diff --git a/tsconfig.base.json b/tsconfig.base.json index c891b3ce..6d5bf08d 100644 --- a/tsconfig.base.json +++ b/tsconfig.base.json @@ -8,7 +8,7 @@ "experimentalDecorators": true, "importHelpers": true, "inlineSourceMap": true, - "lib": ["es2022", "dom"], + "lib": ["esnext", "dom"], "module": "esnext", "moduleResolution": "node", "paths": { @@ -17,7 +17,7 @@ "rootDir": ".", "skipDefaultLibCheck": true, "skipLibCheck": true, - "target": "es2022" + "target": "esnext" }, "exclude": ["node_modules", "tmp"] }