feat: support page component URIs in page tree rendering

Author: axe312ger

packages/gatsby-cli/src/reporter/loggers/ink/components/pageTree.tsx

@@ -2,6 +2,7 @@
 import React, { ReactElement, useContext } from "react"
 import { Box, Text, BoxProps, Spacer } from "ink"
 import path from "path"
+import { getPathToLayoutComponent } from "gatsby-core-utils"
 import StoreStateContext from "../context"
 import {
   generatePageTree,
@@ -117,7 +118,8 @@ const ConnectedPageTree: React.FC = function ConnectedPageTree() {
   const componentWithPages = new Map<string, IComponentWithPageModes>()
 
   for (const { componentPath, pages } of state.pageTree!.components.values()) {
-    const pagesByMode = {
+    const layoutComponent = getPathToLayoutComponent(componentPath)
+    const pagesByMode = componentWithPages.get(layoutComponent) || {
       SSG: new Set<string>(),
       DSG: new Set<string>(),
       SSR: new Set<string>(),
@@ -128,8 +130,7 @@ const ConnectedPageTree: React.FC = function ConnectedPageTree() {
 
       pagesByMode[gatsbyPage!.mode].add(pagePath)
     })
-
-    componentWithPages.set(componentPath, pagesByMode)
+    componentWithPages.set(layoutComponent, pagesByMode)
   }
 
   for (const {

packages/gatsby-cli/src/reporter/loggers/yurnalist/index.ts

@@ -17,6 +17,7 @@ import {
   IComponentWithPageModes,
 } from "../../../util/generate-page-tree"
 import { IRenderPageArgs } from "../../types"
+import { getPathToLayoutComponent } from "gatsby-core-utils"
 
 interface IYurnalistActivities {
   [activityId: string]: {
@@ -34,7 +35,9 @@ function generatePageTreeToConsole(
   const root = state.root
   const componentWithPages = new Map<string, IComponentWithPageModes>()
   for (const { componentPath, pages } of state.components.values()) {
-    const pagesByMode = {
+    const layoutComponent = getPathToLayoutComponent(componentPath)
+    const relativePath = path.posix.relative(root, layoutComponent)
+    const pagesByMode = componentWithPages.get(relativePath) || {
       SSG: new Set<string>(),
       DSG: new Set<string>(),
       SSR: new Set<string>(),
@@ -46,10 +49,7 @@ function generatePageTreeToConsole(
       pagesByMode[gatsbyPage!.mode].add(pagePath)
     })
 
-    componentWithPages.set(
-      path.posix.relative(root, componentPath),
-      pagesByMode
-    )
+    componentWithPages.set(relativePath, pagesByMode)
   }
 
   for (const {