Merge pull request #333 from celestiaorg/feature/update-developer-portal

Feature/update developer portal

gatsby-node.js

@@ -0,0 +1,9 @@
+exports.createPages = async ({ graphql, actions }) => {
+	const { createRedirect } = actions;
+
+	createRedirect({
+		fromPath: `/deploy`,
+		toPath: `/build/#deploy`,
+		isPermanent: true,
+	});
+};

src/components/footer.js

@@ -13,8 +13,8 @@ const navigation = {
 		title: "Developers",
 		links: [
 			{
-				text: "Developer portal",
-				url: "/developer-portal",
+				text: "Build",
+				url: "/build",
 				type: "internal",
 			},
 			{

src/components/framework-tabs.js

@@ -57,7 +57,7 @@ const FrameworkTabs = ({ content, categories, anchorId, section }) => {
 				</div>
 
 				{anchorId === 0 && (
-					<AnchorLink className='link' to={`/developer-portal#${content.items[2].title.replace(/\s+/g, "-").toLowerCase()}`} stripHash>
+					<AnchorLink className='link' to={`/build#${content.items[2].title.replace(/\s+/g, "-").toLowerCase()}`} stripHash>
 						<div className={"button button-simple mx-auto d-table mt-4"}>Integrate with Celestia</div>
 					</AnchorLink>
 				)}

src/components/header.js

@@ -50,8 +50,8 @@ const navigation = [
 		submenus: [
 			{
 				text: "Start with the dev portal",
-				subtext: "Developer portal",
-				url: "/developer-portal/",
+				subtext: "Build",
+				url: "/build/",
 				icon: "menu/devnet.svg",
 				type: "internal",
 				class: "plausible-event-name=Dev_Portal_Button--Header",

src/components/modules/icon-card.js

@@ -29,7 +29,7 @@ export default function IconCard({ imageClass, content, variant, iconPosition =
 					{content.link && content.type === "anchor" && (
 						<AnchorLink
 							className={`link ${btnClass}`}
-							to={`/developer-portal#${content.anchorToId ? content.anchorToId : content.title.replace(/\s+/g, "-").toLowerCase()}`}
+							to={`/build#${content.anchorToId ? content.anchorToId : content.title.replace(/\s+/g, "-").toLowerCase()}`}
 							stripHash
 						>
 							{content.link.text}
@@ -55,7 +55,7 @@ export default function IconCard({ imageClass, content, variant, iconPosition =
 								return (
 									<AnchorLink
 										className='link'
-										to={`/developer-portal#${link.anchorToId ? link.anchorToId : link.title.replace(/\s+/g, "-").toLowerCase()}`}
+										to={`/build#${link.anchorToId ? link.anchorToId : link.title.replace(/\s+/g, "-").toLowerCase()}`}
 										stripHash
 									>
 										{link.text}

src/datas/developer-portal/community.js → src/datas/build/community.js

@@ -6,24 +6,23 @@ export const community = {
 			id: 1,
 			title: "Discord",
 			text: "Have technical questions? Ask the developer community on Discord.",
-			image: "developer-portal/discord.png",
+			image: "build/discord.png",
 			type: "external",
 			link: {
-				text:"Join Discord",
+				text: "Join Discord",
 				url: "https://discord.com/invite/YsnTPcSfWQ",
 			},
 		},
 		{
 			id: 2,
 			title: "Modular Meetup",
 			text: "Host your own grassroots meetup about modular blockchains.",
-			image: "developer-portal/forum.png",
+			image: "build/forum.png",
 			type: "external",
 			link: {
-				text:"Host now",
+				text: "Host now",
 				url: "https://docs.celestia.org/community/modular-meetup-intro/",
 			},
 		},
-
 	],
 };

src/datas/developer-portal/concepts.js → src/datas/build/concepts.js

@@ -6,45 +6,45 @@ export const concepts = {
 			id: 1,
 			title: "Why build modular?",
 			text: "",
-			image: "developer-portal/lightbulb.png",
+			image: "build/lightbulb.png",
 			type: "external",
 			link: {
-				text:"Explore concepts",
+				text: "Explore concepts",
 				url: "https://docs.celestia.org/developers/build-modular/",
 			},
 		},
 		{
 			id: 2,
 			title: "Run a node",
 			text: "",
-			image: "developer-portal/availability.png",
+			image: "build/availability.png",
 			type: "external",
 			link: {
-				text:"Start now",
+				text: "Start now",
 				url: "https://docs.celestia.org/nodes/overview/",
 			},
 		},
 		{
 			id: 3,
 			title: "Learn modular",
 			text: "",
-			image: "developer-portal/why-build-mod.png",
+			image: "build/why-build-mod.png",
 			type: "internal",
 			link: {
-				text:"Learn more",
+				text: "Learn more",
 				url: "/learn/",
 			},
-		}, 
+		},
 		{
 			id: 4,
 			title: "Data availability FAQ",
 			text: "",
-			image: "developer-portal/modular.png",
+			image: "build/modular.png",
 			type: "external",
 			link: {
-				text:"Read more",
+				text: "Read more",
 				url: "https://docs.celestia.org/concepts/data-availability-faq/",
 			},
 		},
 	],
-};
+};

src/datas/developer-portal/connect.js → src/datas/build/connect.js

@@ -6,12 +6,12 @@ export const connect = {
 			id: 1,
 			title: "Node API documentation",
 			text: "Documentation for publishing and retrieving data from Celestia.",
-			image: "developer-portal/api-doc.png",
+			image: "build/api-doc.png",
 			type: "external",
 			link: {
-				text:"API Documentation",
+				text: "API Documentation",
 				url: "https://docs.celestia.org/developers/node-api/",
 			},
 		},
 	],
-};
+};

src/datas/build/content.js

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

src/datas/developer-portal/discover.js → src/datas/build/discover.js

@@ -9,7 +9,7 @@ export const discover = {
 			image: "svg/celestia-documentation.svg",
 			type: "external",
 			link: {
-				text:"Explore",
+				text: "Explore",
 				url: "https://docs.celestia.org/",
 			},
 		},
@@ -20,7 +20,7 @@ export const discover = {
 			image: "svg/blobspace.svg",
 			type: "external",
 			link: {
-				text:"Learn",
+				text: "Learn",
 				url: "https://docs.celestia.org/learn/paying-for-blobspace/",
 			},
 		},
@@ -31,7 +31,7 @@ export const discover = {
 			image: "svg/blob-tutorial.svg",
 			type: "external",
 			link: {
-				text:"Follow",
+				text: "Follow",
 				url: "https://docs.celestia.org/developers/node-tutorial/",
 			},
 		},

src/datas/developer-portal/faq.js → src/datas/build/faq.js

@@ -1,20 +1,20 @@
 export const faqs = {
-	title: 'FAQ',
-	description: 'New to Celestia? Get answers to the most common developer questions.',
+	title: "FAQ",
+	description: "New to Celestia? Get answers to the most common developer questions.",
 	items: [
 		{
 			id: 1,
-			question: 'Where should I start?',
+			question: "Where should I start?",
 			text: 'If you’re new to Celestia, you can start with some <a href="https://docs.celestia.org/developers/rollkit/#tutorials/" target="_blank" rel="noopener noreferrer" style="color:#7B2BF9;">beginner tutorials</a> to get a feel for Celestia’s architecture. If you feel confident, you can tackle more advanced tutorials, like <a href="https://rollkit.dev/docs/tutorials/ethermint/" target="_blank" rel="noopener noreferrer" style="color:#7B2BF9;">deploying an EVM rollup</a>, building a <a href="https://docs.celestia.org/developers/full-stack-modular-development-guide/" target="_blank" rel="noopener noreferrer" style="color:#7B2BF9;">full stack application</a>, or <a href="https://docs.celestia.org/developers/integrate-celestia/" target="_blank" rel="noopener noreferrer" style="color:#7B2BF9;">integrating a custom blockchain</a>.',
 		},
 		{
 			id: 2,
-			question: 'What languages do I need to know to build on Celestia?',
-			text: 'Celestia is flexible in supporting any virtual machine. Developers can build using programming languages supported by VMs and smart contract frameworks that are integrated with Celestia. Currently supported languages include Solidity (EVM), Rust (CosmWasm), and Go (Cosmos SDK).',
+			question: "What languages do I need to know to build on Celestia?",
+			text: "Celestia is flexible in supporting any virtual machine. Developers can build using programming languages supported by VMs and smart contract frameworks that are integrated with Celestia. Currently supported languages include Solidity (EVM), Rust (CosmWasm), and Go (Cosmos SDK).",
 		},
 		{
 			id: 3,
-			question: 'What is Celestia?',
+			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.',
 		},
 	],

src/datas/developer-portal/frameworks.js → src/datas/build/frameworks.js

@@ -8,12 +8,12 @@ export const frameworks = {
 			title: "Arbitrum Orbit",
 			category: ["All", "Ethereum"],
 			text: "Arbitrum Orbit is the ideal way to permissionlessly launch your own custom chain.",
-			image: "developer-portal/arbitrum.png",
+			image: "build/arbitrum.png",
 			links: [
 				{
-				text: "Explore Arbitrum Orbit",
-				url: "https://docs.celestia.org/developers/arbitrum-integration",
-				type: "external",
+					text: "Explore Arbitrum Orbit",
+					url: "https://docs.celestia.org/developers/arbitrum-integration",
+					type: "external",
 				},
 			],
 		},
@@ -22,7 +22,7 @@ export const frameworks = {
 			title: "Dymension",
 			category: ["All"],
 			text: "Dymension is a home for easily deployable and lightning fast app-chains, called RollApps.",
-			image: "developer-portal/dymension.png",
+			image: "build/dymension.png",
 			links: [
 				{
 					text: "Explore Dymension",
@@ -36,7 +36,7 @@ export const frameworks = {
 			title: "OP Stack",
 			category: ["All", "Ethereum"],
 			text: "The OP Stack is a modular, open-source blueprint for highly scalable, highly interoperable blockchains of all kinds.",
-			image: "developer-portal/opstack.png",
+			image: "build/opstack.png",
 			links: [
 				{
 					text: "Explore OP Stack",
@@ -55,7 +55,7 @@ export const frameworks = {
 			title: "Polygon CDK",
 			category: ["All", "Ethereum"],
 			text: "Polygon CDK (Chain Development Kit) makes it easy for developers to design and launch zero-knowledge (ZK) L2s on Ethereum, on demand.",
-			image: "developer-portal/polygon.png",
+			image: "build/polygon.png",
 			type: "external",
 			link: {
 				text: "Coming Soon",
@@ -66,7 +66,7 @@ export const frameworks = {
 			title: "Rollkit",
 			category: ["All", "Sovereign"],
 			text: "Rollkit is a rollup framework that gives developers the freedom to deploy rollups throughout the modular stack.",
-			image: "developer-portal/rollkit.png",
+			image: "build/rollkit.png",
 			links: [
 				{
 					text: "Explore Rollkit",
@@ -80,7 +80,7 @@ export const frameworks = {
 			title: "Sovereign SDK",
 			category: ["All", "Sovereign"],
 			text: "A framework for building seamlessly scalable and interoperable rollups that can run on any blockchain.",
-			image: "developer-portal/sovereign.png",
+			image: "build/sovereign.png",
 			links: [
 				{
 					text: "Explore Sovereign SDK",

src/datas/developer-portal/get-started.js → src/datas/build/get-started.js

@@ -6,7 +6,7 @@ export const getStarted = {
 			id: 1,
 			title: "Build",
 			text: "Pick a rollup framework to begin building.",
-			// image: "developer-portal/tutorial.png",
+			// image: "build/tutorial.png",
 			type: "anchor",
 			link: {
 				text: "Choose",
@@ -16,17 +16,17 @@ export const getStarted = {
 			id: 2,
 			title: "Integrate",
 			text: "Plug Celestia into your existing chain..",
-			// image: "developer-portal/concepts.png",
+			// image: "build/concepts.png",
 			type: "anchor",
 			link: {
 				text: "Start",
 			},
 		},
-				{
+		{
 			id: 3,
 			title: "Deploy",
 			text: "Explore Rollup-as-a-Service to deploy quickly.",
-			// image: "developer-portal/integrate.png",
+			// image: "build/integrate.png",
 			type: "anchor",
 			link: {
 				text: "Explore",