From 7e11ee4c5fad0a504dc190b5b532b67ee03dc2a1 Mon Sep 17 00:00:00 2001
From: =?utf8?q?Jacek=20Kr=C3=B3likowski?= <nietaki@gmail.com>
Date: Thu, 20 Apr 2023 02:07:46 +0200
Subject: [PATCH] Have codepoints link to their own codepoints.net page

---
 index.html |  4 ++--
 script.js  |  8 ++++----
 style.css  | 15 ++++++++++-----
 3 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/index.html b/index.html
index d38986e..035b30a 100644
--- a/index.html
+++ b/index.html
@@ -27,7 +27,7 @@
   <div></div>
 
   <footer>
-    <a href="https://github.com/ardislu/utf-8-visualizer">
+    <a id="github" href="https://github.com/ardislu/utf-8-visualizer">
       <svg aria-labelledby="github" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
         <title id="github">GitHub repository</title>
         <path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"></path>
@@ -87,4 +87,4 @@
   <script type="module" src="/script.js"></script>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/script.js b/script.js
index b823312..e6455fe 100644
--- a/script.js
+++ b/script.js
@@ -76,12 +76,12 @@ function render(output) {
 
   for (const item of output) {
     const viz = document.createElement('al-point-visualization');
-    viz.insertAdjacentHTML('beforeend', `<span slot="char">${item.char}</slot>`);
-    viz.insertAdjacentHTML('beforeend', `<span slot="point">${item.point}</slot>`);
+    viz.insertAdjacentHTML('beforeend', `<span slot="char">${item.char}</span>`);
+    viz.insertAdjacentHTML('beforeend', `<span slot="point"><a href="https://codepoints.net/${item.point}">${item.point}</a></span>`);
 
     const [pointBinary, bytes] = parseBytes(item.bytes);
-    viz.insertAdjacentHTML('beforeend', `<span slot="point-binary">${pointBinary}</slot>`);
-    viz.insertAdjacentHTML('beforeend', `<span slot="bytes">${bytes}</slot>`);
+    viz.insertAdjacentHTML('beforeend', `<span slot="point-binary">${pointBinary}</span>`);
+    viz.insertAdjacentHTML('beforeend', `<span slot="bytes">${bytes}</span>`);
 
     vizContainer.insertAdjacentElement('beforeend', viz);
   }
diff --git a/style.css b/style.css
index f7a213f..66bba8c 100644
--- a/style.css
+++ b/style.css
@@ -55,6 +55,11 @@ div#visualizations {
 }
 
 a {
+  color: inherit;
+  text-decoration: inherit;
+}
+
+a#github {
   line-height: 0;
   background: hsl(222deg 50% 30%);
   color: hsl(222deg 50% 95%);
@@ -63,19 +68,19 @@ a {
   transition: filter 800ms;
 }
 
-a:hover,
-a:focus-within {
+a#github:hover,
+a#github:focus-within {
   filter: brightness(120%) drop-shadow(0 0 4px hsl(222deg 50% 50%));
   transition: filter 400ms;
 }
 
-a>svg {
+a#github>svg {
   inline-size: 24px;
   block-size: 24px;
   transition: transform 600ms;
 }
 
-:is(a:hover, a:focus-within)>svg {
+:is(a#github:hover, a#github:focus-within)>svg {
   transform: translateY(-2px);
   transition: transform 200ms;
 }
@@ -144,4 +149,4 @@ a>svg {
   to {
     opacity: 1;
   }
-}
\ No newline at end of file
+}
-- 
2.47.3