diff --git a/src/routes/[slug]/[...tab].tsx b/src/routes/[slug]/[...tab].tsx index ef9fc842..67f19c70 100644 --- a/src/routes/[slug]/[...tab].tsx +++ b/src/routes/[slug]/[...tab].tsx @@ -1,6 +1,6 @@ import { RouteDefinition, RouteSectionProps, createAsync, useLocation } from '@solidjs/router' import { HttpStatusCode } from '@solidjs/start' -import { ErrorBoundary, Show, Suspense, createEffect, on, onMount } from 'solid-js' +import { ErrorBoundary, Show, Suspense, createEffect, on, onMount, Switch, Match, createSignal } from 'solid-js' import { FourOuFourView } from '~/components/Views/FourOuFour' import { Loading } from '~/components/_shared/Loading' import { gaIdentity } from '~/config' @@ -43,90 +43,115 @@ export type SlugPageProps = { topics: Topic[] } -export default function ArticlePage(props: RouteSectionProps) { - if (props.params.slug.startsWith('@')) { - console.debug('[routes] [slug]/[...tab] starts with @, render as author page') - const patchedProps = { - ...props, - params: { - ...props.params, - slug: props.params.slug.slice(1, props.params.slug.length) +function ArticlePageContent(props: RouteSectionProps) { + const loc = useLocation() + const { t } = useLocalize() + const data = createAsync(async () => { + const result = props.data?.article || (await fetchShout(props.params.slug)) + return result + }) + + onMount(async () => { + console.debug('[ArticlePage] onMount') + if (gaIdentity && data()?.id) { + try { + await loadGAScript(gaIdentity) + initGA(gaIdentity) + } catch (error) { + console.warn('[routes] [slug]/[...tab] Failed to connect Google Analytics:', error) } - } as RouteSectionProps - return - } + } + }) - if (props.params.slug.startsWith('!')) { - console.debug('[routes] [slug]/[...tab] starts with !, render as topic page') - const patchedProps = { - ...props, - params: { - ...props.params, - slug: props.params.slug.slice(1, props.params.slug.length) - } - } as RouteSectionProps - return - } - - function ArticlePage(props: RouteSectionProps) { - const loc = useLocation() - const { t } = useLocalize() - const data = createAsync(async () => props.data?.article || (await fetchShout(props.params.slug))) - - onMount(async () => { - if (gaIdentity && data()?.id) { - try { - await loadGAScript(gaIdentity) - initGA(gaIdentity) - } catch (error) { - console.warn('[routes] [slug]/[...tab] Failed to connect Google Analytics:', error) - } - } - }) - - createEffect( - on( - data, - (a?: Shout) => { - if (!a?.id) return - window?.gtag?.('event', 'page_view', { - page_title: a.title, - page_location: window?.location.href || '', - page_path: loc.pathname - }) - }, - { defer: true } - ) + createEffect( + on( + data, + (a?: Shout) => { + if (!a?.id) return + window?.gtag?.('event', 'page_view', { + page_title: a.title, + page_location: window?.location.href || '', + page_path: loc.pathname + }) + }, + { defer: true } ) + ) - return ( - }> - }> - - - - - } - > - - - - + return ( + }> + }> + + + - - - - ) - } - return + } + > + + + + + + + + + ) } + +export default function ArticlePage(props: RouteSectionProps) { + console.debug('[routes] [slug]/[...tab] props:', props) + + const { slug } = props.params + + const [currentSlug, setCurrentSlug] = createSignal(props.params.slug); + createEffect(() => { + if (props.params.slug !== currentSlug()) { + setCurrentSlug(props.params.slug); + } + }); + + return ( + Loading...}> + + } + /> + + + } + /> + + + + + + }> + + + + + ) +} \ No newline at end of file