Fix docs route and hash-driven MDX regressions

Author: feedthejim

src/app/[[...markdownPath]]/page.tsx

@@ -11,6 +11,7 @@ import {
   getDocsPageData,
   getDocsStaticParams,
   MissingMarkdownContentError,
+  shouldServeDocsRoute,
 } from 'utils/content';
 
 export async function generateStaticParams() {
@@ -23,6 +24,11 @@ export default async function MarkdownPage({
   params: Promise<{markdownPath?: string[]}>;
 }) {
   const {markdownPath} = await params;
+
+  if (!shouldServeDocsRoute(markdownPath)) {
+    notFound();
+  }
+
   let pageData;
 
   try {

src/components/MDX/Challenges/Challenges.tsx

@@ -125,9 +125,11 @@ export function Challenges({
   const scrollAnchorRef = useRef<HTMLDivElement>(null);
   const queuedScrollRef = useRef<undefined | QueuedScroll>(QueuedScroll.INIT);
   const [selectedIndex, setSelectedIndex] = useState(0);
+  const [hasInteracted, setHasInteracted] = useState(false);
   const hash = useLocationHash();
   const hashIndex = challenges.findIndex((challenge) => challenge.id === hash);
-  const activeIndex = hashIndex === -1 ? selectedIndex : hashIndex;
+  const activeIndex =
+    !hasInteracted && hashIndex !== -1 ? hashIndex : selectedIndex;
   const currentChallenge = challenges[activeIndex];
 
   useEffect(() => {
@@ -152,6 +154,7 @@ export function Challenges({
   }
 
   const handleChallengeChange = (index: number) => {
+    setHasInteracted(true);
     setSelectedIndex(index);
   };
 
@@ -191,7 +194,8 @@ export function Challenges({
           totalChallenges={totalChallenges}
           hasNextChallenge={activeIndex < totalChallenges - 1}
           handleClickNextChallenge={() => {
-            setSelectedIndex((index) => index + 1);
+            setHasInteracted(true);
+            setSelectedIndex(activeIndex + 1);
             queuedScrollRef.current = QueuedScroll.NEXT;
           }}
         />

src/components/MDX/ExpandableExample.tsx

@@ -39,15 +39,15 @@ function ExpandableExample({children, excerpt, type}: ExpandableExampleProps) {
   const id = children[0].props.id;
   const hash = useLocationHash();
   const [isExpanded, setIsExpanded] = useState(false);
-  const autoExpanded = hash === id;
+  const [isAutoExpandedDismissed, setIsAutoExpandedDismissed] = useState(false);
+  const autoExpanded = hash === id && !isAutoExpandedDismissed;
+  const isOpen = isExpanded || autoExpanded;
 
   return (
     <details
-      open={isExpanded || autoExpanded}
+      open={isOpen}
       onToggle={(e: any) => {
-        if (!autoExpanded) {
-          setIsExpanded(e.currentTarget!.open);
-        }
+        setIsExpanded(e.currentTarget!.open);
       }}
       className={cn(
         'my-12 rounded-2xl shadow-inner-border dark:shadow-inner-border-dark relative',
@@ -100,13 +100,19 @@ function ExpandableExample({children, excerpt, type}: ExpandableExampleProps) {
             'bg-yellow-50 border-yellow-50 hover:bg-yellow-40 focus:bg-yellow-50 active:bg-yellow-50':
               isExample,
           })}
-          onClick={() => setIsExpanded((current) => !current)}>
+          onClick={() => {
+            if (autoExpanded) {
+              setIsAutoExpandedDismissed(true);
+              setIsExpanded(false);
+              return;
+            }
+
+            setIsExpanded((current) => !current);
+          }}>
           <span className="me-1">
-            <IconChevron
-              displayDirection={isExpanded || autoExpanded ? 'up' : 'down'}
-            />
+            <IconChevron displayDirection={isOpen ? 'up' : 'down'} />
           </span>
-          {isExpanded || autoExpanded ? 'Hide Details' : 'Show Details'}
+          {isOpen ? 'Hide Details' : 'Show Details'}
         </Button>
       </summary>
       <div

src/utils/content.tsx

@@ -104,14 +104,39 @@ export async function getDocsPageData(
   return getDocsPageDataCached(normalizedPath, pathname);
 }
 
+export function shouldServeDocsRoute(markdownPath: string[] | undefined) {
+  const normalizedPath = normalizeMarkdownPath(markdownPath);
+
+  if (normalizedPath === 'index') {
+    return markdownPath == null || markdownPath.length === 0;
+  }
+
+  if (normalizedPath.endsWith('/index')) {
+    return false;
+  }
+
+  if (
+    process.env.NODE_ENV === 'production' &&
+    DEV_ONLY_PAGES.has(normalizedPath)
+  ) {
+    return false;
+  }
+
+  return true;
+}
+
 async function getDocsPageDataCached(
   normalizedPath: string,
   pathname: string
 ): Promise<DocsPageData> {
   'use cache';
 
   cacheTag(DEV_CONTENT_CACHE_TAG);
-  cacheLife(pathname.endsWith('/translations') ? 'hours' : 'max');
+  if (pathname.endsWith('/translations')) {
+    cacheLife('hours');
+  } else {
+    cacheLife('max');
+  }
   return getDocsPageDataUncached(normalizedPath, pathname);
 }