docs: add view source btn

Author: nartc

apps/kitchen-sink/src/app/app.component.ts

@@ -1,36 +1,63 @@
-import { Component, inject } from '@angular/core';
+import { Component, computed, inject } from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { NavigationEnd, Router, RouterOutlet } from '@angular/router';
-import { filter, map } from 'rxjs';
+import { filter } from 'rxjs';
 
 @Component({
 	selector: 'app-root',
 	standalone: true,
 	template: `
 		<router-outlet />
-		<select class="absolute bottom-4 right-4 font-mono" [value]="currentRoute()" (change)="onChange($event)">
-			<option value="soba">/soba</option>
-			<option value="cannon">/cannon</option>
-			<option value="postprocessing">/postprocessing</option>
-			<option value="rapier">/rapier</option>
-			<option value="misc">/misc</option>
-		</select>
+
+		<div class="absolute bottom-4 right-4 flex gap-4 items-center">
+			<select [value]="currentRoute()" (change)="onChange($event)">
+				<option value="soba">/soba</option>
+				<option value="cannon">/cannon</option>
+				<option value="postprocessing">/postprocessing</option>
+				<option value="rapier">/rapier</option>
+				<option value="misc">/misc</option>
+			</select>
+
+			<div class="bg-white rounded-full p-2 text-black border border-white border-dashed">
+				<a class="cursor-pointer" [href]="currentSourcePath()" target="_blank" title="View source">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke-width="1.5"
+						stroke="currentColor"
+						class="h-6 w-6"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							d="M17.25 6.75 22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3-4.5 16.5"
+						/>
+					</svg>
+				</a>
+			</div>
+		</div>
 	`,
 	imports: [RouterOutlet],
 })
 export class AppComponent {
 	private router = inject(Router);
 
-	currentRoute = toSignal(
-		this.router.events.pipe(
-			filter((event) => event instanceof NavigationEnd),
-			map(() => {
-				const [segment] = this.router.url.split('/').filter(Boolean);
-				return segment;
-			}),
-		),
-		{ initialValue: 'soba' },
-	);
+	private navigationEnd = toSignal(this.router.events.pipe(filter((event) => event instanceof NavigationEnd)));
+
+	currentRoute = computed(() => {
+		const navigationEnd = this.navigationEnd();
+		if (!navigationEnd) return 'soba';
+		const [segment] = navigationEnd.urlAfterRedirects.split('/').filter(Boolean);
+		return segment;
+	});
+
+	currentSourcePath = computed(() => {
+		const navigationEnd = this.navigationEnd();
+		if (!navigationEnd) return '';
+		const paths = navigationEnd.urlAfterRedirects.split('/').filter(Boolean);
+		return `https://github.com/angular-threejs/angular-three/tree/main/apps/kitchen-sink/src/app/${paths.join('/')}`;
+	});
 
 	onChange(event: Event) {
 		const target = event.target as HTMLSelectElement;