-
Notifications
You must be signed in to change notification settings - Fork 69
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'feature/run-a-node-page' into dev
- Loading branch information
Showing
10 changed files
with
537 additions
and
4 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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: 'https://docs.celestia.org/', | ||
| id: 'operator', | ||
| type: 'simple' | ||
| } | ||
| } | ||
| ] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| export const getStarted = { | ||
| title: "", | ||
| description: "", | ||
| items: [ | ||
| { | ||
| id: 1, | ||
| title: "Run a node directly on your computer via the CLI", | ||
| text: "(in general use) a complex network or interconnected system. add 3 line description max.I", | ||
| type: "anchor", | ||
| link: { | ||
| text:"Learn more", | ||
| }, | ||
| }, | ||
| { | ||
| id: 2, | ||
| title: "Run a node on docker via the CLI", | ||
| text: "(in general use) a complex network or interconnected system. add 3 line description max.", | ||
| type: "anchor", | ||
| link: { | ||
| text:"Learn more", | ||
| }, | ||
| }, | ||
| { | ||
| id: 3, | ||
| title: "Run a node on docker via the CLI", | ||
| text: "(in general use) a complex network or interconnected system. add 3 line description max.", | ||
| type: "anchor", | ||
| link: { | ||
| text:"Learn more", | ||
| }, | ||
| }, | ||
| ], | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| export const heroData = { | ||
| title: "Run a Node", | ||
| text: "Build games with new capabilities. Celestia scales with the number of users so games can scale with their usebase.", | ||
| buttons: [ | ||
| { | ||
| text: "Build Modular", | ||
| class: "simple", | ||
| type: "anchor", | ||
| url: "frameworks", | ||
| }, | ||
| { | ||
| text: "Ask a question", | ||
| class: "white", | ||
| type: "external", | ||
| url: "https://forum.celestia.org/", | ||
| }, | ||
| ], | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| export const resources = { | ||
| title: "Resources", | ||
| description: "Tutorials, resources, and guides for staking.", | ||
| items: [ | ||
| { | ||
| id: 1, | ||
| title: "Light node tutorial on YouTube", | ||
| text: "", | ||
| image: "developer-portal/lightbulb.png", | ||
| type: "external", | ||
| link: { | ||
| text:"Explore concepts", | ||
| url: "https://docs.celestia.org/developers/build-modular/", | ||
| }, | ||
| }, | ||
| { | ||
| id: 2, | ||
| title: "Values of modular chains", | ||
| text: "", | ||
| image: "developer-portal/availability.png", | ||
| type: "external", | ||
| link: { | ||
| text:"Explore concepts", | ||
| url: "https://docs.celestia.org/nodes/overview/", | ||
| }, | ||
| }, | ||
| { | ||
| id: 3, | ||
| title: "Light node requirement", | ||
| text: "", | ||
| image: "developer-portal/why-build-mod.png", | ||
| type: "internal", | ||
| link: { | ||
| text:"Explore concepts", | ||
| url: "/learn/", | ||
| }, | ||
| }, | ||
| ], | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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: "", | ||
| }; |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,146 @@ | ||
| 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/developer-portal/seoContent"; | ||
| import SEO from "../components/seo"; | ||
|
|
||
| import image1 from "../images/run-a-node/placeholder.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={`/developer-portal#${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--analogy col-12 col-lg-6"}> | ||
| <div className='image-wrapper'> | ||
| <img className='img' style={{ width: `100%`, maxWidth: `500px` }} src={image1} alt={""} /> | ||
| </div> | ||
| </div> | ||
| <div className={"text-box col-12 col-lg-6"}> | ||
| <h2 className='title'>What is a node</h2> | ||
| <p> | ||
| Think of Celestia as a power grid, except instead of providing electricity, Celestia provides the essential | ||
| resource to power a blockchain: consensus and data availability. Similar to how anyone can plug into an | ||
| electricity grid to power their appliance, anyone can plug into Celestia’s network to power their own | ||
| blockchain. | ||
| </p> | ||
| <h2 className='title'>What does it mean to ‘run’ a node</h2> | ||
| <p> | ||
| Think of Celestia as a power grid, except instead of providing electricity, Celestia provides the essential | ||
| resource to power a blockchain: consensus and data availability. Similar to how anyone can plug into an | ||
| electricity grid to power their appliance, anyone can plug into Celestia’s network to power their own | ||
| blockchain. | ||
| </p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </section> | ||
|
|
||
| <section className={"start-up"}> | ||
| <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'> | ||
| Celestia gives developers the freedom to define their own sovereign chain, tailored for their | ||
| application,Celestia gives developers the freedom to define their own sovereign chain, tailored for their | ||
| applicationCelestia gives developers the freedom to define their own sovereign chain, tailored for their | ||
| application | ||
| </p> | ||
| </div> | ||
| <div className={"image-box--modular col-12 col-lg-6"}> | ||
| <div className='image-wrapper'> | ||
| <img src={image1} 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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.