Some TypeScript + reinstate reading timer on blog

gatsby-node.js

@@ -18,7 +18,7 @@ exports.createPages = async ({ graphql, actions }) => {
       case "eotm":
         return path.resolve("lib/ui/templates/EmojiTpl.js");
       case "about":
-        return path.resolve("lib/ui/templates/AboutTpl.js");
+        return path.resolve("lib/ui/templates/AboutTpl.tsx");
       case "home":
         return path.resolve("lib/ui/templates/HomeTpl.js");
       case "people":
@@ -94,7 +94,7 @@ exports.createPages = async ({ graphql, actions }) => {
     },
     {
       src: posts,
-      component: path.resolve("lib/ui/templates/BlogPostTpl.js"),
+      component: path.resolve("lib/ui/templates/BlogPostTpl.tsx"),
       prefix: "tldr"
     },
     {

lib/gatsby-types.d.ts

@@ -3083,12 +3083,12 @@ type WebPOptions = {
   readonly quality: InputMaybe<Scalars['Int']>;
 };
 
-type AboutTplQueryQueryVariables = Exact<{
+type AboutTplQueryVariables = Exact<{
   uid: Scalars['String'];
 }>;
 
 
-type AboutTplQueryQuery = { readonly markdownRemark: { readonly html: string | null, readonly frontmatter: { readonly uid: string | null, readonly title: string | null, readonly heading: string | null, readonly subheading: string | null } | null } | null };
+type AboutTplQuery = { readonly markdownRemark: { readonly html: string | null, readonly frontmatter: { readonly uid: string | null, readonly title: string | null, readonly heading: string | null, readonly subheading: string | null } | null } | null };
 
 type BlogPostsByUIDQueryVariables = Exact<{
   uid: Scalars['String'];

lib/ui/components/tiles/Tile.tsx

@@ -22,7 +22,7 @@ const Element = styled.div<ElementProps>`
     color: ${({ theme }) => theme.titleColor};
   }
   ${({ onClick, href, theme, to }) =>
-    (onClick || href || to)
+    onClick || href || to
       ? `
     transition: box-shadow ${time.s}, transform ${time.s};
     &:hover {
@@ -32,18 +32,26 @@ const Element = styled.div<ElementProps>`
       : ``};
 `;
 
-interface TileProps<C extends React.ElementType> {
-  as?: C
+interface TileProps<C extends React.ElementType>
+  extends React.PropsWithChildren {
+  as?: C;
   space: SpaceValue;
+  // TODO: add `to` and `href` props, but only when `as` is Link or `a`
 }
 
-const Tile = <C extends React.ElementType = "div">({ space, ...props }: TileProps<C>) => (
+const Tile = <C extends React.ElementType = "div">({
+  space,
+  children,
+  ...props
+}: TileProps<C>) => (
   <SharedHexConsumer>
     {({ BIFHEX }) => (
       <ThemeProvider
         theme={{ ...whiteThm, actionColor: BIFHEX, decor: BIFHEX }}
       >
-        <Element $space={space} {...props} />
+        <Element $space={space} {...props}>
+          {children}
+        </Element>
       </ThemeProvider>
     )}
   </SharedHexConsumer>

lib/ui/partials/Body.tsx

@@ -9,7 +9,11 @@ const BodyEl = styled.section`
   color: ${({ theme }) => theme.color};
 `;
 
-const Body: React.FC<React.PropsWithChildren> = ({ children, ...props }) => (
+interface BodyProps extends React.PropsWithChildren {
+  style?: React.CSSProperties;
+}
+
+const Body: React.FC<BodyProps> = ({ children, style }) => (
   <SharedHexConsumer>
     {({ BIFHEX }) => (
       <ThemeProvider
@@ -20,7 +24,7 @@ const Body: React.FC<React.PropsWithChildren> = ({ children, ...props }) => (
           decor: BIFHEX,
         }}
       >
-        <BodyEl {...props}>{children}</BodyEl>
+        <BodyEl style={style}>{children}</BodyEl>
       </ThemeProvider>
     )}
   </SharedHexConsumer>

lib/ui/templates/AboutTpl.tsx

@@ -0,0 +1,48 @@
+import { graphql, type PageProps } from "gatsby";
+import React from "react";
+
+import { Copy, Tile } from "ui/components";
+import { Body, Header, Helmet, Layout } from "ui/partials";
+
+const AboutTpl = ({ data, ...props }: PageProps<Queries.AboutTplQuery>) => {
+  const { frontmatter, html } = data.markdownRemark ?? {};
+
+  return (
+    <>
+      <Helmet {...props} title={frontmatter?.title ?? ""} />
+      <Layout {...props}>
+        <Header>
+          <h1 className="hero">{frontmatter?.heading ?? ""}</h1>
+          <p className="para">{frontmatter?.subheading ?? ""}</p>
+        </Header>
+        <Body
+          style={{
+            marginLeft: "auto",
+            marginRight: "auto",
+            maxWidth: "900px",
+          }}
+        >
+          <Tile space="h">
+            <Copy dangerouslySetInnerHTML={{ __html: html ?? "" }} />
+          </Tile>
+        </Body>
+      </Layout>
+    </>
+  );
+};
+
+export default AboutTpl;
+
+export const pageQuery = graphql`
+  query AboutTpl($uid: String!) {
+    markdownRemark(frontmatter: { uid: { eq: $uid } }) {
+      html
+      frontmatter {
+        uid
+        title
+        heading
+        subheading
+      }
+    }
+  }
+`;

lib/ui/templates/BlogPostTpl.tsx

@@ -0,0 +1,95 @@
+import React, { useEffect, useState } from "react";
+import { graphql, type PageProps } from "gatsby";
+import { GatsbyImage } from "gatsby-plugin-image";
+
+import { Body, Header, Helmet, Layout } from "ui/partials";
+import { Copy, Tile } from "ui/components";
+
+const BlogPostReadTimer = () => {
+  const [readingTime, setReadingTime] = useState<number>(Math.random() * 300);
+
+  function tick() {
+    setReadingTime((previous) => previous + Math.random() * 15 - 4);
+  }
+
+  useEffect(() => {
+    let timer: number;
+    if (typeof window !== "undefined") {
+      timer = window.setInterval(tick, 3000);
+    }
+
+    return () => {
+      if (typeof window !== "undefined") {
+        window.clearInterval(timer);
+      }
+    };
+  }, []);
+
+  return <span>{readingTime.toFixed(2)}</span>;
+};
+
+const BlogPostTpl = ({
+  data,
+  ...props
+}: PageProps<Queries.BlogPostsByUIDQuery>) => {
+  const blogPost = data.markdownRemark;
+  const { frontmatter, html } = blogPost ?? {};
+  const { cover, date, title } = frontmatter ?? {};
+
+  return (
+    <>
+      <Helmet {...props} title={title ?? ""} />
+      <Layout {...props}>
+        <Header>
+          <span className="small">
+            Reading Time: <BlogPostReadTimer /> seconds
+          </span>
+          <h1 className="hero">{title}</h1>
+          <span className="small">{date}</span>
+        </Header>
+        <Body
+          style={{
+            marginLeft: "auto",
+            marginRight: "auto",
+            maxWidth: "900px",
+          }}
+        >
+          {cover?.childImageSharp?.gatsbyImageData ? (
+            <GatsbyImage
+              image={cover.childImageSharp.gatsbyImageData}
+              alt={title ?? ""}
+            />
+          ) : null}
+          <Tile space="h">
+            <Copy dangerouslySetInnerHTML={{ __html: html ?? "" }} />
+          </Tile>
+        </Body>
+      </Layout>
+    </>
+  );
+};
+
+export default BlogPostTpl;
+
+export const pageQuery = graphql`
+  query BlogPostsByUID($uid: String!) {
+    markdownRemark(frontmatter: { uid: { eq: $uid } }) {
+      html
+      frontmatter {
+        uid
+        date(formatString: "MMMM DD, YYYY")
+        title
+        cover {
+          childImageSharp {
+            gatsbyImageData(
+              width: 900
+              quality: 90
+              placeholder: DOMINANT_COLOR
+              layout: CONSTRAINED
+            )
+          }
+        }
+      }
+    }
+  }
+`;