Skip to content

Commit ae53a77

Browse files
dysfuncdysfunc
authored
Merge pull request #10 from dysfunc/docs
📖 add github ribbon to docs page
2 parents 0e1207a + 2ec7212 commit ae53a77

File tree

5 files changed

+138
-104
lines changed

5 files changed

+138
-104
lines changed

‎docs/index.html

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,17 +13,18 @@
1313
<meta name="keywords" content="viewability, viewable, tracking, ads, lazy, lazy-loading, svelte, svelte component, intersection observer, observer" />
1414

1515
<meta property="og:url" content="" />
16-
<meta property="og:title" content="svelte-viewable" />
16+
<meta property="og:title" content="@svelte-plugins/viewable" />
1717
<meta property="og:description" content="A simple rule-based approach to tracking element viewability." />
1818
<meta property="og:image" content="favicon.png" />
1919

2020
<meta name="twitter:card" content="summary" />
2121
<meta name="twitter:creator" content="@norcalkieran" />
22-
<meta name="twitter:title" content="svelte-viewable" />
22+
<meta name="twitter:title" content="@svelte-plugins/viewable" />
2323
<meta name="twitter:description" content="A simple rule-based approach to tracking element viewability." />
2424
<meta name="twitter:image" content="favicon.png" />
2525
</head>
2626
<body>
27+
<a href="https://github.com/svelte-plugins/viewable" class="github-ribbon"><img loading="lazy" width="149" height="149" src="https://github.blog/wp-content/uploads/2008/12/forkme_right_darkblue_121621.png?resize=149%2C149" class="attachment-full size-full" alt="Fork me on GitHub" data-recalc-dims="1"></a>
2728
<script type="module" src="/src/index.js"></script>
2829
</body>
2930
</html>

‎docs/public/global.css

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,3 +72,10 @@ button:not(:disabled):active {
7272
button:focus {
7373
border-color: #666;
7474
}
75+
76+
.github-ribbon {
77+
position: fixed;
78+
right: 0;
79+
top: 0;
80+
z-index: 100;
81+
}

‎docs/src/App.svelte

Lines changed: 126 additions & 100 deletions
Original file line numberDiff line numberDiff line change
@@ -2,128 +2,150 @@
22
import ContainerExample from './ContainerExample.svelte';
33
44
let enableObstructionDetection = false;
5+
let status = 'Hidden';
56
67
const handleClick = () => (enableObstructionDetection = !enableObstructionDetection);
7-
</script>
88
9-
<button id="obstructions" data-testid="toggle-obstructions" on:click={handleClick}>
10-
Toggle Obstructions
11-
</button>
9+
$: status = enableObstructionDetection ? 'Visible' : 'Hidden';
10+
</script>
1211

1312
{#if enableObstructionDetection}
1413
<div id="overlay"></div>
1514
{/if}
1615

17-
<div class="container flex flex-col px-4 m-8 mx-auto space-y-4 sm:px-6 lg:px-8">
18-
<div class="container">
19-
<p class="badge">Open dev console to see debug output.</p>
20-
</div>
21-
<div class="flex justify-between">
22-
<div class="w-1/2 mr-4 h-64 block"></div>
23-
<div class="w-1/2 flex flex-col space-y-2">
24-
<div class="w-full h-3 block"></div>
16+
<header>
17+
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
18+
<button id="obstructions" class="badge" data-testid="toggle-obstructions" class:on={enableObstructionDetection} on:click={handleClick}>
19+
Obstructions: {status}
20+
</button>
21+
<p class="badge"><b>Hint:</b> Open dev console to see debug output.</p>
22+
</div>
23+
</header>
24+
25+
<main>
26+
<div class="container flex flex-col px-4 m-8 mx-auto space-y-4 sm:px-6 lg:px-8">
27+
<div class="flex justify-between">
28+
<div class="w-1/2 mr-4 h-64 block"></div>
29+
<div class="w-1/2 flex flex-col space-y-2">
30+
<div class="w-full h-3 block"></div>
31+
<div class="w-full h-2 block"></div>
32+
<div class="w-full h-2 block"></div>
33+
<div class="w-full h-2 block"></div>
34+
<div class="w-full h-2 block"></div>
35+
<div class="w-full h-2 block"></div>
36+
<div class="w-3/4 h-2 block"></div>
37+
</div>
38+
</div>
39+
<div class="flex flex-col space-y-2">
40+
<div class="w-full h-2 block"></div>
41+
<div class="w-full h-2 block"></div>
42+
<div class="w-full h-2 block"></div>
2543
<div class="w-full h-2 block"></div>
2644
<div class="w-full h-2 block"></div>
2745
<div class="w-full h-2 block"></div>
46+
<div class="w-full h-2 block"></div>
47+
<div class="w-1/5 h-2 block"></div>
48+
</div>
49+
<div class="flex">
50+
<div class="flex-1 h-64 block" data-testid="top">
51+
<ContainerExample enableObstructionDetection={enableObstructionDetection} />
52+
</div>
53+
</div>
54+
<div class="flex flex-col w-4/6 space-y-2">
55+
<div class="w-full h-2 block"></div>
56+
<div class="w-full h-2 block"></div>
57+
<div class="w-full h-2 block"></div>
58+
<div class="w-3/5 h-2 block"></div>
59+
</div>
60+
<div class="flex items-stretch h-48">
61+
<div class="flex-1 mr-4 block"></div>
62+
<div class="flex-1 block"></div>
63+
<div class="flex-1 ml-4 block"></div>
64+
</div>
65+
<div class="flex flex-col w-4/6 space-y-2">
2866
<div class="w-full h-2 block"></div>
67+
<div class="w-full h-2 block"></div>
68+
<div class="w-full h-2 block"></div>
69+
<div class="w-3/5 h-2 block"></div>
70+
</div>
71+
<div class="flex">
72+
<div class="flex-1 h-64 block" data-testid="middle">
73+
<ContainerExample enableObstructionDetection={enableObstructionDetection}>
74+
Hello World!
75+
</ContainerExample>
76+
</div>
77+
</div>
78+
<div class="flex flex-col space-y-2">
2979
<div class="w-full h-2 block"></div>
3080
<div class="w-3/4 h-2 block"></div>
81+
<div class="w-2/3 h-2 block"></div>
82+
<div class="w-full h-2 block"></div>
83+
<div class="w-full h-2 block"></div>
84+
<div class="w-4/5 h-2 block"></div>
85+
<div class="w-3/5 h-2 block"></div>
86+
<div class="w-full h-2 block"></div>
3187
</div>
32-
</div>
33-
<div class="flex flex-col space-y-2">
34-
<div class="w-full h-2 block"></div>
35-
<div class="w-full h-2 block"></div>
36-
<div class="w-full h-2 block"></div>
37-
<div class="w-full h-2 block"></div>
38-
<div class="w-full h-2 block"></div>
39-
<div class="w-full h-2 block"></div>
40-
<div class="w-full h-2 block"></div>
41-
<div class="w-1/5 h-2 block"></div>
42-
</div>
43-
<div class="flex">
44-
<div class="flex-1 h-64 block" data-testid="top">
45-
<ContainerExample enableObstructionDetection={enableObstructionDetection} />
88+
<div class="flex items-stretch h-48">
89+
<div class="flex-1 mr-2 block"></div>
90+
<div class="flex-1 ml-2 block"></div>
4691
</div>
47-
</div>
48-
<div class="flex flex-col w-4/6 space-y-2">
49-
<div class="w-full h-2 block"></div>
50-
<div class="w-full h-2 block"></div>
51-
<div class="w-full h-2 block"></div>
52-
<div class="w-3/5 h-2 block"></div>
53-
</div>
54-
<div class="flex items-stretch h-48">
55-
<div class="flex-1 mr-4 block"></div>
56-
<div class="flex-1 block"></div>
57-
<div class="flex-1 ml-4 block"></div>
58-
</div>
59-
<div class="flex flex-col w-4/6 space-y-2">
60-
<div class="w-full h-2 block"></div>
61-
<div class="w-full h-2 block"></div>
62-
<div class="w-full h-2 block"></div>
63-
<div class="w-3/5 h-2 block"></div>
64-
</div>
65-
<div class="flex">
66-
<div class="flex-1 h-64 block" data-testid="middle">
67-
<ContainerExample enableObstructionDetection={enableObstructionDetection}>
68-
Hello World!
69-
</ContainerExample>
92+
<div class="flex items-stretch h-48">
93+
<div class="flex-1 mr-4 block"></div>
94+
<div class="flex-1 block" data-testid="bottom">
95+
<ContainerExample />
96+
</div>
97+
<div class="flex-1 ml-4 block"></div>
7098
</div>
71-
</div>
72-
<div class="flex flex-col space-y-2">
73-
<div class="w-full h-2 block"></div>
74-
<div class="w-3/4 h-2 block"></div>
75-
<div class="w-2/3 h-2 block"></div>
76-
<div class="w-full h-2 block"></div>
77-
<div class="w-full h-2 block"></div>
78-
<div class="w-4/5 h-2 block"></div>
79-
<div class="w-3/5 h-2 block"></div>
80-
<div class="w-full h-2 block"></div>
81-
</div>
82-
<div class="flex items-stretch h-48">
83-
<div class="flex-1 mr-2 block"></div>
84-
<div class="flex-1 ml-2 block"></div>
85-
</div>
86-
<div class="flex items-stretch h-48">
87-
<div class="flex-1 mr-4 block"></div>
88-
<div class="flex-1 block" data-testid="bottom">
89-
<ContainerExample />
99+
<div class="flex flex-col space-y-2">
100+
<div class="w-full h-2 block"></div>
101+
<div class="w-full h-2 block"></div>
102+
<div class="w-full h-2 block"></div>
103+
</div>
104+
<div class="flex flex-col w-4/6 space-y-2">
105+
<div class="w-full h-2 block"></div>
106+
<div class="w-full h-2 block"></div>
107+
<div class="w-full h-2 block"></div>
108+
<div class="w-3/5 h-2 block"></div>
109+
</div>
110+
<div class="flex items-stretch h-48">
111+
<div class="flex-1 mr-4 block"></div>
112+
<div class="flex-1 block"></div>
113+
<div class="flex-1 ml-4 block"></div>
114+
</div>
115+
<div class="flex">
116+
<div class="flex-1 h-64 block"></div>
117+
</div>
118+
<div class="flex flex-col w-4/6 space-y-2">
119+
<div class="w-full h-2 block"></div>
120+
<div class="w-full h-2 block"></div>
121+
<div class="w-full h-2 block"></div>
122+
<div class="w-3/5 h-2 block"></div>
90123
</div>
91-
<div class="flex-1 ml-4 block"></div>
92-
</div>
93-
<div class="flex flex-col space-y-2">
94-
<div class="w-full h-2 block"></div>
95-
<div class="w-full h-2 block"></div>
96-
<div class="w-full h-2 block"></div>
97-
</div>
98-
<div class="flex flex-col w-4/6 space-y-2">
99-
<div class="w-full h-2 block"></div>
100-
<div class="w-full h-2 block"></div>
101-
<div class="w-full h-2 block"></div>
102-
<div class="w-3/5 h-2 block"></div>
103-
</div>
104-
<div class="flex items-stretch h-48">
105-
<div class="flex-1 mr-4 block"></div>
106-
<div class="flex-1 block"></div>
107-
<div class="flex-1 ml-4 block"></div>
108-
</div>
109-
<div class="flex">
110-
<div class="flex-1 h-64 block"></div>
111-
</div>
112-
<div class="flex flex-col w-4/6 space-y-2">
113-
<div class="w-full h-2 block"></div>
114-
<div class="w-full h-2 block"></div>
115-
<div class="w-full h-2 block"></div>
116-
<div class="w-3/5 h-2 block"></div>
117124
</div>
118-
</div>
125+
</main>
119126

120127
<style>
128+
header {
129+
background-color: #fff;
130+
box-shadow: 0 1px 8px rgba(0,0,0, .2);
131+
left: 0;
132+
padding: 8px 0;
133+
position: fixed;
134+
right: 0;
135+
top: 0;
136+
z-index: 90;
137+
}
138+
139+
main {
140+
position: relative;
141+
top: 40px;
142+
}
143+
121144
.badge {
122145
background-color: #ffeaad;
123146
border-radius: 4px;
124147
display: inline-block;
125148
color: #111;
126-
display: inline-block;
127149
padding: 8px 16px;
128150
}
129151
@@ -140,10 +162,14 @@
140162
}
141163
142164
#obstructions {
143-
padding: 8px 16px;
144-
position: fixed;
145-
right: 4px;
146-
top: 4px;
165+
background: #eee;
166+
border: 0;
167+
margin-right: 8px;
168+
}
169+
170+
#obstructions.on {
171+
background-color: #4a90e2;
172+
color: #fff;
147173
}
148174
149175
#overlay {

‎tests/integration/obstructions.spec.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ describe('obstructions.spec.js', () => {
1414

1515
cy.wait(1000);
1616

17-
cy.scrollTo(0, 780, { duration: 800 });
17+
cy.scrollTo(0, 760, { duration: 800 });
1818

1919
cy.findByTestId('middle').contains(firstRule);
2020

‎tests/integration/rules.spec.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ describe('rules.spec.js', () => {
3838

3939
cy.findByTestId('middle').contains(secondRule);
4040

41-
cy.scrollTo(0, 480, { duration: 1000 });
41+
cy.scrollTo(0, 400, { duration: 1000 });
4242

4343
cy.wait(3000);
4444

0 commit comments

Comments
 (0)