Skip to content

Commit

Permalink
Add custom landing page provider, navigation to landing page via title
Browse files Browse the repository at this point in the history
This allows to override the default message to select a component from the side nav. You can also navigate back to the landing page now via clicking on the title anchor.
  • Loading branch information
zjkipping-odsi committed Mar 13, 2024
1 parent 8b520d5 commit de37f9c
Showing 12 changed files with 90 additions and 18 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import { Component } from '@angular/core';

@Component({
template: `<h1>
Custom Landing Page! Please select a component document from the side
navigation
</h1>`,
})
export class CustomLandingPageComponent {}
3 changes: 3 additions & 0 deletions apps/component-doc-portal/src/main.ts
Original file line number Diff line number Diff line change
@@ -6,9 +6,11 @@ import {
withTitle,
withThemeOptions,
withToolbarPlugins,
withLandingPage,
} from '@oasisdigital/ng-doc-portal';

import { AppComponent } from './app/app.component';
import { CustomLandingPageComponent } from './app/custom-landing-page.component';
import { CustomPluginComponent } from './app/custom-plugin.component';
import { CustomTitleComponent } from './app/custom-title-component';
import { docPageLoaders } from './app/doc-page-loaders';
@@ -18,6 +20,7 @@ bootstrapApplication(AppComponent, {
provideNgDocPortal(
docPageLoaders,
withTitle(CustomTitleComponent),
withLandingPage(CustomLandingPageComponent),
withThemeOptions([
{
value: 'light-theme',
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
<nav class="side-navigation-bar">
<div class="title">
<ngdp-title></ngdp-title>
<a routerLink="/">
<ngdp-title></ngdp-title>
</a>
</div>
<div class="filter-input">
<input
4 changes: 2 additions & 2 deletions libs/ng-doc-portal/src/lib/ng-doc-portal.module.ts
Original file line number Diff line number Diff line change
@@ -6,8 +6,8 @@ import { HIGHLIGHT_OPTIONS } from 'ngx-highlightjs';
import { NgDocPortalComponentsModule } from './components/ng-doc-portal-components.module';
import { ngDocPortalRoutes } from './ng-doc-portal.routes';
import { DocPageViewerComponent } from './pages/doc-page-viewer/doc-page-viewer.component';
import { LandingPageComponent } from './pages/landing-page/landing-page.component';
import { MainFeatureComponent } from './pages/main-feature/main-feature.component';
import { NoSelectionPageComponent } from './pages/no-selection-page/no-selection-page.component';
import { DocPageLoaderRecord } from './types/doc-page-config.types';
import { DOC_PAGE_LOADERS_TOKEN } from './util/injection-tokens';

@@ -17,8 +17,8 @@ import { DOC_PAGE_LOADERS_TOKEN } from './util/injection-tokens';
RouterModule.forRoot(ngDocPortalRoutes),
NgDocPortalComponentsModule,
MainFeatureComponent,
NoSelectionPageComponent,
DocPageViewerComponent,
LandingPageComponent,
],
exports: [RouterModule],
providers: [
20 changes: 19 additions & 1 deletion libs/ng-doc-portal/src/lib/ng-doc-portal.providers.ts
Original file line number Diff line number Diff line change
@@ -10,6 +10,7 @@ import { HIGHLIGHT_OPTIONS } from 'ngx-highlightjs';
import { NG_DOC_PORTAL_TOOLBAR_PLUGINS_TOKEN } from './components';
import { NG_DOC_PORTAL_TITLE_TOKEN } from './components/title/title.token';
import { ngDocPortalRoutes } from './ng-doc-portal.routes';
import { NG_DOC_PORTAL_LANDING_PAGE_TOKEN } from './pages/landing-page/landing-page.token';
import {
NG_DOC_PORTAL_THEME_OPTIONS_TOKEN,
ThemeOption,
@@ -21,6 +22,7 @@ export const enum NgDocPortalFeatureKind {
TitleFeature,
ThemeOptionsFeature,
ToolbarPluginsFeature,
LandingPageFeature,
}

export interface NgDocPortalFeature<
@@ -36,11 +38,14 @@ export type ThemeOptionsFeature =
NgDocPortalFeature<NgDocPortalFeatureKind.ThemeOptionsFeature>;
export type TitleFeature =
NgDocPortalFeature<NgDocPortalFeatureKind.TitleFeature>;
export type LandingPageFeature =
NgDocPortalFeature<NgDocPortalFeatureKind.LandingPageFeature>;

export type NgDocPortalFeatures =
| TitleFeature
| ThemeOptionsFeature
| ToolbarPluginsFeature;
| ToolbarPluginsFeature
| LandingPageFeature;

export function provideNgDocPortal(
docPageConfigs: DocPageLoaderRecord,
@@ -107,3 +112,16 @@ export function withToolbarPlugins(
providers
);
}

export function withLandingPage(landingPage: Type<any>): LandingPageFeature {
const providers: Provider[] = [
{
provide: NG_DOC_PORTAL_LANDING_PAGE_TOKEN,
useValue: landingPage,
},
];
return ngDocPortalFeature(
NgDocPortalFeatureKind.LandingPageFeature,
providers
);
}
4 changes: 2 additions & 2 deletions libs/ng-doc-portal/src/lib/ng-doc-portal.routes.ts
Original file line number Diff line number Diff line change
@@ -13,8 +13,8 @@ export const ngDocPortalRoutes: Routes = [
{
path: '',
loadComponent: () =>
import('./pages/no-selection-page/no-selection-page.component').then(
(file) => file.NoSelectionPageComponent
import('./pages/landing-page/landing-page.component').then(
(file) => file.LandingPageComponent
),
},
{
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import { NgComponentOutlet, NgIf } from '@angular/common';
import { Component, Inject, Optional, Type } from '@angular/core';

import { NG_DOC_PORTAL_LANDING_PAGE_TOKEN } from './landing-page.token';

@Component({
selector: 'ngdp-landing-page',
standalone: true,
template: `
<ng-container *ngIf="!landingPageOverride">
<h1>Please select a component document page from the side navigation.</h1>
</ng-container>
<ng-container
*ngIf="landingPageOverride"
[ngComponentOutlet]="landingPageOverride"
></ng-container>
`,
imports: [NgIf, NgComponentOutlet],
})
export class LandingPageComponent {
constructor(
@Optional()
@Inject(NG_DOC_PORTAL_LANDING_PAGE_TOKEN)
public landingPageOverride?: Type<any>
) {}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import { InjectionToken, Provider, Type } from '@angular/core';

export const NG_DOC_PORTAL_LANDING_PAGE_TOKEN = new InjectionToken<Type<any>>(
'NG_DOC_PORTAL_LANDING_PAGE_TOKEN'
);

export function ngDocPortalProvideLandingPage(
landingPage: Type<any>
): Provider {
return {
provide: NG_DOC_PORTAL_LANDING_PAGE_TOKEN,
useValue: landingPage,
};
}

This file was deleted.

Original file line number Diff line number Diff line change
@@ -16,6 +16,12 @@ ngdp-side-nav {
display: grid;
place-items: center;
border-bottom: 2px solid var(--ngdp-border-color);

a {
width: 100%;
text-decoration: none;
color: inherit;
}
}

.filter-input {
Original file line number Diff line number Diff line change
@@ -1,7 +1,11 @@
ngdp-no-selection-page {
ngdp-landing-page {
height: 100%;
width: 100%;
display: grid;
grid-template-columns: 1fr;
justify-items: center;

& > h1 {
margin-top: 24px;
}
}
2 changes: 1 addition & 1 deletion libs/ng-doc-portal/src/lib/styles/ng-doc-portal.scss
Original file line number Diff line number Diff line change
@@ -2,7 +2,7 @@
@import './common/body.scss';

// Pages
@import './components/pages/no-selection-page.scss';
@import './components/pages/landing-page.scss';
@import './components/pages/main-feature.scss';

// General Components

0 comments on commit de37f9c

Please sign in to comment.