Dostosowanie pakietów tematycznych

src/pages/internet-telewizja/pakiety-tematyczne.astro

@@ -47,44 +47,80 @@ const addons: TvAddon[] = Array.isArray(doc?.dodatki) ? doc.dodatki : [];
     </div>
   </section>
 
-  {addons.map((addon: TvAddon, index: number) => {
-    const isAboveFold = index === 0;
+  {
+    addons.map((addon: TvAddon, index: number) => {
+      const isAboveFold = index === 0;
 
-    const hasYamlImage = !!String(addon?.image ?? "").trim();
-    const pkgName = String(addon?.nazwa ?? "").trim();
+      const hasYamlImage = !!String(addon?.image ?? "").trim();
+      const pkgName = String(addon?.nazwa ?? "").trim();
 
-    const assumeHasMedia = pkgName ? true : hasYamlImage;
-    const anchorId = addon?.tid != null ? String(addon.tid) : undefined;
+      const assumeHasMedia = pkgName ? true : hasYamlImage;
+      const anchorId = addon?.tid != null ? `tid-${addon.tid}` : undefined;
 
-    return (
-      <section class="f-section">
-        <div
-          class={`f-section-grid f-addon-grid f-addon-section ${
-            assumeHasMedia ? "md:grid-cols-2" : "md:grid-cols-1"
-          }`}
-          data-addon-section
-          data-has-media={assumeHasMedia ? "1" : "0"}
-        >
-          {/* TEKST — lewa, od góry */}
-          <div class="f-addon-text" id={anchorId}>
-            {pkgName && <h2 class="f-section-title">{pkgName}</h2>}
-            {addon?.opis && <Markdown text={addon.opis} />}
+      return (
+        <section class="f-section" id={anchorId}>
+          <div
+            class={`f-section-grid f-addon-grid f-addon-section ${
+              assumeHasMedia ? "md:grid-cols-2" : "md:grid-cols-1"
+            }`}
+            data-addon-section
+            data-has-media={assumeHasMedia ? "1" : "0"}
+          >
+            <div class="f-addon-text">
+              {pkgName && <h2 class="f-section-title">{pkgName}</h2>}
+              {addon?.opis && <Markdown text={addon.opis} />}
+            </div>
+
+            <div class="f-addon-media">
+              {pkgName ? (
+                <AddonChannelsGrid
+                  client:idle
+                  packageName={pkgName}
+                  fallbackImage={String(addon?.image ?? "")}
+                  aboveFold={isAboveFold}
+                  title={pkgName}
+                />
+              ) : null}
+            </div>
           </div>
+        </section>
+      );
+    })
+  }
+
+<script is:inline>
+  function __scrollToHashWithOffset(behavior = "auto") {
+    if (!location.hash) return;
+
+    const id = decodeURIComponent(location.hash.slice(1));
+    const el = document.getElementById(id);
+    if (!el) return;
+
+    // znajdź navbar (dopasuj selektor do siebie)
+    const nav =
+      document.querySelector(".f-navbar") ||
+      document.querySelector("header") ||
+      document.querySelector("[data-navbar]");
+
+    const navH = nav ? nav.getBoundingClientRect().height : 84;
+    const extra = 8;
+
+    const top = el.getBoundingClientRect().top + window.pageYOffset - navH - extra;
+
+    window.scrollTo({ top: Math.max(0, top), behavior });
+  }
+
+  function __runFix() {
+    // po wejściu na stronę z hashem przeglądarka może już coś przewinąć,
+    // więc poprawiamy po renderze i po dociągnięciu treści
+    __scrollToHashWithOffset("auto");
+    requestAnimationFrame(() => __scrollToHashWithOffset("auto"));
+    setTimeout(() => __scrollToHashWithOffset("auto"), 120);
+    setTimeout(() => __scrollToHashWithOffset("auto"), 600);
+  }
+
+  window.addEventListener("load", __runFix);
+  window.addEventListener("hashchange", () => __scrollToHashWithOffset("smooth"));
+</script>
 
-          {/* MEDIA — prawa */}
-          <div class="f-addon-media">
-            {pkgName ? (
-              <AddonChannelsGrid
-                client:idle
-                packageName={pkgName}
-                fallbackImage={String(addon?.image ?? "")}
-                aboveFold={isAboveFold}
-                title={pkgName}
-              />
-            ) : null}
-          </div>
-        </div>
-      </section>
-    );
-  })}
 </DefaultLayout>