Reintegrate GraphQL (#23)

* Use GraphQL for site metadata incl version

* Explicit props for passthrough components

7 files changed, 69 insertions, 17 deletions

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>
     </>
   );
 }
diff --git a/src/hooks/SiteMetadata.ts b/src/hooks/SiteMetadata.ts
new file mode 100644
index 0000000..889f42b
--- /dev/null
+++ b/src/hooks/SiteMetadata.ts
@@ -0,0 +1,21 @@
+import { useStaticQuery, graphql } from "gatsby";
+
+type SiteMetadata = NonNullable<
+  NonNullable<Queries.getSiteMetadataQuery["site"]>["siteMetadata"]
+>;
+
+export const useSiteMetadata = (): SiteMetadata => {
+  const { site } = useStaticQuery<Queries.getSiteMetadataQuery>(graphql`
+    query getSiteMetadata {
+      site {
+        siteMetadata {
+          author
+          description
+          title
+        }
+      }
+    }
+  `);
+
+  return site?.siteMetadata ?? ({} as SiteMetadata);
+};
diff --git a/src/hooks/SiteVersion.ts b/src/hooks/SiteVersion.ts
new file mode 100644
index 0000000..6726a3c
--- /dev/null
+++ b/src/hooks/SiteVersion.ts
@@ -0,0 +1,19 @@
+import { useStaticQuery, graphql } from "gatsby";
+
+type SiteVersion = NonNullable<
+  NonNullable<Queries.getSiteVersionQuery["site"]>["siteMetadata"]
+>["version"];
+
+export const useSiteVersion = (): SiteVersion => {
+  const { site } = useStaticQuery<Queries.getSiteVersionQuery>(graphql`
+    query getSiteVersion {
+      site {
+        siteMetadata {
+          version
+        }
+      }
+    }
+  `);
+
+  return site?.siteMetadata?.version ?? "0";
+};
diff --git a/src/hooks/index.ts b/src/hooks/index.ts
new file mode 100644
index 0000000..1250d57
--- /dev/null
+++ b/src/hooks/index.ts
@@ -0,0 +1,4 @@
+import { useSiteMetadata } from "./SiteMetadata";
+import { useSiteVersion } from "./SiteVersion";
+
+export { useSiteMetadata, useSiteVersion };
diff --git a/src/styles/index.ts b/src/styles/index.ts
index 8eee62a..978271a 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -4,4 +4,6 @@ import BlockHeader from "./BlockHeader";
 import Content from "./Content";
 import Footer from "./Footer";
 
-export { BlockAnchor, BlockBody, BlockHeader, Content, Footer };
+type Theme = Record<string, never>;
+
+export { BlockAnchor, BlockBody, BlockHeader, Content, Footer, Theme };