diff --git a/src/components/Article/FullArticle.tsx b/src/components/Article/FullArticle.tsx index 2783e112..edc5086b 100644 --- a/src/components/Article/FullArticle.tsx +++ b/src/components/Article/FullArticle.tsx @@ -52,11 +52,13 @@ export const FullArticle = (props: ArticleProps) => { const { session } = useSession() const formattedDate = createMemo(() => formatDate(new Date(props.article.createdAt))) - const mainTopic = () => - (props.article.topics?.find((topic) => topic?.slug === props.article.mainTopic)?.title || '').replace( - ' ', - ' ' - ) + const mainTopic = createMemo( + () => + props.article.topics?.find((topic) => topic?.slug === props.article.mainTopic) || + props.article.topics[0] + ) + + const mainTopicTitle = createMemo(() => mainTopic().title.replace(' ', ' ')) onMount(() => { const windowHash = window.location.hash @@ -90,7 +92,7 @@ export const FullArticle = (props: ArticleProps) => {

{props.article.title}

diff --git a/src/components/Feed/Card.tsx b/src/components/Feed/Card.tsx index f521c136..018c3965 100644 --- a/src/components/Feed/Card.tsx +++ b/src/components/Feed/Card.tsx @@ -56,9 +56,9 @@ const getTitleAndSubtitle = (article: Shout): { title: string; subtitle: string } export const ArticleCard = (props: ArticleCardProps) => { - const mainTopic = props.article.topics.find( - (articleTopic) => articleTopic.slug === props.article.mainTopic - ) + const mainTopic = + props.article.topics.find((articleTopic) => articleTopic.slug === props.article.mainTopic) || + props.article.topics[0] const formattedDate = createMemo(() => { return new Date(props.article.createdAt) diff --git a/src/stores/router.ts b/src/stores/router.ts index ae17520d..9f5c9cad 100644 --- a/src/stores/router.ts +++ b/src/stores/router.ts @@ -86,6 +86,20 @@ const handleClientRouteLinkClick = (event) => { if (url.origin === location.origin) { event.preventDefault() + if (url.hash) { + const anchor = document.querySelector(url.hash) + const headerOffset = 80 // 100px for header + const elementPosition = anchor.getBoundingClientRect().top + const newScrollTop = elementPosition + window.scrollY - headerOffset + + window.scrollTo({ + top: newScrollTop, + behavior: 'smooth' + }) + + return + } + routerStore.open(url.pathname) const params = Object.fromEntries(new URLSearchParams(url.search)) searchParamsStore.open(params)