WS-1871: SPIKE: Render most read articles on offline page

ws-nextjs-app/pages/[service]/offline/OfflinePage.tsx

@@ -3,11 +3,22 @@ import Helmet from 'react-helmet';
 import { ServiceContext } from '#contexts/ServiceContext';
 import ErrorMain from '#app/legacy/components/ErrorMain';
 import { useOfflinePageFlag } from '#app/hooks/useOfflinePageFlag';
+import MostRead from '#app/components/MostRead/Canonical';
+import { MostReadData } from '#app/components/MostRead/types';
+import Heading from '#app/components/Heading';
+import Paragraph from '#app/components/Paragraph';
 
-const OfflinePage = () => {
+interface PageData {
+  mostReadData?: MostReadData | null;
+}
+
+interface OfflinePageProps {
+  pageData?: PageData | null;
+}
+
+const OfflinePage = ({ pageData }: OfflinePageProps) => {
   const { service, dir, script } = use(ServiceContext);
 
-  // Track offline page visit (sets flag in localStorage, PWA only)
   useOfflinePageFlag();
 
   const title = 'You are offline';
@@ -18,22 +29,44 @@ const OfflinePage = () => {
     'Refresh the page when your connection is restored',
   ];
 
+  const mostReadData = pageData?.mostReadData;
+
   return (
     <>
       <Helmet htmlAttributes={{ dir, lang: service }}>
         <title>{title}</title>
         <meta name="robots" content="noindex,nofollow" />
       </Helmet>
-      <ErrorMain
-        statusCode={null}
-        title={title}
-        message={message}
-        solutions={solutions}
-        callToActionLinkText=""
-        callToActionLinkUrl=""
-        script={script}
-        service={service}
-      />
+
+      {mostReadData?.items?.length ? (
+        <main style={{ margin: '0 auto', maxWidth: '63rem', padding: '1rem' }}>
+          <Heading level={1} style={{ margin: '1rem 0' }}>
+            {title}
+          </Heading>
+          <Paragraph size="bodyCopy" style={{ margin: '1rem 0' }}>
+            {message}
+          </Paragraph>
+          <Heading level={3} style={{ margin: '1rem 0' }}>
+            Most read articles
+          </Heading>
+          <MostRead
+            data={mostReadData}
+            columnLayout="twoColumn"
+            size="default"
+          />
+        </main>
+      ) : (
+        <ErrorMain
+          statusCode={null}
+          title={title}
+          message={message}
+          solutions={solutions}
+          callToActionLinkText=""
+          callToActionLinkUrl=""
+          script={script}
+          service={service}
+        />
+      )}
     </>
   );
 };

ws-nextjs-app/pages/[service]/offline/index.page.tsx

@@ -1,15 +1,20 @@
 import dynamic from 'next/dynamic';
 import { GetServerSideProps } from 'next';
-import { OFFLINE_PAGE } from '#app/routes/utils/pageTypes';
+import { OFFLINE_PAGE, MOST_READ_PAGE } from '#app/routes/utils/pageTypes';
 import PageDataParams from '#app/models/types/pageDataParams';
 import deriveVariant from '#nextjs/utilities/deriveVariant';
-import extractHeaders from '#server/utilities/extractHeaders';
 import logResponseTime from '#server/utilities/logResponseTime';
+import getPageData from '#nextjs/utilities/pageRequests/getPageData';
+import extractHeaders from '#src/server/utilities/extractHeaders';
 
 const OfflinePage = dynamic(() => import('./OfflinePage'));
 
 export const getServerSideProps: GetServerSideProps = async context => {
-  const { service, variant: variantFromUrl } = context.query as PageDataParams;
+  const {
+    service,
+    variant: variantFromUrl,
+    renderer_env: rendererEnv,
+  } = context.query as PageDataParams;
   const variant = deriveVariant(variantFromUrl);
 
   logResponseTime({ path: context.resolvedUrl }, context.res, () => null);
@@ -19,12 +24,33 @@ export const getServerSideProps: GetServerSideProps = async context => {
     'public, max-age=300, stale-while-revalidate=600, stale-if-error=3600',
   );
 
+  let mostReadData = null;
+
+  try {
+    const { data } = await getPageData({
+      pageType: MOST_READ_PAGE,
+      id: `/${service}/popular/read`,
+      resolvedUrl: `/${service}/popular/read`,
+      service,
+      variant: variant || undefined,
+      rendererEnv: rendererEnv || 'live',
+    });
+
+    mostReadData = data?.pageData ?? null;
+  } catch (err) {
+    // eslint-disable-next-line no-console
+    console.error('Failed to fetch most read data:', err);
+  }
+
   return {
     props: {
-      service,
-      variant,
+      pageData: {
+        mostReadData,
+      },
       pageType: OFFLINE_PAGE,
+      service,
       status: 200,
+      variant: variant || null,
       timeOnServer: Date.now(),
       pathname: `/${service}/offline`,
       ...extractHeaders(context.req.headers),