Skip to content

Commit

Permalink
news explorer horizontal links instead of 3 cols (make space for likes)
Browse files Browse the repository at this point in the history
  • Loading branch information
@GraemeFulton
GraemeFulton committed Jun 5, 2024
1 parent d546fda commit 19864d9
Show file tree
Hide file tree
Showing 2 changed files with 94 additions and 91 deletions.
181 changes: 92 additions & 89 deletions components/v4/layout/NewsPageFeatured.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ const NewsPageFeatured = ({
ogImage,
faviconUrl,
excerpt,
morePosts
morePosts,
}) => {
return (
<div className="relative w-full max-w-[1320px] mx-auto flex flex-col justify-center">
Expand All @@ -18,92 +18,7 @@ const NewsPageFeatured = ({
className="w-full grid grid-cols-8 gap-4"
style={{ gridAutoFlow: "dense" }}
>
<div className="col-span-8 lg:col-span-2 max-h-[1200px] relative">
<div className="max-h-[1200px] bg-[#f4f4f4]/10 p-3 rounded-2xl lg:overflow-y-auto flex flex-col gap-4">
<div className="z-10 absolute p-4 z-10 hidden md:block pointer-events-none bottom-0 left-0 w-full h-32 bg-gradient-to-t from-[#fbfcff]" />

<h1 tabIndex={0} className="text-base mb-0 font-semibold tracking-tight">
References
</h1>
{post.attributes.outgoingLinks.map((link, index) => {
const hostname = new URL(link.url).hostname;
return (
<div className="hover:bg-gray-50 hover:shadow-md bg-white/80 border border-gray-300/50 p-3 shadow-sm rounded-2xl transition transition-all duration-700">
<a
href={`${link.url}?ref=prototypr`}
target="_blank"
className="text-sm"
>
<div className="z-10 mb-1.5 flex w-[fit-content]">
<div className="my-auto flex rounded-full flex-col justify-center p-[1px] mr-0.5 bg-black/50">
<img
className="w-4 h-4 mx-auto my-auto rounded-full"
src={`https://www.google.com/s2/favicons?domain=${hostname}`}
/>
</div>
<div className="text-xs ml-0.5 text-gray-600 tracking-wide my-auto leading-none font-medium">
{link.siteName ? link.siteName : hostname}
</div>
</div>

<div key={index} className="flex ">
<div className="flex flex-col gap-0.5">
<div className="text-gray-700 text-base lg:text-sm font-medium">
{link.title
? link.title
: link.text
? link.text
: link.url}
</div>
{link?.description !== (link.title || link.text) ? (
<div className="text-gray-600 line-clamp-2 text-xs max-w-[240px]">
{link.description}
</div>
) : null}
<div className="text-gray-400 text-xs max-w-[200px] truncate">
{link.rootDomain ? link.rootDomain : link.url}
</div>
{
link.imageUrl ? (
<img
src={link.imageUrl}
className="w-[100px] h-[65px] mt-1 mb-1 object-cover rounded-md border border-gray-50 mr-2"
/>
) : null
// <div className="h-7 w-7 bg-gray-100/80 border border-gray-100 rounded-md mr-2 flex flex-col justify-center">
// <LinkIcon
// className={"mx-auto text-gray-500/80 w-4 h-4"}
// />
// </div>
}
</div>
</div>
</a>
</div>
);
})}
</div>
{/* <div className="order-first col-span-2 w-full flex flex-col lg:flex-row lg:justify-between">
{post?.attributes?.outgoingLinks?.length ? (
<div className="flex flex-col justify-start relative flex-none w-full">
<h1
tabIndex={0}
className="text-base mb-2 font-semibold tracking-tight"
>
Referenced links
</h1>
{post.attributes.outgoingLinks?.length ? (
<div className="flex flex-col gap-3 lg:pr-1">
</div>
) : null}
</div>
) : (
""
)}
</div> */}
</div>
<div className="col-span-8 order-first lg:order-last lg:col-span-6">
<div className="col-span-8 order-first lg:order-last lg:col-span-8">
<div className="relative bg-white overflow-hidden rounded-2xl border border-gray-300/70 shadow-sm">
<HeroCardSection
faviconUrl={faviconUrl}
Expand All @@ -119,12 +34,100 @@ const NewsPageFeatured = ({
}
/>

<div className="p-6 lg:p-8">
<div className="w-[48rem] max-w-full mb-8 text-gray-800 text-lg">{excerpt}</div>
{post.attributes?.outgoingLinks?.length?<div className="col-span-8 lg:col-span-2 max-h-[1200px] relative">
<h1
tabIndex={0}
className="text-base mb-2 font-semibold tracking-tight"
>
References
</h1>
<div className=" bg-[#f4f4f4]/10 rounded-2xl lg:overflow-x-auto flex gap-4">
<div className="z-10 absolute p-4 z-10 -mr-8 hidden md:block pointer-events-none bottom-0 right-0 h-full w-32 bg-gradient-to-l from-[#fbfcff]" />

{post.attributes.outgoingLinks.map((link, index) => {
const hostname = new URL(link.url).hostname;
return (
<div className="overflow-hidden last:mr-10 hover:bg-gray-50 flex-none hover:shadow-md bg-white/80 border border-gray-300/50 shadow-sm rounded-2xl transition transition-all duration-700">
<a
href={`${link.url}?ref=prototypr`}
target="_blank"
className="text-sm"
>
<div className="flex h-full">
{link.imageUrl ? (
<div
style={{
backgroundImage: `url(${link.imageUrl})`,
backgroundSize: "cover",
backgroundPosition: "center",
backgroundRepeat: "no-repeat",
}}
className="flex flex-col relative bg-gray-50 border-r border-gray-100/80 h-full w-[150px]"
>
</div>
) : null}

<div className="p-3 h-full flex flex-col">
<div className="z-10 mb-1.5 flex w-[fit-content]">
<div className="my-auto flex rounded-full flex-col justify-center p-[1px] mr-0.5 bg-black/50">
<img
className="w-4 h-4 mx-auto my-auto rounded-full"
src={`https://www.google.com/s2/favicons?domain=${hostname}`}
/>
</div>
<div className="text-xs ml-0.5 text-gray-600 tracking-wide my-auto leading-none font-medium">
{link.siteName ? link.siteName : hostname}
</div>
</div>

<div className="flex flex-col h-full justify-between">
<div>
<div className="text-gray-700 max-w-[220px] text-base lg:text-md mb-2 leading-snug font-medium">
{link.title
? link.title
: link.text
? link.text
: link.url}
</div>
{link?.description !==
(link.title || link.text) ? (
<div className="text-gray-600 line-clamp-2 text-xs max-w-[240px]">
{link.description}
</div>
) : null}
</div>
<div className="text-gray-500 text-xs max-w-[220px] truncate">
{link.rootDomain ? link.rootDomain : link.url}
</div>
</div>
</div>
</div>
</a>
</div>
);
})}
</div>
</div>:null}
</div>

{content !== excerpt ? (
<div className="col-span-2 p-6 border-t w-full border-gray-100 flex flex-col lg:flex-row lg:justify-between">
<div className="col-span-2 border-t border-gray-100/80 p-6 lg:p-8 mt-6 w-full flex flex-col">
<div
className="text-lg order-first lg:order-last max-w-[48rem] mx-auto text-gray-800 blog-content news-content"
className="text-lg w-[48rem] max-w-full mx-auto text-gray-800 blog-content news-content"
dangerouslySetInnerHTML={{ __html: content }}
></div>
<div className="mt-6 w-[48rem] max-w-full mx-auto ">
<a
className="underline text-lg font-medium text-gray-700"
target={"_blank"}
href={post?.attributes?.link + "?ref=prototypr.io"}
>
Read full post on {domain}
</a>{" "}
→
</div>
</div>
) : null}
{/* <div className="order-1 m-6 mt-0 hidden lg:flex md:order-2 col-span-12 flex-col justify-end">
Expand Down
4 changes: 2 additions & 2 deletions pages/news/[slug].js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -294,15 +294,15 @@ export default function Post({
aria-labelledby={month}
className="lg:border-gray-400/60"
>
<div className="grid lg:grid-cols-12 bg-white border border-gray-300/50 shadow-sm p-4 pr-8 pb-8 rounded-xl grid-cols-1 gap-y-6 ">
<div className="grid lg:grid-cols-12 pr-8 pb-8 rounded-xl grid-cols-1 gap-y-6 ">
<h2
id={month}
className="text-lg col-span-12 font-semibold text-gray-800"
>
{month}
</h2>
<div className="col-span-12">
<div className="space-y-12">
<div className="space-y-4">
{renderPosts(posts)}
</div>
</div>
Expand Down

0 comments on commit 19864d9

Please sign in to comment.