Merge branch 'feature/meta-tags-fix' into dev

gatsby-config.js

@@ -3,6 +3,16 @@ 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: `Celestia Labs`,
+    // siteUrl: `https://celestia.org`,
+    // siteUrl: `https://celestia.surge.sh`,
+    siteUrl: `https://dev.lazyledger.org`,
+    image: `/celestia-default-og-image.jpg`,
+  },
 
   plugins: [
     "gatsby-plugin-react-helmet",

src/components/seo.js

@@ -0,0 +1,101 @@
+import { useStaticQuery, graphql } from "gatsby";
+import PropTypes from "prop-types";
+import React from "react";
+import { Helmet } from "react-helmet";
+
+function SEO({ description, lang, meta, keywords, title, image }) {
+	const { site } = useStaticQuery(graphql`
+		query DefaultSEOQuery {
+			site {
+				siteMetadata {
+					title
+					description
+					author
+					image
+                    siteUrl
+				}
+			}
+		}
+	`);
+
+
+    console.log(site.siteMetadata.image)
+
+	const metaTitle = title || site.siteMetadata.title;
+	const metaDescription = description || site.siteMetadata.description;
+	const metaImage = image ? site.siteMetadata.siteUrl + image : site.siteMetadata.siteUrl + site.siteMetadata.image;
+
+	return (
+		<Helmet
+			htmlAttributes={{
+				lang,
+			}}
+			meta={[
+				{
+					name: `description`,
+					content: metaDescription,
+				},
+				{
+					property: `og:title`,
+					content: metaTitle,
+				},
+				{
+					property: `og:description`,
+					content: metaDescription,
+				},
+				{
+					property: `og:image`,
+					content: metaImage,
+				},
+				{
+					property: `og:type`,
+					content: `website`,
+				},
+				{
+					name: `twitter:card`,
+					content: `summary`,
+				},
+				{
+					name: `twitter:creator`,
+					content: site.siteMetadata.author,
+				},
+				{
+					name: `twitter:title`,
+					content: metaTitle,
+				},
+				{
+					name: `twitter:description`,
+					content: metaDescription,
+				},
+			]
+				.concat(
+					keywords.length > 0
+						? {
+								name: `keywords`,
+								content: keywords.join(`, `),
+						  }
+						: []
+				)
+				.concat(meta)}
+			title={title}
+			titleTemplate={`%s | ${site.siteMetadata.title}`}
+		/>
+	);
+}
+
+SEO.defaultProps = {
+	lang: `en`,
+	keywords: [],
+	meta: [],
+};
+
+SEO.propTypes = {
+    description: PropTypes.string,
+    keywords: PropTypes.arrayOf(PropTypes.string),
+    lang: PropTypes.string,
+    meta: PropTypes.array,
+    title: PropTypes.string.isRequired,
+    image: PropTypes.string,
+};
+
+export default SEO;

src/datas/careers/seoContent.js

@@ -0,0 +1,5 @@
+export const seoContent = {
+	title: "Experiment with testnet",
+	description: "Join a growing ecosystem of developers building rollups and applications on the Mocha testnet.",
+    image: "/what-is-celestia-1.png",
+};

src/datas/community/seoContent.js

@@ -0,0 +1,5 @@
+export const seoContent = {
+	title: "Experiment with testnet",
+	description: "Join a growing ecosystem of developers building rollups and applications on the Mocha testnet.",
+    image: "/what-is-celestia-1.png",
+};

src/datas/developer-portal/frameworks.js

@@ -2,7 +2,7 @@ export const frameworks = {
 	title: "Frameworks",
 	description: "Explore frameworks to start building on Celestia.",
 	items: [
-        {
+        	{
 			id: 1,
 			title: "Caldera",
 			text: "Caldera makes it easy to launch performant, customizable blockchain rollups using the OP Stack.",
@@ -13,7 +13,7 @@ export const frameworks = {
 				url: "https://docs.celestia.org/developers/taro-testnet/",
 			},
 		},
-        {
+        	{
 			id: 2,
 			title: "Dymension",
 			text: "Dymension is a network of easily deployable and lightning fast modular blockchains called RollApps.",
@@ -24,8 +24,19 @@ export const frameworks = {
 				url: "https://docs.dymension.xyz/",
 			},
 		},
-        {
+		{
 			id: 3,
+			title: "Eclipse",
+			text: "Eclipse is a customizable rollup provider for developers building decentralized applications.",
+			image: "developer-portal/eclipse.png",
+			type: "external",
+			link: {
+				text:"Explore Eclipse",
+				url: "https://docs.eclipse.builders/building-on-eclipse/run-your-own-testnet-chain",
+			},
+		},
+        	{
+			id: 4,
 			title: "OP Stack",
 			text: "The OP Stack is a modular, open-source blueprint for highly scalable, highly interoperable blockchains of all kinds.",
 			image: "developer-portal/opstack.png",
@@ -36,7 +47,7 @@ export const frameworks = {
 			},
 		},
 		{
-			id: 4,
+			id: 5,
 			title: "Rollkit",
 			text: "Rollkit is a rollup framework that gives developers the freedom to deploy rollups throughout the modular stack.",
 			image: "developer-portal/rollkit.png",
@@ -47,7 +58,7 @@ export const frameworks = {
 			},
 		},
 		{
-			id: 5,
+			id: 6,
 			title: "Sovereign SDK",
 			text: "A framework for building seamlessly scalable and interoperable rollups that can run on any blockchain.",
 			image: "developer-portal/sovereign.png",

src/datas/developer-portal/seoContent.js

@@ -0,0 +1,5 @@
+export const seoContent = {
+	title: "Experiment with testnet",
+	description: "Join a growing ecosystem of developers building rollups and applications on the Mocha testnet.",
+    image: "/what-is-celestia-1.png",
+};

src/datas/ecosystem-page/seoContent.js

@@ -0,0 +1,5 @@
+export const seoContent = {
+	title: "Experiment with testnet",
+	description: "Join a growing ecosystem of developers building rollups and applications on the Mocha testnet.",
+    image: "/what-is-celestia-1.png",
+};

src/datas/ecosystem/seoContent.js

@@ -0,0 +1,5 @@
+export const seoContent = {
+	title: "Experiment with testnet",
+	description: "Join a growing ecosystem of developers building rollups and applications on the Mocha testnet.",
+    image: "/what-is-celestia-1.png",
+};

src/datas/faq/seoContent.js

@@ -0,0 +1,5 @@
+export const seoContent = {
+	title: "Experiment with testnet",
+	description: "Join a growing ecosystem of developers building rollups and applications on the Mocha testnet.",
+    image: "/what-is-celestia-1.png",
+};

src/datas/glossary/seoContent.js

@@ -0,0 +1,5 @@
+export const seoContent = {
+	title: "Experiment with testnet",
+	description: "Join a growing ecosystem of developers building rollups and applications on the Mocha testnet.",
+    image: "/what-is-celestia-1.png",
+};

src/datas/home/seoContent.js

@@ -0,0 +1,5 @@
+export const seoContent = {
+	title: "Experiment with testnet",
+	description: "Join a growing ecosystem of developers building rollups and applications on the Mocha testnet.",
+    image: "/what-is-celestia-1.png",
+};

src/datas/learn/seoContent.js

@@ -0,0 +1,5 @@
+export const seoContent = {
+	title: "Experiment with testnet",
+	description: "Join a growing ecosystem of developers building rollups and applications on the Mocha testnet.",
+    image: "/what-is-celestia-1.png",
+};

src/datas/press/content.js

@@ -9,7 +9,7 @@ export const FooterBoxes = [
             type: 'simple'
         }
     },{
-        title: 'Build on testnet',
+        title: 'Build on our testnet',
         text: 'Join a growing modular ecosystem of developers building on testnet.',
         button: {
             text: 'Get started',

src/datas/press/seoContent.js

@@ -0,0 +1,5 @@
+export const seoContent = {
+	title: "Experiment with testnet",
+	description: "Join a growing ecosystem of developers building rollups and applications on the Mocha testnet.",
+    image: "/what-is-celestia-1.png",
+};

src/datas/resources/seoContent.js

@@ -0,0 +1,5 @@
+export const seoContent = {
+	title: "Experiment with testnet",
+	description: "Join a growing ecosystem of developers building rollups and applications on the Mocha testnet.",
+    image: "/what-is-celestia-1.png",
+};

src/datas/team/seoContent.js

@@ -0,0 +1,5 @@
+export const seoContent = {
+	title: "Experiment with testnet",
+	description: "Join a growing ecosystem of developers building rollups and applications on the Mocha testnet.",
+    image: "/what-is-celestia-1.png",
+};

src/datas/technology/seoContent.js

@@ -0,0 +1,5 @@
+export const seoContent = {
+	title: "Celestia - Technology",
+	description: "Celestia is pioneering a new paradigm in blockchain design. A minimal, modular consensus layer for rollups.",
+    image: "",
+};

src/datas/what-is-celestia/seoContent.js

@@ -0,0 +1,5 @@
+export const seoContent = {
+	title: "Celestia - What is Celestia?",
+	description: "Celestia is pioneering a new paradigm in blockchain design. A minimal, modular consensus layer for rollups.",
+    image: "/what-is-celestia-og-image.jpg",
+};

src/pages/careers.js

@@ -6,7 +6,7 @@ import Button from "../components/buttons/button";
 import Perk from "../components/modules/perk";
 import Layout from "../components/layout";
 import {graphql, useStaticQuery} from "gatsby";
-import {Helmet} from "react-helmet";
+import SEO from "../components/seo";
 
 const CareersPage = () => {
     const jobs = useStaticQuery(graphql`
@@ -41,9 +41,11 @@ const CareersPage = () => {
 
     return (
         <Layout footerBoxes={FooterBoxes}>
-            <Helmet>
-                <title>Celestia - {content.title}</title>
-            </Helmet>
+            <SEO
+				title={`Celestia - ${content.title}`}
+				description="We’re on a mission to change the way that blockchains and decentralized applications are built—making them more secure, sovereign and scalable."
+				// image="/ecosystem-page.jpg"
+			/>
             <div className={'careers-page'}>
                 <main>
                     <div className={'container'}>

src/pages/community.js

@@ -6,18 +6,20 @@ import { explore } from "../datas/community/explore";
 import { ecosystem } from "../datas/community/ecosystem";
 import { FooterBoxes } from "../datas/community/content";
 import Layout from "../components/layout";
-import { Helmet } from "react-helmet";
 import CommunityItem from "../components/modules/community-item";
 import Button from "../components/buttons/button";
 import Image from "../components/imageComponent";
+import SEO from "../components/seo";
 
 const Community = () => {
 	return (
 		<Layout footerBoxes={FooterBoxes}>
-			<Helmet>
-				<title>Celestia - Community</title>
-			</Helmet>
-			<div className={"community"}>
+			<SEO
+				title='Celestia - Community'
+				description='Discover community hubs, discussion forums, and resources that are used by the global Celestia community.'
+				// image='/ecosystem-page.jpg'
+			/>
+			<div className={"community-page"}>
 				<main>
 					<section className='hero'>
 						<div className={"container"}>
@@ -73,14 +75,19 @@ const Community = () => {
 						<div className={"container"}>
 							<div className={"row justify-content-between align-items-center gx-5 gy-3"}>
 								<div className={"col-12 col-lg-6 col-xl-5 mb-4 mb-lg-0"}>
-									<div className="image-wrapper">
+									<div className='image-wrapper'>
 										<Image style={{ width: `100%` }} alt={ecosystem.title} filename={ecosystem.image} />
 									</div>
 								</div>
 								<div className={"col-12 col-lg-6 col-xl-6 "}>
 									<h2 className='title'>{ecosystem.title}</h2>
-									<p className="text">{ecosystem.text}</p>
-									<Button class={ecosystem.button.class} type={ecosystem.button.type} text={ecosystem.button.text} url={ecosystem.button.url} />
+									<p className='text'>{ecosystem.text}</p>
+									<Button
+										class={ecosystem.button.class}
+										type={ecosystem.button.type}
+										text={ecosystem.button.text}
+										url={ecosystem.button.url}
+									/>
 								</div>
 							</div>
 						</div>

src/pages/developer-portal.js

@@ -10,17 +10,18 @@ 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 SEO from "../components/seo";
 
 const DevPortal = () => {
 	return (
 		<Layout footerBoxes={FooterBoxes}>
-			<Helmet>
-				<title>Celestia - Developer Portal</title>
-			</Helmet>
+			<SEO
+				title="Celestia - Developer Portal"
+				description="The homepage for Celestia developers. Tutorials. Resources. Community."
+			/>
 			<div className={"developer-portal"}>
 				<main>
 					<section className='hero'>