Start using Celestia
{footerBoxes2 &&
@@ -20,13 +20,23 @@ function FooterBox2({ footerBoxes2 }) {
diff --git a/src/components/footer.js b/src/components/footer.js
index 3f93df987..3ad1bc40d 100644
--- a/src/components/footer.js
+++ b/src/components/footer.js
@@ -3,7 +3,7 @@ import { Link } from "gatsby";
import addToMailchimp from "gatsby-plugin-mailchimp";
import { AnchorLink } from "gatsby-plugin-anchor-links";
-import FooterBox from "../components/footer-box";
+// import FooterBox from "../components/footer-box";
import FooterBox2 from "../components/footer-box-2";
import ReactModal from "react-modal";
@@ -254,9 +254,7 @@ class Footer extends React.Component {
{box.link.type === "internal" ? (
-
+
) : box.link.type === "anchor" ? (
-
+
{box.link.text}
) : (
-
+
)}
-
-
- This website is maintained by Celestia Labs. -
+This website is maintained by Celestia Labs.
Website designed with by Designatives
diff --git a/src/components/glossary-nav.js b/src/components/glossary-nav.js index 6adc372a4..d781d95c9 100644 --- a/src/components/glossary-nav.js +++ b/src/components/glossary-nav.js @@ -1,59 +1,69 @@ -import * as React from "react" -import { Link } from "gatsby" -import {glossaries} from "../datas/glossary/data"; +import * as React from "react"; +import { Link } from "gatsby"; +import { glossaries } from "../datas/glossary/data"; -const GlossaryNav = ({url}) => { +const GlossaryNav = ({ url }) => { + const paths = url && url.split("/").filter((entry) => entry !== ""); + const lastPath = paths && paths[paths.length - 1]; - const paths = url && url.split("/").filter(entry => entry !== ""); - const lastPath = paths && paths[paths.length - 1]; + const allGlossaries = []; + let prev, + next = []; - const allGlossaries = [] - let prev, next = [] + glossaries && + glossaries.map((glossary) => { + return ( + glossary && + Object.values(glossary)[0].map((result) => { + allGlossaries.push(result); + return result; + }) + ); + }); + allGlossaries && + allGlossaries.map((glossary, index) => { + if (glossary.url === lastPath) { + prev = allGlossaries[index - 1] ? allGlossaries[index - 1] : allGlossaries[allGlossaries.length - 1]; + next = allGlossaries[index + 1] ? allGlossaries[index + 1] : allGlossaries[0]; + } + return glossary; + }); - glossaries && glossaries.map(glossary =>{ - glossary && Object.values(glossary)[0].map(result=>{ - allGlossaries.push(result); - }) - }) + return ( +
+ {prev && next ? (
+
+ );
+};
-
- allGlossaries && allGlossaries.map((glossary,index) => {
- if(glossary.url === lastPath){
- prev = allGlossaries[index-1] ? allGlossaries[index-1] : allGlossaries[allGlossaries.length-1]
- next = allGlossaries[index+1] ? allGlossaries[index+1] : allGlossaries[0]
- }
- })
-
-
- return (
-
+
+ ) : (
+
+ )}
+
+ {prev && (
+
+
+
+
+
+ )}
+
+ {prev.title}
+
+
+ {prev.text}
+
+
+
+
+
+
+
+ {next.title}
+
+
+ {next.text}
+
- {prev && next ?
- )
-}
-
-export default GlossaryNav
+export default GlossaryNav;
diff --git a/src/components/header.js b/src/components/header.js
index d8e7831f6..578e96c5b 100644
--- a/src/components/header.js
+++ b/src/components/header.js
@@ -1,182 +1,203 @@
-import * as React from "react"
-import { Link } from "gatsby"
+import React, { useState, useEffect } from "react";
+import { Link } from "gatsby";
-import logo from '../images/celestia-logo.svg'
+import logo from "../images/celestia-logo.svg";
import Image from "./imageComponent";
const navigation = [
- {
- text: "Learn",
- url: "/resources/",
- type: 'internal',
- submenus: [
- {
- text: "What is Celestia?",
- subtext: "Start here",
- url: "/what-is-celestia/",
- icon: "menu/logo.svg",
- type: 'internal',
- class: 'plausible-event-name=What_Is_Celestia_Button--Header'
- },
- {
- text: "Dive into modular",
- subtext: "Dive deep",
- url: "/learn/",
- icon: "menu/books.svg",
- type: 'internal',
- class: 'plausible-event-name=Dive_into_Modular_Button--Header'
- },
- {
- text: "FAQ",
- subtext: "Learn",
- url: "/faq/",
- icon: "menu/faq.svg",
- type: 'internal',
- class: ''
- },
- {
- text: "Read the whitepaper",
- subtext: "Research paper",
- url: "https://arxiv.org/abs/1905.09274",
- icon: "menu/research.svg",
- type: 'internal',
- class: ''
- }
- ]
- },{
- text: "Build",
- url: "",
- submenus: [
- {
- text: "Start with the dev portal",
- subtext: "Developer portal",
- url: "/developer-portal/",
- icon: "menu/devnet.svg",
- type: 'internal',
- class: 'plausible-event-name=Dev_Portal_Button--Header'
- },
- {
- text: "Read the docs",
- subtext: "Celestia Documentation",
- url: "https://docs.celestia.org/",
- icon: "menu/documentation.svg",
- type: 'external',
- class: 'plausible-event-name=Read_The_Docs_Button--Header'
- },
- {
- text: "View the GitHub repos",
- subtext: "GitHub repositories",
- url: "https://github.com/celestiaorg",
- icon: "menu/github.svg",
- type: 'external',
- class: ''
- }
- ]
- },{
- text: "Run a node",
- url: "/run-a-light-node/",
- type: 'internal'
- },
-]
+ {
+ text: "Learn",
+ url: "/resources/",
+ type: "internal",
+ submenus: [
+ {
+ text: "What is Celestia?",
+ subtext: "Start here",
+ url: "/what-is-celestia/",
+ icon: "menu/logo.svg",
+ type: "internal",
+ class: "plausible-event-name=What_Is_Celestia_Button--Header",
+ },
+ {
+ text: "Dive into modular",
+ subtext: "Dive deep",
+ url: "/learn/",
+ icon: "menu/books.svg",
+ type: "internal",
+ class: "plausible-event-name=Dive_into_Modular_Button--Header",
+ },
+ {
+ text: "FAQ",
+ subtext: "Learn",
+ url: "/faq/",
+ icon: "menu/faq.svg",
+ type: "internal",
+ class: "",
+ },
+ {
+ text: "Read the whitepaper",
+ subtext: "Research paper",
+ url: "https://arxiv.org/abs/1905.09274",
+ icon: "menu/research.svg",
+ type: "internal",
+ class: "",
+ },
+ ],
+ },
+ {
+ text: "Build",
+ url: "",
+ submenus: [
+ {
+ text: "Start with the dev portal",
+ subtext: "Developer portal",
+ url: "/developer-portal/",
+ icon: "menu/devnet.svg",
+ type: "internal",
+ class: "plausible-event-name=Dev_Portal_Button--Header",
+ },
+ {
+ text: "Read the docs",
+ subtext: "Celestia Documentation",
+ url: "https://docs.celestia.org/",
+ icon: "menu/documentation.svg",
+ type: "external",
+ class: "plausible-event-name=Read_The_Docs_Button--Header",
+ },
+ {
+ text: "View the GitHub repos",
+ subtext: "GitHub repositories",
+ url: "https://github.com/celestiaorg",
+ icon: "menu/github.svg",
+ type: "external",
+ class: "",
+ },
+ ],
+ },
+ {
+ text: "Run a node",
+ url: "/run-a-light-node/",
+ type: "internal",
+ },
+];
-class Header extends React.Component {
- componentDidMount() {
- window.addEventListener("scroll", this.toggleHeaderClass);
- this.toggleHeaderClass();
- }
+const Header = () => {
+ const [isBlur, setIsBlur] = useState(false);
+ const [isMenuOpen, setIsMenuOpen] = useState(false);
- componentWillUnmount() {
- window.removeEventListener("scroll", this.toggleHeaderClass);
- }
+ useEffect(() => {
+ const toggleHeaderClass = () => {
+ if (window.scrollY > 130) {
+ setIsBlur(true);
+ } else if (window.scrollY < 80) {
+ setIsBlur(false);
+ }
+ };
- toggleHeaderClass = () => {
- if (window.scrollY > 130) {
- document.getElementById("header").classList.add("blur");
- } else if(window.scrollY < 80) {
- document.getElementById("header").classList.remove("blur");
- }
- };
+ window.addEventListener("scroll", toggleHeaderClass);
+ toggleHeaderClass();
+ return () => {
+ window.removeEventListener("scroll", toggleHeaderClass);
+ };
+ }, []);
- toggleMenu = () => {
- if (document.getElementById("hamburger").classList.contains('is-active')) {
- document.getElementById("header").classList.remove("menu-opened");
- document.getElementById("hamburger").classList.remove("is-active");
- }else{
- document.getElementById("hamburger").classList.add("is-active");
- document.getElementById("header").classList.add("menu-opened");
- }
- }
+ const toggleMenu = () => {
+ setIsMenuOpen(!isMenuOpen);
+ };
- render() {
- return (
- <>
-
-
: }
-
- {prev &&
-
-
-
- }
-
- {prev.title}
-
-
- {prev.text}
-
-
-
-
-
-
-
- {next.title}
-
-
- {next.text}
-
-
-
- {
- // Handles SVG extension
- const extension = props.filename.match(/[^\\]*\.(\w+)$/)[1]
-
- const image = data.images.edges.find(n => {
- return n.node.relativePath.includes(props.filename);
- });
-
- if (!image) {
- return null;
- }
-
- if (extension === "svg" || extension === "gif") {
- return 
- }
-
-
- //const imageSizes = image.node.childImageSharp.sizes; sizes={imageSizes}
- return ![{props.alt}]()
;
- }}
- />
-);
+import React from "react";
+import { useStaticQuery, graphql } from "gatsby";
+import { GatsbyImage, getImage } from "gatsby-plugin-image";
+
+const Image = (props) => {
+ const data = useStaticQuery(graphql`
+ query {
+ images: allFile {
+ edges {
+ node {
+ relativePath
+ name
+ childImageSharp {
+ gatsbyImageData(layout: CONSTRAINED, width: 800)
+ }
+ extension
+ publicURL
+ }
+ }
+ }
+ }
+ `);
+
+ // Handles SVG extension
+ const extension = props.filename.match(/[^\\]*\.(\w+)$/)[1];
+
+ const image = data.images.edges.find((n) => {
+ return n.node.relativePath.includes(props.filename);
+ });
+
+ if (!image) {
+ return null;
+ }
+
+ if (extension === "svg" || extension === "gif") {
+ return ;
+ }
+
+ const imageData = getImage(image.node.childImageSharp);
+
+ return
@@ -56,7 +55,11 @@ export default function IconCard({ imageClass, content, variant, iconPosition =
- 
-
-
-
-
-
-
- );
- }
-}
-
-export default Header
+export default Header;
diff --git a/src/components/imageComponent.js b/src/components/imageComponent.js
index 79b6a6c39..66124942a 100644
--- a/src/components/imageComponent.js
+++ b/src/components/imageComponent.js
@@ -1,51 +1,44 @@
-import React from 'react';
-import { StaticQuery, graphql } from 'gatsby';
-import Img from 'gatsby-image';
-
-// Note: You can change "images" to whatever you'd like.
-
-const Image = props => (
-
- {this.state.msg ? :
-
- }
+ this.setState(
+ (prevState) => ({
+ listFields,
+ }),
+ () => {
+ if (this.state.email) {
+ this.mailchimp("https://celestia.us6.list-manage.com/subscribe/post?u=cde2461ba84f5279fff352829&id=8d165e36d3");
+ }
+ }
+ );
+ };
+ change = (e) => {
+ e.preventDefault();
+ this.setState({ [e.target.id]: e.target.value });
+ };
+ changeCheckbox = (e) => {
+ this.setState({ [e.target.id]: e.target.checked });
+ };
+ render() {
+ return (
+
-
- }
-
-
- Sign up to be the first to try our limited-access developer beta or validate on our testnet.
- -
+ {this.state.msg ? (
+
+ );
+ }
}
diff --git a/src/components/modules/faq.js b/src/components/modules/faq.js
index 7568050df..6aab4e534 100644
--- a/src/components/modules/faq.js
+++ b/src/components/modules/faq.js
@@ -1,29 +1,37 @@
-import * as React from "react"
+import React, { useState } from "react";
-export default class Faq extends React.Component {
- constructor(props) {
- super(props);
- this.toggleClass= this.toggleClass.bind(this);
- this.state = {
- active: false,
- };
- }
- toggleClass() {
- const currentState = this.state.active;
- this.setState({ active: !currentState });
- };
+const Faq = (props) => {
+ const [active, setActive] = useState(false);
- render() {
- return
+
+ )}
+
+
+ Sign up to be the first to try our limited-access developer beta or validate on our testnet.
+ +
- (
-
-
- {this.props.faq.question}
-
-
-
- }
-}
+ const toggleClass = () => {
+ setActive(!active);
+ };
+
+ return (
+
-
-
+
+ );
+};
+
+export default Faq;
diff --git a/src/components/modules/featured-learn.js b/src/components/modules/featured-learn.js
index 539ba5e32..2252a318a 100644
--- a/src/components/modules/featured-learn.js
+++ b/src/components/modules/featured-learn.js
@@ -1,63 +1,60 @@
import * as React from "react";
-import { graphql, StaticQuery } from "gatsby";
+import { graphql, useStaticQuery } from "gatsby";
import LearnBox from "../../components/learn-box";
export default function FeaturedLearn(props) {
- return (
-
+
+
+ {props.faq.question}
+
+
+
+
+
+
- {data.allMarkdownRemark.edges.map((edge, index) => {
- if (edge.node.frontmatter.slug === props.current) {
- const prev = index === 0 ? data.allMarkdownRemark.edges.length - 1 : index - 1;
- const next = index === data.allMarkdownRemark.edges.length - 1 ? 0 : index + 1;
+ }
+ }
+ `);
+
+ return (
+
@@ -37,7 +36,7 @@ export default function IconCard({ imageClass, content, variant, iconPosition =
+ {data.allMarkdownRemark.edges.map((edge, index) => {
+ if (edge.node.frontmatter.slug === props.current) {
+ const prev = index === 0 ? data.allMarkdownRemark.edges.length - 1 : index - 1;
+ const next = index === data.allMarkdownRemark.edges.length - 1 ? 0 : index + 1;
- return (
-
);
}
diff --git a/src/components/modules/icon-card.js b/src/components/modules/icon-card.js
index 7ee617a08..0b269c97d 100644
--- a/src/components/modules/icon-card.js
+++ b/src/components/modules/icon-card.js
@@ -1,10 +1,9 @@
import React from "react";
import Image from "../imageComponent";
-import { Link } from "gatsby";
import Button from "../buttons/button";
import { AnchorLink } from "gatsby-plugin-anchor-links";
-export default function IconCard({ imageClass, content, variant, iconPosition = "top", className, btnClass = '' }) {
+export default function IconCard({ imageClass, content, variant, iconPosition = "top", className, btnClass = "" }) {
if (content.type === "internal") {
return (
-
+ );
+ }
+ })}
+
-
- {next !== 0 && (
-
-
- )}
+ return (
+
+
- )}
- />
+ )}
+
+
+ {next !== 0 && (
+
+
- );
- }
- })}
-
@@ -18,7 +17,7 @@ export default function IconCard({ imageClass, content, variant, iconPosition =
{content.title}
{content.text && {content.text}
}
-
+
{content.title}
{content.text && {content.text}
}
-
+
{content.title}
{content.text && {content.text}
}
-
+
{content.link.text}