add getStaticProps types

components/Footer/Footer.tsx

@@ -88,19 +88,14 @@ const Footer = ({ ...rest }: FooterProps) => {
       <Row>
         <div>
           Content{" "}
-          <PlainLink
-            href="/license/"
-            prefetch={false}
-            title="Creative Commons Attribution 4.0 International"
-            underline={false}
-          >
-            licensed under CC-BY-4.0
+          <PlainLink href="/license/" prefetch={false} title={config.license} underline={false}>
+            licensed under {config.licenseAbbr}
           </PlainLink>
           ,{" "}
           <PlainLink href="/previously/" prefetch={false} title="Previously on..." underline={false}>
-            2001
+            {config.copyrightYearStart}
           </PlainLink>{" "}
-          – {new Date(process.env.NEXT_PUBLIC_RELEASE_DATE || Date.now()).getUTCFullYear()}.
+          – {new Date(process.env.RELEASE_DATE || Date.now()).getUTCFullYear()}.
         </div>
 
         <div>

components/NotesList/NotesList.tsx

@@ -2,7 +2,7 @@ import Link from "../Link";
 import Time from "../Time";
 import { styled } from "../../lib/styles/stitches.config";
 import type { ReactElement } from "react";
-import type { NoteFrontMatter } from "../../types";
+import type { NotesByYear } from "../../types";
 
 const Section = styled("section", {
   fontSize: "1.1em",
@@ -55,9 +55,7 @@ const PostDate = styled(Time, {
 });
 
 export type NotesListProps = {
-  notesByYear: {
-    [year: string]: NoteFrontMatter[];
-  };
+  notesByYear: NotesByYear;
 };
 
 const NotesList = ({ notesByYear }: NotesListProps) => {

lib/config/constants.ts

@@ -6,4 +6,4 @@ import path from "path";
 export const NOTES_DIR = path.join(process.cwd(), "notes");
 
 // normalize the timestamp saved when building/deploying (see next.config.js) and fall back to right now:
-export const RELEASE_DATE = new Date(process.env.NEXT_PUBLIC_RELEASE_DATE || Date.now()).toISOString();
+export const RELEASE_DATE = new Date(process.env.RELEASE_DATE || Date.now()).toISOString();

lib/config/index.js

@@ -16,6 +16,10 @@ module.exports = {
   shortDescription: "Front-End Web Developer in Boston, MA",
   longDescription:
     "Hi there! I'm a frontend web developer based in Boston, Massachusetts specializing in the JAMstack, modern JavaScript frameworks, and progressive web apps.",
+  license: "Creative Commons Attribution 4.0 International",
+  licenseAbbr: "CC-BY-4.0",
+  licenseUrl: "https://creativecommons.org/licenses/by/4.0/",
+  copyrightYearStart: 2001,
   githubRepo: "jakejarvis/jarv.is",
   verifyGoogle: "qQhmLTwjNWYgQ7W42nSTq63xIrTch13X_11mmxBE9zk",
   verifyBing: "164551986DA47F7F6FC0D21A93FFFCA6",

lib/helpers/build-feed.ts

@@ -3,7 +3,7 @@ import { getAllNotes } from "./parse-notes";
 import * as config from "../config";
 import { RELEASE_DATE } from "../config/constants";
 import { favicons } from "../config/seo";
-import type { GetServerSidePropsContext, PreviewData } from "next";
+import type { GetServerSidePropsContext, GetServerSidePropsResult, PreviewData } from "next";
 import type { ParsedUrlQuery } from "querystring";
 
 export type BuildFeedOptions = {
@@ -11,12 +11,12 @@ export type BuildFeedOptions = {
 };
 
 // handles literally *everything* about building the server-side rss/atom feeds and writing the response.
-// all the page needs to do is `return buildFeed(context, { format: "rss" })` from getServerSideProps.
+// all the page needs to do is `return buildFeed(context, "rss")` from getServerSideProps.
 export const buildFeed = async (
   context: GetServerSidePropsContext<ParsedUrlQuery, PreviewData>,
   type: "rss" | "atom" | "json",
   options?: BuildFeedOptions
-): Promise<{ props: Record<string, unknown> }> => {
+): Promise<GetServerSidePropsResult<Record<string, never>>> => {
   const { res } = context;
 
   // https://github.com/jpmonette/feed#example
@@ -25,7 +25,7 @@ export const buildFeed = async (
     link: `${config.baseUrl}/`,
     title: config.siteName,
     description: config.longDescription,
-    copyright: "https://creativecommons.org/licenses/by/4.0/",
+    copyright: config.licenseUrl,
     updated: new Date(RELEASE_DATE),
     image: `${config.baseUrl}${favicons.meJpg.src}`,
     feedLinks: {

lib/helpers/parse-notes.ts

@@ -13,7 +13,10 @@ import type { NoteFrontMatter } from "../../types";
 
 export const getNoteSlugs = async (): Promise<string[]> => {
   // list all .mdx files in NOTES_DIR
-  const mdxFiles = await glob("*.mdx", { cwd: NOTES_DIR });
+  const mdxFiles = await glob("*.mdx", {
+    cwd: NOTES_DIR,
+    dot: false,
+  });
 
   // strip the .mdx extensions from filenames
   const slugs = mdxFiles.map((fileName) => fileName.replace(/\.mdx$/, ""));
@@ -51,14 +54,12 @@ export const getNoteData = async (
   };
 };
 
-// returns the front matter of ALL notes, sorted reverse chronologically
+// returns the parsed front matter of ALL notes, sorted reverse chronologically
 export const getAllNotes = async (): Promise<NoteFrontMatter[]> => {
   const slugs = await getNoteSlugs();
 
   // for each slug, query its front matter
-  const data = await pMap(slugs, async (slug) => (await getNoteData(slug)).frontMatter, {
-    stopOnError: true,
-  });
+  const data = await pMap(slugs, async (slug) => (await getNoteData(slug)).frontMatter);
 
   // sort the results by date
   data.sort((note1, note2) => (note1.date > note2.date ? -1 : 1));

next.config.js

@@ -24,8 +24,8 @@ module.exports = (phase, { defaultConfig }) => {
     trailingSlash: true,
     productionBrowserSourceMaps: true,
     env: {
-      // freeze build timestamp for when serverless pages need a "last updated" date:
-      NEXT_PUBLIC_RELEASE_DATE: new Date().toISOString(),
+      // freeze build timestamp for when server-side pages need a "last updated" date:
+      RELEASE_DATE: new Date().toISOString(),
       // check if we're running locally via `next dev`:
       IS_DEV_SERVER: phase === PHASE_DEVELOPMENT_SERVER,
       // https://nextjs.org/docs/api-reference/cli#development

pages/api/contact.ts

@@ -26,7 +26,7 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
 
     // these are both backups to client-side validations just in case someone squeezes through without them. the codes
     // are identical so they're caught in the same fashion.
-    if (!body || !body.name || !body.email || !body.message) {
+    if (!body.name || !body.email || !body.message) {
       // all fields are required
       throw new Error("USER_MISSING_DATA");
     }
@@ -63,7 +63,7 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
   }
 };
 
-const validateCaptcha = async (formResponse: unknown) => {
+const validateCaptcha = async (formResponse: unknown): Promise<unknown> => {
   const response = await fetch(HCAPTCHA_API_ENDPOINT, {
     method: "POST",
     headers: {
@@ -76,13 +76,12 @@ const validateCaptcha = async (formResponse: unknown) => {
     }),
   });
 
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const result: any = await response.json();
+  const result = await response.json();
 
-  return result.success as boolean;
+  return result.success;
 };
 
-const sendToAirtable = async (data: unknown) => {
+const sendToAirtable = async (data: unknown): Promise<boolean> => {
   const response = await fetch(`${AIRTABLE_API_ENDPOINT}${AIRTABLE_BASE}/Messages`, {
     method: "POST",
     headers: {

pages/api/playing.ts

@@ -54,7 +54,7 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
     await logServerError(error);
 
     // 500 Internal Server Error
-    return res.status(500).json({ success: false, message });
+    return res.status(500).json({ message });
   }
 };
 
@@ -75,7 +75,7 @@ const getAccessToken = async () => {
 
   const { access_token: token } = await response.json();
 
-  return token as string;
+  return token;
 };
 
 const getNowPlaying = async (token: string): Promise<Track | false> => {
@@ -120,7 +120,7 @@ const getTopTracks = async (token: string): Promise<Track[]> => {
 
   const { items } = (await response.json()) as { items: SpotifyTrackSchema[] };
 
-  const tracks: Track[] = items.map((track: SpotifyTrackSchema) => ({
+  const tracks = items.map<Track>((track) => ({
     artist: track.artists.map((artist) => artist.name).join(", "),
     title: track.name,
     album: track.album.name,

pages/feed.atom.ts

@@ -1,7 +1,7 @@
 import { buildFeed } from "../lib/helpers/build-feed";
 import type { GetServerSideProps } from "next";
 
-export const getServerSideProps: GetServerSideProps = async (context) => {
+export const getServerSideProps: GetServerSideProps<Record<string, never>> = async (context) => {
   return buildFeed(context, "atom");
 };
 

pages/feed.xml.ts

@@ -1,7 +1,7 @@
 import { buildFeed } from "../lib/helpers/build-feed";
 import type { GetServerSideProps } from "next";
 
-export const getServerSideProps: GetServerSideProps = async (context) => {
+export const getServerSideProps: GetServerSideProps<Record<string, never>> = async (context) => {
   return buildFeed(context, "rss");
 };
 

pages/notes/[slug].tsx

@@ -69,8 +69,14 @@ const Note = ({ frontMatter, source }: NoteWithSource) => {
   );
 };
 
-export const getStaticProps: GetStaticProps = async ({ params }) => {
-  const { frontMatter, source } = await compileNote((params as Pick<NoteFrontMatter, "slug">).slug);
+export const getStaticProps: GetStaticProps<NoteWithSource, Pick<NoteFrontMatter, "slug">> = async ({ params }) => {
+  if (!params || !params.slug) {
+    return {
+      notFound: true,
+    };
+  }
+
+  const { frontMatter, source } = await compileNote(params.slug);
 
   return {
     props: {

pages/notes/index.tsx

@@ -1,15 +1,21 @@
 import { NextSeo } from "next-seo";
 import Content from "../../components/Content";
-import NotesList, { NotesListProps } from "../../components/NotesList";
+import NotesList from "../../components/NotesList";
 import { getAllNotes } from "../../lib/helpers/parse-notes";
+import { authorName } from "../../lib/config";
 import type { GetStaticProps } from "next";
+import type { NotesByYear } from "../../types";
 
-const Notes = ({ notesByYear }: NotesListProps) => {
+type StaticProps = {
+  notesByYear: NotesByYear;
+};
+
+const Notes = ({ notesByYear }: StaticProps) => {
   return (
     <>
       <NextSeo
         title="Notes"
-        description="Recent posts by Jake Jarvis."
+        description={`Recent posts by ${authorName}.`}
         openGraph={{
           title: "Notes",
         }}
@@ -22,10 +28,10 @@ const Notes = ({ notesByYear }: NotesListProps) => {
   );
 };
 
-export const getStaticProps: GetStaticProps = async () => {
+export const getStaticProps: GetStaticProps<StaticProps> = async () => {
   // parse the year of each note and group them together
   const notes = await getAllNotes();
-  const notesByYear: NotesListProps["notesByYear"] = {};
+  const notesByYear: NotesByYear = {};
 
   notes.forEach((note) => {
     const year = new Date(note.date).getUTCFullYear();

pages/projects.tsx

@@ -42,7 +42,11 @@ const GitHubLogo = styled(OctocatOcticon, {
   fill: "$text",
 });
 
-const Projects = ({ repos }: { repos: Project[] }) => {
+type StaticProps = {
+  repos: Project[];
+};
+
+const Projects = ({ repos }: StaticProps) => {
   return (
     <>
       <NextSeo
@@ -71,7 +75,7 @@ const Projects = ({ repos }: { repos: Project[] }) => {
   );
 };
 
-export const getStaticProps: GetStaticProps = async () => {
+export const getStaticProps: GetStaticProps<StaticProps> = async () => {
   // don't fail the entire site build if the required API key for this page is missing
   if (typeof process.env.GH_PUBLIC_TOKEN === "undefined" || process.env.GH_PUBLIC_TOKEN === "") {
     console.warn(`ERROR: I can't fetch any GitHub projects without "GH_PUBLIC_TOKEN" set! Skipping for now...`);
@@ -130,11 +134,11 @@ export const getStaticProps: GetStaticProps = async () => {
   const repos = results.map<Project>(({ node: repo }) => ({
     name: repo.name,
     url: repo.url,
-    description: repo.description as string | undefined,
+    description: repo.description as string,
     updatedAt: repo.pushedAt,
     stars: repo.stargazerCount,
     forks: repo.forkCount,
-    language: repo.primaryLanguage as Project["language"] | undefined,
+    language: repo.primaryLanguage as Project["language"],
   }));
 
   return {

pages/site.webmanifest.ts

@@ -2,7 +2,7 @@ import * as config from "../lib/config";
 import { favicons } from "../lib/config/seo";
 import type { GetServerSideProps } from "next";
 
-export const getServerSideProps: GetServerSideProps = async (context) => {
+export const getServerSideProps: GetServerSideProps<Record<string, never>> = async (context) => {
   const manifest = {
     name: config.siteName,
     short_name: config.siteDomain,

pages/sitemap.xml.ts

@@ -4,7 +4,7 @@ import { baseUrl } from "../lib/config";
 import { RELEASE_DATE } from "../lib/config/constants";
 import type { GetServerSideProps } from "next";
 
-export const getServerSideProps: GetServerSideProps = async (context) => {
+export const getServerSideProps: GetServerSideProps<Record<string, never>> = async (context) => {
   const stream = new SitemapStream({ hostname: baseUrl });
 
   // TODO: make this not manual (serverless functions can't see filesystem at runtime)

types/note.d.ts

@@ -17,5 +17,9 @@ export type NoteWithSource = {
   frontMatter: NoteFrontMatter;
 
   // the final, compiled JSX by next-mdx-remote; see lib/helpers/parse-notes.ts
-  source: MDXRemoteSerializeResult;
+  source: MDXRemoteSerializeResult<Record<string, never>>;
+};
+
+export type NotesByYear = {
+  [year: string]: NoteFrontMatter[];
 };