From 099df9eee4777ef3e27c65e260df6d792b77e667 Mon Sep 17 00:00:00 2001 From: Shaun Ellis Date: Mon, 1 Oct 2018 15:02:57 -0400 Subject: [PATCH] adds lux --- .babelrc | 18 + .gitignore | 5 + .postcssrc.yml | 3 + Gemfile | 3 + Gemfile.lock | 7 + Procfile | 3 + app/assets/javascripts/application.js | 2 +- app/javascript/packs/application.js | 22 + app/views/layouts/application.html.erb | 3 +- .../layouts/spotlight/spotlight.html.erb | 4 +- app/views/shared/_footer.html.erb | 196 +- app/views/shared/_header_navbar.html.erb | 43 +- bin/webpack | 15 + bin/webpack-dev-server | 15 + config/environments/development.rb | 3 + config/environments/production.rb | 3 + config/webpack/development.js | 5 + config/webpack/environment.js | 5 + config/webpack/loaders/vue.js | 13 + config/webpack/production.js | 5 + config/webpack/test.js | 5 + config/webpacker.yml | 69 + package.json | 10 + yarn.lock | 6050 +++++++++++++++++ 24 files changed, 6292 insertions(+), 215 deletions(-) create mode 100644 .babelrc create mode 100644 .postcssrc.yml create mode 100644 Procfile create mode 100644 app/javascript/packs/application.js create mode 100755 bin/webpack create mode 100755 bin/webpack-dev-server create mode 100644 config/webpack/development.js create mode 100644 config/webpack/environment.js create mode 100644 config/webpack/loaders/vue.js create mode 100644 config/webpack/production.js create mode 100644 config/webpack/test.js create mode 100644 config/webpacker.yml create mode 100644 package.json create mode 100644 yarn.lock diff --git a/.babelrc b/.babelrc new file mode 100644 index 00000000..ded31c0d --- /dev/null +++ b/.babelrc @@ -0,0 +1,18 @@ +{ + "presets": [ + ["env", { + "modules": false, + "targets": { + "browsers": "> 1%", + "uglify": true + }, + "useBuiltIns": true + }] + ], + + "plugins": [ + "syntax-dynamic-import", + "transform-object-rest-spread", + ["transform-class-properties", { "spec": true }] + ] +} diff --git a/.gitignore b/.gitignore index 4c939e63..38aae12f 100644 --- a/.gitignore +++ b/.gitignore @@ -18,3 +18,8 @@ /coverage/* /public/uploads +/public/packs +/public/packs-test +/node_modules +yarn-debug.log* +.yarn-integrity diff --git a/.postcssrc.yml b/.postcssrc.yml new file mode 100644 index 00000000..150dac3c --- /dev/null +++ b/.postcssrc.yml @@ -0,0 +1,3 @@ +plugins: + postcss-import: {} + postcss-cssnext: {} diff --git a/Gemfile b/Gemfile index 70416e65..4afd4e85 100644 --- a/Gemfile +++ b/Gemfile @@ -102,3 +102,6 @@ gem 'dalli' gem 'ruby-prof', require: false gem 'honeybadger', '~> 2.0' gem 'nokogiri', '~> 1.8.1' + +# lux dependency +gem 'webpacker', '~> 3.5' diff --git a/Gemfile.lock b/Gemfile.lock index cf1eee5a..5b3d5a38 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -363,6 +363,8 @@ GEM rack (2.0.5) rack-protection (1.5.5) rack + rack-proxy (0.6.5) + rack rack-test (0.6.3) rack (>= 1.0) rails (5.0.7) @@ -566,6 +568,10 @@ GEM addressable (>= 2.3.6) crack (>= 0.3.2) hashdiff + webpacker (3.5.5) + activesupport (>= 4.2) + rack-proxy (>= 0.6.1) + railties (>= 4.2) websocket-driver (0.6.5) websocket-extensions (>= 0.1.0) websocket-extensions (0.1.3) @@ -639,6 +645,7 @@ DEPENDENCIES vcr web-console (~> 2.0) webmock + webpacker (~> 3.5) BUNDLED WITH 1.16.2 diff --git a/Procfile b/Procfile new file mode 100644 index 00000000..8f8125bd --- /dev/null +++ b/Procfile @@ -0,0 +1,3 @@ +# Procfile +backend: bin/rails s -p 3000 +frontend: bin/webpack-dev-server diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js index d9291b80..600d2ee5 100644 --- a/app/assets/javascripts/application.js +++ b/app/assets/javascripts/application.js @@ -13,7 +13,7 @@ //= require jquery //= require jquery_ujs -//= require turbolinks// + // Required by Blacklight //= require blacklight/blacklight //= require pul-assets diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js new file mode 100644 index 00000000..74b10c4c --- /dev/null +++ b/app/javascript/packs/application.js @@ -0,0 +1,22 @@ +/* eslint no-console:0 */ +// To reference this file, add <%= javascript_pack_tag 'application' %> to the appropriate +// layout file, like app/views/layouts/application.html.erb + +import Vue from 'vue/dist/vue.esm' +import system from 'lux-design-system' +import 'lux-design-system/lib/system/system.css' +// import TurbolinksAdapter from 'vue-turbolinks' + +Vue.use(system) +// Vue.use(TurbolinksAdapter) + +// create the LUX app and mount it to wrappers with class="lux" +// document.addEventListener('turbolinks:load', () => { +document.addEventListener('DOMContentLoaded', () => { + var elements = document.getElementsByClassName('lux') + for(var i = 0; i < elements.length; i++){ + new Vue({ + el: elements[i] + }) + } +}) diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index 6ac1dc00..cbb46661 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -23,7 +23,8 @@ <%= description %> <%= twitter_card %> <%= opengraph %> - + <%= javascript_pack_tag 'application' %> + <%= stylesheet_pack_tag 'application' %>