upgrades to next.js 13

components/footer.tsx

@@ -4,10 +4,8 @@ import Logo from "./logo";
 export default function Footer() {
   return (
     <div className="mx-4 my-10 flex items-center justify-center">
-      <Link href="/">
-        <a aria-label="Gistdoc" className="h-8 w-8">
-          <Logo />
-        </a>
+      <Link href="/" aria-label="Gistdoc" className="h-8 w-8">
+        <Logo />
       </Link>
     </div>
   );

components/link/link-with-avatar.tsx

@@ -10,12 +10,13 @@ export default function LinkWithAvatar({
   alt,
   href,
   children,
+  variant = "subtle",
   ...rest
 }: LinkWithAvatarProps) {
   return (
     <Link
       href={href}
-      variant="subtle"
+      variant={variant}
       className="flex items-center text-gray-500"
       {...rest}
     >

components/link/link.tsx

@@ -1,9 +1,10 @@
 import NextLink, { LinkProps as NextLinkProps } from "next/link";
 import { AnchorHTMLAttributes } from "react";
 
-export interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+export type LinkProps = {
   variant?: "subtle" | "button" | "unstyled";
-}
+} & NextLinkProps &
+  AnchorHTMLAttributes<HTMLAnchorElement>;
 
 const variantClasses = {
   normal: "text-sky-600 no-underline hover:underline",
@@ -15,18 +16,17 @@ const variantClasses = {
 
 export default function Link({
   href,
-  variant,
+  variant = "unstyled",
   className,
   ...props
 }: React.PropsWithChildren<LinkProps>) {
   const baseClasses = variantClasses[variant] ?? variantClasses.normal;
 
   return (
-    <NextLink href={href}>
-      <a
-        {...props}
-        className={`${baseClasses}${className ? ` ${className}` : ""}`}
-      />
-    </NextLink>
+    <NextLink
+      href={href}
+      {...props}
+      className={`${baseClasses}${className ? ` ${className}` : ""}`}
+    />
   );
 }

components/theme-toggle/theme-toggle.tsx

@@ -8,7 +8,7 @@ export default function ThemeToggle() {
   // This is required to prevent the animation from playing on
   // initial mount as well as update the aria-label.
   const changedRef = useRef(false);
-  const [colorScheme, setColorScheme] = useState(null);
+  const [colorScheme, setColorScheme] = useState<"dark" | "light" | null>(null);
   const handleChange = useCallback(
     (ev) => {
       const colorScheme = resolveColorScheme(ev.target.checked);
@@ -56,7 +56,7 @@ export default function ThemeToggle() {
         // It's set to auto for the first time since the user didn't
         // actually change it and we set the theme automatically based
         // on preference.
-        aria-label={hasThemeChanged ? colorScheme : "auto"}
+        aria-label={(hasThemeChanged && colorScheme) || "auto"}
         aria-live="polite"
         id="theme-toggle"
         className={`sr-only peer`}

constants.ts

@@ -0,0 +1,9 @@
+const constants = {
+  GITHUB_API_BASE_URL: "https://api.github.com",
+  GIST: {
+    HOME: "59ff2b40f69fc7f4ea2fdd6b1a044648",
+    CHANGELOG: "2ff7302367044178af3eeaee4384a4ba",
+  },
+};
+
+export default constants;

next-env.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+/// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/basic-features/typescript for more information.