fix: housekeeping

src/app/components/CodeSnippet.tsx

@@ -2,13 +2,24 @@
 
 import React, {
   Children,
-  MouseEvent,
   ReactElement,
   ReactNode,
   useState,
 } from 'react';
 import styles from './CodeSnippet.module.css';
 
+interface MarkdocFenceProps {
+  language?: string;
+  content?: string;
+  className?: string;
+}
+
+function isMarkdocElement(
+  child: ReactNode
+): child is ReactElement<MarkdocFenceProps> {
+  return React.isValidElement(child);
+}
+
 function CodeSnippetCopyButton({
   copyText,
 }: {
@@ -20,7 +31,7 @@ function CodeSnippetCopyButton({
   const [showTooltip, setShowTooltip] =
     useState<boolean>(false);
 
-  const handleCopy = (e: MouseEvent<HTMLButtonElement>) => {
+  const handleCopy = () => {
     setCopyButtonTooltip(true);
     setTimeout(() => {
       setCopyButtonTooltip(false);
@@ -129,30 +140,29 @@ export default function CodeSnippet({
     setSelectedLanguage(e.target.value);
   };
 
-  const code = Children.toArray(children)
-    .filter(
-      child =>
-        React.isValidElement(child) &&
-        child.props.className ===
-          `language-${selectedLanguage}`
-    )
-    .map(child => {
-      return child as ReactElement;
-    })[0];
+  const childrenArray = Children.toArray(children);
 
-  const snippetLanguages = Children.toArray(children).map(
-    child => {
-      if (React.isValidElement(child)) {
-        const languageClassParts =
-          child.props.className.split('-');
-        if (languageClassParts.length > 1) {
-          const language = languageClassParts[1];
-          return language;
-        }
-      }
+  const code = childrenArray.find(
+    (child): child is ReactElement<MarkdocFenceProps> => {
+      if (!isMarkdocElement(child)) return false;
+      const { language, className } = child.props;
+      return (
+        language === selectedLanguage ||
+        className === `language-${selectedLanguage}`
+      );
     }
   );
 
+  const snippetLanguages = childrenArray
+    .map(child => {
+      if (isMarkdocElement(child)) {
+        const { language, className } = child.props;
+        return language || className?.split('-')[1];
+      }
+      return undefined;
+    })
+    .filter((l): l is string => typeof l === 'string');
+
   return (
     <div className={styles.snippetContainer}>
       <div className={styles.snippetHeader}>
@@ -176,7 +186,7 @@ export default function CodeSnippet({
             </>
           ) : null}
           <CodeSnippetCopyButton
-            copyText={code.props.content}
+            copyText={code?.props.content ?? ''}
           />
         </div>
       </div>

src/app/components/SectionDropdown.tsx

@@ -1,3 +1,4 @@
+import { ChangeEvent } from 'react';
 import { useSectionContext } from '../context/section';
 import { Doc, DocsStructure } from '../types/types';
 import { toKebabCase } from '../utils/stringUtils';
@@ -9,7 +10,9 @@ export default function SectionDropdown({
   version: DocsStructure;
 }) {
   const { section, setSection } = useSectionContext();
-  const handleSelectChange = (e: any) => {
+  const handleSelectChange = (
+    e: ChangeEvent<HTMLSelectElement>
+  ) => {
     setSection(e.target.value);
     location.hash = e.target.value;
   };

src/app/context/section.tsx

@@ -7,7 +7,14 @@ import {
   useState,
 } from 'react';
 
-const SectionContext = createContext({});
+type SectionContextType = {
+  section: string;
+  setSection: (section: string) => void;
+};
+
+const SectionContext = createContext<
+  SectionContextType | undefined
+>(undefined);
 
 export const SectionContextProvider = ({
   children,
@@ -25,5 +32,12 @@ export const SectionContextProvider = ({
   );
 };
 
-export const useSectionContext: any = () =>
-  useContext(SectionContext);
+export const useSectionContext = (): SectionContextType => {
+  const context = useContext(SectionContext);
+  if (!context) {
+    throw new Error(
+      'useSectionContext must be used within SectionContextProvider'
+    );
+  }
+  return context;
+};

src/app/context/theme.tsx

@@ -7,6 +7,11 @@ import {
   useState,
 } from 'react';
 
+interface ThemeContextType {
+  theme: string;
+  setTheme: (theme: string) => void;
+}
+
 const darkTheme = {
   color: 'white',
   backgroundColor: '#05254a',
@@ -17,7 +22,9 @@ const lightTheme = {
   backgroundColor: 'white',
 };
 
-const ThemeContext = createContext({});
+const ThemeContext = createContext<
+  ThemeContextType | undefined
+>(undefined);
 
 export const ThemeContextProvider = ({
   children,
@@ -38,5 +45,12 @@ export const themes = {
   light: lightTheme,
 } as { [key: string]: { [key: string]: string } };
 
-export const useThemeContext: any = () =>
-  useContext(ThemeContext);
+export const useThemeContext = (): ThemeContextType => {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    throw new Error(
+      'useThemeContext must be used within ThemeContextProvider'
+    );
+  }
+  return context;
+};

src/app/error.tsx

@@ -9,6 +9,8 @@ export default function GlobalError({
   error: Error;
   reset: () => void;
 }) {
+  console.error(error);
+
   return (
     <div className={styles.container}>
       <h2>Something went wrong!</h2>

src/app/layout.tsx

@@ -15,11 +15,12 @@ export const metadata = {
       },
     ],
   },
-  viewport: {
-    width: 'device-width',
-    initialScale: 1,
-    maximumScale: 1,
-  },
+};
+
+export const viewport = {
+  width: 'device-width',
+  initialScale: 1,
+  maximumScale: 1,
 };
 
 export default function RootLayout({

src/app/lib/markdoc.ts

@@ -83,7 +83,7 @@ function parseMarkdown(sourcePath: string): ReactNode {
   const ast = Markdoc.parse(source);
   const content = Markdoc.transform(
     ast,
-    markDocConfig as any
+    markDocConfig as never
   );
   const children = Markdoc.renderers.react(content, React, {
     components: {