Update GuideDocsPage to use iframe

Author: GDYendell

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

@@ -1,18 +1,44 @@
 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, useRef, 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 anchorRef = useRef<HTMLDivElement | null>(null);
+  const [top, setTop] = useState(0);
+  const [left, setLeft] = useState(0);
+
+  useLayoutEffect(() => {
+    function updateOffsets() {
+      if (anchorRef.current) {
+        const rect = anchorRef.current.getBoundingClientRect();
+        setTop(rect.top);
+        setLeft(rect.left);
+      }
+    }
+
+    updateOffsets();
+    window.addEventListener('resize', updateOffsets);
+    return () => window.removeEventListener('resize', updateOffsets);
+  }, []);
+
+  return (
+    <PageWithHeader title="Developer Guide" themeId="documentation">
+      {/* Marker element inside content area */}
+      <div ref={anchorRef} />
+      <div
+        style={{
+          position: 'fixed',
+          top,
+          left,
+          right: 0,
+          bottom: 0,
+        }}
+      >
+        <iframe
+          src="https://dev-guide.diamond.ac.uk"
+          title="Embedded Docs"
+          style={{ width: '100%', height: '100%', border: 'none' }}
+        />
+      </div>
+    </PageWithHeader>
+  );
+};