diff --git a/angular.json b/angular.json index f6af84c..3766378 100644 --- a/angular.json +++ b/angular.json @@ -63,7 +63,7 @@ "projects/ngx-gist-playground/src/assets" ], "styles": [ - "@angular/material/prebuilt-themes/pink-bluegrey.css", + "@angular/material/prebuilt-themes/indigo-pink.css", "projects/ngx-gist-playground/src/styles.scss" ], "scripts": [] diff --git a/package.json b/package.json index 7d3b6b2..6fb020c 100644 --- a/package.json +++ b/package.json @@ -20,7 +20,10 @@ "@angular/platform-browser": "^15.1.0", "@angular/platform-browser-dynamic": "^15.1.0", "@angular/router": "^15.1.0", + "highlightjs-copy": "^1.0.3", + "highlightjs-line-numbers.js": "^2.8.0", "iframe-resizer": "^4.3.3", + "ngx-highlightjs": "^8.0.0", "rxjs": "~7.8.0", "tslib": "^2.3.0", "zone.js": "~0.12.0" @@ -40,4 +43,4 @@ "ng-packagr": "^15.1.0", "typescript": "~4.9.4" } -} \ No newline at end of file +} diff --git a/projects/ngx-gist-playground/src/app/app-routing.module.ts b/projects/ngx-gist-playground/src/app/app-routing.module.ts deleted file mode 100644 index 0297262..0000000 --- a/projects/ngx-gist-playground/src/app/app-routing.module.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { NgModule } from '@angular/core'; -import { RouterModule, Routes } from '@angular/router'; - -const routes: Routes = []; - -@NgModule({ - imports: [RouterModule.forRoot(routes)], - exports: [RouterModule] -}) -export class AppRoutingModule { } diff --git a/projects/ngx-gist-playground/src/app/app.component.html b/projects/ngx-gist-playground/src/app/app.component.html index e69de29..6319dad 100644 --- a/projects/ngx-gist-playground/src/app/app.component.html +++ b/projects/ngx-gist-playground/src/app/app.component.html @@ -0,0 +1,33 @@ +
+ + + + + + {{link.icon}} + {{link.title}} + + + + + + + +
diff --git a/projects/ngx-gist-playground/src/app/app.component.scss b/projects/ngx-gist-playground/src/app/app.component.scss index e69de29..10c00d2 100644 --- a/projects/ngx-gist-playground/src/app/app.component.scss +++ b/projects/ngx-gist-playground/src/app/app.component.scss @@ -0,0 +1,78 @@ +:host { + display: block; + width: 100%; + height: 100%; +} + +.ngx-gist-playground-wrapper { + display: flex; + flex-direction: column; + position: relative; +} + +.flex-fill { + flex: 1 0 auto; +} + +#nav { + height: var(--ngx-gist-playground-nav-height); + background: var(--ngx-gist-playground-nav-background); + color: var(--ngx-gist-playground-nav-color); + position: fixed; + top: 0; + left: 0; + right: 0; + z-index: 1001; + box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px; +} + +#nav mat-toolbar { + background-color: inherit; +} + +#nav .title { + margin-left: 16px; + font-size: 1.161rem; + font-weight: 700; + font-family: Poppins, sans-serif; + letter-spacing: -0.0314rem; +} + +#nav .code-registry-list { + display: flex; + + .code-registry-list__item { + display: flex; + + .code-registry-link { + img { + height: 28px; + } + } + } +} + +#container { + height: 100%; +} + +#sidenav { + top: var(--ngx-gist-playground-nav-height) !important; + width: var(--ngx-gist-playground-sidenav-width) !important; + color: var(--ngx-gist-playground-sidenav-color); + background: var(--ngx-gist-playground-sidenav-background); + border-right: var(--ngx-gist-playground-sidenav-border); +} + +#sidenav a[mat-list-item] { + padding-left: 12px; +} + +#sidenav .mat-mdc-list-item .mdc-list-item__primary-text { + font-family: Poppins, sans-serif; +} + +#content { + padding-top: var(--ngx-gist-playground-nav-height); + overflow: hidden; +} diff --git a/projects/ngx-gist-playground/src/app/app.component.ts b/projects/ngx-gist-playground/src/app/app.component.ts index 2e2feb9..8320da9 100644 --- a/projects/ngx-gist-playground/src/app/app.component.ts +++ b/projects/ngx-gist-playground/src/app/app.component.ts @@ -8,11 +8,16 @@ import {Component} from '@angular/core'; +import {routerLinks} from './navigation/router-links'; + @Component({ selector: 'ngx-gist-playground-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'], }) export class AppComponent { + GITHUB_REPO_URL = 'https://github.com/ekkolon/ngx-gist'; title = 'ngx-gist-playground'; + + routerLinks = routerLinks; } diff --git a/projects/ngx-gist-playground/src/app/app.module.ts b/projects/ngx-gist-playground/src/app/app.module.ts index 403a118..c0f18e4 100644 --- a/projects/ngx-gist-playground/src/app/app.module.ts +++ b/projects/ngx-gist-playground/src/app/app.module.ts @@ -10,15 +10,65 @@ import {NgModule} from '@angular/core'; import {BrowserModule} from '@angular/platform-browser'; import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; +import {MatButtonModule} from '@angular/material/button'; +import {MatIconModule} from '@angular/material/icon'; +import {MatListModule} from '@angular/material/list'; +import {MatSidenavModule} from '@angular/material/sidenav'; +import {MatToolbarModule} from '@angular/material/toolbar'; + +import {HighlightModule, HIGHLIGHT_OPTIONS} from 'ngx-highlightjs'; + import {NgxGistModule} from '@ekkolon/ngx-gist'; -import {AppRoutingModule} from './app-routing.module'; import {AppComponent} from './app.component'; +import {ApiReferenceComponent} from './routes/api-reference/api-reference.component'; +import {AppRoutingModule} from './routes/app-routing.module'; +import {ExamplesComponent} from './routes/examples/examples.component'; +import {GettingStartedComponent} from './routes/getting-started/getting-started.component'; +import {HomeComponent} from './routes/home/home.component'; +import {SecurityComponent} from './routes/security/security.component'; + +const materialModules = [ + MatSidenavModule, + MatToolbarModule, + MatIconModule, + MatListModule, + MatButtonModule, +]; @NgModule({ - declarations: [AppComponent], - imports: [BrowserModule, BrowserAnimationsModule, NgxGistModule, AppRoutingModule], - providers: [], + declarations: [ + AppComponent, + HomeComponent, + GettingStartedComponent, + ExamplesComponent, + SecurityComponent, + ApiReferenceComponent, + ], + imports: [ + BrowserModule, + BrowserAnimationsModule, + NgxGistModule, + AppRoutingModule, + NgScrollbarModule, + HighlightModule, + ...materialModules, + ], + providers: [ + { + provide: HIGHLIGHT_OPTIONS, + useValue: { + coreLibraryLoader: async () => import('highlight.js/lib/core'), + lineNumbersLoader: () => import('highlightjs-line-numbers.js' as any), // Optional, only if you want the line numbers + languages: { + typescript: () => import('highlight.js/lib/languages/typescript'), + shell: () => import('highlight.js/lib/languages/shell'), + xml: () => import('highlight.js/lib/languages/xml'), + }, + //themePath: 'path-to-theme.css', // Optional, and useful if you want to change the theme dynamically + }, + }, + ], bootstrap: [AppComponent], }) export class AppModule {} diff --git a/projects/ngx-gist-playground/src/app/navigation/router-links.ts b/projects/ngx-gist-playground/src/app/navigation/router-links.ts new file mode 100644 index 0000000..472993a --- /dev/null +++ b/projects/ngx-gist-playground/src/app/navigation/router-links.ts @@ -0,0 +1,33 @@ +export interface RouterLink { + path: string; + title: string; + icon: string; +} + +export const routerLinks: RouterLink[] = [ + { + path: '/', + title: 'Home', + icon: 'home', + }, + { + path: '/getting-started', + title: 'Getting Started', + icon: 'rocket_launch', + }, + { + path: '/examples', + title: 'Examples', + icon: 'view_cozy', + }, + { + path: 'security', + title: 'Security', + icon: 'security', + }, + { + path: 'api-reference', + title: 'API Reference', + icon: 'api', + }, +]; diff --git a/projects/ngx-gist-playground/src/app/routes/api-reference/api-reference.component.html b/projects/ngx-gist-playground/src/app/routes/api-reference/api-reference.component.html new file mode 100644 index 0000000..4d40df7 --- /dev/null +++ b/projects/ngx-gist-playground/src/app/routes/api-reference/api-reference.component.html @@ -0,0 +1,6 @@ +
+
+

API Reference

+
+
+
diff --git a/projects/ngx-gist-playground/src/app/routes/api-reference/api-reference.component.scss b/projects/ngx-gist-playground/src/app/routes/api-reference/api-reference.component.scss new file mode 100644 index 0000000..5d4e87f --- /dev/null +++ b/projects/ngx-gist-playground/src/app/routes/api-reference/api-reference.component.scss @@ -0,0 +1,3 @@ +:host { + display: block; +} diff --git a/projects/ngx-gist-playground/src/app/routes/api-reference/api-reference.component.spec.ts b/projects/ngx-gist-playground/src/app/routes/api-reference/api-reference.component.spec.ts new file mode 100644 index 0000000..41784ce --- /dev/null +++ b/projects/ngx-gist-playground/src/app/routes/api-reference/api-reference.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ApiReferenceComponent } from './api-reference.component'; + +describe('ApiReferenceComponent', () => { + let component: ApiReferenceComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ ApiReferenceComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(ApiReferenceComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/projects/ngx-gist-playground/src/app/routes/api-reference/api-reference.component.ts b/projects/ngx-gist-playground/src/app/routes/api-reference/api-reference.component.ts new file mode 100644 index 0000000..d3552fa --- /dev/null +++ b/projects/ngx-gist-playground/src/app/routes/api-reference/api-reference.component.ts @@ -0,0 +1,9 @@ +import { Component } from '@angular/core'; + +@Component({ + templateUrl: './api-reference.component.html', + styleUrls: ['./api-reference.component.scss'] +}) +export class ApiReferenceComponent { + +} diff --git a/projects/ngx-gist-playground/src/app/routes/app-routing.module.ts b/projects/ngx-gist-playground/src/app/routes/app-routing.module.ts new file mode 100644 index 0000000..9bc9d5b --- /dev/null +++ b/projects/ngx-gist-playground/src/app/routes/app-routing.module.ts @@ -0,0 +1,37 @@ +import {NgModule} from '@angular/core'; +import {RouterModule, Routes} from '@angular/router'; + +import {ApiReferenceComponent} from './api-reference/api-reference.component'; +import {ExamplesComponent} from './examples/examples.component'; +import {GettingStartedComponent} from './getting-started/getting-started.component'; +import {HomeComponent} from './home/home.component'; +import {SecurityComponent} from './security/security.component'; + +const routes: Routes = [ + { + path: 'getting-started', + component: GettingStartedComponent, + }, + { + path: 'examples', + component: ExamplesComponent, + }, + { + path: 'security', + component: SecurityComponent, + }, + { + path: 'api-reference', + component: ApiReferenceComponent, + }, + { + path: '', + component: HomeComponent, + }, +]; + +@NgModule({ + imports: [RouterModule.forRoot(routes)], + exports: [RouterModule], +}) +export class AppRoutingModule {} diff --git a/projects/ngx-gist-playground/src/app/routes/examples/examples.component.html b/projects/ngx-gist-playground/src/app/routes/examples/examples.component.html new file mode 100644 index 0000000..4ebd39a --- /dev/null +++ b/projects/ngx-gist-playground/src/app/routes/examples/examples.component.html @@ -0,0 +1,33 @@ +
+
+ +

Examples

+ +
+

+ A collection of examples of how to use the library. +

+
+
+
+
+

Embed a single gist file

+

+ Template:
<ngx-gist [gistId]="'05151ac90b51a5d3a0c3e85cb942a456'" file="ngx_gist_embed_example_2.py"></ngx-gist> +

+ + +
+ +
+

Embed all gist files

+

+ Template:
<ngx-gist [gistId]="'05151ac90b51a5d3a0c3e85cb942a456'"></ngx-gist> +

+ + +
+
+
diff --git a/projects/ngx-gist-playground/src/app/routes/examples/examples.component.scss b/projects/ngx-gist-playground/src/app/routes/examples/examples.component.scss new file mode 100644 index 0000000..5d4e87f --- /dev/null +++ b/projects/ngx-gist-playground/src/app/routes/examples/examples.component.scss @@ -0,0 +1,3 @@ +:host { + display: block; +} diff --git a/projects/ngx-gist-playground/src/app/routes/examples/examples.component.spec.ts b/projects/ngx-gist-playground/src/app/routes/examples/examples.component.spec.ts new file mode 100644 index 0000000..cf4d45c --- /dev/null +++ b/projects/ngx-gist-playground/src/app/routes/examples/examples.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ExamplesComponent } from './examples.component'; + +describe('ExamplesComponent', () => { + let component: ExamplesComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ ExamplesComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(ExamplesComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/projects/ngx-gist-playground/src/app/routes/examples/examples.component.ts b/projects/ngx-gist-playground/src/app/routes/examples/examples.component.ts new file mode 100644 index 0000000..4e7bb67 --- /dev/null +++ b/projects/ngx-gist-playground/src/app/routes/examples/examples.component.ts @@ -0,0 +1,7 @@ +import {Component} from '@angular/core'; + +@Component({ + templateUrl: './examples.component.html', + styleUrls: ['./examples.component.scss'], +}) +export class ExamplesComponent {} diff --git a/projects/ngx-gist-playground/src/app/routes/getting-started/getting-started.component.html b/projects/ngx-gist-playground/src/app/routes/getting-started/getting-started.component.html new file mode 100644 index 0000000..b9e78e7 --- /dev/null +++ b/projects/ngx-gist-playground/src/app/routes/getting-started/getting-started.component.html @@ -0,0 +1,66 @@ +
+
+ +

Getting Started

+

Embedding GitHub Gists in Angular made easy

+
+

+ This simple, lightweight and high-performance library allows you to embed GitHub Gists in your Angular + application without any hassle. +

+
+
+
+
+

Prequisites

+ +
+

Make sure to have iframe-resizer installed. This library is needed for + auto-resizing the iframe + in which the gist is rendered.

+ 
+          
+
+
+ +
+
+

Installation

+ + +
+

Install the library with npm

+ 
+          
+
+
+ +
+

Or use yarn

+ 
+          
+
+
+
+ +
+

Usage

+ + +
+

Import the library into desired module

+ 
+          
+
+
+ + +
+

Use the ngx-gist component in your template

+ 
+          
+
+
+
+
+
diff --git a/projects/ngx-gist-playground/src/app/routes/getting-started/getting-started.component.scss b/projects/ngx-gist-playground/src/app/routes/getting-started/getting-started.component.scss new file mode 100644 index 0000000..45740e6 --- /dev/null +++ b/projects/ngx-gist-playground/src/app/routes/getting-started/getting-started.component.scss @@ -0,0 +1,41 @@ +:host { + display: block; +} + +.ngx-gist-playground-page__content__item__code__block { + margin-bottom: 1.618rem; + + pre { + margin: 0; + } + + pre code { + border-radius: 4px; + } +} + +.ngx-gist-playground-page__content__item__code__block:not(.single-line) { + margin-top: -16px; + + p { + margin-bottom: 0; + } +} + +.ngx-gist-playground-page__content__item__code__block:first-of-type { + margin-top: 24px; +} + +.ngx-gist-playground-page__content__item__code__block.single-line { + pre { + white-space: inherit; + } +} + +.ngx-gist-playground-page__content__item__code__block:first-child:not(.single-line) { + margin-top: 24px; +} + +.ngx-gist-playground-page__content__item__code__block:last-child { + margin-bottom: 0; +} diff --git a/projects/ngx-gist-playground/src/app/routes/getting-started/getting-started.component.spec.ts b/projects/ngx-gist-playground/src/app/routes/getting-started/getting-started.component.spec.ts new file mode 100644 index 0000000..d1a7903 --- /dev/null +++ b/projects/ngx-gist-playground/src/app/routes/getting-started/getting-started.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { GettingStartedComponent } from './getting-started.component'; + +describe('GettingStartedComponent', () => { + let component: GettingStartedComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ GettingStartedComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(GettingStartedComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/projects/ngx-gist-playground/src/app/routes/getting-started/getting-started.component.ts b/projects/ngx-gist-playground/src/app/routes/getting-started/getting-started.component.ts new file mode 100644 index 0000000..02dc474 --- /dev/null +++ b/projects/ngx-gist-playground/src/app/routes/getting-started/getting-started.component.ts @@ -0,0 +1,40 @@ +import {Component} from '@angular/core'; + +@Component({ + templateUrl: './getting-started.component.html', + styleUrls: ['./getting-started.component.scss'], +}) +export class GettingStartedComponent { + installationStep1 = `npm install iframe-resizer`; + + installationStep2 = `npm install @ekkolon/ngx-gist`; + + installationStep3 = `yarn add @ekkolon/ngx-gist`; + + usageStep1 = `// app.module.ts + +import {NgxGistModule} from '@ekkolon/ngx-gist'; + +export class AppModule { + ... + imports: [ + ... + NgxGistModule + ] +}`; + + usageStep2 = ` +... + + +
+ +
+ + +
+ +
+ +...`; +} diff --git a/projects/ngx-gist-playground/src/app/routes/home/home.component.html b/projects/ngx-gist-playground/src/app/routes/home/home.component.html new file mode 100644 index 0000000..0e03b7d --- /dev/null +++ b/projects/ngx-gist-playground/src/app/routes/home/home.component.html @@ -0,0 +1,44 @@ +
+
+ +

ngx-gist

+

Embedding GitHub Gists in Angular made easy

+
+

+ This simple, lightweight and high-performance library allows you to embed GitHub Gists in your Angular + application without any hassle. +

+
+
+
+
+

Features

+

+ This is a simple playground for your gists. You can use it to test your + gists and share them with others. +

+
    +
  • Embed a gist by ID
    • +
  • Embed specific file from a list of files within a gist
    • +
  • Autosize rendered IFrame element
    • +
+
+
+

How to use it?

+

+ You can use it by simply pasting the URL of your gist in the input field + and clicking on the "Load" button. You can also use the "Share" button to + share your gist with others. +

+
+
+

How to contribute?

+

+ You can contribute by simply forking the + repository + and submitting a pull request. +

+
+
+
diff --git a/projects/ngx-gist-playground/src/app/routes/home/home.component.scss b/projects/ngx-gist-playground/src/app/routes/home/home.component.scss new file mode 100644 index 0000000..5d4e87f --- /dev/null +++ b/projects/ngx-gist-playground/src/app/routes/home/home.component.scss @@ -0,0 +1,3 @@ +:host { + display: block; +} diff --git a/projects/ngx-gist-playground/src/app/routes/home/home.component.spec.ts b/projects/ngx-gist-playground/src/app/routes/home/home.component.spec.ts new file mode 100644 index 0000000..5075be7 --- /dev/null +++ b/projects/ngx-gist-playground/src/app/routes/home/home.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { HomeComponent } from './home.component'; + +describe('HomeComponent', () => { + let component: HomeComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ HomeComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(HomeComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/projects/ngx-gist-playground/src/app/routes/home/home.component.ts b/projects/ngx-gist-playground/src/app/routes/home/home.component.ts new file mode 100644 index 0000000..2454e49 --- /dev/null +++ b/projects/ngx-gist-playground/src/app/routes/home/home.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'ngx-gist-playground-home', + templateUrl: './home.component.html', + styleUrls: ['./home.component.scss'] +}) +export class HomeComponent { + +} diff --git a/projects/ngx-gist-playground/src/app/routes/security/security.component.html b/projects/ngx-gist-playground/src/app/routes/security/security.component.html new file mode 100644 index 0000000..bcee687 --- /dev/null +++ b/projects/ngx-gist-playground/src/app/routes/security/security.component.html @@ -0,0 +1,6 @@ +
+
+

Security

+
+
+
diff --git a/projects/ngx-gist-playground/src/app/routes/security/security.component.scss b/projects/ngx-gist-playground/src/app/routes/security/security.component.scss new file mode 100644 index 0000000..5d4e87f --- /dev/null +++ b/projects/ngx-gist-playground/src/app/routes/security/security.component.scss @@ -0,0 +1,3 @@ +:host { + display: block; +} diff --git a/projects/ngx-gist-playground/src/app/routes/security/security.component.spec.ts b/projects/ngx-gist-playground/src/app/routes/security/security.component.spec.ts new file mode 100644 index 0000000..c5845da --- /dev/null +++ b/projects/ngx-gist-playground/src/app/routes/security/security.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { SecurityComponent } from './security.component'; + +describe('SecurityComponent', () => { + let component: SecurityComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ SecurityComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(SecurityComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/projects/ngx-gist-playground/src/app/routes/security/security.component.ts b/projects/ngx-gist-playground/src/app/routes/security/security.component.ts new file mode 100644 index 0000000..08774ca --- /dev/null +++ b/projects/ngx-gist-playground/src/app/routes/security/security.component.ts @@ -0,0 +1,9 @@ +import { Component } from '@angular/core'; + +@Component({ + templateUrl: './security.component.html', + styleUrls: ['./security.component.scss'] +}) +export class SecurityComponent { + +} diff --git a/projects/ngx-gist-playground/src/assets/logos/github-mark-white.svg b/projects/ngx-gist-playground/src/assets/logos/github-mark-white.svg new file mode 100644 index 0000000..d5e6491 --- /dev/null +++ b/projects/ngx-gist-playground/src/assets/logos/github-mark-white.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/projects/ngx-gist-playground/src/assets/logos/github-mark.svg b/projects/ngx-gist-playground/src/assets/logos/github-mark.svg new file mode 100644 index 0000000..37fa923 --- /dev/null +++ b/projects/ngx-gist-playground/src/assets/logos/github-mark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/projects/ngx-gist-playground/src/index.html b/projects/ngx-gist-playground/src/index.html index 7f2760a..450815a 100644 --- a/projects/ngx-gist-playground/src/index.html +++ b/projects/ngx-gist-playground/src/index.html @@ -7,9 +7,18 @@ - + + + + + - + diff --git a/projects/ngx-gist-playground/src/styles.scss b/projects/ngx-gist-playground/src/styles.scss index 7e7239a..ac48d14 100644 --- a/projects/ngx-gist-playground/src/styles.scss +++ b/projects/ngx-gist-playground/src/styles.scss @@ -1,4 +1,106 @@ /* You can add global styles to this file, and also import other style files */ +@import '~highlight.js/styles/night-owl.css'; +@import '~highlightjs-copy/styles/highlightjs-copy.css'; -html, body { height: 100%; } -body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; } +html, +body { + height: 100%; +} +body { + margin: 0; + font-family: Roboto, 'Helvetica Neue', sans-serif; +} + +// Function to scale a pixel or rem value by the golden ratio +@function scale($value) { + @return $value * 1.61803398875; +} + +img { + display: block; + max-width: 100%; +} + +:root { + --ngx-gist-playground-nav-height: 64px; + --ngx-gist-playground-nav-background: #fff; + --ngx-gist-playground-nav-color: #1d1d1d; + + --ngx-gist-playground-sidenav-width: 300px; + --ngx-gist-playground-sidenav-background: #f5f5f5; + --ngx-gist-playground-sidenav-color: #1d1d1d; + --ngx-gist-playground-sidenav-border: 1px solid #e0e0e0; + --ngx-gist-playground-sidenav-border: none; + + --ngx-gist-playground-page-padding: 32px 48px 48px; +} + +.ngx-gist-playground-page { + padding: var(--ngx-gist-playground-page-padding); + max-width: scale(500px); + margin: 0 auto; + + .ngx-gist-playground-page__header { + margin-bottom: 3.14rem; + } + + .ngx-gist-playground-page__rubrik { + font-family: 'Source Code Pro', monospace; + } + + .ngx-gist-playground-page__title, + .ngx-gist-playground-page__subtitle, + .ngx-gist-playground-page__content__item__title { + font-family: 'Source Sans 3', sans-serif; + } + + .ngx-gist-playground-page__title, + .ngx-gist-playground-page__subtitle { + margin: 0; + } + + .ngx-gist-playground-page__title { + //margin-bottom: 16px; + font-size: 2.618rem; + letter-spacing: -0.06181rem; + font-weight: 800; + } + + .ngx-gist-playground-page__subtitle { + font-weight: 400; + font-size: 1.4618rem; + } + + .ngx-gist-playground-page__content__item__description, + .ngx-gist-playground-page__description .rich-text { + font-size: 18px; + line-height: 28px; + margin-bottom: 1.618rem; + } + + .ngx-gist-playground-page__content__item { + margin-bottom: 3.14rem; + } + + .ngx-gist-playground-page__content__item:last-child { + margin-bottom: 0; + } + + .ngx-gist-playground-page__content__item__title { + letter-spacing: -0.01618rem; + font-size: 1.618rem; + margin: 0; + } +} + +.inline-code { + background: rgba(250, 239, 240, 0.78); + color: #b44437; + padding: 3px 4px; + border-radius: 5px; + margin: 0 1px; + font-family: inherit; + font-size: 0.86em; + font-weight: 500; + letter-spacing: 0.3px; +} diff --git a/tsconfig.json b/tsconfig.json index ed966d4..2594b86 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -19,10 +19,10 @@ "target": "ES2022", "module": "ES2022", "useDefineForClassFields": false, - "lib": [ - "ES2022", - "dom" - ] + "lib": ["ES2022", "dom"], + "paths": { + "@ekkolon/ngx-gist": ["dist/ngx-gist"] + } }, "angularCompilerOptions": { "enableI18nLegacyMessageIdFormat": false, diff --git a/yarn.lock b/yarn.lock index 4ff8d6c..e33735b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4105,6 +4105,21 @@ hdr-histogram-percentiles-obj@^3.0.0: resolved "https://registry.yarnpkg.com/hdr-histogram-percentiles-obj/-/hdr-histogram-percentiles-obj-3.0.0.tgz#9409f4de0c2dda78e61de2d9d78b1e9f3cba283c" integrity sha512-7kIufnBqdsBGcSZLPJwqHT3yhk1QTsSlFsVD3kx5ixH/AlgBs9yM1q6DPhXZ8f8gtdqgh7N7/5btRLpQsS2gHw== +highlight.js@^11.5.1: + version "11.7.0" + resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-11.7.0.tgz#3ff0165bc843f8c9bce1fd89e2fda9143d24b11e" + integrity sha512-1rRqesRFhMO/PRF+G86evnyJkCgaZFOI+Z6kdj15TA18funfoqJXvgPCLSf0SWq3SRfg1j3HlDs8o4s3EGq1oQ== + +highlightjs-copy@^1.0.3: + version "1.0.3" + resolved "https://registry.yarnpkg.com/highlightjs-copy/-/highlightjs-copy-1.0.3.tgz#792c3b92eba5a5d61977ce28d7d9662c3c11f713" + integrity sha512-vXHBmzz7IuJg8f5ixX7qxhfCCDnEQCXRuIzcd7yTblJazZT3ZkaRto0md8IfBu86JdK4VRIdKMubxKt7kwNGfg== + +highlightjs-line-numbers.js@^2.8.0: + version "2.8.0" + resolved "https://registry.yarnpkg.com/highlightjs-line-numbers.js/-/highlightjs-line-numbers.js-2.8.0.tgz#479ea8cff0c31fadc1578a66fa03e38b801f9ca6" + integrity sha512-TEf1gw0c8mb8nan0QwliqS7obT4cpUd9hzsGzsZLweteNnWea/VIqy5/aQqsa5wnz9lnvmtAkS1ZtDTjB/goYQ== + hosted-git-info@^6.0.0: version "6.1.1" resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-6.1.1.tgz#629442c7889a69c05de604d52996b74fe6f26d58" @@ -5138,6 +5153,15 @@ ng-packagr@^15.1.0: optionalDependencies: esbuild "^0.16.0" +ngx-highlightjs@^8.0.0: + version "8.0.0" + resolved "https://registry.yarnpkg.com/ngx-highlightjs/-/ngx-highlightjs-8.0.0.tgz#36c3069966e11eba0a32191dc8f87cb8b155bd73" + integrity sha512-joRqwYnliH+Qv5ceM/YmUWaryO+7hhBp8KVs91GSmTf8mZdD0OL6iYsQgg0p64YAjoStmO6MR11BP9W847NYEg== + dependencies: + highlight.js "^11.5.1" + highlightjs-line-numbers.js "^2.8.0" + tslib "^2.0.0" + nice-napi@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/nice-napi/-/nice-napi-1.0.2.tgz#dc0ab5a1eac20ce548802fc5686eaa6bc654927b"