From 63e0fa5334b225016d6829191331745503727cc4 Mon Sep 17 00:00:00 2001
From: Jonny Gerig Meyer <jonny@oddbird.net>
Date: Thu, 2 May 2024 17:34:10 -0400
Subject: [PATCH] Address review

---
 css/demo.css |  4 ++++
 index.html   | 18 +++++++++++++++++-
 2 files changed, 21 insertions(+), 1 deletion(-)
diff --git a/css/demo.css b/css/demo.css
index e238182..6a14a87 100644
--- a/css/demo.css
+++ b/css/demo.css
@@ -200,6 +200,10 @@ body {
   }
 }
 
+a[target='_blank']::after {
+  content: ' ↗';
+}
+
 .button-group {
   display: grid;
   gap: var(--gap);
diff --git a/index.html b/index.html
index cfa1bee..f8fd3b2 100644
--- a/index.html
+++ b/index.html
@@ -34,11 +34,17 @@
     <script type="module">
       import { apply, isSupported } from './dist/popover-fn.js';
 
+      const note = document.getElementById('browser-support');
+
       if (isSupported()) {
         console.log('native `popover` support detected, no polyfill used');
+        note.innerText =
+          'This browser supports the Popover API natively, so the polyfill has not been applied.';
       } else {
         apply();
         console.log('polyfill applied');
+        note.innerText =
+          'This browser does not support the Popover API natively, so the polyfill has been applied.';
       }
     </script>
     <script src="https://unpkg.com/prismjs@v1.x/components/prism-core.min.js"></script>
@@ -55,7 +61,7 @@
 
   <body>
     <header class="site-header">
-      <a href="/" rel="home" id="banner-logo">
+      <a href="https://www.oddbird.net/" rel="home" id="banner-logo">
         <svg
           data-logo="oddbird"
           xmlns="http://www.w3.org/2000/svg"
@@ -137,6 +143,16 @@ <h1 id="title">
           </p>
         </div>
       </header>
+      <div>
+        <span id="browser-support"></span>
+        See which browsers have
+        <a
+          href="https://caniuse.com/?search=popover"
+          target="_blank"
+          rel="noopener noreferrer"
+          >native Popover API support</a
+        >.
+      </div>
       <div id="popovers">
         <div id="defaultPopover" data-popover popover>Default Popover</div>
         <div id="manualPopover" data-popover="manual" popover="manual">
