Lydia/wri 13 image upload

Gemfile

@@ -170,4 +170,8 @@ gem "factory_bot", "~> 6.2"
 
 gem "pundit", "~> 2.3"
 
+gem "image_processing", "~> 1.12"
+
+gem "aws-sdk-s3", "~> 1.119"
+
 gem "timecop", "~> 0.9.6"

Gemfile.lock

@@ -76,6 +76,22 @@ GEM
       activerecord (>= 3.2, < 8.0)
       rake (>= 10.4, < 14.0)
     awesome_print (1.9.2)
+    aws-eventstream (1.2.0)
+    aws-partitions (1.729.0)
+    aws-sdk-core (3.170.0)
+      aws-eventstream (~> 1, >= 1.0.2)
+      aws-partitions (~> 1, >= 1.651.0)
+      aws-sigv4 (~> 1.5)
+      jmespath (~> 1, >= 1.6.1)
+    aws-sdk-kms (1.63.0)
+      aws-sdk-core (~> 3, >= 3.165.0)
+      aws-sigv4 (~> 1.1)
+    aws-sdk-s3 (1.119.1)
+      aws-sdk-core (~> 3, >= 3.165.0)
+      aws-sdk-kms (~> 1)
+      aws-sigv4 (~> 1.4)
+    aws-sigv4 (1.5.2)
+      aws-eventstream (~> 1, >= 1.0.2)
     bcrypt (3.1.18)
     better_errors (2.9.1)
       coderay (>= 1.0.0)
@@ -135,6 +151,7 @@ GEM
       faraday-net_http (>= 2.0, < 3.1)
       ruby2_keywords (>= 0.0.4)
     faraday-net_http (3.0.2)
+    ffi (1.15.5)
     globalid (1.0.1)
       activesupport (>= 5.0)
     haml (6.1.1)
@@ -159,6 +176,9 @@ GEM
       ruby_parser (~> 3.5)
     i18n (1.12.0)
       concurrent-ruby (~> 1.0)
+    image_processing (1.12.2)
+      mini_magick (>= 4.9.5, < 5)
+      ruby-vips (>= 2.0.17, < 3)
     importmap-rails (1.1.5)
       actionpack (>= 6.0.0)
       railties (>= 6.0.0)
@@ -168,6 +188,7 @@ GEM
     jbuilder (2.11.5)
       actionview (>= 5.0.0)
       activesupport (>= 5.0.0)
+    jmespath (1.6.2)
     json (2.6.3)
     json-schema (2.8.1)
       addressable (>= 2.4)
@@ -210,6 +231,7 @@ GEM
     meta-tags (2.18.0)
       actionpack (>= 3.2.0, < 7.1)
     method_source (1.0.0)
+    mini_magick (4.12.0)
     mini_mime (1.1.2)
     minitest (5.17.0)
     msgpack (1.6.0)
@@ -335,6 +357,8 @@ GEM
       rspec-mocks (~> 3.10)
       rspec-support (~> 3.10)
     rspec-support (3.12.0)
+    ruby-vips (2.1.4)
+      ffi (~> 1.12)
     ruby2_keywords (0.0.5)
     ruby_parser (3.19.2)
       sexp_processor (~> 4.16)
@@ -421,6 +445,7 @@ DEPENDENCIES
   ahoy_matey
   annotate
   awesome_print
+  aws-sdk-s3 (~> 1.119)
   better_errors
   binding_of_caller
   bootsnap
@@ -437,6 +462,7 @@ DEPENDENCIES
   hashid-rails (~> 1.0)
   high_voltage (~> 3.1)
   html2haml
+  image_processing (~> 1.12)
   importmap-rails
   jbuilder
   kaminari

app/assets/stylesheets/application.tailwind.css

@@ -5,23 +5,15 @@
 
 @layer components {
   .btn-primary {
-    @apply justify-center rounded-full bg-gradient-to-r from-sky-500 to-purple-500 px-4 py-2 text-white transition hover:scale-105 transform duration-300 ease-in-out cursor-pointer;
+    @apply justify-center rounded-md border border-transparent bg-emerald-800 py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-emerald-900 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 cursor-pointer;
   }
 
   .btn-secondary {
-    @apply justify-center  rounded-full bg-gradient-to-r from-sky-500 to-purple-500 px-0.5 py-0.5 text-blue-500 transition hover:scale-105 transform duration-300 ease-in-out cursor-pointer;
+    @apply justify-center rounded-full border border-emerald-800  py-2 px-4 text-sm font-medium text-emerald-900 shadow-sm hover:shadow-md focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 cursor-pointer;
   }
 
-
-  .btn-secondary-inner {
-    @apply bg-white rounded-full px-3 text-sm;
-  }
-
-
-
-
   .btn-small {
-    @apply justify-center rounded-full border border-fuchsia-600 py-2 px-4 text-xs font-medium  shadow-sm  focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 cursor-pointer hover:border-fuchsia-700;
+    @apply justify-center rounded-md border border-emerald-800  py-2 px-4 text-xs font-medium text-emerald-900 shadow-sm hover:bg-emerald-100 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 cursor-pointer;
   }
 
   .dropdown-item {
@@ -31,71 +23,33 @@
   .tab {
     @apply text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm  px-4 py-2 text-sm text-gray-700 ;
   }
-
-  .radio-custom {
-    @apply border-gray-300 text-sky-500 transition  disabled:opacity-25;
-  }
-
-  .input-custom {
-    @apply  block w-full appearance-none rounded-full border border-gray-300 px-3 py-2 placeholder-gray-400 shadow-sm focus:border-sky-500 focus:outline-none focus:ring-sky-500 sm:text-sm;
-  }
 }
 
 
-
 @layer base {
-
-
-
-  .post_content > p {
-    @apply font-serif mb-6
-  }
-
-  h1 {
-    @apply   text-5xl font-bold;
-  }
-  h2 {
-    @apply  text-4xl font-bold;
-  }
-
-  h3 {
-    @apply  text-3xl font-bold mb-5;
-  }
-  h3 {
-    @apply  text-2xl font-bold mb-5;
-  }
-  h4 {
-    @apply text-xl font-bold mb-5;
-  }
-  h5 {
-    @apply text-lg font-bold mb-5;
-  }
-  h6 {
-    @apply text-sm font-bold mb-5;
-  }
-
   .post_content h1 {
-    @apply font-serif  mb-5;
+    @apply font-serif text-5xl font-bold mb-5;
   }
   .post_content h2 {
-    @apply font-serif  mb-5;
+    @apply font-serif text-4xl font-bold mb-5;
   }
 
   .post_content h3 {
-    @apply font-serif mb-5;
+    @apply font-serif font-serif text-3xl font-bold mb-5;
   }
   .post_content h3 {
-    @apply font-serif mb-5;
+    @apply font-serif text-2xl font-bold mb-5;
   }
   .post_content h4 {
-    @apply font-serif mb-5;
+    @apply font-serif text-xl font-bold mb-5;
   }
   .post_content h5 {
-    @apply font-serif mb-5;
+    @apply font-serif text-lg font-bold mb-5;
   }
   .post_content h6 {
-    @apply font-serif mb-5;
+    @apply font-serif text-sm font-bold mb-5;
   }
+  /* ... */
 
   ul{
     list-style-type: disc;
@@ -111,6 +65,8 @@
     font-size: 8px;
   }
 
-
+  .post_content > p {
+    margin-bottom: 25px;
+  }
 }
 

app/controllers/posts_controller.rb

@@ -24,9 +24,7 @@ def show
     if @post.draft?
       redirect_to edit_post_path(@post)
     end
-    if current_user.nil? ||  @post.user != current_user
-      ahoy.track "post viewed", post_id: @post.id
-    end
+    ahoy.track "post viewed", post_id: @post.id
   end
 
   # GET /posts/new
@@ -66,7 +64,7 @@ def update
     respond_to do |format|
       if @post.update(post_params)
         format.turbo_stream {}
-        format.html {redirect_to post_path(@post)}
+        format.html {redirect_to root_path}
       else
         format.html { render :edit, status: :unprocessable_entity }
         format.json { render json: @post.errors, status: :unprocessable_entity }
@@ -113,7 +111,7 @@ def set_post
 
     # Only allow a list of trusted parameters through.
     def post_params
-      post_params = params.require(:post).permit(:body, :title, :draft_body, :publication_id)
+      post_params = params.require(:post).permit(:body, :title, :draft_body, :publication_id, images:[])
 
       if post_params[:publication_id].present?
         post_params[:publication_id] = post_params[:publication_id].to_i.zero? ?  nil : post_params[:publication_id].to_i 

app/javascript/application.js

@@ -2,8 +2,11 @@
 import "@hotwired/turbo-rails"
 import "controllers"
 
+import "@rails/activestorage"
+
 import Alpine from 'alpinejs'
 
 window.Alpine = Alpine
 
-Alpine.start()
+Alpine.start()
+

app/javascript/controllers/editor_controller.js

@@ -1,5 +1,6 @@
 
 import { Controller } from "@hotwired/stimulus"
+import { DirectUpload } from "@rails/activestorage";
 // import EditorJS from 'editor.js';
 // import EditorJS from '@editorjs/editorjs';
 // import Header from '@editorjs/header';
@@ -14,7 +15,7 @@ export default class extends Controller {
       var dataValue = {"time":1677155768141,"blocks":[{"id":"pgD-hmVDIY","type":"header","data":{"text":"","level":2}},{"id":"bDW9OO6bew","type":"paragraph","data":{"text":""}}],"version":"2.26.5"}
     }
 
-    console.log('dataValue')
+
 
 
     this.editor = new EditorJS({
@@ -68,6 +69,44 @@ export default class extends Controller {
         //   },
         // },
 
+        image: {
+          class: ImageTool,
+          config: {
+
+          },
+
+          uploader: {
+            uploadByFile(file) {
+              const url = "/rails/active_storage/direct_uploads";
+              const upload = new DirectUpload(file, url);
+              console.log('yeah')
+              console.log(url)
+              return new Promise(function (resolve, reject) {
+                upload.create((error, blob) => {
+                  if (error) {
+                    reject(error);
+                  } else {
+                    fetch(`/blocks/get_image_url?attachable_sgid=${blob.attachable_sgid}`)
+                      .then((response) => response.json())
+                      .then((imageUrlResp) => {
+                        console.log(imageUrlResp);
+                        resolve({
+                          success: 1,
+                          file: {
+                            url: imageUrlResp.url,
+                            attachable_sgid: blob.attachable_sgid,
+                          },
+                        });
+                      });
+                  }
+                });
+              });
+            }
+          }
+
+
+        }
+
       },
 
 

app/models/post.rb

@@ -34,6 +34,9 @@ class Post < ApplicationRecord
    #----- ASSOCIATIONS -----#
 
   belongs_to :user
+
+  has_many_attached :images
+
   belongs_to :publication, optional: true
   has_many :comments, dependent: :destroy
 

app/models/user.rb

@@ -50,6 +50,26 @@
 #  index_users_on_invited_by_id         (invited_by_id)
 #  index_users_on_reset_password_token  (reset_password_token) UNIQUE
 #
+#  reset_password_sent_at         :datetime
+#  reset_password_token           :string
+#  sign_in_count                  :integer          default(0), not null
+#  timezone                       :string           default("UTC")
+#  uid                            :string
+#  unconfirmed_email              :string
+#  username                       :string
+#  website                        :string
+#  created_at                     :datetime         not null
+#  updated_at                     :datetime         not null
+#  invited_by_id                  :bigint
+#
+# Indexes
+#
+#  index_users_on_email                 (email) UNIQUE
+#  index_users_on_invitation_token      (invitation_token) UNIQUE
+#  index_users_on_invited_by            (invited_by_type,invited_by_id)
+#  index_users_on_invited_by_id         (invited_by_id)
+#  index_users_on_reset_password_token  (reset_password_token) UNIQUE
+#
 class User < ApplicationRecord
   # Include default devise modules. Others available are:
   # :confirmable, :lockable, :timeoutable, :trackable and 
@@ -134,7 +154,7 @@ def pending_acceptance?
   end
 
   def visited_posts
-    post_ids = Ahoy::Event.where(user_id: id , name: "post viewed").order(time: :desc).pluck(Arel.sql("properties ->> 'post_id'"))
+    post_ids = Ahoy::Event.where(user_id: 2 , name: "post viewed").order(time: :desc).pluck(Arel.sql("properties ->> 'post_id'"))
     Post.with_discarded.where(id: post_ids).where(discarded_at: nil)
   end
 

app/views/comments/_comment.html.haml

@@ -23,7 +23,7 @@
               .py-1{:role => "none"}
 
                 = button_to comment_path(comment), method: :delete, class: 'text-gray-700 flex px-4 py-2 text-sm', role: 'menuitem', tabindex: '-1' do
-                  %svg.feather.feather-edit-2.mr-2.self-center{ fill: 'none', height: '16', stroke: 'currentColor', 'stroke-linecap': 'round', 'stroke-linejoin': 'round', 'stroke-width': '2', viewbox: '0 0 24 24', width: '20', xmlns: 'http://www.w3.org/2000/svg' }
+                  %svg.feather.feather-edit-2.mr-2{ fill: 'none', height: '20', stroke: 'currentColor', 'stroke-linecap': 'round', 'stroke-linejoin': 'round', 'stroke-width': '2', viewbox: '0 0 24 24', width: '20', xmlns: 'http://www.w3.org/2000/svg' }
                     %polyline{ points: '3 6 5 6 21 6' }
                     %path{ d: 'M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2' }
                     %line{ x1: '10', x2: '10', y1: '11', y2: '17' }

app/views/comments/_form.html.haml

@@ -1,8 +1,8 @@
 = simple_form_for comment, url: comments_path do |f|
-  = f.input :body, as: :text,  maxlength: 1000,label: false, input_html:{rows: 5, class: 'block w-full appearance-none rounded-md border border-gray-300 px-3 py-2 placeholder-gray-400 shadow-sm  focus:border-gray-500 focus:outline-none focus:ring-gray-500 sm:text-sm'}, placeholder: "Write a comment...", required: true
+  = f.input :body, as: :text, maxlength: 1000,label: false, input_html:{rows: 5, class: 'block w-full appearance-none rounded-md border border-gray-300 px-3 py-2 placeholder-gray-400 shadow-sm  focus:border-emerald-900 focus:outline-none focus:ring-emerald-900 sm:text-sm'}, placeholder: "Write a comment...", required: true
   = f.hidden_field :post_id, value: post.id
   .flex.items-end.mt-3
-    = f.submit "Post", class: 'flex ml-auto justify-center btn-primary text-sm '
+    = f.submit "Post", class: 'flex ml-auto justify-center rounded-md border border-transparent bg-emerald-800 py-2 px-5 cursor-pointer text-sm font-medium text-white shadow-sm hover:bg-emerald-900 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2'