Adds metadata for local pages

gatsby-ghost-balsa-theme/src/components/meta/WebsiteMeta.js

@@ -36,7 +36,7 @@ const WebsiteMeta = ({
     data.description ||
     config.siteDescriptionMeta ||
     settings.description;
-  title = settings.title;
+  title = title || settings.title;
 
   const jsonLd = {
     "@context": `https://schema.org/`,
@@ -93,7 +93,7 @@ const WebsiteMeta = ({
     // </>
     <>
       <Helmet htmlAttributes={{ lang: config.language || "auto" }}>
-        <title>{config.metadata.title || config.siteTitle}</title>
+        <title>{title || config.metadata.title || config.siteTitle}</title>
         <meta
           name="description"
           content={config.metadata.description || config.siteDescription}

gatsby-ghost-balsa-theme/src/pages/404.tsx

@@ -1,26 +1,31 @@
 import React from "react";
 import { Link } from "gatsby";
 import "../styles/style.css";
+import MetaData from "../components/meta/MetaData";
 
-const ErrorPage = () => {
+const ErrorPage = ({ location }) => {
   return (
-    <div className="min-h-screen w-full flex flex-col justify-center items-center ">
-      <div className="max-w-xl px-6 lg:px-12">
-        <h1 className="text-2xl font-bold">Page Not Found</h1>
-        <div className="spacer mt-3"></div>
-        <p className="text-gray-800 text-lg">
-          Looks like you've followed a broken link or entered a URL that doesn't
-          exist on this site.
-        </p>
-        <div className="spacer mt-3"></div>
-        <Link
-          className="text-primary hover:underline text-lg font-medium"
-          to="/"
-        >
-          Back to our site →
-        </Link>
+    <>
+      <MetaData location={location} />
+
+      <div className="min-h-screen w-full flex flex-col justify-center items-center ">
+        <div className="max-w-xl px-6 lg:px-12">
+          <h1 className="text-2xl font-bold">Page Not Found</h1>
+          <div className="spacer mt-3"></div>
+          <p className="text-gray-800 text-lg">
+            Looks like you've followed a broken link or entered a URL that doesn't
+            exist on this site.
+          </p>
+          <div className="spacer mt-3"></div>
+          <Link
+            className="text-primary hover:underline text-lg font-medium"
+            to="/"
+          >
+            Back to our site →
+          </Link>
+        </div>
       </div>
-    </div>
+    </>
   );
 };
 

gatsby-ghost-balsa-theme/src/pages/authors.tsx

@@ -1,17 +1,20 @@
 import React from "react";
 import Layout from "../components/Layout";
 import userAvatar from "../images/female_avatar.svg";
+import MetaData from "../components/meta/MetaData";
 import { graphql, Link } from "gatsby";
 import { AllGHostAuthorsData } from "../models/all-authors-description.model";
 import CtaMini from "../components/CtaMini";
 
 type AuthorsProps = AllGHostAuthorsData;
 
-const Authors: React.FC<AuthorsProps> = ({ data }) => {
+const Authors: React.FC<AuthorsProps> = ({ data, location }) => {
   const { allGhostAuthor } = data;
 
   return (
     <Layout>
+      <MetaData title="Authors" location={location} />
+
       <div className="spacer my-6"></div>
       <h1 className="text-4xl font-bold text-center">Authors</h1>
       <div className="spacer my-6"></div>

gatsby-ghost-balsa-theme/src/pages/contact.tsx

@@ -1,10 +1,30 @@
 import React from "react";
 import ContactForm from "../components/ContactForm";
+import MetaData from "../components/meta/MetaData";
+import { useStaticQuery, graphql } from "gatsby";
 import Layout from "../components/Layout";
 
-const Contact = () => {
+const Contact = ({ location }) => {
+  const {
+    site: {
+      siteMetadata: { contactWidget },
+    },
+  } = useStaticQuery(graphql`
+    query {
+      site {
+        siteMetadata {
+          contactWidget {
+            title
+          }
+        }
+      }
+    }
+  `);
+
   return (
     <Layout>
+      <MetaData title={contactWidget.title} location={location} />
+
       <ContactForm />
     </Layout>
   );

gatsby-ghost-balsa-theme/src/pages/tags.tsx

@@ -1,15 +1,18 @@
 import React from "react";
 import Layout from "../components/Layout";
 import CtaMini from "../components/CtaMini";
+import MetaData from "../components/meta/MetaData";
 import { graphql, Link } from "gatsby";
 import { AllTagsInfo } from "../models/all-tags-description.model";
 
 type TagsProps = AllTagsInfo;
 
-const Tags: React.FC<TagsProps> = ({ data }) => {
+const Tags: React.FC<TagsProps> = ({ data, location }) => {
   const { allGhostTag } = data;
   return (
     <Layout>
+      <MetaData title="Tags" location={location} />
+
       <div className="spacer my-6"></div>
       <h1 className="text-4xl font-bold text-center">
         {allGhostTag.edges.length > 0 ? "Tags" : "No tags available."}