PulseApp/docs
PulseApp/docs
1
0
Fork 0
Code Issues Pull Requests 6 Actions Packages Activity

on this page animation
All checks were successful
Deploy / deploy (ubuntu-latest, 2.44.0) (push) Successful in 59s
Details

Browse Source 
Took 11 minutes
This commit is contained in:
Braydon 2024-10-07 12:30:35 -04:00
parent 666666e254
commit 7c8d613799
1 changed files with 6 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/on-this-page.tsx
View File

@ -5,8 +5,7 @@ import { Bars3CenterLeftIcon } from "@heroicons/react/24/outline";
import Link from "next/link"; import Link from "next/link";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { truncateText } from "@/lib/string"; import { truncateText } from "@/lib/string";
import { useInView } from "framer-motion"; import { motion, useInView } from "framer-motion";
import { motion } from "framer-motion";
type Header = { type Header = {
id: string; id: string;
@ -19,13 +18,11 @@ const OnThisPage = ({ page }: { page: DocsContentMetadata }): ReactElement => {
const [activeHeader, setActiveHeader] = useState<string | undefined>( const [activeHeader, setActiveHeader] = useState<string | undefined>(
undefined undefined
); );
const observerRef = useRef<IntersectionObserver | undefined>(undefined);
const ref = useRef<HTMLDivElement>(null); const ref = useRef<HTMLDivElement>(null);
const inView = useInView(ref); const inView = useInView(ref);
const observedHeaderRef = useRef<IntersectionObserver | undefined>(
undefined
);
useEffect(() => { useEffect(() => {
// Regular expression to match markdown headers // Regular expression to match markdown headers
const headerRegex: RegExp = /^(#{1,6})\s+(.*)$/gm; const headerRegex: RegExp = /^(#{1,6})\s+(.*)$/gm;
@ -48,8 +45,8 @@ const OnThisPage = ({ page }: { page: DocsContentMetadata }): ReactElement => {
useEffect(() => { useEffect(() => {
// Cleanup existing observer // Cleanup existing observer
if (observedHeaderRef.current) { if (observerRef.current) {
observedHeaderRef.current.disconnect(); observerRef.current.disconnect();
} }
const observer = new IntersectionObserver( const observer = new IntersectionObserver(
@ -62,7 +59,7 @@ const OnThisPage = ({ page }: { page: DocsContentMetadata }): ReactElement => {
}, },
{ rootMargin: "0px 0px -80% 0px", threshold: 0.1 } { rootMargin: "0px 0px -80% 0px", threshold: 0.1 }
); );
observedHeaderRef.current = observer; observerRef.current = observer;
// Observe all header elements // Observe all header elements
headers.forEach((header: Header) => { headers.forEach((header: Header) => {