feat(scully): scully-content optional router link upgrade scoping, fi… (

#1616)

* feat(scully): scully-content optional router link upgrade scoping, fixes #1615
* chore(docs): improve docs #1615
* chore(scully): improve readability #1615

docs/Reference/ngLib/scully-content-component.md

@@ -23,3 +23,15 @@ The [`scully-content`](https://github.com/scullyio/scully/blob/main/libs/ng-lib/
 ```
 
 **NOTE:** The [`scully-content`](https://github.com/scullyio/scully/blob/main/libs/ng-lib/src/lib/scully-content/scully-content.component.ts) component does not work inside an `*ngIf` directive.
+
+
+## Configuration
+
+`localLinksOnly: boolean | ''` - enable scoping of router link upgrade behavior to blog content instead of the whole document. Default is `false`. 
+
+```html
+<!-- Enable router link upgrade scoping to the blog content instead of whole page -->
+<scully-content localLinksOnly></scully-content>
+<!-- or -->
+<scully-content [localLinksOnly]="true"></scully-content>
+```

libs/ng-lib/src/lib/scully-content/scully-content.component.ts

@@ -5,10 +5,11 @@ import {
   Component,
   ElementRef,
   Inject,
+  Input,
   isDevMode,
   OnDestroy,
   OnInit,
-  ViewEncapsulation
+  ViewEncapsulation,
 } from '@angular/core';
 import { NavigationEnd, Router } from '@angular/router';
 import { filter, firstValueFrom, tap } from 'rxjs';
@@ -70,6 +71,11 @@ export class ScullyContentComponent implements OnDestroy, OnInit {
 
   routeSub = this.routeUpdates$.subscribe();
 
+  #localLinksOnly = false;
+  @Input() set localLinksOnly(value: boolean | '') {
+    this.#localLinksOnly = value === '' || value === true;
+  }
+
   constructor(
     private elmRef: ElementRef,
     private srs: ScullyRoutesService,
@@ -130,7 +136,7 @@ export class ScullyContentComponent implements OnDestroy, OnInit {
          */
         return;
       }
-      await firstValueFrom( this.http.get(curPage + '/index.html', { responseType: 'text' }))
+      await firstValueFrom(this.http.get(curPage + '/index.html', { responseType: 'text' }))
         .catch((e) => {
           if (isDevMode()) {
             /** in devmode (usually in `ng serve`) check the scully server for the content too */
@@ -169,7 +175,13 @@ export class ScullyContentComponent implements OnDestroy, OnInit {
     parent.insertBefore(template.content, this.elm);
     parent.insertBefore(end, this.elm);
     /** upgrade all hrefs to simulated routelinks (in next microtask) */
-    setTimeout(() => this.document.querySelectorAll('[href]').forEach(this.upgradeToRoutelink.bind(this)), 10);
+    setTimeout(() => {
+      if (this.#localLinksOnly) {
+        parent.querySelectorAll('[href]').forEach(this.upgradeToRoutelink.bind(this));
+      } else {
+        this.document.querySelectorAll('[href]').forEach(this.upgradeToRoutelink.bind(this));
+      }
+    }, 10);
     // document.querySelectorAll('[href]').forEach(this.upgradeToRoutelink.bind(this));
   }