feat: add mime types and extensions to language + add ability to download raw code file

Author: Lewis Youl

app/helpers/application_helper.rb

@@ -44,7 +44,7 @@ def new_snippet_folder_id
   end
 
   def color_for_like_status(snippet)
-    snippet.liked_by?(current_user) ? 'text-red-500' : 'text-gray-500'
+    snippet.liked_by?(current_user) ? 'text-red-500' : 'text-gray-500 group-hover:text-red-500'
   end
 
   def color_class_for_notification_icon(icon)

app/javascript/controllers/counts_controller.js

@@ -8,11 +8,23 @@ export default class extends Controller {
 
   increment(event) {
     this.countValue += 1
-    this.countTarget.textContent = this.countValue
+
+    this.renderValueAndMargin()
   }
 
   decrement(event) {
     this.countValue -= 1
-    this.countTarget.textContent = this.countValue
+
+    this.renderValueAndMargin()
+  }
+
+  renderValueAndMargin() {
+    if (this.countValue > 0) {
+      this.countTarget.textContent = this.countValue
+      this.countTarget.classList.add('ml-1')
+    } else {
+      this.countTarget.classList.remove('ml-1')
+      this.countTarget.textContent = ''
+    }
   }
 }

app/javascript/controllers/picture_controller.js

@@ -4,6 +4,11 @@ import axios from 'axios'
 
 export default class extends Controller {
 	static targets = ['code']
+  static values = {
+    code: String,
+    extension: String,
+    mimeType: String
+  }
 
   initialize() {
     const csrfToken = document.querySelector("meta[name=csrf-token]").content
@@ -30,6 +35,27 @@ export default class extends Controller {
       .catch(console.error)
   }
 
+  downloadRaw() {
+    const fileName = `snippet.${this.extensionValue}`
+    const blob = new Blob([this.codeValue], { type: this.mimeTypeValue });
+    let anchorElement = document.createElement('a');
+
+    anchorElement.download = fileName;
+    anchorElement.href = URL.createObjectURL(blob);
+    anchorElement.dataset.downloadurl = [
+      this.mimeTypeValue,
+      anchorElement.download,
+      anchorElement.href
+    ].join(':');
+    anchorElement.style.display = "none";
+
+    document.body.appendChild(anchorElement);
+    anchorElement.click();
+    document.body.removeChild(anchorElement);
+
+    setTimeout(function() { URL.revokeObjectURL(anchorElement.href); }, 1500);
+  }
+
   tweetImage(blob) {
     let formData = new FormData();
     formData.append('fname', 'tweet.png');

app/models/language.rb

@@ -1,3 +1,11 @@
 class Language < ApplicationRecord
   validates_uniqueness_of :name
+
+  def mime_type
+    mime_types.first
+  end
+
+  def extension
+    extensions.first
+  end
 end

app/tasks/update_languages_task.rb

@@ -0,0 +1,12 @@
+class UpdateLanguagesTask
+  def call
+    LANGUAGES.each do |lang|
+      language = Language.find_or_initialize_by(name: lang[:name])
+
+      language.update!(
+        mime_types: lang[:mime] ? [lang[:mime]] : lang[:mimes],
+        extensions: lang[:ext] || ['txt']
+      )
+    end
+  end
+end

app/views/modals/snippets/picture.html.erb

@@ -1,7 +1,12 @@
-<h3 class="text-center mb-4">Capture Image</h3>
+<h3 class="text-center mb-4">Share Snippet</h3>
 
 <h5 class="mb-2"><%= @snippet.description %></h5>
-<div data-controller="picture">
+<div
+  data-controller="picture"
+  data-picture-code-value="<%= @snippet.body %>"
+  data-picture-extension-value="<%= @snippet.language.extension %>"
+  data-picture-mime-type-value="<%= @snippet.language.mime_type %>"
+>
 	<div data-picture-target="code" class="bg-cyan px-16 py-20">
 		<%= render partial: 'shared/codemirror', locals: { code: @snippet.body, mode_id: @snippet.language_id, read_only: false, capture: true  } %>
 	</div>
@@ -12,9 +17,14 @@
       <span class="font-normal">Tweet</span>
     <% end %>
 
-    <%= button_tag class: 'button--cta-tertiary', data: { action: 'click->picture#download' } do %>
+    <%= button_tag class: 'button--cta-tertiary mr-2', data: { action: 'click->picture#download' } do %>
       <%= render partial: 'shared/icons/download', locals: { classes: 'h-5 w-5 mr-1' } %>
-      <span class="font-normal">Download</span>
+      <span class="font-normal">PNG</span>
+    <% end %>
+
+    <%= button_tag class: 'button--cta-tertiary', data: { action: 'click->picture#downloadRaw' } do %>
+      <%= render partial: 'shared/icons/download_document', locals: { classes: 'h-5 w-5 mr-1' } %>
+      <span class="font-normal">Raw</span>
     <% end %>
 	</div>
 </div>

app/views/shared/_comment_button.html.erb

@@ -1,11 +1,11 @@
-<%= link_to snippet_path(snippet, anchor: 'new-comment'), class: "no-underline flex items-center cursor-pointer transition" do %>
-  <%= render partial: 'shared/icons/chat', locals: { width: 5, height: 5, color: 'text-gray-500' } %>
+<%= link_to snippet_path(snippet, anchor: 'new-comment'), class: "no-underline flex items-center cursor-pointer transition group border border-gray-300 rounded-md px-2 py-1 hover:border-purple-500" do %>
+  <%= render partial: 'shared/icons/chat', locals: { width: 5, height: 5, color: 'text-gray-500 group-hover:text-purple-500' } %>
   <span
     data-controller='counts'
     data-counts-count-value="<%= snippet.comments_count %>"
     data-action='comment-created@window->counts#increment comment-deleted@window->counts#decrement'
     data-counts-target="count"
-    class="inline-block text-sm text-gray-500 ml-1 -mb-0.5"
+    class="inline-block text-sm text-gray-500 -mb-0.5 <%= snippet.comments? ? 'ml-1' : '' %>"
   >
     <% if snippet.comments? %> 
       <%= snippet.comments_count %>

app/views/shared/_like_button.html.erb

@@ -11,7 +11,7 @@
   <% end %>
 >
   <div 
-    class="flex h-full items-center mr-2"
+    class="flex h-full items-center mr-2 group border border-gray-300 rounded-md px-2 py-1 hover:border-red-500"
     data-action="click->like#toggle"
   >
     <%= render partial: 'shared/icons/heart', locals: { width: 5, height: 5, color: color_for_like_status(snippet) } %>

app/views/shared/_picture_button.html.erb

@@ -1,10 +1,11 @@
 <%= button_tag(
-    class: "ml-2 no-underline flex items-center cursor-pointer transition",
+    title: 'Share or download this snippet',
+    class: "group ml-2 no-underline flex items-center cursor-pointer transition border border-gray-300 rounded-md px-2 py-1 hover:border-cyan",
 		data: {
 			controller: 'modal',
 			action: 'modal#present',
-			modal_url_value: picture_modals_snippet_path(snippet: snippet)
+			modal_url_value: picture_modals_snippet_path(snippet)
 		}
 	) do %>
-  <%= render partial: 'shared/icons/camera', locals: { classes: 'w-5 h-5 text-gray-500' } %>
+  <%= render partial: 'shared/icons/share', locals: { classes: 'w-5 h-5 text-gray-500 group-hover:text-cyan' } %>
 <% end %>

app/views/shared/icons/_download_document.html.erb

@@ -0,0 +1,3 @@
+<svg class="<%= classes %>" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" d="M6 2a2 2 0 00-2 2v12a2 2 0 002 2h8a2 2 0 002-2V7.414A2 2 0 0015.414 6L12 2.586A2 2 0 0010.586 2H6zm5 6a1 1 0 10-2 0v3.586l-1.293-1.293a1 1 0 10-1.414 1.414l3 3a1 1 0 001.414 0l3-3a1 1 0 00-1.414-1.414L11 11.586V8z" clip-rule="evenodd"></path>
+</svg>