127 lines
3.7 KiB
Plaintext
127 lines
3.7 KiB
Plaintext
---
|
|
import DefaultLayout from "../../layouts/DefaultLayout.astro";
|
|
import yaml from "js-yaml";
|
|
import fs from "node:fs";
|
|
import Markdown from "../../islands/Markdown.jsx";
|
|
import AddonChannelsGrid from "../../islands/jambox/AddonChannelsModal.jsx";
|
|
import "../../styles/jambox-tematyczne.css";
|
|
|
|
/** Typy minimalne */
|
|
type AddonPriceRow = {
|
|
pakiety?: string[] | any;
|
|
"12m"?: number | string;
|
|
bezterminowo?: number | string;
|
|
};
|
|
|
|
type TvAddon = {
|
|
id?: string;
|
|
nazwa?: string;
|
|
tid?: number;
|
|
typ?: string;
|
|
opis?: string;
|
|
image?: string;
|
|
cena?: AddonPriceRow[];
|
|
};
|
|
|
|
type TvAddonsDoc = {
|
|
tytul?: string;
|
|
opis?: string;
|
|
cena_opis?: string;
|
|
dodatki?: TvAddon[];
|
|
};
|
|
|
|
const doc = yaml.load(
|
|
fs.readFileSync("./src/content/internet-telewizja/tv-addons.yaml", "utf8"),
|
|
) as TvAddonsDoc;
|
|
|
|
const pageTitle = doc?.tytul ?? "Dodatkowe pakiety TV";
|
|
const pageDesc = doc?.opis ?? "";
|
|
const addons: TvAddon[] = Array.isArray(doc?.dodatki) ? doc.dodatki : [];
|
|
---
|
|
|
|
<DefaultLayout title={pageTitle} description={pageDesc}>
|
|
<section class="f-section">
|
|
<div class="f-section-grid-single">
|
|
<h1 class="f-section-title">{pageTitle}</h1>
|
|
{pageDesc && <Markdown text={pageDesc} />}
|
|
</div>
|
|
</section>
|
|
|
|
{
|
|
addons.map((addon: TvAddon, index: number) => {
|
|
const isAboveFold = index === 0;
|
|
|
|
const hasYamlImage = !!String(addon?.image ?? "").trim();
|
|
const pkgName = String(addon?.nazwa ?? "").trim();
|
|
|
|
const assumeHasMedia = pkgName ? true : hasYamlImage;
|
|
const anchorId = addon?.tid != null ? `tid-${addon.tid}` : undefined;
|
|
|
|
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>
|
|
|
|
</DefaultLayout>
|