share link with clean url for community announcements (#907)

* playwright test for share link for community announcement

* copy feed/post components from near into devhub to change share URL

* handle direct links to the post widget

* fallback to social index should use the new post widget

* announcements should scroll into view

* show page url in test for video

* wait for elements to be loaded before scrolling into view

* separate script file for scrolling posts into view, that can also be referenced by the contract.

* highlight linked announcement

.devcontainer/post-create.sh

@@ -1,4 +1,5 @@
 #!/bin/bash
+curl --proto '=https' --tlsv1.2 -LsSf https://github.com/near/near-cli-rs/releases/latest/download/near-cli-rs-installer.sh | sh
 
 npm install
 curl --proto '=https' --tlsv1.2 -LsSf https://github.com/mpeterdev/bos-loader/releases/download/v0.7.1/bos-loader-v0.7.1-installer.sh | sh

instances/devhub.near/widget/devhub/components/organism/Feed.jsx

@@ -102,12 +102,16 @@ return (
 
           return (
             <Widget
-              src="${REPL_NEAR}/widget/v1.Posts.Post"
+              src={`${REPL_DEVHUB}/widget/devhub.components.organism.Feed.Posts.Post`}
               loading={<div className="w-100" style={{ height: "200px" }} />}
               props={{
                 accountId: item.accountId,
                 blockHeight: item.blockHeight,
                 filteredAccountIds: filteredAccountIds,
+                page: props.page,
+                handle: props.handle,
+                tab: props.tab,
+                highlight: props.highlight,
               }}
             />
           );
@@ -118,6 +122,10 @@ return (
         src={`${REPL_DEVHUB}/widget/devhub.components.organism.Feed.NearQueryApi`}
         props={{
           GRAPHQL_ENDPOINT,
+          page: props.page,
+          handle: props.handle,
+          tab: props.tab,
+          highlight: props.highlight,
           filteredAccountIds: filteredAccountIds,
           showFlagAccountFeature: showFlagAccountFeature,
           onNewUnseenPosts: props.onNewUnseenPosts,

instances/devhub.near/widget/devhub/components/organism/Feed/NearQueryApi.jsx

@@ -258,8 +258,12 @@ if (!initialized && sort) {
 return (
   <>
     <Widget
-      src="${REPL_NEAR}/widget/Posts.Feed"
+      src={`${REPL_DEVHUB}/widget/devhub.components.organism.Feed.Posts.Feed`}
       props={{
+        page: props.page,
+        handle: props.handle,
+        tab: props.tab,
+        highlight: props.highlight,
         hasMore,
         isLoading,
         loadMorePosts: () => {

instances/devhub.near/widget/devhub/components/organism/Feed/Posts/Feed.jsx

@@ -0,0 +1,93 @@
+const GRAPHQL_ENDPOINT =
+  props.GRAPHQL_ENDPOINT || "https://near-queryapi.api.pagoda.co";
+const loadMorePosts = props.loadMorePosts;
+const hasMore = props.hasMore || false;
+const posts = props.posts || [];
+
+const Post = styled.div`
+  border-bottom: 1px solid #eceef0;
+  padding: 24px 0 12px;
+  @media (max-width: 1024px) {
+    padding: 12px 0 0;
+  }
+`;
+
+const TextLink = styled("Link")`
+  font-weight: 600;
+`;
+
+const renderItem = (item) => {
+  if (item.accounts_liked.length !== 0) {
+    item.accounts_liked = JSON.parse(item.accounts_liked);
+  }
+
+  if (item.content.includes("repost")) {
+    const repostData = JSON.parse(item.content);
+    const fullPath = repostData[0].value.item.path.split("/");
+    item.repostData = {
+      reposted_by: item.account_id,
+      reposted_content: JSON.parse(item.content),
+      original_post_accountId: fullPath[0],
+      original_post_blockHeight: repostData[0].value.item.blockHeight,
+    };
+  }
+  return (
+    <Post className="post" key={item.block_height + "_" + item.account_id}>
+      <Widget
+        src={`${REPL_DEVHUB}/widget/devhub.components.organism.Feed.Posts.Post`}
+        props={{
+          page: props.page,
+          handle: props.handle,
+          tab: props.tab,
+          accountId: item.account_id,
+          blockHeight: item.block_height,
+          blockTimestamp: item.block_timestamp,
+          content: item.content,
+          comments: item.comments,
+          likes: item.accounts_liked,
+          GRAPHQL_ENDPOINT,
+          verifications: item.verifications,
+          showFlagAccountFeature: props.showFlagAccountFeature ?? false,
+          profile: item.profile,
+          isRespost: item.isRespost,
+          repostData: item.repostData,
+          highlight: props.highlight,
+        }}
+      />
+    </Post>
+  );
+};
+
+if (posts.length === 0 && !props.isLoading) {
+  return (
+    <div className="alert alert-info mx-3" role="alert">
+      Build your feed by finding
+      <TextLink className="alert-link" href="near/widget/PeoplePage">
+        people to follow
+      </TextLink>
+    </div>
+  );
+}
+
+const renderedItems = posts.map(renderItem);
+
+return (
+  <InfiniteScroll
+    pageStart={0}
+    loadMore={loadMorePosts}
+    hasMore={hasMore}
+    initialLoad={false}
+    loader={
+      <div className="loader">
+        <span
+          className="spinner-grow spinner-grow-sm me-1"
+          role="status"
+          aria-hidden="true"
+        />
+        Loading ...
+      </div>
+    }
+  >
+    {renderedItems}
+  </InfiniteScroll>
+);