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..0b265bf5 100644 --- a/.gitignore +++ b/.gitignore @@ -18,3 +18,9 @@ /coverage/* /public/uploads +/public/packs +/public/packs-test +/node_modules +yarn-debug.log* +.yarn-integrity +/yarn.lock \ No newline at end of file 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..312e01f7 100644 --- a/Gemfile +++ b/Gemfile @@ -95,6 +95,9 @@ gem 'almond-rails', '~> 0.1' gem 'pul_uv_rails', github: 'pulibrary/pul_uv_rails', branch: 'master' gem 'riiif' +# LUX dependency +gem "webpacker", "~> 3.3" + # PUL Assets gem 'pul-assets', github: 'pulibrary/pul_assets' # gem 'spotlight-resources-iiif', github: 'pulibrary/spotlight-resources-iiif', branch: 'default_vocab' diff --git a/Gemfile.lock b/Gemfile.lock index cf1eee5a..5546e21f 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.4) + 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.3) BUNDLED WITH - 1.16.2 + 1.16.3 diff --git a/Procfile b/Procfile new file mode 100644 index 00000000..f27b5330 --- /dev/null +++ b/Procfile @@ -0,0 +1,3 @@ +# Procfile +backend: bin/rails s -p 3000 +frontend: bin/webpack-dev-server \ No newline at end of file diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index 76ab00fc..392d616d 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -19,7 +19,23 @@ @import 'spotlight/spotlight'; @import 'normalize-rails'; -@import 'pul-assets'; + +@import 'mixins'; + +@import 'variables/colors'; + +body { + background-color: $light-gray; +} + +.masthead { + margin-bottom: 0px; +} + +#main-content { + background-color: $white; + padding-top: 15px; +} .viewer { height: 400px; diff --git a/app/assets/stylesheets/variables/colors.scss b/app/assets/stylesheets/variables/colors.scss new file mode 100644 index 00000000..418aaa35 --- /dev/null +++ b/app/assets/stylesheets/variables/colors.scss @@ -0,0 +1,11 @@ +$white: #ffffff; +$black: #000000; +$dark-gray: #494f57; +$blacklight-gray: #777; +$gray: #e8e6df; +$light-gray: #f1f2f3; +$dark-orange: #9F620D; +$orange: #e87511; +$blue: #3072AB; +$brand-danger: #a94442; +$yellow-light: #fee7ba; diff --git a/app/javascript/app.vue b/app/javascript/app.vue new file mode 100644 index 00000000..e304dc19 --- /dev/null +++ b/app/javascript/app.vue @@ -0,0 +1,22 @@ + + + + + diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js new file mode 100644 index 00000000..7d84a50e --- /dev/null +++ b/app/javascript/packs/application.js @@ -0,0 +1,26 @@ +/* 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 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' +// import store from '../store' + +Vue.use(system) +Vue.use(TurbolinksAdapter) + +// create the LUX app and mount it to a wrapper with data-behavior="vue" +document.addEventListener('turbolinks:load', () => { + const app = new Vue({ + el: '[data-behavior="vue"]' + // store + }) +}) \ No newline at end of file diff --git a/app/javascript/packs/hello_vue.js b/app/javascript/packs/hello_vue.js new file mode 100644 index 00000000..fd060100 --- /dev/null +++ b/app/javascript/packs/hello_vue.js @@ -0,0 +1,71 @@ +/* eslint no-console: 0 */ +// Run this example by adding <%= javascript_pack_tag 'hello_vue' %> (and +// <%= stylesheet_pack_tag 'hello_vue' %> if you have styles in your component) +// to the head of your layout file, +// like app/views/layouts/application.html.erb. +// All it does is render
Hello Vue
at the bottom of the page. + +import Vue from 'vue' +import App from '../app.vue' + +document.addEventListener('DOMContentLoaded', () => { + const el = document.body.appendChild(document.createElement('hello')) + const app = new Vue({ + el, + render: h => h(App) + }) + + console.log(app) +}) + + +// The above code uses Vue without the compiler, which means you cannot +// use Vue to target elements in your existing html templates. You would +// need to always use single file components. +// To be able to target elements in your existing html/erb templates, +// comment out the above code and uncomment the below +// Add <%= javascript_pack_tag 'hello_vue' %> to your layout +// Then add this markup to your html template: +// +//
+// {{message}} +// +//
+ + +// import Vue from 'vue/dist/vue.esm' +// import App from '../app.vue' +// +// document.addEventListener('DOMContentLoaded', () => { +// const app = new Vue({ +// el: '#hello', +// data: { +// message: "Can you say hello?" +// }, +// components: { App } +// }) +// }) +// +// +// +// If the using turbolinks, install 'vue-turbolinks': +// +// yarn add 'vue-turbolinks' +// +// Then uncomment the code block below: +// +// import TurbolinksAdapter from 'vue-turbolinks' +// import Vue from 'vue/dist/vue.esm' +// import App from '../app.vue' +// +// Vue.use(TurbolinksAdapter) +// +// document.addEventListener('turbolinks:load', () => { +// const app = new Vue({ +// el: '#hello', +// data: { +// message: "Can you say hello?" +// }, +// components: { App } +// }) +// }) diff --git a/app/views/_user_util_links.html.erb b/app/views/_user_util_links.html.erb index 99b84c55..a9acdc32 100644 --- a/app/views/_user_util_links.html.erb +++ b/app/views/_user_util_links.html.erb @@ -5,6 +5,7 @@
  • <%= action %>
    • <% end %> +