Something went wrong. Try again.
a tool for shared writing and social publishing
Something went wrong. Try again.
TSX
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990import { GoToArrow } from "components/Icons/GoToArrow";import { supabaseServerClient } from "supabase/serverClient";import { normalizePublicationRecord } from "src/utils/normalizeRecords";import { PubListing } from "app/(app)/(identity)/(home-pages)/p/[didOrHandle]/PubListing";import { idResolver } from "src/identity";import { SpeedyLink } from "components/SpeedyLink";
const pubs = [ "at://did:plc:e27b62phtzr3sjgs3zwdbctq/site.standard.publication/3lyevoglvs224", // zjsm.fm "at://did:plc:b2p6rujcgpenbtcjposmjuc3/site.standard.publication/3m3axfv5hms24", // Cosmik Labs "at://did:plc:x2xmijn2egk5g67u3cwkddzy/site.standard.publication/3m2avdoogvs2f", // Aaron Ross Powell's Blog "at://did:plc:qsn6ihzsby2lr2r3sl4z3bgf/site.standard.publication/3lunssrkwqc27", // Eva's Garden "at://did:plc:oyvx5qyivlj3s6fnbxpnadba/site.standard.publication/3m3bgolkrvs2c", // Cat Café "at://did:plc:bsxmru6yec5sy42azm7cnrqq/site.standard.publication/3lwk77r5y422r", // leaf litter "at://did:plc:2zmxikig2sj7gqaezl5gntae/site.standard.publication/3lusxwydhqs2i", // How Streamplace Works "at://did:plc:jl5dgp7xb34xfqlpywt7kcp5/site.standard.publication/3lx4aluuanc27", // hyper girl shares hyperlinks
"at://did:plc:7kjkqt7amna7pih3lcvpf7g2/site.standard.publication/3lptkwbkdws2l", // Dreaming at the Edge of the Apocalypse "at://did:plc:lulmyldiq4sb2ikags5sfb25/site.standard.publication/3lw5apjilmc2v", // microcosm "at://did:plc:mdjhvva6vlrswsj26cftjttd/site.standard.publication/3lwyzotjqu22i", // Connected Places];
async function getExamplePub(uri: string) { const { data: publications } = await supabaseServerClient .from("publications") .select("*") .eq("uri", uri) .limit(1); const publication = publications?.[0]; if (!publication) return null; const record = normalizePublicationRecord(publication.record); if (!record) return null; const id = await idResolver.did.resolve(publication.identity_did); const authorProfile = id?.alsoKnownAs?.[0] ? { handle: `@${id.alsoKnownAs[0].slice(5)}` } : undefined; return { uri: publication.uri, record, authorProfile };}
export const Examples = async () => { const examplePubs = (await Promise.all(pubs.map(getExamplePub))).filter( (pub): pub is NonNullable<typeof pub> => pub !== null, );
const pubsWithMargins = examplePubs.map((pub) => ({ ...pub, topMargin: `${Math.floor(Math.random() * 6) * 10}px`, }));
const renderPub = ( pub: (typeof pubsWithMargins)[number], keySuffix: string, ) => ( <div key={`${pub.uri}-${keySuffix}`} aria-hidden={keySuffix === "dup" ? true : undefined} className="w-xs text-base shrink-0 flex flex-col mr-8 pb-2" > <div className="spacer w-full shrink-0" style={{ height: pub.topMargin }} /> <PubListing uri={pub.uri} record={pub.record} authorProfile={pub.authorProfile} /> </div> );
return ( <div className="aboutExamples mx-auto pt-32 sm:pt-48 text-center w-full"> <h2>Loved by thousands of writers</h2> <SpeedyLink href="/reader" className="no-underline! flex gap-2 w-fit items-center font-bold text-[#57822B] mx-auto" > <p>Explore More</p> <GoToArrow className="scale-110" /> </SpeedyLink> <div className="pubAndPostCarousel overflow-hidden pt-12 w-screen sm:-mx-12 -mx-4"> <div className="pubAndPostCarouselTrack flex w-max"> {pubsWithMargins.map((pub) => renderPub(pub, "orig"))} {pubsWithMargins.map((pub) => renderPub(pub, "dup"))} </div> </div> </div> );};