Styles, 404, playground link button

Author: slowcheetah

docs/web/404.md

@@ -1 +1,5 @@
-# 404 Not found
+# 404 Page Not found
+
+The page you’re looking for doesn’t exist or has been moved.
+
+Please return to our [homepage](https://core-js.io/) to continue browsing.

website/package-lock.json

@@ -6,6 +6,7 @@
     "dev": "vite"
   },
   "dependencies": {
+    "@popperjs/core": "^2.11.8",
     "@vitejs/plugin-legacy": "^7.1.0",
     "front-matter": "^4.0.2",
     "highlight.js": "^11.11.1",

website/package.json

@@ -110,5 +110,9 @@
         </div>
     </div>
 </footer>
+<div id="tooltip" role="tooltip">
+    <div id="tooltip-text"></div>
+    <div id="tooltip-arrow" data-popper-arrow></div>
+</div>
 </body>
 </html>

website/src/index.html

@@ -2,6 +2,7 @@
 /* global Babel -- global scope directive */
 import hljs from 'highlight.js/lib/core';
 import javascript from 'highlight.js/lib/languages/javascript';
+import { createPopper } from '@popperjs/core';
 
 hljs.registerLanguage('javascript', javascript);
 
@@ -28,6 +29,8 @@ function init() {
   const resultBlock = document.querySelector('.result');
   const backLinkBlock = document.querySelector('.back-link');
   const backLink = document.querySelector('.back-link a');
+  const tooltip = document.querySelector('#tooltip');
+  const tooltipText = document.querySelector('#tooltip-text');
 
   if (!codeInput) return;
 
@@ -199,6 +202,44 @@ function init() {
     );
   }
 
+  function copyToClipboard(text) {
+    if (navigator.clipboard && window.isSecureContext) {
+      return navigator.clipboard.writeText(text);
+    } else {
+      const textArea = document.createElement("textarea");
+      textArea.value = text;
+      textArea.style.position = "fixed";
+      textArea.style.top = '0';
+      textArea.style.left = '0';
+      textArea.style.opacity = '0';
+      document.body.appendChild(textArea);
+      textArea.focus();
+      textArea.select();
+
+      try {
+        const successful = document.execCommand('copy');
+        document.body.removeChild(textArea);
+        if (successful) {
+          return Promise.resolve();
+        } else {
+          return Promise.reject(new Error('Copy command was unsuccessful'));
+        }
+      } catch (err) {
+        document.body.removeChild(textArea);
+        return Promise.reject(err);
+      }
+    }
+  }
+
+  function showTooltip(element, message, time = 3000) {
+    tooltipText.innerHTML = message;
+    tooltip.setAttribute('data-show', '');
+    createPopper(element, tooltip, { placement: 'bottom' });
+    setTimeout(() => {
+      tooltip.removeAttribute('data-show');
+    }, time);
+  }
+
   codeInput.addEventListener('input', () => {
     codeOutput.removeAttribute('data-highlighted');
     let val = codeInput.value;
@@ -231,6 +272,10 @@ function init() {
       e.preventDefault();
       pageParams.set('code', codeInput.value);
       globalThis.location.hash = pageParams.toString();
+      copyToClipboard(globalThis.location.toString())
+        .then(() => {
+          showTooltip(linkButton, 'Link copied');
+        });
     });
   });
 

website/src/js/playground.js

@@ -14,3 +14,4 @@
 @use "parts/footer";
 @use "parts/code";
 @use "parts/playground";
+@use "parts/tooltip";

website/src/scss/app.scss

@@ -0,0 +1,54 @@
+@use "../includes/mixins" as *;
+@use "../includes/themed" as *;
+@use "../includes/themes" as *;
+@use "../includes/themify" as *;
+
+#tooltip {
+  font-weight: bold;
+  padding: 4px 8px;
+  border-radius: 4px;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  @include themify($themes) {
+    background: themed('font-color');
+    color: themed('background-highlight');
+  }
+
+  &[data-show] {
+    opacity: 1;
+  }
+
+  #tooltip-arrow,
+  #tooltip-arrow::before {
+    position: absolute;
+    width: 8px;
+    height: 8px;
+    background: inherit;
+  }
+
+  #tooltip-arrow {
+    visibility: hidden;
+  }
+
+  #tooltip-arrow::before {
+    visibility: visible;
+    content: '';
+    transform: rotate(45deg);
+  }
+
+  &[data-popper-placement^='top'] > #tooltip-arrow {
+    bottom: -4px;
+  }
+
+  &[data-popper-placement^='bottom'] > #tooltip-arrow {
+    top: -4px;
+  }
+
+  &[data-popper-placement^='left'] > #tooltip-arrow {
+    right: -4px;
+  }
+
+  &[data-popper-placement^='right'] > #tooltip-arrow {
+    left: -4px;
+  }
+}