Convert remaining modules to Typescript

gatsby-node.js

@@ -14,27 +14,27 @@ exports.createPages = async ({ graphql, actions }) => {
   const definePageTpl = uid => {
     switch (uid) {
       case "contact":
-        return path.resolve("lib/ui/templates/ContactTpl.js");
+        return path.resolve("lib/ui/templates/ContactTpl.tsx");
       case "eotm":
-        return path.resolve("lib/ui/templates/EmojiTpl.js");
+        return path.resolve("lib/ui/templates/EmojiTpl.tsx");
       case "about":
         return path.resolve("lib/ui/templates/AboutTpl.tsx");
       case "home":
-        return path.resolve("lib/ui/templates/HomeTpl.js");
+        return path.resolve("lib/ui/templates/HomeTpl.tsx");
       case "people":
-        return path.resolve("lib/ui/templates/PeopleTpl.js");
+        return path.resolve("lib/ui/templates/PeopleTpl.tsx");
       case "media":
-        return path.resolve("lib/ui/templates/MediaTpl.js");
+        return path.resolve("lib/ui/templates/MediaTpl.tsx");
       case "srslanding":
-        return path.resolve("lib/ui/templates/LandingTpl.js");
+        return path.resolve("lib/ui/templates/LandingTpl.tsx");
       case "biflanding":
-        return path.resolve("lib/ui/templates/LandingTpl.js");
+        return path.resolve("lib/ui/templates/LandingTpl.tsx");
       case "blog":
-        return path.resolve("lib/ui/templates/BlogListingTpl.js");
+        return path.resolve("lib/ui/templates/BlogListingTpl.tsx");
       case "faq":
-        return path.resolve("lib/ui/templates/FAQListingTpl.js");
+        return path.resolve("lib/ui/templates/FAQListingTpl.tsx");
       case "projects":
-        return path.resolve("lib/ui/templates/ProjectListingTpl.js");
+        return path.resolve("lib/ui/templates/ProjectListingTpl.tsx");
       default:
         return null;
     }
@@ -99,7 +99,7 @@ exports.createPages = async ({ graphql, actions }) => {
     },
     {
       src: works,
-      component: path.resolve("lib/ui/templates/ProjectItemTpl.js"),
+      component: path.resolve("lib/ui/templates/ProjectItemTpl.tsx"),
       prefix: "projects"
     }
   ];

lib/index.d.ts

@@ -1,6 +1,6 @@
-declare module '*.svg' {
-  const content: string
-  export default content
+declare module "*.svg" {
+  const content: string;
+  export default content;
 }
 
 declare module "*.png" {
@@ -12,3 +12,11 @@ declare module "*.ico" {
   const content: string;
   export default content;
 }
+
+type PersonNode =
+  | Queries.PeopleTplQuery["overlords"]["edges"][0]["node"]
+  | Queries.PeopleTplQuery["members"]["edges"][0]["node"]
+  | Queries.PeopleTplQuery["accomplices"]["edges"][0]["node"];
+
+type ProjectList = Queries.ProjectsTplQuery["projects"]["edges"];
+type ProjectNode = ProjectList[0]["node"];

lib/ui/components/tiles/Tile.tsx

@@ -7,7 +7,7 @@ import { SharedHexConsumer } from "ui/contexts";
 import { whiteThm } from "ui/themes";
 
 interface ElementProps {
-  readonly $space: SpaceValue;
+  readonly $space?: SpaceValue;
 }
 
 const Element = styled.div<ElementProps>`
@@ -35,7 +35,7 @@ const Element = styled.div<ElementProps>`
 interface TileProps<C extends React.ElementType>
   extends React.PropsWithChildren {
   as?: C;
-  space: SpaceValue;
+  space?: SpaceValue;
   // TODO: add `to` and `href` props, but only when `as` is Link or `a`
 }
 

lib/ui/partials/Layout.tsx

@@ -97,7 +97,11 @@ const GlobalStyle = createGlobalStyle`
   }
 `;
 
-const Layout: React.FC<PageProps> = ({ children, location }) => {
+interface LayoutProps extends React.PropsWithChildren {
+  location: PageProps["location"]
+}
+
+const Layout: React.FC<LayoutProps> = ({ children, location }) => {
   const [hasMobileMenu, setMobileMenu] = useState(false);
 
   // get random bifhex

lib/ui/templates/BlogListingTpl.js → lib/ui/templates/BlogListingTpl.tsx

@@ -1,6 +1,5 @@
-import { graphql, Link } from "gatsby";
-import { object, shape } from "prop-types";
-import React, { Component } from "react";
+import React from "react";
+import { graphql, Link, type PageProps } from "gatsby";
 import { GatsbyImage } from "gatsby-plugin-image";
 import styled from "styled-components";
 
@@ -72,33 +71,34 @@ const PostFt = styled.div`
   }
 `;
 
-export default class BlogListingTpl extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {};
-  }
+const BlogListingTpl = (props: PageProps<Queries.BlogTplQuery>) => {
+  const { posts } = props.data;
+  const { frontmatter } = props.data.markdownRemark ?? {};
 
-  render() {
-    const { posts } = this.props.data;
-    const { frontmatter } = this.props.data.markdownRemark;
-    return <>
-      <Helmet {...this.props} title={frontmatter.title} />
-      <Layout {...this.props}>
+  return (
+    <>
+      <Helmet {...props} title={frontmatter?.title ?? ""} />
+      <Layout {...props}>
         <Header>
-          <h1 className="hero">{frontmatter.heading}</h1>
-          <p className="para">{frontmatter.subheading}</p>
+          <h1 className="hero">{frontmatter?.heading}</h1>
+          <p className="para">{frontmatter?.subheading}</p>
         </Header>
         <Body>
           <PostList>
             {posts.edges.map(({ node }) => {
               const { timeToRead } = node;
-              const { cover, date, summary, title, uid } = node.frontmatter;
+              const { cover, date, summary, title, uid } =
+                node.frontmatter ?? {};
+
               return (
                 <Post key={uid} as="li">
                   <Tile to={`/tldr/${uid}`} as={Link}>
-                    {cover ? (
+                    {cover?.childImageSharp?.gatsbyImageData ? (
                       <PostCover>
-                        <GatsbyImage image={cover.childImageSharp.gatsbyImageData} alt={title} />
+                        <GatsbyImage
+                          image={cover.childImageSharp.gatsbyImageData}
+                          alt={title ?? ""}
+                        />
                       </PostCover>
                     ) : null}
                     <PostHd>
@@ -121,52 +121,49 @@ export default class BlogListingTpl extends Component {
           </PostList>
         </Body>
       </Layout>
-    </>;
-  }
-}
-
-BlogListingTpl.propTypes = {
-  data: shape({
-    markdownRemark: object.isRequired,
-    posts: object.isRequired
-  }).isRequired
+    </>
+  );
 };
 
-export const pageQuery = graphql`query BlogTplQuery($uid: String!) {
-  markdownRemark(frontmatter: {uid: {eq: $uid}}) {
-    html
-    frontmatter {
-      uid
-      title
-      heading
-      subheading
+export default BlogListingTpl;
+
+export const pageQuery = graphql`
+  query BlogTpl($uid: String!) {
+    markdownRemark(frontmatter: { uid: { eq: $uid } }) {
+      html
+      frontmatter {
+        uid
+        title
+        heading
+        subheading
+      }
     }
-  }
-  posts: allMarkdownRemark(
-    filter: {fileAbsolutePath: {regex: "/pages/tldr/.*post.md/"}}
-    sort: {frontmatter: {date: DESC}}
-  ) {
-    edges {
-      node {
-        id
-        timeToRead
-        frontmatter {
-          uid
-          cover {
-            childImageSharp {
-              gatsbyImageData(
-                height: 240
-                quality: 100
-                placeholder: DOMINANT_COLOR
-                layout: FULL_WIDTH
-              )
+    posts: allMarkdownRemark(
+      filter: { fileAbsolutePath: { regex: "/pages/tldr/.*post.md/" } }
+      sort: { frontmatter: { date: DESC } }
+    ) {
+      edges {
+        node {
+          id
+          timeToRead
+          frontmatter {
+            uid
+            cover {
+              childImageSharp {
+                gatsbyImageData(
+                  height: 240
+                  quality: 100
+                  placeholder: DOMINANT_COLOR
+                  layout: FULL_WIDTH
+                )
+              }
             }
+            date(formatString: "MMMM D, YYYY")
+            summary
+            title
           }
-          date(formatString: "MMMM D, YYYY")
-          summary
-          title
         }
       }
     }
   }
-}`;
+`;