-
Notifications
You must be signed in to change notification settings - Fork 0
/
test-page.html
240 lines (231 loc) · 11.5 KB
/
test-page.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>wc-minimap Test Page</title>
<script type="module" src="/wc-minimap.js"></script>
<style>
:root {
scroll-behavior: smooth;
}
body>div {
max-width: 65ch;
margin-inline: auto;
}
main {
margin-inline: auto;
}
aside {
background: white;
padding-inline: 0.25rem;
border-radius: 0.25rem;
position: fixed;
bottom: 2rem;
}
@media (min-width: 768px) {
body>div {
display: grid;
grid-template-columns: 1fr auto;
}
aside {
display: block;
top: 35vh;
left: 1rem;
bottom: initial;
}
}
</style>
</head>
<body>
<div>
<aside>
<wc-minimap data-article-selector="article"></wc-minimap>
</aside>
<main>
<article>
<h1>Heading 1</h1>
<p>
Lorem ipsum odor amet, consectetuer adipiscing elit. Ridiculus quisque
gravida sem netus; lectus nam tristique posuere? Turpis eu curabitur
consectetur mi tempor. Montes sagittis dolor pulvinar nibh in eros urna
natoque. Tempus adipiscing elementum porta id, pharetra per lectus.
Aliquet tellus tempor vel tempor inceptos. Malesuada dis magnis facilisi
in dolor. Consectetur bibendum gravida pharetra potenti litora praesent
quam nec. Viverra posuere eget finibus nunc ultricies aptent ligula.
</p>
<p>
<img src="https://picsum.photos/seed/codepen/200/300" width="200" height="300" alt="A placeholder image" />
</p>
<p>
Lorem ipsum odor amet, consectetuer adipiscing elit. Ridiculus quisque
gravida sem netus; lectus nam tristique posuere? Turpis eu curabitur
consectetur mi tempor. Montes sagittis dolor pulvinar nibh in eros urna
natoque. Tempus adipiscing elementum porta id, pharetra per lectus.
Aliquet tellus tempor vel tempor inceptos. Malesuada dis magnis facilisi
in dolor. Consectetur bibendum gravida pharetra potenti litora praesent
quam nec. Viverra posuere eget finibus nunc ultricies aptent ligula.
</p>
<h2>Heading 1.1</h2>
<p>
Efficitur elit pulvinar torquent turpis suspendisse sem? Nulla conubia
scelerisque curabitur sapien nunc tellus aptent. Semper dapibus curabitur
consequat turpis malesuada velit. Mollis natoque habitant blandit maecenas
sed velit augue purus vel. Curae arcu orci; penatibus porttitor
ullamcorper tempor taciti. Dapibus accumsan cras erat ante aptent quis
lacus condimentum in. Adipiscing duis a dignissim egestas nascetur montes
neque.
</p>
<p>
<pre><code is:raw>const fibonacci = () => {
const sequence = [0, 1];
for (let i = 2; i < 10; i++) {
sequence.push(sequence[i - 1] + sequence[i - 2]);
}
return sequence;
}</code></pre>
</p>
<p>
Lorem ipsum odor amet, consectetuer adipiscing elit. Ridiculus quisque
gravida sem netus; lectus nam tristique posuere? Turpis eu curabitur
consectetur mi tempor. Montes sagittis dolor pulvinar nibh in eros urna
natoque. Tempus adipiscing elementum porta id, pharetra per lectus.
Aliquet tellus tempor vel tempor inceptos. Malesuada dis magnis facilisi
in dolor. Consectetur bibendum gravida pharetra potenti litora praesent
quam nec. Viverra posuere eget finibus nunc ultricies aptent ligula.
</p>
<h3>Heading 1.1.1</h3>
<p>
Proin risus laoreet sem netus arcu imperdiet. Rutrum euismod aliquam donec
eros; elementum molestie et. Elementum donec non montes, mollis interdum
habitant. Fermentum at auctor nibh mollis luctus porta platea. At nisi est
vulputate ipsum consectetur nisl a porta. Penatibus magna congue id nisi
justo natoque. Suspendisse urna vel nulla rhoncus rutrum cras dignissim.
Inceptos ultrices convallis torquent, est felis venenatis? Ridiculus
maximus rhoncus viverra felis ante ultrices convallis.
</p>
<p>
Lorem ipsum odor amet, consectetuer adipiscing elit. Ridiculus quisque
gravida sem netus; lectus nam tristique posuere? Turpis eu curabitur
consectetur mi tempor. Montes sagittis dolor pulvinar nibh in eros urna
natoque. Tempus adipiscing elementum porta id, pharetra per lectus.
Aliquet tellus tempor vel tempor inceptos. Malesuada dis magnis facilisi
in dolor. Consectetur bibendum gravida pharetra potenti litora praesent
quam nec. Viverra posuere eget finibus nunc ultricies aptent ligula.
</p>
<h3>Heading 1.1.2</h3>
<p>
Velit consequat fermentum malesuada, nostra varius nisi. Commodo at amet
condimentum enim natoque cubilia. Euismod tristique vestibulum tincidunt
venenatis fringilla dui himenaeos scelerisque. Enim lacinia mollis dui
lectus phasellus magna. Lectus fringilla sit fusce integer risus odio
maximus quam. Semper tristique a maximus, quam lorem nec at. Massa duis
vehicula montes lacus parturient nostra curabitur. Dignissim fermentum
purus tellus aliquet ad.
</p>
<p>
Pulvinar turpis morbi habitant sit per malesuada, mi sociosqu. Gravida
vehicula platea euismod, pulvinar leo congue elit fusce. Pulvinar feugiat
ad imperdiet nisl; proin convallis hendrerit. Nunc ullamcorper per
ullamcorper erat sed, vestibulum bibendum suspendisse. Condimentum
convallis tincidunt maximus viverra pretium hendrerit at sed. Platea
dignissim malesuada ad magna nascetur vehicula sapien. Quam semper augue
ridiculus dictum posuere finibus.
</p>
<h2>Heading 1.2</h2>
<p>
Curae libero cursus morbi rhoncus pharetra commodo consectetur. Finibus
nullam taciti id orci vitae, netus consectetur nibh praesent. Diam sodales
varius natoque magna lectus eleifend, nulla volutpat. Hendrerit parturient
convallis blandit integer proin. Urna libero vitae etiam lorem nibh
convallis. Netus rhoncus phasellus pharetra tortor eros felis. Lorem
posuere nec accumsan aliquet rhoncus proin taciti convallis.
</p>
<h3>Heading 1.2.1</h3>
<p>
Apotenti parturient morbi dis pellentesque etiam, eleifend ac risus.
Consectetur blandit nisi massa accumsan vitae sit neque maecenas lacinia.
Nibh etiam luctus porta elementum ad nulla sed. Vel sociosqu congue
laoreet ornare nullam ornare luctus. Vulputate elementum justo natoque
vitae magnis mus justo diam curae. Cursus sapien habitasse fusce augue
augue finibus platea. Diam quisque habitasse ornare cubilia mollis non.
</p>
<p>
Lorem ipsum odor amet, consectetuer adipiscing elit. Ridiculus quisque
gravida sem netus; lectus nam tristique posuere? Turpis eu curabitur
consectetur mi tempor. Montes sagittis dolor pulvinar nibh in eros urna
natoque. Tempus adipiscing elementum porta id, pharetra per lectus.
Aliquet tellus tempor vel tempor inceptos. Malesuada dis magnis facilisi
in dolor. Consectetur bibendum gravida pharetra potenti litora praesent
quam nec. Viverra posuere eget finibus nunc ultricies aptent ligula.
</p>
<h4>Heading 1.2.1.1</h4>
<p>
Mollis vel euismod ornare rutrum quisque pellentesque. Amet aliquet velit
tellus euismod, tempus nisl phasellus proin. Scelerisque dignissim netus
ridiculus ornare per eget condimentum. Per tortor nulla lobortis; maximus
sociosqu finibus. Dignissim suspendisse mattis lacinia donec ut bibendum
porta. Habitasse bibendum neque iaculis etiam ridiculus aliquam. Arcu
vestibulum egestas fermentum felis etiam.
</p>
<h2>Heading 1.2</h2>
<p>
Molestie ornare aliquet praesent habitasse, vivamus adipiscing odio mi.
Semper quam scelerisque facilisi habitasse accumsan; blandit posuere.
Risus mattis efficitur curabitur magna dignissim ornare neque. Nullam
litora adipiscing non dui nam ullamcorper, euismod erat commodo. Dictum
risus ultrices eget nisl ut arcu interdum gravida. Tristique placerat
suscipit elementum diam tempor purus vestibulum. Ut feugiat vulputate
aliquam massa potenti vulputate odio. Vehicula ullamcorper facilisi magnis
aptent maximus tellus. Dui ridiculus nostra varius vitae aenean vitae
vivamus venenatis. Nisl cubilia etiam ridiculus odio metus.
</p>
<p>
Lorem ipsum odor amet, consectetuer adipiscing elit. Ridiculus quisque
gravida sem netus; lectus nam tristique posuere? Turpis eu curabitur
consectetur mi tempor. Montes sagittis dolor pulvinar nibh in eros urna
natoque. Tempus adipiscing elementum porta id, pharetra per lectus.
Aliquet tellus tempor vel tempor inceptos. Malesuada dis magnis facilisi
in dolor. Consectetur bibendum gravida pharetra potenti litora praesent
quam nec. Viverra posuere eget finibus nunc ultricies aptent ligula.
</p>
<h1>Heading 2</h1>
<p>
Vestibulum a semper varius, ipsum luctus commodo etiam ligula nostra.
Sociosqu donec phasellus tempus ex magnis libero felis. Himenaeos quisque
maximus vel magna pharetra dapibus a magna. Amet est dignissim facilisis
condimentum erat primis augue varius. Tristique vulputate aptent hendrerit
diam malesuada nibh pellentesque. Luctus curae rutrum pellentesque
habitant vel. Ut nam aptent inceptos quam viverra, ex et.
</p>
<p>
Lorem ipsum odor amet, consectetuer adipiscing elit. Ridiculus quisque
gravida sem netus; lectus nam tristique posuere? Turpis eu curabitur
consectetur mi tempor. Montes sagittis dolor pulvinar nibh in eros urna
natoque. Tempus adipiscing elementum porta id, pharetra per lectus.
Aliquet tellus tempor vel tempor inceptos. Malesuada dis magnis facilisi
in dolor. Consectetur bibendum gravida pharetra potenti litora praesent
quam nec. Viverra posuere eget finibus nunc ultricies aptent ligula.
</p>
<h2>Heading 2.1</h2>
<p>
Vestibulum a semper varius, ipsum luctus commodo etiam ligula nostra.
Sociosqu donec phasellus tempus ex magnis libero felis. Himenaeos quisque
maximus vel magna pharetra dapibus a magna. Amet est dignissim facilisis
condimentum erat primis augue varius. Tristique vulputate aptent hendrerit
diam malesuada nibh pellentesque. Luctus curae rutrum pellentesque
habitant vel. Ut nam aptent inceptos quam viverra, ex et.
</p>
<p>
Vestibulum a semper varius, ipsum luctus commodo etiam ligula nostra.
Sociosqu donec phasellus tempus ex magnis libero felis. Himenaeos quisque
maximus vel magna pharetra dapibus a magna. Amet est dignissim facilisis
condimentum erat primis augue varius. Tristique vulputate aptent hendrerit
diam malesuada nibh pellentesque. Luctus curae rutrum pellentesque
habitant vel. Ut nam aptent inceptos quam viverra, ex et.
</p>
</article>
</main>
</div>
</body>
</html>