Update snippet layout with editing flag

Author: rossta

app/javascript/css/application.css

@@ -36,3 +36,4 @@
 @import './components/callout.css';
 @import './components/color-scheme.scss';
 @import './components/table.css';
+@import './components/snippet.css';

app/javascript/css/components/code.scss

@@ -66,13 +66,15 @@
   & .code-title {
     font-weight: 600;
     display: block;
-    text-align: center;
+    text-align: right;
     line-height: 1;
+    flex-grow: 2;
 
     & input {
       font-size: var(--code-header-font-size);
       line-height: var(--code-header-line-height);
       text-align: right;
+      width: 100%;
     }
 
     & a {
@@ -208,44 +210,3 @@
     grid-area: 1 / 1 / 2 / 2;
   }
 }
-
-/*
-  .autogrow-wrapper taken from
-  https://css-tricks.com/the-cleanest-trick-for-autogrowing-textareas/
-*/
-.autogrow-wrapper {
-  /* easy way to plop the elements on top of each other and have them both sized based on the tallest one's height */
-  display: grid;
-}
-
-.autogrow-wrapper::after {
-  /* Note the weird space! Needed to preventy jumpy behavior */
-  content: attr(data-replicated-value) ' ';
-
-  /* Hidden from view, clicks, and screen readers */
-  visibility: hidden;
-
-  line-height: var(--code-line-height);
-  font-family: var(--monospace);
-  font-size: var(--step--1);
-}
-
-.autogrow-wrapper > textarea {
-  min-height: auto;
-
-  /* You could leave this, but after a user resizes, then it ruins the auto sizing */
-  resize: none;
-
-  /* Firefox shows scrollbar on growth, you can hide like this. */
-  overflow: hidden;
-}
-
-.autogrow-wrapper > textarea,
-.autogrow-wrapper::after {
-  /* Place on top of each other */
-  grid-area: 1 / 1 / 2 / 2;
-
-  white-space: pre-wrap;
-  word-wrap: break-word;
-  max-width: var(--grid-max-width);
-}

app/javascript/css/components/snippet.css

@@ -0,0 +1,51 @@
+.snippet {
+  filter: drop-shadow(0 0 0.75rem var(--joy-color-50));
+}
+
+.snippet-background {
+  background-color: var(--joy-color-200);
+  padding: var(--space-l);
+  width: fit-content;
+  border-radius: 0.5rem;
+}
+
+/*
+  .autogrow-wrapper taken from
+  https://css-tricks.com/the-cleanest-trick-for-autogrowing-textareas/
+*/
+.autogrow-wrapper {
+  /* easy way to plop the elements on top of each other and have them both sized based on the tallest one's height */
+  display: grid;
+}
+
+.autogrow-wrapper::after {
+  /* Note the weird space! Needed to preventy jumpy behavior */
+  content: attr(data-replicated-value) ' ';
+
+  /* Hidden from view, clicks, and screen readers */
+  visibility: hidden;
+
+  line-height: var(--code-line-height);
+  font-family: var(--monospace);
+  font-size: var(--step--1);
+}
+
+.autogrow-wrapper > textarea {
+  min-height: auto;
+
+  /* You could leave this, but after a user resizes, then it ruins the auto sizing */
+  resize: none;
+
+  /* Firefox shows scrollbar on growth, you can hide like this. */
+  overflow: hidden;
+}
+
+.autogrow-wrapper > textarea,
+.autogrow-wrapper::after {
+  /* Place on top of each other */
+  grid-area: 1 / 1 / 2 / 2;
+
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  max-width: var(--grid-max-width);
+}

app/views/components/code_block/snippet.rb

@@ -5,26 +5,35 @@ class CodeBlock::Snippet < ApplicationComponent
 
   attr_reader :snippet
 
-  def initialize(snippet, **)
+  def initialize(snippet, editing: false, **)
     @snippet = snippet
+    @editing = editing
   end
 
   def view_template
-    render CodeBlock::Container.new(language: language, class: "snippet") do
-      render CodeBlock::Header.new do
-        label(class: "sr-only", for: "snippet[filename]") { "Filename" }
-        input(type: "text", name: "snippet[filename]", value: filename)
-      end
+    div(class: "snippet-background") do
+      render CodeBlock::Container.new(language: language, class: "snippet") do
+        render CodeBlock::Header.new do
+          if editing?
+            label(class: "sr-only", for: "snippet[filename]") { "Filename" }
+            input(type: "text", name: "snippet[filename]", value: filename)
+          else
+            filename
+          end
+        end
 
-      render CodeBlock::Body.new(data: {controller: "snippet-editor"}) do
-        div(class: "grid-stack") do
-          render CodeBlock::Code.new(source, language: language, data: {snippet_editor_target: "source"})
-          label(class: "sr-only", for: "snippet[source]") { "Source" }
-          div(class: "code-editor autogrow-wrapper") do
-            textarea(
-              name: "snippet[source]",
-              data: {snippet_editor_target: "textarea"}
-            ) { source }
+        render CodeBlock::Body.new(data: controller_data) do
+          div(class: "grid-stack") do
+            render CodeBlock::Code.new(source, language: language, data: {snippet_editor_target: "source"})
+            if editing?
+              label(class: "sr-only", for: "snippet[source]") { "Source" }
+              div(class: "code-editor autogrow-wrapper") do
+                textarea(
+                  name: "snippet[source]",
+                  data: {snippet_editor_target: "textarea"}
+                ) { source }
+              end
+            end
           end
         end
       end
@@ -44,5 +53,11 @@ def source
     snippet.source || ""
   end
 
+  def editing? = !!@editing
+
   delegate :language, :filename, to: :snippet
+
+  def controller_data
+    editing? ? {controller: "snippet-editor"} : {}
+  end
 end

app/views/snippets/_form.html.erb

@@ -26,7 +26,7 @@
   </div>
 
   <%= turbo_frame_tag dom_id(snippet, :code_block), class: "snippet-frame grid-cols-12" do %>
-    <%= render snippet %>
+    <%= render CodeBlock::Snippet.new(snippet, editing: true) %>
   <% end %>
 
   <fieldset>

app/views/snippets/index.html.erb

@@ -5,9 +5,8 @@
   </div>
 
   <% @snippets.each do |snippet| %>
-    <%= render snippet %>
-    <p>
-      <%= link_to "Show this snippet", snippet %>
-    </p>
+    <%= link_to snippet, class: "block" do %>
+      <%= render CodeBlock::Snippet.new(snippet) %>
+    <% end %>
   <% end %>
 </div>

app/views/snippets/show.html.erb

@@ -1,6 +1,6 @@
 <%= render Pages::Header.new(title: "Snippet #{@snippet.filename}".strip) %>
 <div class="section-content container py-gap">
-  <%= render @snippet %>
+  <%= render CodeBlock::Snippet.new(@snippet) %>
 
   <div>
     <%= link_to "Edit this snippet", edit_snippet_path(@snippet) %> |