debug: used version only with useParam and with logging for slug tab

src/routes/[slug]/[...tab].tsx

@@ -19,9 +19,9 @@
  * - **TopicPage**: Displays topic-specific information (imported from `../topic/[slug]/[...tab]`).
  **/
 
-import { RouteDefinition, RouteSectionProps, createAsync, useLocation, useParams } from '@solidjs/router'
+import { RouteDefinition, RouteSectionProps, useLocation, useParams } from '@solidjs/router'
 import { HttpStatusCode } from '@solidjs/start'
-import { ErrorBoundary, Show, Suspense, createEffect, on, onMount } from 'solid-js'
+import { ErrorBoundary, Show, Suspense, createEffect, onMount } from 'solid-js'
 import { FourOuFourView } from '~/components/Views/FourOuFour'
 import { Loading } from '~/components/_shared/Loading'
 import { gaIdentity } from '~/config'
@@ -65,98 +65,46 @@ export type SlugPageProps = {
 }
 
 export default function ArticlePage(props: RouteSectionProps<SlugPageProps>) {
-  const params = useParams();
+  const loc = useLocation()
+  const { t } = useLocalize()
+  const params = useParams()
 
-  if (params.slug.startsWith('@')) {
+  console.debug('Initial slug from useParams:', params.slug)
-    console.debug('[routes] [slug]/[...tab] starts with @, render as author page')
+
-    const patchedProps = {
+  const [data, setData] = createSignal<Shout | undefined>(undefined)
-      ...props,
+
-      params: {
+  const fetchData = async (slug: string) => {
-        ...props.params,
+    console.debug('Fetching article with slug (useParams):', slug)
-        slug: params.slug.slice(1, params.slug.length)
+    const result = await fetchShout(slug)
-      }
+    console.debug('Fetched article data (useParams):', result)
-    } as RouteSectionProps<AuthorPageProps>
+    setData(result)
-    return <AuthorPage {...patchedProps} />
   }
 
-  if (params.slug.startsWith('!')) {
+  onMount(() => {
-    console.debug('[routes] [slug]/[...tab] starts with !, render as topic page')
+    console.debug('onMount triggered')
-    const patchedProps = {
+    fetchData(params.slug)
-      ...props,
+  })
-      params: {
-        ...props.params,
-        slug: params.slug.slice(1, params.slug.length)
-      }
-    } as RouteSectionProps<TopicPageProps>
-    return <TopicPage {...patchedProps} />
-  }
 
-  return <InnerArticlePage {...props} />
+  createEffect(() => {
-}
+    console.debug('Slug changed (useParams):', params.slug)
+    fetchData(params.slug)
+  })
 
-function InnerArticlePage(props: RouteSectionProps<ArticlePageProps>) {
+  createEffect(() => {
-  const loc = useLocation();
+    const article = data()
-  const { t } = useLocalize();
+    if (!article?.id) return
-  const params = useParams();
+    console.debug('Page view event for article:', article)
-
-  console.debug('Initial slug from useParams:', params.slug);
-
-  const data = createAsync(async () => {
-    console.debug('Fetching article with slug (createAsync):', params.slug);
-    const result = props.data?.article || (await fetchShout(params.slug));
-    console.debug('Fetched article data (createAsync):', result);
-    return result;
-  });
-
-  onMount(async () => {
-    console.debug('onMount triggered');
-    if (gaIdentity && data()?.id) {
-      try {
-        console.debug('Loading GA script');
-        await loadGAScript(gaIdentity);
-        initGA(gaIdentity);
-      } catch (error) {
-        console.warn('[routes] [slug]/[...tab] Failed to connect Google Analytics:', error);
-      }
-    }
-  });
-
-  createEffect(
-    on(
-      () => params.slug,
-      async (newSlug) => {
-        console.debug('Slug changed (useParams):', newSlug);
-        const result = await fetchShout(newSlug);
-        console.debug('Fetched article data (useParams):', result);
-        data(result);
-      }
-    )
-  );
-
-  createEffect(
-    on(
-      data,
-      (a?: Shout) => {
-        if (!a?.id) return;
-        console.debug('Page view event for article:', a);
     window?.gtag?.('event', 'page_view', {
-          page_title: a.title,
+      page_title: article.title,
       page_location: window?.location.href || '',
       page_path: loc.pathname
-        });
+    })
-      },
+  })
-      { defer: true }
-    )
-  );
-
-  createEffect(async () => {
-    console.debug('Data from createAsync effect:', data());
-  });
 
   return (
     <ErrorBoundary fallback={() => {
-      console.error('Rendering 500 error page');
+      console.error('Rendering 500 error page')
-      return <HttpStatusCode code={500} />;
+      return <HttpStatusCode code={500} />
     }}>
       <Suspense fallback={<Loading />}>
         <Show
@@ -185,5 +133,5 @@ function InnerArticlePage(props: RouteSectionProps<ArticlePageProps>) {
         </Show>
       </Suspense>
     </ErrorBoundary>
-  );
+  )
 }