Website for the Lede browser extension.
1---
2interface Props {
3 tangled: string;
4}
5
6const { tangled } = Astro.props;
7
8const links = [
9 { href: "#privacy", label: "Privacy" },
10 { href: "#faq", label: "FAQ" },
11 { href: tangled, label: "Source", external: true },
12] as const;
13---
14
15<header class="site-header">
16 <div class="wrap">
17 <div class="site-header__inner">
18 <a class="brand-lockup" href="/">
19 <img
20 class="brand-lockup__mark"
21 src="/images/summarizer-logo.svg"
22 width="32"
23 height="32"
24 alt=""
25 decoding="async"
26 />
27 <span>Lede</span>
28 </a>
29 <div class="site-header__actions">
30 <nav aria-label="Page">
31 <ul class="nav">
32 {
33 links.map((link) => (
34 <li>
35 <a
36 href={link.href}
37 {...(link.external
38 ? {
39 target: "_blank",
40 rel: "noopener noreferrer",
41 }
42 : {})}
43 >
44 {link.label}
45 </a>
46 </li>
47 ))
48 }
49 </ul>
50 </nav>
51 <a class="btn btn--primary btn--sm nav-install" href="#install"
52 >Install beta</a
53 >
54 </div>
55 </div>
56 </div>
57</header>
58
59<script is:inline>
60 (function () {
61 var header = document.querySelector(".site-header");
62 if (!header) return;
63 /* Hysteresis: avoids borderline flicker when scroll sits near the threshold */
64 var enter = 36;
65 var exit = 12;
66 var floated = false;
67 var cls = "site-header--scrolled";
68 var rootCls = "site-nav-floated";
69 var root = document.documentElement;
70 var raf = 0;
71 function sync() {
72 var y = window.scrollY || document.documentElement.scrollTop;
73 var next = floated;
74 if (!floated && y > enter) next = true;
75 else if (floated && y < exit) next = false;
76 if (next === floated) return;
77 floated = next;
78 header.classList.toggle(cls, floated);
79 root.classList.toggle(rootCls, floated);
80 }
81 function onScroll() {
82 if (raf) return;
83 raf = requestAnimationFrame(function () {
84 raf = 0;
85 sync();
86 });
87 }
88 sync();
89 window.addEventListener("scroll", onScroll, { passive: true });
90 })();
91</script>