Link helix editor playground

index.scss

@@ -251,7 +251,7 @@ body {
   a {
     font-size: 1.5vh;
     display: flex;
-    margin: 2% auto;
+    margin: 2% auto 0 auto;
     padding: 2%;
     border: 0.01vh solid #7f849c;
     transition: all 0.1s ease-in-out, font-size 0s;
@@ -265,6 +265,15 @@ body {
     transition: all 0.1s ease-in-out, font-size 0s;
     color: #bac2de;
   }
+  .playground-new {
+    animation: shake 0.5s;
+    animation-iteration-count: infinite;
+    border-color: #cba6f7;
+    color: #bac2de;
+  }
+  .playground-new:hover {
+    animation: none;
+  }
 }
 
 .reset {

src/help.rs

@@ -1,4 +1,5 @@
-use yew::{html, Component};
+use gloo_storage::{LocalStorage, Storage};
+use yew::{html, Callback, Component};
 
 use crate::constants::COMMANDS;
 
@@ -23,6 +24,22 @@ impl Component for Help {
 
     fn view(&self, _ctx: &yew::Context<Self>) -> yew::Html {
         let commands = &self.commands;
+
+        let playground_new = match LocalStorage::get("playground_new") {
+            Ok(value) => value,
+            Err(_) => {
+                LocalStorage::set::<bool>("playground_new", true).unwrap();
+                true
+            }
+        };
+        let onclick = Callback::from(move |_| {
+            LocalStorage::set::<bool>("playground_new", false).unwrap();
+        });
+        let playground_class = if playground_new {
+            "playground-new"
+        } else {
+            "playground"
+        };
         // Handle the last command separately.
         html! {
             <div class="sidebox">
@@ -44,6 +61,12 @@ impl Component for Help {
                     target="_blank">
                     {"View source"}
                 </a>
+                <a class={playground_class}
+                    href="https://tomgroenwoldt.github.io/helix-editor-playground/"
+                    {onclick}
+                    target="_blank">
+                    {"Check out the playground"}
+                </a>
             </div>
         }
     }