Serve Static Files (#5)

AlexB52 · web-flow · commit 640c994b5f49 · 2022-03-09T10:08:39.000+13:00
* Setup to get it working on Harvest

* require web-console and turbo-rails

* Remove unused code in lib/playground/engine.rb

* Make text area not break lines
diff --git a/Gemfile b/Gemfile
@@ -5,10 +5,8 @@ git_source(:github) { |repo| "https://github.com/#{repo}.git" }
 gemspec
 
 gem "sqlite3"
-
-gem "sprockets-rails"
+gem "rails"
 gem "puma"
-gem 'web-console'
-gem "turbo-rails"
+gem "sprockets-rails"
 # Start debugger with binding.b [https://github.com/ruby/debug]
 gem "debug", ">= 1.0.0"
diff --git a/Gemfile.lock b/Gemfile.lock
@@ -2,7 +2,6 @@ PATH
   remote: .
   specs:
     playground (0.1.0)
-      rails (>= 7.0.2.2)
       turbo-rails
       web-console
 
@@ -186,10 +185,9 @@ DEPENDENCIES
   debug (>= 1.0.0)
   playground!
   puma
+  rails
   sprockets-rails
   sqlite3
-  turbo-rails
-  web-console
 
 BUNDLED WITH
    2.3.7
diff --git a/app/assets/config/playground_manifest.js b/app/assets/config/playground_manifest.js
@@ -1,2 +1,2 @@
 //= link_directory ../stylesheets/playground .css
-//= link_directory ../javascript/playground .js
+//= link_directory ../javascripts/playground .js
diff --git a/app/assets/javascripts/playground/application.js b/app/assets/javascripts/playground/application.js
diff --git a/app/assets/stylesheets/playground/application.css b/app/assets/stylesheets/playground/application.css
@@ -26,7 +26,7 @@ textarea, input, select {
 }
 
 textarea, select { padding:1rem; height:100%; max-height:500px; }
-textarea { width:100%; max-height:500px; }
+textarea { width:100%; max-height:500px; white-space:nowrap; }
 input { margin-bottom:0.5rem; padding:0.5rem;}
 select, input { width:200px; }
 select { font-size:0.7em; }
diff --git a/app/views/layouts/playground/application.html.erb b/app/views/layouts/playground/application.html.erb
@@ -5,8 +5,26 @@
   <%= csrf_meta_tags %>
   <%= csp_meta_tag %>
 
-  <%= stylesheet_link_tag "playground/application", media: "all" %>
-  <%= javascript_include_tag "playground/application", media: "all" %>
+  <%= javascript_include_tag "playground/application", nonce: true, media: "all" %>
+
+  <style type="text/css">
+    body { max-width:900px; margin:auto; padding:0 1rem; }
+
+    .code { flex-grow:1; height:500px; }
+    .sidebar, .code { margin-right:1rem; }
+
+    textarea, input, select {
+      -webkit-box-sizing:border-box;
+         -moz-box-sizing:border-box;
+              box-sizing:border-box;
+    }
+
+    textarea, select { padding:1rem; height:100%; max-height:500px; }
+    textarea { width:100%; max-height:500px; white-space:nowrap; }
+    input { margin-bottom:0.5rem; padding:0.5rem;}
+    select, input { width:200px; }
+    select { font-size:0.7em; }
+  </style>
 </head>
 <body>
 
diff --git a/lib/playground.rb b/lib/playground.rb
@@ -1,5 +1,7 @@
 require "playground/version"
 require "playground/engine"
+require "web-console"
+require "turbo-rails"
 
 module Playground
   # Your code goes here...
diff --git a/lib/playground/engine.rb b/lib/playground/engine.rb
@@ -2,8 +2,20 @@ module Playground
   class Engine < ::Rails::Engine
     isolate_namespace Playground
 
-    initializer "blorgh.assets.precompile" do |app|
-      app.config.assets.precompile += %w( application.js application.css )
+    # If you don't want to precompile Turbo's assets (eg. because you're using webpack),
+    # you can do this in an intiailzer:
+    #
+    # config.after_initialize do
+    #   config.assets.precompile -= Turbo::Engine::PRECOMPILE_ASSETS
+    # end
+    PRECOMPILE_ASSETS = %w( application.js application.css )
+
+    initializer "playground.assets" do |app|
+      # if app.config.respond_to?(:assets)
+      #   app.config.assets.precompile += PRECOMPILE_ASSETS
+      # end
+      app.middleware.insert_before(::ActionDispatch::Static, ::ActionDispatch::Static, "#{root}/vendor")
     end
+
   end
 end
diff --git a/package.json b/package.json
@@ -6,7 +6,7 @@
     "esbuild": "^0.14.25"
   },
   "scripts": {
-    "watch": "esbuild javascript/application.js --outfile=app/assets/javascript/playground/application.js --bundle --watch",
-    "build": "esbuild javascript/application.js --outfile=app/assets/javascript/playground/application.js --bundle"
+    "watch": "esbuild javascript/application.js --outfile=app/assets/javascripts/playground/application.js --bundle --watch",
+    "build": "esbuild javascript/application.js --outfile=app/assets/javascripts/playground/application.js --bundle"
   }
 }
diff --git a/playground.gemspec b/playground.gemspec
@@ -14,10 +14,9 @@ Gem::Specification.new do |spec|
   # spec.metadata["changelog_uri"] = "TODO: Put your gem's CHANGELOG.md URL here."
 
   spec.files = Dir.chdir(File.expand_path(__dir__)) do
-    Dir["{app,config,db,lib}/**/*", "MIT-LICENSE", "Rakefile", "README.md"]
+    Dir["{app,config,db,lib,vendor}/**/*", "MIT-LICENSE", "Rakefile", "README.md"]
   end
 
-  spec.add_dependency "rails", ">= 7.0.2.2"
   spec.add_dependency "web-console"
   spec.add_dependency "turbo-rails"
 end
diff --git a/vendor/javascripts/playground/application.js b/vendor/javascripts/playground/application.js

Original file line number	Diff line number	Diff line change
`@@ -1,2 +1,2 @@`
`1`	`1`	`//= link_directory ../stylesheets/playground .css`
`2`		`-//= link_directory ../javascript/playground .js`
	`2`	`+//= link_directory ../javascripts/playground .js`
Original file line number	Diff line number	Diff line change
`@@ -26,7 +26,7 @@ textarea, input, select {`
`26`	`26`	`}`
`27`	`27`
`28`	`28`	`textarea, select { padding:1rem; height:100%; max-height:500px; }`
`29`		`-textarea { width:100%; max-height:500px; }`
	`29`	`+textarea { width:100%; max-height:500px; white-space:nowrap; }`
`30`	`30`	`input { margin-bottom:0.5rem; padding:0.5rem;}`
`31`	`31`	`select, input { width:200px; }`
`32`	`32`	`select { font-size:0.7em; }`
Original file line number	Diff line number	Diff line change
`@@ -6,7 +6,7 @@`
`6`	`6`	`"esbuild": "^0.14.25"`
`7`	`7`	`},`
`8`	`8`	`"scripts": {`
`9`		`- "watch": "esbuild javascript/application.js --outfile=app/assets/javascript/playground/application.js --bundle --watch",`
`10`		`- "build": "esbuild javascript/application.js --outfile=app/assets/javascript/playground/application.js --bundle"`
	`9`	`+ "watch": "esbuild javascript/application.js --outfile=app/assets/javascripts/playground/application.js --bundle --watch",`
	`10`	`+ "build": "esbuild javascript/application.js --outfile=app/assets/javascripts/playground/application.js --bundle"`
`11`	`11`	`}`
`12`	`12`	`}`