Update the guide docs page with dynamic titles

backstage/packages/app/src/App.tsx

@@ -63,8 +63,14 @@ const routes = (
       <HomePage />
     </Route>
     <Route path="/catalog" element={<CatalogIndexPage />} />
-    <Route path="/guide" element={<DeveloperGuidePage />} />
-    <Route path="/portal-docs" element={<PortalDocsPage />} />
+    <Route
+      path="/guide/:namespace/:kind/:name"
+      element={<DeveloperGuidePage />}
+    />
+    <Route
+      path="/portal-docs/:namespace/:kind/:name"
+      element={<PortalDocsPage />}
+    />
     <Route
       path="/catalog/:namespace/:kind/:name"
       element={<CatalogEntityPage />}

backstage/packages/app/src/components/dev-guide/GuideDocsPage.tsx

@@ -1,18 +1,21 @@
 import { PageWithHeader } from '@backstage/core-components';
+import { useRouteRefParams } from '@backstage/core-plugin-api';
 import { TechDocsReaderPageContent } from '@backstage/plugin-techdocs';
 import { TechDocsReaderPageProvider } from '@backstage/plugin-techdocs-react';
 import React from 'react';
+import { rootDocsRouteRef } from '../../routes';
 
-export const DeveloperGuidePage = () => (
-  <PageWithHeader title="Developer Guide" themeId="documentation">
-    <TechDocsReaderPageProvider
-      entityRef={{
-        kind: 'component',
-        namespace: 'default',
-        name: 'developer-guide',
-      }}
-    >
-      <TechDocsReaderPageContent />
-    </TechDocsReaderPageProvider>
-  </PageWithHeader>
-);
+// based on this /~https://github.com/backstage/backstage/blob/master/plugins/techdocs/src/reader/components/TechDocsReaderPage/TechDocsReaderPage.tsx
+export const DeveloperGuidePage = () => {
+  const { kind, name, namespace } = useRouteRefParams(rootDocsRouteRef);
+
+  const entityRef = { kind, name, namespace };
+
+  return (
+    <PageWithHeader title={name} themeId="diamond-theme">
+      <TechDocsReaderPageProvider entityRef={entityRef}>
+        <TechDocsReaderPageContent />
+      </TechDocsReaderPageProvider>
+    </PageWithHeader>
+  );
+};

backstage/packages/app/src/components/portal-docs/PortalDocsPage.tsx

@@ -1,18 +1,18 @@
 import { PageWithHeader } from '@backstage/core-components';
+import { useRouteRefParams } from '@backstage/core-plugin-api';
 import { TechDocsReaderPageContent } from '@backstage/plugin-techdocs';
 import { TechDocsReaderPageProvider } from '@backstage/plugin-techdocs-react';
 import React from 'react';
+import { rootDocsRouteRef } from '../../routes';
 
-export const PortalDocsPage = () => (
-  <PageWithHeader title="Developer Portal Docs" themeId="documentation">
-    <TechDocsReaderPageProvider
-      entityRef={{
-        kind: 'system',
-        namespace: 'default',
-        name: 'developer-portal',
-      }}
-    >
-      <TechDocsReaderPageContent />
-    </TechDocsReaderPageProvider>
-  </PageWithHeader>
-);
+export function PortalDocsPage() {
+  const { kind, name, namespace } = useRouteRefParams(rootDocsRouteRef);
+  const entityRef = { kind, name, namespace };
+  return (
+    <PageWithHeader title="Developer Portal Docs" themeId="documentation">
+      <TechDocsReaderPageProvider entityRef={entityRef}>
+        <TechDocsReaderPageContent />
+      </TechDocsReaderPageProvider>
+    </PageWithHeader>
+  );
+}

backstage/packages/app/src/routes.ts

@@ -0,0 +1,14 @@
+import { createRouteRef } from '@backstage/core-plugin-api';
+
+export const rootRouteRef = createRouteRef({
+  id: 'techdocs:index-page',
+});
+
+export const rootDocsRouteRef = createRouteRef({
+  id: 'techdocs:reader-page',
+  params: ['namespace', 'kind', 'name'],
+});
+
+export const rootCatalogDocsRouteRef = createRouteRef({
+  id: 'techdocs:catalog-reader-view',
+});