Skip to content

Commit

Permalink
news reader
Browse files Browse the repository at this point in the history
  • Loading branch information
@GraemeFulton
GraemeFulton committed Apr 17, 2024
1 parent bd43dcb commit 89d8ff5
Show file tree
Hide file tree
Showing 9 changed files with 718 additions and 308 deletions.
17 changes: 16 additions & 1 deletion components/icons/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -109,4 +109,19 @@ export const TicketIcon = ()=> {
<path fill="currentColor" d="M227.19 104.48A16 16 0 00240 88.81V64a16 16 0 00-16-16H32a16 16 0 00-16 16v24.81a16 16 0 0012.81 15.67 24 24 0 010 47A16 16 0 0016 167.19V192a16 16 0 0016 16h192a16 16 0 0016-16v-24.81a16 16 0 00-12.81-15.67 24 24 0 010-47zM32 167.2a40 40 0 000-78.39V64h56v128H32zm192 0V192H104V64h120v24.8a40 40 0 000 78.39z"></path>
</svg>
);
}
}

export const LinkIcon = ({ className }) => {
return (
<svg
className={className}
xmlns="http://www.w3.org/2000/svg"
width="32"
height="32"
fill="currentColor"
viewBox="0 0 256 256"
>
<path d="M240,88.23a54.43,54.43,0,0,1-16,37L189.25,160a54.27,54.27,0,0,1-38.63,16h-.05A54.63,54.63,0,0,1,96,119.84a8,8,0,0,1,16,.45A38.62,38.62,0,0,0,150.58,160h0a38.39,38.39,0,0,0,27.31-11.31l34.75-34.75a38.63,38.63,0,0,0-54.63-54.63l-11,11A8,8,0,0,1,135.7,59l11-11A54.65,54.65,0,0,1,224,48,54.86,54.86,0,0,1,240,88.23ZM109,185.66l-11,11A38.41,38.41,0,0,1,70.6,208h0a38.63,38.63,0,0,1-27.29-65.94L78,107.31A38.63,38.63,0,0,1,144,135.71a8,8,0,0,0,16,.45A54.86,54.86,0,0,0,144,96a54.65,54.65,0,0,0-77.27,0L32,130.75A54.62,54.62,0,0,0,70.56,224h0a54.28,54.28,0,0,0,38.64-16l11-11A8,8,0,0,0,109,185.66Z"></path>
</svg>
);
};
4 changes: 2 additions & 2 deletions components/newsletter/SignupSidebar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,12 @@ import axios from "axios";
import { FormattedMessage, useIntl } from "react-intl";
import Button from "../Primitives/Button";

export default function SignupSidebar({ className }) {
export default function SignupSidebar({ className, btnText }) {
const [registered, setRegistered] = useState(false);
const [error, setError] = useState(false);
const intl = useIntl();
const [buttonText, setButtonText] = useState(
intl.formatMessage({ id: "intro.button.updates" })
btnText?btnText:intl.formatMessage({ id: "intro.button.updates" })
);
const onSubmit = async (data) => {
setButtonText(intl.formatMessage({ id: "signup.button.submitting" }));
Expand Down
81 changes: 61 additions & 20 deletions components/v4/layout/NewsColumn.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,10 @@ const NewsColumn = ({
// ? post?.attributes?.ogImage.opengraphImage
// : "https://s3-us-west-1.amazonaws.com/tinify-bucket/%2Fprototypr%2Ftemp%2F1595435549331-1595435549330.png";
return (
<article key={index} className="group relative flex hover:bg-gray-50 transition transition-all duration-400">
<article
key={index}
className="group relative flex hover:bg-gray-50 transition transition-all duration-400"
>
<Link
// target="_blank"
className="flex"
Expand All @@ -52,19 +55,19 @@ const NewsColumn = ({
</h3>

<div className="pl-2.5">
<div className="z-10 mb-1 mt-1 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-3 h-3 mx-auto my-auto rounded-full"
src={`https://www.google.com/s2/favicons?domain=${postDomain}`}
/>
</div>
<div className="text-[10px] ml-0.5 text-gray-400 tracking-wide my-auto leading-none font-medium uppercase">
{postDomain}
</div>
<div className="z-10 mb-1 mt-1 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-3 h-3 mx-auto my-auto rounded-full"
src={`https://www.google.com/s2/favicons?domain=${postDomain}`}
/>
</div>
<div className="text-[10px] ml-0.5 text-gray-400 tracking-wide my-auto leading-none font-medium uppercase">
{postDomain}
</div>
</div>

</div>

<div className="z-10 order-first">
<div className="relative z-10 flex items-center text-base pl-2.5">
<span
Expand Down Expand Up @@ -125,16 +128,22 @@ const NewsColumn = ({
{/* <Container maxWidth="max-w-[1320px] w-full"> */}
{showHeader !== false && (
<div className="flex justify-between p-2.5 pb-4 rounded-t-2xl">
<div>
<div className="flex">
{/* <div className="my-auto">
<div className="flex">
<div>
<div className="flex">
{/* <div className="my-auto">
<Robot size={'24'} />
</div> */}
<h3 className="font-bold drop-shadow-sm text-xl tracking-[-0.018em] text-gray-800">
{title ? title : <>News Explorer</>}
</h3>
<h3 className="font-bold drop-shadow-sm text-xl tracking-[-0.018em] text-gray-800">
{title ? title : <>News Explorer</>}
</h3>

<span className="bg-blue-500 my-auto font-medium text-white py-0 px-[6px] text-[11px] rounded-full ml-2">
Beta
</span>
</div>
<div className="text-sm text-gray-800">Selected by humans.</div>
</div>
<div className="text-sm text-gray-800">Selected by humans.</div>
</div>
<div className="flex relative">
{/* <div className="text-sm my-auto inline text-black/80 font-normal font-inter">
Expand Down Expand Up @@ -162,6 +171,38 @@ const NewsColumn = ({
)}
<div className="max-h-[46rem] relative">
<div className="pl-2 pt-2 pr-2 h-full max-h-[46rem] overflow-y-auto">
{["today", "yesterday", "lastWeek", "lastMonth"].map(group => {
const formattedGroup = group.replace("last", "last ");

return (
groupedNewsPosts[group] &&
groupedNewsPosts[group].length > 0 && (
<section
key={group}
aria-labelledby={group}
className="md:border-l md:border-gray-200 md:pl-"
>
<div className="grid grid-cols-1 items-baseline gap-y-2 md:grid-cols-5">
<h2
id={group}
className="col-span-5 mb-1 w-[fit-content] pr-4 rounded-r-full pl-2 border- border-gray-300/50 text-base font-semibold text-gray-800"
>
{/* <div className="pl-[1px]"> */}
{formattedGroup.charAt(0).toUpperCase() +
formattedGroup.slice(1)}
{/* </div> */}
</h2>
<div className="col-span-5 mb-8">
<div className="space-y-5">
{" "}
{renderPosts(groupedNewsPosts[group])}
</div>
</div>
</div>
</section>
)
);
})}
{groupedNewsPosts?.months &&
Object.entries(groupedNewsPosts?.months).map(([month, posts]) => (
<section
Expand All @@ -175,7 +216,7 @@ const NewsColumn = ({
className="col-span-5 mb-1 w-[fit-content] pr-4 rounded-r-full pl-2 border- border-gray-300/50 text-base font-semibold text-gray-800"
>
{/* <div className="pl-[1px]"> */}
{month}
{month}
{/* </div> */}
</h2>
<div className="col-span-5 mb-8">
Expand Down
175 changes: 133 additions & 42 deletions components/v4/layout/NewsPageFeatured.js
View file
Original file line number Diff line number Diff line change
@@ -1,43 +1,54 @@
import Button from "@/components/Primitives/Button";
import Link from "next/link";
import Image from "next/image";
const NewsPageFeatured = ({ post, domain, content, ogImage, faviconUrl }) => {
import { LinkIcon } from "@/components/icons";
const NewsPageFeatured = ({
post,
domain,
content,
ogImage,
faviconUrl,
excerpt,
}) => {
return (
<div className="relative mt-8 w-full max-w-[1320px] mx-auto flex flex-col justify-center">
<div className="relative w-full max-w-[1320px] mx-auto flex flex-col justify-center">
{/* <div className="md:border-l md:border-blue-200 md:pl-6"> */}
<div className="w-full">
<div className="relative grid grid-cols-1 gap-y-16 lg:grid-cols-2 lg:grid-rows-[auto_1fr] lg:gap-y-12 bg-white p-6 rounded-2xl border border-gray-300/70 shadow-sm">
<div className="lg:pl-20 z-10">
<div className="max-w-xs px-2.5 lg:max-w-none">
<img
alt=""
loading="lazy"
layout="responsive"
width={800}
height={800}
decoding="async"
data-nimg={1}
className="aspect-square rotate-3 shadow-sm w-full rounded-2xl bg-zinc-100 object-cover dark:bg-zinc-800"
sizes="(min-width: 1024px) 32rem, 20rem"
src={ogImage}
style={{ color: "transparent" }}
/>
{/* <Image
alt=""
loading="lazy"
layout="responsive"
width={800}
height={800}
decoding="async"
data-nimg={1}
className="aspect-square rotate-3 shadow-sm w-full rounded-2xl bg-zinc-100 object-cover dark:bg-zinc-800"
sizes="(min-width: 1024px) 32rem, 20rem"
src={ogImage}
style={{ color: "transparent" }}
/> */}
{post?.attributes?.featuredImage?.data?.attributes?.url ? (
<Image
alt=""
loading="lazy"
layout="responsive"
width={800}
height={800}
decoding="async"
data-nimg={1}
className="aspect-square rotate-3 shadow-sm w-full rounded-2xl bg-zinc-100 object-cover dark:bg-zinc-800"
sizes="(min-width: 1024px) 32rem, 20rem"
src={post.attributes.featuredImage.data.attributes.url}
style={{ color: "transparent" }}
/>
) : (
<img
alt=""
loading="lazy"
layout="responsive"
width={800}
height={800}
decoding="async"
data-nimg={1}
className="aspect-square rotate-3 shadow-sm w-full rounded-2xl bg-zinc-100 object-cover dark:bg-zinc-800"
sizes="(min-width: 1024px) 32rem, 20rem"
src={ogImage}
style={{ color: "transparent" }}
/>
)}
</div>
</div>
<div className="lg:order-first lg:row-span-2 pb-[80px] flex flex-col justify-between">
<div className="lg:order-first flex flex-col justify-between">
<div>
{/* <div className="flex mb-3 mt-3">
<div className="w-6 h-6 my-auto flex flex-col justify-center p-0.5 mr-1 bg-gray-50 border border-gray-100 rounded">
Expand All @@ -47,7 +58,7 @@ const NewsPageFeatured = ({ post, domain, content, ogImage, faviconUrl }) => {
{domain}
</div>
</div> */}
<div className="z-10 mb-3 mt-3 flex w-[fit-content]">
<div className="z-10 mb-3 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"
Expand All @@ -59,25 +70,25 @@ const NewsPageFeatured = ({ post, domain, content, ogImage, faviconUrl }) => {
</div>
</div>
{/* <div className="flex flex-col justify-between "> */}
<h1 className="text-4xl leading-tight font-bold tracking-tight text-zinc-800 sm:text-6xl dark:text-zinc-100">
{post?.attributes?.title}
</h1>
<div className="mt-6 space-y-7 text-base text-zinc-600 dark:text-zinc-400">
<div
className="text-lg"
dangerouslySetInnerHTML={{ __html: content }}
></div>
</div>
<h1 className="text-4xl leading-tight font-bold tracking-tight text-zinc-800 sm:text-6xl dark:text-zinc-100">
{post?.attributes?.title}
</h1>
<div className="mt-6 space-y-7 text-base text-zinc-600 dark:text-zinc-400">
<div
className="text-base text-gray-500"
dangerouslySetInnerHTML={{ __html: excerpt }}
></div>
</div>
{/* </div> */}
</div>
<div className="flex flex-col justify-center flex-none border-t border-gray-200 bg-gray-50/50 rounded-b-xl w-full absolute py-4 left-0 bottom-0 w-[calc(100%-2px)] ml-[1px]">
{/* <div className="flex flex-col justify-center flex-none border-t border-gray-200 bg-gray-50/50 rounded-b-xl w-full absolute py-4 left-0 bottom-0 w-[calc(100%-2px)] ml-[1px]">
<div className="flex flex-col justify-center relative">
<a
target={"_blank"}
href={
(post?.attributes?.legacyAttributes?.link
? post?.attributes?.legacyAttributes?.link
: post?.attributes?.link ) + "?ref=prototypr"
: post?.attributes?.link) + "?ref=prototypr"
}
>
<Button
Expand All @@ -88,7 +99,87 @@ const NewsPageFeatured = ({ post, domain, content, ogImage, faviconUrl }) => {
</Button>
</a>
</div>
</div>
</div> */}
</div>
<div className="col-span-2 border-t w-full border-gray-100 flex flex-col lg:flex-row lg:justify-between">
{post?.attributes?.outgoingLinks?.length ? (
<div className="flex flex-col justify-start pr-[40px] relative flex-none w-full lg:w-[300px]">
<h1
tabIndex={0}
className="text-base mb-0.5 mt-6 font-semibold tracking-tight"
>
References
</h1>
<p className="text-xs text-gray-500 mb-4">
Articles and links referenced in this post
</p>
{post.attributes.outgoingLinks?.length ? (
<div className=" mb-3 flex flex-col gap-4 pr-1">
{post.attributes.outgoingLinks.map((link, index) => {
const hostname = new URL(link.url).hostname;
return (
<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 mb-2">
<div className="flex flex-col gap-0.5">
<div className="text-gray-700 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>
) : null}
</div>
) : (
""
)}
<div
className="text-lg order-first lg:order-last max-w-[48rem] mx-auto text-gray-800 blog-content news-content"
dangerouslySetInnerHTML={{ __html: content }}
></div>
</div>
</div>
</div>
Expand Down
Loading

0 comments on commit 89d8ff5

Please sign in to comment.