Playground back link

Author: slowcheetah

website/src/js/playground.js

@@ -26,6 +26,8 @@ function init() {
   const runButtons = document.querySelectorAll('.run-button');
   const linkButtons = document.querySelectorAll('.link-button');
   const resultBlock = document.querySelector('.result');
+  const backLinkBlock = document.querySelector('.back-link');
+  const backLink = document.querySelector('.back-link a');
 
   if (!codeInput) return;
 
@@ -255,6 +257,14 @@ function init() {
       codeInput.dispatchEvent(event);
     }
   }
+
+  if (document.referrer !== '') {
+    backLinkBlock.style.display = 'block';
+    backLink.addEventListener('click', e => {
+      e.preventDefault();
+      history.back();
+    });
+  }
 }
 
 if (document.readyState === 'loading') {

website/src/playground.html

@@ -1,3 +1,13 @@
+<div class="back-link">
+    <a href="#">
+        <span class="icon">
+            <svg data-slot="icon" fill="none" stroke-width="1.5" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M12 9.75 14.25 12m0 0 2.25 2.25M14.25 12l2.25-2.25M14.25 12 12 14.25m-2.58 4.92-6.374-6.375a1.125 1.125 0 0 1 0-1.59L9.42 4.83c.21-.211.497-.33.795-.33H19.5a2.25 2.25 0 0 1 2.25 2.25v10.5a2.25 2.25 0 0 1-2.25 2.25h-9.284c-.298 0-.585-.119-.795-.33Z"></path>
+            </svg>
+        </span>
+        Back
+    </a>
+</div>
 <h1>Playground</h1>
 <div class="playground-versions">{versions-menu}</div>
 <div class="sandbox-wrapper">

website/src/scss/parts/playground.scss

@@ -156,3 +156,13 @@
     z-index: 3;
   }
 }
+
+.back-link {
+  display: none;
+
+  a {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+}