Update GuideDocsPage to use iframe

Author: GDYendell

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

@@ -1,18 +1,52 @@
 import { PageWithHeader } from '@backstage/core-components';
-import { TechDocsReaderPageContent } from '@backstage/plugin-techdocs';
-import { TechDocsReaderPageProvider } from '@backstage/plugin-techdocs-react';
-import React from 'react';
+import React, { useLayoutEffect, useState } from 'react';
 
-export const DeveloperGuidePage = () => (
-  <PageWithHeader title="Developer Guide" themeId="documentation">
-    <TechDocsReaderPageProvider
-      entityRef={{
-        kind: 'component',
-        namespace: 'default',
-        name: 'developer-guide',
-      }}
-    >
-      <TechDocsReaderPageContent />
-    </TechDocsReaderPageProvider>
-  </PageWithHeader>
-);
+export const DeveloperGuidePage = () => {
+  const DEFAULT_HEADER_HEIGHT = 85;
+  const DEFAULT_SIDEBAR_WIDTH = 220;
+  const [offsets, setOffsets] = useState({
+    top: DEFAULT_HEADER_HEIGHT,
+    left: DEFAULT_SIDEBAR_WIDTH,
+  });
+
+  useLayoutEffect(() => {
+    function updateOffsets() {
+      const header = document.querySelector('[data-testid="app-header"]');
+      const sidebar = document.querySelector('[data-testid="sidebar"]');
+
+      const top = header
+        ? (header as HTMLElement).offsetHeight
+        : DEFAULT_HEADER_HEIGHT;
+      const left = sidebar
+        ? (sidebar as HTMLElement).offsetWidth
+        : DEFAULT_SIDEBAR_WIDTH;
+
+      setOffsets({ top, left });
+    }
+
+    updateOffsets();
+
+    window.addEventListener('resize', updateOffsets);
+    return () => window.removeEventListener('resize', updateOffsets);
+  }, []);
+
+  return (
+    <PageWithHeader title="Developer Guide" themeId="documentation">
+      <div
+        style={{
+          position: 'fixed',
+          top: offsets.top,
+          left: offsets.left,
+          right: 0,
+          bottom: 0,
+        }}
+      >
+        <iframe
+          src="https://dev-guide.diamond.ac.uk"
+          title="Embedded Docs"
+          style={{ border: 'none', width: '100%', height: '100%' }}
+        />
+      </div>
+    </PageWithHeader>
+  );
+};