turbo frame debug setup

thejonroberts · thejonroberts · commit 8ecb527020d3 · 2024-07-06T16:29:48.000-04:00
diff --git a/app/assets/stylesheets/_debug.scss b/app/assets/stylesheets/_debug.scss
@@ -0,0 +1,31 @@
+// stolen from https://github.com/guillaumebriday/turbo-frames-debug and slightly modified
+// must have TURBO_DEBUG env var set
+:root {
+  --turbo-frame-debug-color: #3B82F6;
+  --turbo-frame-debug-z-index: 9999;
+  --turbo-frame-debug-font-size: 0.7rem;
+  --turbo-frame-debug-border-radius: 0.25rem;
+}
+
+.debug-turbo {
+  turbo-frame {
+    border: 1px var(--turbo-frame-debug-color) solid;
+    display: block;
+    border-radius: var(--turbo-frame-debug-border-radius);
+
+    &::before {
+      content: "#" attr(id);
+      display: inline-block;
+      position: relative;
+      top: -1rem;
+      right: -0.5rem;
+      color: var(--turbo-frame-debug-color);
+      font-size: var(--turbo-frame-debug-font-size);
+      z-index: var(--turbo-frame-debug-z-index);
+      background-color: #fff;
+      padding: 0.05rem;
+      border: 1px var(--turbo-frame-debug-color) solid;
+      border-radius: var(--turbo-frame-debug-border-radius);
+    }
+  }
+}
diff --git a/app/assets/stylesheets/application.sass.scss b/app/assets/stylesheets/application.sass.scss
@@ -27,3 +27,7 @@
 // Layouts
 @import "layouts/container";
 @import "layouts/header";
+
+// Development helpers: must have env vars set.
+// see files and/or application.html.erb
+@import "debug";
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -16,7 +16,7 @@
     <% end %>
   </head>
 
-  <body>
+  <body class="<%= 'debug-turbo' if ENV.fetch("TURBO_DEBUG", false) %>">
     <%= render "layouts/navbar" %>
     <div id="flash" class="flash">
       <%= render "layouts/flash" %>
