diff --git a/gatsby-config.js b/gatsby-config.js index db87c6728..beb7577eb 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -3,6 +3,15 @@ module.exports = { siteUrl: "https://celestia.org", title: "Celestia", }, + + siteMetadata: { + title: `The first modular blockchain network`, + description: `Celestia is a modular consensus and data network, built to enable anyone to easily deploy their own blockchain with minimal overhead.`, + author: `@CelestiaOrg`, + siteUrl: `https://celestia.org`, + // siteUrl: `https://dev.lazyledger.org`, <-- switch to this url for OG meta previews on https://dev.lazyledger.org + image: `/celestia-default-og-image.jpg`, + }, plugins: [ "gatsby-plugin-react-helmet", diff --git a/src/components/header.js b/src/components/header.js index d3ed505e1..a063880f1 100644 --- a/src/components/header.js +++ b/src/components/header.js @@ -1,6 +1,5 @@ import * as React from "react" import { Link } from "gatsby" -import {Helmet} from "react-helmet"; import logo from '../images/celestia-logo.svg' import Image from "./imageComponent"; @@ -163,9 +162,6 @@ class Header extends React.Component { return ( <>
- - Celestia -
diff --git a/src/pages/developer-portal.js b/src/pages/developer-portal.js index 8b138e8df..c7c860b85 100644 --- a/src/pages/developer-portal.js +++ b/src/pages/developer-portal.js @@ -10,17 +10,21 @@ import { faqs } from "../datas/developer-portal/faq"; import { community } from "../datas/developer-portal/community"; import { FooterBoxes } from "../datas/developer-portal/content"; import Layout from "../components/layout"; -import { Helmet } from "react-helmet"; import IconCard from "../components/modules/icon-card"; import { AnchorLink } from "gatsby-plugin-anchor-links"; import Faq from "../components/modules/faq"; +import { seoContent } from "../datas/developer-portal/seoContent"; +import SEO from "../components/seo"; + const DevPortal = () => { return ( - - Celestia - Developer Portal - +
diff --git a/src/pages/ecosystem.js b/src/pages/ecosystem.js index c2a2c93f4..8619c8253 100644 --- a/src/pages/ecosystem.js +++ b/src/pages/ecosystem.js @@ -1,164 +1,170 @@ -import * as React from "react" - -import {ecosystemCategories} from "../datas/ecosystem/ecosystems"; -import {FooterBoxes} from "../datas/ecosystem-page/content"; +import * as React from "react"; +import { ecosystemCategories } from "../datas/ecosystem/ecosystems"; +import { FooterBoxes } from "../datas/ecosystem/content"; import Layout from "../components/layout"; -import {Helmet} from "react-helmet"; -import {useState} from "react"; +import { useState } from "react"; import Ecosystem from "../components/ecosystem"; -import { graphql } from "gatsby"; - -export const query = graphql` - { - site { - siteMetadata { - siteUrl - } - } - } -`; - -const EcosystemPage = ({ data }) => { - const [selectedCategory,setSelectedCategory] = useState('all') - const [search,setSearch] = useState(false) - const [open,setOpen] = useState(false) - const [orderedEcosystems,setOrderedEcosystems] = useState([]) - var ecosystems = [] - - function searchApp(e){ - e.preventDefault(); - setSelectedCategory('all'); - setSearch(e.target.value) - } - - function openCategorySelector(category){ - setOpen(!open); - setSelectedCategory(category); - } - - ecosystemCategories.map(function(category,index){ - category.ecosystems.map(function(ecosystem) { - ecosystems.push({details: ecosystem, category: category}) - }) - }) - - function sortByKey(array, key) { - return array.sort(function(a, b) { - var x = a.details[key]; - var y = b.details[key]; - return ((x < y) ? -1 : ((x > y) ? 1 : 0)); - }); - } - sortByKey(ecosystems,'title'); +import { seoContent } from "../datas/ecosystem/seoContent"; +import SEO from "../components/seo"; - const siteMeta = data.site.siteMetadata; +const EcosystemPage = () => { + const [selectedCategory, setSelectedCategory] = useState("all"); + const [search, setSearch] = useState(false); + const [open, setOpen] = useState(false); + const [orderedEcosystems, setOrderedEcosystems] = useState([]); + var ecosystems = []; - return ( - - - Celestia - Ecosystem - - - - - - - - - - - - - - - - -
-
-
- -

Celestia Ecosystem

-
-
-
Discover a wide range of apps and services built in the Celestia ecosystem.
-
Ecosystem map
 - -
-
+ function searchApp(e) { + e.preventDefault(); + setSelectedCategory("all"); + setSearch(e.target.value); + } -
-
-
-
-
    -
  • openCategorySelector('all')} className={`${selectedCategory === 'all' ? 'selected' : ''}`}>All - {selectedCategory === 'all' && - - - - - - - - - - - } -
    • - {ecosystemCategories.map(function(category,index){ - return
  • openCategorySelector(category.id)} className={`${selectedCategory === category.id ? 'selected' : ''}`}>{category.name} - {selectedCategory === category.id && - - - - - - - - - - - } -
    • - })} -
-
-
-
 
-
-
-
-
-
- -
-
-
-
- {ecosystems.map(function(ecosystem,index){ - return ecosystem && (selectedCategory === 'all' || selectedCategory === ecosystem.category.id) && (!search || (search && ecosystem.details.title.toLowerCase().includes(search.toLowerCase()))) &&
- -
- })} -
-
-
+ function openCategorySelector(category) { + setOpen(!open); + setSelectedCategory(category); + } -
-
-
- - ) -} + ecosystemCategories.map(function (category, index) { + category.ecosystems.map(function (ecosystem) { + ecosystems.push({ details: ecosystem, category: category }); + }); + }); + + function sortByKey(array, key) { + return array.sort(function (a, b) { + var x = a.details[key]; + var y = b.details[key]; + return x < y ? -1 : x > y ? 1 : 0; + }); + } -export default EcosystemPage + sortByKey(ecosystems, "title"); + + return ( + + +
+
+
+

Celestia Ecosystem

+
+
+
Discover a wide range of apps and services built in the Celestia ecosystem.
+ +
Ecosystem map
+ +
+
+ +
+
+
+
+
    +
  • openCategorySelector("all")} + className={`${selectedCategory === "all" ? "selected" : ""}`} + > + All + {selectedCategory === "all" && ( + + + + + + + + + + + + + )} +
    • + {ecosystemCategories.map(function (category, index) { + return ( +
  • openCategorySelector(category.id)} + className={`${selectedCategory === category.id ? "selected" : ""}`} + > + {category.name} + {selectedCategory === category.id && ( + + + + + + + + + + + + + )} +
    • + ); + })} +
+
+
+
 
+
+
+
+
+
+ +
+
+
+
+ {ecosystems.map(function (ecosystem, index) { + return ( + ecosystem && + (selectedCategory === "all" || selectedCategory === ecosystem.category.id) && + (!search || (search && ecosystem.details.title.toLowerCase().includes(search.toLowerCase()))) && ( +
+ +
+ ) + ); + })} +
+
+
+
+
+
+ + ); +}; + +export default EcosystemPage; diff --git a/src/pages/faq.js b/src/pages/faq.js index ddc6c8a36..bdd12b9d0 100644 --- a/src/pages/faq.js +++ b/src/pages/faq.js @@ -3,14 +3,18 @@ import {FooterBoxes} from "../datas/faq/content"; import {faqs} from "../datas/faq/faqs"; import Faq from "../components/modules/faq"; import Layout from "../components/layout"; -import {Helmet} from "react-helmet"; + +import { seoContent } from "../datas/faq/seoContent"; +import SEO from "../components/seo"; const TeamPage = () => { return ( - - Celestia - FAQ - +
diff --git a/src/pages/glossary.js b/src/pages/glossary.js index 852b884b7..0d38e16ab 100644 --- a/src/pages/glossary.js +++ b/src/pages/glossary.js @@ -1,205 +1,272 @@ -import * as React from "react" -import 'react-multi-carousel/lib/styles.css'; -import { Helmet } from 'react-helmet'; +import * as React from "react"; +import "react-multi-carousel/lib/styles.css"; -import {FooterBoxes} from "../datas/glossary/content"; +import { FooterBoxes } from "../datas/glossary/content"; import Layout from "../components/layout"; -import {glossaries} from "../datas/glossary/data"; -import {Link} from "gatsby"; -import {useState} from "react"; +import { glossaries } from "../datas/glossary/data"; +import { Link } from "gatsby"; +import { useState } from "react"; -import twitterCardImage from "../images/glossary-twitter-card.png"; + +import { seoContent } from "../datas/glossary/seoContent"; +import SEO from "../components/seo"; class Result extends React.Component { - render() { - return ( -
  • - -
    -
    {this.props.result.title}
    - {this.props.result.text} -
    - -
    • - ) - } + render() { + return ( +
  • + +
    +
    {this.props.result.title}
    + {this.props.result.text} +
    + +
    • + ); + } } class Results extends React.Component { - render() { - return ( -
    -
    -
    -
    -
    {Object.keys(this.props.glossary)}
    -
    -
    -
      - {Object.values(this.props.glossary)[0].map((result,glossaryIndex,array) => ( - - ))} -
    -
    -
    -
    -
    - ) - } + render() { + return ( +
    +
    +
    +
    +
    {Object.keys(this.props.glossary)}
    +
    +
    +
      + {Object.values(this.props.glossary)[0].map((result, glossaryIndex, array) => ( + + ))} +
    +
    +
    +
    +
    + ); + } } -function SearchGlossary(e){ - - let filteredGlossaries = []; - let string = e.toLowerCase(); - filteredGlossaries = []; +function SearchGlossary(e) { + let filteredGlossaries = []; + let string = e.toLowerCase(); + filteredGlossaries = []; - let count = 0; + let count = 0; - glossaries.map(glossary => (Object.values(glossary)[0] - .filter(v => v.title.toLowerCase().includes(string) || v.text.toLowerCase().includes(string)) - .reduce((key, obj) => { - filteredGlossaries.push({[count]:[obj]}); - count = count + 1 - }, {}))); + glossaries.map((glossary) => + Object.values(glossary)[0] + .filter((v) => v.title.toLowerCase().includes(string) || v.text.toLowerCase().includes(string)) + .reduce((key, obj) => { + filteredGlossaries.push({ [count]: [obj] }); + count = count + 1; + }, {}) + ); - return filteredGlossaries; + return filteredGlossaries; } -function GetGlossaries(props){ - - const [search, toggleSearch] = useState(false) - const [filter, toggleFilter] = useState(false) - const [expand, toggleExpand] = useState(false) - const [filteredGlossaries, setGlossaries] = useState([]) - - return ( -
    -
    -
    -
    -
    {toggleSearch(true );toggleFilter(true );}} onKeyDown={() => {toggleSearch(true );toggleFilter(true );}}> -
      -
    • - setGlossaries(SearchGlossary(e.target.value))}/> - -
      • -
    -
    -
    -
    -
    -
    -
      -
    • {toggleSearch(false );toggleFilter(true );}} onKeyDown={() => {toggleSearch(false );toggleFilter(true );}}>
      • -
    • - {toggleSearch(false ); toggleFilter(false)}}>{'ALL'} -
      • - {glossaries.map((glossary,index) => { - const alpha = String(Object.keys(glossary)) - return (
    • - {toggleSearch(false ); toggleFilter(true)}}>{alpha} -
      • ) - } - )} -
    -
    -
    toggleExpand(!expand)} onKeyDown={() => toggleExpand(!expand )}>
    -
    -
    -
    -
    - -
    - {!filter && filteredGlossaries ? - glossaries.map((glossary,index) => - - ) : - search && filteredGlossaries ? -
    - {filteredGlossaries.length ? filteredGlossaries.map((glossary,index) => -
    -
    -
    -
    -
      - {Object.values(glossary)[0].map(result => ( - - ))} -
    -
    -
    -
    -
    - ) :
    -
    -

    No Results

    -
    -
    - } -
    :
    - {glossaries.map((glossary,index) => (Object.keys(glossary) == props.alpha && !search) && -
    -
    -
    -
    -
    {Object.keys(glossary)}
    -
    -
    -
      - {Object.values(glossary)[0].map((result,glossaryIndex,array) => ( - - ))} -
    -
    -
    -
    -
    - )} -
    - } - -
    -
    ) +function GetGlossaries(props) { + const [search, toggleSearch] = useState(false); + const [filter, toggleFilter] = useState(false); + const [expand, toggleExpand] = useState(false); + const [filteredGlossaries, setGlossaries] = useState([]); + + return ( +
    +
    +
    +
    +
    { + toggleSearch(true); + toggleFilter(true); + }} + onKeyDown={() => { + toggleSearch(true); + toggleFilter(true); + }} + > +
      +
    • + setGlossaries(SearchGlossary(e.target.value))} + /> + +
      • +
    +
    +
    +
    +
    +
    +
      +
    • { + toggleSearch(false); + toggleFilter(true); + }} + onKeyDown={() => { + toggleSearch(false); + toggleFilter(true); + }} + > + +
      • +
    • + { + toggleSearch(false); + toggleFilter(false); + }} + > + {"ALL"} + +
      • + {glossaries.map((glossary, index) => { + const alpha = String(Object.keys(glossary)); + return ( +
    • + { + toggleSearch(false); + toggleFilter(true); + }} + > + {alpha} + +
      • + ); + })} +
    +
    +
    toggleExpand(!expand)} + onKeyDown={() => toggleExpand(!expand)} + > + +
    +
    +
    +
    +
    + +
    + {!filter && filteredGlossaries ? ( + glossaries.map((glossary, index) => ) + ) : search && filteredGlossaries ? ( +
    + {filteredGlossaries.length ? ( + filteredGlossaries.map((glossary, index) => ( +
    +
    +
    +
    +
      + {Object.values(glossary)[0].map((result) => ( + + ))} +
    +
    +
    +
    +
    + )) + ) : ( +
    +
    +

    No Results

    +
    +
    + )} +
    + ) : ( +
    + {glossaries.map( + (glossary, index) => + Object.keys(glossary) == props.alpha && + !search && ( +
    +
    +
    +
    +
    {Object.keys(glossary)}
    +
    +
    +
      + {Object.values(glossary)[0].map((result, glossaryIndex, array) => ( + + ))} +
    +
    +
    +
    +
    + ) + )} +
    + )} +
    +
    + ); } class GlossaryPage extends React.Component { - constructor(props) { - super(props); - this.state = { - filteredGlossaries : glossaries, - isSearched : false - } - } - render() { - return ( - - - Celestia - Glossary - - - - - - - - - - - -
    -
    -
    -

    Glossary

    - - -
    -
    -
    -     - ) - } + constructor(props) { + super(props); + this.state = { + filteredGlossaries: glossaries, + isSearched: false, + }; + } + render() { + return ( + + +
    +
    +
    +

    Glossary

    + + +
    +
    +
    +     + ); + } } -export default GlossaryPage +export default GlossaryPage; diff --git a/src/pages/glossary/block-header.js b/src/pages/glossary/block-header.js index d88b9094d..3c9724c0f 100644 --- a/src/pages/glossary/block-header.js +++ b/src/pages/glossary/block-header.js @@ -5,11 +5,13 @@ import Layout from "../../components/layout"; import BreadCrumb from "../../components/breadcrumb"; import SocialShare from "../../components/socialShare"; import GlossaryNav from "../../components/glossary-nav"; -import {Helmet} from "react-helmet"; -import twitterCardImage from "../../images/glossary-twitter-card.png"; + +import { seoContent } from "../../datas/glossary/seoContent"; +import SEO from "../../components/seo"; const title = 'Block header'; + class GlossaryContent extends React.Component { render() { return ( @@ -25,19 +27,11 @@ class GlossarySubpage extends React.Component { render() { return ( - - Celestia - {title} - - - - - - - - - - - +
    diff --git a/src/pages/glossary/block-producer.js b/src/pages/glossary/block-producer.js index bc69ea163..5aca5c26c 100644 --- a/src/pages/glossary/block-producer.js +++ b/src/pages/glossary/block-producer.js @@ -5,8 +5,9 @@ import Layout from "../../components/layout"; import BreadCrumb from "../../components/breadcrumb"; import SocialShare from "../../components/socialShare"; import GlossaryNav from "../../components/glossary-nav"; -import {Helmet} from "react-helmet"; -import twitterCardImage from "../../images/glossary-twitter-card.png"; + +import { seoContent } from "../../datas/glossary/seoContent"; +import SEO from "../../components/seo"; const title = 'Block producer'; @@ -26,19 +27,11 @@ class GlossarySubpage extends React.Component { render() { return ( - - Celestia - {title} - - - - - - - - - - - +
    diff --git a/src/pages/glossary/block-space.js b/src/pages/glossary/block-space.js index fd8934416..3df312b41 100644 --- a/src/pages/glossary/block-space.js +++ b/src/pages/glossary/block-space.js @@ -5,8 +5,9 @@ import Layout from "../../components/layout"; import BreadCrumb from "../../components/breadcrumb"; import SocialShare from "../../components/socialShare"; import GlossaryNav from "../../components/glossary-nav"; -import {Helmet} from "react-helmet"; -import twitterCardImage from "../../images/glossary-twitter-card.png"; + +import { seoContent } from "../../datas/glossary/seoContent"; +import SEO from "../../components/seo"; const title = 'Block space'; @@ -26,19 +27,11 @@ class GlossarySubpage extends React.Component { render() { return ( - - Celestia - {title} - - - - - - - - - - - +
    diff --git a/src/pages/glossary/blockchain-cluster.js b/src/pages/glossary/blockchain-cluster.js index ed9fcac1a..a58992661 100644 --- a/src/pages/glossary/blockchain-cluster.js +++ b/src/pages/glossary/blockchain-cluster.js @@ -5,8 +5,9 @@ import Layout from "../../components/layout"; import BreadCrumb from "../../components/breadcrumb"; import SocialShare from "../../components/socialShare"; import GlossaryNav from "../../components/glossary-nav"; -import {Helmet} from "react-helmet"; -import twitterCardImage from "../../images/glossary-twitter-card.png"; + +import { seoContent } from "../../datas/glossary/seoContent"; +import SEO from "../../components/seo"; const title = 'Blockchain cluster'; @@ -31,19 +32,11 @@ class GlossaryContent extends React.Component { const GlossarySubpage = ({location}) => { return ( - - Celestia - {title} - - - - - - - - - - - +
    diff --git a/src/pages/glossary/composability.js b/src/pages/glossary/composability.js index a48af4349..da7ff4048 100644 --- a/src/pages/glossary/composability.js +++ b/src/pages/glossary/composability.js @@ -5,8 +5,10 @@ import Layout from "../../components/layout"; import BreadCrumb from "../../components/breadcrumb"; import SocialShare from "../../components/socialShare"; import GlossaryNav from "../../components/glossary-nav"; -import {Helmet} from "react-helmet"; -import twitterCardImage from "../../images/glossary-twitter-card.png"; + +import { seoContent } from "../../datas/glossary/seoContent"; +import SEO from "../../components/seo"; + const title = 'Composability'; @@ -30,19 +32,11 @@ class GlossarySubpage extends React.Component { return (
    - - Celestia - {title} - - - - - - - - - - - +
    diff --git a/src/pages/glossary/consensus-algorithm.js b/src/pages/glossary/consensus-algorithm.js index ba42475c3..4d4d0da11 100644 --- a/src/pages/glossary/consensus-algorithm.js +++ b/src/pages/glossary/consensus-algorithm.js @@ -5,8 +5,9 @@ import Layout from "../../components/layout"; import BreadCrumb from "../../components/breadcrumb"; import SocialShare from "../../components/socialShare"; import GlossaryNav from "../../components/glossary-nav"; -import {Helmet} from "react-helmet"; -import twitterCardImage from "../../images/glossary-twitter-card.png"; + +import { seoContent } from "../../datas/glossary/seoContent"; +import SEO from "../../components/seo"; const title = 'Consensus algorithm'; @@ -27,19 +28,11 @@ class GlossarySubpage extends React.Component { render() { return ( - - Celestia - {title} - - - - - - - - - - - +
    diff --git a/src/pages/glossary/cosmos-sdk.js b/src/pages/glossary/cosmos-sdk.js index 81c5dd890..357689253 100644 --- a/src/pages/glossary/cosmos-sdk.js +++ b/src/pages/glossary/cosmos-sdk.js @@ -5,8 +5,9 @@ import Layout from "../../components/layout"; import BreadCrumb from "../../components/breadcrumb"; import SocialShare from "../../components/socialShare"; import GlossaryNav from "../../components/glossary-nav"; -import {Helmet} from "react-helmet"; -import twitterCardImage from "../../images/glossary-twitter-card.png"; + +import { seoContent } from "../../datas/glossary/seoContent"; +import SEO from "../../components/seo"; const title = 'Cosmos SDK'; @@ -26,19 +27,11 @@ class GlossarySubpage extends React.Component { render() { return ( - - Celestia - {title} - - - - - - - - - - - +
    diff --git a/src/pages/glossary/cross-chain-interoperability.js b/src/pages/glossary/cross-chain-interoperability.js index caf3e419c..53d29e4a8 100644 --- a/src/pages/glossary/cross-chain-interoperability.js +++ b/src/pages/glossary/cross-chain-interoperability.js @@ -5,8 +5,9 @@ import Layout from "../../components/layout"; import BreadCrumb from "../../components/breadcrumb"; import SocialShare from "../../components/socialShare"; import GlossaryNav from "../../components/glossary-nav"; -import {Helmet} from "react-helmet"; -import twitterCardImage from "../../images/glossary-twitter-card.png"; + +import { seoContent } from "../../datas/glossary/seoContent"; +import SEO from "../../components/seo"; const title = 'Cross-chain interoperability'; @@ -26,19 +27,11 @@ class GlossarySubpage extends React.Component { render() { return ( - - Celestia - {title} - - - - - - - - - - - +
    diff --git a/src/pages/glossary/data-availability-committee.js b/src/pages/glossary/data-availability-committee.js index 1e110793f..9400d70db 100644 --- a/src/pages/glossary/data-availability-committee.js +++ b/src/pages/glossary/data-availability-committee.js @@ -5,8 +5,9 @@ import Layout from "../../components/layout"; import BreadCrumb from "../../components/breadcrumb"; import SocialShare from "../../components/socialShare"; import GlossaryNav from "../../components/glossary-nav"; -import {Helmet} from "react-helmet"; -import twitterCardImage from "../../images/glossary-twitter-card.png"; + +import { seoContent } from "../../datas/glossary/seoContent"; +import SEO from "../../components/seo"; const title = 'Data availability committee'; @@ -27,19 +28,11 @@ class GlossarySubpage extends React.Component { render() { return ( - - Celestia - {title} - - - - - - - - - - - +
    diff --git a/src/pages/glossary/data-availability-sampling.js b/src/pages/glossary/data-availability-sampling.js index cc33c8258..05fa41746 100644 --- a/src/pages/glossary/data-availability-sampling.js +++ b/src/pages/glossary/data-availability-sampling.js @@ -5,8 +5,9 @@ import Layout from "../../components/layout"; import BreadCrumb from "../../components/breadcrumb"; import SocialShare from "../../components/socialShare"; import GlossaryNav from "../../components/glossary-nav"; -import {Helmet} from "react-helmet"; -import twitterCardImage from "../../images/glossary-twitter-card.png"; + +import { seoContent } from "../../datas/glossary/seoContent"; +import SEO from "../../components/seo"; const title = 'Data availability sampling'; @@ -29,19 +30,11 @@ class GlossarySubpage extends React.Component { render() { return ( - - Celestia - {title} - - - - - - - - - - - +
    diff --git a/src/pages/glossary/data-availability.js b/src/pages/glossary/data-availability.js index 9d572f8c9..cd392e73d 100644 --- a/src/pages/glossary/data-availability.js +++ b/src/pages/glossary/data-availability.js @@ -5,8 +5,9 @@ import Layout from "../../components/layout"; import BreadCrumb from "../../components/breadcrumb"; import SocialShare from "../../components/socialShare"; import GlossaryNav from "../../components/glossary-nav"; -import {Helmet} from "react-helmet"; -import twitterCardImage from "../../images/glossary-twitter-card.png"; + +import { seoContent } from "../../datas/glossary/seoContent"; +import SEO from "../../components/seo"; const title = 'Data availability'; @@ -29,19 +30,11 @@ class GlossarySubpage extends React.Component { render() { return ( - - Celestia - {title} - - - - - - - - - - - +
    diff --git a/src/pages/glossary/data-throughput.js b/src/pages/glossary/data-throughput.js index 0530346d6..52414e661 100644 --- a/src/pages/glossary/data-throughput.js +++ b/src/pages/glossary/data-throughput.js @@ -5,8 +5,9 @@ import Layout from "../../components/layout"; import BreadCrumb from "../../components/breadcrumb"; import SocialShare from "../../components/socialShare"; import GlossaryNav from "../../components/glossary-nav"; -import {Helmet} from "react-helmet"; -import twitterCardImage from "../../images/glossary-twitter-card.png"; + +import { seoContent } from "../../datas/glossary/seoContent"; +import SEO from "../../components/seo"; const title = 'Data throughput'; @@ -27,19 +28,11 @@ class GlossarySubpage extends React.Component { render() { return ( - - Celestia - {title} - - - - - - - - - - - +
    diff --git a/src/pages/glossary/data-withholding-attack.js b/src/pages/glossary/data-withholding-attack.js index aa2bed5f5..c9376685e 100644 --- a/src/pages/glossary/data-withholding-attack.js +++ b/src/pages/glossary/data-withholding-attack.js @@ -5,8 +5,9 @@ import Layout from "../../components/layout"; import BreadCrumb from "../../components/breadcrumb"; import SocialShare from "../../components/socialShare"; import GlossaryNav from "../../components/glossary-nav"; -import {Helmet} from "react-helmet"; -import twitterCardImage from "../../images/glossary-twitter-card.png"; + +import { seoContent } from "../../datas/glossary/seoContent"; +import SEO from "../../components/seo"; const title = 'Data withholding attack'; @@ -30,19 +31,11 @@ class GlossarySubpage extends React.Component { render() { return ( - - Celestia - {title} - - - - - - - - - - - +
    diff --git a/src/pages/glossary/dispute-resolution.js b/src/pages/glossary/dispute-resolution.js index 2e6541130..f6f5a25d8 100644 --- a/src/pages/glossary/dispute-resolution.js +++ b/src/pages/glossary/dispute-resolution.js @@ -5,8 +5,9 @@ import Layout from "../../components/layout"; import BreadCrumb from "../../components/breadcrumb"; import SocialShare from "../../components/socialShare"; import GlossaryNav from "../../components/glossary-nav"; -import {Helmet} from "react-helmet"; -import twitterCardImage from "../../images/glossary-twitter-card.png"; + +import { seoContent } from "../../datas/glossary/seoContent"; +import SEO from "../../components/seo"; const title = 'Dispute resolution'; @@ -29,19 +30,11 @@ class GlossarySubpage extends React.Component { render() { return ( - - Celestia - {title} - - - - - - - - - - - +
    diff --git a/src/pages/glossary/execution-environment.js b/src/pages/glossary/execution-environment.js index 945acc3c7..c26349205 100644 --- a/src/pages/glossary/execution-environment.js +++ b/src/pages/glossary/execution-environment.js @@ -5,8 +5,9 @@ import Layout from "../../components/layout"; import BreadCrumb from "../../components/breadcrumb"; import SocialShare from "../../components/socialShare"; import GlossaryNav from "../../components/glossary-nav"; -import {Helmet} from "react-helmet"; -import twitterCardImage from "../../images/glossary-twitter-card.png"; + +import { seoContent } from "../../datas/glossary/seoContent"; +import SEO from "../../components/seo"; const title = 'Execution environment'; @@ -29,19 +30,11 @@ class GlossarySubpage extends React.Component { render() { return ( - - Celestia - {title} - - - - - - - - - - - +
    diff --git a/src/pages/glossary/fee-market.js b/src/pages/glossary/fee-market.js index e7e877d1b..1acad29ee 100644 --- a/src/pages/glossary/fee-market.js +++ b/src/pages/glossary/fee-market.js @@ -5,8 +5,9 @@ import Layout from "../../components/layout"; import BreadCrumb from "../../components/breadcrumb"; import SocialShare from "../../components/socialShare"; import GlossaryNav from "../../components/glossary-nav"; -import {Helmet} from "react-helmet"; -import twitterCardImage from "../../images/glossary-twitter-card.png"; + +import { seoContent } from "../../datas/glossary/seoContent"; +import SEO from "../../components/seo"; const title = 'Fee market'; @@ -26,19 +27,11 @@ class GlossarySubpage extends React.Component { render() { return ( - - Celestia - {title} - - - - - - - - - - - +
    diff --git a/src/pages/glossary/fork-choice-rule.js b/src/pages/glossary/fork-choice-rule.js index 5d0e098d0..e5cc67831 100644 --- a/src/pages/glossary/fork-choice-rule.js +++ b/src/pages/glossary/fork-choice-rule.js @@ -5,8 +5,9 @@ import Layout from "../../components/layout"; import BreadCrumb from "../../components/breadcrumb"; import SocialShare from "../../components/socialShare"; import GlossaryNav from "../../components/glossary-nav"; -import {Helmet} from "react-helmet"; -import twitterCardImage from "../../images/glossary-twitter-card.png"; + +import { seoContent } from "../../datas/glossary/seoContent"; +import SEO from "../../components/seo"; const title = 'Fork choice rule'; @@ -26,19 +27,11 @@ class GlossarySubpage extends React.Component { render() { return ( - - Celestia - {title} - - - - - - - - - - - +
    diff --git a/src/pages/glossary/fork.js b/src/pages/glossary/fork.js index 956f7b15a..db6f147fc 100644 --- a/src/pages/glossary/fork.js +++ b/src/pages/glossary/fork.js @@ -5,8 +5,9 @@ import Layout from "../../components/layout"; import BreadCrumb from "../../components/breadcrumb"; import SocialShare from "../../components/socialShare"; import GlossaryNav from "../../components/glossary-nav"; -import {Helmet} from "react-helmet"; -import twitterCardImage from "../../images/glossary-twitter-card.png"; + +import { seoContent } from "../../datas/glossary/seoContent"; +import SEO from "../../components/seo"; const title = 'Fork'; @@ -26,19 +27,11 @@ class GlossarySubpage extends React.Component { render() { return ( - - Celestia - {title} - - - - - - - - - - - +
    diff --git a/src/pages/glossary/full-node.js b/src/pages/glossary/full-node.js index 02b5f2049..d0d8a5ebd 100644 --- a/src/pages/glossary/full-node.js +++ b/src/pages/glossary/full-node.js @@ -5,8 +5,9 @@ import Layout from "../../components/layout"; import BreadCrumb from "../../components/breadcrumb"; import SocialShare from "../../components/socialShare"; import GlossaryNav from "../../components/glossary-nav"; -import {Helmet} from "react-helmet"; -import twitterCardImage from "../../images/glossary-twitter-card.png"; + +import { seoContent } from "../../datas/glossary/seoContent"; +import SEO from "../../components/seo"; const title = 'Full node'; @@ -26,19 +27,11 @@ class GlossarySubpage extends React.Component { render() { return ( - - Celestia - {title} - - - - - - - - - - - +
    diff --git a/src/pages/glossary/honest-majority-assumption.js b/src/pages/glossary/honest-majority-assumption.js index 303a42b8e..a11b28011 100644 --- a/src/pages/glossary/honest-majority-assumption.js +++ b/src/pages/glossary/honest-majority-assumption.js @@ -5,8 +5,9 @@ import Layout from "../../components/layout"; import BreadCrumb from "../../components/breadcrumb"; import SocialShare from "../../components/socialShare"; import GlossaryNav from "../../components/glossary-nav"; -import {Helmet} from "react-helmet"; -import twitterCardImage from "../../images/glossary-twitter-card.png"; + +import { seoContent } from "../../datas/glossary/seoContent"; +import SEO from "../../components/seo"; const title = 'Honest majority assumption'; @@ -29,19 +30,11 @@ class GlossarySubpage extends React.Component { render() { return ( - - Celestia - {title} - - - - - - - - - - - +
    diff --git a/src/pages/glossary/honest-minority-assumption.js b/src/pages/glossary/honest-minority-assumption.js index 552facf68..eacd25061 100644 --- a/src/pages/glossary/honest-minority-assumption.js +++ b/src/pages/glossary/honest-minority-assumption.js @@ -5,8 +5,9 @@ import Layout from "../../components/layout"; import BreadCrumb from "../../components/breadcrumb"; import SocialShare from "../../components/socialShare"; import GlossaryNav from "../../components/glossary-nav"; -import {Helmet} from "react-helmet"; -import twitterCardImage from "../../images/glossary-twitter-card.png"; + +import { seoContent } from "../../datas/glossary/seoContent"; +import SEO from "../../components/seo"; const title = 'Honest minority assumption'; @@ -29,19 +30,11 @@ class GlossarySubpage extends React.Component { render() { return ( - - Celestia - {title} - - - - - - - - - - - +
    diff --git a/src/pages/glossary/inter-cluster-communication.js b/src/pages/glossary/inter-cluster-communication.js index 9a55a3c14..676abeef5 100644 --- a/src/pages/glossary/inter-cluster-communication.js +++ b/src/pages/glossary/inter-cluster-communication.js @@ -5,8 +5,9 @@ import Layout from "../../components/layout"; import BreadCrumb from "../../components/breadcrumb"; import SocialShare from "../../components/socialShare"; import GlossaryNav from "../../components/glossary-nav"; -import {Helmet} from "react-helmet"; -import twitterCardImage from "../../images/glossary-twitter-card.png"; + +import { seoContent } from "../../datas/glossary/seoContent"; +import SEO from "../../components/seo"; const title = 'Inter-cluster communication'; @@ -26,19 +27,11 @@ class GlossarySubpage extends React.Component { render() { return ( - - Celestia - {title} - - - - - - - - - - - +
    diff --git a/src/pages/glossary/intra-cluster-communication.js b/src/pages/glossary/intra-cluster-communication.js index 9558bd402..9eb2483b2 100644 --- a/src/pages/glossary/intra-cluster-communication.js +++ b/src/pages/glossary/intra-cluster-communication.js @@ -5,8 +5,9 @@ import Layout from "../../components/layout"; import BreadCrumb from "../../components/breadcrumb"; import SocialShare from "../../components/socialShare"; import GlossaryNav from "../../components/glossary-nav"; -import {Helmet} from "react-helmet"; -import twitterCardImage from "../../images/glossary-twitter-card.png"; + +import { seoContent } from "../../datas/glossary/seoContent"; +import SEO from "../../components/seo"; const title = 'Intra-cluster communication'; @@ -26,19 +27,11 @@ class GlossarySubpage extends React.Component { render() { return ( - - Celestia - {title} - - - - - - - - - - - +
    diff --git a/src/pages/glossary/light-client.js b/src/pages/glossary/light-client.js index c60644cf4..c026191f5 100644 --- a/src/pages/glossary/light-client.js +++ b/src/pages/glossary/light-client.js @@ -5,8 +5,9 @@ import Layout from "../../components/layout"; import BreadCrumb from "../../components/breadcrumb"; import SocialShare from "../../components/socialShare"; import GlossaryNav from "../../components/glossary-nav"; -import {Helmet} from "react-helmet"; -import twitterCardImage from "../../images/glossary-twitter-card.png"; + +import { seoContent } from "../../datas/glossary/seoContent"; +import SEO from "../../components/seo"; const title = 'Light client'; @@ -32,19 +33,11 @@ class GlossarySubpage extends React.Component { render() { return ( - - Celestia - {title} - - - - - - - - - - - +
    diff --git a/src/pages/glossary/liveness.js b/src/pages/glossary/liveness.js index 99515bf34..11f952e10 100644 --- a/src/pages/glossary/liveness.js +++ b/src/pages/glossary/liveness.js @@ -5,8 +5,9 @@ import Layout from "../../components/layout"; import BreadCrumb from "../../components/breadcrumb"; import SocialShare from "../../components/socialShare"; import GlossaryNav from "../../components/glossary-nav"; -import {Helmet} from "react-helmet"; -import twitterCardImage from "../../images/glossary-twitter-card.png"; + +import { seoContent } from "../../datas/glossary/seoContent"; +import SEO from "../../components/seo"; const title = 'Liveness'; @@ -26,19 +27,11 @@ class GlossarySubpage extends React.Component { render() { return ( - - Celestia - {title} - - - - - - - - - - - +
    diff --git a/src/pages/glossary/modular-blockchain.js b/src/pages/glossary/modular-blockchain.js index 3cd7823c6..d53bc9853 100644 --- a/src/pages/glossary/modular-blockchain.js +++ b/src/pages/glossary/modular-blockchain.js @@ -5,8 +5,9 @@ import Layout from "../../components/layout"; import BreadCrumb from "../../components/breadcrumb"; import SocialShare from "../../components/socialShare"; import GlossaryNav from "../../components/glossary-nav"; -import {Helmet} from "react-helmet"; -import twitterCardImage from "../../images/glossary-twitter-card.png"; + +import { seoContent } from "../../datas/glossary/seoContent"; +import SEO from "../../components/seo"; const title = 'Modular blockchain'; @@ -39,19 +40,11 @@ class GlossarySubpage extends React.Component { render() { return ( - - Celestia - {title} - - - - - - - - - - - +
    diff --git a/src/pages/glossary/monolithic-blockchain.js b/src/pages/glossary/monolithic-blockchain.js index c69783c40..41bda27d4 100644 --- a/src/pages/glossary/monolithic-blockchain.js +++ b/src/pages/glossary/monolithic-blockchain.js @@ -1,64 +1,57 @@ -import * as React from "react" - -import {FooterBoxes} from "../../datas/team/content"; -import Layout from "../../components/layout"; -import BreadCrumb from "../../components/breadcrumb"; -import SocialShare from "../../components/socialShare"; -import GlossaryNav from "../../components/glossary-nav"; -import {Helmet} from "react-helmet"; -import twitterCardImage from "../../images/glossary-twitter-card.png"; - -const title = 'Monolithic blockchain'; - -class GlossaryContent extends React.Component { - render() { - return ( -
    -

    Monolithic blockchains are generalists that perform all functions by themselves. This is the opposite of modular blockchains, which specialize and outsource the remaining functions to other modular chains. -

    - -
    - ) - } -} - -class GlossarySubpage extends React.Component { - render() { - return ( - - - Celestia - {title} - - - - - - - - - - - -
    -
    -
    - -

    {title}

    - - - - - -
    - -
    - -
    -
    -
    -     - ) - } -} - +import * as React from "react" + +import {FooterBoxes} from "../../datas/team/content"; +import Layout from "../../components/layout"; +import BreadCrumb from "../../components/breadcrumb"; +import SocialShare from "../../components/socialShare"; +import GlossaryNav from "../../components/glossary-nav"; + +import { seoContent } from "../../datas/glossary/seoContent"; +import SEO from "../../components/seo"; + +const title = 'Monolithic blockchain'; + +class GlossaryContent extends React.Component { + render() { + return ( +
    +

    Monolithic blockchains are generalists that perform all functions by themselves. This is the opposite of modular blockchains, which specialize and outsource the remaining functions to other modular chains. +

    + +
    + ) + } +} + +class GlossarySubpage extends React.Component { + render() { + return ( + + +
    +
    +
    + +

    {title}

    + + + + + +
    + +
    + +
    +
    +
    +     + ) + } +} + export default GlossarySubpage \ No newline at end of file diff --git a/src/pages/glossary/namespaced-merkle-tree.js b/src/pages/glossary/namespaced-merkle-tree.js index e3c132816..fa4fb0032 100644 --- a/src/pages/glossary/namespaced-merkle-tree.js +++ b/src/pages/glossary/namespaced-merkle-tree.js @@ -5,8 +5,9 @@ import Layout from "../../components/layout"; import BreadCrumb from "../../components/breadcrumb"; import SocialShare from "../../components/socialShare"; import GlossaryNav from "../../components/glossary-nav"; -import {Helmet} from "react-helmet"; -import twitterCardImage from "../../images/glossary-twitter-card.png"; + +import { seoContent } from "../../datas/glossary/seoContent"; +import SEO from "../../components/seo"; const title = 'Namespaced Merkle Tree'; @@ -27,19 +28,11 @@ class GlossarySubpage extends React.Component { render() { return ( - - Celestia - {title} - - - - - - - - - - - +
    diff --git a/src/pages/glossary/node.js b/src/pages/glossary/node.js index 27f32c85c..77902037f 100644 --- a/src/pages/glossary/node.js +++ b/src/pages/glossary/node.js @@ -5,8 +5,9 @@ import Layout from "../../components/layout"; import BreadCrumb from "../../components/breadcrumb"; import SocialShare from "../../components/socialShare"; import GlossaryNav from "../../components/glossary-nav"; -import {Helmet} from "react-helmet"; -import twitterCardImage from "../../images/glossary-twitter-card.png"; + +import { seoContent } from "../../datas/glossary/seoContent"; +import SEO from "../../components/seo"; const title = 'Node'; @@ -27,19 +28,11 @@ class GlossarySubpage extends React.Component { render() { return ( - - Celestia - {title} - - - - - - - - - - - +
    diff --git a/src/pages/glossary/off-chain-data-availability.js b/src/pages/glossary/off-chain-data-availability.js index 8487c1fd2..b6310a836 100644 --- a/src/pages/glossary/off-chain-data-availability.js +++ b/src/pages/glossary/off-chain-data-availability.js @@ -5,8 +5,9 @@ import Layout from "../../components/layout"; import BreadCrumb from "../../components/breadcrumb"; import SocialShare from "../../components/socialShare"; import GlossaryNav from "../../components/glossary-nav"; -import {Helmet} from "react-helmet"; -import twitterCardImage from "../../images/glossary-twitter-card.png"; + +import { seoContent } from "../../datas/glossary/seoContent"; +import SEO from "../../components/seo"; const title = 'Off-chain data availability'; @@ -27,19 +28,11 @@ class GlossarySubpage extends React.Component { render() { return ( - - Celestia - {title} - - - - - - - - - - - +
    diff --git a/src/pages/glossary/on-chain-data-availability.js b/src/pages/glossary/on-chain-data-availability.js index 96fd42afa..14e7fccec 100644 --- a/src/pages/glossary/on-chain-data-availability.js +++ b/src/pages/glossary/on-chain-data-availability.js @@ -5,8 +5,9 @@ import Layout from "../../components/layout"; import BreadCrumb from "../../components/breadcrumb"; import SocialShare from "../../components/socialShare"; import GlossaryNav from "../../components/glossary-nav"; -import {Helmet} from "react-helmet"; -import twitterCardImage from "../../images/glossary-twitter-card.png"; + +import { seoContent } from "../../datas/glossary/seoContent"; +import SEO from "../../components/seo"; const title = 'On-chain data availability'; @@ -27,19 +28,11 @@ class GlossarySubpage extends React.Component { render() { return ( - - Celestia - {title} - - - - - - - - - - - +
    diff --git a/src/pages/glossary/optimistic-rollup.js b/src/pages/glossary/optimistic-rollup.js index 6031e6bbd..014bfa595 100644 --- a/src/pages/glossary/optimistic-rollup.js +++ b/src/pages/glossary/optimistic-rollup.js @@ -5,8 +5,9 @@ import Layout from "../../components/layout"; import BreadCrumb from "../../components/breadcrumb"; import SocialShare from "../../components/socialShare"; import GlossaryNav from "../../components/glossary-nav"; -import {Helmet} from "react-helmet"; -import twitterCardImage from "../../images/glossary-twitter-card.png"; + +import { seoContent } from "../../datas/glossary/seoContent"; +import SEO from "../../components/seo"; const title = 'Optimistic rollup'; @@ -32,19 +33,11 @@ class GlossarySubpage extends React.Component { render() { return ( - - Celestia - {title} - - - - - - - - - - - +
    diff --git a/src/pages/glossary/pay-for-data.js b/src/pages/glossary/pay-for-data.js index 80062aa5a..487049fb6 100644 --- a/src/pages/glossary/pay-for-data.js +++ b/src/pages/glossary/pay-for-data.js @@ -5,8 +5,9 @@ import Layout from "../../components/layout"; import BreadCrumb from "../../components/breadcrumb"; import SocialShare from "../../components/socialShare"; import GlossaryNav from "../../components/glossary-nav"; -import {Helmet} from "react-helmet"; -import twitterCardImage from "../../images/glossary-twitter-card.png"; + +import { seoContent } from "../../datas/glossary/seoContent"; +import SEO from "../../components/seo"; const title = 'PayForData'; @@ -28,19 +29,11 @@ class GlossarySubpage extends React.Component { render() { return ( - - Celestia - {title} - - - - - - - - - - - +
    diff --git a/src/pages/glossary/peer-to-peer-network.js b/src/pages/glossary/peer-to-peer-network.js index 5ce829fd9..5fc09425b 100644 --- a/src/pages/glossary/peer-to-peer-network.js +++ b/src/pages/glossary/peer-to-peer-network.js @@ -5,8 +5,9 @@ import Layout from "../../components/layout"; import BreadCrumb from "../../components/breadcrumb"; import SocialShare from "../../components/socialShare"; import GlossaryNav from "../../components/glossary-nav"; -import {Helmet} from "react-helmet"; -import twitterCardImage from "../../images/glossary-twitter-card.png"; + +import { seoContent } from "../../datas/glossary/seoContent"; +import SEO from "../../components/seo"; const title = 'Peer to peer network'; @@ -27,19 +28,11 @@ class GlossarySubpage extends React.Component { render() { return ( - - Celestia - {title} - - - - - - - - - - - +
    diff --git a/src/pages/glossary/proof-of-stake.js b/src/pages/glossary/proof-of-stake.js index d54c6ba77..1e650eb66 100644 --- a/src/pages/glossary/proof-of-stake.js +++ b/src/pages/glossary/proof-of-stake.js @@ -5,8 +5,9 @@ import Layout from "../../components/layout"; import BreadCrumb from "../../components/breadcrumb"; import SocialShare from "../../components/socialShare"; import GlossaryNav from "../../components/glossary-nav"; -import {Helmet} from "react-helmet"; -import twitterCardImage from "../../images/glossary-twitter-card.png"; + +import { seoContent } from "../../datas/glossary/seoContent"; +import SEO from "../../components/seo"; const title = 'Proof of Stake'; @@ -27,19 +28,11 @@ class GlossarySubpage extends React.Component { render() { return ( - - Celestia - {title} - - - - - - - - - - - +
    diff --git a/src/pages/glossary/rollup.js b/src/pages/glossary/rollup.js index 8f384875e..b8502f630 100644 --- a/src/pages/glossary/rollup.js +++ b/src/pages/glossary/rollup.js @@ -5,8 +5,9 @@ import Layout from "../../components/layout"; import BreadCrumb from "../../components/breadcrumb"; import SocialShare from "../../components/socialShare"; import GlossaryNav from "../../components/glossary-nav"; -import {Helmet} from "react-helmet"; -import twitterCardImage from "../../images/glossary-twitter-card.png"; + +import { seoContent } from "../../datas/glossary/seoContent"; +import SEO from "../../components/seo"; const title = 'Rollup'; @@ -30,19 +31,11 @@ class GlossarySubpage extends React.Component { render() { return ( - - Celestia - {title} - - - - - - - - - - - +
    diff --git a/src/pages/glossary/safety.js b/src/pages/glossary/safety.js index a4913fb1a..668b66cee 100644 --- a/src/pages/glossary/safety.js +++ b/src/pages/glossary/safety.js @@ -5,8 +5,9 @@ import Layout from "../../components/layout"; import BreadCrumb from "../../components/breadcrumb"; import SocialShare from "../../components/socialShare"; import GlossaryNav from "../../components/glossary-nav"; -import {Helmet} from "react-helmet"; -import twitterCardImage from "../../images/glossary-twitter-card.png"; + +import { seoContent } from "../../datas/glossary/seoContent"; +import SEO from "../../components/seo"; const title = 'Safety'; @@ -26,19 +27,11 @@ class GlossarySubpage extends React.Component { render() { return ( - - Celestia - {title} - - - - - - - - - - - +
    diff --git a/src/pages/glossary/scalability.js b/src/pages/glossary/scalability.js index 72fa0826c..46442da90 100644 --- a/src/pages/glossary/scalability.js +++ b/src/pages/glossary/scalability.js @@ -5,8 +5,9 @@ import Layout from "../../components/layout"; import BreadCrumb from "../../components/breadcrumb"; import SocialShare from "../../components/socialShare"; import GlossaryNav from "../../components/glossary-nav"; -import {Helmet} from "react-helmet"; -import twitterCardImage from "../../images/glossary-twitter-card.png"; + +import { seoContent } from "../../datas/glossary/seoContent"; +import SEO from "../../components/seo"; const title = 'Scalability'; @@ -27,19 +28,11 @@ class GlossarySubpage extends React.Component { render() { return ( - - Celestia - {title} - - - - - - - - - - - +
    diff --git a/src/pages/glossary/sequencer.js b/src/pages/glossary/sequencer.js index 84c48540f..5a1f82f16 100644 --- a/src/pages/glossary/sequencer.js +++ b/src/pages/glossary/sequencer.js @@ -5,8 +5,9 @@ import Layout from "../../components/layout"; import BreadCrumb from "../../components/breadcrumb"; import SocialShare from "../../components/socialShare"; import GlossaryNav from "../../components/glossary-nav"; -import {Helmet} from "react-helmet"; -import twitterCardImage from "../../images/glossary-twitter-card.png"; + +import { seoContent } from "../../datas/glossary/seoContent"; +import SEO from "../../components/seo"; const title = 'Sequencer'; @@ -27,19 +28,11 @@ class GlossarySubpage extends React.Component { render() { return ( - - Celestia - {title} - - - - - - - - - - - +
    diff --git a/src/pages/glossary/sharding.js b/src/pages/glossary/sharding.js index e57c1241f..e939429f1 100644 --- a/src/pages/glossary/sharding.js +++ b/src/pages/glossary/sharding.js @@ -5,8 +5,9 @@ import Layout from "../../components/layout"; import BreadCrumb from "../../components/breadcrumb"; import SocialShare from "../../components/socialShare"; import GlossaryNav from "../../components/glossary-nav"; -import {Helmet} from "react-helmet"; -import twitterCardImage from "../../images/glossary-twitter-card.png"; + +import { seoContent } from "../../datas/glossary/seoContent"; +import SEO from "../../components/seo"; const title = 'Sharding'; @@ -27,19 +28,11 @@ class GlossarySubpage extends React.Component { render() { return ( - - Celestia - {title} - - - - - - - - - - - +
    diff --git a/src/pages/glossary/shared-security.js b/src/pages/glossary/shared-security.js index ac050fa07..fc3755d2b 100644 --- a/src/pages/glossary/shared-security.js +++ b/src/pages/glossary/shared-security.js @@ -5,8 +5,9 @@ import Layout from "../../components/layout"; import BreadCrumb from "../../components/breadcrumb"; import SocialShare from "../../components/socialShare"; import GlossaryNav from "../../components/glossary-nav"; -import {Helmet} from "react-helmet"; -import twitterCardImage from "../../images/glossary-twitter-card.png"; + +import { seoContent } from "../../datas/glossary/seoContent"; +import SEO from "../../components/seo"; const title = 'Shared security'; @@ -32,19 +33,11 @@ class GlossarySubpage extends React.Component { render() { return ( - - Celestia - {title} - - - - - - - - - - - +
    diff --git a/src/pages/glossary/slashing.js b/src/pages/glossary/slashing.js index 4c4dd4e80..e648a57a9 100644 --- a/src/pages/glossary/slashing.js +++ b/src/pages/glossary/slashing.js @@ -5,8 +5,9 @@ import Layout from "../../components/layout"; import BreadCrumb from "../../components/breadcrumb"; import SocialShare from "../../components/socialShare"; import GlossaryNav from "../../components/glossary-nav"; -import {Helmet} from "react-helmet"; -import twitterCardImage from "../../images/glossary-twitter-card.png"; + +import { seoContent } from "../../datas/glossary/seoContent"; +import SEO from "../../components/seo"; const title = 'Slashing'; @@ -35,19 +36,11 @@ class GlossarySubpage extends React.Component { render() { return ( - - Celestia - {title} - - - - - - - - - - - +
    diff --git a/src/pages/glossary/smart-contract.js b/src/pages/glossary/smart-contract.js index 4fe688154..bab377204 100644 --- a/src/pages/glossary/smart-contract.js +++ b/src/pages/glossary/smart-contract.js @@ -5,8 +5,9 @@ import Layout from "../../components/layout"; import BreadCrumb from "../../components/breadcrumb"; import SocialShare from "../../components/socialShare"; import GlossaryNav from "../../components/glossary-nav"; -import {Helmet} from "react-helmet"; -import twitterCardImage from "../../images/glossary-twitter-card.png"; + +import { seoContent } from "../../datas/glossary/seoContent"; +import SEO from "../../components/seo"; const title = 'Smart contract'; @@ -27,19 +28,11 @@ class GlossarySubpage extends React.Component { render() { return ( - - Celestia - {title} - - - - - - - - - - - +
    diff --git a/src/pages/glossary/social-consensus.js b/src/pages/glossary/social-consensus.js index 9ae80aeee..0557d11a7 100644 --- a/src/pages/glossary/social-consensus.js +++ b/src/pages/glossary/social-consensus.js @@ -5,8 +5,9 @@ import Layout from "../../components/layout"; import BreadCrumb from "../../components/breadcrumb"; import SocialShare from "../../components/socialShare"; import GlossaryNav from "../../components/glossary-nav"; -import {Helmet} from "react-helmet"; -import twitterCardImage from "../../images/glossary-twitter-card.png"; + +import { seoContent } from "../../datas/glossary/seoContent"; +import SEO from "../../components/seo"; const title = 'Social consensus'; @@ -26,19 +27,11 @@ class GlossarySubpage extends React.Component { render() { return ( - - Celestia - {title} - - - - - - - - - - - +
    diff --git a/src/pages/glossary/sovereign-application.js b/src/pages/glossary/sovereign-application.js index 264f7849a..10903ef9b 100644 --- a/src/pages/glossary/sovereign-application.js +++ b/src/pages/glossary/sovereign-application.js @@ -5,8 +5,9 @@ import Layout from "../../components/layout"; import BreadCrumb from "../../components/breadcrumb"; import SocialShare from "../../components/socialShare"; import GlossaryNav from "../../components/glossary-nav"; -import {Helmet} from "react-helmet"; -import twitterCardImage from "../../images/glossary-twitter-card.png"; + +import { seoContent } from "../../datas/glossary/seoContent"; +import SEO from "../../components/seo"; const title = 'Sovereign application'; @@ -26,19 +27,11 @@ class GlossarySubpage extends React.Component { render() { return ( - - Celestia - {title} - - - - - - - - - - - +
    diff --git a/src/pages/glossary/sovereign-blockchain.js b/src/pages/glossary/sovereign-blockchain.js index e4a176de3..8b0fdd300 100644 --- a/src/pages/glossary/sovereign-blockchain.js +++ b/src/pages/glossary/sovereign-blockchain.js @@ -5,8 +5,9 @@ import Layout from "../../components/layout"; import BreadCrumb from "../../components/breadcrumb"; import SocialShare from "../../components/socialShare"; import GlossaryNav from "../../components/glossary-nav"; -import {Helmet} from "react-helmet"; -import twitterCardImage from "../../images/glossary-twitter-card.png"; + +import { seoContent } from "../../datas/glossary/seoContent"; +import SEO from "../../components/seo"; const title = 'Sovereign blockchain'; @@ -29,19 +30,11 @@ class GlossarySubpage extends React.Component { render() { return ( - - Celestia - {title} - - - - - - - - - - - +
    diff --git a/src/pages/glossary/sovereign-rollup.js b/src/pages/glossary/sovereign-rollup.js index 517d87f59..2ee8e19fc 100644 --- a/src/pages/glossary/sovereign-rollup.js +++ b/src/pages/glossary/sovereign-rollup.js @@ -5,8 +5,9 @@ import Layout from "../../components/layout"; import BreadCrumb from "../../components/breadcrumb"; import SocialShare from "../../components/socialShare"; import GlossaryNav from "../../components/glossary-nav"; -import {Helmet} from "react-helmet"; -import twitterCardImage from "../../images/glossary-twitter-card.png"; + +import { seoContent } from "../../datas/glossary/seoContent"; +import SEO from "../../components/seo"; const title = 'Sovereign rollup'; @@ -37,19 +38,11 @@ class GlossarySubpage extends React.Component { render() { return ( - - Celestia - {title} - - - - - - - - - - - +
    diff --git a/src/pages/glossary/state-transition-fraud-proof.js b/src/pages/glossary/state-transition-fraud-proof.js index 843bc9b20..7dc79158e 100644 --- a/src/pages/glossary/state-transition-fraud-proof.js +++ b/src/pages/glossary/state-transition-fraud-proof.js @@ -5,8 +5,9 @@ import Layout from "../../components/layout"; import BreadCrumb from "../../components/breadcrumb"; import SocialShare from "../../components/socialShare"; import GlossaryNav from "../../components/glossary-nav"; -import {Helmet} from "react-helmet"; -import twitterCardImage from "../../images/glossary-twitter-card.png"; + +import { seoContent } from "../../datas/glossary/seoContent"; +import SEO from "../../components/seo"; const title = 'State transition fraud proof'; @@ -29,19 +30,11 @@ class GlossarySubpage extends React.Component { render() { return ( - - Celestia - {title} - - - - - - - - - - - +
    diff --git a/src/pages/glossary/synchrony-assumption.js b/src/pages/glossary/synchrony-assumption.js index c2f5dcbf7..383d52098 100644 --- a/src/pages/glossary/synchrony-assumption.js +++ b/src/pages/glossary/synchrony-assumption.js @@ -5,8 +5,9 @@ import Layout from "../../components/layout"; import BreadCrumb from "../../components/breadcrumb"; import SocialShare from "../../components/socialShare"; import GlossaryNav from "../../components/glossary-nav"; -import {Helmet} from "react-helmet"; -import twitterCardImage from "../../images/glossary-twitter-card.png"; + +import { seoContent } from "../../datas/glossary/seoContent"; +import SEO from "../../components/seo"; const title = 'Synchrony assumption'; @@ -26,19 +27,11 @@ class GlossarySubpage extends React.Component { render() { return ( - - Celestia - {title} - - - - - - - - - - - +
    diff --git a/src/pages/glossary/the-data-availability-problem.js b/src/pages/glossary/the-data-availability-problem.js index d5de1f509..35042f809 100644 --- a/src/pages/glossary/the-data-availability-problem.js +++ b/src/pages/glossary/the-data-availability-problem.js @@ -5,8 +5,9 @@ import Layout from "../../components/layout"; import BreadCrumb from "../../components/breadcrumb"; import SocialShare from "../../components/socialShare"; import GlossaryNav from "../../components/glossary-nav"; -import {Helmet} from "react-helmet"; -import twitterCardImage from "../../images/glossary-twitter-card.png"; + +import { seoContent } from "../../datas/glossary/seoContent"; +import SEO from "../../components/seo"; const title = 'The data availability problem'; @@ -32,19 +33,11 @@ class GlossarySubpage extends React.Component { render() { return ( - - Celestia - {title} - - - - - - - - - - - +
    diff --git a/src/pages/glossary/throughput.js b/src/pages/glossary/throughput.js index b6bf430db..360eca043 100644 --- a/src/pages/glossary/throughput.js +++ b/src/pages/glossary/throughput.js @@ -5,8 +5,9 @@ import Layout from "../../components/layout"; import BreadCrumb from "../../components/breadcrumb"; import SocialShare from "../../components/socialShare"; import GlossaryNav from "../../components/glossary-nav"; -import {Helmet} from "react-helmet"; -import twitterCardImage from "../../images/glossary-twitter-card.png"; + +import { seoContent } from "../../datas/glossary/seoContent"; +import SEO from "../../components/seo"; const title = 'Throughput'; @@ -29,19 +30,11 @@ class GlossarySubpage extends React.Component { render() { return ( - - Celestia - {title} - - - - - - - - - - - +
    diff --git a/src/pages/glossary/transaction-throughput.js b/src/pages/glossary/transaction-throughput.js index 5cd564926..2950c040c 100644 --- a/src/pages/glossary/transaction-throughput.js +++ b/src/pages/glossary/transaction-throughput.js @@ -5,8 +5,9 @@ import Layout from "../../components/layout"; import BreadCrumb from "../../components/breadcrumb"; import SocialShare from "../../components/socialShare"; import GlossaryNav from "../../components/glossary-nav"; -import {Helmet} from "react-helmet"; -import twitterCardImage from "../../images/glossary-twitter-card.png"; + +import { seoContent } from "../../datas/glossary/seoContent"; +import SEO from "../../components/seo"; const title = 'Transaction throughput'; @@ -29,19 +30,11 @@ class GlossarySubpage extends React.Component { render() { return ( - - Celestia - {title} - - - - - - - - - - - +
    diff --git a/src/pages/glossary/trust-minimized-bridge.js b/src/pages/glossary/trust-minimized-bridge.js index 838e35033..07c655215 100644 --- a/src/pages/glossary/trust-minimized-bridge.js +++ b/src/pages/glossary/trust-minimized-bridge.js @@ -5,8 +5,9 @@ import Layout from "../../components/layout"; import BreadCrumb from "../../components/breadcrumb"; import SocialShare from "../../components/socialShare"; import GlossaryNav from "../../components/glossary-nav"; -import {Helmet} from "react-helmet"; -import twitterCardImage from "../../images/glossary-twitter-card.png"; + +import { seoContent } from "../../datas/glossary/seoContent"; +import SEO from "../../components/seo"; const title = 'Trust-minimized bridge'; @@ -32,19 +33,11 @@ class GlossarySubpage extends React.Component { render() { return ( - - Celestia - {title} - - - - - - - - - - - +
    diff --git a/src/pages/glossary/trusted-bridge.js b/src/pages/glossary/trusted-bridge.js index 1ab94a89c..e95d76860 100644 --- a/src/pages/glossary/trusted-bridge.js +++ b/src/pages/glossary/trusted-bridge.js @@ -5,8 +5,9 @@ import Layout from "../../components/layout"; import BreadCrumb from "../../components/breadcrumb"; import SocialShare from "../../components/socialShare"; import GlossaryNav from "../../components/glossary-nav"; -import {Helmet} from "react-helmet"; -import twitterCardImage from "../../images/glossary-twitter-card.png"; + +import { seoContent } from "../../datas/glossary/seoContent"; +import SEO from "../../components/seo"; const title = 'Trusted bridge'; @@ -32,19 +33,11 @@ class GlossarySubpage extends React.Component { render() { return ( - - Celestia - {title} - - - - - - - - - - - +
    diff --git a/src/pages/glossary/validator-set.js b/src/pages/glossary/validator-set.js index 961464e5e..fb19560e8 100644 --- a/src/pages/glossary/validator-set.js +++ b/src/pages/glossary/validator-set.js @@ -5,8 +5,9 @@ import Layout from "../../components/layout"; import BreadCrumb from "../../components/breadcrumb"; import SocialShare from "../../components/socialShare"; import GlossaryNav from "../../components/glossary-nav"; -import {Helmet} from "react-helmet"; -import twitterCardImage from "../../images/glossary-twitter-card.png"; + +import { seoContent } from "../../datas/glossary/seoContent"; +import SEO from "../../components/seo"; const title = 'Validator set'; @@ -26,19 +27,11 @@ class GlossarySubpage extends React.Component { render() { return ( - - Celestia - {title} - - - - - - - - - - - +
    diff --git a/src/pages/glossary/validator.js b/src/pages/glossary/validator.js index e3868d3f7..bc2ad2449 100644 --- a/src/pages/glossary/validator.js +++ b/src/pages/glossary/validator.js @@ -5,8 +5,9 @@ import Layout from "../../components/layout"; import BreadCrumb from "../../components/breadcrumb"; import SocialShare from "../../components/socialShare"; import GlossaryNav from "../../components/glossary-nav"; -import {Helmet} from "react-helmet"; -import twitterCardImage from "../../images/glossary-twitter-card.png"; + +import { seoContent } from "../../datas/glossary/seoContent"; +import SEO from "../../components/seo"; const title = 'Validator'; @@ -26,19 +27,11 @@ class GlossarySubpage extends React.Component { render() { return ( - - Celestia - {title} - - - - - - - - - - - +
    diff --git a/src/pages/glossary/validity-proof.js b/src/pages/glossary/validity-proof.js index 2e4cee0f0..e8a0ecb3f 100644 --- a/src/pages/glossary/validity-proof.js +++ b/src/pages/glossary/validity-proof.js @@ -5,8 +5,9 @@ import Layout from "../../components/layout"; import BreadCrumb from "../../components/breadcrumb"; import SocialShare from "../../components/socialShare"; import GlossaryNav from "../../components/glossary-nav"; -import {Helmet} from "react-helmet"; -import twitterCardImage from "../../images/glossary-twitter-card.png"; + +import { seoContent } from "../../datas/glossary/seoContent"; +import SEO from "../../components/seo"; const title = 'Validity proof'; @@ -26,19 +27,11 @@ class GlossarySubpage extends React.Component { render() { return ( - - Celestia - {title} - - - - - - - - - - - +
    diff --git a/src/pages/glossary/validium.js b/src/pages/glossary/validium.js index cd6d643e3..d2cc498a2 100644 --- a/src/pages/glossary/validium.js +++ b/src/pages/glossary/validium.js @@ -5,8 +5,9 @@ import Layout from "../../components/layout"; import BreadCrumb from "../../components/breadcrumb"; import SocialShare from "../../components/socialShare"; import GlossaryNav from "../../components/glossary-nav"; -import {Helmet} from "react-helmet"; -import twitterCardImage from "../../images/glossary-twitter-card.png"; + +import { seoContent } from "../../datas/glossary/seoContent"; +import SEO from "../../components/seo"; const title = 'Validium'; @@ -26,19 +27,11 @@ class GlossarySubpage extends React.Component { render() { return ( - - Celestia - {title} - - - - - - - - - - - +
    diff --git a/src/pages/glossary/volition.js b/src/pages/glossary/volition.js index 859a2f5d4..8b67b7b02 100644 --- a/src/pages/glossary/volition.js +++ b/src/pages/glossary/volition.js @@ -5,8 +5,9 @@ import Layout from "../../components/layout"; import BreadCrumb from "../../components/breadcrumb"; import SocialShare from "../../components/socialShare"; import GlossaryNav from "../../components/glossary-nav"; -import {Helmet} from "react-helmet"; -import twitterCardImage from "../../images/glossary-twitter-card.png"; + +import { seoContent } from "../../datas/glossary/seoContent"; +import SEO from "../../components/seo"; const title = 'Volition'; @@ -26,19 +27,11 @@ class GlossarySubpage extends React.Component { render() { return ( - - Celestia - {title} - - - - - - - - - - - +
    diff --git a/src/pages/glossary/zk-rollup.js b/src/pages/glossary/zk-rollup.js index 84cfec4b1..1716b56d9 100644 --- a/src/pages/glossary/zk-rollup.js +++ b/src/pages/glossary/zk-rollup.js @@ -5,8 +5,9 @@ import Layout from "../../components/layout"; import BreadCrumb from "../../components/breadcrumb"; import SocialShare from "../../components/socialShare"; import GlossaryNav from "../../components/glossary-nav"; -import {Helmet} from "react-helmet"; -import twitterCardImage from "../../images/glossary-twitter-card.png"; + +import { seoContent } from "../../datas/glossary/seoContent"; +import SEO from "../../components/seo"; const title = 'zk-Rollup'; @@ -26,19 +27,11 @@ class GlossarySubpage extends React.Component { render() { return ( - - Celestia - {title} - - - - - - - - - - - +
    diff --git a/src/pages/index.js b/src/pages/index.js index 1adccf898..300f30586 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -1,4 +1,4 @@ -import * as React from "react"; +import React, { useState } from "react"; import ReactModal from "react-modal"; import Layout from "../components/layout"; @@ -21,141 +21,142 @@ import BackersSection from "../components/sections/backers-sections"; import RoadmapItem from "../components/modules/roadmapItem"; import SignUp from "../components/modals/signUp"; -class IndexPage extends React.Component { - constructor(props) { - super(props); - this.enableBackers = false; - this.state = { - isModalOpen: false, - modalType: "", - }; - } - handleModalOpen = (event) => { - this.setState({ modalType: event.target.id }); - this.setState({ isModalOpen: true }); +import { seoContent } from "../datas/home/seoContent"; +import SEO from "../components/seo"; + +const IndexPage = () => { + const [isModalOpen, setIsModalOpen] = useState(false); + const [modalType, setModalType] = useState(""); + const enableBackers = false; + + const handleModalOpen = (event) => { + setModalType(event.target.id); + setIsModalOpen(true); document.body.style.overflow = "hidden"; }; - handleModalClose = (event) => { - this.setState({ isModalOpen: false }); + const handleModalClose = (event) => { + setIsModalOpen(false); document.body.style.overflow = "unset"; }; - render() { - return ( - -
    -
    - -
    -
    -

    Advantages

    -
    - + + return ( + + +
    +
    + +
    +
    +

    Advantages

    -
    -
    -

    How it works

    -
    - Celestia is a minimal blockchain that only orders and publishes transactions and does not execute them. By - decoupling the consensus and application execution layers, Celestia modularizes the blockchain technology stack - and unlocks new possibilities for decentralized application builders. -
    + +
    +
    +
    +

    How it works

    +
    + Celestia is a minimal blockchain that only orders and publishes transactions and does not execute them. By + decoupling the consensus and application execution layers, Celestia modularizes the blockchain technology stack + and unlocks new possibilities for decentralized application builders. +
    -
    -
    -
  • Developers can only use programming languages supported by chain's execution environment
  • All applications run on the same process (the world computer model), with shared gas resources
  • Smart contracts cannot be updated without a hard fork
    • " - } - /> -
    -
    -
  • Developers can effortlessly define their own virtual execution environments; similar to virtual machines
  • Each application gets its own sovereign execution space, while inheriting the security of Celestia's consensus
  • Applications can be updated without main chain hard forks
    • " - } - /> -
    +
    +
    +
  • Developers can only use programming languages supported by chain's execution environment
  • All applications run on the same process (the world computer model), with shared gas resources
  • Smart contracts cannot be updated without a hard fork
    • " + } + />
    -
    - +
    +
  • Developers can effortlessly define their own virtual execution environments; similar to virtual machines
  • Each application gets its own sovereign execution space, while inheriting the security of Celestia's consensus
  • Applications can be updated without main chain hard forks
    • " + } + />
    -
    + -
    -
    -

    Roadmap

    - -
    -
      - {roadmaps && - roadmaps.map(function (roadmap, index) { - return ( - - ); - })} -
    -
    +
    +
    +
    +
    -
    -
    -
    -
    -

    Run a node on testnet

    -
    Experiment and practice running a node on testnet in preparation for mainnet.
    - - - -
    -
    -

    Build on our developer beta

    -
    - Build on Celestia and be the first to explore the benefits of its novel architecture. -
    - - - -
    +
    +
    +

    Roadmap

    + +
    +
      + {roadmaps && + roadmaps.map(function (roadmap, index) { + return ; + })} +
    +
    +
    +
    + +
    +
    +
    +
    +

    Run a node on testnet

    +
    Experiment and practice running a node on testnet in preparation for mainnet.
    + + +
    -
    -
    - } - /> - - -
    - -
    - - -
    -     -
    -     - ); - } -} +
    +

    Build on our developer beta

    +
    Build on Celestia and be the first to explore the benefits of its novel architecture.
    + + + +
    + + + + } + /> + + + + +
    + + +
    +     + + + ); +}; -export default IndexPage; +export default IndexPage; \ No newline at end of file diff --git a/src/pages/learn.js b/src/pages/learn.js index 1afdb7033..c00686e5e 100644 --- a/src/pages/learn.js +++ b/src/pages/learn.js @@ -3,7 +3,6 @@ import { graphql } from "gatsby"; import { FooterBoxes } from "../datas/learn/content"; import Layout from "../components/layout"; import LearnBox from "../components/learn-box"; -import { Helmet } from "react-helmet"; const LearnPage = ({ data: { @@ -20,9 +19,6 @@ const LearnPage = ({ return ( - - Celestia - Learn Modular -
    diff --git a/src/pages/markdown-pages/learn/basics of modular blockchains-benefits of modular blockchains.md b/src/pages/markdown-pages/learn/basics of modular blockchains-benefits of modular blockchains.md index e4fa322f9..86a891b01 100644 --- a/src/pages/markdown-pages/learn/basics of modular blockchains-benefits of modular blockchains.md +++ b/src/pages/markdown-pages/learn/basics of modular blockchains-benefits of modular blockchains.md @@ -18,7 +18,7 @@ description: "What are modular blockchains and what makes them different to thei - + #### Scalability Remember, a core idea of modular blockchains is that they separate functions across multiple chains. This concept also brings extra scalability. A modular L1 like Celestia can now specialize in data availability. Without smart contracts, the L1 can focus all its resources on providing data for L2s, like rollups. Specialization is key because more data the L1 can provide allows rollups to process more transactions. diff --git a/src/pages/markdown-pages/learn/basics of modular blockchains-modular and monolithic blockchains.md b/src/pages/markdown-pages/learn/basics of modular blockchains-modular and monolithic blockchains.md index b3c10ca60..ae0668baf 100644 --- a/src/pages/markdown-pages/learn/basics of modular blockchains-modular and monolithic blockchains.md +++ b/src/pages/markdown-pages/learn/basics of modular blockchains-modular and monolithic blockchains.md @@ -18,7 +18,7 @@ description: "What are modular blockchains and what makes them different to thei - + #### Summary 1. The first approach to building blockchains was a monolithic design where a single blockchain does everything. diff --git a/src/pages/markdown-pages/learn/first principles-modular blockchains and first principles.md b/src/pages/markdown-pages/learn/first principles-modular blockchains and first principles.md index e9a7f40cb..fb04d81c5 100644 --- a/src/pages/markdown-pages/learn/first principles-modular blockchains and first principles.md +++ b/src/pages/markdown-pages/learn/first principles-modular blockchains and first principles.md @@ -18,7 +18,7 @@ description: "A first principles perspective on modular blockchains." - + #### Summary * Modular blockchains prioritize decentralization for network security by reducing the cost for users to operate nodes and verify the network. diff --git a/src/pages/markdown-pages/learn/introduction.md b/src/pages/markdown-pages/learn/introduction.md index 173710fb4..f0f959e2e 100644 --- a/src/pages/markdown-pages/learn/introduction.md +++ b/src/pages/markdown-pages/learn/introduction.md @@ -18,7 +18,7 @@ description: "What is Learn Modular?" - + Modular blockchains are amazing, right? diff --git a/src/pages/markdown-pages/learn/modular blockchains for beginners-modular blockchains for beginners.md b/src/pages/markdown-pages/learn/modular blockchains for beginners-modular blockchains for beginners.md index 528b771da..a2b065b96 100644 --- a/src/pages/markdown-pages/learn/modular blockchains for beginners-modular blockchains for beginners.md +++ b/src/pages/markdown-pages/learn/modular blockchains for beginners-modular blockchains for beginners.md @@ -18,7 +18,7 @@ description: "What are modular blockchains exactly?" - + Modular blockchains are changing the way we think of and build decentralized applications. diff --git a/src/pages/markdown-pages/learn/modular settlement layers-settlement in the modular stack.md b/src/pages/markdown-pages/learn/modular settlement layers-settlement in the modular stack.md index 4911ab45b..9f7402e39 100644 --- a/src/pages/markdown-pages/learn/modular settlement layers-settlement in the modular stack.md +++ b/src/pages/markdown-pages/learn/modular settlement layers-settlement in the modular stack.md @@ -18,7 +18,7 @@ description: "Settlement layers in the modular paradigm." - + #### Summary * Settlement layers provide multiple purposes for rollups, which include proof verification & dispute resolution, a hub to facilitate cross-rollup bridging, and a source of liquidity. diff --git a/src/pages/markdown-pages/learn/modular software-the differences of modular software.md b/src/pages/markdown-pages/learn/modular software-the differences of modular software.md index 1902adb9e..58f91561b 100644 --- a/src/pages/markdown-pages/learn/modular software-the differences of modular software.md +++ b/src/pages/markdown-pages/learn/modular software-the differences of modular software.md @@ -18,7 +18,7 @@ description: "What is modular software and how is it different to modular blockc - + #### Summary 1. Modular software and modular blockchains are often confused for one another, but they mean very different things diff --git a/src/pages/markdown-pages/learn/sovereign rollups-an introduction to sovereign rollups.md b/src/pages/markdown-pages/learn/sovereign rollups-an introduction to sovereign rollups.md index 98209b991..03e5f5282 100644 --- a/src/pages/markdown-pages/learn/sovereign rollups-an introduction to sovereign rollups.md +++ b/src/pages/markdown-pages/learn/sovereign rollups-an introduction to sovereign rollups.md @@ -18,7 +18,7 @@ description: "What sovereign rollups are and how they're different to other bloc - + #### Summary - Sovereign rollups publish transactions to another blockchain for ordering and data availability, leaving its nodes to determine the correct chain. diff --git a/src/pages/markdown-pages/learn/sovereign rollups-misconceptions of sovereign rollups.md b/src/pages/markdown-pages/learn/sovereign rollups-misconceptions of sovereign rollups.md index d7ca260ce..5e0576473 100644 --- a/src/pages/markdown-pages/learn/sovereign rollups-misconceptions of sovereign rollups.md +++ b/src/pages/markdown-pages/learn/sovereign rollups-misconceptions of sovereign rollups.md @@ -18,7 +18,7 @@ description: "Answers to common misconceptions about sovereign rollups." - + #### Summary - Sovereign rollups inherit multiple aspects of security from the DA layer, such as liveness, safety, re-org resistance, and censorship resistance. diff --git a/src/pages/markdown-pages/learn/values of modular blockchains-modular blockchains are user first.md b/src/pages/markdown-pages/learn/values of modular blockchains-modular blockchains are user first.md index 35a735bae..e2550ec6c 100644 --- a/src/pages/markdown-pages/learn/values of modular blockchains-modular blockchains are user first.md +++ b/src/pages/markdown-pages/learn/values of modular blockchains-modular blockchains are user first.md @@ -18,7 +18,7 @@ description: "The values that modular blockchains aim for." - + #### Summary * Modular blockchains make users first class citizens by enabling them to directly verify the blockchain. diff --git a/src/pages/press.js b/src/pages/press.js index b24a64c95..28aa4c5cf 100644 --- a/src/pages/press.js +++ b/src/pages/press.js @@ -3,15 +3,19 @@ import * as React from "react"; import { pressData } from "../datas/press/press-data"; import { FooterBoxes } from "../datas/press/content"; import Layout from "../components/layout"; -import { Helmet } from "react-helmet"; import PressItem from "../components/modules/press-item"; +import { seoContent } from "../datas/press/seoContent"; +import SEO from "../components/seo"; + const Press = () => { return ( - - Celestia - Press - +
    diff --git a/src/pages/resources.js b/src/pages/resources.js index 16c722bac..c9b32bd5c 100644 --- a/src/pages/resources.js +++ b/src/pages/resources.js @@ -1,8 +1,8 @@ -import * as React from "react" -import 'react-multi-carousel/lib/styles.css'; +import * as React from "react"; +import "react-multi-carousel/lib/styles.css"; -import {FooterBoxes} from "../datas/resources/content"; -import {resources} from "../datas/resources/resources"; +import { FooterBoxes } from "../datas/resources/content"; +import { resources } from "../datas/resources/resources"; import PodcastSection from "../components/sections/podcast-section"; import WhitepapersSection from "../components/sections/whitepapers-section"; @@ -10,196 +10,236 @@ import Resource from "../components/modules/resource"; import Button from "../components/buttons/button"; import VideosSection from "../components/sections/videos-section"; import AnchorMenu from "../components/modules/anchorMenu"; -import {anchors} from "../datas/resources/content"; -import {blogs} from "../datas/resources/blogs"; -import {videos} from "../datas/resources/videos"; -import {whitepapers} from "../datas/resources/whitepapers"; -import {podcasts} from "../datas/resources/podcasts"; -import {communityposts} from "../datas/resources/community-posts"; +import { anchors } from "../datas/resources/content"; +import { blogs } from "../datas/resources/blogs"; +import { videos } from "../datas/resources/videos"; +import { whitepapers } from "../datas/resources/whitepapers"; +import { podcasts } from "../datas/resources/podcasts"; +import { communityposts } from "../datas/resources/community-posts"; import Carousel from "react-multi-carousel"; import Layout from "../components/layout"; -import {Helmet} from "react-helmet"; -import {content} from "../datas/technology/content"; +import { content } from "../datas/technology/content"; + +import { seoContent } from "../datas/resources/seoContent"; +import SEO from "../components/seo"; const responsive = { - desktop: { - breakpoint: { max: 3000, min: 1024 }, - items: 3, - slidesToSlide:3, - partialVisibilityGutter: 140 - }, - laptop: { - breakpoint: { max: 1340, min: 600 }, - items: 2, - slidesToSlide:2 - }, - tablet: { - breakpoint: { max: 1024, min: 464 }, - items: 2, - slidesToSlide:2 - }, - mobile: { - breakpoint: { max: 920, min: 0 }, - items: 1, - slidesToSlide:1 - } + desktop: { + breakpoint: { max: 3000, min: 1024 }, + items: 3, + slidesToSlide: 3, + partialVisibilityGutter: 140, + }, + laptop: { + breakpoint: { max: 1340, min: 600 }, + items: 2, + slidesToSlide: 2, + }, + tablet: { + breakpoint: { max: 1024, min: 464 }, + items: 2, + slidesToSlide: 2, + }, + mobile: { + breakpoint: { max: 920, min: 0 }, + items: 1, + slidesToSlide: 1, + }, }; const ButtonGroup = ({ next, previous, goToSlide, ...rest }) => { - return ( -
    - - -
    - ); + return ( +
    + + +
    + ); }; class ResourcesPage extends React.Component { - constructor(props) { - super(props); - this.state = { - posts : [], - }; - } - - async getPosts() { - try { - let response = await fetch('https://blog.celestia.org/ghost/api/v3/content/posts/?key=000cf34311006e070b17fffcfd&limit=10&fields=title,text,feature_image,url'); - let responseJson = await response.json(); - - const blogPosts = []; - for (const [key,value] of Object.entries(responseJson.posts)) { - blogPosts.push({key: key, category:'blog', title:value.title, text: value.text, image: value.feature_image, url: value.url}); - } - - this.setState({posts:blogPosts}) - } catch(error) { - console.error(error); - } - } - - getContent(id){ - var content = ''; - switch (resources[id].category){ - case "blog": - content = this.state.posts[resources[id].id]; - break; - case "video": - content = videos[resources[id].id]; - break; - case "podcast": - content = podcasts[resources[id].id]; - break; - case "whitepaper": - content = whitepapers[resources[id].id]; - break; - default: - content = resources[id]; - break; - } - return content - } - - componentDidMount() { - this.getPosts(); - } - render() { - return ( - - - Celestia - Resources - -
    -
    -
    -

    Resources

    - -
    - -
    -
    - -
    -
    - -
    -
    -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -

    Blog

    -
    - }> - {blogs.map((article,index) => ( - - ))} - - -
    -
    - -
    -
    -
    -
    - -
    - -
    - -
    - - - - -
    -

    Community Posts

    -
    - }> - {communityposts.map((post,index) => ( - - ))} - - -
    -
    -
    -
    -
    -     - ) - } + constructor(props) { + super(props); + this.state = { + posts: [], + }; + } + + async getPosts() { + try { + let response = await fetch( + "https://blog.celestia.org/ghost/api/v3/content/posts/?key=000cf34311006e070b17fffcfd&limit=10&fields=title,text,feature_image,url" + ); + let responseJson = await response.json(); + + const blogPosts = []; + for (const [key, value] of Object.entries(responseJson.posts)) { + blogPosts.push({ key: key, category: "blog", title: value.title, text: value.text, image: value.feature_image, url: value.url }); + } + + this.setState({ posts: blogPosts }); + } catch (error) { + console.error(error); + } + } + + getContent(id) { + var content = ""; + switch (resources[id].category) { + case "blog": + content = this.state.posts[resources[id].id]; + break; + case "video": + content = videos[resources[id].id]; + break; + case "podcast": + content = podcasts[resources[id].id]; + break; + case "whitepaper": + content = whitepapers[resources[id].id]; + break; + default: + content = resources[id]; + break; + } + return content; + } + + componentDidMount() { + this.getPosts(); + } + render() { + return ( + + +
    +
    +
    +

    Resources

    + +
    + +
    +
    + +
    +
    + +
    +
    +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +

    Blog

    +
    + } + > + {blogs.map((article, index) => ( + + ))} + +
    +
    + +
    +
    +
    +
    + +
    + +
    + +
    + + +
    +

    Community Posts

    +
    + } + > + {communityposts.map((post, index) => ( + + ))} + +
    +
    +
    +
    +
    +     + ); + } } -export default ResourcesPage +export default ResourcesPage; diff --git a/src/pages/team.js b/src/pages/team.js index 8f23c3b1f..dfb5f0ef1 100644 --- a/src/pages/team.js +++ b/src/pages/team.js @@ -9,56 +9,58 @@ import {FooterBoxes} from "../datas/team/content"; import {teamMembers} from "../datas/team/team-members"; import {advisors} from "../datas/team/advisors"; import Layout from "../components/layout"; -import {Helmet} from "react-helmet"; - +import { seoContent } from "../datas/team/seoContent"; +import SEO from "../components/seo"; const TeamPage = () => { return ( - - Celestia - {content.title} - -
    -
    -
    -

    {content.title}

    + +
    +
    +
    +

    {content.title}

    -
    -
    -
    {content.subtitle}
    - +
    +
    +
    {content.subtitle}
    + +
    +
    +
    +
    -
    -
    + +
    +
    + {teamMembers.map(member => ( +
    + +
    + ))} +
    -
    -
    -
    - {teamMembers.map(member => ( -
    - -
    - ))} -
    -
    +

    Advisors

    +
    -

    Advisors

    -
    +
    + {advisors.map(member => ( +
    + +
    + ))} +
    +
    -
    - {advisors.map(member => ( -
    - -
    - ))} -
    - -
    -
    -
    +
    +
    ) } diff --git a/src/pages/technology.js b/src/pages/technology.js index 21706a418..4a344bb90 100644 --- a/src/pages/technology.js +++ b/src/pages/technology.js @@ -5,40 +5,44 @@ import ColumnWithIcon from "../components/modules/columnWithIcon"; import {content, Technologies, FooterBoxes} from "../datas/technology/content"; import Layout from "../components/layout"; -import {Helmet} from "react-helmet"; + +import { seoContent } from "../datas/technology/seoContent"; +import SEO from "../components/seo"; const TechnologyPage = () => { return ( - - Celestia - {content.title} - -
    -
    -
    -

    {content.title}

    -
    {content.subtitle}
    - - {Technologies.map((tech,index) => ( - - ))} - - -
    -

    {content.columnSection.title}

    -
    {content.columnSection.subtitle}
    - -
    - {content.columnSection.columns.map((column,index) => ( -
    - -
    - ))} -
    -
    -
    -
    -
    + +
    +
    +
    +

    {content.title}

    +
    {content.subtitle}
    + + {Technologies.map((tech,index) => ( + + ))} + + +
    +

    {content.columnSection.title}

    +
    {content.columnSection.subtitle}
    + +
    + {content.columnSection.columns.map((column,index) => ( +
    + +
    + ))} +
    +
    +
    +
    +
    ) } diff --git a/src/pages/what-is-celestia.js b/src/pages/what-is-celestia.js index dac5bbcff..591927bb5 100644 --- a/src/pages/what-is-celestia.js +++ b/src/pages/what-is-celestia.js @@ -1,11 +1,12 @@ import * as React from "react"; import Layout from "../components/layout"; import { FooterBoxes } from "../datas/what-is-celestia/content"; -import { Helmet } from "react-helmet"; import { StaticImage } from "gatsby-plugin-image"; import { Link } from "gatsby"; import ArrowIcon from "../components/modules/arrow-icon"; -import { graphql } from "gatsby"; + +import { seoContent } from "../datas/what-is-celestia/seoContent"; +import SEO from "../components/seo"; import celestia_monolithic_modular_diagram from "../images/what-is-celestia/celestia-monolithic-modular-diagram.png"; import celestia_what_is_diagram from "../images/what-is-celestia/celestia-what-is-diagram.png"; @@ -15,328 +16,292 @@ import celestia_transactions from "../images/what-is-celestia/celestia-transacti import monolithic_modular_aproach from "../images/what-is-celestia/monolithic-modular-aproach.png"; import celestia_connections from "../images/what-is-celestia/celestia-connections.png"; -export const query = graphql` - { - site { - siteMetadata { - siteUrl - } - } - } -`; - -const WhatIsCelestia = ({ data }) => { - const siteMeta = data.site.siteMetadata; - console.log(siteMeta); +const WhatIsCelestia = () => { + console.log(seoContent) return ( - <> - - What is Celestia? - - - - - - - - - - - - - - - - -
    -
    -
    -

    What is Celestia?

    -

    - A complete beginner's guide to how Celestia works, its key benefits, and how anyone in the world will be able to - create their own blockchain in minutes. -

    + + +
    +
    +
    +

    What is Celestia?

    +

    + A complete beginner's guide to how Celestia works, its key benefits, and how anyone in the world will be able to create + their own blockchain in minutes. +

    -
    -
    -
    -

    - Celestia is a new technology that powers, scales and secures Web3 applications. To achieve this, Celestia - introduces a new modular blockchain architecture that solves the core scaling problems of today’s - blockchains. -

    -

    Confused?

    -

    Let’s walk through the basics, step-by-step.

    -
    -
    +
    +
    +
    +

    + Celestia is a new technology that powers, scales and secures Web3 applications. To achieve this, Celestia + introduces a new modular blockchain architecture that solves the core scaling problems of today’s blockchains. +

    +

    Confused?

    +

    Let’s walk through the basics, step-by-step.

    -
    +
    +
    +
    -
    -
    -
    -

    But what’s a modular blockchain?

    -

    - Modular blockchains are a new paradigm in blockchain design. Instead of one blockchain doing everything, - modular blockchains specialize and optimize to perform a given function. This specialization provides - breakthroughs in scalability, flexibility, and interoperability, enabling developers to build blockchain - applications for mass adoption. -

    -
    -
    -
    - {""} -
    +
    +
    +
    +

    But what’s a modular blockchain?

    +

    + Modular blockchains are a new paradigm in blockchain design. Instead of one blockchain doing everything, + modular blockchains specialize and optimize to perform a given function. This specialization provides + breakthroughs in scalability, flexibility, and interoperability, enabling developers to build blockchain + applications for mass adoption. +

    +
    +
    +
    + {""}
    -
    +
    +
    -
    -
    -
    -
    - {""} -
    -
    -
    -

    How is Celestia different from Bitcoin and Ethereum?

    -

    - If Bitcoin is a calculator and Ethereum is a computer, then Celestia is a cloud computer. -

    -

    - Bitcoin showed that it was possible to build a decentralized application but was very limited in what it - could be used to build. -

    -

    - Ethereum showed that it was possible to build a programmable blockchain that anyone could use to launch a - decentralized application. Celestia will show that it is possible to build a network that enables anyone - to launch their own blockchain. -

    +
    +
    +
    +
    + {""}
    -
    +
    +

    How is Celestia different from Bitcoin and Ethereum?

    +

    + If Bitcoin is a calculator and Ethereum is a computer, then Celestia is a cloud computer. +

    +

    + Bitcoin showed that it was possible to build a decentralized application but was very limited in what it could + be used to build. +

    +

    + Ethereum showed that it was possible to build a programmable blockchain that anyone could use to launch a + decentralized application. Celestia will show that it is possible to build a network that enables anyone to + launch their own blockchain. +

    +
    +
    +
    -
    -
    -
    -

    What’s a good analogy of Celestia?

    -

    - 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. -

    -
    -
    -
    - {""} -
    +
    +
    +
    +

    What’s a good analogy of Celestia?

    +

    + 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. +

    +
    +
    +
    + {""}
    -
    -
    +
    +
    +
    -
    -
    -
    -

    Why would I use Celestia?

    -
    -
    -
    -
    -
    -
    -

    Build blockchains easily

    -

    - Celestia reduces the cost of deploying and maintaining your own blockchain. -

    -
    +
    +
    +
    +

    Why would I use Celestia?

    +
    +
    +
    +
    +
    +
    +

    Build blockchains easily

    +

    + Celestia reduces the cost of deploying and maintaining your own blockchain. +

    -
    -
    -

    Provides flexibility

    -

    Customize your application in a way that suits your needs.

    -
    +
    +
    +
    +

    Provides flexibility

    +

    Customize your application in a way that suits your needs.

    -
    -
    -

    Higher scale

    -

    - Unlock access to web3 applications for everyone with more blockspace. -

    -
    +
    +
    +
    +

    Higher scale

    +

    + Unlock access to web3 applications for everyone with more blockspace. +

    -
    - - -
    +
    +
    + +
    -
    +
    +
    -
    -
    -
    -
    -

    What is data availability and why does it matter?

    -

    - Data availability is critical to the security of any blockchain because it ensures that anyone can inspect - the ledger of transactions and verify it. Data availability answers the question, has the data for this - blockchain been published? -

    -

    Users of a monolithic blockchain download all the data to check that it is available.

    -

    - As blocks get bigger, it becomes impractical for normal users to download all the data meaning that they - can’t verify the chain. Modular chains solve this problem by making it possible for users to verify very - large blocks using a technology called data availability sampling. -

    -
    -
    -
    - {""} -
    +
    +
    +
    +
    +

    What is data availability and why does it matter?

    +

    + Data availability is critical to the security of any blockchain because it ensures that anyone can inspect the + ledger of transactions and verify it. Data availability answers the question, has the data for this blockchain + been published? +

    +

    Users of a monolithic blockchain download all the data to check that it is available.

    +

    + As blocks get bigger, it becomes impractical for normal users to download all the data meaning that they can’t + verify the chain. Modular chains solve this problem by making it possible for users to verify very large + blocks using a technology called data availability sampling. +

    +
    +
    +
    + {""}
    -
    +
    +
    -
    -
    -
    -
    - {""} -
    -
    -
    -

    What are rollups and how do they work with Celestia?

    -

    - Rollups are a type of blockchain that offload some work to a layer 1 like Celestia. Rollups host apps and - process user transactions. By hosting apps across many different rollups, apps do not have to compete for - computational resources with each other. -

    -

    - Once rollup transactions get processed, they are then published to Celestia. Celestia’s job is to order - those transactions and check that they are available to download. -

    +
    +
    +
    +
    + {""}
    -
    +
    +

    What are rollups and how do they work with Celestia?

    +

    + Rollups are a type of blockchain that offload some work to a layer 1 like Celestia. Rollups host apps and + process user transactions. By hosting apps across many different rollups, apps do not have to compete for + computational resources with each other. +

    +

    + Once rollup transactions get processed, they are then published to Celestia. Celestia’s job is to order those + transactions and check that they are available to download. +

    +
    +
    +
    -
    -
    -
    -

    Modularism, not maximalism

    -

    - For years, crypto has endured a monolithic blockchain loop. Each new L1 has built a walled-off system, - where competition is fierce and zero-sum. This leads to maximalism as they all fight over users in their - ecosystems. -

    -

    - Modular blockchains create a collaborative environment with many connected chains. Each new user that a - modular blockchain brings in creates value for the whole modular ecosystem, not just a single L1. Modular - blockchains collaborate while monolithic L1s compete. -

    -

    Modularism, not maximalism.

    -
    -
    -
    - {""} -
    +
    +
    +
    +

    Modularism, not maximalism

    +

    + For years, crypto has endured a monolithic blockchain loop. Each new L1 has built a walled-off system, where + competition is fierce and zero-sum. This leads to maximalism as they all fight over users in their ecosystems. +

    +

    + Modular blockchains create a collaborative environment with many connected chains. Each new user that a + modular blockchain brings in creates value for the whole modular ecosystem, not just a single L1. Modular + blockchains collaborate while monolithic L1s compete. +

    +

    Modularism, not maximalism.

    +
    +
    +
    + {""}
    -
    +
    +
    -
    -
    -
    -
    - {""} -
    -
    -
    -

    Layer 0 is social consensus

    -

    - To us, the most important layer in blockchains is social consensus. Blockchains are a tool to allow - communities of people to socially coordinate in a sovereign way. Thus, our vision stems from a deeply held - core belief: communities have an inalienable right to independently self-organize. -

    -

    Modular blockchains for sovereign communities.

    +
    +
    +
    +
    + {""}
    -
    -
    - -
    -
    -
    -

    Additional resources

    -

    If you enjoyed this and want to learn more, here are some more resources we suggest you take a look at

    +
    +

    Layer 0 is social consensus

    +

    + To us, the most important layer in blockchains is social consensus. Blockchains are a tool to allow + communities of people to socially coordinate in a sovereign way. Thus, our vision stems from a deeply held + core belief: communities have an inalienable right to independently self-organize. +

    +

    Modular blockchains for sovereign communities.

    -
    -
    -
    -
    -

    FAQ

    -

    Read more about common questions

    -
    - - Read now - - +
    +
    +
    + +
    +
    +
    +

    Additional resources

    +

    If you enjoyed this and want to learn more, here are some more resources we suggest you take a look at

    +
    +
    +
    +
    +
    +

    FAQ

    +

    Read more about common questions

    + + Read now + +
    -
    -
    -
    -

    Learn modular

    -

    Dive deeper into Celestia and modular blockchains

    -
    - - Read now - - +
    +
    +
    +
    +

    Learn modular

    +

    Dive deeper into Celestia and modular blockchains

    + + Read now + +
    -
    -
    -
    -

    Documentation

    -

    Explore how to build on Celestia

    -
    - - Read now - - +
    +
    +
    +
    +

    Documentation

    +

    Explore how to build on Celestia

    + + Read now + +
    -
    -
    -
    -     - +
    + +
    +
    +     ); }; diff --git a/static/celestia-default-og-image.jpg b/static/celestia-default-og-image.jpg new file mode 100644 index 000000000..39461d364 Binary files /dev/null and b/static/celestia-default-og-image.jpg differ diff --git a/static/developer-portal-og-image.jpg b/static/developer-portal-og-image.jpg new file mode 100644 index 000000000..bf9cb8570 Binary files /dev/null and b/static/developer-portal-og-image.jpg differ diff --git a/static/ecosystem-og-image.jpg b/static/ecosystem-og-image.jpg new file mode 100644 index 000000000..32f763fa2 Binary files /dev/null and b/static/ecosystem-og-image.jpg differ diff --git a/static/ecosystem-page.png b/static/ecosystem-page.png deleted file mode 100644 index cf388373e..000000000 Binary files a/static/ecosystem-page.png and /dev/null differ diff --git a/static/glossary-og-image.jpg b/static/glossary-og-image.jpg new file mode 100644 index 000000000..8fc9d85ba Binary files /dev/null and b/static/glossary-og-image.jpg differ diff --git a/static/what-is-celestia-og-image.jpg b/static/what-is-celestia-og-image.jpg new file mode 100644 index 000000000..0ea6faafc Binary files /dev/null and b/static/what-is-celestia-og-image.jpg differ diff --git a/static/what-is-celestia-og-image.png b/static/what-is-celestia-og-image.png deleted file mode 100644 index fb564c4c0..000000000 Binary files a/static/what-is-celestia-og-image.png and /dev/null differ