Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(website): revert auto-fetch blog posts on home page #13169

Merged
merged 1 commit into from
Feb 16, 2023
Merged

fix(website): revert auto-fetch blog posts on home page #13169

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
255 changes: 98 additions & 157 deletions packages/website/components/BlogSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,161 +1,56 @@
import React, { useEffect, useState } from "react";
import { getPosts } from "./getPosts";

interface Content {
body: string;
timestamp: number;
title: string;
}

interface Authorship {
contributor: string;
signingKey: {
crv: string;
ext: boolean;
key_ops: string[];
kty: string;
x: string;
y: string;
};
signature: string;
signingKeySignature: string;
signingKeyMessage: string;
algorithm: {
name: string;
hash: string;
};
}

interface Wnft {
chainId: number;
description: string;
fee: number;
fundingRecipient: string;
imageURI: string;
mediaAssetId: number;
name: string;
nonce: number;
owner: string;
price: number;
proxyAddress: string;
renderer: string;
supply: number;
symbol: string;
}

interface Post {
OriginalDigest: string;
content: Content;
authorship: Authorship;
digest: string;
version: string;
wnft: Wnft;
}

function getReadingTime(text) {
const wordsPerMinute = 200;
const wordCount = text.split(" ").length;
const readingTime = Math.round(wordCount / wordsPerMinute);
return readingTime;
}

function getDate(timestamp: string): string {
let date = new Date(Number(timestamp) * 1000);
return date.toLocaleDateString("en-US", {
year: "numeric",
month: "short",
day: "numeric",
});
}

function getDateTime(timestamp: string): string {
let date = new Date(parseInt(timestamp) * 1000);
return `${date.getFullYear()}-${(date.getMonth() + 1)
.toString()
.padStart(2, "0")}-${date.getDate().toString().padStart(2, "0")}`;
}

function checkIfPostAreSet(posts) {
if (posts.length > 0) {
return posts.map((post: Post) => (
<div
key={post.content.title}
className="flex flex-col overflow-hidden rounded-lg shadow-lg"
>
<div className="flex-shrink-0">
<a
href={"https://mirror.xyz/labs.taiko.eth/" + post.OriginalDigest}
target="_blank"
>
<img
className="w-full h-40 sm:h-64 lg:h-36 xl:h-48 object-cover object-top"
src={`https://ipfs.io/ipfs/${post.wnft.imageURI}`}
alt=""
/>
</a>
</div>
<div className="flex flex-1 flex-col justify-between bg-white p-6 dark:bg-neutral-800">
<div className="flex-1">
<a
href={"https://mirror.xyz/labs.taiko.eth/" + post.OriginalDigest}
target="_blank"
className="mt-2 block"
>
<div className="text-xl font-semibold text-neutral-900 dark:text-neutral-200">
{post.content.title}
</div>
<div className="mt-3 text-base text-neutral-500 dark:text-neutral-300">
{post.wnft.description}
</div>
</a>
</div>
<div className="mt-6 flex items-center">
<div className="ml-3">
<div className="flex space-x-1 text-sm text-neutral-500 dark:text-neutral-400">
<time dateTime={getDateTime(`${post.content.timestamp}`)}>
{getDate(`${post.content.timestamp}`)}
</time>
<span aria-hidden="true">&middot;</span>
<span>{getReadingTime(post.content.body) + " min read"}</span>
</div>
</div>
</div>
</div>
</div>
));
} else {
const amountOfPostsToDisplay = 3;
return [...Array(amountOfPostsToDisplay)].map((v, i) => (
<div
key={i}
className="flex flex-col overflow-hidden rounded-lg shadow-lg"
>
<div className="h-80 animate-pulse">
<div className="h-full w-full bg-neutral-800"></div>
</div>
</div>
));
}
}

export default function BlogSection(): JSX.Element {
const [posts, setPosts] = useState<Object[]>([]);

useEffect(() => {
getPosts.then((result : Post[]) => {
// only use the last three
result = result.sort((a, b) => b.content.timestamp - a.content.timestamp);
result = result.slice(0, 3);

setPosts(result);
});
// getting the information of the post via the arweave GraphQL and SDK
});
const posts = [
{
title: "Taiko Ambassador Program",
href: "https://mirror.xyz/labs.taiko.eth/BvcEyYeVIiHnjc-i5qf3zR4s67Jc6nz_R6OSGj5rzOE",
description:
"Ethereum has come a long way in its seven-year life — changing the world, in our opinion — but it is only just getting started.",
date: "Jan 04, 2023",
datetime: "2023-01-04",
imageUrl:
"https://mirror-media.imgix.net/publication-images/5Ed-TXJIB3LTC2HJdPuEN.png?height=512&width=1024&h=512&w=1024&auto=compress",
readingTime: "2 min",
author: {
name: "finestone",
imageUrl: "https://avatars.githubusercontent.com/u/36642873?v=4",
},
},
{
title: "Taiko Alpha-1 Testnet is Live",
href: "https://mirror.xyz/labs.taiko.eth/-lahy4KbGkeAcqhs0ETG3Up3oTVzZ0wLoE1eK_ao5h4",
description:
"Today, the Taiko Alpha-1 testnet (a1) is live - our first public testnet! We’ve codenamed this testnet, Snæfellsjökull.",
date: "Dec 27, 2022",
datetime: "2022-12-27",
imageUrl:
"https://mirror-media.imgix.net/publication-images/4qVW-dWhNmMQr61g91hGt.png?height=512&width=1024&h=512&w=1024&auto=compress",
readingTime: "4 min",
author: {
name: "finestone",
imageUrl: "https://avatars.githubusercontent.com/u/36642873?v=4",
},
},
{
title: "Rollup Decentralization",
href: "https://mirror.xyz/labs.taiko.eth/sxR3iKyD-GvTuyI9moCg4_ggDI4E4CqnvhdwRq5yL0A",
description:
"This post explores definitions and high-level ideas of rollup decentralization. It does not cover deep technical detail about decentralizing rollup implementations.",
date: "Dec 20, 2022",
datetime: "2022-12-20",
imageUrl:
"https://mirror-media.imgix.net/publication-images/NTeYUqYqHo4NqrRGJHvfO.png?height=512&width=1024&h=512&w=1024&auto=compress",
readingTime: "9 min",
author: {
name: "finestone",
imageUrl: "https://avatars.githubusercontent.com/u/36642873?v=4",
},
},
];

export default function BlogSection() {
return (
<div className="relative bg-neutral-50 px-4 pt-16 pb-20 sm:px-6 lg:px-8 lg:pt-24 lg:pb-28 dark:bg-neutral-800">
<div className="relative bg-neutral-50 px-4 pt-16 pb-20 sm:px-6 lg:px-8 lg:pt-24 lg:pb-28 dark:bg-neutral-900">
<div className="absolute inset-0">
<div className="h-1/3 bg-white sm:h-2/3 dark:bg-[#1B1B1D]" />
<div className="h-1/3 bg-white sm:h-2/3 dark:bg-neutral-900" />
</div>
<div className="relative mx-auto max-w-7xl">
<div className="text-center">
Expand All @@ -169,9 +64,55 @@ export default function BlogSection(): JSX.Element {
</a>
</div>
</div>

<div className="mx-auto mt-12 grid max-w-lg gap-5 lg:max-w-none lg:grid-cols-3">
{checkIfPostAreSet(posts)}
{posts.map((post) => (
<div
key={post.title}
className="flex flex-col overflow-hidden rounded-lg shadow-lg"
>
<div className="flex-shrink-0">
<a href={post.href} target="_blank">
<img
className="h-54 w-full object-cover"
src={post.imageUrl}
alt=""
/>
</a>
</div>
<div className="flex flex-1 flex-col justify-between bg-white p-6 dark:bg-neutral-800">
<div className="flex-1">
<a href={post.href} target="_blank" className="mt-2 block">
<div className="text-xl font-semibold text-neutral-900 dark:text-neutral-200">
{post.title}
</div>
<div className="mt-3 text-base text-neutral-500 dark:text-neutral-300">
{post.description}
</div>
</a>
</div>
<div className="mt-6 flex items-center">
<div className="flex-shrink-0">
<span className="sr-only">{post.author.name}</span>
<img
className="h-10 w-10 rounded-full"
src={post.author.imageUrl}
alt=""
/>
</div>
<div className="ml-3">
<div className="text-sm font-medium text-[#fc0fc0]">
{post.author.name}
</div>
<div className="flex space-x-1 text-sm text-neutral-500 dark:text-neutral-400">
<time dateTime={post.datetime}>{post.date}</time>
<span aria-hidden="true">&middot;</span>
<span>{post.readingTime} read</span>
</div>
</div>
</div>
</div>
</div>
))}
</div>
</div>
</div>
Expand Down
73 changes: 0 additions & 73 deletions packages/website/components/getPosts.ts
View file
Open in desktop

This file was deleted.

1 change: 0 additions & 1 deletion packages/website/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@
"start": "pnpm next start"
},
"dependencies": {
"arweave": "^1.12.6",
"next": "^13.1.6",
"next-themes": "^0.2.1",
"nextra": "^2.2.14",
Expand Down
2 changes: 1 addition & 1 deletion packages/website/pnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion packages/website/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind utilities;
Loading