Merge pull request #238 from celestiaorg/release/run-a-light-node

Release/run a light node

src/components/header.js

@@ -104,6 +104,13 @@ const navigation = [
         text: "Explore",
         url: "",
         submenus: [
+            {
+                text: "Run a light node",
+                subtext: "Node operator",
+                url: "/run-a-light-node/",
+                icon: "menu/technology-svg.svg",
+                type: 'internal'
+            },
             {
                 text: "Join the community",
                 subtext: "Social channels",
@@ -118,13 +125,6 @@ const navigation = [
                 icon: "menu/careers.svg",
                 type: 'internal'
             },
-            {
-                text: "Join our Forum",
-                subtext: "Forum",
-                url: "https://forum.celestia.org",
-                icon: "menu/forum.svg",
-                type: 'external'
-            },
         ]
     },
 ]

src/datas/run-a-node/content.js

@@ -0,0 +1,21 @@
+export const FooterBoxes = [
+    {
+        title: 'Join our growing ecosystem',
+        text: 'View job openings and career opportunities in the Celestia ecosystem.',
+        button: {
+            text: 'Current openings',
+            href: 'https://celestia.pallet.com/jobs',
+            id: 'operator',
+            type: 'simple'
+        }
+    },{
+        title: 'Build on our developer beta',
+        text: 'Join a growing modular ecosystem of developers building on testnet.',
+        button: {
+            text: 'Get started',
+            href: '/developer-portal/',
+            id: 'operator',
+            type: 'simple'
+        }
+    }
+]

src/datas/run-a-node/get-started.js

@@ -0,0 +1,36 @@
+export const getStarted = {
+	title: "",
+	description: "",
+	items: [
+		{
+			id: 1,
+			title: "Run light node via your command line",
+			text: "Startup your light node with the command line. This option is best if you’re familiar with using the command line.",
+			type: "external",
+			link: {
+				text:"Go now",
+				url: "https://docs.celestia.org/nodes/light-node/",
+			},
+		},
+		{
+			id: 2,
+			title: "Run light node in a virtual environment",
+			text: "Startup your light node through the command line in a virtual environment. Though this option still uses the command line, it can be completed in under 3 minutes and also works on Windows devices.",
+			type: "external",
+			link: {
+				text:"Start up",
+				url: "https://docs.celestia.org/nodes/docker-images/",
+			},
+		},
+		{
+			id: 3,
+			title: "Run light node through an application",
+			text: "Boot up your light node through a user-friendly application. This is the easiest option, but it only works for m1 and m2 macs.",
+			type: "external",
+			link: {
+				text:"Learn more",
+				url: "https://www.quasarapp.xyz/",
+			},
+		},
+	],
+};

src/datas/run-a-node/hero-data.js

@@ -0,0 +1,18 @@
+export const heroData = {
+	title: "Run a light node",
+	text: "Join the collective powering an open internet. Run a light node on Celestia to secure your assets and become sovereign.",
+	buttons: [
+		{
+			text: "Show me how to start",
+			class: "simple",
+			type: "anchor",
+			url: "start-up-a-node",
+		},
+		{
+			text: "Ask a question",
+			class: "white",
+			type: "anchor",
+			url: "https://www.google.com/",
+		}
+	],
+};

src/datas/run-a-node/resources.js

@@ -0,0 +1,39 @@
+export const resources = {
+	title: "Resources",
+	description: "Tutorials, and guides for running Celestia nodes.",
+	items: [
+		{
+			id: 1,
+			title: "Light node setup walkthrough",
+			text: "",
+			image: "run-a-node/icon-1.png",
+			type: "external",
+			link: {
+				text:"Explore",
+				url: "https://youtu.be/WFubhQc8tGk",
+			},
+		},
+		{
+			id: 2,
+			title: "Overview of Celestia nodes",
+			text: "",
+			image: "run-a-node/icon-2.png",
+			type: "external",
+			link: {
+				text:"Learn more",
+				url: "https://docs.celestia.org/nodes/overview/",
+			},
+		},
+		{
+			id: 3,
+			title: "Node API",
+			text: "",
+			image: "run-a-node/icon-3.png",
+			type: "external",
+			link: {
+				text:"Read more",
+				url: "https://docs.celestia.org/developers/node-api/",
+			},
+		},
+	],
+};

src/datas/run-a-node/seoContent.js

@@ -0,0 +1,5 @@
+export const seoContent = {
+	title: "Run a Node | celestia.org",
+	description: "Build games with new capabilities. Celestia scales with the number of users so games can scale with their usebase.",
+    image: "",
+};

src/pages/run-a-light-node.js

@@ -0,0 +1,144 @@
+import * as React from "react";
+
+import { heroData } from "../datas/run-a-node/hero-data";
+import { getStarted } from "../datas/run-a-node/get-started";
+import { resources } from "../datas/run-a-node/resources";
+import { FooterBoxes } from "../datas/run-a-node/content";
+
+import Layout from "../components/layout";
+import IconCard from "../components/modules/icon-card";
+import { AnchorLink } from "gatsby-plugin-anchor-links";
+
+import { seoContent } from "../datas/run-a-node/seoContent";
+import SEO from "../components/seo";
+
+import image2 from "../images/run-a-node/run-a-node-2.png";
+import image3 from "../images/run-a-node/run-a-node-3.png";
+
+const DevPortal = () => {
+	return (
+		<Layout footerBoxes={FooterBoxes}>
+			<SEO title={seoContent.title} description={seoContent.description} image={seoContent.image} />
+			<div className={"run-a-node"}>
+				<main>
+					<section className='hero'>
+						<div className={"container"}>
+							<h1 className={"main mb-3 mb-md-4"}>{heroData.title}</h1>
+							<div className={"row"}>
+								<div className={"col-auto"}>
+									<div className={"subtitle"} dangerouslySetInnerHTML={{ __html: heroData.text }} />
+									<AnchorLink
+										to={`/run-a-light-node#${heroData.buttons[0].url}`}
+										className={"button button-" + heroData.buttons[0].class}
+										stripHash
+									>
+										{heroData.buttons[0].text}
+									</AnchorLink>
+									{/* <a
+										href={`${heroData.buttons[1].url}`}
+										className={"button button-" + heroData.buttons[1].class}
+										target={"_blank"}
+										rel={"noreferrer"}
+									>
+										{heroData.buttons[1].text}
+									</a> */}
+								</div>
+							</div>
+						</div>
+					</section>
+
+					<section className={"what-is-a-node"}>
+						<div className={"container"}>
+							<div className={"row justify-content-between align-items-center"}>
+								<div className={"image-box--node col-12 col-lg-6"}>
+									<div className='image-wrapper'>
+										<img className='img' style={{ width: `100%`, maxWidth: `500px` }} src={image2} alt={""} />
+									</div>
+								</div>
+								<div className={"text-box col-12 col-lg-6"}>
+									<h2 className='title'>What is a node?</h2>
+									<p>
+										A node is a piece of software that runs on a device like a computer or a phone.
+										Generally, a node verifies that a blockchain works correctly and follows the rules.
+										“Verifying” a blockchain can involve tasks like checking transactions are correct.
+									</p>
+									<h2 className='title'>What is a Celestia light node?</h2>
+									<p>
+										Light nodes sound like you might expect. They are nodes that can run on cheaper
+										hardware and slower internet connections than other node types. The lower
+										requirements make it more accessible for anyone to run a node that verifies the
+										chain.
+									</p>
+								</div>
+							</div>
+						</div>
+					</section>
+
+					<section className={"start-up"} id={`${heroData.buttons[0]?.url.replace(/\s+/g, "-").toLowerCase()}`}>
+						<div className={"container"}>
+							<div className={"row justify-content-between align-items-center"}>
+								<div className={"text-box col-12 col-lg-6"}>
+									<h2 className='with-decor'>Start up a light node</h2>
+									<p className='description'>
+										There are many ways to run a Celestia light node. Pick an option that fits you best
+										to get your light node up and running.
+									</p>
+								</div>
+								<div className={"image-box--startup col-12 col-lg-6"}>
+									<div className='image-wrapper'>
+										<img src={image3} alt={""} />
+									</div>
+								</div>
+							</div>
+						</div>
+					</section>
+
+					<section className='get-started'>
+						<div className={"container"}>
+							{getStarted.description && <div className={"description"}>{getStarted.description}</div>}
+							<div className={"row gx-3 gy-3 pt-4 pb-3"}>
+								{getStarted.items.map(function (item) {
+									return (
+										<IconCard
+											className='icon-card-wrapper col-12 col-md min-width-33'
+											key={item.id}
+											content={item}
+											variant={"anchor no-image"}
+										/>
+									);
+								})}
+							</div>
+						</div>
+					</section>
+
+					<section className='resources' id={`${getStarted.items[2].title.replace(/\s+/g, "-").toLowerCase()}`}>
+						<div className={"container"}>
+							<div className={"row flex-wrap align-items-center justify-content-between my-2 pt-2 pt-lg-5 pb-3"}>
+								<div className='col-12 col-xl-4 mb-5 mb-md-0'>
+									<h2 className={"with-decor"}>{resources.title}</h2>
+									{resources.description && <div className={"description"}>{resources.description}</div>}
+								</div>
+								<div className='col-12 col-xl-8'>
+									<div className='gx-3 gy-5 row'>
+										{resources.items.map(function (item) {
+											return (
+												<IconCard
+													className='icon-card-wrapper col-12 col-md-4'
+													key={item.id}
+													content={item}
+													variant={"vertical"}
+												/>
+											);
+										})}
+									</div>
+								</div>
+							</div>
+						</div>
+					</section>
+				</main>
+			</div>
+		</Layout>
+	);
+};
+
+export default DevPortal;

src/scss/main.scss

@@ -38,6 +38,7 @@
 @import "pages/page-developer-portal.scss";
 @import "pages/page-press.scss";
 @import "pages/page-community.scss";
+@import "pages/page-run-a-node.scss";
 
 @import "components/team.scss";
 @import "components/technology.scss";