Upgrade to Next 13 (#24)

* upgrades to next.js 13

* fixes typescript errors

* fixes some lint warnings

* updates node versions

.eslintrc.json

@@ -1,3 +1,6 @@
 {
-  "extends": "next/core-web-vitals"
+  "extends": "next/core-web-vitals",
+  "rules": {
+    "@next/next/no-img-element": "off"
+  }
 }

.github/workflows/build.yml

@@ -5,26 +5,25 @@ name: Node.js CI
 
 on:
   push:
-    branches: [ main ]
+    branches: [main]
   pull_request:
-    branches: [ main ]
+    branches: [main]
 
 jobs:
   build:
-
     runs-on: ubuntu-latest
 
     strategy:
       matrix:
-        node-version: [14.x, 16.x]
+        node-version: [16.x, 18.x]
 
     steps:
-    - uses: actions/checkout@v2
-    - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v2
-      with:
-        node-version: ${{ matrix.node-version }}
-        cache: 'npm'
-    - run: npm i
-    - run: npm run lint
-    - run: npm run build
+      - uses: actions/checkout@v2
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v2
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: "npm"
+      - run: npm i
+      - run: npm run lint
+      - run: npm run build

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" passHref>
+        <Logo />
       </Link>
     </div>
   );

components/gist-document/gist-document.tsx

@@ -22,7 +22,7 @@ export default function GistDocument({
   const filenames = Object.keys(files);
   const markdownFile = findMarkdownFile(filenames);
 
-  if (!markdownFile) return <UnsupportedGist />;
+  if (!markdownFile || !gistData) return <UnsupportedGist />;
 
   const { content } = files[markdownFile];
 

components/link/link-with-avatar.tsx

@@ -1,3 +1,4 @@
+import Image from "next/image";
 import Link, { LinkProps } from "./link";
 
 interface LinkWithAvatarProps extends LinkProps {
@@ -10,19 +11,22 @@ 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}
     >
       <img
         src={avatarUrl}
         alt={alt}
-        className="w-[28px] h-[28px] rounded-full mr-2"
+        width={28}
+        height={28}
+        className="rounded-full mr-2"
       />
       {children}
     </Link>

components/link/link.tsx

@@ -1,9 +1,12 @@
+import type { Url } from "next/dist/shared/lib/router/router";
 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";
-}
+  href?: Url;
+} & Omit<NextLinkProps, "href"> &
+  AnchorHTMLAttributes<HTMLAnchorElement>;
 
 const variantClasses = {
   normal: "text-sky-600 no-underline hover:underline",
@@ -15,18 +18,18 @@ const variantClasses = {
 
 export default function Link({
   href,
-  variant,
+  variant = "unstyled",
   className,
   ...props
 }: React.PropsWithChildren<LinkProps>) {
   const baseClasses = variantClasses[variant] ?? variantClasses.normal;
+  const LinkComponent = href ? NextLink : "a";
 
   return (
-    <NextLink href={href}>
-      <a
-        {...props}
-        className={`${baseClasses}${className ? ` ${className}` : ""}`}
-      />
-    </NextLink>
+    <LinkComponent
+      href={href || "#"}
+      {...props}
+      className={`${baseClasses}${className ? ` ${className}` : ""}`}
+    />
   );
 }

components/markdown/CodeBlock.tsx

@@ -30,14 +30,17 @@ export default function CodeBlock({
     );
   }
 
-  const language = className.replace("language-", "");
+  const language = className?.replace("language-", "");
   const codeToParse = String(children?.[0] || "");
+  const child = language ? (
+    <SyntaxHighlighter language={language} code={codeToParse} />
+  ) : (
+    codeToParse
+  );
 
   return (
     <code className={className}>
-      <Suspense fallback={codeToParse}>
-        <SyntaxHighlighter language={language} code={codeToParse} />
-      </Suspense>
+      <Suspense fallback={codeToParse}>{child}</Suspense>
     </code>
   );
 }

components/syntax-highlighter/syntax-highlighter.tsx

@@ -28,13 +28,15 @@ export default function SyntaxHighlighter({
   const languageConfig = languages.find((langConfig) =>
     langConfig.alias.includes(language)
   );
-  const block = useRef();
+  const block = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     let mounted = true;
 
     (async function () {
-      const languageSupport = await languageConfig.load();
+      const languageSupport = languageConfig
+        ? await languageConfig.load()
+        : null;
 
       if (block.current && mounted) {
         const extensions = [
@@ -58,10 +60,13 @@ export default function SyntaxHighlighter({
           syntaxHighlighting(defaultHighlightStyle),
           syntaxHighlighting(highlightStyle),
           highlightSpecialChars(),
-          languageSupport,
           EditorState.tabSize.of(2),
         ];
 
+        if (languageSupport) {
+          extensions.push(languageSupport);
+        }
+
         let view = new EditorView({
           doc: code.trimEnd(),
           extensions,

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.