Transaction: Aiszzgf...S1EN

{ "data": { "nearweekapp.near": { "widget": { "nw-articles": { "": "const breakpoints = {\r\n md: \"768px\",\r\n lg: \"1100px\",\r\n xl: \"1300px\",\r\n};\r\n\r\nconst defImgSrc = `https://ipfs.near.social/ipfs/bafkreih5d2mix23e4hqsblgob74chyp3yyoze2ygtdm4cbo7dblt565rwa`;\r\n\r\nfunction Articles() {\r\n State.init({ page: 1 });\r\n let mediumPosts = [];\r\n let yotubeVideo = [];\r\n\r\n const Post = (props) => {\r\n const { key, post } = props;\r\n return (\r\n <Card key={key} index={props.index} href={post.url} target=\"_blank\">\r\n <CardImage src={post.thumbnail} alt=\"\" />\r\n <CardContent>\r\n <CardTitle>\r\n <a href={post.url} target=\"_blank\">\r\n {post.title}\r\n </a>\r\n </CardTitle>\r\n <CardFooter>\r\n <Badges>\r\n {post.categories &&\r\n post.categories.length > 0 &&\r\n post.categories\r\n .slice(0, window.innerWidth < 255 ? 1 : 2)\r\n .map((category, index) => (\r\n <Badge index={index}>{category}</Badge>\r\n ))}\r\n </Badges>\r\n <AuthorNDate>\r\n {post.author && ( // Check if author is available\r\n <Author>\r\n <span>@{post.author}</span>\r\n </Author>\r\n )}\r\n <Dot>·</Dot>\r\n <CardDate>\r\n {post.createdAt ? dateToDays(post.createdAt) : \"\"}\r\n </CardDate>\r\n </AuthorNDate>\r\n </CardFooter>\r\n </CardContent>\r\n </Card>\r\n );\r\n };\r\n\r\n const fetchMedium = fetch(\r\n \"https://api.rss2json.com/v1/api.json?rss_url=https://medium.com/feed/nearprotocol\",\r\n { method: \"GET\" }\r\n );\r\n\r\n if (fetchMedium && fetchMedium?.body?.items?.length > 0) {\r\n fetchMedium.body.items.forEach((item) => {\r\n let resizedImgURL;\r\n const imgURL = item[\"description\"]\r\n .toString()\r\n .match(/<img[^>]+src=\"([^\">]+)\"/)[1];\r\n if (imgURL) {\r\n const filename = imgURL.split(\"/\").pop();\r\n resizedImgURL = `https://cdn-images-1.medium.com/v2/resize:fit:360/${filename}`;\r\n }\r\n mediumPosts.push({\r\n title: item.title,\r\n url: item.link,\r\n thumbnail: resizedImgURL ?? defImgSrc,\r\n createdAt: item.pubDate,\r\n categories: item.categories,\r\n author: item.author,\r\n });\r\n });\r\n }\r\n\r\n const fetchyoutubeVideo = fetch(\r\n \"https://nearweek.com/api/youtube/playlists?playlistId=PL9tzQn_TEuFWMuPiQOXhaE5lpOTnxLPZY\",\r\n {\r\n //subscribe: true,\r\n method: \"GET\",\r\n headers: {\r\n Accept: \"*/*\",\r\n Authorization:\r\n \"Bearer 15699f0723aa9fe9f655b1a94e450552476c08807f67b525b5a3c8011eecc8aee6d45923443620f17815b897858be058cd7bd89ddf23a28aabaecb178e7ebc55d380293beeb51a8ce87b40e1518ce4708e4d51a06b115f27fa64ab5cbee5a3511cec785d7ae6a155ecd05ac8196aadae3e9b8e9401b8df8d8b69904f7364f925\",\r\n },\r\n }\r\n );\r\n\r\n if (fetchyoutubeVideo && fetchyoutubeVideo?.body?.data?.items?.length > 0) {\r\n fetchyoutubeVideo.body.data.items.forEach((item) => {\r\n yotubeVideo.push({\r\n title: item.snippet.title,\r\n url: `https://www.youtube.com/watch?v=${item.snippet.resourceId.videoId}&list=${item.snippet.playlistId}`,\r\n thumbnail: item.snippet?.thumbnails?.standard?.url ?? defImgSrc,\r\n createdAt: item.snippet.publishedAt,\r\n categories: [item.snippet.channelTitle],\r\n author: item.snippet.videoOwnerChannelTitle,\r\n });\r\n });\r\n }\r\n\r\n function dateToDays(date) {\r\n const timeAgo = (diffSec) =>\r\n diffSec < 60000\r\n ? `${(diffSec / 1000) | 0}s`\r\n : diffSec < 3600000\r\n ? `${(diffSec / 60000) | 0}m`\r\n : diffSec < 86400000\r\n ? `${(diffSec / 3600000) | 0}h`\r\n : `${(diffSec / 86400000) | 0}d`;\r\n\r\n var d = new Date(date);\r\n return timeAgo(Date.now() - d.getTime());\r\n }\r\n\r\n const articles = [...mediumPosts];\r\n\r\n const AuthorNDate = styled.div`\r\n display: flex;\r\n flex-direction: row;\r\n align-items: baseline;\r\n gap:4px;\r\n `;\r\n const Dot = styled.span`\r\n color: rgba(28, 31, 65, 0.45);\r\n text-align: right;\r\n font-size: 12px;\r\n font-style: normal;\r\n font-weight: 500;\r\n line-height: 8.5px; /* 70.833% */\r\n letter-spacing: 0.12px;\r\n `;\r\n\r\n const Author = styled.div`\r\n & span {\r\n color: rgba(28, 31, 65, 0.45);\r\n text-align: right;\r\n font-size: 12px;\r\n font-style: normal;\r\n font-weight: 500;\r\n line-height: 8.5px;\r\n letter-spacing: 0.12px;\r\n }\r\n `;\r\n\r\n const NwWidget = styled.div`\r\n border-radius: 16px;\r\n background: hsla(0, 0%, 100%, 1);\r\n margin-bottom: 10px;\r\n\r\n @media screen and (min-width: ${breakpoints.xl}) {\r\n display: grid;\r\n grid-template-columns: repeat(2, minmax(0, 1fr));\r\n gap: 1rem;\r\n margin-bottom: 1rem;\r\n }\r\n\r\n`;\r\n\r\n const TabContentFooter = styled.div`\r\n display: flex;\r\n flex-direction: row;\r\n justify-content: center;\r\n`;\r\n const ButtonLink = styled.a`\r\n width: 180px;\r\n padding: 8px;\r\n height: 32px;\r\n border: 1px solid #d7dbdf;\r\n border-radius: 100px;\r\n font-weight: 500;\r\n font-size: 12px;\r\n line-height: 22px;\r\n letter-spacing: -0.03em;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n text-align: center;\r\n cursor: pointer;\r\n white-space: nowrap;\r\n color: hsla(204, 22%, 9%, 1);\r\n &:hover,\r\n &:focus {\r\n text-decoration: none;\r\n outline: none;\r\n }\r\n`;\r\n const Card = styled.a`\r\n color: #1C1F41;\r\n text-decoration: none !important;\r\n display: flex;\r\n flex-direction: column;\r\n border-radius: 8px;\r\n padding:12px;\r\n margin-bottom:10px;\r\n border: 1px solid #eceef0;\r\n @media screen and (max-width: 1300px) {\r\n max-width:100%;\r\n }\r\n`;\r\n\r\n const CardImage = styled.img`\r\n width: 100%;\r\n height: auto;\r\n aspect-ratio: 16 / 9;\r\n border-radius: 8px;\r\n margin-top: 16px;\r\n margin-bottom: 16px;\r\n object-fit: cover;\r\n`;\r\n\r\n const CardContent = styled.div`\r\n display: flex;\r\n flex: 1;\r\n flex-direction: column;\r\n justify-content: space-between;\r\n margin-top: 0;\r\n`;\r\n\r\n const CardTitle = styled.div`\r\n margin-top: 5px;\r\n margin-bottom: 16px;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n whitespace: nowrap;\r\n font-size: 14px;\r\n font-style: normal;\r\n font-weight: 500;\r\n line-height: 18px;\r\n text-transform: capitalise;\r\n a {\r\n color: inherit;\r\n }\r\n`;\r\n\r\n const CardFooter = styled.div`\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n margin-bottom:0px;\r\n`;\r\n\r\n const Badges = styled.div`\r\n display: flex;\r\n flex-direction: row;\r\n flex-wrap: wrap;\r\n gap: 6px;\r\n`;\r\n\r\n const Badge = styled.span`\r\n background: #F5F5F5;\r\n padding: 6px 20px; \r\n border-color: hsla(214, 10%, 86%, 1);\r\n border-radius: 4px;\r\n color: #9C9C9C;\r\n text-align: center;\r\n font-size: 12px;\r\n font-style: normal;\r\n font-weight: 500;\r\n line-height: 8.5px;\r\n display: ${(props) => (props.index > 1 ? \"none\" : \"block\")}; \r\n`;\r\n\r\n const CardDate = styled.div`\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n color: rgba(28, 31, 65, 0.45);\r\n text-align: right;\r\n font-size: 12px;\r\n font-style: normal;\r\n font-weight: 500;\r\n line-height: 8.5px;\r\n`;\r\n\r\n const H2 = styled.h2`\r\n color: #1C1F41;\r\n font-size: 24px;\r\n font-style: normal;\r\n font-weight: 500;\r\n line-height: 15px;\r\n margin-bottom: 15px;\r\n `;\r\n\r\n return (\r\n <div>\r\n <H2>ARTICLES</H2>\r\n <NwWidget>\r\n <>\r\n {articles.length > 0 ? (\r\n articles\r\n .slice(0, 6)\r\n .map((article, index) => <Post post={article} index={index} />)\r\n ) : (\r\n <div>Loading ...</div>\r\n )}\r\n </>\r\n </NwWidget>\r\n <div className=\"mt-5 mb-5\">\r\n <TabContentFooter>\r\n <ButtonLink href=\"//nearweek.medium.com\" target=\"_blank\">\r\n Load more\r\n </ButtonLink>\r\n </TabContentFooter>\r\n </div>\r\n <H2 className=\"mt-1\">VIDEO</H2>\r\n <NwWidget>\r\n <>\r\n {yotubeVideo.length > 0 ? (\r\n yotubeVideo.map((video, index) => (\r\n <Post post={video} index={index} />\r\n ))\r\n ) : (\r\n <div>Loading ...</div>\r\n )}\r\n </>\r\n </NwWidget>\r\n </div>\r\n );\r\n}\r\n\r\nreturn <Articles />;\r\n" } } } } }