Skip to content

Commit

Permalink
Merge pull request #10 from dysfunc/docs
Browse files Browse the repository at this point in the history 
📖  add github ribbon to docs page
  • Loading branch information
@dysfunc
dysfunc authored Apr 1, 2021
2 parents 0e1207a + 2ec7212 commit ae53a77
Show file tree
Hide file tree
Showing 5 changed files with 138 additions and 104 deletions.
5 changes: 3 additions & 2 deletions docs/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,17 +13,18 @@
<meta name="keywords" content="viewability, viewable, tracking, ads, lazy, lazy-loading, svelte, svelte component, intersection observer, observer" />

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

<meta name="twitter:card" content="summary" />
<meta name="twitter:creator" content="@norcalkieran" />
<meta name="twitter:title" content="svelte-viewable" />
<meta name="twitter:title" content="@svelte-plugins/viewable" />
<meta name="twitter:description" content="A simple rule-based approach to tracking element viewability." />
<meta name="twitter:image" content="favicon.png" />
</head>
<body>
<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>
<script type="module" src="/src/index.js"></script>
</body>
</html>
7 changes: 7 additions & 0 deletions docs/public/global.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,3 +72,10 @@ button:not(:disabled):active {
button:focus {
border-color: #666;
}

.github-ribbon {
position: fixed;
right: 0;
top: 0;
z-index: 100;
}
226 changes: 126 additions & 100 deletions docs/src/App.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,128 +2,150 @@
import ContainerExample from './ContainerExample.svelte';
let enableObstructionDetection = false;
let status = 'Hidden';
const handleClick = () => (enableObstructionDetection = !enableObstructionDetection);
</script>
<button id="obstructions" data-testid="toggle-obstructions" on:click={handleClick}>
Toggle Obstructions
</button>
$: status = enableObstructionDetection ? 'Visible' : 'Hidden';
</script>

{#if enableObstructionDetection}
<div id="overlay"></div>
{/if}

<div class="container flex flex-col px-4 m-8 mx-auto space-y-4 sm:px-6 lg:px-8">
<div class="container">
<p class="badge">Open dev console to see debug output.</p>
</div>
<div class="flex justify-between">
<div class="w-1/2 mr-4 h-64 block"></div>
<div class="w-1/2 flex flex-col space-y-2">
<div class="w-full h-3 block"></div>
<header>
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<button id="obstructions" class="badge" data-testid="toggle-obstructions" class:on={enableObstructionDetection} on:click={handleClick}>
Obstructions: {status}
</button>
<p class="badge"><b>Hint:</b> Open dev console to see debug output.</p>
</div>
</header>

<main>
<div class="container flex flex-col px-4 m-8 mx-auto space-y-4 sm:px-6 lg:px-8">
<div class="flex justify-between">
<div class="w-1/2 mr-4 h-64 block"></div>
<div class="w-1/2 flex flex-col space-y-2">
<div class="w-full h-3 block"></div>
<div class="w-full h-2 block"></div>
<div class="w-full h-2 block"></div>
<div class="w-full h-2 block"></div>
<div class="w-full h-2 block"></div>
<div class="w-full h-2 block"></div>
<div class="w-3/4 h-2 block"></div>
</div>
</div>
<div class="flex flex-col space-y-2">
<div class="w-full h-2 block"></div>
<div class="w-full h-2 block"></div>
<div class="w-full h-2 block"></div>
<div class="w-full h-2 block"></div>
<div class="w-full h-2 block"></div>
<div class="w-full h-2 block"></div>
<div class="w-full h-2 block"></div>
<div class="w-1/5 h-2 block"></div>
</div>
<div class="flex">
<div class="flex-1 h-64 block" data-testid="top">
<ContainerExample enableObstructionDetection={enableObstructionDetection} />
</div>
</div>
<div class="flex flex-col w-4/6 space-y-2">
<div class="w-full h-2 block"></div>
<div class="w-full h-2 block"></div>
<div class="w-full h-2 block"></div>
<div class="w-3/5 h-2 block"></div>
</div>
<div class="flex items-stretch h-48">
<div class="flex-1 mr-4 block"></div>
<div class="flex-1 block"></div>
<div class="flex-1 ml-4 block"></div>
</div>
<div class="flex flex-col w-4/6 space-y-2">
<div class="w-full h-2 block"></div>
<div class="w-full h-2 block"></div>
<div class="w-full h-2 block"></div>
<div class="w-3/5 h-2 block"></div>
</div>
<div class="flex">
<div class="flex-1 h-64 block" data-testid="middle">
<ContainerExample enableObstructionDetection={enableObstructionDetection}>
Hello World!
</ContainerExample>
</div>
</div>
<div class="flex flex-col space-y-2">
<div class="w-full h-2 block"></div>
<div class="w-3/4 h-2 block"></div>
<div class="w-2/3 h-2 block"></div>
<div class="w-full h-2 block"></div>
<div class="w-full h-2 block"></div>
<div class="w-4/5 h-2 block"></div>
<div class="w-3/5 h-2 block"></div>
<div class="w-full h-2 block"></div>
</div>
</div>
<div class="flex flex-col space-y-2">
<div class="w-full h-2 block"></div>
<div class="w-full h-2 block"></div>
<div class="w-full h-2 block"></div>
<div class="w-full h-2 block"></div>
<div class="w-full h-2 block"></div>
<div class="w-full h-2 block"></div>
<div class="w-full h-2 block"></div>
<div class="w-1/5 h-2 block"></div>
</div>
<div class="flex">
<div class="flex-1 h-64 block" data-testid="top">
<ContainerExample enableObstructionDetection={enableObstructionDetection} />
<div class="flex items-stretch h-48">
<div class="flex-1 mr-2 block"></div>
<div class="flex-1 ml-2 block"></div>
</div>
</div>
<div class="flex flex-col w-4/6 space-y-2">
<div class="w-full h-2 block"></div>
<div class="w-full h-2 block"></div>
<div class="w-full h-2 block"></div>
<div class="w-3/5 h-2 block"></div>
</div>
<div class="flex items-stretch h-48">
<div class="flex-1 mr-4 block"></div>
<div class="flex-1 block"></div>
<div class="flex-1 ml-4 block"></div>
</div>
<div class="flex flex-col w-4/6 space-y-2">
<div class="w-full h-2 block"></div>
<div class="w-full h-2 block"></div>
<div class="w-full h-2 block"></div>
<div class="w-3/5 h-2 block"></div>
</div>
<div class="flex">
<div class="flex-1 h-64 block" data-testid="middle">
<ContainerExample enableObstructionDetection={enableObstructionDetection}>
Hello World!
</ContainerExample>
<div class="flex items-stretch h-48">
<div class="flex-1 mr-4 block"></div>
<div class="flex-1 block" data-testid="bottom">
<ContainerExample />
</div>
<div class="flex-1 ml-4 block"></div>
</div>
</div>
<div class="flex flex-col space-y-2">
<div class="w-full h-2 block"></div>
<div class="w-3/4 h-2 block"></div>
<div class="w-2/3 h-2 block"></div>
<div class="w-full h-2 block"></div>
<div class="w-full h-2 block"></div>
<div class="w-4/5 h-2 block"></div>
<div class="w-3/5 h-2 block"></div>
<div class="w-full h-2 block"></div>
</div>
<div class="flex items-stretch h-48">
<div class="flex-1 mr-2 block"></div>
<div class="flex-1 ml-2 block"></div>
</div>
<div class="flex items-stretch h-48">
<div class="flex-1 mr-4 block"></div>
<div class="flex-1 block" data-testid="bottom">
<ContainerExample />
<div class="flex flex-col space-y-2">
<div class="w-full h-2 block"></div>
<div class="w-full h-2 block"></div>
<div class="w-full h-2 block"></div>
</div>
<div class="flex flex-col w-4/6 space-y-2">
<div class="w-full h-2 block"></div>
<div class="w-full h-2 block"></div>
<div class="w-full h-2 block"></div>
<div class="w-3/5 h-2 block"></div>
</div>
<div class="flex items-stretch h-48">
<div class="flex-1 mr-4 block"></div>
<div class="flex-1 block"></div>
<div class="flex-1 ml-4 block"></div>
</div>
<div class="flex">
<div class="flex-1 h-64 block"></div>
</div>
<div class="flex flex-col w-4/6 space-y-2">
<div class="w-full h-2 block"></div>
<div class="w-full h-2 block"></div>
<div class="w-full h-2 block"></div>
<div class="w-3/5 h-2 block"></div>
</div>
<div class="flex-1 ml-4 block"></div>
</div>
<div class="flex flex-col space-y-2">
<div class="w-full h-2 block"></div>
<div class="w-full h-2 block"></div>
<div class="w-full h-2 block"></div>
</div>
<div class="flex flex-col w-4/6 space-y-2">
<div class="w-full h-2 block"></div>
<div class="w-full h-2 block"></div>
<div class="w-full h-2 block"></div>
<div class="w-3/5 h-2 block"></div>
</div>
<div class="flex items-stretch h-48">
<div class="flex-1 mr-4 block"></div>
<div class="flex-1 block"></div>
<div class="flex-1 ml-4 block"></div>
</div>
<div class="flex">
<div class="flex-1 h-64 block"></div>
</div>
<div class="flex flex-col w-4/6 space-y-2">
<div class="w-full h-2 block"></div>
<div class="w-full h-2 block"></div>
<div class="w-full h-2 block"></div>
<div class="w-3/5 h-2 block"></div>
</div>
</div>
</main>

<style>
header {
background-color: #fff;
box-shadow: 0 1px 8px rgba(0,0,0, .2);
left: 0;
padding: 8px 0;
position: fixed;
right: 0;
top: 0;
z-index: 90;
}
main {
position: relative;
top: 40px;
}
.badge {
background-color: #ffeaad;
border-radius: 4px;
display: inline-block;
color: #111;
display: inline-block;
padding: 8px 16px;
}
Expand All @@ -140,10 +162,14 @@
}
#obstructions {
padding: 8px 16px;
position: fixed;
right: 4px;
top: 4px;
background: #eee;
border: 0;
margin-right: 8px;
}
#obstructions.on {
background-color: #4a90e2;
color: #fff;
}
#overlay {
Expand Down
2 changes: 1 addition & 1 deletion tests/integration/obstructions.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ describe('obstructions.spec.js', () => {

cy.wait(1000);

cy.scrollTo(0, 780, { duration: 800 });
cy.scrollTo(0, 760, { duration: 800 });

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

Expand Down
2 changes: 1 addition & 1 deletion tests/integration/rules.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ describe('rules.spec.js', () => {

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

cy.scrollTo(0, 480, { duration: 1000 });
cy.scrollTo(0, 400, { duration: 1000 });

cy.wait(3000);

Expand Down

0 comments on commit ae53a77

Please sign in to comment.