Merge branch 'release/meta-tags-fix' into release/test

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",

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 (
             <>
                 <header id={'header'}>
-                    <Helmet>
-                        <title>Celestia</title>
-                    </Helmet>
                     <div className={'blurry'}/>
                     <div className={'container'}>
                         <button id={'hamburger'} className="hamburger hamburger--slider" type="button" onClick={this.toggleMenu}>

src/components/seo.js

@@ -0,0 +1,98 @@
+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
+				}
+			}
+		}
+	`);
+
+	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_large_image`,
+				},
+				{
+					name: `twitter:title`,
+					content: metaTitle,
+				},
+				{
+					name: `twitter:site`,
+					content: site.siteMetadata.author,
+				},
+				{
+					name: `twitter:description`,
+					content: metaDescription,
+				},
+			]
+				.concat(
+					keywords.length > 0
+						? {
+								name: `keywords`,
+								content: keywords.join(`, `),
+						  }
+						: []
+				)
+				.concat(meta)}
+			title={metaTitle}
+			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: "Careers | celestia.org",
+	description: "Join our team of leading engineers, researchers, and entrepreneurs in pioneering the first modular blockchain design.",
+    image: "/celestia-default-og-image.jpg",
+};

src/datas/community/seoContent.js

@@ -0,0 +1,5 @@
+export const seoContent = {
+	title: "Community | celestia.org",
+	description: "Discover community hubs, discussion forums, and resources that are used by the global Celestia community.",
+    image: "/celestia-default-og-image.jpg",
+};

src/datas/developer-portal/seoContent.js

@@ -0,0 +1,5 @@
+export const seoContent = {
+	title: "Developer Portal | celestia.org",
+	description: "The homepage for Celestia developers. Tutorials. Resources. Community.",
+    image: "/developer-portal-og-image.jpg",
+};

src/datas/ecosystem/seoContent.js

@@ -0,0 +1,5 @@
+export const seoContent = {
+	title: "Ecosystem | celestia.org",
+	description: "Celestia Ecosystem provides a wide range of apps and services built in the Celestia ecosystem.",
+    image: "/ecosystem-og-image.jpg",
+};

src/datas/faq/seoContent.js

@@ -0,0 +1,5 @@
+export const seoContent = {
+	title: "FAQ | celestia.org",
+	description: "Find answers to frequently asked questions about Celestia.",
+    image: "/celestia-default-og-image.jpg",
+};

src/datas/glossary/seoContent.js

@@ -0,0 +1,5 @@
+export const seoContent = {
+	title: "Glossary | celestia.org",
+	description: "Explore new terms about Celestia and modular blockchains.",
+    image: "/celestia-default-og-image.jpg",
+};

src/datas/home/seoContent.js

@@ -0,0 +1,5 @@
+export const seoContent = {
+	title: "Home | celestia.org",
+	description: "Celestia is a modular consensus and data network, built to enable anyone to easily deploy their own blockchain with minimal overhead.",
+    image: "/celestia-default-og-image.jpg",
+};

src/datas/press/seoContent.js

@@ -0,0 +1,5 @@
+export const seoContent = {
+	title: "Press | celestia.org",
+	description: "Find branding, news, social channels, and press contacts.",
+    image: "/celestia-default-og-image.jpg",
+};

src/datas/resources/seoContent.js

@@ -0,0 +1,5 @@
+export const seoContent = {
+	title: "Resources | celestia.org",
+	description: "Explore blog posts, podcasts episodes, YouTube videos, and research papers about the Celestia network.",
+    image: "/celestia-default-og-image.jpg",
+};

src/datas/team/seoContent.js

@@ -0,0 +1,5 @@
+export const seoContent = {
+	title: "Team | celestia.org",
+	description: "Meet the team building the Celestia network.",
+    image: "/celestia-default-og-image.jpg",
+};

src/datas/technology/seoContent.js

@@ -0,0 +1,5 @@
+export const seoContent = {
+	title: "Technology | celestia.org",
+	description: "Learn about the core technology powering Celestia's new modular blockchain architecture.",
+    image: "/celestia-default-og-image.jpg",
+};

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

@@ -0,0 +1,5 @@
+export const seoContent = {
+	title: "What is Celestia? | celestia.org",
+	description: "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.",
+    image: "/what-is-celestia-og-image.jpg",
+};

src/pages/careers.js

@@ -6,7 +6,9 @@ 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 { seoContent } from "../datas/careers/seoContent";
+import SEO from "../components/seo";
 
 const CareersPage = () => {
     const jobs = useStaticQuery(graphql`
@@ -41,9 +43,11 @@ const CareersPage = () => {
 
     return (
         <Layout footerBoxes={FooterBoxes}>
-            <Helmet>
-                <title>Celestia - {content.title}</title>
-            </Helmet>
+            <SEO
+				title={seoContent.title}
+				description={seoContent.description}
+				image={seoContent.image}
+			/>
             <div className={'careers-page'}>
                 <main>
                     <div className={'container'}>

src/pages/community.js

@@ -6,17 +6,21 @@ 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 { seoContent } from "../datas/community/seoContent";
+import SEO from "../components/seo";
+
 const Community = () => {
 	return (
 		<Layout footerBoxes={FooterBoxes}>
-			<Helmet>
-				<title>Celestia - Community</title>
-			</Helmet>
+			<SEO
+				title={seoContent.title}
+				description={seoContent.description}
+				image={seoContent.image}
+			/>
 			<div className={"community-page"}>
 				<main>
 					<section className='hero'>
@@ -73,14 +77,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,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 (
 		<Layout footerBoxes={FooterBoxes}>
-			<Helmet>
-				<title>Celestia - Developer Portal</title>
-			</Helmet>
+			<SEO
+				title={seoContent.title}
+				description={seoContent.description}
+				image={seoContent.image}
+			/>
 			<div className={"developer-portal"}>
 				<main>
 					<section className='hero'>