const rootUser = "nearweekapp.near"; const breakpoints = { md: "768px", lg: "1100px", xl: "1300px" }; function NewsletterCard() { const accountId = "near"; articles; State.init({ active: 0 }); const nwSite = "https://nearweek.com"; let posts = []; const indexedPosts = Social.index("post", "main", { accountId, limit: 20, order: "desc", }); if (indexedPosts?.length > 0) { posts = indexedPosts .map((post) => { const data = Social.get( `${post.accountId}/post/main`, post.blockHeight ); if (!data) return; const json = JSON.parse(data); const content = json.text.split("\n"); const title = content[0] || ""; const url = content[1] || content[2] || ""; const lastLine = content.pop() || ""; const hasNewsTag = lastLine.includes("#news"); const isValid = hasNewsTag && url.includes("https://"); if (isValid) { const block = Near.block(post.blockHeight); const createdAt = block ? new Date( parseFloat(block.header.timestamp_nanosec) / 1e6 ).toISOString() : ""; return { blockHeight: post.blockHeight, title, url, thumbnail: "https://near.org/favicon.png", createdAt, categories: ["Near ORG", "blog"], }; } }) .filter(Boolean); posts.sort((a, b) => b.blockHeight - a.blockHeight); } const cssFont = fetch("https://fonts.cdnfonts.com/css/hubot-sans").body; if (!cssFont) return ""; if (!state.theme) { State.update({ theme: styled.div` font-family: 'Mona Sans', sans-serif; font-style: normal; ${cssFont} }`, }); } const Theme = state.theme; const TopCardTitle = styled.h2` overflow: hidden; color: #1C1F41; text-overflow: ellipsis; whitespace: nowrap; font-family: Inter; font-size: 18px; font-style: normal; font-weight: 500; display:grid; gap:20px; margin-bottom:27px; `; const MainSection = styled.div` padding: 0; @media screen and (min-width: ${breakpoints.lg}) { padding: 30px 16px 20px 16px; width: 100%; } `; const MainContainer = styled.div` display:flex; flex-direction:column; justify-content: center; justify-items: center; margin-top: 32px; @media screen and (min-width: ${breakpoints.lg}) { width: 100%; display: flex; grid-column-gap: 20px; flex-direction: row-reverse; } `; console.log("props", props); const audioDetails = props.audioDetails; const updateAudioDetails = props.updateAudioDetails; const ReturnButton = styled.div` cursor: pointer; `; const AudioContainer = styled.div` width: 80%; @media screen and (max-width: ${breakpoints.lg}) { width: 100%; } `; const ContentContainer = styled.div` `; const AudioContent = styled.div` display: flex; gap: 1.5rem; `; const Title = styled.h2` font-size: 1.5rem; font-weight: 600; margin-left: 4px; `; console.log(audioDetails, "audioDetails1"); function TopSection() { return ( <MainSection> {audioDetails ? ( <AudioContainer> <TopCardTitle> <ReturnButton onClick={() => updateAudioDetails(null)}> <Widget src={`${rootUser}/widget/details-return`} /> </ReturnButton> <ContentContainer> <AudioContent> <img src={audioDetails.thumbnail} width="132" height="132" alt="" style={{ borderRadius: "8px" }} /> <div> <Title>{audioDetails.title}</Title> <iframe style={{ width: "100%" }} srcDoc={audioDetails.description} /> </div> </AudioContent> <div className="raw-html-embed"> <iframe style={{ width: "100%" }} src={audioDetails.frameSrc} /> </div> <Widget props={{ updateAudioDetails, audioCardFullWidth: true, }} src={`${rootUser}/widget/nw-audio`} /> </ContentContainer> </TopCardTitle> </AudioContainer> ) : ( <div>Loading ...</div> )} </MainSection> ); } const BottomContainer = styled.div` display: none; transform: translateY(50px); @media screen and (min-width: ${breakpoints.lg}) { display: block; } `; function AudioCard() { return ( <Widget props={{ updateAudioDetails, }} src={`${rootUser}/widget/nw-audio`} /> ); } return ( <Theme> <Widget src={`${rootUser}/widget/nw-navbar`} /> <MainContainer> <TopSection /> <BottomContainer> <AudioCard /> </BottomContainer> </MainContainer> </Theme> ); } return <NewsletterCard />;