add github ribbon to docs page

dysfunc · dysfunc · commit 03be90e4eec8 · 2021-04-01T13:23:23.000-07:00
diff --git a/docs/index.html b/docs/index.html
@@ -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>
diff --git a/docs/public/global.css b/docs/public/global.css
@@ -72,3 +72,10 @@ button:not(:disabled):active {
 button:focus {
   border-color: #666;
 }
+
+.github-ribbon {
+  position: fixed;
+  right: 0;
+  top: 0;
+  z-index: 100;
+}
diff --git a/docs/src/App.svelte b/docs/src/App.svelte
@@ -2,21 +2,23 @@
   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>
+    <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>
   <div class="flex justify-between">
     <div class="w-1/2 mr-4 h-64 block"></div>
@@ -123,7 +125,6 @@
     border-radius: 4px;
     display: inline-block;
     color: #111;
-    display: inline-block;
     padding: 8px 16px;
   }
 
@@ -140,10 +141,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 {
