refactor .js files to ES modules where possible

components/Captcha/Captcha.tsx

@@ -1,7 +1,6 @@
 import HCaptcha from "@hcaptcha/react-hcaptcha";
 import useHasMounted from "../../hooks/useHasMounted";
 import useTheme from "../../hooks/useTheme";
-import { hcaptchaSiteKey } from "../../lib/config";
 
 export type CaptchaProps = {
   size?: "normal" | "compact" | "invisible";
@@ -28,7 +27,7 @@ const Captcha = ({ size = "normal", theme, className, ...rest }: CaptchaProps) =
     <div className={className}>
       {hasMounted && (
         <HCaptcha
-          sitekey={hcaptchaSiteKey || "10000000-ffff-ffff-ffff-000000000001"}
+          sitekey={process.env.NEXT_PUBLIC_HCAPTCHA_SITE_KEY || "10000000-ffff-ffff-ffff-000000000001"}
           reCaptchaCompat={false}
           tabIndex={0}
           size={size}

components/Comments/Comments.tsx

@@ -1,7 +1,7 @@
 import Giscus from "@giscus/react";
 import useTheme from "../../hooks/useTheme";
 import { styled, theme } from "../../lib/styles/stitches.config";
-import { giscusConfig } from "../../lib/config";
+import config from "../../lib/config";
 import type { ComponentPropsWithoutRef } from "react";
 import type { GiscusProps } from "@giscus/react";
 
@@ -23,7 +23,7 @@ const Comments = ({ title, ...rest }: CommentsProps) => {
   return (
     <Wrapper {...rest}>
       <Giscus
-        {...(giscusConfig as GiscusProps)}
+        {...(config.giscusConfig as GiscusProps)}
         term={title}
         mapping="specific"
         reactionsEnabled="1"

components/ContactForm/ContactForm.tsx

@@ -174,10 +174,10 @@ const ContactForm = ({ className }: ContactFormProps) => {
       .catch((error) => {
         setSuccess(false);
 
-        if (error.message === "USER_MISSING_DATA") {
+        if (error.message === "missing_data") {
           // this should be validated client-side but it's also checked server-side just in case someone slipped past
           setFeedback("Please make sure that all fields are properly filled in.");
-        } else if (error.message === "USER_INVALID_CAPTCHA") {
+        } else if (error.message === "invalid_captcha") {
           // missing/invalid captcha
           setFeedback("Did you complete the CAPTCHA? (If you're human, that is...)");
         } else {

components/Footer/Footer.tsx

@@ -2,7 +2,7 @@ import Link from "../Link";
 import { GoHeartFill } from "react-icons/go";
 import { SiNextdotjs } from "react-icons/si";
 import { styled, theme, keyframes } from "../../lib/styles/stitches.config";
-import * as config from "../../lib/config";
+import config from "../../lib/config";
 import type { ComponentPropsWithoutRef } from "react";
 
 const Wrapper = styled("footer", {

components/PostMeta/PostMeta.tsx

@@ -5,7 +5,7 @@ import HitCounter from "../HitCounter";
 import PostTitle from "../PostTitle";
 import { FiCalendar, FiTag, FiEdit, FiEye } from "react-icons/fi";
 import { styled, theme } from "../../lib/styles/stitches.config";
-import * as config from "../../lib/config";
+import config from "../../lib/config";
 import type { PostFrontMatter } from "../../types";
 
 const Wrapper = styled("div", {

components/Selfie/Selfie.tsx

@@ -1,7 +1,7 @@
 import Link from "../Link";
 import Image from "../Image";
 import { styled, theme } from "../../lib/styles/stitches.config";
-import { authorName } from "../../lib/config";
+import config from "../../lib/config";
 import type { ComponentPropsWithoutRef } from "react";
 
 import selfieJpg from "../../public/static/images/selfie.jpg";
@@ -52,10 +52,10 @@ export type SelfieProps = Omit<ComponentPropsWithoutRef<typeof Link>, "href">;
 
 const Selfie = ({ ...rest }: SelfieProps) => {
   return (
-    <SelfieLink href="/" rel="author" title={authorName} underline={false} {...rest}>
+    <SelfieLink href="/" rel="author" title={config.authorName} underline={false} {...rest}>
       <CircleImage
         src={selfieJpg}
-        alt={`Photo of ${authorName}`}
+        alt={`Photo of ${config.authorName}`}
         width={70}
         height={70}
         quality={60}
@@ -63,7 +63,7 @@ const Selfie = ({ ...rest }: SelfieProps) => {
         inline
         priority
       />
-      <Name>{authorName}</Name>
+      <Name>{config.authorName}</Name>
     </SelfieLink>
   );
 };