fix: load readme relative to path, link to readme

Author: honzikec

angular-ngrx-scss/src/app/app-routing.module.ts

@@ -18,7 +18,11 @@ const routes: Routes = [
 
 @NgModule({
   imports: [
-    RouterModule.forRoot(routes, { paramsInheritanceStrategy: 'always' }),
+    RouterModule.forRoot(routes, {
+      paramsInheritanceStrategy: 'always',
+      scrollPositionRestoration: 'enabled',
+      anchorScrolling: 'enabled',
+    }),
   ],
   exports: [RouterModule],
 })

angular-ngrx-scss/src/app/file-viewer/components/file-explorer-about/file-explorer-about.component.html

@@ -20,9 +20,7 @@ <h2>About</h2>
   </div>
 
   <div class="mt-1">
-    <!--    TODO: this should scroll down to the readme section of the repository when it is clicked-->
-    <!--    The id anchor tag approach is modelled after the current behaviour of similar link on github.com-->
-    <a class="readMeLink" routerLink="./" fragment="readme">
+    <a class="readMeLink" [routerLink]="['/', owner, name]" fragment="readme">
       <span class="icon" appOcticon="book"></span> Readme
     </a>
   </div>

angular-ngrx-scss/src/app/file-viewer/components/file-explorer-about/file-explorer-about.component.ts

@@ -10,4 +10,6 @@ export class FileExplorerAboutComponent {
   @Input() description: string | undefined;
   @Input() homepageUrl!: string;
   @Input() topics!: string[];
+  @Input() owner!: string;
+  @Input() name!: string;
 }

angular-ngrx-scss/src/app/file-viewer/file-explorer/file-explorer.component.html

@@ -22,10 +22,12 @@
         [description]="repo.description"
         [homepageUrl]="repo.website"
         [topics]="repo.tags"
+        [owner]="owner"
+        [name]="repoName"
       ></app-file-explorer-about>
     </section>
 
-    <section class="col-span-9">
+    <section class="col-span-9" id="readme" #readme>
       <app-read-me [readme]="repo.readme"></app-read-me>
     </section>
   </div>

angular-ngrx-scss/src/app/file-viewer/file-explorer/file-explorer.component.spec.ts

@@ -49,6 +49,9 @@ describe('FileExplorerComponent', () => {
         }
       },
     }),
+    snapshot: {
+      fragment: '',
+    },
   };
 
   beforeEach(async () => {

angular-ngrx-scss/src/app/file-viewer/file-explorer/file-explorer.component.ts

@@ -1,19 +1,30 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import {
+  Component,
+  ElementRef,
+  NgZone,
+  OnDestroy,
+  OnInit,
+  ViewChild,
+} from '@angular/core';
 import { Store } from '@ngrx/store';
 import { ActivatedRoute } from '@angular/router';
 import {
   RepoContents,
   fetchRepository,
   selectedRepository,
 } from '../../state/repository';
-import { map, takeWhile, tap } from 'rxjs';
+import { map, take, takeWhile, tap } from 'rxjs';
 
 @Component({
   selector: 'app-file-explorer',
   templateUrl: './file-explorer.component.html',
   styleUrls: ['./file-explorer.component.scss'],
 })
 export class FileExplorerComponent implements OnInit, OnDestroy {
+  @ViewChild('readme') readmeContainer: ElementRef | undefined;
+
+  private componentActive = true;
+
   owner = '';
   repoName = '';
   path = '';
@@ -33,10 +44,22 @@ export class FileExplorerComponent implements OnInit, OnDestroy {
 
       return { ...repo, tree: dirItems.concat(fileItems) };
     }),
+    tap(() => {
+      // make sure the readme is scrolled into view if the fragment is set
+      // we need to wait for the readme to be rendered before we can scroll to it
+      this.zone.onStable.pipe(take(1)).subscribe(() => {
+        if (this.route.snapshot.fragment === 'readme') {
+          this.readmeContainer?.nativeElement?.scrollIntoView();
+        }
+      });
+    }),
   );
-  private componentActive = true;
 
-  constructor(private route: ActivatedRoute, private store: Store) {}
+  constructor(
+    private route: ActivatedRoute,
+    private store: Store,
+    private zone: NgZone,
+  ) {}
 
   ngOnInit() {
     this.route.paramMap
@@ -60,7 +83,7 @@ export class FileExplorerComponent implements OnInit, OnDestroy {
       .subscribe();
   }
 
-  ngOnDestroy(): void {
+  ngOnDestroy() {
     this.componentActive = false;
   }
 }

angular-ngrx-scss/src/app/repository/services/repository.service.ts

@@ -1,6 +1,6 @@
 import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
 import { Injectable } from '@angular/core';
-import { Observable, map } from 'rxjs';
+import { Observable, catchError, map, of } from 'rxjs';
 import {
   FileContentsApiResponse,
   IssueAPIResponse,
@@ -337,21 +337,33 @@ export class RepositoryService {
    * Gets the contents of the repository's readme file
    * @param owner who the repo belongs to
    * @param repoName name of the repo
+   * @param path (optional) if provided, the path to retrieve the readme from; defaults to the root directory
    * @returns the readme file for the repository
    */
   getRepositoryReadme(
     repoOwner: string,
     repoName: string,
-  ): Observable<ReadmeApiResponse> {
+    path?: string | null,
+  ): Observable<ReadmeApiResponse | null> {
     const owner = encodeURIComponent(repoOwner);
     const name = encodeURIComponent(repoName);
-    const url = `${environment.githubUrl}/repos/${owner}/${name}/readme`;
+    path = path ?? '';
+    const url = `${environment.githubUrl}/repos/${owner}/${name}/readme/${path}`;
 
-    return this.http.get<ReadmeApiResponse>(url, {
-      headers: {
-        Accept: 'application/vnd.github.v3+json',
-      },
-    });
+    return this.http
+      .get<ReadmeApiResponse>(url, {
+        headers: {
+          Accept: 'application/vnd.github.v3+json',
+        },
+      })
+      .pipe(
+        catchError((err) => {
+          if (err.status === 404) {
+            return of(null);
+          }
+          throw err;
+        }),
+      );
   }
 
   private extractTotalFromLinkHeader(linkHeader: string | null): number {

angular-ngrx-scss/src/app/state/repository/repository.effects.ts

@@ -42,6 +42,7 @@ export class RepositoryEffects {
         const repoReadme$ = this.repoService.getRepositoryReadme(
           owner,
           repoName,
+          path,
         );
 
         const repoMilestones$ = this.repoService.getRepositoryMilestones(
@@ -83,7 +84,7 @@ export class RepositoryEffects {
               visibility: info.visibility,
               watchCount: info.watchers_count,
               website: info.homepage,
-              readme: readme.content || '',
+              readme: readme?.content || '',
               milestones: milestones || [],
               labels: labels || [],
             };