Merge pull request #737 from mbifulco/feat/more-typescript

Feat/more-typescript

.vscode/settings.json

@@ -3,5 +3,6 @@
   "editor.formatOnType": true,
   "debug.node.autoAttach": "off",
   "cSpell.words": ["chakra", "convertkit", "deduped", "liquidjs", "Webmention"],
-  "dotenv.enableAutocloaking": false
+  "dotenv.enableAutocloaking": false,
+  "typescript.tsdk": "node_modules/typescript/lib"
 }

fathom.d.ts

@@ -0,0 +1,3 @@
+declare namespace fathom {
+  declare function trackGoal(id: string, cents: number);
+}

next.config.js

@@ -2,6 +2,10 @@ const withBundleAnalyzer = require('@next/bundle-analyzer')({
   enabled: process.env.ANALYZE === 'true',
 });
 
+/**
+ * @type {import('next').NextConfig}
+ **/
+
 const config = {
   pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx'],
   images: {

package.json

@@ -17,51 +17,54 @@
   },
   "dependencies": {
     "@chakra-ui/react": "^2.7.1",
-    "@cloudinary/url-gen": "^1.10.2",
+    "@cloudinary/url-gen": "^1.12.1",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
-    "@mdx-js/loader": "^2.3.0",
-    "@mdx-js/mdx": "^2.3.0",
-    "@mdx-js/react": "^2.3.0",
-    "@next/bundle-analyzer": "^13.5.6",
-    "@next/mdx": "^13.5.6",
-    "airtable": "^0.12.1",
+    "@mdx-js/loader": "^3.0.0",
+    "@mdx-js/mdx": "^3.0.0",
+    "@mdx-js/react": "^3.0.0",
+    "@next/bundle-analyzer": "^14.0.1",
+    "@next/mdx": "^14.0.1",
+    "@types/mdx": "^2.0.10",
+    "@types/semver": "^7.5.4",
+    "airtable": "^0.12.2",
     "autoprefixer": "^10.4.16",
     "clsx": "^2.0.0",
     "date-fns": "^2.30.0",
-    "fathom-client": "^3.5.0",
+    "fathom-client": "^3.6.0",
     "feed": "^4.2.2",
     "framer-motion": "^10.12.18",
     "gray-matter": "^4.0.3",
-    "next": "^13.5.6",
+    "next": "^14.0.1",
+    "next-cloudinary": "^5.3.0",
     "next-mdx-remote": "4.2.0",
     "pluralize": "^8.0.0",
     "postcss": "^8.4.31",
-    "prism-react-renderer": "^2.0.6",
+    "prism-react-renderer": "^2.1.0",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-icons": "^4.10.1",
-    "rehype-autolink-headings": "^6.1.1",
+    "react-icons": "^4.11.0",
+    "rehype-autolink-headings": "^7.0.0",
     "rehype-img-size": "^1.0.1",
-    "rehype-slug": "^5.1.0",
-    "remark": "^14.0.3",
-    "remark-html": "^15.0.2",
-    "sass": "^1.64.1",
-    "sharp": "^0.32.4",
-    "swr": "^2.2.0"
+    "rehype-slug": "^6.0.0",
+    "remark": "^15.0.1",
+    "remark-html": "^16.0.1",
+    "sass": "^1.69.5",
+    "sharp": "^0.32.6",
+    "swr": "^2.2.4"
   },
   "devDependencies": {
-    "@next/eslint-plugin-next": "^13.5.6",
-    "@typescript-eslint/parser": "^6.2.0",
-    "eslint": "8.45.0",
-    "eslint-config-next": "^13.5.6",
-    "eslint-config-prettier": "^8.8.0",
+    "@next/eslint-plugin-next": "^14.0.1",
+    "@typescript-eslint/parser": "^6.10.0",
+    "eslint": "8.53.0",
+    "eslint-config-next": "^14.0.1",
+    "eslint-config-prettier": "^9.0.0",
     "husky": ">=8.0.3",
-    "lint-staged": "^13.2.3",
-    "next-sitemap": "^4.1.8",
-    "prettier": "^3.0.0",
-    "tailwindcss": "^3.3.4",
+    "lint-staged": "^15.0.2",
+    "next-sitemap": "^4.2.3",
+    "prettier": "^3.0.3",
+    "tailwindcss": "^3.3.5",
     "typescript": "5.2.2"
   },
   "repository": {

polite-pop.d.ts

@@ -0,0 +1,4 @@
+declare function PolitePop(config: any): any;
+declare namespace PolitePop {
+  function onNewEmailSignup(callback: any): void;
+}

src/components/Heading.tsx

@@ -0,0 +1,55 @@
+import clsx from 'clsx';
+
+type HeadingProps<T extends React.ElementType> = {
+  as: T;
+  children: React.ReactNode;
+  className?: string;
+} & React.ComponentPropsWithoutRef<T>;
+
+export const Heading = <T extends React.ElementType = 'h2'>({
+  as,
+  children,
+  className,
+  ...props
+}: HeadingProps<T>) => {
+  // Use the 'as' prop to dynamically determine the component type
+  const Component = as || 'h2';
+
+  let headingClasses = '';
+  switch (Component) {
+    case 'h1':
+      headingClasses = 'text-5xl';
+      break;
+    case 'h2':
+      headingClasses = 'text-4xl';
+      break;
+    case 'h3':
+      headingClasses = 'text-3xl';
+      break;
+    case 'h4':
+      headingClasses = 'text-2xl';
+      break;
+    case 'h5':
+      headingClasses = 'text-xl';
+      break;
+    case 'h6':
+      headingClasses = 'text-lg';
+      break;
+    default:
+      headingClasses = 'text-4xl';
+      break;
+  }
+
+  return (
+    <Component
+      {...props}
+      className={clsx(
+        'font-bold text-pink-600 hover:text-pink-700 active:text-pink-900',
+        headingClasses,
+        className
+      )}
+    >
+      {children}
+    </Component>
+  );
+};

src/components/Headshot/Headshot.tsx

@@ -2,13 +2,16 @@ import Image from 'next/image';
 
 const Headshot: React.FC<{
   className?: string;
-}> = ({ className }) => (
+  priority?: boolean;
+  size?: number;
+}> = ({ size = 100, className, priority }) => (
   <Image
     src="/images/mike-headshot-square.png"
-    height={100}
-    width={100}
+    height={size}
+    width={size}
     alt="Mike Bifulco headshot"
     className={`headshot ${className}`}
+    priority={priority}
   />
 );
 

src/components/Image/Image.tsx

@@ -1,45 +1,38 @@
-import { Image as Img } from '@chakra-ui/react';
-
-import { getCloudinaryImageUrl } from '../../utils/images';
+import { CldImage } from 'next-cloudinary';
 
 type ImageProps = {
-  caption?: string;
+  caption?: React.ReactNode;
   publicId?: string;
   transformations?: Array<string>;
-  width?: string | number;
-  height?: string | number;
+  width?: number;
+  height?: number;
   alt?: string;
   loading?: 'lazy' | 'eager';
   className?: string;
+  priority?: boolean;
 };
 
 const Image: React.FC<ImageProps> = ({
   alt,
   caption,
   className,
-  height,
+  height = 630,
   loading = 'lazy',
   publicId,
   transformations,
-  width,
+  width = 1200,
   ...rest
 }) => {
-  const url = getCloudinaryImageUrl(publicId);
-
   return (
-    <figure>
-      <Img
+    <figure className="-mx-1 sm:mx-0">
+      <CldImage
         height={height}
         width={width}
-        // we also have changed `data` to `url` to better describe what `generateUrl`
-        // gives us back and makes more sense to pass to `src`
-        htmlHeight={height}
-        htmlWidth={width}
-        src={url}
-        alt={alt || caption}
-        // eslint-disable-next-line react/jsx-props-no-spreading
+        src={publicId}
+        alt={alt}
         loading={loading}
         className={className}
+        // eslint-disable-next-line react/jsx-props-no-spreading
         {...rest}
       />
       <figcaption>{caption}</figcaption>