Merge pull request #204 from joyofrails/feat/screenshot-dimensions

rossta · web-flow · commit 5875bd2846c9 · 2024-09-02T12:07:38.000-04:00
Update snippet screenshot dimensions
diff --git a/app/content/layouts/article.html.erb b/app/content/layouts/article.html.erb
@@ -33,7 +33,7 @@
         </nav>
       </aside>
     <%- end -%>
-    <div class="article-content container" itemprop="articleBody">
+    <div class="article-content container mb-3xl" itemprop="articleBody">
       <%= yield %>
     </div>
   </article>
diff --git a/app/controllers/share/snippet_screenshots_controller.rb b/app/controllers/share/snippet_screenshots_controller.rb
@@ -9,11 +9,12 @@ def show
 
   def new
     @snippet = Snippet.find(params[:snippet_id])
+    @auto = params[:auto] == "true"
   end
 
   def create
     @snippet = Snippet.find(params[:snippet_id])
     @snippet.attach_screenshot_from_base64(params[:screenshot])
-    redirect_to new_share_snippet_tweet_path(@snippet, auto: true), notice: "Screenshot attached".emojoy
+    redirect_to new_share_snippet_tweet_path(@snippet, auto: true), notice: "Screenshot successful".emojoy
   end
 end
diff --git a/app/controllers/share/snippets_controller.rb b/app/controllers/share/snippets_controller.rb
@@ -66,8 +66,10 @@ def destroy
 
   def share_snippet_redirect_url(snippet)
     case params[:commit]
-    when "Share"
-      new_share_snippet_screenshot_url(snippet)
+    when /Close/
+      share_snippet_url(snippet)
+    when /Share/
+      new_share_snippet_screenshot_url(snippet, auto: true)
     else
       edit_share_snippet_url(snippet)
     end
diff --git a/app/javascript/controllers/snippets/screenshot.ts b/app/javascript/controllers/snippets/screenshot.ts
@@ -6,10 +6,15 @@ import debug from '../../utils/debug';
 const console = debug('app:javascript:controllers:snippets:screenshot');
 
 export default class extends Controller<HTMLFormElement> {
+  static values = {
+    auto: Boolean,
+  };
+
   static targets = ['snippet', 'submitButton'];
 
   declare readonly snippetTarget: HTMLInputElement;
   declare readonly submitButtonTarget: HTMLInputElement;
+  declare readonly autoValue: boolean;
 
   connect(): void {
     console.log('Connect!');
@@ -19,9 +24,11 @@ export default class extends Controller<HTMLFormElement> {
       this.prepareScreenshot,
     );
 
-    // submit immediately
-    this.submitButtonTarget.click();
-    this.submitButtonTarget.disabled = true;
+    if (this.autoValue) {
+      // submit immediately
+      this.submitButtonTarget.click();
+      this.submitButtonTarget.disabled = true;
+    }
   }
 
   prepareScreenshot = async (event) => {
diff --git a/app/javascript/controllers/snippets/tweet.ts b/app/javascript/controllers/snippets/tweet.ts
@@ -1,9 +1,26 @@
+import { Turbo } from '@hotwired/turbo-rails';
 import { Controller } from '@hotwired/stimulus';
 
 import debug from '../../utils/debug';
 
 const console = debug('app:javascript:controllers:snippets:tweet');
 
+const WINDOW_OPTIONS = {
+  width: 550,
+  height: 420,
+  toolbar: false,
+  location: false,
+  directories: false,
+  status: false,
+  menubar: false,
+  scrollbars: true,
+  copyhistory: false,
+  resizable: true,
+};
+
+const WINDOW_OPTIONS_ARGUMENT = Object.entries(WINDOW_OPTIONS)
+  .map(([key, value]) => `${key}=${value}`)
+  .join(',');
 export default class extends Controller {
   static values = {
     url: String,
@@ -18,6 +35,7 @@ export default class extends Controller {
 
     if (this.autoValue) {
       this.tweet();
+      Turbo.visit(this.urlValue);
     }
   }
 
@@ -30,10 +48,6 @@ export default class extends Controller {
 
     const tweetUrl = `https://x.com/intent/post?text=${tweetText}`;
 
-    window.open(
-      tweetUrl,
-      '_blank',
-      'width=550,height=420,toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,copyhistory=no,resizable=yes',
-    );
+    window.open(tweetUrl, '_blank', WINDOW_OPTIONS_ARGUMENT);
   }
 }
diff --git a/app/javascript/css/components/article-content.css b/app/javascript/css/components/article-content.css
@@ -1,7 +1,5 @@
 .article-content,
 .section-content {
-  padding-bottom: var(--space-3xl);
-
   & h1,
   & h2,
   & h3,
diff --git a/app/javascript/css/components/code.scss b/app/javascript/css/components/code.scss
@@ -4,7 +4,6 @@
   --code-line-height: 1.7777778;
 
   border-radius: var(--space-3xs-2xs);
-  border: 1px solid var(--joy-border-quiet);
 
   & input,
   & textarea {
diff --git a/app/javascript/css/components/snippet.css b/app/javascript/css/components/snippet.css
@@ -1,21 +1,42 @@
 .snippet {
-  filter: drop-shadow(0 0 0.75rem var(--joy-color-50));
+  filter: drop-shadow(0.25rem 0.5rem 0.75rem var(--joy-color-500));
   width: fit-content;
-  max-width: var(--grid-max-width);
+  max-width: var(--grid-max-width) - (2 * var(--grid-gutter));
 
   & .code-editor {
     padding-top: var(--space-xs);
     padding-inline-end: var(--space-m);
     padding-bottom: var(--space-m);
     padding-inline-start: var(--space-m);
   }
+
+  & .clipboard-copy-container {
+    position: absolute;
+    right: 0px;
+    display: none;
+  }
+
+  &:hover .clipboard-copy-container {
+    display: block;
+  }
 }
 
 .snippet-background {
-  background-color: var(--joy-color-200);
+  background: linear-gradient(var(--joy-color-300), var(--joy-color-200));
   padding: var(--space-l);
   width: fit-content;
+  aspect-ratio: 2 / 1;
   border-radius: 0.5rem;
+  max-width: var(--grid-max-width);
+  overflow-x: clip;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+
+  & .code-wrapper {
+    margin: 0 auto;
+  }
 }
 
 /*
diff --git a/app/javascript/css/utilities/custom.css b/app/javascript/css/utilities/custom.css
@@ -2,8 +2,12 @@
   margin-bottom: var(--grid-gutter);
 }
 
-.mb-gap {
-  margin-bottom: var(--grid-gutter);
+.mb-xl {
+  margin-bottom: var(--space-xl);
+}
+
+.mb-3xl {
+  margin-bottom: var(--space-3xl);
 }
 
 .py-gap {
diff --git a/app/views/admin/newsletters/edit.html.erb b/app/views/admin/newsletters/edit.html.erb
@@ -1,5 +1,5 @@
 <%= render Pages::Header.new(title: "Newsletter: Edit") %>
-<div class="section-content container py-gap">
+<div class="section-content container py-gap mb-3xl">
   <%= render "form", newsletter: @newsletter %>
 
   <div>
diff --git a/app/views/admin/newsletters/index.html.erb b/app/views/admin/newsletters/index.html.erb
@@ -1,5 +1,5 @@
 <%= render Pages::Header.new(title: "Admin: Newsletters") %>
-<div class="section-content container py-gap">
+<div class="section-content container py-gap mb-3xl">
   <div class="flex">
     <%= link_to "New newsletter", new_admin_newsletter_path, class: "button primary" %>
   </div>
diff --git a/app/views/admin/newsletters/new.html.erb b/app/views/admin/newsletters/new.html.erb
@@ -1,5 +1,5 @@
 <%= render Pages::Header.new(title: "Admin: Create Newsletter") %>
-<div class="section-content container py-gap">
+<div class="section-content container py-gap mb-3xl">
   <%= render "form", newsletter: @newsletter %>
 
   <div>
diff --git a/app/views/admin/newsletters/show.html.erb b/app/views/admin/newsletters/show.html.erb
@@ -1,5 +1,5 @@
 <%= render Pages::Header.new(title: "Admin: #{@newsletter.title}") %>
-<div class="section-content container py-gap">
+<div class="section-content container py-gap mb-3xl">
   <div class="flex gap-x-2">
     <%= button_to "Send Test", deliver_admin_newsletter_path(@newsletter), method: :patch, class: "button secondary" %>
     <%= button_to "Send Live", deliver_admin_newsletter_path(@newsletter, live: true), method: :patch, class: "button primary" %>
diff --git a/app/views/color_schemes/index_view.rb b/app/views/color_schemes/index_view.rb
@@ -10,7 +10,7 @@ def initialize(color_schemes:)
   def view_template
     render Pages::Header.new(title: "Color Scheme Index")
 
-    section(class: "section-content container py-gap") do
+    section(class: "section-content container py-gap mb-3xl") do
       div(class: "grid grid-content") do
         @color_schemes.each do |color_scheme|
           style do
diff --git a/app/views/color_schemes/show_view.rb b/app/views/color_schemes/show_view.rb
@@ -12,7 +12,7 @@ def initialize(color_scheme:)
   def view_template
     render Pages::Header.new(title: "Color Scheme: #{@color_scheme.display_name}")
 
-    section(class: "section-content container py-gap") do
+    section(class: "section-content container py-gap mb-3xl") do
       style do
         render(ColorSchemes::Css.new(color_scheme: @color_scheme, my_theme_enabled: true))
       end
diff --git a/app/views/components/code_block/snippet.rb b/app/views/components/code_block/snippet.rb
@@ -13,7 +13,7 @@ def initialize(snippet, screenshot: false, **options)
 
   def view_template
     div(class: "snippet-background", **options) do
-      render CodeBlock::Container.new(language: language) do
+      render CodeBlock::Container.new(language: language, class: "snippet") do
         render CodeBlock::Header.new { title_content } if title_content.present?
 
         render CodeBlock::Body.new do
diff --git a/app/views/examples/posts/index_view.rb b/app/views/examples/posts/index_view.rb
@@ -18,7 +18,7 @@ def view_template
       description: "This is an example for creating a post of different types, like text, link, or image."
     )
 
-    div(class: "section-content container py-gap") do
+    div(class: "section-content container py-gap mb-3xl") do
       link_to "New Post", new_examples_post_path, class: "button primary", data: {turbo_frame: "examples_post_form"}
 
       turbo_frame_tag :examples_post_form
diff --git a/app/views/examples/posts/new_view.rb b/app/views/examples/posts/new_view.rb
@@ -16,7 +16,7 @@ def view_template
       description: "This is an example for creating a post of different types, like text, link, or image."
     )
 
-    div(class: "section-content container py-gap") do
+    div(class: "section-content container py-gap mb-3xl") do
       turbo_frame_tag :examples_post_form do
         render Examples::Posts::Form.new(post: @post)
       end
diff --git a/app/views/newsletters/index.html.erb b/app/views/newsletters/index.html.erb
@@ -1,5 +1,5 @@
 <%= render Pages::Header.new(title: "Joy of Rails Newsletter") %>
-<div class="section-content container py-gap">
+<div class="section-content container py-gap mb-3xl">
   <div class="only:inherit grid grid-row-mid">
     <h2>No newsletters have been sent yet!</h2>
     <div>
diff --git a/app/views/newsletters/show.html.erb b/app/views/newsletters/show.html.erb
@@ -1,4 +1,4 @@
 <%= render Pages::Header.new(title: @newsletter.title, published_on: @newsletter.sent_at&.to_date) %>
-<div class="section-content container py-gap">
+<div class="section-content container py-gap mb-3xl">
   <%= render @newsletter %>
 </div>
diff --git a/app/views/settings/color_schemes/preview_view.rb b/app/views/settings/color_schemes/preview_view.rb
@@ -25,7 +25,7 @@ def initialize(
   def view_template
     render Pages::Header.new(title: "Settings: Color Scheme Preview")
 
-    section(class: "section-content container py-gap") do
+    section(class: "section-content container py-gap mb-3xl") do
       turbo_frame_tag "color-scheme-preview", data: {turbo_action: "advance"} do
         style do
           render(ColorSchemes::Css.new(color_scheme: @color_scheme, my_theme_enabled: true))
diff --git a/app/views/settings/color_schemes/show_view.rb b/app/views/settings/color_schemes/show_view.rb
@@ -26,7 +26,7 @@ def initialize(
   def view_template
     render Pages::Header.new(title: "Settings: Color Scheme")
 
-    section(class: "section-content container py-gap") do
+    section(class: "section-content container py-gap mb-3xl") do
       turbo_frame_tag "color-scheme-form", data: {turbo_action: "advance", controller: "analytics", analytics_event_value: "Color Scheme Update"} do
         style do
           render(ColorSchemes::Css.new(color_scheme: @session_color_scheme)) if @session_color_scheme
diff --git a/app/views/settings/syntax_highlights/show_view.rb b/app/views/settings/syntax_highlights/show_view.rb
@@ -18,7 +18,7 @@ def initialize(
   def view_template
     render Pages::Header.new(title: "Settings: Syntax Highlighting")
 
-    section(class: %(section-content container py-gap)) do
+    section(class: %(section-content container py-gap mb-3xl)) do
       turbo_frame_tag "syntax-highlight-form" do
         render Settings::SyntaxHighlights::Form.new(
           settings: @settings,
diff --git a/app/views/share/snippet_screenshots/form.rb b/app/views/share/snippet_screenshots/form.rb
@@ -6,8 +6,9 @@ class Share::SnippetScreenshots::Form < ApplicationComponent
 
   attr_accessor :snippet
 
-  def initialize(snippet)
+  def initialize(snippet, auto: false)
     @snippet = snippet
+    @auto = auto
   end
 
   def view_template
@@ -17,15 +18,18 @@ def view_template
       method: :post,
       class: "grid-content",
       data: {
-        controller: "snippet-screenshot"
+        controller: "snippet-screenshot",
+        snippet_screenshot_auto_value: auto?.to_s
       }
     ) do |form|
       errors
 
       render CodeBlock::Snippet.new(snippet, screenshot: true, data: {snippet_screenshot_target: "snippet"})
 
       fieldset do
-        plain form.button "Share", class: "button primary", data: {snippet_screenshot_target: "submitButton"}
+        plain form.button "Share",
+          class: "button primary",
+          data: {snippet_screenshot_target: "submitButton"}
       end
     end
   end
@@ -48,4 +52,6 @@ def errors
       end
     end
   end
+
+  def auto? = !!@auto
 end
diff --git a/app/views/share/snippet_screenshots/new.html.erb b/app/views/share/snippet_screenshots/new.html.erb
@@ -1,7 +1,7 @@
 <%= render Pages::Header.new(title: "Share Snippet: Screenshot") %>
-<div class="section-content container py-gap">
-  <%= turbo_frame_tag :snippet_form, data: {turbo_action: "advance"} do %>
-    <%= render Share::SnippetScreenshots::Form.new(@snippet) %>
+<div class="section-content container py-gap mb-3xl">
+  <%= turbo_frame_tag :snippet_form do %>
+    <%= render Share::SnippetScreenshots::Form.new(@snippet, auto: @auto) %>
   <% end %>
 
   <br>
diff --git a/app/views/share/snippet_tweets/new.html.erb b/app/views/share/snippet_tweets/new.html.erb
@@ -1,9 +1,11 @@
 <%= render Pages::Header.new(title: "Share Snippet") %>
-<div class="section-content container py-gap">
-  <%= turbo_frame_tag :snippet_form, data: {turbo_action: "advance"} do %>
+<div class="section-content container py-gap mb-3xl">
+  <%= turbo_frame_tag :snippet_form do %>
     <%= render Share::SnippetTweets::Tweet.new(@snippet, auto: @auto) %>
   <% end %>
 
+  <br>
+
   <div>
     <%= link_to "Back to snippets", share_snippets_path %>
   </div>
diff --git a/app/views/share/snippet_tweets/tweet.rb b/app/views/share/snippet_tweets/tweet.rb
@@ -23,15 +23,15 @@ def view_template
       )
 
       flex_block do
-        button_tag "Tweet",
-          class: class_names("button", "primary", hidden: auto?),
+        button_tag "Share",
+          class: class_names("button", "primary"),
           data: {action: "click->snippet-tweet#tweet"}
       end
     end
   end
 
   def tweet_url
-    @snippet.screenshot.attached? ? rails_storage_proxy_url(@snippet.screenshot) : share_snippet_url(@snippet)
+    share_snippet_url(@snippet)
   end
 
   def auto? = !!@auto
diff --git a/app/views/share/snippets/edit.html.erb b/app/views/share/snippets/edit.html.erb
@@ -1,9 +1,11 @@
 <%= render Pages::Header.new(title: "Snippet Share") %>
-<div class="section-content container py-gap">
+<div class="section-content container py-gap mb-3xl">
   <%= turbo_frame_tag :snippet_form do %>
     <%= render Share::Snippets::Form.new(@snippet) %>
   <% end %>
 
+  <br>
+
   <div>
     <%= link_to "Show this snippet", share_snippet_path(@snippet) %> |
     <%= link_to "Back to snippets", share_snippets_path %>
diff --git a/app/views/share/snippets/form.rb b/app/views/share/snippets/form.rb
diff --git a/app/views/share/snippets/index.html.erb b/app/views/share/snippets/index.html.erb
diff --git a/app/views/share/snippets/new.html.erb b/app/views/share/snippets/new.html.erb
diff --git a/app/views/share/snippets/show.html.erb b/app/views/share/snippets/show.html.erb
diff --git a/app/views/share/snippets/toolbar.rb b/app/views/share/snippets/toolbar.rb
diff --git a/app/views/users/newsletter_subscriptions/banner.rb b/app/views/users/newsletter_subscriptions/banner.rb
diff --git a/spec/requests/share/snippets_spec.rb b/spec/requests/share/snippets_spec.rb
diff --git a/spec/system/snippets_spec.rb b/spec/system/snippets_spec.rb

Original file line number	Diff line number	Diff line change
`@@ -2,8 +2,12 @@`
`2`	`2`	`margin-bottom: var(--grid-gutter);`
`3`	`3`	`}`
`4`	`4`
`5`		`-.mb-gap {`
`6`		`- margin-bottom: var(--grid-gutter);`
	`5`	`+.mb-xl {`
	`6`	`+ margin-bottom: var(--space-xl);`
	`7`	`+}`
	`8`	`+`
	`9`	`+.mb-3xl {`
	`10`	`+ margin-bottom: var(--space-3xl);`
`7`	`11`	`}`
`8`	`12`
`9`	`13`	`.py-gap {`