fix(templates): add MetaHeader to all template components

issue #89
sabertazimi · Aug 8, 2021 · 2351581 · 2351581
1 parent 430f67d
commit 2351581
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 39 deletions.
diff --git a/src/templates/About.tsx b/src/templates/About.tsx
@@ -1,4 +1,4 @@
-import { GithubCard } from '@components';
+import { GithubCard, MetaHeader } from '@components';
 import { useSiteMetadata } from '@hooks';
 import { Layout } from '@layouts';
 import { GitHubType } from '@types';
@@ -12,13 +12,16 @@ interface AboutPageProps extends PageProps {
 }
 
 const About = ({ pageContext: { github } }: AboutPageProps): JSX.Element => {
-  const { email } = useSiteMetadata();
+  const { email, siteUrl, title } = useSiteMetadata();
   const { profile, repos } = github;
 
   return (
-    <Layout banner="About Me">
-      <GithubCard email={email} profile={profile} repos={repos} />
-    </Layout>
+    <div>
+      <MetaHeader siteUrl={siteUrl} title={title} />
+      <Layout banner="About Me">
+        <GithubCard email={email} profile={profile} repos={repos} />
+      </Layout>
+    </div>
   );
 };
 

diff --git a/src/templates/Books.tsx b/src/templates/Books.tsx
@@ -1,15 +1,18 @@
-import { BooksGrid } from '@components';
+import { BooksGrid, MetaHeader } from '@components';
 import { useSiteMetadata } from '@hooks';
 import { Layout } from '@layouts';
 import React from 'react';
 
 const Books = (): JSX.Element => {
-  const { bookList } = useSiteMetadata();
+  const { siteUrl, title, bookList } = useSiteMetadata();
 
   return (
-    <Layout banner="Books">
-      <BooksGrid bookList={bookList} />
-    </Layout>
+    <div>
+      <MetaHeader siteUrl={siteUrl} title={title} />
+      <Layout banner="Books">
+        <BooksGrid bookList={bookList} />
+      </Layout>
+    </div>
   );
 };
 

diff --git a/src/templates/Home.tsx b/src/templates/Home.tsx
@@ -1,22 +1,15 @@
-import { ErrorBoundary, LandingNav, TypingTitle } from '@components';
+import { LandingNav, MetaHeader, TypingTitle } from '@components';
 import { Routes } from '@config';
 import { useSiteMetadata } from '@hooks';
 import { LandingLayout } from '@layouts';
 import React from 'react';
-import { Helmet } from 'react-helmet';
 
 const Home = (): JSX.Element => {
   const { siteUrl, title, landingTitles } = useSiteMetadata();
 
   return (
     <div>
-      <ErrorBoundary>
-        <Helmet key={siteUrl}>
-          <meta charSet="utf-8" />
-          <title>{title}</title>
-          <link rel="canonical" href={siteUrl} />
-        </Helmet>
-      </ErrorBoundary>
+      <MetaHeader siteUrl={siteUrl} title={title} />
       <LandingLayout>
         <LandingNav routes={Routes} />
         <TypingTitle titles={landingTitles} />

diff --git a/src/templates/Post.tsx b/src/templates/Post.tsx
@@ -1,4 +1,4 @@
-import { Article } from '@components';
+import { Article, MetaHeader } from '@components';
 import { useSiteMetadata } from '@hooks';
 import { PostLayout } from '@layouts';
 import { useLocation } from '@reach/router';
@@ -13,13 +13,16 @@ interface PostPageProps extends PageProps {
 }
 
 const Post = ({ pageContext: { post } }: PostPageProps): JSX.Element => {
-  const { disqusUrl } = useSiteMetadata();
+  const { disqusUrl, siteUrl, title } = useSiteMetadata();
   const { href: socialUrl } = useLocation();
 
   return (
-    <PostLayout>
-      <Article post={post} commentUrl={disqusUrl} socialUrl={socialUrl} />
-    </PostLayout>
+    <div>
+      <MetaHeader siteUrl={siteUrl} title={title} />
+      <PostLayout>
+        <Article post={post} commentUrl={disqusUrl} socialUrl={socialUrl} />
+      </PostLayout>
+    </div>
   );
 };
 

diff --git a/src/templates/Posts.tsx b/src/templates/Posts.tsx
@@ -1,15 +1,19 @@
-import { PostsGrid } from '@components';
-import { usePostsMetadata } from '@hooks';
+import { MetaHeader, PostsGrid } from '@components';
+import { usePostsMetadata, useSiteMetadata } from '@hooks';
 import { Layout } from '@layouts';
 import React from 'react';
 
 const Posts = (): JSX.Element => {
+  const { siteUrl, title } = useSiteMetadata();
   const { posts } = usePostsMetadata();
 
   return (
-    <Layout banner="Posts">
-      <PostsGrid posts={posts} />
-    </Layout>
+    <div>
+      <MetaHeader siteUrl={siteUrl} title={title} />
+      <Layout banner="Posts">
+        <PostsGrid posts={posts} />
+      </Layout>
+    </div>
   );
 };
 

diff --git a/src/templates/Tags.tsx b/src/templates/Tags.tsx
@@ -1,5 +1,5 @@
-import { PostsList, TagsCloud } from '@components';
-import { usePostsMetadata } from '@hooks';
+import { MetaHeader, PostsList, TagsCloud } from '@components';
+import { usePostsMetadata, useSiteMetadata } from '@hooks';
 import { Layout } from '@layouts';
 import { TagType } from '@types';
 import { PageProps } from 'gatsby';
@@ -12,20 +12,24 @@ interface TagsPageProps extends PageProps {
 }
 
 const Tags = ({ pageContext: { activeTag } }: TagsPageProps): JSX.Element => {
+  const { siteUrl, title } = useSiteMetadata();
   const { posts, tags } = usePostsMetadata();
   const postsByTag = posts.filter(
     ({ tags }) => tags && tags.includes(activeTag)
   );
 
   return (
-    <Layout banner="Tags">
-      <TagsCloud tags={tags} activeTag={activeTag} />
-      {activeTag && postsByTag ? (
-        <PostsList posts={postsByTag} />
-      ) : (
-        <PostsList posts={posts} />
-      )}
-    </Layout>
+    <div>
+      <MetaHeader siteUrl={siteUrl} title={title} />
+      <Layout banner="Tags">
+        <TagsCloud tags={tags} activeTag={activeTag} />
+        {activeTag && postsByTag ? (
+          <PostsList posts={postsByTag} />
+        ) : (
+          <PostsList posts={posts} />
+        )}
+      </Layout>
+    </div>
   );
 };