nxt-components logo nxt-components
Github

Extras

The extras library provides multiple utilities to load and display contents of source files and gists.

The extras rely on HttpClient to fetch contents, ensure that it is included with the providers.

import { provideHttpClient } from '@angular/common/http'
import { ApplicationConfig } from '@angular/core'

export const appConfig: ApplicationConfig = {
    providers: [
        provideHttpClient()
    ]
}

Examples

Display contents of a source file

View on GitHub
import { Component, ViewEncapsulation } from '@angular/core';

@Component({
    selector: 'app-sample',
    imports: [],
    templateUrl: './sample.component.html',
    styleUrl: './sample.component.scss',
    encapsulation: ViewEncapsulation.Emulated
})
export class SampleComponent {

}

<pre><code [nxtHighlight]="file.value()"
    language="ts"></code></pre>
import { Component, ViewEncapsulation } from '@angular/core'
import { HighlightDirective } from 'nxt-highlightjs'
import { fileResource } from 'nxt-highlightjs/extras'
import filePath from './file.txt'
 
@Component({
    selector: 'app-file',
    imports: [
        HighlightDirective
    ],
    templateUrl: './file.component.html',
    styleUrl: './file.component.css',
    encapsulation: ViewEncapsulation.Emulated
})
export class FileComponent {
 
    readonly file = fileResource(filePath, { formatUrl: true })
 
}

Display a file form a gist

View on GitHub
import { Component, ViewEncapsulation } from '@angular/core';

@Component({
    selector: 'app-sample',
    imports: [],
    templateUrl: './sample.component.html',
    styleUrl: './sample.component.scss',
    encapsulation: ViewEncapsulation.Emulated
})
export class SampleComponent {

}

@if (gist.isLoading()) {
<div class="d-flex justify-content-center">
    <div class="spinner-border"
        role="status">
        <span class="visually-hidden">Loading...</span>
    </div>
</div>
} @else if (gist.error(); as err) {
<div class="alert alert-danger"
    role="alert">
    <span class="gist-loading-error">{{ err.message }}</span>
</div>
} @else {
<pre [class.empty]="!gist.hasValue()"><code 
    [nxtHighlight]="(gist.value() | gistFile: 'sample.component.ts')?.content"
    language="ts"></code></pre>
}
import { Component, ViewEncapsulation } from '@angular/core'
import { HighlightDirective } from 'nxt-highlightjs'
import { GistFilePipe, gistResource } from 'nxt-highlightjs/extras'
 
@Component({
    selector: 'app-gist-file',
    imports: [
        GistFilePipe,
        HighlightDirective
    ],
    templateUrl: './gist-file.component.html',
    styleUrl: './gist-file.component.css',
    encapsulation: ViewEncapsulation.Emulated
})
export class GistFileComponent {
 
    readonly gistId = '745149f6fc352f9036908ffe99054578'
    readonly gist = gistResource(this.gistId)
 
}

Display contents of a gist

View on GitHub

<p>sample works!</p>

@if (gist.isLoading()) {
<div class="d-flex justify-content-center">
    <div class="spinner-border"
        role="status">
        <span class="visually-hidden">Loading...</span>
    </div>
</div>
} @else if (gist.error(); as err) {
<div class="alert alert-danger"
    role="alert">
    <span class="gist-loading-error">{{ err.message }}</span>
</div>
} @else {
<label for="gist"
    class="form-label">File</label>
<select [ngModel]="selectedFile()"
    (ngModelChange)="selectedFile.set($event)"
    class="form-select"
    name="gist">
    @for (file of gist.value()?.files | keyvalue; track file.key) {
    <option [value]="file.key">{{ file.value.filename }}</option>
    }
</select>
 
<br>
 
<pre [class.empty]="!gist.hasValue()"><code
    [nxtHighlight]="(gist.value() | gistFile: selectedFile())?.content"
    [language]="extName()"></code></pre>
}
import { KeyValuePipe } from '@angular/common'
import { Component, computed, linkedSignal, ViewEncapsulation } from '@angular/core'
import { FormsModule } from '@angular/forms'
import { HighlightDirective } from 'nxt-highlightjs'
import { Gist, GistFilePipe, gistResource } from 'nxt-highlightjs/extras'
 
@Component({
    selector: 'app-gist',
    imports: [
        GistFilePipe,
        HighlightDirective,
        KeyValuePipe,
        FormsModule
    ],
    templateUrl: './gist.component.html',
    styleUrl: './gist.component.css',
    encapsulation: ViewEncapsulation.Emulated
})
export class GistComponent {
 
    readonly gistId = '745149f6fc352f9036908ffe99054578'
    readonly gist = gistResource(this.gistId)
 
    readonly selectedFile = linkedSignal<Gist | undefined, string | undefined>({
        source: () => this.gist.hasValue() ? this.gist.value() : undefined,
        computation: (gist, prev) => {
            if (!gist || ((prev?.value && prev.value in gist.files)))
                return prev?.value
 
            return Object.keys(gist.files)[0]
        }
    })
 
    readonly extName = computed(() => this.selectedFile()?.split('.').reverse()[0] ?? '')
 
}