diff --git a/explorer-nextjs/public/images/placeholder.webp b/explorer-nextjs/public/images/placeholder.webp new file mode 100644 index 0000000000..2c5e4325ee Binary files /dev/null and b/explorer-nextjs/public/images/placeholder.webp differ diff --git a/explorer-nextjs/src/app/(pages)/onboarding/[slug]/page.tsx b/explorer-nextjs/src/app/(pages)/onboarding/[slug]/page.tsx index b81e11b05a..b4ffe2be94 100644 --- a/explorer-nextjs/src/app/(pages)/onboarding/[slug]/page.tsx +++ b/explorer-nextjs/src/app/(pages)/onboarding/[slug]/page.tsx @@ -124,6 +124,8 @@ export default async function BlogPage({ ); } catch (error) { + console.log(error); + return ( diff --git a/explorer-nextjs/src/app/globals.css b/explorer-nextjs/src/app/globals.css index 79be221e4f..9e6cea0114 100644 --- a/explorer-nextjs/src/app/globals.css +++ b/explorer-nextjs/src/app/globals.css @@ -19,7 +19,6 @@ html, body { max-width: 100vw; - overflow-x: hidden; } a { diff --git a/explorer-nextjs/src/app/page.tsx b/explorer-nextjs/src/app/page.tsx index 55068c9856..ad3feff129 100644 --- a/explorer-nextjs/src/app/page.tsx +++ b/explorer-nextjs/src/app/page.tsx @@ -1,8 +1,7 @@ -import ExplorerHeroCard from "@/components/cards/ExplorerHeroCard"; +import BlogArticlesCards from "@/components/blogs/BlogArticleCards"; import CardSkeleton from "@/components/cards/Skeleton"; import { ContentLayout } from "@/components/contentLayout/ContentLayout"; import SectionHeading from "@/components/headings/SectionHeading"; -import Gateway from "@/components/icons/Gateway"; import { CurrentEpochCard } from "@/components/landingPageComponents/CurrentEpochCard"; import { NetworkStakeCard } from "@/components/landingPageComponents/NetworkStakeCard"; import { NoiseCard } from "@/components/landingPageComponents/NoiseCard"; @@ -14,7 +13,7 @@ import { Stack, Typography } from "@mui/material"; import Grid from "@mui/material/Grid2"; import { Suspense } from "react"; -export default function Home() { +export default async function Home() { return ( @@ -61,26 +60,7 @@ export default function Home() { - - } - link={"/onboarding"} - sx={{ width: "100%" }} - /> - - - } - link={"/onboarding"} - sx={{ width: "100%" }} - /> - + ); diff --git a/explorer-nextjs/src/components/blogs/types.ts b/explorer-nextjs/src/components/blogs/types.ts index 3e2b186a7a..bf22dd9be1 100644 --- a/explorer-nextjs/src/components/blogs/types.ts +++ b/explorer-nextjs/src/components/blogs/types.ts @@ -1,5 +1,28 @@ -import type data from "@/data/blog-template.json"; +type Content = { type: string; text: string }; -type BlogArticle = typeof data; +type BlogArticle = { + title: string; + label: string; + description: string; + image: string; + icon: string; + attributes: { + blogAuthors: string[]; + date: string; + readingTime: number; + }; + overview: { + content: Content[]; + }; + sections: { + id: string; + heading: string; + text: Content[]; + }[]; +}; + +export type BlogArticleWithLink = BlogArticle & { + link: string; +}; export default BlogArticle; diff --git a/explorer-nextjs/src/components/cards/ExplorerHeroCard.tsx b/explorer-nextjs/src/components/cards/ExplorerHeroCard.tsx index 0e97f033a7..16d6f47214 100644 --- a/explorer-nextjs/src/components/cards/ExplorerHeroCard.tsx +++ b/explorer-nextjs/src/components/cards/ExplorerHeroCard.tsx @@ -7,6 +7,7 @@ import { type SxProps, Typography, } from "@mui/material"; +import Image from "next/image"; import { Link } from "../muiLink"; const cardStyles = { @@ -27,14 +28,14 @@ const ExplorerHeroCard = ({ title, label, description, - image, + icon, link, sx, }: { title: string; label: string; description: string; - image: React.ReactNode; + icon: string; link: string; sx?: SxProps; }) => { @@ -53,7 +54,12 @@ const ExplorerHeroCard = ({ /> - {image} + {"explorer-blog-image"} {title} {description} diff --git a/explorer-nextjs/src/data/blog-template.json b/explorer-nextjs/src/data/blog-template-1.json similarity index 98% rename from explorer-nextjs/src/data/blog-template.json rename to explorer-nextjs/src/data/blog-template-1.json index 9c91e5b8d4..167cf685ae 100644 --- a/explorer-nextjs/src/data/blog-template.json +++ b/explorer-nextjs/src/data/blog-template-1.json @@ -1,5 +1,5 @@ { - "title": "Blog 2", + "title": "Blog Template 1", "label": "Onboarding", "description": "VPNs can be powerful tools in protecting us from hackers, but not all cyber attacks. dVPNs are even more effective.", "attributes": { @@ -23,8 +23,7 @@ "type": "paragraph", "text": "This is where decentralized VPNs (dVPNs) come in. dVPNs are even more effective at protecting you from hackers because they are decentralized and do not rely on a single server to protect your data. This makes them more secure and harder for hackers to attack." } - ], - "image": "https://nymtech.net/api/uploads/presentation-poster?w=3840&q=75" + ] }, "sections": [ { diff --git a/explorer-nextjs/src/data/blog-3.json b/explorer-nextjs/src/data/blog-template-2.json similarity index 99% rename from explorer-nextjs/src/data/blog-3.json rename to explorer-nextjs/src/data/blog-template-2.json index 54aa3371e9..a6085f00e0 100644 --- a/explorer-nextjs/src/data/blog-3.json +++ b/explorer-nextjs/src/data/blog-template-2.json @@ -1,5 +1,5 @@ { - "title": "Blog 3", + "title": "Blog Template 2", "label": "Onboarding", "description": "VPNs can be powerful tools in protecting us from hackers, but not all cyber attacks. dVPNs are even more effective.", "attributes": { diff --git a/explorer-nextjs/src/data/do-vpns-protect-you-from-hackers.json b/explorer-nextjs/src/data/do-vpns-protect-you-from-hackers.json deleted file mode 100644 index 79330fea1e..0000000000 --- a/explorer-nextjs/src/data/do-vpns-protect-you-from-hackers.json +++ /dev/null @@ -1,157 +0,0 @@ -{ - "title": "Do VPNs protect you from hackers? Experts answer", - "label": "Onboarding", - "description": "VPNs can be powerful tools in protecting us from hackers, but not all cyber attacks. dVPNs are even more effective.", - "attributes": { - "blogAuthors": ["Nym"], - "date": "August 5, 2021", - "readingTime": 5 - }, - "icon": "/icons/gateway.svg", - "image": "/images/placeholder.webp", - "overview": { - "content": [ - { - "type": "paragraph", - "text": "VPNs are a popular tool for protecting your privacy online. They encrypt your internet connection and hide your IP address, making it harder for hackers to track your online activity. But do VPNs protect you from hackers? The answer is yes, but not all cyber attacks." - }, - { - "type": "paragraph", - "text": "VPNs can be powerful tools in protecting us from hackers, but they are not foolproof. They can help protect your data from being intercepted by hackers when you are using public Wi-Fi networks, but they cannot protect you from all cyber attacks. For example, they cannot protect you from phishing attacks or malware that is already on your device." - }, - { - "type": "paragraph", - "text": "This is where decentralized VPNs (dVPNs) come in. dVPNs are even more effective at protecting you from hackers because they are decentralized and do not rely on a single server to protect your data. This makes them more secure and harder for hackers to attack." - } - ], - "image": "https://nymtech.net/api/uploads/presentation-poster?w=3840&q=75" - }, - "sections": [ - { - "id": "section-1", - "heading": "Section 1", - "text": [ - { - "type": "paragraph", - "text": "VPNs are a popular tool for protecting your privacy online. They encrypt your internet connection and hide your IP address, making it harder for hackers to track your online activity. But do VPNs protect you from hackers? The answer is yes, but not all cyber attacks." - }, - { - "type": "paragraph", - "text": "VPNs can be powerful tools in protecting us from hackers, but they are not foolproof. They can help protect your data from being intercepted by hackers when you are using public Wi-Fi networks, but they cannot protect you from all cyber attacks. For example, they cannot protect you from phishing attacks or malware that is already on your device." - } - ] - }, - { - "id": "section-2", - "heading": "Section 2", - "text": [ - { - "type": "paragraph", - "text": "VPNs are a popular tool for protecting your privacy online. They encrypt your internet connection and hide your IP address, making it harder for hackers to track your online activity. But do VPNs protect you from hackers? The answer is yes, but not all cyber attacks." - }, - { - "type": "paragraph", - "text": "VPNs can be powerful tools in protecting us from hackers, but they are not foolproof. They can help protect your data from being intercepted by hackers when you are using public Wi-Fi networks, but they cannot protect you from all cyber attacks. For example, they cannot protect you from phishing attacks or malware that is already on your device." - } - ] - }, - { - "id": "section-3", - "heading": "Section 3", - "text": [ - { - "type": "paragraph", - "text": "VPNs are a popular tool for protecting your privacy online. They encrypt your internet connection and hide your IP address, making it harder for hackers to track your online activity. But do VPNs protect you from hackers? The answer is yes, but not all cyber attacks." - }, - { - "type": "paragraph", - "text": "VPNs can be powerful tools in protecting us from hackers, but they are not foolproof. They can help protect your data from being intercepted by hackers when you are using public Wi-Fi networks, but they cannot protect you from all cyber attacks. For example, they cannot protect you from phishing attacks or malware that is already on your device." - } - ] - }, - { - "id": "section-4", - "heading": "Section 4", - "text": [ - { - "type": "paragraph", - "text": "VPNs are a popular tool for protecting your privacy online. They encrypt your internet connection and hide your IP address, making it harder for hackers to track your online activity. But do VPNs protect you from hackers? The answer is yes, but not all cyber attacks." - }, - { - "type": "paragraph", - "text": "VPNs can be powerful tools in protecting us from hackers, but they are not foolproof. They can help protect your data from being intercepted by hackers when you are using public Wi-Fi networks, but they cannot protect you from all cyber attacks. For example, they cannot protect you from phishing attacks or malware that is already on your device." - } - ] - }, - { - "id": "section-5", - "heading": "Section 5", - "text": [ - { - "type": "paragraph", - "text": "VPNs are a popular tool for protecting your privacy online. They encrypt your internet connection and hide your IP address, making it harder for hackers to track your online activity. But do VPNs protect you from hackers? The answer is yes, but not all cyber attacks." - }, - { - "type": "paragraph", - "text": "VPNs can be powerful tools in protecting us from hackers, but they are not foolproof. They can help protect your data from being intercepted by hackers when you are using public Wi-Fi networks, but they cannot protect you from all cyber attacks. For example, they cannot protect you from phishing attacks or malware that is already on your device." - } - ] - }, - { - "id": "section-6", - "heading": "Section 6", - "text": [ - { - "type": "paragraph", - "text": "VPNs are a popular tool for protecting your privacy online. They encrypt your internet connection and hide your IP address, making it harder for hackers to track your online activity. But do VPNs protect you from hackers? The answer is yes, but not all cyber attacks." - }, - { - "type": "paragraph", - "text": "VPNs can be powerful tools in protecting us from hackers, but they are not foolproof. They can help protect your data from being intercepted by hackers when you are using public Wi-Fi networks, but they cannot protect you from all cyber attacks. For example, they cannot protect you from phishing attacks or malware that is already on your device." - } - ] - }, - { - "id": "section-7", - "heading": "Section 7", - "text": [ - { - "type": "paragraph", - "text": "VPNs are a popular tool for protecting your privacy online. They encrypt your internet connection and hide your IP address, making it harder for hackers to track your online activity. But do VPNs protect you from hackers? The answer is yes, but not all cyber attacks." - }, - { - "type": "paragraph", - "text": "VPNs can be powerful tools in protecting us from hackers, but they are not foolproof. They can help protect your data from being intercepted by hackers when you are using public Wi-Fi networks, but they cannot protect you from all cyber attacks. For example, they cannot protect you from phishing attacks or malware that is already on your device." - } - ] - }, - { - "id": "section-8", - "heading": "Section 8", - "text": [ - { - "type": "paragraph", - "text": "VPNs are a popular tool for protecting your privacy online. They encrypt your internet connection and hide your IP address, making it harder for hackers to track your online activity. But do VPNs protect you from hackers? The answer is yes, but not all cyber attacks." - }, - { - "type": "paragraph", - "text": "VPNs can be powerful tools in protecting us from hackers, but they are not foolproof. They can help protect your data from being intercepted by hackers when you are using public Wi-Fi networks, but they cannot protect you from all cyber attacks. For example, they cannot protect you from phishing attacks or malware that is already on your device." - } - ] - }, - { - "id": "section-9", - "heading": "Section 9", - "text": [ - { - "type": "paragraph", - "text": "VPNs are a popular tool for protecting your privacy online. They encrypt your internet connection and hide your IP address, making it harder for hackers to track your online activity. But do VPNs protect you from hackers? The answer is yes, but not all cyber attacks." - }, - { - "type": "paragraph", - "text": "VPNs can be powerful tools in protecting us from hackers, but they are not foolproof. They can help protect your data from being intercepted by hackers when you are using public Wi-Fi networks, but they cannot protect you from all cyber attacks. For example, they cannot protect you from phishing attacks or malware that is already on your device." - } - ] - } - ] -}