Creating a tag helper to auto compile assets in the style guide from …

…the host app
wearefuturegov · Dec 15, 2020 · ea9f3bc · ea9f3bc
1 parent 3f2c4a4
commit ea9f3bc
Show file tree

Hide file tree

Showing 7 changed files with 26 additions and 7 deletions.
diff --git a/README.md b/README.md
@@ -16,8 +16,6 @@ This is a Ruby gem containing a Rails engine and a Dockerfile for development pu
 
 ## Usage within your Rails app
 
-TODO - Test this out on Beacon in a branch to see if its working
-
 - Add the gem to the Gemfile (TODO - publish somewhere)
 
 ```
@@ -30,18 +28,23 @@ $ bundle
 ```
 
 - Import the styles in your layout
+
 ```
-<%= stylesheet_pack_tag 'style_guide', :media => "all %>
+<%= Camden::StyleGuide::TagHelper.style_guide_css_pack_tag :media => "all %>
 ```
 
-- In theory that should work!
+- You can also view the docs by visiting http://localhost:3000/style-guide
+
+- For production usage you can run `rake camden_style_guide:webpacker:compile` to create the assets which will then be served statically.
 
 ## Usage for development of the Guide itself
 
 This ought to start a server so that you can preview the guide at http://localhost:4000/style_guide
 
 `docker-compose up`
 
+This brings up a dev server running on 3056 that shows live updates as you make them (js) or refresh (scss).
+
 ## Contributing
 
 1. Add a section to the style guide documentation page `app/views/camden/style_guide/application/index.html.erb` with some example usage and explanation on how to use. 

diff --git a/app/helpers/camden/style_guide/tag_helper.rb b/app/helpers/camden/style_guide/tag_helper.rb
@@ -0,0 +1,14 @@
+module Camden
+  module StyleGuide
+    module TagHelper
+      class << self
+        include ActionView::Helpers::AssetTagHelper
+        include Camden::StyleGuide::ApplicationHelper
+
+        def style_guide_css_pack_tag(**options)
+          stylesheet_pack_tag('style_guide', **options)
+        end
+      end
+    end
+  end
+end
diff --git a/test/dummy/app/assets/config/manifest.js b/test/dummy/app/assets/config/manifest.js
@@ -1,3 +1,3 @@
 //= link_tree ../images
 //= link_directory ../stylesheets .css
-//= link camden_style_guide_manifest.js
+// link camden_style_guide_manifest.js
diff --git a/test/dummy/app/views/application/index.html.erb b/test/dummy/app/views/application/index.html.erb
@@ -0,0 +1 @@
+<h1>Style Guide</h1>
diff --git a/test/dummy/app/views/layouts/application.html.erb b/test/dummy/app/views/layouts/application.html.erb
@@ -5,7 +5,7 @@
     <%= csrf_meta_tags %>
     <%= csp_meta_tag %>
 
-    <%= stylesheet_link_tag    'application', media: 'all' %>
+    <%= Camden::StyleGuide::TagHelper.style_guide_css_pack_tag media: 'all' %>
   </head>
 
   <body>

diff --git a/test/dummy/config/routes.rb b/test/dummy/config/routes.rb
@@ -1,3 +1,4 @@
 Rails.application.routes.draw do
+  root to: "application#index"
   mount Camden::StyleGuide::Engine => "/style-guide"
 end
diff --git a/test/dummy/config/webpacker.yml b/test/dummy/config/webpacker.yml
@@ -17,7 +17,7 @@ default: &default
   cache_manifest: false
 
   # Extract and emit a css file
-  extract_css: false
+  extract_css: true
 
   static_assets_extensions:
     - .jpg