Turn remaining files into TypeScript source (#758)

Author: junlarsen

components/content.tsx

@@ -1,4 +1,4 @@
-import Menu from "../components/menu";
+import Menu from "./menu";
 import { DiscordIcon, GitHubIcon } from "./icons";
 import React, { useEffect, useMemo, useRef, useState } from "react";
 import Link from "next/link";

components/menu.jsx renamed to components/menu.tsx

@@ -1,6 +1,5 @@
 import { Fragment, useCallback, useState } from "react";
 import classnames from "classnames";
-import Link from "next/link";
 
 const monthNames = [
   "January",
@@ -130,7 +129,8 @@ function Level2({ href, menu }) {
   return <ul>{items}</ul>;
 }
 
-function pagesFor(menu) {
+// TODO: Type the menu hierarchy
+function pagesFor(menu: Record<PropertyKey, any>) {
   return Object.entries(menu).map(([, entry]) => {
     if (entry.page) {
       return {

lib/api.js renamed to lib/api.ts

@@ -2,14 +2,15 @@ import fs from "fs";
 import glob from "glob";
 import path from "path";
 import matter from "gray-matter";
-import util from "util";
 
-import { toHTML } from "./markdown.js";
+import { toHTML } from "./markdown";
 
 const contentDir = path.join(process.cwd(), "content").replace(/\\/g, "/");
 
 // Merge app level props in with page props
-export function withAppProps(props = { props: {} }) {
+export function withAppProps(
+  props: { props: Record<PropertyKey, unknown> } = { props: {} }
+) {
   const blog = getLastBlog();
   delete blog.body;
   props.props.app = {
@@ -64,7 +65,6 @@ export async function getProps(menu, slug) {
   const page = loadPage(`${slug}`);
   page.body = await toHTML(page.body);
 
-  const sectionTitle = menu[root].title;
   const normalized = [
     {
       key: root,
@@ -86,31 +86,39 @@ export async function getProps(menu, slug) {
 function setPrevNext(page, menu) {
   let didMatch = false;
 
-  eachPage(menu, (p, prev) => {
-    if (p.href == page.href) {
-      didMatch = true;
-
-      if (prev && prev.title) {
-        page.prev = {
-          title: prev.menuTitle || prev.title,
-          href: prev.href,
+  eachPage(
+    menu,
+    (p, prev) => {
+      if (p.href == page.href) {
+        didMatch = true;
+
+        if (prev && prev.title) {
+          page.prev = {
+            title: prev.menuTitle || prev.title,
+            href: prev.href,
+          };
+        }
+      } else if (didMatch) {
+        page.next = {
+          title: p.menuTitle || p.title,
+          href: p.href,
         };
-      }
-    } else if (didMatch) {
-      page.next = {
-        title: p.menuTitle || p.title,
-        href: p.href,
-      };
 
-      didMatch = false;
-    }
-  });
+        didMatch = false;
+      }
+    },
+    undefined,
+    undefined
+  );
 
   return page;
 }
 
 // Build a list of paths from the sitemap
-function collectPaths(level, prefix = "") {
+function collectPaths(
+  level: Record<string, { nested?: string[]; href?: string }>,
+  prefix = ""
+) {
   let out = [];
 
   for (const [k, v] of Object.entries(level)) {

lib/blog.js renamed to lib/blog.ts

@@ -9,10 +9,10 @@ function cachedPaths() {
   return paths;
 }
 
-export function getBlogPostsByYear({ limit } = {}) {
+export function getBlogPostsByYear(limit?: number) {
   let count = 0;
   return cachedPaths().reduce((years, post) => {
-    if (limit != null && count >= limit) {
+    if (limit !== undefined && count >= limit) {
       return years;
     }
     const date = new Date(post.date);

lib/markdown.js renamed to lib/markdown.ts

@@ -1,4 +1,3 @@
-import { stream } from "unified-stream";
 import { unified } from "unified";
 import remarkParse from "remark-parse";
 import remarkRehype from "remark-rehype";
@@ -80,11 +79,13 @@ export const toHTML = async (raw) => {
     await unified()
       .use(remarkParse)
       .use(remarkCodeRemoveSomeLines)
+      // @ts-expect-error: unified's plugin type mistakenly selects the wrong union overload
       .use(remarkRehype, { allowDangerousHtml: true })
       .use(rehypeHighlight, rehypeHighlightOptions)
       .use(rehypeRaw)
       .use(rehypeSlug)
       .use(rehyperBlockquotePlus, rehyperBlockquotePlusOptions)
+      // @ts-expect-error: unified's plugin type mistakenly selects the Array<void> union variant
       .use(rehypeStringify)
       .process(raw)
   );

lib/page.js renamed to lib/page.tsx

@@ -6,7 +6,7 @@
   "scripts": {
     "dev": "next dev",
     "build": "next build && npm run build:rss && next export",
-    "build:rss": "node ./scripts/generate-rss-feed.js",
+    "build:rss": "tsc --outDir dist --noEmit false && sed -i 's/markdown\"/markdown.js\"/g' dist/lib/api.js && node scripts/generate-rss-feed.js",
     "start": "next start",
     "fmt": "prettier --write --prose-wrap always '{components,content,pages,lib,styles}/**/*.{js,jsx,ts,tsx,scss}'",
     "fmt:check": "prettier --check --prose-wrap always '{components,content,pages,lib,styles}/**/*.{js,jsx,ts,tsx,scss}'"

package-lock.json

@@ -3,7 +3,13 @@ import Layout from "../components/layout";
 import * as blog from "../lib/blog";
 import * as api from "../lib/api";
 
-export default function Blog({ app, postsByYear }) {
+type Props = {
+  app: any;
+  // TODO: Properly type the posts
+  postsByYear: Record<number, any>;
+};
+
+export default function Blog({ app, postsByYear }: Props) {
   return (
     <Layout title={"Blog Posts"} blog={app.blog}>
       <div className="is-marginless tk-docs">
@@ -13,7 +19,7 @@ export default function Blog({ app, postsByYear }) {
               <h1 className="title">Blog Posts</h1>
               {Object.entries(postsByYear)
                 .reverse()
-                .map(([year, { key, title, nested }]) => (
+                .map(([year, { title, nested }]) => (
                   <YearPosts year={year} posts={nested} key={title} />
                 ))}
             </section>