Merge pull request #77 from Discours/even-more-fixes

anchors and mainTopic fixes

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) => {
       <article class="col-md-6 shift-content">
         <div class={styles.shoutHeader}>
           <div class={styles.shoutTopic}>
-            <a href={`/topic/${props.article.mainTopic}`} innerHTML={mainTopic() || ''} />
+            <a href={`/topic/${props.article.mainTopic}`} innerHTML={mainTopicTitle() || ''} />
           </div>
 
           <h1>{props.article.title}</h1>

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<string>(() => {
     return new Date(props.article.createdAt)

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)