From faf1588932918b62d664d3ba1b5c5a0e085ff475 Mon Sep 17 00:00:00 2001
From: Tomas Trajan <tomas.trajan@gmail.com>
Date: Tue, 27 Sep 2022 17:44:26 +0200
Subject: [PATCH] =?UTF-8?q?feat(scully):=20scully-content=20optional=20rou?=
 =?UTF-8?q?ter=20link=20upgrade=20scoping,=20fi=E2=80=A6=20(#1616)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat(scully): scully-content optional router link upgrade scoping, fixes #1615
* chore(docs): improve docs #1615
* chore(scully): improve readability #1615
---
 .../ngLib/scully-content-component.md          | 12 ++++++++++++
 .../scully-content/scully-content.component.ts | 18 +++++++++++++++---
 2 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/docs/Reference/ngLib/scully-content-component.md b/docs/Reference/ngLib/scully-content-component.md
index 3fc982578..ccb9cc5d3 100644
--- a/docs/Reference/ngLib/scully-content-component.md
+++ b/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>
+```
diff --git a/libs/ng-lib/src/lib/scully-content/scully-content.component.ts b/libs/ng-lib/src/lib/scully-content/scully-content.component.ts
index 450f680ba..be415aa83 100644
--- a/libs/ng-lib/src/lib/scully-content/scully-content.component.ts
+++ b/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));
   }