Merge pull request #187 from joyofrails/feat/next-article

Prepare for publishing next article

Author: rossta

app/assets/images/articles/how-to-render-css-dynamically-in-rails/placeholder.jpg

@@ -7,17 +7,20 @@ class ArticlePage < Sitepress::Model
 
   delegate :mime_type, :handler, to: :page
 
-  def self.published
-    all.filter(&:published?)
+  def self.published(params = {})
+    all
+      .filter { |article| article.published?(preview: params[:preview]) }
       .sort { |a, b| b.published_on <=> a.published_on } # DESC order
   end
 
   def self.draft
     all.filter(&:draft?)
   end
 
-  def published?
-    published_on.presence && published_on <= Date.today
+  # Consider an article published if it has a published date prior to today.
+  # If preview is true, consider the article published regardless of the date.
+  def published?(preview: false)
+    published_on.presence && (preview || published_on <= Date.today)
   end
 
   def draft? = !published?

app/assets/images/articles/how-to-render-css-dynamically-in-rails/style-rainbow.jpg

@@ -6,8 +6,8 @@ summary: Rails is not just for HTML over the wire. This post demonstrates how an
 description: Rails is not just for HTML over the wire. This post demonstrates how and why you might use Rails for delivering CSS on the fly too.
 published: '2024-08-12'
 uuid: 3be769c4-6a2a-4cfb-8008-94046b952aa6
-image: articles/how-to-render-css-dynamically-in-rails/placeholder.jpg
-meta_image: articles/how-to-render-css-dynamically-in-rails/placeholder.jpg
+image: articles/how-to-render-css-dynamically-in-rails/style-rainbow.jpg
+meta_image: articles/how-to-render-css-dynamically-in-rails/style-rainbow.jpg
 tags:
   - Rails
 ---
@@ -120,15 +120,33 @@ irb> Mime::SET.collect(&:to_s)
 ["text/html", "text/plain", "text/javascript", "text/css", "text/calendar", "text/csv", "text/vcard", "text/vtt", "image/png", "image/jpeg", "image/gif", "image/bmp", "image/tiff", "image/svg+xml", "image/webp", "video/mpeg", "audio/mpeg", "audio/ogg", "audio/aac", "video/webm", "video/mp4", "font/otf", "font/ttf", "font/woff", "font/woff2", "application/xml", "application/rss+xml", "application/atom+xml", "application/x-yaml", "multipart/form-data", "application/x-www-form-urlencoded", "application/json", "application/pdf", "application/zip", "application/gzip", "text/vnd.turbo-stream.html"]
 ```
 
-In Rails `mime_types.rb`, we can see the registered MIME types with each of their recognized extensions.
+In Rails `mime_types.rb`, we can see the registered MIME types with each of their recognized extensions. Here‘s the original `mime_types.rb`, added to Rails on Dec 2, 2006 ([source](https://github.com/rails/rails/blob/5410f2cb74737bd6d96c226230c2b9c2bfe1d80b/actionpack/lib/action_controller/mime_types.rb 'Source code on Github')).
+
+```ruby:{"show_header": false}
+Mime::Type.register "*/*", :all
+Mime::Type.register "text/plain", :text
+Mime::Type.register "text/html", :html, %w( application/xhtml+xml ), %w( xhtml )
+Mime::Type.register "text/javascript", :js, %w( application/javascript application/x-javascript )
+Mime::Type.register "text/calendar", :ics
+Mime::Type.register "text/csv", :csv
+Mime::Type.register "application/xml", :xml, %w( text/xml application/x-xml )
+Mime::Type.register "application/rss+xml", :rss
+Mime::Type.register "application/atom+xml", :atom
+```
+
+Support for CSS was added a short time later on Feb 17, 2007 ([commit](https://github.com/rails/rails/commit/392c7f7314d196c54912a65981d79002d032f896 'Commit on Github')).
+
+```diff:{"show_header": false}
++ Mime::Type.register "text/css", :css
+```
 
-That `:css` in the MIME type registry is one way to instruct Rails controller behavior with `respond_to`.
+We can take advantage of these registered MIME types to instruct Rails controller behavior with `respond_to`.
 
 Using `respond_to` in a controller allows you to define responses and logic based on the requested format. Here‘s how I take advantage of this behavior in `ColorSchemesController#show`:
 
 <%= render CodeBlock::AppFile.new("app/controllers/color_schemes_controller.rb", lines: [1, 8..17], language: "ruby", revision: "bd53833b03c7f957546e5a9031643d3beb179beb") %>
 
-This controller action will respond differently for HTML and CSS requests. To demonstrate the difference, I've inserted two iframes for `ColorSchemesController#show` below:
+This controller action will respond differently for HTML and CSS requests. Note the `format.html` and `format.css` blocks describe alternate results. To demonstrate the difference, I've inserted two iframes for `ColorSchemesController#show` below:
 
 #### Iframe for HTML request
 
@@ -162,7 +180,7 @@ We can use this endpoint in a stylesheet `<link>` tag just like any other static
 <%= stylesheet_link_tag color_scheme_path(@color_scheme, format: :css) %>
 ```
 
-A downside of moving our dynamic CSS to a separate controller action is that it requires an additional HTTP request. This could be an issue for a highly interactive user experience. But on the other hand, using a separate request allows you to take advantage of Rails [conditional GET features](https://guides.rubyonrails.org/v3.2/caching_with_rails.html#conditional-get-support)
+One downside of moving our dynamic CSS to a separate controller action is that it requires an additional HTTP request. This could be an issue for a highly interactive user experience. But on the other hand, using a separate request allows you to take advantage of Rails [conditional GET features](https://guides.rubyonrails.org/v3.2/caching_with_rails.html#conditional-get-support)
 
 > Conditional GETs are a feature of the HTTP specification that provide a way for web servers to tell browsers that the response to a GET request hasn't changed since the last request and can be safely pulled from the browser cache.
 >
@@ -176,6 +194,15 @@ This method will calculate a value for `Etag` or `Last-Modified` response header
 
 In short, dynamic CSS combined with a conditional GET allows you to leverage put Ruby logic behind your stylesheet link tags in a performant manner.
 
+## Which approach is right for you?
+
+There‘s no one right answer here but consider the tradeoffs. Both work well with Hotwire; just like any other element, our style tags and stylesheet link tags can be nested inside a Turbo Frame or can be manipulated with a Turbo Stream if we need some interactivity. With a `<style>` tag, no extra requests to your Rails endpoints are needed to render the page. Separating dynamic css into a controller action can help address bandwidth as response body length as your dynamic styles grow more numerous.
+
+My thought process is usually:
+
+- start with dynamic css straight into HTML within a `<style>`
+- move to a controller action when more flexibility is needed or when HTTP caching features are desired
+
 ## Recap
 
 Rails provides us with all sorts of [sharp knives](https://rubyonrails.org/doctrine#provide-sharp-knives) especially it comes to dynamic rendering in various formats, like CSS.

app/content/models/article_page.rb

@@ -4,7 +4,7 @@ title: Joy of Rails
 
 <section style="min-height: 51vh">
   <div class="main-content container py-gap lg:py-3xl">
-    <% ArticlePage.published.take(4).zip(%w[left right].cycle).each do |(page, side)| %>
+    <% ArticlePage.published(params).take(4).zip(%w[left right].cycle).each do |(page, side)| %>
       <%= render Pages::Summary.from_page(page, side: side) %>
     <% end %>
   </div>

app/content/pages/articles/how-to-render-css-dynamically-in-rails.html.mdrb

@@ -6,6 +6,20 @@
   # Filter out index.html.erb from article pages before selecting first draft
   let(:first_draft) { ArticlePage.draft.lazy.filter { |article| article.page.request_path != "/articles" }.first }
 
+  describe "GET /" do
+    it "lists recent published articles" do
+      get "/"
+
+      expect(response).to have_http_status(:ok)
+    end
+
+    it "supports preview flag" do
+      get "/", params: {preview: true}
+
+      expect(response).to have_http_status(:ok)
+    end
+  end
+
   describe "GET /articles" do
     it "lists published articles" do
       get "/articles"