preselect question

app/routes/toc.tsx

@@ -2,7 +2,7 @@ import {useEffect, useState} from 'react'
 import {useOutletContext} from '@remix-run/react'
 import {Header, Footer} from '~/components/layouts'
 import useQuestionStateInUrl from '~/hooks/useQuestionStateInUrl'
-import {fetchQuestion, Question} from '~/routes/questions/$question'
+import {LINK_WITHOUT_DETAILS_CLS, fetchQuestion, Question} from '~/routes/questions/$question'
 import {QuestionState} from '~/server-utils/stampy'
 import type {Question as QuestionType, PageId} from '~/server-utils/stampy'
 import type {Context} from '~/root'
@@ -42,7 +42,7 @@ const ChildList = ({items, selectItem}: {items: Item[]; selectItem: (i: Item) =>
       {items.map((child, i) => {
         if (child?.items && child.items.length > 0) {
           return (
-            <details key={i} id={normalizeName(child?.content)} open>
+            <details key={i} id={normalizeName(child?.content)}>
               <summary>
                 <MaybeURL item={child} selectItem={selectItem} />
               </summary>
@@ -67,7 +67,7 @@ const ToC = ({toc, selectItem}: {toc: Item[]; selectItem: (i: Item) => void}) =>
       {toc.map((item: Item, i: number) => (
         <details key={i} open>
           <summary>
-            <span id={normalizeName(item.content)} style={{fontSize: '32px', padding: '5px'}}>
+            <span id={normalizeName(item.content)} style={{padding: '5px'}}>
               <MaybeURL item={item} selectItem={selectItem} />
             </span>
           </summary>
@@ -78,6 +78,19 @@ const ToC = ({toc, selectItem}: {toc: Item[]; selectItem: (i: Item) => void}) =>
   )
 }
 
+
+const showMore = (el: HTMLElement, toggle = false) => {
+    const button = el.closest('.answer')?.querySelector('.see-more')
+    if (toggle) {
+        button?.classList.toggle('visible')
+    } else {
+        button?.classList.add('visible')
+    }
+    // The AutoHeight component doesn't notice when a random <div> changes CSS class,
+    // so manually triggering toggle event (as if this was a <details> element).
+    document.dispatchEvent(new Event('toggle'))
+}
+
 export default function App() {
   const [toc, setToc] = useState<Item[]>([])
   const [loading, setLoading] = useState(false)
@@ -88,14 +101,6 @@ export default function App() {
     []
   )
 
-  useEffect(() => {
-    const fetcher = async () => {
-      const response = await fetch('/toc.json')
-      setToc(await response.json())
-    }
-    fetcher()
-  }, [])
-
   const selectItem = async (item: Item) => {
     if (!item.pageId) return
     setLoading(true)
@@ -108,13 +113,44 @@ export default function App() {
     setLoading(false)
   }
 
+    useEffect(() => {
+        const fetcher = async () => {
+            selectItem({pageId: "9OGZ"})
+            const response = await fetch('/toc.json')
+            setToc(await response.json())
+        }
+        fetcher()
+    }, [])
+
+    const handleSpecialLinks = (e: MouseEvent) => {
+        const el = e.target as HTMLAnchorElement
+        if (
+            el.tagName !== 'A' ||
+            el.closest('.question-footer') ||
+            el.classList.contains('footnote-backref') ||
+            el.classList.contains(LINK_WITHOUT_DETAILS_CLS)
+        )
+            return
+
+        if (el.classList.contains('see-more')) {
+            showMore(el, true)
+            e.preventDefault()
+            return
+        }
+        if (el.parentElement?.classList.contains('footnote-ref')) {
+            showMore(el)
+            return
+        }
+    }
+
+
   return (
     <>
       <style>{`
         body { max-width: 1400px; }
             `}</style>
       <Header />
-      <main className="toc-container">
+      <main className="toc-container" onClick={handleSpecialLinks}>
         <ToC toc={toc} selectItem={selectItem} />
         <div style={{flex: '5 3 auto'}}>
           <div className={`search-loader ${loading ? 'loader' : ''}`}> </div>