Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Celestia underneath page #395

Draft
wants to merge 36 commits into
base: main
Choose a base branch
from
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
36 commits
Select commit Hold shift + click to select a range
678861f
added hero section
gabros20 May 21, 2024
2372020
updated hero layout for mobile
gabros20 May 21, 2024
07975e7
added from monolithic section
gabros20 May 22, 2024
f4a0e9a
added Relieving the DA
gabros20 May 22, 2024
33dafa9
added why celestia section
gabros20 May 22, 2024
1efba65
addded reveal efffect, and streaking points on path effect
gabros20 May 22, 2024
e832059
animation fixes
gabros20 May 22, 2024
b25a0cc
Update hero-data.js
alex-beckett May 24, 2024
8b89720
Update data-availability.js
alex-beckett May 24, 2024
f3bc031
Update from-monolith.js
alex-beckett May 24, 2024
01564df
scroll bar arrows removed
gabros20 May 24, 2024
2625303
added consistent text style to Hero text
gabros20 May 24, 2024
f6ee1dd
updated buttons opne on new page
gabros20 May 24, 2024
e36a782
updated build page tabs with url parameters to access tabs by url
gabros20 May 24, 2024
04f9e5c
updated hero links, imges
gabros20 May 27, 2024
568d339
Update hero-data.js
alex-beckett Jun 4, 2024
3b249f9
Update data-availability.js
alex-beckett Jun 4, 2024
2d5d11f
Update why-celestia.js
alex-beckett Jun 4, 2024
4532442
Update why-celestia.js
alex-beckett Jun 4, 2024
ae27715
updated underneath path, deleted wic page, updated links, added redi…
gabros20 Jun 5, 2024
286f809
Merge remote-tracking branch 'origin/main' into feature/celestia-unde…
gabros20 Jun 5, 2024
eb0d1f8
Update hero-data.js
alex-beckett Jun 15, 2024
48c4115
Update header.js
alex-beckett Jun 15, 2024
6f579e7
Update from-monolith.js
alex-beckett Jun 15, 2024
d3cf8ff
update: title changes
gabros20 Jun 17, 2024
cf20cab
Merge remote-tracking branch 'origin/main' into feature/celestia-unde…
gabros20 Jun 17, 2024
ae2f962
Update from-monolith.js
alex-beckett Jun 18, 2024
954611a
Update why-celestia.js
alex-beckett Jun 20, 2024
33d9df5
updated hero with new copy and removed "Build whaterver" text
gabros20 Jun 21, 2024
3d7ba52
added missing text line
gabros20 Jun 21, 2024
6505581
Update hero-data.js
alex-beckett Jun 24, 2024
12d86a9
Update hero-data.js
alex-beckett Jun 24, 2024
ad8c193
Update hero-data.js
alex-beckett Jun 24, 2024
928e1cc
Update hero-data.js
alex-beckett Jun 24, 2024
b24c8a7
Delete src/images/underneath/celestia-underneath-why-celestia-1.png
alex-beckett Jul 29, 2024
a4536f6
Add files via upload
alex-beckett Jul 29, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions gatsby-node.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,4 +12,10 @@ exports.createPages = async ({ graphql, actions }) => {
toPath: `/build`,
isPermanent: true,
});

createRedirect({
fromPath: `/what-is-celestia`,
toPath: `/underneath`,
isPermanent: true,
});
};
59 changes: 41 additions & 18 deletions src/components/framework-tabs.js
Original file line number Diff line number Diff line change
@@ -1,13 +1,38 @@
import React, { useState } from "react";
import React, { useState, useEffect } from "react";
import { useLocation } from "@reach/router";
import IconCard from "./modules/icon-card";
import { AnchorLink } from "gatsby-plugin-anchor-links";

const FrameworkTabs = ({ content, categories, anchorId, section }) => {
const [selectedTab, setSelectedTab] = useState("All");
const FrameworkTabs = ({ content, categories, anchorId, section, type }) => {
const location = useLocation();
const urlParams = new URLSearchParams(location.search);
const initialFrameworkCategory = urlParams.get("framework_category") || "All";
const initialRollupCategory = urlParams.get("rollup_category") || "All";
const [selectedFrameworkTab, setSelectedFrameworkTab] = useState(initialFrameworkCategory);
const [selectedRollupTab, setSelectedRollupTab] = useState(initialRollupCategory);

const allUniqueCategories = [...new Set(categories.items.flatMap((item) => item.category))];

console.log(allUniqueCategories);
useEffect(() => {
if (type === "framework" && initialFrameworkCategory !== selectedFrameworkTab) {
setSelectedFrameworkTab(initialFrameworkCategory);
}
if (type === "rollup" && initialRollupCategory !== selectedRollupTab) {
setSelectedRollupTab(initialRollupCategory);
}
}, [initialFrameworkCategory, initialRollupCategory, type]);

const handleTabClick = (category, tabType) => {
if (tabType === "framework") {
setSelectedFrameworkTab(category);
} else if (tabType === "rollup") {
setSelectedRollupTab(category);
}
const newUrl = `${location.pathname.replace(/\/$/, "")}?framework_category=${
tabType === "framework" ? category : selectedFrameworkTab
}&rollup_category=${tabType === "rollup" ? category : selectedRollupTab}`;
window.history.pushState({}, "", newUrl);
};

return (
<section className='frameworks' id={`${content.items[anchorId].title.replace(/\s+/g, "-").toLowerCase()}`}>
Expand All @@ -17,25 +42,23 @@ const FrameworkTabs = ({ content, categories, anchorId, section }) => {
{categories.description && <div className={"description text-center mx-auto mt-3"}>{categories.description}</div>}

<div className={"tabs row justify-content-center"}>
{allUniqueCategories.map(function (category) {
return (
<div
className={`col-auto tab-item ${selectedTab === category && "active"} plausible-event-name=${category.replace(
/\s+/g,
"-"
)}_Tab_Click--Developer_Portal-${section}_section`}
onClick={() => setSelectedTab(category)}
>
{category}
</div>
);
})}
{allUniqueCategories.map((category) => (
<div
key={category}
className={`col-auto tab-item ${type === "framework" && selectedFrameworkTab === category ? "active" : ""} ${
type === "rollup" && selectedRollupTab === category ? "active" : ""
} plausible-event-name=${category.replace(/\s+/g, "-")}_Tab_Click--Developer_Portal-${section}_section`}
onClick={() => handleTabClick(category, type)}
>
{category}
</div>
))}
</div>

<div className={""}>
<div className={"row row-cols-1 row-cols-md-2 row-cols-lg-3 gx-3 gy-5 gy-md-3 my-2 pt-0 pt-md-4 pb-3"}>
{categories.items
.filter((item) => item.category.includes(selectedTab))
.filter((item) => item.category.includes(type === "framework" ? selectedFrameworkTab : selectedRollupTab))
.map((item) => (
<IconCard
className='icon-card-wrapper col'
Expand Down
4 changes: 2 additions & 2 deletions src/components/header.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,9 @@ const navigation = [
type: "internal",
submenus: [
{
text: "What is Celestia?",
text: "Celestia underneath",
subtext: "Start here",
url: "/what-is-celestia/",
url: "/underneath/",
icon: "menu/logo.svg",
type: "internal",
class: "plausible-event-name=What_Is_Celestia_Button--Header",
Expand Down
2 changes: 1 addition & 1 deletion src/datas/build/faq.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ export const faqs = {
{
id: 3,
question: "What is Celestia?",
text: 'Celestia is a modular consensus and data network, built to enable anyone to easily deploy their own blockchain with minimal overhead. Head to the <a href="https://celestia.org/what-is-celestia/" target="_blank" rel="noopener noreferrer" style="color:#7B2BF9;">What is Celestia?</a> page for an overview.',
text: 'Celestia is a modular consensus and data network, built to enable anyone to easily deploy their own blockchain with minimal overhead. Head to the <a href="https://celestia.org/underneath/" target="_blank" rel="noopener noreferrer" style="color:#7B2BF9;">What is Celestia?</a> page for an overview.',
},
],
};
66 changes: 36 additions & 30 deletions src/datas/faq/faqs.js
Original file line number Diff line number Diff line change
@@ -1,31 +1,37 @@
export const faqs = [
{
id: 1,
question: 'What is Celestia?',
text: 'Celestia is a new technology that powers, scales, and secures web3 applications. To achieve this, Celestia introduces a new blockchain architecture to solve the core scaling challenges of today’s blockchains. This new architecture is what we call modular blockchains.<br><br>Visit the <a href="https://celestia.org/what-is-celestia/" target="_blank" rel="noreferrer">what is Celestia page</a> to learn more.',
},{
id: 2,
question: 'What is a modular blockchain?',
text: 'Modular blockchains are a new paradigm in blockchain design. Instead of one blockchain doing everything, modular blockchains specialize and optimize to perform a given task. This specialization provides breakthroughs in scalability, flexibility, and interoperability, enabling developers to build blockchain applications for mass adoption.<br><br>Want to dive in on modular blockchains? Explore <a href="https://celestia.org/learn/" target="_blank" rel="noreferrer">Learn Modular</a>.',
},{
id: 3,
question: 'How does Celestia scale?',
text: 'Celestia introduces a new feature called data availability sampling. This feature allows Celestia to safely increase its block size as more light nodes join the network. Importantly, block size increases don’t reduce Celestia’s security or decentralization, unlike traditional blockchains.',
},{
id: 4,
question: 'What programming languages and VMs are supported by Celestia?',
text: 'Because of Celestia’s modular architecture, it can support any programming language or VM. Currently supported languages include Solidity (EVM), Rust & Golang (Cosmos SDK). Developers are free to use any existing language and VM or define their own.',
},{
id: 5,
question: 'Where can developers get started?',
text: 'Developers can head to the <a href="https://docs.celestia.org/" target="_blank" rel="noreferrer">docs</a> to get started with building on Celestia.',
},{
id: 6,
question: 'How do I run a node on Celestia?',
text: 'Celestia supports multiple testnets that users can run nodes on in preparation for mainnet. Information on running testnet nodes is available in our <a href="https://docs.celestia.org/" target="_blank" rel="noreferrer">documentation</a>.',
},{
id: 7,
question: 'Will Celestia have a token and if so, what will it be used for?',
text: 'Celestia is designed to have a token used to secure the network via Proof of Stake and to pay for transaction fees on the network, and eventually a fee burn mechanism similar to EIP-1559 in Ethereum.',
},
]
{
id: 1,
question: "What is Celestia?",
text: 'Celestia is a new technology that powers, scales, and secures web3 applications. To achieve this, Celestia introduces a new blockchain architecture to solve the core scaling challenges of today’s blockchains. This new architecture is what we call modular blockchains.<br><br>Visit the <a href="https://celestia.org/underneath/" target="_blank" rel="noreferrer">what is Celestia page</a> to learn more.',
},
{
id: 2,
question: "What is a modular blockchain?",
text: 'Modular blockchains are a new paradigm in blockchain design. Instead of one blockchain doing everything, modular blockchains specialize and optimize to perform a given task. This specialization provides breakthroughs in scalability, flexibility, and interoperability, enabling developers to build blockchain applications for mass adoption.<br><br>Want to dive in on modular blockchains? Explore <a href="https://celestia.org/learn/" target="_blank" rel="noreferrer">Learn Modular</a>.',
},
{
id: 3,
question: "How does Celestia scale?",
text: "Celestia introduces a new feature called data availability sampling. This feature allows Celestia to safely increase its block size as more light nodes join the network. Importantly, block size increases don’t reduce Celestia’s security or decentralization, unlike traditional blockchains.",
},
{
id: 4,
question: "What programming languages and VMs are supported by Celestia?",
text: "Because of Celestia’s modular architecture, it can support any programming language or VM. Currently supported languages include Solidity (EVM), Rust & Golang (Cosmos SDK). Developers are free to use any existing language and VM or define their own.",
},
{
id: 5,
question: "Where can developers get started?",
text: 'Developers can head to the <a href="https://docs.celestia.org/" target="_blank" rel="noreferrer">docs</a> to get started with building on Celestia.',
},
{
id: 6,
question: "How do I run a node on Celestia?",
text: 'Celestia supports multiple testnets that users can run nodes on in preparation for mainnet. Information on running testnet nodes is available in our <a href="https://docs.celestia.org/" target="_blank" rel="noreferrer">documentation</a>.',
},
{
id: 7,
question: "Will Celestia have a token and if so, what will it be used for?",
text: "Celestia is designed to have a token used to secure the network via Proof of Stake and to pay for transaction fees on the network, and eventually a fee burn mechanism similar to EIP-1559 in Ethereum.",
},
];
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,8 @@ export const FooterBoxes2 = [
link: {
text: "Build modular",
href: "/build/",
type: "internal",
type: "external",
id: "build",
class: "plausible-event-name=Build_Your_App_Button--What_Is_Celestia_Page-Start_Using_Section",
},
},
{
Expand All @@ -16,9 +15,8 @@ export const FooterBoxes2 = [
link: {
text: "Explore",
href: "/#explore-celestia",
type: "anchor",
type: "external",
id: "explore",
class: "plausible-event-name=Explore_What_You_Can_Do_Button--What_Is_Celestia_Page-Start_Using_Section",
},
},
];
17 changes: 17 additions & 0 deletions src/datas/underneath/data-availability.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
export const dataAvailability = {
title: "Removing the DA bottleneck",
text: `
<p>Data availability (DA) has been a core scaling bottleneck for crypto applications. So far, rollups have tried to avoid the DA bottleneck by recruiting a committee or centralized server for DA.</p>
<p>Now, Celestia provides high data throughput that is verifiable for any user through a light node. This is possible because of data availability sampling. As the light node network grows, Celestia can scale to the data throughput needed for millions of rollups without compromising end-user security.</p>
`,
image: {
src: "underneath/celestia-underneath-da-image.png",
alt: "From monolithic to modular",
},
button: {
class: "simple",
type: "external",
text: "Start light node",
url: "/run-a-light-node/",
},
};
12 changes: 12 additions & 0 deletions src/datas/underneath/from-monolith.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
export const fromMonolith = {
title: "Monolithic to modular",
text: `
<p>Bitcoin was the first blockchain and decentralized app. But Bitcoin wasn’t made for others to build apps on, so developers began building their own basic L1s.</p>
<p>Then Ethereum built the first blockchain you could program for apps. However, developers continued launching L1s with increasing development times and costs.</p>
<p>Now, Celestia introduces a new modular architecture that makes it easy for anyone to securely launch their own blockchain. Without needing to recruit a committee, you can deploy your own chain with Celestia underneath in just one click.</p>
`,
image: {
src: "underneath/celestia-underneath-from-monolith.png",
alt: "From monolithic to modular",
},
};
39 changes: 39 additions & 0 deletions src/datas/underneath/hero-data.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
export const heroData = {
title: "Celestia underneath",
subtitle: "Build whatever",
description: `
<p>Celestia is a modular blockchain built to securely scale any ecosystem.</p>
<h3>Modular</h3>
<p>Celestia’s modular design easily plugs into any rollup framework or chain to provide permissionless, high-throughput data availability. With Celestia underneath, deploy an Ethereum L2 in 1-click or transform nearly any VM into your own sovereign blockchain.</p>
<h3>Secure</h3>
<p>Celestia provides high data throughput that is verifiable for any user through a light node. Light nodes allow anyone to directly verify data availability and interact with Celestia without centralized gateways or RPC providers.</p>
<h3>Scale</h3>
<p>With low-cost DA and abundant throughput, you have a blank canvas to build whatever with Celestia underneath.</p>
`,
image: {
src: "underneath/celestia-underneath-hero.png",
alt: "Celestia Underneath Hero",
},
cards: [
{
title: "Ethereum L2",
text: "Use leading rollup frameworks to deploy an Ethereum L2.",
button: {
class: "external",
type: "external",
text: "Simply deploy",
url: "/build?framework_category=Ethereum#build",
},
},
{
title: "Sovereign rollup",
text: "Deploy your own customizable sovereign chain.",
button: {
class: "external",
type: "external",
text: "Build whatever",
url: "/build/?framework_category=Sovereign#build",
},
},
],
};
5 changes: 5 additions & 0 deletions src/datas/underneath/seoContent.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
export const seoContent = {
title: "Celestia Underneath | celestia.org",
description: "Celestia is a modular blockchain specialized in ordering transactions and making their data available (DA). ",
image: "",
};
39 changes: 39 additions & 0 deletions src/datas/underneath/why-celestia.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
export const whyCelestia = {
title: "Why Celestia?",
content: [
{
title: "Blockspace as a canvas",
text: `
<p>Celestia sits underneath, so you can customize your application however you like.</p>
<p>Modify the VM of your chain to unlock novel use cases or higher performance. Building a game? Express any type of game logic as a rollup on Celestia, even fully onchain gameplay.</p>
<p>Or deploy with any existing blockchain framework and upgrade as new modular capabilities come online.</p>
`,
image: {
src: "underneath/celestia-underneath-why-celestia-1.png",
alt: "From monolithic to modular",
},
},
{
title: "Deploy fast",
text: `
<p>Using a <a href='https://celestia.org/build/#deploy' target='_blank' rel='noopener noreferrer' style="color:#7B2BF9;">rollups-as-a-service (RaaS) provider</a>, you can one-click deploy a rollup with access to all necessary infrastructure out-of-the-box, like a block explorer, account abstraction, RPCs, and high-uptime sequencing.</p>
<p>With Celestia underneath, a customizable blockchain becomes as easy to deploy as a smart contract.</p>
`,
image: {
src: "underneath/celestia-underneath-why-celestia-2.png",
alt: "From monolithic to modular",
},
},
{
title: "Access abundant throughput",
text: `
<p>Celestia keeps DA abundant and low-cost with DAS so that developers can create new kinds of expressive apps like onchain games and generative NFTs.</p>
<p>Low fees also provide new options to monetize. For example, an app can take a percentage of transaction fees on its own rollup. With these new monetization options, teams can support user growth by subsidizing onboarding costs or eliminating specific user fees.</p>
`,
image: {
src: "underneath/celestia-underneath-why-celestia-3.png",
alt: "From monolithic to modular",
},
},
],
};
6 changes: 0 additions & 6 deletions src/datas/what-is-celestia/seoContent.js

This file was deleted.

32 changes: 0 additions & 32 deletions src/datas/what-is-celestia/toc.js

This file was deleted.

Binary file added src/fonts/subset-Inter-Medium.woff
Binary file not shown.
Binary file added src/fonts/subset-Inter-Medium.woff2
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/images/underneath/celestia-underneath-da.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file removed src/images/what-is-celestia/celestia-modular.png
Binary file not shown.
Binary file removed src/images/what-is-celestia/celestia-modularizm.png
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
6 changes: 3 additions & 3 deletions src/pages/build.js
Original file line number Diff line number Diff line change
Expand Up @@ -52,9 +52,9 @@ const Build = () => {
</div>
</section>

<FrameworkTabs content={getStarted} categories={frameworks} anchorId={0} section={"Framework"} />
<FrameworkTabs content={getStarted} categories={frameworks} anchorId={0} section={"Framework"} type={"framework"} />

<section className='discover pt-5'>
<section className='discover pt-5' id='discover'>
<div className={"container"}>
<h2 className={"text-center"}>{discover.title}</h2>
{discover.description && <div className={"description"}>{discover.description}</div>}
Expand All @@ -79,7 +79,7 @@ const Build = () => {

<IntegrateSection content={getStarted} anchorId={1} />

<FrameworkTabs content={getStarted} categories={rollups} anchorId={2} section={"Rollups"} />
<FrameworkTabs content={getStarted} categories={rollups} anchorId={2} section={"Rollups"} type={"rollup"} />

<ContactSection />
</main>
Expand Down
4 changes: 2 additions & 2 deletions src/pages/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -56,12 +56,12 @@ const IndexPage = () => {
direction={"ltr"}
title={"Access abundance"}
text={`
<p>Tap into the abundant throughput enabled by <a href='https://celestia.org/what-is-celestia/#what-is-data-availability-sampling' target='_blank' rel='noopener noreferrer'>data availability sampling (DAS)</a>, the first architecture that scales while maintaining verifiability for any user.</p>
<p>Tap into the abundant throughput enabled by <a href='https://celestia.org/underneath/' target='_blank' rel='noopener noreferrer'>data availability sampling (DAS)</a>, the first architecture that scales while maintaining verifiability for any user.</p>
<p>Anyone can directly verify and contribute to Celestia by <a href='https://celestia.org/run-a-light-node/' target='_blank' rel='noopener noreferrer'>running a light node</a>.</p>
`}
image={"graph-scale.png"}
buttonPrimaryTitle={"Learn Celestia"}
buttonPrimaryUrl={"/what-is-celestia/"}
buttonPrimaryUrl={"/underneath/"}
anim={lottiAnim1}
animVersion={1}
/>
Expand Down
Loading