refactor: auto-generate toc from current page

spartan-ng · Dec 27, 2023 · 6179c34 · 6179c34
1 parent f15881e
commit 6179c34
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 10 deletions.
diff --git a/apps/app/src/app/pages/(components)/components/(tabs)/tabs.page.ts b/apps/app/src/app/pages/(components)/components/(tabs)/tabs.page.ts
@@ -7,7 +7,6 @@ import { CodeComponent } from '../../../../shared/code/code.component';
 import { MainSectionDirective } from '../../../../shared/layout/main-section.directive';
 import { PageBottomNavLinkComponent } from '../../../../shared/layout/page-bottom-nav/page-bottom-nav-link.component';
 import { PageBottomNavComponent } from '../../../../shared/layout/page-bottom-nav/page-bottom-nav.component';
-import { PageNavLinkComponent } from '../../../../shared/layout/page-nav/page-nav-link.component';
 import { PageNavComponent } from '../../../../shared/layout/page-nav/page-nav.component';
 import { SectionIntroComponent } from '../../../../shared/layout/section-intro.component';
 import { SectionSubHeadingComponent } from '../../../../shared/layout/section-sub-heading.component';
@@ -34,7 +33,6 @@ export const routeMeta: RouteMeta = {
 		SectionSubHeadingComponent,
 		TabsComponent,
 		CodePreviewDirective,
-		PageNavLinkComponent,
 		PageNavComponent,
 		PageBottomNavComponent,
 		PageBottomNavLinkComponent,
@@ -89,11 +87,7 @@ export const routeMeta: RouteMeta = {
 				<spartan-page-bottom-nav-link direction="previous" href="table" label="Table" />
 			</spartan-page-bottom-nav>
 		</section>
-		<spartan-page-nav>
-			<spartan-page-nav-link fragment="installation" label="Installation" />
-			<spartan-page-nav-link fragment="usage" label="Usage" />
-			<spartan-page-nav-link fragment="examples" label="Examples" />
-		</spartan-page-nav>
+		<spartan-page-nav />
 	`,
 })
 export default class TabsPageComponent {

diff --git a/apps/app/src/app/shared/layout/page-nav/page-nav.component.ts b/apps/app/src/app/shared/layout/page-nav/page-nav.component.ts
@@ -1,11 +1,28 @@
-import { AfterViewInit, Component, OnDestroy, TemplateRef, ViewChild } from '@angular/core';
+import {
+	AfterViewInit,
+	Component,
+	ElementRef,
+	OnDestroy,
+	OnInit,
+	TemplateRef,
+	ViewChild,
+	inject,
+	isDevMode,
+	signal,
+} from '@angular/core';
 import { HlmScrollAreaComponent } from '@spartan-ng/ui-scrollarea-helm';
 import { pageNavTmpl } from '~/app/shared/layout/page-nav/page-nav-outlet.component';
+import { PageNavLinkComponent } from './page-nav-link.component';
+
+type SamePageAnchorLink = {
+	id: string;
+	label: string;
+};
 
 @Component({
 	selector: 'spartan-page-nav',
 	standalone: true,
-	imports: [HlmScrollAreaComponent],
+	imports: [HlmScrollAreaComponent, PageNavLinkComponent],
 	host: {
 		class: 'hidden xl:block text-sm',
 	},
@@ -16,16 +33,36 @@ import { pageNavTmpl } from '~/app/shared/layout/page-nav/page-nav-outlet.compon
 					<h3 class="font-medium">On this page</h3>
 					<ul class="m-0 flex list-none flex-col">
 						<ng-content />
+						@for (link of links(); track link.id) {
+							<spartan-page-nav-link [fragment]="link.id" [label]="link.label" />
+						} @empty {
+							@if (isDevMode()) {
+								[DEV] Nothing to see here!
+							}
+						}
 					</ul>
 				</div>
 			</hlm-scroll-area>
 		</ng-template>
 	`,
 })
-export class PageNavComponent implements AfterViewInit, OnDestroy {
+export class PageNavComponent implements OnInit, AfterViewInit, OnDestroy {
 	@ViewChild('pageNav', { static: true })
 	pageNavTpl?: TemplateRef<unknown>;
 
+	isDevMode = signal(isDevMode());
+	links = signal<SamePageAnchorLink[]>([]);
+
+	private page: HTMLElement = (inject(ElementRef).nativeElement as HTMLElement).previousSibling as HTMLElement;
+
+	ngOnInit() {
+		const headings = Array.from(this.page.querySelectorAll('spartan-section-sub-heading'));
+		const links = headings.map(({ id, children }) => ({
+			id,
+			label: children[0].childNodes[0].textContent ?? '[DEV] Empty heading!',
+		}));
+		this.links.set(links);
+	}
 	ngAfterViewInit() {
 		if (!this.pageNavTpl) return;
 		pageNavTmpl.set(this.pageNavTpl);