infra/site
2
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

fix: properly fix colors-sections
Some checks failed
/ deploy (push) Failing after 56s
Details

Browse source
This commit is contained in:
Dariusz Niemczyk 2025-04-13 21:37:18 +02:00 committed by palid
parent 29c1252633
commit 65a8ea8ab8
6 changed files with 52 additions and 98 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
package-lock.json generated
View file

@ -36,6 +36,7 @@
"react-dom": "^19.0.0",
"react-hook-form": "^7.54.2",
"react-leaflet": "^5.0.0-rc.2",
"react-scrollspy-navigation": "^2.0.6",
"tailwind-merge": "^2.6.0",
"tailwindcss-animate": "^1.0.7",
"zod": "^3.24.1"
@ -9808,6 +9809,22 @@
}
}
},
"node_modules/react-scrollspy-navigation": {
"version": "2.0.6",
"resolved": "https://registry.npmjs.org/react-scrollspy-navigation/-/react-scrollspy-navigation-2.0.6.tgz",
"integrity": "sha512-BBnIEI9BsCPIMnp3z/OIEJ6mRSlDgGYf8wty5IjR8nOIhIeRhQp6eDUAKFMyHRoM2RUInA2NDu5DutIFTphoKQ==",
"funding": [
{
"type": "github",
"url": "https://github.com/sponsors/toviszsolt"
},
{
"type": "paypal",
"url": "https://www.paypal.com/paypalme/toviszsolt"
}
],
"license": "MIT"
},
"node_modules/react-style-singleton": {
"version": "2.2.3",
"resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.3.tgz",

1
package.json
View file

@ -37,6 +37,7 @@
"react-dom": "^19.0.0",
"react-hook-form": "^7.54.2",
"react-leaflet": "^5.0.0-rc.2",
"react-scrollspy-navigation": "^2.0.6",
"tailwind-merge": "^2.6.0",
"tailwindcss-animate": "^1.0.7",
"zod": "^3.24.1"

10
src/components/mobile-nav.tsx
View file

@ -2,10 +2,9 @@
import { Button } from "@/components/ui/button"
import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet"
import { useColorSections } from "@/hooks/color-sections"
import type { Sections, translations } from "@/i18n/translations"
import { Menu } from "lucide-react"
import { useRef } from "react"
import ScrollSpy from "react-scrollspy-navigation"
import { LanguageSelector } from "./ui/language-selector"
function NavContent({
@ -15,15 +14,16 @@ function NavContent({
t: typeof translations.pl,
linksOrder: Array<Sections>
}) {
const parent = useRef<HTMLDivElement>(null);
useColorSections(parent);
return (
<nav className="flex flex-col gap-4 mt-8" ref={parent}>
<nav className="flex flex-col gap-4 mt-8">
<ScrollSpy activeClass="nav-active">
{linksOrder.map((value) => (
<a key={value} href={`#${value}`} className="text-lg hover:text-primary transition-colors">
{t.nav[value]}
</a>
))}
</ScrollSpy>
<LanguageSelector />
</nav>
)

10
src/components/nav.tsx
View file

@ -1,11 +1,11 @@
"use client"
import { useColorSections } from "@/hooks/color-sections"
import { type translations } from "@/i18n/translations"
import { cn } from "@/lib/utils"
import { useRef } from "react"
import ScrollSpy from 'react-scrollspy-navigation'
import { MobileNav } from "./mobile-nav"
import { NavContainer } from "./nav-container"
const linksOrder: Array<keyof (typeof translations.pl)["nav"]> = [
'about',
'tickets',
@ -19,13 +19,12 @@ export function MainpageNav({
}: {
t: typeof translations.pl
}) {
const parent = useRef<HTMLDivElement>(null);
useColorSections(parent);
return (
<NavContainer title={t.nav.title}>
<>
<div className="hidden md:flex md:items-center md:gap-4 lg:gap-8" ref={parent}>
<div className="hidden md:flex md:items-center md:gap-4 lg:gap-8">
<ScrollSpy activeClass="nav-active">
{linksOrder.map((value) => (
<a
@ -38,6 +37,7 @@ export function MainpageNav({
})} />
</a>
))}
</ScrollSpy>
</div>
<div className="md:hidden ml-2">
<MobileNav t={t} linksOrder={linksOrder} />

8
src/globals.css
View file

@ -159,3 +159,11 @@
section {
scroll-margin-top: calc(var(--spacing) * 16 + var(--spacing) * 4);
}
.nav-active {
color: var(--color-primary) !important;
& span {
--tw-scale-x: 100%;
scale: var(--tw-scale-x) var(--tw-scale-y);
}
}

72
src/hooks/color-sections.tsx
View file

@ -1,72 +0,0 @@
import { Sections } from "@/i18n/translations";
import { useLayoutEffect, useRef } from "react";
export const linksOrder: Array<Sections> = [
"about",
"tickets",
"cfp",
"details",
"contact"
]
export function useColorSections(parent: React.RefObject<HTMLDivElement | null>) {
const previous = useRef<Sections>(linksOrder[0])
useLayoutEffect(() => {
if (parent.current === null) return;
const options = {
root: null,
rootMargin: "-10px",
threshold: 0.5, // Adjust the visibility threshold as needed
};
const sections = linksOrder.map(value => document.getElementById(value));
const subs = linksOrder.reduce((acc, value) => {
acc[value] = parent.current!.querySelector('[data-sub="' + value + '"]')!;
return acc;
}, {} as Record<Sections, HTMLAnchorElement>);
const links = linksOrder.reduce((acc, value) => {
acc[value] = parent.current!.querySelector('[href="#' + value + '"]')!;
return acc;
}, {} as Record<Sections, HTMLAnchorElement>);
console.log(links)
const observer = new IntersectionObserver((entries) => {
for (const entry of entries) {
const target = entry.target.id as Sections
if (entry.isIntersecting) {
// FIXME: This seems to be VERY broken on firefox.
// See: https://bugzilla.mozilla.org/show_bug.cgi?id=1250972
// It basically spikes up CPU usage to some enormous values just to update the hash, like WTF firefox.
// if (history.replaceState) {
// timeout = setTimeout(() => {
// history.replaceState(null, "", `#${target}`)
// }, 150)
// }
subs[previous.current]?.classList.remove('scale-x-100');
links[previous.current]?.classList.remove('text-primary');
previous.current = target;
subs[previous.current]?.classList.add('scale-x-100');
links[previous.current]?.classList.add('text-primary');
break;
}
}
}, options);
sections.forEach(section => {
if (section) {
observer.observe(section);
}
});
return () => {
observer.disconnect()
};
}, [parent]);
}