From 832794e035705e7f0a5989ce240a385e5ccebf62 Mon Sep 17 00:00:00 2001
From: Kevin Hoerr <kjhoerr@protonmail.com>
Date: Mon, 28 Nov 2022 17:37:25 -0500
Subject: Reintegrate GraphQL (#23)

* Use GraphQL for site metadata incl version

* Explicit props for passthrough components
---
 src/components/BlockLink.tsx |  9 +++++++--
 src/components/Layout.tsx    | 11 +++++++----
 src/components/SEO.tsx       | 18 ++++++++----------
 3 files changed, 22 insertions(+), 16 deletions(-)

(limited to 'src/components')

diff --git a/src/components/BlockLink.tsx b/src/components/BlockLink.tsx
index f2724e7..c0f2ad6 100644
--- a/src/components/BlockLink.tsx
+++ b/src/components/BlockLink.tsx
@@ -1,7 +1,12 @@
 import React from "react";
-import { BlockAnchor, BlockBody } from "../styles";
+import { ThemedStyledFunction } from "styled-components";
+import { BlockAnchor, BlockBody, Theme } from "../styles";
 
-const BlockLink = ({ children, ...attributes }) => {
+type BlockLinkProps = {
+  children: React.ReactNode;
+} & ThemedStyledFunction<"a", Theme>;
+
+const BlockLink = ({ children, ...attributes }: BlockLinkProps) => {
   return (
     <BlockBody theme={{ link: true }}>
       <BlockAnchor {...attributes}>{children}</BlockAnchor>
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index 7be816f..4f93fec 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -1,14 +1,17 @@
 import React from "react";
 import { IconContext } from "react-icons/lib";
 import { Content, Footer } from "../styles";
-import package_json from "../../package.json";
+import { useSiteVersion } from "../hooks";
 import { getTimestamp } from "../util/timestamp";
 
 import "../styles/main.css";
 
-const VERSION = package_json.version;
+interface LayoutProps {
+  children: React.ReactNode;
+}
 
-const Layout = ({ children }) => {
+const Layout = ({ children }: LayoutProps) => {
+  const version = useSiteVersion();
   return (
     <React.StrictMode>
       <main>
@@ -20,7 +23,7 @@ const Layout = ({ children }) => {
           <Footer>
             <span>
               &copy;2022 kjhoerr@https://submelon.dev/:
-              {getTimestamp(Number(VERSION))}
+              {getTimestamp(Number(version))}
             </span>
           </Footer>
         </IconContext.Provider>
diff --git a/src/components/SEO.tsx b/src/components/SEO.tsx
index 3049810..b13dc19 100644
--- a/src/components/SEO.tsx
+++ b/src/components/SEO.tsx
@@ -1,19 +1,17 @@
 import React from "react";
+import { useSiteMetadata } from "../hooks";
 
 export function Head(): React.ReactElement {
-  const metaDescription =
-    "The official website of Kevin Hoerr, developer of websites.";
+  const { author, description, title } = useSiteMetadata();
+
   return (
     <>
-      <meta name="twitter:description" content={metaDescription} />
-      <meta
-        name="twitter:title"
-        content="Kevin J Hoerr &lt;kjhoerr@submelon.tech&gt;"
-      />
-      <meta name="twitter:creator" content="Kevin J Hoerr" />
+      <meta name="twitter:description" content={description ?? ""} />
+      <meta name="twitter:title" content={title ?? ""} />
+      <meta name="twitter:creator" content={author ?? ""} />
       <meta name="twitter:card" content="summary" />
-      <meta name="description" content={metaDescription} />
-      <title>Kevin J Hoerr &lt;kjhoerr@submelon.tech&gt;</title>
+      <meta name="description" content={description ?? ""} />
+      <title>{title}</title>
     </>
   );
 }
-- 
cgit