From cdf411a649764d4edb5fb3099cc9c156b48ecb8a Mon Sep 17 00:00:00 2001
From: kiosion <hi@kio.dev>
Date: Tue, 17 Oct 2023 11:20:29 -0400
Subject: [PATCH] fix: Misc responsive stuff

---
 .../document/content/common/header.svelte     | 26 +++++--
 .../layouts/scroll-container.svelte           |  3 +-
 .../serializers/custom-heading.svelte         | 27 ++++---
 svelte-app/src/lib/summary.ts                 | 71 ++++++++++---------
 svelte-app/src/routes/+layout.svelte          |  6 +-
 5 files changed, 80 insertions(+), 53 deletions(-)

diff --git a/svelte-app/src/components/document/content/common/header.svelte b/svelte-app/src/components/document/content/common/header.svelte
index 401c5708f..96d4cf0ba 100644
--- a/svelte-app/src/components/document/content/common/header.svelte
+++ b/svelte-app/src/components/document/content/common/header.svelte
@@ -29,10 +29,7 @@
   <div class="flex flex-col">
     <svelte:component this={model === 'post' ? PostHeader : ProjectHeader}>
       <svelte:fragment slot="title">
-        <h1
-          class="mb-4 mt-8 h-fit w-fit font-display text-4xl font-bold text-black transition-[color] dark:text-white lg:mt-10 lg:text-6xl lg:font-black"
-          bind:contentRect={titleRect}
-        >
+        <h1 bind:contentRect={titleRect}>
           {data.title}
         </h1>
       </svelte:fragment>
@@ -75,3 +72,24 @@
     </svelte:component>
   </div>
 </div>
+
+<style lang="scss">
+  @import '@styles/mixins';
+
+  h1 {
+    @apply mb-4 mt-8 h-fit max-w-full font-display text-4xl font-bold text-black transition-[color];
+
+    overflow-wrap: break-word;
+    word-break: break-word;
+
+    @include media(lg) {
+      @apply mt-10 text-6xl font-black;
+    }
+  }
+
+  :global(.dark) {
+    h1 {
+      @apply text-white;
+    }
+  }
+</style>
diff --git a/svelte-app/src/components/layouts/scroll-container.svelte b/svelte-app/src/components/layouts/scroll-container.svelte
index 434ab70d9..a129078b8 100644
--- a/svelte-app/src/components/layouts/scroll-container.svelte
+++ b/svelte-app/src/components/layouts/scroll-container.svelte
@@ -30,6 +30,7 @@
 
   beforeNavigate(() => {
     summaryVisible.set(false);
+    visibleHeadings.set(new Set());
   });
 
   afterNavigate(() => {
@@ -37,8 +38,6 @@
       clearTimeout(timeout);
     }
 
-    visibleHeadings.set(new Set());
-
     timeout = setTimeout(() => {
       element.scrollTo({
         top: 0,
diff --git a/svelte-app/src/components/portable-text/serializers/custom-heading.svelte b/svelte-app/src/components/portable-text/serializers/custom-heading.svelte
index 3b416d3a8..b0d7f51c5 100644
--- a/svelte-app/src/components/portable-text/serializers/custom-heading.svelte
+++ b/svelte-app/src/components/portable-text/serializers/custom-heading.svelte
@@ -1,10 +1,8 @@
 <script lang="ts">
-  import { getContext, onMount } from 'svelte';
-  import { get } from 'svelte/store';
+  import { getContext, onDestroy, onMount } from 'svelte';
 
-  import { afterNavigate } from '$app/navigation';
   import Logger from '$lib/logger';
-  import { visibleHeadings } from '$lib/summary';
+  import { headingElements, visibleHeadings } from '$lib/summary';
 
   import Icon from '$components/icon.svelte';
 
@@ -17,22 +15,27 @@
   const scrollContainer = (getContext('getScrollContainer') as () => HTMLDivElement)();
 
   onMount(() => {
+    headingElements.update((state) => {
+      state.add(element);
+      return state;
+    });
+
     observer = new IntersectionObserver(
       (entries) => {
-        const key = value._key;
-        if (!key?.length) {
+        if (!value._key?.length) {
           Logger.warn("Heading is missing '_key' property");
           return;
         }
+
         visibleHeadings.update((state) => {
           if (entries[0]?.isIntersecting) {
-            return state.add(key);
+            state.add(value._key!);
+            return state;
           } else {
-            state.delete(key);
+            state.delete(value._key!);
             return state;
           }
         });
-        get(visibleHeadings);
       },
       {
         rootMargin: '-250px 0px 0px 0px',
@@ -43,8 +46,12 @@
     observer.observe(element);
   });
 
-  afterNavigate(() => {
+  onDestroy(() => {
     observer?.disconnect();
+    headingElements.update((state) => {
+      state.delete(element);
+      return state;
+    });
   });
 
   $: ({ value, indexInParent } = portableText);
diff --git a/svelte-app/src/lib/summary.ts b/svelte-app/src/lib/summary.ts
index bd49a11ed..cb1389ed3 100644
--- a/svelte-app/src/lib/summary.ts
+++ b/svelte-app/src/lib/summary.ts
@@ -3,7 +3,7 @@ import { derived, writable } from 'svelte/store';
 import { page } from '$app/stores';
 import { isDesktop } from '$lib/helpers/responsive';
 
-import type { Page } from '@sveltejs/kit';
+// import type { Page } from '@sveltejs/kit';
 import type { DocumentHeadings } from '$types';
 
 const recursiveFlattenHeadings = (headings: DocumentHeadings[]): DocumentHeadings[] => {
@@ -16,45 +16,45 @@ const recursiveFlattenHeadings = (headings: DocumentHeadings[]): DocumentHeading
 
 let previousFirstVisibleHeading: string | undefined;
 
-const findFirstVisibleHeading = ([visibleHeadings, summaryContents, page]: [
-  Set<string>,
-  DocumentHeadings[] | undefined,
-  Page<Record<string, string>>
-]) => {
-  if (!summaryContents?.length || !visibleHeadings?.size) {
-    return previousFirstVisibleHeading;
-  }
-
-  const flatSummaryContents = recursiveFlattenHeadings(summaryContents),
-    pageHash = page.url.hash,
-    pageHashHeading = flatSummaryContents.find((heading) => {
-      return heading.key === pageHash.slice(1);
-    });
-
-  let firstVisibleHeading = flatSummaryContents.find((heading) => {
-    return visibleHeadings.has(heading.key);
-  });
-
-  if (pageHashHeading && visibleHeadings.has(pageHashHeading?.key)) {
-    const pageHashHeadingIndex = flatSummaryContents.indexOf(pageHashHeading),
-      firstVisibleHeadingIndex = firstVisibleHeading
-        ? flatSummaryContents.indexOf(firstVisibleHeading)
-        : -1;
-    if (pageHashHeadingIndex > firstVisibleHeadingIndex) {
-      firstVisibleHeading = pageHashHeading;
-    }
-  }
-
-  firstVisibleHeading?.key && (previousFirstVisibleHeading = firstVisibleHeading.key);
-  return firstVisibleHeading?.key ?? previousFirstVisibleHeading;
-};
-
 const summaryVisible = writable(false),
   summaryContents = writable<DocumentHeadings[] | undefined>(undefined),
+  headingElements = writable<Set<HTMLElement>>(new Set()),
   visibleHeadings = writable<Set<string>>(new Set()),
   firstVisibleHeading = derived(
     [visibleHeadings, summaryContents, page],
-    findFirstVisibleHeading
+    ([_visibleHeadings, _summaryContents, _page]) => {
+      // console.log({
+      //   _visibleHeadings,
+      //   _summaryContents,
+      //   _page
+      // });
+      if (!_summaryContents?.length || !_visibleHeadings?.size) {
+        return previousFirstVisibleHeading;
+      }
+
+      const flatSummaryContents = recursiveFlattenHeadings(_summaryContents),
+        pageHash = _page.url.hash,
+        pageHashHeading = flatSummaryContents.find((heading) => {
+          return heading.key === pageHash.slice(1);
+        });
+
+      let firstVisibleHeading = flatSummaryContents.find((heading) => {
+        return _visibleHeadings.has(heading.key);
+      });
+
+      if (pageHashHeading && _visibleHeadings.has(pageHashHeading?.key)) {
+        const pageHashHeadingIndex = flatSummaryContents.indexOf(pageHashHeading),
+          firstVisibleHeadingIndex = firstVisibleHeading
+            ? flatSummaryContents.indexOf(firstVisibleHeading)
+            : -1;
+        if (pageHashHeadingIndex > firstVisibleHeadingIndex) {
+          firstVisibleHeading = pageHashHeading;
+        }
+      }
+
+      firstVisibleHeading?.key && (previousFirstVisibleHeading = firstVisibleHeading.key);
+      return firstVisibleHeading?.key ?? previousFirstVisibleHeading;
+    }
   ),
   summaryOffset = writable(0),
   shouldShowSummary = derived(
@@ -66,6 +66,7 @@ const summaryVisible = writable(false),
 
 export {
   firstVisibleHeading,
+  headingElements,
   shouldShowSummary,
   summaryContents,
   summaryOffset,
diff --git a/svelte-app/src/routes/+layout.svelte b/svelte-app/src/routes/+layout.svelte
index 4866bd4b8..4b425b94f 100644
--- a/svelte-app/src/routes/+layout.svelte
+++ b/svelte-app/src/routes/+layout.svelte
@@ -183,7 +183,7 @@
   }
 
   span:not(.shim) {
-    @apply absolute left-1/2 top-0 z-50 -mt-10 -translate-x-1/2 cursor-pointer rounded-md bg-light px-4 py-2 text-sm font-bold text-dark transition-[margin-top,background-color,color];
+    @apply absolute left-1/2 top-0 z-50 -mt-14 -translate-x-1/2 cursor-pointer rounded-md bg-light px-4 py-2 text-sm font-bold text-dark transition-[margin-top,background-color,color];
 
     @include focus-state(sm);
 
@@ -200,7 +200,9 @@
     }
 
     div {
-      @apply relative mt-14 w-full;
+      @apply relative mt-14;
+
+      width: calc(100% - 2rem);
     }
   }