Skip to content

Commit fbd578f

Browse files
rojvvrojvv
committed
Improvements
1 parent fde736b commit fbd578f

10 files changed

Lines changed: 184 additions & 17 deletions

File tree

‎_config.ts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -187,12 +187,26 @@ site.preprocess([".html"], (pages) => {
187187
}
188188
}
189189

190+
for (const page of pages) {
191+
delete page.data.walkthroughProgress;
192+
}
193+
194+
const trackLabels: Record<WalkthroughTrack, string> = {
195+
main: "Main",
196+
user: "User",
197+
bot: "Bot",
198+
};
190199
for (const track of walkthroughTracks) {
191200
const trackPages = getWalkthroughPages(track, pages);
192201
for (let index = 0; index < trackPages.length; ++index) {
193202
const page = trackPages[index];
194203
delete page.data.prev;
195204
delete page.data.next;
205+
page.data.walkthroughProgress = {
206+
label: trackLabels[track],
207+
step: index + 1,
208+
total: trackPages.length,
209+
};
196210
if (index > 0) {
197211
page.data.prev = trackPages[index - 1].src.path;
198212
}

‎src/_includes/layout.tsx‎

Lines changed: 38 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,19 @@ import { Telegram } from "../../_components/Telegram.tsx";
33
import { GitHub } from "../../_components/GitHub.tsx";
44

55
export default (
6-
{ title, url, children, prev, next, hide_toc, toc, walkthrough }: Lume.Data,
6+
{ title, url, children, prev, next, hide_toc, toc, walkthrough, walkthroughProgress }: Lume.Data,
77
{ bc, getTitle }: Lume.Helpers,
88
) => {
99
const hasToc = !hide_toc && toc?.length > 0;
1010
const audience = walkthrough?.track === "user" || walkthrough?.track === "bot" ? walkthrough.track : undefined;
11+
const progress = walkthroughProgress &&
12+
typeof walkthroughProgress.label === "string" &&
13+
Number.isInteger(walkthroughProgress.step) &&
14+
Number.isInteger(walkthroughProgress.total) &&
15+
walkthroughProgress.step > 0 &&
16+
walkthroughProgress.step <= walkthroughProgress.total
17+
? walkthroughProgress
18+
: undefined;
1119
const searchable = !url.startsWith("/gh/") && !url.startsWith("/404") && url !== "/source-map/";
1220
const searchKind = url.startsWith("/methods/") ? "Methods" : url.startsWith("/types/") ? "Types" : url.startsWith("/server/") ? "Server" : "Guides";
1321

@@ -55,7 +63,18 @@ export default (
5563

5664
return (
5765
<aside class="toc">
58-
<nav aria-label="On this page">
66+
<button
67+
type="button"
68+
class="toc-mobile-toggle"
69+
aria-expanded="false"
70+
aria-controls="toc-navigation"
71+
>
72+
<span>On this page</span>
73+
<svg viewBox="0 0 16 16" aria-hidden="true">
74+
<path d="M3 5.5l5 5 5-5" />
75+
</svg>
76+
</button>
77+
<nav id="toc-navigation" aria-label="On this page">
5978
<div class="toc-list-wrap">
6079
<ol class="toc-list">
6180
{toc.map((v: any) => (
@@ -178,6 +197,23 @@ export default (
178197
</span>
179198
)}
180199
</h1>
200+
{progress && (
201+
<div class="walkthrough-progress" data-pagefind-ignore="all">
202+
<div class="walkthrough-progress-label">
203+
{progress.label} Walkthrough <span aria-hidden="true">·</span> {progress.step} of {progress.total}
204+
</div>
205+
<div
206+
class="walkthrough-progress-track"
207+
role="progressbar"
208+
aria-label={`${progress.label} walkthrough progress`}
209+
aria-valuemin="1"
210+
aria-valuemax={progress.total}
211+
aria-valuenow={progress.step}
212+
>
213+
<span style={`width:${(progress.step / progress.total) * 100}%`}></span>
214+
</div>
215+
</div>
216+
)}
181217
{children}
182218
{(next || prev) && (
183219
<nav class="bottom-nav" aria-label="Documentation pagination" data-pagefind-ignore="all">

‎src/_includes/style/_vars.scss‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,16 @@
33
--bg: #ffffff;
44
--bgt: rgba(255, 255, 255, 0.88);
55
--surface: #ffffff;
6-
--fg: #171916;
7-
--fgt: #62675f;
8-
--muted: #6d726a;
9-
--db: #e7e8e2;
10-
--dbt: rgba(231, 232, 226, 0.72);
11-
--border: #dcddd6;
6+
--fg: #171717;
7+
--fgt: #626262;
8+
--muted: #6d6d6d;
9+
--db: #e7e7e7;
10+
--dbt: rgba(231, 231, 231, 0.72);
11+
--border: #dddddd;
1212
--kr: #229ed9;
13-
--code-bg: #fafaf8;
14-
--inverse: #171916;
15-
--inverse-fg: #f7f7f4;
13+
--code-bg: #fafafa;
14+
--inverse: #171717;
15+
--inverse-fg: #f7f7f7;
1616
scrollbar-color: var(--border) var(--bg);
1717
}
1818

‎src/_includes/style/code-copy.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
min-height: 1.9rem;
2424
padding: 0.35rem 0.55rem;
2525
border: 1px solid var(--border);
26-
border-radius: 0.45rem;
26+
border-radius: 0;
2727
background: var(--surface);
2828
color: var(--muted);
2929
cursor: pointer;

‎src/_includes/style/code-group.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
.code-group {
22
margin: 1.25rem 0;
33
border: 1px solid var(--border);
4-
border-radius: 0.65rem;
4+
border-radius: 0;
55
overflow: hidden;
66
background: var(--code-bg);
77

‎src/_includes/style/content.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -129,7 +129,7 @@
129129
padding: 1rem 1.15rem;
130130
overflow-x: auto;
131131
border: 1px solid var(--border);
132-
border-radius: 0.65rem;
132+
border-radius: 0;
133133
background-color: var(--code-bg) !important;
134134
font-size: 0.835rem;
135135
line-height: 1.65;
@@ -149,7 +149,7 @@
149149
display: inline-block;
150150
padding: 0.08rem 0.33rem;
151151
border: 1px solid var(--border);
152-
border-radius: 0.3rem;
152+
border-radius: 0;
153153
background-color: var(--code-bg);
154154
color: var(--fg);
155155
font-size: 0.78em;
@@ -246,7 +246,7 @@
246246
pre {
247247
margin-right: -0.35rem;
248248
margin-left: -0.35rem;
249-
border-radius: 0.45rem;
249+
border-radius: 0;
250250
}
251251
}
252252
}

‎src/_includes/style/toc.scss‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -108,6 +108,83 @@
108108
}
109109
}
110110

111+
.toc-mobile-toggle {
112+
display: none;
113+
}
114+
115+
@media (max-width: 47.999rem) {
116+
.page-tools-with-toc {
117+
flex-wrap: wrap;
118+
}
119+
120+
.page-tools-with-toc .toc {
121+
display: block;
122+
width: 100%;
123+
flex: 0 0 100%;
124+
order: 3;
125+
}
126+
127+
.toc-mobile-toggle {
128+
width: 100%;
129+
padding: 0.65rem 0.75rem;
130+
align-items: center;
131+
justify-content: space-between;
132+
border: 1px solid var(--border);
133+
border-radius: 0;
134+
background: var(--surface);
135+
color: var(--fg);
136+
cursor: pointer;
137+
font-size: 0.8125rem;
138+
font-weight: 600;
139+
line-height: 1.25;
140+
141+
> svg {
142+
width: 0.75rem;
143+
height: 0.75rem;
144+
fill: none;
145+
stroke: currentColor;
146+
stroke-linecap: round;
147+
stroke-linejoin: round;
148+
stroke-width: 1.75;
149+
transition: transform 160ms ease;
150+
}
151+
152+
&[aria-expanded="true"] > svg {
153+
transform: rotate(180deg);
154+
}
155+
}
156+
157+
.toc > nav {
158+
height: auto;
159+
max-height: min(55dvh, 24rem);
160+
border: 1px solid var(--border);
161+
}
162+
163+
.toc-list {
164+
padding-top: 0.5rem !important;
165+
padding-bottom: 0.5rem !important;
166+
}
167+
168+
.toc-rail {
169+
display: none;
170+
}
171+
172+
.toc-enhanced {
173+
> .toc-mobile-toggle {
174+
display: flex;
175+
}
176+
177+
> .toc-mobile-toggle + nav {
178+
display: none;
179+
border-top: 0;
180+
}
181+
182+
> .toc-mobile-toggle[aria-expanded="true"] + nav {
183+
display: flex;
184+
}
185+
}
186+
}
187+
111188
@media (min-width: 48rem) {
112189
.side-rail .toc {
113190
display: block;

‎src/_includes/style/walkthrough.scss‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,28 @@
1111
}
1212
}
1313

14+
.walkthrough-progress {
15+
display: grid;
16+
gap: 0.35rem;
17+
margin: -0.3rem 0 0.25rem;
18+
color: var(--muted);
19+
font-size: 0.8125rem;
20+
line-height: 1.4;
21+
}
22+
23+
.walkthrough-progress-track {
24+
width: 100%;
25+
height: 2px;
26+
overflow: hidden;
27+
background: var(--border);
28+
29+
> span {
30+
display: block;
31+
height: 100%;
32+
background: var(--kr);
33+
}
34+
}
35+
1436
ol.walkthrough-list {
1537
margin: 1rem 0;
1638
padding-left: 1.5rem;

‎src/paid-media.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ walkthrough:
66
order: 20
77
---
88

9-
Bots can require users to pay Telegram Stars before viewing a photo or video.
9+
Users and bots can require users to pay Telegram Stars before viewing a photo or video.
1010

1111
## Sending Paid Media
1212

‎src/static/script.js‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -242,6 +242,7 @@ function initIndexSubsections() {
242242

243243
function initToc() {
244244
const toc = document.querySelector(".toc");
245+
const mobileToggle = toc?.querySelector(".toc-mobile-toggle");
245246
const viewport = toc?.querySelector(".toc-list-wrap");
246247
const list = toc?.querySelector(".toc-list");
247248
const rail = toc?.querySelector(".toc-rail");
@@ -277,6 +278,13 @@ function initToc() {
277278

278279
toc.classList.add("toc-enhanced");
279280

281+
function setMobileTocOpen(open, focusToggle = false) {
282+
if (!(mobileToggle instanceof HTMLButtonElement)) return;
283+
mobileToggle.setAttribute("aria-expanded", String(open));
284+
if (open) relayout();
285+
if (focusToggle) mobileToggle.focus({ preventScroll: true });
286+
}
287+
280288
function parentItem(item) {
281289
return item.parentElement?.closest(".toc-item");
282290
}
@@ -551,6 +559,8 @@ function initToc() {
551559
if (globalThis.history.replaceState) globalThis.history.replaceState(null, "", hash);
552560
else globalThis.location.hash = hash;
553561

562+
setMobileTocOpen(false);
563+
554564
globalThis.clearTimeout(settleTimer);
555565
settleTimer = globalThis.setTimeout(endProgrammaticScroll, 2000);
556566
}
@@ -574,6 +584,11 @@ function initToc() {
574584
}
575585

576586
function onKeyDown(event) {
587+
if (event.key === "Escape" && mobileToggle?.getAttribute("aria-expanded") === "true") {
588+
event.preventDefault();
589+
setMobileTocOpen(false, true);
590+
return;
591+
}
577592
if (["ArrowDown", "ArrowUp", "PageDown", "PageUp", "Home", "End", " "].includes(event.key)) releaseLockedEntry();
578593
}
579594

@@ -588,6 +603,9 @@ function initToc() {
588603
});
589604
}
590605

606+
mobileToggle?.addEventListener("click", () => {
607+
setMobileTocOpen(mobileToggle.getAttribute("aria-expanded") !== "true");
608+
});
591609
toc.addEventListener("click", onClick);
592610
document.addEventListener("click", onDocumentFragmentClick);
593611
globalThis.addEventListener("scroll", onScroll, { passive: true });

0 commit comments

Comments
 (0)