├── .browserslistrc
├── .gitignore
├── .ruby-version
├── Gemfile
├── Gemfile.lock
├── Procfile
├── README.md
├── Rakefile
├── app
├── assets
│ ├── config
│ │ └── manifest.js
│ ├── images
│ │ └── .keep
│ └── stylesheets
│ │ └── application.scss
├── channels
│ └── application_cable
│ │ ├── channel.rb
│ │ └── connection.rb
├── controllers
│ ├── application_controller.rb
│ ├── concerns
│ │ └── .keep
│ ├── home_controller.rb
│ └── posts_controller.rb
├── helpers
│ ├── application_helper.rb
│ └── posts_helper.rb
├── javascript
│ ├── channels
│ │ ├── consumer.js
│ │ └── index.js
│ ├── controllers
│ │ ├── dropzone_controller.js
│ │ └── index.js
│ ├── helpers
│ │ └── index.js
│ ├── packs
│ │ └── application.js
│ └── stylesheets
│ │ ├── application.scss
│ │ ├── components
│ │ ├── _buttons.scss
│ │ └── _forms.scss
│ │ └── tailwind.config.js
├── jobs
│ └── application_job.rb
├── mailers
│ └── application_mailer.rb
├── models
│ ├── application_record.rb
│ ├── concerns
│ │ └── .keep
│ ├── post.rb
│ └── user.rb
└── views
│ ├── devise
│ ├── confirmations
│ │ └── new.html.erb
│ ├── mailer
│ │ ├── confirmation_instructions.html.erb
│ │ ├── email_changed.html.erb
│ │ ├── password_change.html.erb
│ │ ├── reset_password_instructions.html.erb
│ │ └── unlock_instructions.html.erb
│ ├── passwords
│ │ ├── edit.html.erb
│ │ └── new.html.erb
│ ├── registrations
│ │ ├── edit.html.erb
│ │ └── new.html.erb
│ ├── sessions
│ │ └── new.html.erb
│ ├── shared
│ │ ├── _error_messages.html.erb
│ │ ├── _form_wrap.html.erb
│ │ └── _links.html.erb
│ └── unlocks
│ │ └── new.html.erb
│ ├── home
│ └── index.html.erb
│ ├── layouts
│ ├── application.html.erb
│ ├── mailer.html.erb
│ └── mailer.text.erb
│ └── posts
│ ├── _form.html.erb
│ ├── _post.json.jbuilder
│ ├── edit.html.erb
│ ├── index.html.erb
│ ├── index.json.jbuilder
│ ├── new.html.erb
│ ├── show.html.erb
│ └── show.json.jbuilder
├── babel.config.js
├── bin
├── bundle
├── rails
├── rake
├── setup
├── spring
├── webpack
├── webpack-dev-server
└── yarn
├── config.ru
├── config
├── application.rb
├── boot.rb
├── cable.yml
├── credentials.yml.enc
├── database.yml
├── environment.rb
├── environments
│ ├── development.rb
│ ├── production.rb
│ └── test.rb
├── initializers
│ ├── application_controller_renderer.rb
│ ├── assets.rb
│ ├── backtrace_silencers.rb
│ ├── content_security_policy.rb
│ ├── cookies_serializer.rb
│ ├── devise.rb
│ ├── filter_parameter_logging.rb
│ ├── friendly_id.rb
│ ├── inflections.rb
│ ├── mime_types.rb
│ └── wrap_parameters.rb
├── locales
│ ├── devise.en.yml
│ └── en.yml
├── puma.rb
├── routes.rb
├── spring.rb
├── storage.yml
├── webpack
│ ├── development.js
│ ├── environment.js
│ ├── production.js
│ └── test.js
└── webpacker.yml
├── db
├── migrate
│ ├── 20190915150321_devise_create_users.rb
│ ├── 20190915150329_create_friendly_id_slugs.rb
│ ├── 20190915152618_create_active_storage_tables.active_storage.rb
│ └── 20190915153310_create_posts.rb
├── schema.rb
└── seeds.rb
├── lib
├── assets
│ └── .keep
└── tasks
│ └── .keep
├── log
└── .keep
├── package.json
├── postcss.config.js
├── public
├── 404.html
├── 422.html
├── 500.html
├── apple-touch-icon-precomposed.png
├── apple-touch-icon.png
├── favicon.ico
└── robots.txt
├── storage
└── .keep
├── test
├── application_system_test_case.rb
├── channels
│ └── application_cable
│ │ └── connection_test.rb
├── controllers
│ ├── .keep
│ └── posts_controller_test.rb
├── fixtures
│ ├── .keep
│ ├── files
│ │ └── .keep
│ ├── posts.yml
│ └── users.yml
├── helpers
│ └── .keep
├── integration
│ └── .keep
├── mailers
│ └── .keep
├── models
│ ├── .keep
│ ├── post_test.rb
│ └── user_test.rb
├── system
│ ├── .keep
│ └── posts_test.rb
└── test_helper.rb
├── tmp
└── .keep
├── vendor
└── .keep
└── yarn.lock
/.browserslistrc:
--------------------------------------------------------------------------------
1 | defaults
2 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files for more about ignoring files.
2 | #
3 | # If you find yourself ignoring temporary files generated by your text editor
4 | # or operating system, you probably want to add a global ignore instead:
5 | # git config --global core.excludesfile '~/.gitignore_global'
6 |
7 | # Ignore bundler config.
8 | /.bundle
9 |
10 | # Ignore the default SQLite database.
11 | /db/*.sqlite3
12 | /db/*.sqlite3-journal
13 |
14 | # Ignore all logfiles and tempfiles.
15 | /log/*
16 | /tmp/*
17 | !/log/.keep
18 | !/tmp/.keep
19 |
20 | # Ignore uploaded files in development.
21 | /storage/*
22 | !/storage/.keep
23 |
24 | /public/assets
25 | .byebug_history
26 |
27 | # Ignore master key for decrypting credentials and more.
28 | /config/master.key
29 |
30 | /public/packs
31 | /public/packs-test
32 | /node_modules
33 | /yarn-error.log
34 | yarn-debug.log*
35 | .yarn-integrity
36 |
--------------------------------------------------------------------------------
/.ruby-version:
--------------------------------------------------------------------------------
1 | 2.6.3
2 |
--------------------------------------------------------------------------------
/Gemfile:
--------------------------------------------------------------------------------
1 | source 'https://rubygems.org'
2 | git_source(:github) { |repo| "https://github.com/#{repo}.git" }
3 |
4 | ruby '2.6.3'
5 |
6 | # Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
7 | gem 'rails', '~> 6.0.0'
8 | # Use sqlite3 as the database for Active Record
9 | gem 'sqlite3', '~> 1.4'
10 | # Use Puma as the app server
11 | gem 'puma', '~> 3.12'
12 | # Use SCSS for stylesheets
13 | gem 'sass-rails', '~> 5'
14 | # Transpile app-like JavaScript. Read more: https://github.com/rails/webpacker
15 | gem 'webpacker', '~> 4.0'
16 | # Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
17 | gem 'turbolinks', '~> 5'
18 | # Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
19 | gem 'jbuilder', '~> 2.7'
20 | # Use Redis adapter to run Action Cable in production
21 | # gem 'redis', '~> 4.0'
22 | # Use Active Model has_secure_password
23 | # gem 'bcrypt', '~> 3.1.7'
24 |
25 | # Use Active Storage variant
26 | # gem 'image_processing', '~> 1.2'
27 |
28 | # Reduces boot times through caching; required in config/boot.rb
29 | gem 'bootsnap', '>= 1.4.2', require: false
30 |
31 | group :development, :test do
32 | # Call 'byebug' anywhere in the code to stop execution and get a debugger console
33 | gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
34 | end
35 |
36 | group :development do
37 | # Access an interactive console on exception pages or by calling 'console' anywhere in the code.
38 | gem 'web-console', '>= 3.3.0'
39 | gem 'listen', '>= 3.0.5', '< 3.2'
40 | # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
41 | gem 'spring'
42 | gem 'spring-watcher-listen', '~> 2.0.0'
43 | end
44 |
45 | group :test do
46 | # Adds support for Capybara system testing and selenium driver
47 | gem 'capybara', '>= 2.15'
48 | gem 'selenium-webdriver'
49 | # Easy installation and use of web drivers to run system tests with browsers
50 | gem 'webdrivers'
51 | end
52 |
53 | # Windows does not include zoneinfo files, so bundle the tzinfo-data gem
54 | gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
55 |
56 | gem 'devise', '~> 4.7'
57 | gem 'friendly_id', '~> 5.2', '>= 5.2.5'
58 | gem 'sidekiq', '~> 5.2', '>= 5.2.7'
--------------------------------------------------------------------------------
/Gemfile.lock:
--------------------------------------------------------------------------------
1 | GEM
2 | remote: https://rubygems.org/
3 | specs:
4 | actioncable (6.0.0)
5 | actionpack (= 6.0.0)
6 | nio4r (~> 2.0)
7 | websocket-driver (>= 0.6.1)
8 | actionmailbox (6.0.0)
9 | actionpack (= 6.0.0)
10 | activejob (= 6.0.0)
11 | activerecord (= 6.0.0)
12 | activestorage (= 6.0.0)
13 | activesupport (= 6.0.0)
14 | mail (>= 2.7.1)
15 | actionmailer (6.0.0)
16 | actionpack (= 6.0.0)
17 | actionview (= 6.0.0)
18 | activejob (= 6.0.0)
19 | mail (~> 2.5, >= 2.5.4)
20 | rails-dom-testing (~> 2.0)
21 | actionpack (6.0.0)
22 | actionview (= 6.0.0)
23 | activesupport (= 6.0.0)
24 | rack (~> 2.0)
25 | rack-test (>= 0.6.3)
26 | rails-dom-testing (~> 2.0)
27 | rails-html-sanitizer (~> 1.0, >= 1.2.0)
28 | actiontext (6.0.0)
29 | actionpack (= 6.0.0)
30 | activerecord (= 6.0.0)
31 | activestorage (= 6.0.0)
32 | activesupport (= 6.0.0)
33 | nokogiri (>= 1.8.5)
34 | actionview (6.0.0)
35 | activesupport (= 6.0.0)
36 | builder (~> 3.1)
37 | erubi (~> 1.4)
38 | rails-dom-testing (~> 2.0)
39 | rails-html-sanitizer (~> 1.1, >= 1.2.0)
40 | activejob (6.0.0)
41 | activesupport (= 6.0.0)
42 | globalid (>= 0.3.6)
43 | activemodel (6.0.0)
44 | activesupport (= 6.0.0)
45 | activerecord (6.0.0)
46 | activemodel (= 6.0.0)
47 | activesupport (= 6.0.0)
48 | activestorage (6.0.0)
49 | actionpack (= 6.0.0)
50 | activejob (= 6.0.0)
51 | activerecord (= 6.0.0)
52 | marcel (~> 0.3.1)
53 | activesupport (6.0.0)
54 | concurrent-ruby (~> 1.0, >= 1.0.2)
55 | i18n (>= 0.7, < 2)
56 | minitest (~> 5.1)
57 | tzinfo (~> 1.1)
58 | zeitwerk (~> 2.1, >= 2.1.8)
59 | addressable (2.7.0)
60 | public_suffix (>= 2.0.2, < 5.0)
61 | bcrypt (3.1.13)
62 | bindex (0.8.1)
63 | bootsnap (1.4.5)
64 | msgpack (~> 1.0)
65 | builder (3.2.3)
66 | byebug (11.0.1)
67 | capybara (3.29.0)
68 | addressable
69 | mini_mime (>= 0.1.3)
70 | nokogiri (~> 1.8)
71 | rack (>= 1.6.0)
72 | rack-test (>= 0.6.3)
73 | regexp_parser (~> 1.5)
74 | xpath (~> 3.2)
75 | childprocess (2.0.0)
76 | rake (< 13.0)
77 | concurrent-ruby (1.1.5)
78 | connection_pool (2.2.2)
79 | crass (1.0.6)
80 | devise (4.7.1)
81 | bcrypt (~> 3.0)
82 | orm_adapter (~> 0.1)
83 | railties (>= 4.1.0)
84 | responders
85 | warden (~> 1.2.3)
86 | erubi (1.8.0)
87 | ffi (1.11.1)
88 | friendly_id (5.2.5)
89 | activerecord (>= 4.0.0)
90 | globalid (0.4.2)
91 | activesupport (>= 4.2.0)
92 | i18n (1.6.0)
93 | concurrent-ruby (~> 1.0)
94 | jbuilder (2.9.1)
95 | activesupport (>= 4.2.0)
96 | listen (3.1.5)
97 | rb-fsevent (~> 0.9, >= 0.9.4)
98 | rb-inotify (~> 0.9, >= 0.9.7)
99 | ruby_dep (~> 1.2)
100 | loofah (2.5.0)
101 | crass (~> 1.0.2)
102 | nokogiri (>= 1.5.9)
103 | mail (2.7.1)
104 | mini_mime (>= 0.1.1)
105 | marcel (0.3.3)
106 | mimemagic (~> 0.3.2)
107 | method_source (0.9.2)
108 | mimemagic (0.3.3)
109 | mini_mime (1.0.2)
110 | mini_portile2 (2.4.0)
111 | minitest (5.11.3)
112 | msgpack (1.3.1)
113 | nio4r (2.5.1)
114 | nokogiri (1.10.9)
115 | mini_portile2 (~> 2.4.0)
116 | orm_adapter (0.5.0)
117 | public_suffix (4.0.1)
118 | puma (3.12.6)
119 | rack (2.2.3)
120 | rack-protection (2.0.7)
121 | rack
122 | rack-proxy (0.6.5)
123 | rack
124 | rack-test (1.1.0)
125 | rack (>= 1.0, < 3)
126 | rails (6.0.0)
127 | actioncable (= 6.0.0)
128 | actionmailbox (= 6.0.0)
129 | actionmailer (= 6.0.0)
130 | actionpack (= 6.0.0)
131 | actiontext (= 6.0.0)
132 | actionview (= 6.0.0)
133 | activejob (= 6.0.0)
134 | activemodel (= 6.0.0)
135 | activerecord (= 6.0.0)
136 | activestorage (= 6.0.0)
137 | activesupport (= 6.0.0)
138 | bundler (>= 1.3.0)
139 | railties (= 6.0.0)
140 | sprockets-rails (>= 2.0.0)
141 | rails-dom-testing (2.0.3)
142 | activesupport (>= 4.2.0)
143 | nokogiri (>= 1.6)
144 | rails-html-sanitizer (1.2.0)
145 | loofah (~> 2.2, >= 2.2.2)
146 | railties (6.0.0)
147 | actionpack (= 6.0.0)
148 | activesupport (= 6.0.0)
149 | method_source
150 | rake (>= 0.8.7)
151 | thor (>= 0.20.3, < 2.0)
152 | rake (12.3.3)
153 | rb-fsevent (0.10.3)
154 | rb-inotify (0.10.0)
155 | ffi (~> 1.0)
156 | redis (4.1.2)
157 | regexp_parser (1.6.0)
158 | responders (3.0.0)
159 | actionpack (>= 5.0)
160 | railties (>= 5.0)
161 | ruby_dep (1.5.0)
162 | rubyzip (1.3.0)
163 | sass (3.7.4)
164 | sass-listen (~> 4.0.0)
165 | sass-listen (4.0.0)
166 | rb-fsevent (~> 0.9, >= 0.9.4)
167 | rb-inotify (~> 0.9, >= 0.9.7)
168 | sass-rails (5.1.0)
169 | railties (>= 5.2.0)
170 | sass (~> 3.1)
171 | sprockets (>= 2.8, < 4.0)
172 | sprockets-rails (>= 2.0, < 4.0)
173 | tilt (>= 1.1, < 3)
174 | selenium-webdriver (3.142.4)
175 | childprocess (>= 0.5, < 3.0)
176 | rubyzip (~> 1.2, >= 1.2.2)
177 | sidekiq (5.2.7)
178 | connection_pool (~> 2.2, >= 2.2.2)
179 | rack (>= 1.5.0)
180 | rack-protection (>= 1.5.0)
181 | redis (>= 3.3.5, < 5)
182 | spring (2.1.0)
183 | spring-watcher-listen (2.0.1)
184 | listen (>= 2.7, < 4.0)
185 | spring (>= 1.2, < 3.0)
186 | sprockets (3.7.2)
187 | concurrent-ruby (~> 1.0)
188 | rack (> 1, < 3)
189 | sprockets-rails (3.2.1)
190 | actionpack (>= 4.0)
191 | activesupport (>= 4.0)
192 | sprockets (>= 3.0.0)
193 | sqlite3 (1.4.1)
194 | thor (0.20.3)
195 | thread_safe (0.3.6)
196 | tilt (2.0.9)
197 | turbolinks (5.2.0)
198 | turbolinks-source (~> 5.2)
199 | turbolinks-source (5.2.0)
200 | tzinfo (1.2.5)
201 | thread_safe (~> 0.1)
202 | warden (1.2.8)
203 | rack (>= 2.0.6)
204 | web-console (4.0.1)
205 | actionview (>= 6.0.0)
206 | activemodel (>= 6.0.0)
207 | bindex (>= 0.4.0)
208 | railties (>= 6.0.0)
209 | webdrivers (4.1.2)
210 | nokogiri (~> 1.6)
211 | rubyzip (~> 1.0)
212 | selenium-webdriver (>= 3.0, < 4.0)
213 | webpacker (4.0.7)
214 | activesupport (>= 4.2)
215 | rack-proxy (>= 0.6.1)
216 | railties (>= 4.2)
217 | websocket-driver (0.7.1)
218 | websocket-extensions (>= 0.1.0)
219 | websocket-extensions (0.1.5)
220 | xpath (3.2.0)
221 | nokogiri (~> 1.8)
222 | zeitwerk (2.1.10)
223 |
224 | PLATFORMS
225 | ruby
226 |
227 | DEPENDENCIES
228 | bootsnap (>= 1.4.2)
229 | byebug
230 | capybara (>= 2.15)
231 | devise (~> 4.7)
232 | friendly_id (~> 5.2, >= 5.2.5)
233 | jbuilder (~> 2.7)
234 | listen (>= 3.0.5, < 3.2)
235 | puma (~> 3.12)
236 | rails (~> 6.0.0)
237 | sass-rails (~> 5)
238 | selenium-webdriver
239 | sidekiq (~> 5.2, >= 5.2.7)
240 | spring
241 | spring-watcher-listen (~> 2.0.0)
242 | sqlite3 (~> 1.4)
243 | turbolinks (~> 5)
244 | tzinfo-data
245 | web-console (>= 3.3.0)
246 | webdrivers
247 | webpacker (~> 4.0)
248 |
249 | RUBY VERSION
250 | ruby 2.6.3p62
251 |
252 | BUNDLED WITH
253 | 2.0.1
254 |
--------------------------------------------------------------------------------
/Procfile:
--------------------------------------------------------------------------------
1 | web: rails server
2 | sidekiq: sidekiq
3 | webpack: bin/webpack-dev-server
4 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Ruby on Rails Drag and Drop Uploads with Active Storage, Stimulus.js and Dropzone.js
2 |
3 | This tutorial is about using Active Storage from Ruby on Rails 6.0 to create a drag and drop upload experience from scratch using Stimulus.js and Dropzone.js.
4 |
5 | ### Objective
6 |
7 | The goal of this experience is to introduce drag and drop functionality and tie it to Rails Active Storage behind the scenes. I want to be able to drag and drop multiple files for upload as well as pass options that regulate what conditions can be passed around those files. Those conditions could be anything from image type to file size and more.
8 |
9 | **Dependencies:**
10 |
11 | - [Stimulus JS](https://stimulusjs.org/)
12 | - [Dropzone JS](https://www.dropzonejs.com/)
13 | - [Webpack/Rails 6.0](https://rubyonrails.org/)
14 | - [Kickoff Tailwind](https://github.com/justalever/kickoff_tailwind) (My personal starter template for Rails apps)
15 |
16 |
17 | Continue reading here: https://web-crunch.com/rails-drag-drop-active-storage-stimulus-dropzone/
18 |
--------------------------------------------------------------------------------
/Rakefile:
--------------------------------------------------------------------------------
1 | # Add your own tasks in files placed in lib/tasks ending in .rake,
2 | # for example lib/tasks/capistrano.rake, and they will automatically be available to Rake.
3 |
4 | require_relative 'config/application'
5 |
6 | Rails.application.load_tasks
7 |
--------------------------------------------------------------------------------
/app/assets/config/manifest.js:
--------------------------------------------------------------------------------
1 | //= link_tree ../images
2 | //= link_directory ../stylesheets .css
3 |
--------------------------------------------------------------------------------
/app/assets/images/.keep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/justalever/drag_and_drop_active_storage/ea887548526e80b3560efdd66a6beb9754570b7b/app/assets/images/.keep
--------------------------------------------------------------------------------
/app/assets/stylesheets/application.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/justalever/drag_and_drop_active_storage/ea887548526e80b3560efdd66a6beb9754570b7b/app/assets/stylesheets/application.scss
--------------------------------------------------------------------------------
/app/channels/application_cable/channel.rb:
--------------------------------------------------------------------------------
1 | module ApplicationCable
2 | class Channel < ActionCable::Channel::Base
3 | end
4 | end
5 |
--------------------------------------------------------------------------------
/app/channels/application_cable/connection.rb:
--------------------------------------------------------------------------------
1 | module ApplicationCable
2 | class Connection < ActionCable::Connection::Base
3 | end
4 | end
5 |
--------------------------------------------------------------------------------
/app/controllers/application_controller.rb:
--------------------------------------------------------------------------------
1 | class ApplicationController < ActionController::Base
2 | protect_from_forgery with: :exception
3 |
4 | before_action :configure_permitted_parameters, if: :devise_controller?
5 |
6 | protected
7 |
8 | def configure_permitted_parameters
9 | devise_parameter_sanitizer.permit(:sign_up, keys: [:username, :name])
10 | devise_parameter_sanitizer.permit(:account_update, keys: [:username, :name])
11 | end
12 | end
--------------------------------------------------------------------------------
/app/controllers/concerns/.keep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/justalever/drag_and_drop_active_storage/ea887548526e80b3560efdd66a6beb9754570b7b/app/controllers/concerns/.keep
--------------------------------------------------------------------------------
/app/controllers/home_controller.rb:
--------------------------------------------------------------------------------
1 | class HomeController < ApplicationController
2 | def index
3 | end
4 | end
5 |
--------------------------------------------------------------------------------
/app/controllers/posts_controller.rb:
--------------------------------------------------------------------------------
1 | class PostsController < ApplicationController
2 | before_action :authenticate_user!, except: [:show, :index]
3 | before_action :set_post, only: [:show, :edit, :update, :destroy]
4 |
5 |
6 | def index
7 | @posts = Post.all
8 | end
9 |
10 | def show
11 | end
12 |
13 | def new
14 | @post = Post.new
15 | end
16 |
17 | def edit
18 | end
19 |
20 | def create
21 | @post = Post.new(post_params)
22 | @post.user_id = current_user.id
23 |
24 | respond_to do |format|
25 | if @post.save
26 | format.html { redirect_to @post, notice: 'Post was successfully created.' }
27 | format.json { render :show, status: :created, location: @post }
28 | else
29 | format.html { render :new }
30 | format.json { render json: @post.errors, status: :unprocessable_entity }
31 | end
32 | end
33 | end
34 |
35 | def update
36 | respond_to do |format|
37 | if @post.update(post_params)
38 | format.html { redirect_to @post, notice: 'Post was successfully updated.' }
39 | format.json { render :show, status: :ok, location: @post }
40 | else
41 | format.html { render :edit }
42 | format.json { render json: @post.errors, status: :unprocessable_entity }
43 | end
44 | end
45 | end
46 |
47 | def destroy
48 | @post.destroy
49 | respond_to do |format|
50 | format.html { redirect_to posts_url, notice: 'Post was successfully destroyed.' }
51 | format.json { head :no_content }
52 | end
53 | end
54 |
55 | private
56 |
57 | def set_post
58 | @post = Post.find(params[:id])
59 | end
60 |
61 | def post_params
62 | params.require(:post).permit(:title, :body, :user_id, :feature_image)
63 | end
64 | end
65 |
--------------------------------------------------------------------------------
/app/helpers/application_helper.rb:
--------------------------------------------------------------------------------
1 | module ApplicationHelper
2 | end
3 |
--------------------------------------------------------------------------------
/app/helpers/posts_helper.rb:
--------------------------------------------------------------------------------
1 | module PostsHelper
2 | end
3 |
--------------------------------------------------------------------------------
/app/javascript/channels/consumer.js:
--------------------------------------------------------------------------------
1 | // Action Cable provides the framework to deal with WebSockets in Rails.
2 | // You can generate new channels where WebSocket features live using the `rails generate channel` command.
3 |
4 | import { createConsumer } from "@rails/actioncable"
5 |
6 | export default createConsumer()
7 |
--------------------------------------------------------------------------------
/app/javascript/channels/index.js:
--------------------------------------------------------------------------------
1 | // Load all the channels within this directory and all subdirectories.
2 | // Channel files must be named *_channel.js.
3 |
4 | const channels = require.context('.', true, /_channel\.js$/)
5 | channels.keys().forEach(channels)
6 |
--------------------------------------------------------------------------------
/app/javascript/controllers/dropzone_controller.js:
--------------------------------------------------------------------------------
1 | import Dropzone from "dropzone";
2 | import { Controller } from "stimulus";
3 | import { DirectUpload } from "@rails/activestorage";
4 | import {
5 | getMetaValue,
6 | toArray,
7 | findElement,
8 | removeElement,
9 | insertAfter
10 | } from "helpers";
11 |
12 | export default class extends Controller {
13 | static targets = ["input"];
14 |
15 | connect() {
16 | this.dropZone = createDropZone(this);
17 | this.hideFileInput();
18 | this.bindEvents();
19 | Dropzone.autoDiscover = false;
20 | }
21 |
22 | // Private
23 | hideFileInput() {
24 | this.inputTarget.disabled = true;
25 | this.inputTarget.style.display = "none";
26 | }
27 |
28 | bindEvents() {
29 | this.dropZone.on("addedfile", file => {
30 | setTimeout(() => {
31 | file.accepted && createDirectUploadController(this, file).start();
32 | }, 500);
33 | });
34 |
35 | this.dropZone.on("removedfile", file => {
36 | file.controller && removeElement(file.controller.hiddenInput);
37 | });
38 |
39 | this.dropZone.on("canceled", file => {
40 | file.controller && file.controller.xhr.abort();
41 | });
42 | }
43 |
44 | get headers() {
45 | return { "X-CSRF-Token": getMetaValue("csrf-token") };
46 | }
47 |
48 | get url() {
49 | return this.inputTarget.getAttribute("data-direct-upload-url");
50 | }
51 |
52 | get maxFiles() {
53 | return this.data.get("maxFiles") || 1;
54 | }
55 |
56 | get maxFileSize() {
57 | return this.data.get("maxFileSize") || 256;
58 | }
59 |
60 | get acceptedFiles() {
61 | return this.data.get("acceptedFiles");
62 | }
63 |
64 | get addRemoveLinks() {
65 | return this.data.get("addRemoveLinks") || true;
66 | }
67 | }
68 |
69 | class DirectUploadController {
70 | constructor(source, file) {
71 | this.directUpload = createDirectUpload(file, source.url, this);
72 | this.source = source;
73 | this.file = file;
74 | }
75 |
76 | start() {
77 | this.file.controller = this;
78 | this.hiddenInput = this.createHiddenInput();
79 | this.directUpload.create((error, attributes) => {
80 | if (error) {
81 | removeElement(this.hiddenInput);
82 | this.emitDropzoneError(error);
83 | } else {
84 | this.hiddenInput.value = attributes.signed_id;
85 | this.emitDropzoneSuccess();
86 | }
87 | });
88 | }
89 |
90 | createHiddenInput() {
91 | const input = document.createElement("input");
92 | input.type = "hidden";
93 | input.name = this.source.inputTarget.name;
94 | insertAfter(input, this.source.inputTarget);
95 | return input;
96 | }
97 |
98 | directUploadWillStoreFileWithXHR(xhr) {
99 | this.bindProgressEvent(xhr);
100 | this.emitDropzoneUploading();
101 | }
102 |
103 | bindProgressEvent(xhr) {
104 | this.xhr = xhr;
105 | this.xhr.upload.addEventListener("progress", event =>
106 | this.uploadRequestDidProgress(event)
107 | );
108 | }
109 |
110 | uploadRequestDidProgress(event) {
111 | const element = this.source.element;
112 | const progress = (event.loaded / event.total) * 100;
113 | findElement(
114 | this.file.previewTemplate,
115 | ".dz-upload"
116 | ).style.width = `${progress}%`;
117 | }
118 |
119 | emitDropzoneUploading() {
120 | this.file.status = Dropzone.UPLOADING;
121 | this.source.dropZone.emit("processing", this.file);
122 | }
123 |
124 | emitDropzoneError(error) {
125 | this.file.status = Dropzone.ERROR;
126 | this.source.dropZone.emit("error", this.file, error);
127 | this.source.dropZone.emit("complete", this.file);
128 | }
129 |
130 | emitDropzoneSuccess() {
131 | this.file.status = Dropzone.SUCCESS;
132 | this.source.dropZone.emit("success", this.file);
133 | this.source.dropZone.emit("complete", this.file);
134 | }
135 | }
136 |
137 | function createDirectUploadController(source, file) {
138 | return new DirectUploadController(source, file);
139 | }
140 |
141 | function createDirectUpload(file, url, controller) {
142 | return new DirectUpload(file, url, controller);
143 | }
144 |
145 | function createDropZone(controller) {
146 | return new Dropzone(controller.element, {
147 | url: controller.url,
148 | headers: controller.headers,
149 | maxFiles: controller.maxFiles,
150 | maxFilesize: controller.maxFileSize,
151 | acceptedFiles: controller.acceptedFiles,
152 | addRemoveLinks: controller.addRemoveLinks,
153 | autoQueue: false
154 | });
155 | }
156 |
--------------------------------------------------------------------------------
/app/javascript/controllers/index.js:
--------------------------------------------------------------------------------
1 | // Load all the controllers within this directory and all subdirectories.
2 | // Controller files must be named *_controller.js.
3 |
4 | import { Application } from "stimulus";
5 | import { definitionsFromContext } from "stimulus/webpack-helpers";
6 |
7 | const application = Application.start();
8 | const context = require.context("controllers", true, /_controller\.js$/);
9 | application.load(definitionsFromContext(context));
10 |
--------------------------------------------------------------------------------
/app/javascript/helpers/index.js:
--------------------------------------------------------------------------------
1 | export function getMetaValue(name) {
2 | const element = findElement(document.head, `meta[name="${name}"]`);
3 | if (element) {
4 | return element.getAttribute("content");
5 | }
6 | }
7 |
8 | export function findElement(root, selector) {
9 | if (typeof root == "string") {
10 | selector = root;
11 | root = document;
12 | }
13 | return root.querySelector(selector);
14 | }
15 |
16 | export function toArray(value) {
17 | if (Array.isArray(value)) {
18 | return value;
19 | } else if (Array.from) {
20 | return Array.from(value);
21 | } else {
22 | return [].slice.call(value);
23 | }
24 | }
25 |
26 | export function removeElement(el) {
27 | if (el && el.parentNode) {
28 | el.parentNode.removeChild(el);
29 | }
30 | }
31 |
32 | export function insertAfter(el, referenceNode) {
33 | return referenceNode.parentNode.insertBefore(el, referenceNode.nextSibling);
34 | }
35 |
--------------------------------------------------------------------------------
/app/javascript/packs/application.js:
--------------------------------------------------------------------------------
1 | // This file is automatically compiled by Webpack, along with any other files
2 | // present in this directory. You're encouraged to place your actual application logic in
3 | // a relevant structure within app/javascript and only use these pack files to reference
4 | // that code so it'll be compiled.
5 |
6 | require("@rails/ujs").start()
7 | require("turbolinks").start()
8 | require("@rails/activestorage").start()
9 | require("channels")
10 |
11 |
12 | // Uncomment to copy all static images under ../images to the output folder and reference
13 | // them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
14 | // or the `imagePath` JavaScript helper below.
15 | //
16 | // const images = require.context('../images', true)
17 | // const imagePath = (name) => images(name, true)
18 |
19 | import "controllers"
20 | import "stylesheets/application"
--------------------------------------------------------------------------------
/app/javascript/stylesheets/application.scss:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 |
4 | // Custom SCSS
5 | @import "components/buttons";
6 | @import "components/forms";
7 |
8 | @tailwind utilities;
9 |
--------------------------------------------------------------------------------
/app/javascript/stylesheets/components/_buttons.scss:
--------------------------------------------------------------------------------
1 | /* Buttons */
2 |
3 | .btn {
4 | @apply font-semibold text-sm py-2 px-4 rounded cursor-pointer no-underline;
5 | }
6 |
7 | .btn-default {
8 | @apply bg-white border border-gray-400 text-gray-700;
9 |
10 | &:hover, &:focus {
11 | @apply border-gray-500;
12 | }
13 | }
14 |
15 | .link {
16 | @apply no-underline text-gray-700;
17 |
18 | &:hover, &:focus {
19 | @apply text-gray-700;
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/app/javascript/stylesheets/components/_forms.scss:
--------------------------------------------------------------------------------
1 | @import "dropzone/dist/min/dropzone.min.css";
2 | @import "dropzone/dist/min/basic.min.css";
3 |
4 | .input {
5 | @apply appearance-none block w-full bg-gray-100 text-gray-700 border border-gray-300 rounded py-3 px-4 leading-tight;
6 | }
7 |
8 | .input:focus {
9 | @apply outline-none bg-white border-gray-400;
10 | }
11 |
12 | .label {
13 | @apply block text-gray-700 text-sm font-bold mb-2;
14 | }
15 |
16 | .select {
17 | @apply appearance-none py-3 px-4 pr-8 block w-full bg-gray-100 border border-gray-300 text-gray-700
18 | rounded leading-tight;
19 | -webkit-appearance: none;
20 | }
21 |
22 | .select:focus {
23 | @apply outline-none bg-white border-gray-400;
24 | }
25 |
26 | .dropzone {
27 | @apply border-2 rounded-lg border-gray-400 border-dashed;
28 |
29 | &.dz-drag-hover {
30 | @apply border-2 rounded-lg border-gray-200 border-dashed;
31 |
32 | .dz-message {
33 | opacity: 0.9;
34 | }
35 | }
36 | }
37 |
--------------------------------------------------------------------------------
/app/javascript/stylesheets/tailwind.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | prefix: '',
3 | important: false,
4 | separator: ':',
5 | theme: {
6 | colors: {
7 | transparent: 'transparent',
8 |
9 | black: '#000',
10 | white: '#fff',
11 |
12 | gray: {
13 | 100: '#f7fafc',
14 | 200: '#edf2f7',
15 | 300: '#e2e8f0',
16 | 400: '#cbd5e0',
17 | 500: '#a0aec0',
18 | 600: '#718096',
19 | 700: '#4a5568',
20 | 800: '#2d3748',
21 | 900: '#1a202c',
22 | },
23 | red: {
24 | 100: '#fff5f5',
25 | 200: '#fed7d7',
26 | 300: '#feb2b2',
27 | 400: '#fc8181',
28 | 500: '#f56565',
29 | 600: '#e53e3e',
30 | 700: '#c53030',
31 | 800: '#9b2c2c',
32 | 900: '#742a2a',
33 | },
34 | orange: {
35 | 100: '#fffaf0',
36 | 200: '#feebc8',
37 | 300: '#fbd38d',
38 | 400: '#f6ad55',
39 | 500: '#ed8936',
40 | 600: '#dd6b20',
41 | 700: '#c05621',
42 | 800: '#9c4221',
43 | 900: '#7b341e',
44 | },
45 | yellow: {
46 | 100: '#fffff0',
47 | 200: '#fefcbf',
48 | 300: '#faf089',
49 | 400: '#f6e05e',
50 | 500: '#ecc94b',
51 | 600: '#d69e2e',
52 | 700: '#b7791f',
53 | 800: '#975a16',
54 | 900: '#744210',
55 | },
56 | green: {
57 | 100: '#f0fff4',
58 | 200: '#c6f6d5',
59 | 300: '#9ae6b4',
60 | 400: '#68d391',
61 | 500: '#48bb78',
62 | 600: '#38a169',
63 | 700: '#2f855a',
64 | 800: '#276749',
65 | 900: '#22543d',
66 | },
67 | teal: {
68 | 100: '#e6fffa',
69 | 200: '#b2f5ea',
70 | 300: '#81e6d9',
71 | 400: '#4fd1c5',
72 | 500: '#38b2ac',
73 | 600: '#319795',
74 | 700: '#2c7a7b',
75 | 800: '#285e61',
76 | 900: '#234e52',
77 | },
78 | blue: {
79 | 100: '#ebf8ff',
80 | 200: '#bee3f8',
81 | 300: '#90cdf4',
82 | 400: '#63b3ed',
83 | 500: '#4299e1',
84 | 600: '#3182ce',
85 | 700: '#2b6cb0',
86 | 800: '#2c5282',
87 | 900: '#2a4365',
88 | },
89 | indigo: {
90 | 100: '#ebf4ff',
91 | 200: '#c3dafe',
92 | 300: '#a3bffa',
93 | 400: '#7f9cf5',
94 | 500: '#667eea',
95 | 600: '#5a67d8',
96 | 700: '#4c51bf',
97 | 800: '#434190',
98 | 900: '#3c366b',
99 | },
100 | purple: {
101 | 100: '#faf5ff',
102 | 200: '#e9d8fd',
103 | 300: '#d6bcfa',
104 | 400: '#b794f4',
105 | 500: '#9f7aea',
106 | 600: '#805ad5',
107 | 700: '#6b46c1',
108 | 800: '#553c9a',
109 | 900: '#44337a',
110 | },
111 | pink: {
112 | 100: '#fff5f7',
113 | 200: '#fed7e2',
114 | 300: '#fbb6ce',
115 | 400: '#f687b3',
116 | 500: '#ed64a6',
117 | 600: '#d53f8c',
118 | 700: '#b83280',
119 | 800: '#97266d',
120 | 900: '#702459',
121 | },
122 | },
123 | spacing: {
124 | px: '1px',
125 | '0': '0',
126 | '1': '0.25rem',
127 | '2': '0.5rem',
128 | '3': '0.75rem',
129 | '4': '1rem',
130 | '5': '1.25rem',
131 | '6': '1.5rem',
132 | '8': '2rem',
133 | '10': '2.5rem',
134 | '12': '3rem',
135 | '16': '4rem',
136 | '20': '5rem',
137 | '24': '6rem',
138 | '32': '8rem',
139 | '40': '10rem',
140 | '48': '12rem',
141 | '56': '14rem',
142 | '64': '16rem',
143 | },
144 | screens: {
145 | sm: '640px',
146 | md: '768px',
147 | lg: '1024px',
148 | xl: '1280px',
149 | },
150 | fontFamily: {
151 | sans: [
152 | '-apple-system',
153 | 'BlinkMacSystemFont',
154 | '"Segoe UI"',
155 | 'Roboto',
156 | '"Helvetica Neue"',
157 | 'Arial',
158 | '"Noto Sans"',
159 | 'sans-serif',
160 | '"Apple Color Emoji"',
161 | '"Segoe UI Emoji"',
162 | '"Segoe UI Symbol"',
163 | '"Noto Color Emoji"',
164 | ],
165 | serif: [
166 | 'Georgia',
167 | 'Cambria',
168 | '"Times New Roman"',
169 | 'Times',
170 | 'serif',
171 | ],
172 | mono: [
173 | 'Menlo',
174 | 'Monaco',
175 | 'Consolas',
176 | '"Liberation Mono"',
177 | '"Courier New"',
178 | 'monospace',
179 | ],
180 | },
181 | fontSize: {
182 | xs: '0.75rem',
183 | sm: '0.875rem',
184 | base: '1rem',
185 | lg: '1.125rem',
186 | xl: '1.25rem',
187 | '2xl': '1.5rem',
188 | '3xl': '1.875rem',
189 | '4xl': '2.25rem',
190 | '5xl': '3rem',
191 | '6xl': '4rem',
192 | },
193 | fontWeight: {
194 | hairline: '100',
195 | thin: '200',
196 | light: '300',
197 | normal: '400',
198 | medium: '500',
199 | semibold: '600',
200 | bold: '700',
201 | extrabold: '800',
202 | black: '900',
203 | },
204 | lineHeight: {
205 | none: '1',
206 | tight: '1.25',
207 | snug: '1.375',
208 | normal: '1.5',
209 | relaxed: '1.625',
210 | loose: '2',
211 | },
212 | letterSpacing: {
213 | tighter: '-0.05em',
214 | tight: '-0.025em',
215 | normal: '0',
216 | wide: '0.025em',
217 | wider: '0.05em',
218 | widest: '0.1em',
219 | },
220 | textColor: theme => theme('colors'),
221 | backgroundColor: theme => theme('colors'),
222 | backgroundPosition: {
223 | bottom: 'bottom',
224 | center: 'center',
225 | left: 'left',
226 | 'left-bottom': 'left bottom',
227 | 'left-top': 'left top',
228 | right: 'right',
229 | 'right-bottom': 'right bottom',
230 | 'right-top': 'right top',
231 | top: 'top',
232 | },
233 | backgroundSize: {
234 | auto: 'auto',
235 | cover: 'cover',
236 | contain: 'contain',
237 | },
238 | borderWidth: {
239 | default: '1px',
240 | '0': '0',
241 | '2': '2px',
242 | '4': '4px',
243 | '8': '8px',
244 | },
245 | borderColor: theme => ({
246 | ...theme('colors'),
247 | default: theme('colors.gray.300', 'currentColor'),
248 | }),
249 | borderRadius: {
250 | none: '0',
251 | sm: '0.125rem',
252 | default: '0.25rem',
253 | lg: '0.5rem',
254 | full: '9999px',
255 | },
256 | cursor: {
257 | auto: 'auto',
258 | default: 'default',
259 | pointer: 'pointer',
260 | wait: 'wait',
261 | text: 'text',
262 | move: 'move',
263 | 'not-allowed': 'not-allowed',
264 | },
265 | width: theme => ({
266 | auto: 'auto',
267 | ...theme('spacing'),
268 | '1/2': '50%',
269 | '1/3': '33.33333%',
270 | '2/3': '66.66667%',
271 | '1/4': '25%',
272 | '2/4': '50%',
273 | '3/4': '75%',
274 | '1/5': '20%',
275 | '2/5': '40%',
276 | '3/5': '60%',
277 | '4/5': '80%',
278 | '1/6': '16.66667%',
279 | '2/6': '33.33333%',
280 | '3/6': '50%',
281 | '4/6': '66.66667%',
282 | '5/6': '83.33333%',
283 | '1/12': '8.33333%',
284 | '2/12': '16.66667%',
285 | '3/12': '25%',
286 | '4/12': '33.33333%',
287 | '5/12': '41.66667%',
288 | '6/12': '50%',
289 | '7/12': '58.33333%',
290 | '8/12': '66.66667%',
291 | '9/12': '75%',
292 | '10/12': '83.33333%',
293 | '11/12': '91.66667%',
294 | full: '100%',
295 | screen: '100vw',
296 | }),
297 | height: theme => ({
298 | auto: 'auto',
299 | ...theme('spacing'),
300 | full: '100%',
301 | screen: '100vh',
302 | }),
303 | minWidth: {
304 | '0': '0',
305 | full: '100%',
306 | },
307 | minHeight: {
308 | '0': '0',
309 | full: '100%',
310 | screen: '100vh',
311 | },
312 | maxWidth: {
313 | xs: '20rem',
314 | sm: '24rem',
315 | md: '28rem',
316 | lg: '32rem',
317 | xl: '36rem',
318 | '2xl': '42rem',
319 | '3xl': '48rem',
320 | '4xl': '56rem',
321 | '5xl': '64rem',
322 | '6xl': '72rem',
323 | full: '100%',
324 | },
325 | maxHeight: {
326 | full: '100%',
327 | screen: '100vh',
328 | },
329 | padding: theme => theme('spacing'),
330 | margin: (theme, { negative }) => ({
331 | auto: 'auto',
332 | ...theme('spacing'),
333 | ...negative(theme('spacing')),
334 | }),
335 | objectPosition: {
336 | bottom: 'bottom',
337 | center: 'center',
338 | left: 'left',
339 | 'left-bottom': 'left bottom',
340 | 'left-top': 'left top',
341 | right: 'right',
342 | 'right-bottom': 'right bottom',
343 | 'right-top': 'right top',
344 | top: 'top',
345 | },
346 | boxShadow: {
347 | default: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
348 | md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
349 | lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
350 | xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
351 | '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
352 | inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',
353 | outline: '0 0 0 3px rgba(66, 153, 225, 0.5)',
354 | none: 'none',
355 | },
356 | zIndex: {
357 | auto: 'auto',
358 | '0': '0',
359 | '10': '10',
360 | '20': '20',
361 | '30': '30',
362 | '40': '40',
363 | '50': '50',
364 | },
365 | opacity: {
366 | '0': '0',
367 | '25': '0.25',
368 | '50': '0.5',
369 | '75': '0.75',
370 | '100': '1',
371 | },
372 | fill: {
373 | current: 'currentColor',
374 | },
375 | stroke: {
376 | current: 'currentColor',
377 | },
378 | flex: {
379 | '1': '1 1 0%',
380 | auto: '1 1 auto',
381 | initial: '0 1 auto',
382 | none: 'none',
383 | },
384 | flexGrow: {
385 | '0': '0',
386 | default: '1',
387 | },
388 | flexShrink: {
389 | '0': '0',
390 | default: '1',
391 | },
392 | order: {
393 | first: '-1',
394 | last: '999',
395 | none: '0',
396 | '1': '1',
397 | '2': '2',
398 | '3': '3',
399 | '4': '4',
400 | '5': '5',
401 | '6': '6',
402 | '7': '7',
403 | '8': '8',
404 | '9': '9',
405 | '10': '10',
406 | '11': '11',
407 | '12': '12',
408 | },
409 | listStyleType: {
410 | none: 'none',
411 | disc: 'disc',
412 | decimal: 'decimal',
413 | },
414 | inset: {
415 | '0': '0',
416 | auto: 'auto',
417 | },
418 | container: {}
419 | },
420 | variants: {
421 | appearance: ['responsive'],
422 | backgroundAttachment: ['responsive'],
423 | backgroundColor: ['responsive', 'hover', 'focus'],
424 | backgroundPosition: ['responsive'],
425 | backgroundRepeat: ['responsive'],
426 | backgroundSize: ['responsive'],
427 | borderCollapse: [],
428 | borderColor: ['responsive', 'hover', 'focus'],
429 | borderRadius: ['responsive'],
430 | borderStyle: ['responsive'],
431 | borderWidth: ['responsive'],
432 | cursor: ['responsive'],
433 | display: ['responsive'],
434 | flexDirection: ['responsive'],
435 | flexWrap: ['responsive'],
436 | alignItems: ['responsive'],
437 | alignSelf: ['responsive'],
438 | justifyContent: ['responsive'],
439 | alignContent: ['responsive'],
440 | flex: ['responsive'],
441 | flexGrow: ['responsive'],
442 | flexShrink: ['responsive'],
443 | order: ['responsive'],
444 | float: ['responsive'],
445 | fontFamily: ['responsive'],
446 | fontWeight: ['responsive', 'hover', 'focus'],
447 | height: ['responsive'],
448 | lineHeight: ['responsive'],
449 | listStylePosition: ['responsive'],
450 | listStyleType: ['responsive'],
451 | margin: ['responsive'],
452 | maxHeight: ['responsive'],
453 | maxWidth: ['responsive'],
454 | minHeight: ['responsive'],
455 | minWidth: ['responsive'],
456 | objectFit: ['responsive'],
457 | objectPosition: ['responsive'],
458 | opacity: ['responsive'],
459 | outline: ['focus'],
460 | overflow: ['responsive'],
461 | padding: ['responsive'],
462 | pointerEvents: ['responsive'],
463 | position: ['responsive'],
464 | inset: ['responsive'],
465 | resize: ['responsive'],
466 | boxShadow: ['responsive', 'hover', 'focus'],
467 | fill: [],
468 | stroke: [],
469 | tableLayout: ['responsive'],
470 | textAlign: ['responsive'],
471 | textColor: ['responsive', 'hover', 'focus'],
472 | fontSize: ['responsive'],
473 | fontStyle: ['responsive'],
474 | textTransform: ['responsive'],
475 | textDecoration: ['responsive', 'hover', 'focus'],
476 | fontSmoothing: ['responsive'],
477 | letterSpacing: ['responsive'],
478 | userSelect: ['responsive'],
479 | verticalAlign: ['responsive'],
480 | visibility: ['responsive'],
481 | whitespace: ['responsive'],
482 | wordBreak: ['responsive'],
483 | width: ['responsive'],
484 | zIndex: ['responsive'],
485 | },
486 | corePlugins: {},
487 | plugins: [],
488 | }
489 |
--------------------------------------------------------------------------------
/app/jobs/application_job.rb:
--------------------------------------------------------------------------------
1 | class ApplicationJob < ActiveJob::Base
2 | # Automatically retry jobs that encountered a deadlock
3 | # retry_on ActiveRecord::Deadlocked
4 |
5 | # Most jobs are safe to ignore if the underlying records are no longer available
6 | # discard_on ActiveJob::DeserializationError
7 | end
8 |
--------------------------------------------------------------------------------
/app/mailers/application_mailer.rb:
--------------------------------------------------------------------------------
1 | class ApplicationMailer < ActionMailer::Base
2 | default from: 'from@example.com'
3 | layout 'mailer'
4 | end
5 |
--------------------------------------------------------------------------------
/app/models/application_record.rb:
--------------------------------------------------------------------------------
1 | class ApplicationRecord < ActiveRecord::Base
2 | self.abstract_class = true
3 | end
4 |
--------------------------------------------------------------------------------
/app/models/concerns/.keep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/justalever/drag_and_drop_active_storage/ea887548526e80b3560efdd66a6beb9754570b7b/app/models/concerns/.keep
--------------------------------------------------------------------------------
/app/models/post.rb:
--------------------------------------------------------------------------------
1 | class Post < ApplicationRecord
2 | belongs_to :user
3 | has_one_attached :feature_image
4 | end
5 |
--------------------------------------------------------------------------------
/app/models/user.rb:
--------------------------------------------------------------------------------
1 | class User < ApplicationRecord
2 | # Include default devise modules. Others available are:
3 | # :confirmable, :lockable, :timeoutable, :trackable and :omniauthable
4 | devise :database_authenticatable, :registerable,
5 | :recoverable, :rememberable, :validatable
6 | end
7 |
--------------------------------------------------------------------------------
/app/views/devise/confirmations/new.html.erb:
--------------------------------------------------------------------------------
1 | <% content_for :devise_form do %>
2 |
3 | Resend confirmation instructions
4 |
5 | <%= form_for(resource, as: resource_name, url: confirmation_path(resource_name), html: { method: :post }) do |f| %>
6 | <%= render "devise/shared/error_messages", resource: resource %>
7 |
8 |
9 | <%= f.label :email, class: "label" %>
10 | <%= f.email_field :email, autofocus: true, autocomplete: "email", value: (resource.pending_reconfirmation? ? resource.unconfirmed_email : resource.email), class: "input" %>
11 |
12 |
13 |
14 | <%= f.submit "Resend confirmation instructions", class: "btn btn-default" %>
15 |
16 | <% end %>
17 |
18 |
19 |
20 | <%= render "devise/shared/links" %>
21 |
22 | <% end %>
23 |
24 | <%= render "devise/shared/form_wrap" %>
25 |
--------------------------------------------------------------------------------
/app/views/devise/mailer/confirmation_instructions.html.erb:
--------------------------------------------------------------------------------
1 | Welcome <%= @email %>!
2 |
3 | You can confirm your account email through the link below:
4 |
5 | <%= link_to 'Confirm my account', confirmation_url(@resource, confirmation_token: @token) %>
6 |
--------------------------------------------------------------------------------
/app/views/devise/mailer/email_changed.html.erb:
--------------------------------------------------------------------------------
1 | Hello <%= @email %>!
2 |
3 | <% if @resource.try(:unconfirmed_email?) %>
4 | We're contacting you to notify you that your email is being changed to <%= @resource.unconfirmed_email %>.
5 | <% else %>
6 | We're contacting you to notify you that your email has been changed to <%= @resource.email %>.
7 | <% end %>
8 |
--------------------------------------------------------------------------------
/app/views/devise/mailer/password_change.html.erb:
--------------------------------------------------------------------------------
1 | Hello <%= @resource.email %>!
2 |
3 | We're contacting you to notify you that your password has been changed.
4 |
--------------------------------------------------------------------------------
/app/views/devise/mailer/reset_password_instructions.html.erb:
--------------------------------------------------------------------------------
1 | Hello <%= @resource.email %>!
2 |
3 | Someone has requested a link to change your password. You can do this through the link below.
4 |
5 | <%= link_to 'Change my password', edit_password_url(@resource, reset_password_token: @token) %>
6 |
7 | If you didn't request this, please ignore this email.
8 | Your password won't change until you access the link above and create a new one.
9 |
--------------------------------------------------------------------------------
/app/views/devise/mailer/unlock_instructions.html.erb:
--------------------------------------------------------------------------------
1 | Hello <%= @resource.email %>!
2 |
3 | Your account has been locked due to an excessive number of unsuccessful sign in attempts.
4 |
5 | Click the link below to unlock your account:
6 |
7 | <%= link_to 'Unlock my account', unlock_url(@resource, unlock_token: @token) %>
8 |
--------------------------------------------------------------------------------
/app/views/devise/passwords/edit.html.erb:
--------------------------------------------------------------------------------
1 | <% content_for :devise_form do %>
2 | Change your password
3 |
4 | <%= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :put }) do |f| %>
5 | <%= render "devise/shared/error_messages", resource: resource %>
6 | <%= f.hidden_field :reset_password_token %>
7 |
8 |
9 |
10 | <%= f.label :password, "New password", class:"label" %>
11 | <% if @minimum_password_length %>
12 | (<%= @minimum_password_length %> characters minimum)
13 | <% end %>
14 |
15 | <%= f.password_field :password, autofocus: true, autocomplete: "new-password", class: "input" %>
16 |
19 | <%= f.label :password_confirmation, "Confirm new password", class: "label" %>
20 | <%= f.password_field :password_confirmation, autocomplete: "off", class: "input" %>
21 |
22 |
23 |
24 | <%= f.submit "Change my password", class: "btn btn-default" %>
25 |
26 | <% end %>
27 |
28 |
29 |
30 | <%= render "devise/shared/links" %>
31 |
32 | <% end %>
33 |
34 | <%= render "devise/share/form_wrap" %>
35 |
--------------------------------------------------------------------------------
/app/views/devise/passwords/new.html.erb:
--------------------------------------------------------------------------------
1 | <% content_for :devise_form do %>
2 |
3 | Forgot your password?
4 |
5 | <%= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :post }) do |f| %>
6 | <%= render "devise/shared/error_messages", resource: resource %>
7 |
8 |
9 | <%= f.label :email, class: "label" %>
10 | <%= f.email_field :email, autofocus: true, autocomplete: "email", class: "input" %>
11 |
12 |
13 |
14 | <%= f.submit "Send me reset password instructions", class: "btn btn-default" %>
15 |
16 | <% end %>
17 |
18 |
19 |
20 | <%= render "devise/shared/links" %>
21 | <% end %>
22 |
23 | <%= render "devise/shared/form_wrap" %>
24 |
--------------------------------------------------------------------------------
/app/views/devise/registrations/edit.html.erb:
--------------------------------------------------------------------------------
1 | <% content_for :devise_form do %>
2 | Edit <%= resource_name.to_s.humanize %>
3 |
4 | <%= form_for(resource, as: resource_name, url: registration_path(resource_name), html: { method: :put }) do |f| %>
5 |
6 | <%= render "devise/shared/error_messages", resource: resource %>
7 |
8 |
9 | <%= f.label :username, class:"label" %>
10 | <%= f.text_field :username, autofocus: true, class:"input" %>
11 |
12 |
13 |
14 | <%= f.label :name, class:"label" %>
15 | <%= f.text_field :name, class:"input" %>
16 |
17 |
18 |
19 | <%= f.label :email, class:"label" %>
20 | <%= f.email_field :email, autocomplete: "email", class:"input" %>
21 |
22 |
23 |
24 | <% if devise_mapping.confirmable? && resource.pending_reconfirmation? %>
25 |
Currently waiting confirmation for: <%= resource.unconfirmed_email %>
26 | <% end %>
27 |
30 | <%= f.label :password, class:"label" %>
31 | <%= f.password_field :password, autocomplete: "new-password", class:"input" %>
32 |
<% if @minimum_password_length %>
33 | <%= @minimum_password_length %> characters minimum <% end %> (leave blank if you don't want to change it)
34 |
35 |
38 | <%= f.label :password_confirmation, class: "label" %>
39 | <%= f.password_field :password_confirmation, autocomplete: "new-password", class: "input" %>
40 |
41 |
42 |
43 | <%= f.label :current_password, class: "label" %>
44 | <%= f.password_field :current_password, autocomplete: "current-password", class: "input" %>
45 |
(we need your current password to confirm your changes)
46 |
49 | <%= f.submit "Update", class: "btn btn-default" %>
50 |
51 | <% end %>
52 |
53 |
54 |
55 | Cancel my account
56 |
57 |
58 |
59 |
60 | <%= button_to "Cancel my account", registration_path(resource_name), data: { confirm: "Are you sure?" }, method: :delete, class: "btn btn-default" %>
61 |
Sign up
4 |
5 | <%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
6 | <%= render "devise/shared/error_messages", resource: resource %>
7 |
8 |
9 | <%= f.label :username, class:"label" %>
10 | <%= f.text_field :username, autofocus: true, class:"input" %>
11 |
12 |
13 |
14 | <%= f.label :name, class:"label" %>
15 | <%= f.text_field :name, class:"input" %>
16 |
17 |
18 |
19 | <%= f.label :email, class:"label" %>
20 | <%= f.email_field :email, autocomplete: "email", class:"input" %>
21 |
22 |
23 |
24 |
25 | <%= f.label :password, class: "label" %>
26 | <% if @minimum_password_length %>
27 | (<%= @minimum_password_length %> characters minimum)
28 | <% end %>
29 |
30 | <%= f.password_field :password, autocomplete: "new-password", class: "input" %>
31 |
34 | <%= f.label :password_confirmation, class:"label" %>
35 | <%= f.password_field :password_confirmation, autocomplete: "new-password", class: "input" %>
36 |
37 |
38 |
39 | <%= f.submit "Sign up", class: "btn btn-default" %>
40 |
41 |
42 |
43 |
44 | <% end %>
45 |
46 | <%= render "devise/shared/links" %>
47 |
48 | <% end %>
49 |
50 | <%= render "devise/shared/form_wrap" %>
51 |
--------------------------------------------------------------------------------
/app/views/devise/sessions/new.html.erb:
--------------------------------------------------------------------------------
1 | <% content_for :devise_form do %>
2 | Log in
3 | <%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
4 |
5 |
6 | <%= f.label :email, class:"label" %>
7 | <%= f.email_field :email, autofocus: true, autocomplete: "email", class: "input" %>
8 |
9 |
10 |
11 | <%= f.label :password, class:"label" %>
12 | <%= f.password_field :password, autocomplete: "current-password", class: "input" %>
13 |
14 |
15 |
16 | <% if devise_mapping.rememberable? -%>
17 | <%= f.check_box :remember_me, class:"mr-2 leading-tight" %>
18 | <%= f.label :remember_me, class:"block text-grey-darker" %>
19 | <% end -%>
20 |
21 |
22 |
23 | <%= f.submit "Log in", class: "btn btn-default" %>
24 |
25 |
26 | <% end %>
27 |
28 |
29 |
30 | <%= render "devise/shared/links" %>
31 | <% end %>
32 |
33 | <%= render "devise/shared/form_wrap" %>
34 |
--------------------------------------------------------------------------------
/app/views/devise/shared/_error_messages.html.erb:
--------------------------------------------------------------------------------
1 | <% if resource.errors.any? %>
2 |
3 |
4 | <%= I18n.t("errors.messages.not_saved",
5 | count: resource.errors.count,
6 | resource: resource.class.model_name.human.downcase)
7 | %>
8 |
9 |
10 | <% resource.errors.full_messages.each do |message| %>
11 | - <%= message %>
12 | <% end %>
13 |
14 |
2 |
3 | <%= yield :devise_form %>
4 |
5 |
<%= link_to "Log in", new_session_path(resource_name), class: "link link-grey block py-2" %>
3 | <% end -%>
4 |
5 | <%- if devise_mapping.registerable? && controller_name != 'registrations' %>
6 | <%= link_to "Sign up", new_registration_path(resource_name), class: "link link-grey block py-2" %>
7 | <% end -%>
8 |
9 | <%- if devise_mapping.recoverable? && controller_name != 'passwords' && controller_name != 'registrations' %>
10 | <%= link_to "Forgot your password?", new_password_path(resource_name), class: "link link-grey block py-2" %>
11 | <% end -%>
12 |
13 | <%- if devise_mapping.confirmable? && controller_name != 'confirmations' %>
14 | <%= link_to "Didn't receive confirmation instructions?", new_confirmation_path(resource_name), class: "link link-grey block py-2" %>
15 | <% end -%>
16 |
17 | <%- if devise_mapping.lockable? && resource_class.unlock_strategy_enabled?(:email) && controller_name != 'unlocks' %>
18 | <%= link_to "Didn't receive unlock instructions?", new_unlock_path(resource_name), class: "link link-grey block py-2" %>
19 | <% end -%>
20 |
21 | <%- if devise_mapping.omniauthable? %>
22 | <%- resource_class.omniauth_providers.each do |provider| %>
23 | <%= link_to "Sign in with #{OmniAuth::Utils.camelize(provider)}", omniauth_authorize_path(resource_name, provider), class: "link link-grey block py-2" %>
24 | <% end -%>
25 | <% end -%>
26 |
--------------------------------------------------------------------------------
/app/views/devise/unlocks/new.html.erb:
--------------------------------------------------------------------------------
1 | <% content_for :devise_form do %>
2 | Resend unlock instructions
3 |
4 | <%= form_for(resource, as: resource_name, url: unlock_path(resource_name), html: { method: :post }) do |f| %>
5 | <%= render "devise/shared/error_messages", resource: resource %>
6 |
7 |
8 | <%= f.label :email, class: "label" %>
9 | <%= f.email_field :email, autofocus: true, autocomplete: "email", class: "input" %>
10 |
11 |
12 |
13 | <%= f.submit "Resend unlock instructions", class: "btn btn-default" %>
14 |
15 | <% end %>
16 |
17 |
18 |
19 | <%= render "devise/shared/links" %>
20 | <% end %>
21 |
22 | <%= render "devise/shared/form_wrap" %>
23 |
24 |
--------------------------------------------------------------------------------
/app/views/home/index.html.erb:
--------------------------------------------------------------------------------
1 | Welcome to Kickoff!
2 | Use this starting point as a way to quickly set up a new project by generating files, installing gems, and more.
3 |
--------------------------------------------------------------------------------
/app/views/layouts/application.html.erb:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Kickoff
5 | <%= csrf_meta_tags %>
6 | <%= csp_meta_tag %>
7 |
8 |
9 |
10 | <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
11 | <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
12 | <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
13 |
14 |
15 |
16 |
17 |
18 | <% flash.each do |type, message| %>
19 | <% if type == "alert" %>
20 |
23 | <% end %>
24 | <% if type == "notice" %>
25 |
28 | <% end %>
29 | <% end %>
30 |
31 |
56 |
57 |
58 | <%= content_for?(:content) ? yield(:content) : yield %>
59 |
60 |
61 |
62 |
--------------------------------------------------------------------------------
/app/views/layouts/mailer.html.erb:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
8 |
9 |
10 |
11 | <%= yield %>
12 |
13 |
14 |
--------------------------------------------------------------------------------
/app/views/layouts/mailer.text.erb:
--------------------------------------------------------------------------------
1 | <%= yield %>
2 |
--------------------------------------------------------------------------------
/app/views/posts/_form.html.erb:
--------------------------------------------------------------------------------
1 | <%= form_with(model: post, local: true, multipart: true) do |form| %>
2 | <% if post.errors.any? %>
3 |
4 |
<%= pluralize(post.errors.count, "error") %> prohibited this post from being saved:
5 |
6 |
7 | <% post.errors.full_messages.each do |message| %>
8 | - <%= message %>
9 | <% end %>
10 |
11 |
15 | <%= form.label :title, class: "label" %>
16 | <%= form.text_field :title, class: "input" %>
17 |
18 |
19 |
20 | <%= form.label :body, class: "label" %>
21 | <%= form.text_area :body, class: "input" %>
22 |
23 |
24 |
25 | <%= form.label :feature_image, class: "label" %>
26 |
27 | <%= form.file_field :feature_image, direct_upload: true, data: { target: 'dropzone.input' } %>
28 |
29 |
Drag here to upload or click here to browse
30 | 2 MB file size maximum. Allowed file types png, jpg.
31 |
32 |
33 |
36 | <%= form.submit class: "btn-default btn" %>
37 |
38 | <% end %>
39 |
--------------------------------------------------------------------------------
/app/views/posts/_post.json.jbuilder:
--------------------------------------------------------------------------------
1 | json.extract! post, :id, :title, :body, :user_id, :created_at, :updated_at
2 | json.url post_url(post, format: :json)
3 |
--------------------------------------------------------------------------------
/app/views/posts/edit.html.erb:
--------------------------------------------------------------------------------
1 |
2 |
Edit Post
3 |
4 | <%= render 'form', post: @post %>
5 |
6 |
--------------------------------------------------------------------------------
/app/views/posts/index.html.erb:
--------------------------------------------------------------------------------
1 |
2 |
3 |
Posts
4 | <%= link_to "New Post", new_post_path, class: "btn btn-default" if user_signed_in? %>
5 |
6 |
7 |
8 | <% @posts.each do |post| %>
9 |
10 | <%= link_to post do %>
11 | <%= image_tag post.feature_image if post.feature_image.present? %>
12 | <% end %>
13 |
14 |
15 |
<%= link_to post.title, post %>
16 |
17 |
18 | <%= post.body %>
19 |
20 |
21 | <% if user_signed_in? && current_user.id == post.user_id %>
22 |
23 | <%= link_to 'Edit', edit_post_path(post), class: "btn btn-default" %>
24 | <%= link_to 'Delete', post, method: :delete, data: { confirm: 'Are you sure?' }, class: "btn btn-default" %>
25 |
26 | <% end %>
27 |
29 | <% end %>
30 |
31 |
2 |
New Post
3 |
4 | <%= render 'form', post: @post %>
5 |
6 |
--------------------------------------------------------------------------------
/app/views/posts/show.html.erb:
--------------------------------------------------------------------------------
1 |
2 | <%= link_to @post do %>
3 | <%= image_tag @post.feature_image if @post.feature_image.present? %>
4 | <% end %>
5 |
6 |
7 |
<%= @post.title %>
8 |
9 |
10 | <%= @post.body %>
11 |
12 |
13 | <% if user_signed_in? && current_user.id == @post.user_id %>
14 |
15 | <%= link_to 'Edit', edit_post_path(@post), class: "btn btn-default" %>
16 | <%= link_to 'Delete', @post, method: :delete, data: { confirm: 'Are you sure?' }, class: "btn btn-default" %>
17 |
18 | <% end %>
19 |
20 |
60 |
61 |
The page you were looking for doesn't exist.
62 |
You may have mistyped the address or the page may have moved.
63 |
64 |
If you are the application owner check the logs for more information.
65 |
60 |
61 |
The change you wanted was rejected.
62 |
Maybe you tried to change something you didn't have access to.
63 |
64 |
If you are the application owner check the logs for more information.
65 |
60 |
61 |
We're sorry, but something went wrong.
62 |
63 |
If you are the application owner check the logs for more information.
64 |