Disable Sprockets

.gitignore

@@ -16,6 +16,7 @@
 # Ignore Byebug command history file.
 .byebug_history
 .env
+/public/assets
 /public/packs
 /public/packs-test
 /node_modules

Gemfile

@@ -6,10 +6,6 @@ ruby '>= 2.3.0', '< 2.6.0'
 gem 'rails', '~> 5.2.0'
 gem 'pg', '~> 0.20'
 gem 'puma', '~> 3.10'
-gem 'sass-rails', '~> 5.0'
-gem 'font-awesome-rails'
-gem 'jquery-rails'
-gem 'uglifier'
 
 gem 'bootsnap'
 gem 'mastodon-api', require: 'mastodon', git: 'https://github.com/tootsuite/mastodon-api'

Gemfile.lock

@@ -118,8 +118,6 @@ GEM
       multipart-post (>= 1.2, < 3)
     fast_blank (1.0.0)
     ffi (1.9.25)
-    font-awesome-rails (4.7.0.4)
-      railties (>= 3.2, < 6.0)
     globalid (0.4.1)
       activesupport (>= 4.2.0)
     hamlit (2.8.8)
@@ -148,10 +146,6 @@ GEM
       rack
     i18n (1.0.1)
       concurrent-ruby (~> 1.0)
-    jquery-rails (4.3.3)
-      rails-dom-testing (>= 1, < 3)
-      railties (>= 4.2.0)
-      thor (>= 0.14, < 2.0)
     jsonapi-renderer (0.2.0)
     jwt (1.5.6)
     libv8 (6.3.292.48.1)
@@ -290,17 +284,6 @@ GEM
     responders (2.4.0)
       actionpack (>= 4.2.0, < 5.3)
       railties (>= 4.2.0, < 5.3)
-    sass (3.5.6)
-      sass-listen (~> 4.0.0)
-    sass-listen (4.0.0)
-      rb-fsevent (~> 0.9, >= 0.9.4)
-      rb-inotify (~> 0.9, >= 0.9.7)
-    sass-rails (5.0.7)
-      railties (>= 4.0.0, < 6)
-      sass (~> 3.1)
-      sprockets (>= 2.8, < 4.0)
-      sprockets-rails (>= 2.0, < 4.0)
-      tilt (>= 1.1, < 3)
     sidekiq (5.1.3)
       concurrent-ruby (~> 1.0)
       connection_pool (~> 2.2, >= 2.2.0)
@@ -328,8 +311,6 @@ GEM
     tilt (2.0.8)
     tzinfo (1.2.5)
       thread_safe (~> 0.1)
-    uglifier (4.1.11)
-      execjs (>= 0.3.0, < 3)
     unf (0.1.4)
       unf_ext
     unf_ext (0.0.7.5)
@@ -355,13 +336,11 @@ DEPENDENCIES
   devise-i18n (~> 1.6)
   dotenv-rails (~> 2.2)
   fast_blank (~> 1.0)
-  font-awesome-rails
   hamlit-rails
   hiredis (~> 0.6)
   http
   http_accept_language (~> 2.1)
   httplog (~> 0.99)
-  jquery-rails
   listen (~> 3.0.5)
   lograge
   mastodon-api!
@@ -377,13 +356,11 @@ DEPENDENCIES
   react_on_rails (= 11.0.0)
   redis (~> 3.3)
   redis-rails
-  sass-rails (~> 5.0)
   sidekiq (~> 5.0)
   sidekiq-status
   spring
   spring-watcher-listen (~> 2.0.0)
   twitter!
-  uglifier
   webpacker (~> 3.5)
 
 RUBY VERSION

app/assets/config/manifest.js

-//= link_tree ../images
-//= link_directory ../stylesheets .css

app/assets/javascripts/accounts.js

-// Place all the behaviors and hooks related to the matching controller here.
-// All this logic will automatically be available in application.js.

app/assets/javascripts/application.js

-//= require jquery
-//= require jquery_ujs

app/assets/javascripts/authorizations.js

-// Place all the behaviors and hooks related to the matching controller here.
-// All this logic will automatically be available in application.js.

app/assets/javascripts/friends.js

-// Place all the behaviors and hooks related to the matching controller here.
-// All this logic will automatically be available in application.js.

app/assets/javascripts/home.js

-// Place all the behaviors and hooks related to the matching controller here.
-// All this logic will automatically be available in application.js.

app/assets/javascripts/users/omniauth_callbacks.js

-// Place all the behaviors and hooks related to the matching controller here.
-// All this logic will automatically be available in application.js.

app/assets/stylesheets/accounts.scss

-// Place all the styles related to the accounts controller here.
-// They will automatically be included in application.css.
-// You can use Sass (SCSS) here: http://sass-lang.com/

app/assets/stylesheets/application.css

-/*
- * This is a manifest file that'll be compiled into application.css, which will include all the files
- * listed below.
- *
- * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
- * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
- *
- * You're free to add application-wide styles to this file and they'll appear at the bottom of the
- * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
- * files in this directory. Styles in this file should be added after the last require_* statement.
- * It is generally better to create a new file per style scope.
- *
- *= require_tree .
- *= require font-awesome
- *= require_self
- */

app/assets/stylesheets/authorizations.scss

-// Place all the styles related to the authorizations controller here.
-// They will automatically be included in application.css.
-// You can use Sass (SCSS) here: http://sass-lang.com/

app/helpers/application_helper.rb

@@ -8,4 +8,10 @@ module ApplicationHelper
   def mastodon?
     user_signed_in? && !current_user.mastodon.nil?
   end
+
+  def fa_icon(name, **options)
+    classes  = (options.delete(:class) || '').split(/\s+/)
+    classes += ['fa', "fa-#{name}"]
+    content_tag(:i, nil, options.merge(class: classes.join(' ')))
+  end
 end

app/javascript/images/index.js

+import './logo_full.svg';
+import './logo.svg';
+import './preview.jpg';
+import './toot-friend.png';
+import './twitter-square.png';
\ No newline at end of file

app/javascript/packs/application.js

-/* eslint no-console:0 */
-// This file is automatically compiled by Webpack, along with any other files
-// present in this directory. You're encouraged to place your actual application logic in
-// a relevant structure within app/javascript and only use these pack files to reference
-// that code so it'll be compiled.
-//
-// To reference this file, add <%= javascript_pack_tag 'application' %> to the appropriate
-// layout file, like app/views/layouts/application.html.erb
+import '../styles/application.scss';
+import '../images';
+import Rails from 'rails-ujs';
+import ReactOnRails from 'react-on-rails';
+import HelloWorldApp from '../bundles/HelloWorld/startup/HelloWorldApp';
 
-console.log('Hello World from Webpacker')
+Rails.start();
+
+// This is how react_on_rails can see the HelloWorld in the browser.
+ReactOnRails.register({
+  HelloWorldApp,
+});

app/javascript/packs/hello-world-bundle.js

-import ReactOnRails from 'react-on-rails';
-
-import HelloWorldApp from '../bundles/HelloWorld/startup/HelloWorldApp';
-
-// This is how react_on_rails can see the HelloWorld in the browser.
-ReactOnRails.register({
-  HelloWorldApp,
-});

app/javascript/styles/application.scss

+@import 'variables';
+
+@import url('https://fonts.googleapis.com/css?family=Montserrat:500,600|Roboto:400,500');
+@import '~font-awesome/scss/font-awesome';
+
+@import 'reset';
+@import 'home';

app/assets/stylesheets/home.scss → app/javascript/styles/home.scss

-@import url('https://fonts.googleapis.com/css?family=Montserrat:500,600|Roboto:400,500');
-
-$white:    #fff    !default; // color5
-$lightest: #d9e1e8 !default; // color2
-$lighter:  #9baec8 !default; // color3
-$darkest:  #1F232B !default; // color1
-$black:    #000    !default; // color8
-$darker:   lighten($darkest, 30%);
-
-$vibrant:  #2b90d9 !default; // color4
-$error:    #df405a !default; // color6
-$success:  #79bd9a !default; // color7
-
-$transition-in: 100ms linear;
-$transition-out: 250ms linear;
-
-/* http://meyerweb.com/eric/tools/css/reset/
-   v2.0 | 20110126
-   License: none (public domain)
-*/
-
-html, body, div, span, applet, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
-del, dfn, em, img, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var,
-b, u, i, center,
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, embed,
-figure, figcaption, footer, header, hgroup,
-menu, nav, output, ruby, section, summary,
-time, mark, audio, video {
-  margin: 0;
-  padding: 0;
-  border: 0;
-  font-size: 100%;
-  font: inherit;
-  vertical-align: baseline;
-}
-/* HTML5 display-role reset for older browsers */
-article, aside, details, figcaption, figure,
-footer, header, hgroup, menu, nav, section {
-  display: block;
-}
-body {
-  line-height: 1;
-}
-ol, ul {
-  list-style: none;
-}
-blockquote, q {
-  quotes: none;
-}
-blockquote:before, blockquote:after,
-q:before, q:after {
-  content: '';
-  content: none;
-}
-table {
-  border-collapse: collapse;
-  border-spacing: 0;
-}
-
 body {
   background: #282c37;
   color: #9baec8;

app/javascript/styles/reset.scss

+/* http://meyerweb.com/eric/tools/css/reset/
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+  display: block;
+}
+body {
+  line-height: 1;
+}
+ol, ul {
+  list-style: none;
+}
+blockquote, q {
+  quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+  content: '';
+  content: none;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}

app/javascript/styles/variables.scss

+$white:    #fff    !default; // color5
+$lightest: #d9e1e8 !default; // color2
+$lighter:  #9baec8 !default; // color3
+$darkest:  #1F232B !default; // color1
+$black:    #000    !default; // color8
+$darker:   lighten($darkest, 30%);
+
+$vibrant:  #2b90d9 !default; // color4
+$error:    #df405a !default; // color6
+$success:  #79bd9a !default; // color7
+
+$transition-in: 100ms linear;
+$transition-out: 250ms linear;
+
+$fa-font-path: '~font-awesome/fonts';

app/views/accounts/show.html.haml

@@ -8,9 +8,9 @@
     %li
       .connection-brand{ class: authorization.provider }
         - if authorization.provider == 'twitter'
-          = image_tag 'twitter-square.png', alt: 'Twitter'
+          = image_pack_tag 'images/twitter-square.png', alt: 'Twitter'
         - else
-          = image_tag 'logo.svg', alt: 'Mastodon'
+          = image_pack_tag 'images/logo.svg', alt: 'Mastodon'
 
       .connection-info
         %strong= authorization.display_name.presence || authorization.uid

app/views/home/index.html.haml

@@ -7,7 +7,7 @@
 
 .login-buttons
   = content_tag twitter? ? :div : :a, href: user_twitter_omniauth_authorize_path, class: 'twitter' do
-    .login-brand= image_tag 'twitter-square.png', alt: 'Twitter'
+    .login-brand= image_pack_tag 'images/twitter-square.png', alt: 'Twitter'
     .login-content
       .login-numbers
         %strong= number_with_delimiter @twitter_count
@@ -20,7 +20,7 @@
         %span.login-btn= t('.connect_twitter')
 
   = content_tag mastodon? ? :div : :a, href: user_mastodon_omniauth_authorize_path, class: 'mastodon' do
-    .login-brand= image_tag 'logo.svg', alt: 'Mastodon'
+    .login-brand= image_pack_tag 'images/logo.svg', alt: 'Mastodon'
     .login-content
       .login-numbers
         %strong= number_with_delimiter @mastodon_count

app/views/layouts/application.html.haml

@@ -5,14 +5,13 @@
     %title= t('.title')
 
     = csrf_meta_tags
-    = stylesheet_link_tag 'application', media: 'all'
-    = javascript_include_tag 'application'
-    = javascript_pack_tag 'hello-world-bundle'
+    = stylesheet_pack_tag 'application', media: 'all'
+    = javascript_pack_tag 'application'
 
     %meta{ property: 'og:type', content: 'article' }/
     %meta{ property: 'og:title', content: 'Find your Twitter friends on Mastodon' }/
     %meta{ property: 'og:description', content: 'This bridge tool matches you with your friends in the decentralized Mastodon network' }/
-    %meta{ property: 'og:image', content: image_url('preview.jpg') }/
+    %meta{ property: 'og:image', content: asset_pack_url('images/preview.jpg') }/
     %meta{ property: 'og:url', content: root_url }/
     %meta{ property: 'og:site_name', content: 'Mastodon Bridge' }/
 
@@ -24,7 +23,7 @@
       %ul.left
         %li
           = link_to root_path, class: 'brand' do
-            = image_tag 'logo_full.svg', alt: 'Mastodon Bridge'
+            = image_pack_tag 'images/logo_full.svg', alt: 'Mastodon Bridge'
 
       %ul.right
         - if twitter?

config/application.rb

@@ -9,7 +9,7 @@ require "action_controller/railtie"
 require "action_mailer/railtie"
 require "action_view/railtie"
 # require "action_cable/engine"
-require "sprockets/railtie"
+# require "sprockets/railtie"
 require "rails/test_unit/railtie"
 
 # Require the gems listed in Gemfile, including any gems

config/environments/development.rb

@@ -39,14 +39,6 @@ Rails.application.configure do
   # Raise an error on page load if there are pending migrations.
   config.active_record.migration_error = :page_load
 
-  # Debug mode disables concatenation and preprocessing of assets.
-  # This option may cause significant delays in view rendering with a large
-  # number of complex assets.
-  config.assets.debug = true
-
-  # Suppress logger output for asset requests.
-  config.assets.quiet = true
-
   # Raises error for missing translations
   # config.action_view.raise_on_missing_translations = true
 

config/environments/production.rb

@@ -21,15 +21,6 @@ Rails.application.configure do
   # Apache or NGINX already handles this.
   config.public_file_server.enabled = ENV['RAILS_SERVE_STATIC_FILES'].present?
 
-  # Compress JavaScripts and CSS.
-  config.assets.js_compressor = :uglifier
-  # config.assets.css_compressor = :sass
-
-  # Do not fallback to assets pipeline if a precompiled asset is missed.
-  config.assets.compile = false
-
-  # `config.assets.precompile` and `config.assets.version` have moved to config/initializers/assets.rb
-
   # Enable serving of images, stylesheets, and JavaScripts from an asset server.
   # config.action_controller.asset_host = 'http://assets.example.com'
 

config/initializers/assets.rb

-# Be sure to restart your server when you modify this file.
-
-# Version of your assets, change this if you want to expire all your assets.
-Rails.application.config.assets.version = '1.0'
-
-# Add additional assets to the asset load path
-# Rails.application.config.assets.paths << Emoji.images_path
-
-# Precompile additional assets.
-# application.js, application.css, and all non-JS/CSS in app/assets folder are already added.
-# Rails.application.config.assets.precompile += %w( search.js )

package.json

 {
+  "name": "@mastodon/bridge-build",
+  "private": true,
   "dependencies": {
     "@rails/webpacker": "3.5",
     "axios": "^0.18.0",
     "babel-preset-react": "^6.24.1",
+    "font-awesome": "^4.7.0",
     "prop-types": "^15.6.1",
+    "rails-ujs": "^5.2.0",
     "react": "^16.4.1",
     "react-dom": "^16.4.1",
     "react-intl": "^2.4.0",

yarn.lock

@@ -2297,6 +2297,10 @@ follow-redirects@^1.0.0, follow-redirects@^1.3.0:
   dependencies:
     debug "^3.1.0"
 
+font-awesome@^4.7.0:
+  version "4.7.0"
+  resolved "https://registry.yarnpkg.com/font-awesome/-/font-awesome-4.7.0.tgz#8fa8cf0411a1a31afd07b06d2902bb9fc815a133"
+
 for-in@^0.1.3:
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/for-in/-/for-in-0.1.8.tgz#d8773908e31256109952b1fdb9b3fa867d2775e1"
@@ -4785,6 +4789,10 @@ raf@^3.1.0:
   dependencies:
     performance-now "^2.1.0"
 
+rails-ujs@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/rails-ujs/-/rails-ujs-5.2.0.tgz#d93f7a969a226c0ae67044172955be8c1cdf49fc"
+
 randomatic@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/randomatic/-/randomatic-3.0.0.tgz#d35490030eb4f7578de292ce6dfb04a91a128923"