Add Tweet button for Snippet

Also refactors toolbar

Author: rossta

app/controllers/share/snippet_screenshots_controller.rb

@@ -14,6 +14,6 @@ def new
   def create
     @snippet = Snippet.find(params[:snippet_id])
     @snippet.attach_screenshot_from_base64(params[:screenshot])
-    redirect_to share_snippet_url(@snippet), notice: "Screenshot attached".emojoy
+    redirect_to new_share_snippet_tweet_path(@snippet), notice: "Screenshot attached".emojoy
   end
 end

app/controllers/share/snippet_tweets_controller.rb

@@ -0,0 +1,7 @@
+class Share::SnippetTweetsController < ApplicationController
+  using Refinements::Emojoy
+
+  def new
+    @snippet = Snippet.find(params[:snippet_id])
+  end
+end

app/javascript/controllers/index.js

@@ -18,9 +18,11 @@ import TableOfContents from './table-of-contents';
 
 import FrameForm from './forms/frame';
 import SyntaxHighlightPreview from './syntax-highlight/preview';
+
 import SnippetPreview from './snippets/preview';
 import SnippetEditor from './snippets/editor';
 import SnippetScreenshot from './snippets/screenshot';
+import SnippetTweet from './snippets/tweet';
 
 application.register('analytics', AnalyticsCustomEvent);
 application.register('code-example', CodeExample);
@@ -39,3 +41,4 @@ application.register('syntax-highlight-preview', SyntaxHighlightPreview);
 application.register('snippet-preview', SnippetPreview);
 application.register('snippet-editor', SnippetEditor);
 application.register('snippet-screenshot', SnippetScreenshot);
+application.register('snippet-tweet', SnippetTweet);

app/javascript/controllers/snippets/screenshot.ts

@@ -20,8 +20,8 @@ export default class extends Controller<HTMLFormElement> {
     );
 
     // submit immediately
-    // this.submitButtonTarget.click();
-    // this.submitButtonTarget.disabled = true;
+    this.submitButtonTarget.click();
+    this.submitButtonTarget.disabled = true;
   }
 
   prepareScreenshot = async (event) => {

app/javascript/controllers/snippets/tweet.ts

@@ -0,0 +1,32 @@
+import { Controller } from '@hotwired/stimulus';
+
+import debug from '../../utils/debug';
+
+const console = debug('app:javascript:controllers:snippets:tweet');
+
+export default class extends Controller {
+  static values = {
+    url: String,
+  };
+
+  declare urlValue: string;
+
+  connect() {
+    console.log('Connect!');
+
+    this.tweet();
+  }
+
+  tweet() {
+    console.log('Tweet!');
+
+    const tweetText = encodeURIComponent(this.urlValue);
+    const tweetUrl = `https://twitter.com/intent/tweet?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',
+    );
+  }
+}

app/javascript/css/utilities/tailwind.css

@@ -957,11 +957,6 @@ focus\:ring-0:focus {
   text-align: right;
 }
 
-.mx-auto {
-  margin-left: auto;
-  margin-right: auto;
-}
-
 .max-w-sm {
   max-width: 24rem;
 }

app/views/share/snippet_screenshots/form.rb

@@ -17,8 +17,7 @@ def view_template
       method: :post,
       class: "grid-content",
       data: {
-        controller: "snippet-screenshot",
-        turbo_frame: "_top"
+        controller: "snippet-screenshot"
       }
     ) do |form|
       errors

app/views/share/snippet_screenshots/new.html.erb

@@ -1,6 +1,6 @@
-<%= render Pages::Header.new(title: "Snippet Screenshot") %>
+<%= render Pages::Header.new(title: "Share Snippet: Screenshot") %>
 <div class="section-content container py-gap">
-  <%= turbo_frame_tag :snippet_form do %>
+  <%= turbo_frame_tag :snippet_form, data: {turbo_action: "advance"} do %>
     <%= render Share::SnippetScreenshots::Form.new(@snippet) %>
   <% end %>
 

app/views/share/snippet_tweets/new.html.erb

@@ -0,0 +1,10 @@
+<%= render Pages::Header.new(title: "Share Snippet: Tweet") %>
+<div class="section-content container py-gap">
+  <%= turbo_frame_tag :snippet_form, data: {turbo_action: "advance"} do %>
+    <%= render Share::SnippetTweets::Tweet.new(@snippet) %>
+  <% end %>
+
+  <div>
+    <%= link_to "Back to snippets", share_snippets_path %>
+  </div>
+</div>

app/views/share/snippet_tweets/tweet.rb

@@ -0,0 +1,20 @@
+class Share::SnippetTweets::Tweet < ApplicationComponent
+  def initialize(snippet)
+    @snippet = snippet
+  end
+
+  def view_template
+    render CodeBlock::Snippet.new(
+      @snippet,
+      screenshot: true,
+      data: {
+        controller: "snippet-tweet",
+        snippet_tweet_url_value: tweet_url
+      }
+    )
+  end
+
+  def tweet_url
+    @snippet.screenshot.attached? ? rails_storage_proxy_url(@snippet.screenshot) : share_snippet_url(@snippet)
+  end
+end