WSTEAM1-705: Link to post using post asset ID as hashparam (Spike)

src/app/models/types/pageDataParams.ts

@@ -4,6 +4,7 @@ import { Services, Variants } from './global';
 export default interface PageDataParams extends ParsedUrlQuery {
   id: string;
   page?: string;
+  post?: string;
   service: Services;
   variant?: Variants;
   // eslint-disable-next-line camelcase

src/app/routes/utils/constructPageFetchUrl/index.ts

@@ -31,6 +31,7 @@ export interface UrlConstructParams {
   service: Services;
   variant?: Variants;
   page?: string;
+  post?: string;
   isAmp?: boolean;
 }
 
@@ -124,6 +125,7 @@ const constructPageFetchUrl = ({
   service,
   variant,
   page,
+  post,
   isAmp,
 }: UrlConstructParams) => {
   const env = getEnvironment(pathname);
@@ -145,6 +147,9 @@ const constructPageFetchUrl = ({
     ...(page && {
       page,
     }),
+    ...(post && {
+      post,
+    }),
     ...(isAmp && {
       isAmp,
     }),

ws-nextjs-app/pages/[service]/live/[id]/LivePageLayout.tsx

@@ -12,6 +12,7 @@ import MetadataContainer from '#app/components/Metadata';
 import LinkedDataContainer from '#app/components/LinkedData';
 import getLiveBlogPostingSchema from '#app/lib/seoUtils/getLiveBlogPostingSchema';
 import Stream from './Stream';
+import { StreamProvider } from './Stream/streamProvider';
 import Header from './Header';
 import KeyPoints from './KeyPoints';
 
@@ -54,9 +55,29 @@ type ComponentProps = {
     endDateTime?: string;
     atiAnalytics: ATIData;
   };
+  post: string | null;
 };
 
-const LivePage = ({ pageData }: ComponentProps) => {
+const FakeKeyPointLinks = () => {
+  return (
+    <>
+      <h3>Links to Posts (Server Side Rendering)</h3>
+      <a href="http://localhost:7081/pidgin/live/c07zr0zwjnnt?renderer_env=test&post=asset%3A3b133574-88dc-41e0-9d90-0d3e847adba3#asset:3b133574-88dc-41e0-9d90-0d3e847adba3">
+        Link for post 39 (Page 1)
+      </a>
+      <br />
+      <a href="http://localhost:7081/pidgin/live/c07zr0zwjnnt?renderer_env=test&post=asset%3Aba735203-6eff-4768-83ce-74098a3ee92a#asset:ba735203-6eff-4768-83ce-74098a3ee92a">
+        Link for post 32 (Page 2)
+      </a>
+      <br />
+      <a href="http://localhost:7081/pidgin/live/c07zr0zwjnnt?renderer_env=test&post=asset%3Ab14bc99c-eb76-47ef-a716-f4ce97ff1349#asset:b14bc99c-eb76-47ef-a716-f4ce97ff1349">
+        Link for post 12 (Page 3)
+      </a>
+    </>
+  );
+};
+
+const LivePage = ({ pageData, post }: ComponentProps) => {
   const { lang, translations, defaultImage, brandName } =
     useContext(ServiceContext);
   const { canonicalNonUkLink } = useContext(RequestContext);
@@ -159,10 +180,13 @@ const LivePage = ({ pageData }: ComponentProps) => {
             )}
           </div>
           <div css={styles.secondSection}>
-            <Stream
-              streamContent={liveTextStream.content}
-              contributors={liveTextStream.contributors}
-            />
+            <FakeKeyPointLinks />
+            <StreamProvider post={post}>
+              <Stream
+                streamContent={liveTextStream.content}
+                contributors={liveTextStream.contributors}
+              />
+            </StreamProvider>
           </div>
         </div>
         <Pagination

ws-nextjs-app/pages/[service]/live/[id]/Post/index.tsx

@@ -12,6 +12,7 @@ import MediaLoader from '#app/components/MediaLoader';
 import VisuallyHiddenText from '#app/components/VisuallyHiddenText';
 import ImageWithCaption from '#app/components/ImageWithCaption';
 import { ServiceContext } from '#app/contexts/ServiceContext';
+import { RequestContext } from '#app/contexts/RequestContext';
 import isTenHoursAgo from '#app/lib/utilities/isTenHoursAgo';
 import TimeStampContainer from '#app/legacy/psammead/psammead-timestamp-container/src';
 import SocialEmbedContainer from '#app/legacy/containers/SocialEmbed';
@@ -23,6 +24,13 @@ import {
   ComponentToRenderProps,
 } from './types';
 
+const makeLinkToPost = (origin: string, pathname: string, postURN: string) => {
+  if (!origin || !pathname || !postURN) return '';
+  // origin returns host on 7080, so hard coding 7081
+  const linkToPost = `http://localhost:7081${pathname}#${postURN}`;
+  return linkToPost;
+};
+
 const PostBreakingNewsLabel = ({
   isBreakingNews,
   breakingNewsLabelText,
@@ -160,6 +168,7 @@ const PostContent = ({ contentBlocks }: { contentBlocks: OptimoBlock[] }) => {
 };
 
 const Post = ({ post }: { post: PostType }) => {
+  const { origin, pathname } = useContext(RequestContext);
   const headerBlocks = pathOr<PostHeadingBlock[]>(
     [],
     ['header', 'model', 'blocks'],
@@ -172,11 +181,14 @@ const Post = ({ post }: { post: PostType }) => {
     post,
   );
 
+  const postURN = pathOr<string>('', ['urn'], post);
+  const linkToPost = makeLinkToPost(origin, pathname, postURN);
+
   const isBreakingNews = pathOr(false, ['options', 'isBreakingNews'], post);
   const timestamp = post?.dates?.curated ?? '';
 
   return (
-    <article css={styles.postContainer}>
+    <article css={styles.postContainer} id={postURN}>
       <Heading level={3} css={styles.heading}>
         {/* eslint-disable-next-line jsx-a11y/aria-role */}
         <span role="text">
@@ -191,6 +203,7 @@ const Post = ({ post }: { post: PostType }) => {
       </Heading>
       <div css={styles.postContent}>
         <PostContent contentBlocks={contentBlocks} />
+        <a href={linkToPost}>Link to post</a>
       </div>
     </article>
   );

ws-nextjs-app/pages/[service]/live/[id]/Stream/streamProvider.tsx

@@ -0,0 +1,22 @@
+import React, { PropsWithChildren } from 'react';
+
+export type StreamContextProps = {
+  post: string | null; // e.g. asset:fd4643b5-191b-4794-a7ac-59b18c322c35
+};
+
+export const StreamContext = React.createContext<StreamContextProps>(
+  {} as StreamContextProps,
+);
+
+export const StreamProvider = ({
+  post,
+  children,
+}: PropsWithChildren<StreamContextProps>) => {
+  const value = {
+    post,
+  };
+
+  return (
+    <StreamContext.Provider value={value}>{children}</StreamContext.Provider>
+  );
+};

ws-nextjs-app/pages/[service]/live/[id]/[[...variant]].page.tsx

@@ -30,6 +30,7 @@ const getPageData = async ({
   page,
   service,
   variant,
+  post,
   rendererEnv,
   resolvedUrl,
 }: PageDataParams) => {
@@ -40,6 +41,7 @@ const getPageData = async ({
     pathname,
     service,
     variant,
+    post,
   });
 
   const env = getEnvironment(pathname);
@@ -106,6 +108,7 @@ export const getServerSideProps: GetServerSideProps = async context => {
     variant,
     renderer_env: rendererEnv,
     page = '1',
+    post,
   } = context.query as PageDataParams;
 
   const { headers: reqHeaders } = context.req;
@@ -143,6 +146,7 @@ export const getServerSideProps: GetServerSideProps = async context => {
     page,
     service,
     variant,
+    post,
     rendererEnv,
     resolvedUrl: context.resolvedUrl,
   });
@@ -169,6 +173,7 @@ export const getServerSideProps: GetServerSideProps = async context => {
       isAmp: false,
       isNextJs: true,
       page: page || null,
+      post: post || null,
       pageData: data?.pageData
         ? {
             ...data.pageData,