From 887c24d317040ddf782d908807db67dff2c0d3ab Mon Sep 17 00:00:00 2001 From: Jake Jarvis Date: Thu, 30 Jun 2022 20:56:34 -0400 Subject: [PATCH] add `getStaticProps` types --- components/Footer/Footer.tsx | 13 ++++--------- components/NotesList/NotesList.tsx | 6 ++---- lib/config/constants.ts | 2 +- lib/config/index.js | 4 ++++ lib/helpers/build-feed.ts | 8 ++++---- lib/helpers/parse-notes.ts | 11 ++++++----- next.config.js | 4 ++-- pages/api/contact.ts | 11 +++++------ pages/api/playing.ts | 6 +++--- pages/feed.atom.ts | 2 +- pages/feed.xml.ts | 2 +- pages/notes/[slug].tsx | 10 ++++++++-- pages/notes/index.tsx | 16 +++++++++++----- pages/projects.tsx | 12 ++++++++---- pages/site.webmanifest.ts | 2 +- pages/sitemap.xml.ts | 2 +- types/note.d.ts | 6 +++++- 17 files changed, 67 insertions(+), 50 deletions(-) diff --git a/components/Footer/Footer.tsx b/components/Footer/Footer.tsx index 380a8b38..5e432b3e 100644 --- a/components/Footer/Footer.tsx +++ b/components/Footer/Footer.tsx @@ -88,19 +88,14 @@ const Footer = ({ ...rest }: FooterProps) => {
Content{" "} - - licensed under CC-BY-4.0 + + licensed under {config.licenseAbbr} ,{" "} - 2001 + {config.copyrightYearStart} {" "} - – {new Date(process.env.NEXT_PUBLIC_RELEASE_DATE || Date.now()).getUTCFullYear()}. + – {new Date(process.env.RELEASE_DATE || Date.now()).getUTCFullYear()}.
diff --git a/components/NotesList/NotesList.tsx b/components/NotesList/NotesList.tsx index 1d0f3d19..23e223cc 100644 --- a/components/NotesList/NotesList.tsx +++ b/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) => { diff --git a/lib/config/constants.ts b/lib/config/constants.ts index 7d961958..40ad1e29 100644 --- a/lib/config/constants.ts +++ b/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(); diff --git a/lib/config/index.js b/lib/config/index.js index f19ec7d1..85775658 100644 --- a/lib/config/index.js +++ b/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", diff --git a/lib/helpers/build-feed.ts b/lib/helpers/build-feed.ts index 1439d447..fdcc2848 100644 --- a/lib/helpers/build-feed.ts +++ b/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, type: "rss" | "atom" | "json", options?: BuildFeedOptions -): Promise<{ props: Record }> => { +): Promise>> => { 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: { diff --git a/lib/helpers/parse-notes.ts b/lib/helpers/parse-notes.ts index 4fa8321c..affec3e4 100644 --- a/lib/helpers/parse-notes.ts +++ b/lib/helpers/parse-notes.ts @@ -13,7 +13,10 @@ import type { NoteFrontMatter } from "../../types"; export const getNoteSlugs = async (): Promise => { // 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 => { 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)); diff --git a/next.config.js b/next.config.js index 996a7f5f..1d10a991 100644 --- a/next.config.js +++ b/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 diff --git a/pages/api/contact.ts b/pages/api/contact.ts index 91db25ee..25a4ebe8 100644 --- a/pages/api/contact.ts +++ b/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 => { 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 => { const response = await fetch(`${AIRTABLE_API_ENDPOINT}${AIRTABLE_BASE}/Messages`, { method: "POST", headers: { diff --git a/pages/api/playing.ts b/pages/api/playing.ts index f5341e34..a49f9633 100644 --- a/pages/api/playing.ts +++ b/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 => { @@ -120,7 +120,7 @@ const getTopTracks = async (token: string): Promise => { const { items } = (await response.json()) as { items: SpotifyTrackSchema[] }; - const tracks: Track[] = items.map((track: SpotifyTrackSchema) => ({ + const tracks = items.map((track) => ({ artist: track.artists.map((artist) => artist.name).join(", "), title: track.name, album: track.album.name, diff --git a/pages/feed.atom.ts b/pages/feed.atom.ts index cb8701bd..6dfbeb67 100644 --- a/pages/feed.atom.ts +++ b/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> = async (context) => { return buildFeed(context, "atom"); }; diff --git a/pages/feed.xml.ts b/pages/feed.xml.ts index 63af3d5c..d1ed671b 100644 --- a/pages/feed.xml.ts +++ b/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> = async (context) => { return buildFeed(context, "rss"); }; diff --git a/pages/notes/[slug].tsx b/pages/notes/[slug].tsx index feb5ec05..e33dd8d2 100644 --- a/pages/notes/[slug].tsx +++ b/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).slug); +export const getStaticProps: GetStaticProps> = async ({ params }) => { + if (!params || !params.slug) { + return { + notFound: true, + }; + } + + const { frontMatter, source } = await compileNote(params.slug); return { props: { diff --git a/pages/notes/index.tsx b/pages/notes/index.tsx index e48177af..09f3e2d4 100644 --- a/pages/notes/index.tsx +++ b/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 ( <> { ); }; -export const getStaticProps: GetStaticProps = async () => { +export const getStaticProps: GetStaticProps = 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(); diff --git a/pages/projects.tsx b/pages/projects.tsx index bd794438..e16a493c 100644 --- a/pages/projects.tsx +++ b/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 ( <> { ); }; -export const getStaticProps: GetStaticProps = async () => { +export const getStaticProps: GetStaticProps = 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(({ 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 { diff --git a/pages/site.webmanifest.ts b/pages/site.webmanifest.ts index 28172f4c..e4fa4c0e 100644 --- a/pages/site.webmanifest.ts +++ b/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> = async (context) => { const manifest = { name: config.siteName, short_name: config.siteDomain, diff --git a/pages/sitemap.xml.ts b/pages/sitemap.xml.ts index 7771c7b3..f88e6f18 100644 --- a/pages/sitemap.xml.ts +++ b/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> = async (context) => { const stream = new SitemapStream({ hostname: baseUrl }); // TODO: make this not manual (serverless functions can't see filesystem at runtime) diff --git a/types/note.d.ts b/types/note.d.ts index b41688ee..03348eb3 100644 --- a/types/note.d.ts +++ b/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>; +}; + +export type NotesByYear = { + [year: string]: NoteFrontMatter[]; };