Merge pull request #169 from joyofrails/publish/color-schemes

Publish color schemes

Author: rossta

app/content/layouts/article.html.erb

@@ -1,10 +1,11 @@
 <%= render "application/skip_to_content" %>
 <%= render_layout "application" do %>
-  <article>
+  <article itemscope itemtype="http://schema.org/Article">
     <%= render Pages::Header.new(
       title: current_page.data.title!,
       description: current_page.data.description,
-      published_on: current_page.data.published&.to_date
+      published_on: current_page.data.published&.to_date,
+      updated_on: current_page.data.updated&.to_date
     ) %>
     <%- if current_page.data.toc -%>
       <aside>
@@ -19,7 +20,7 @@
         </nav>
       </aside>
     <%- end -%>
-    <div class="article-content container">
+    <div class="article-content container" itemprop="articleBody">
       <%= yield %>
     </div>
   </article>

app/content/pages/about/index.html.mdrb

@@ -6,7 +6,7 @@ description: Joy of Rails is a Rails application dedicated to teaching and demon
 updated: 2024-07-15
 ---
 
-I’ll never forget that first day of school.
+I’ll never forget my first day of teaching.
 
 I was young and inexperienced. As my first-period students filed in from the hallway, the reality of the situation began to settle in.
 
@@ -16,31 +16,31 @@ _My students are going to see right through me_.
 
 _I’m screwed._
 
-As I closed the door, I surveyed the faces of my students. They were looking back at me eager to find out if I had any worth. Fear tightened its grip around my throat.
+I closed the door. I surveyed the faces of my students. They were looking back at me eager to find out if I had any worth. Fear tightened its grip around my throat.
 
 I almost passed out.
 
 My first job out of college was teaching Science in inner-city Houston, Texas. It was, and still is, the hardest job I’ve ever had.
 
-On that first day of teaching, I was under-prepared. I less than ten years older than my 8th-grade students. I had completed less than three months of teacher training through the Teach for America program. Most of my students were first and second generation immigrants whose families hailed from Latin America. I didn’t speak any Spanish.
+When I started teaching, I was under-prepared. Less than ten years older than my 8th-grade students, I had only two months of teacher training through the Teach for America program. Most of my students were first and second generation immigrants whose families hailed from Latin America. I didn’t speak any Spanish.
 
-_I_ was supposed to teach _them_.
+_I_ was supposed to teach _them_. Yeah, right.
 
-Somehow, I survived my first period class and the others that followed that day. And then something magical happened.
+Somehow, I survived my first period class and the rest of the day. And then something magical happened.
 
 Once the students had been dismissed, I was cleaning up in the an equipment closet, which I shared with the department chair, Ms Young, who taught next door. She came in and pointed to some boxes on the shelf.
 
 _"The district gave me these boxes and I’m not sure what to make of all that. Why don’t you take ’em?"_
 
 I didn’t know it at the time, but this moment changed my life.
 
-These boxes were full of Legos. Not just any Legos—the (at the time) recently released [Lego Mindstorms](https://en.wikipedia.org/wiki/Lego_Mindstorms) kit. Basically Lego Mindstorms was what you’d get if Legos, Scratch, and Arduino made a baby.
+These boxes were full of Legos. Not just any Legos—these were [Lego Mindstorms](https://en.wikipedia.org/wiki/Lego_Mindstorms) kits. Basically Lego Mindstorms was what you’d get if Legos, Scratch, and Arduino made a baby.
 
-_Damn right_. I took those boxes. I felt like a kid again. I thought I had been given Legos but the real gift was computer programming.
+_Cool_. I took those boxes. I felt like a kid again. I tore into the tutorials and taught myself just enough to pass on to my students. Later that month, I started an after school club. Later that year, we entered Robotic competitions. It was a lot of fun.
 
-I tore into the tutorials and taught myself just enough to pass on to my students. I started an after school club. We entered Robotic competitions. It was a lot of fun.
+I thought I had been given Legos but the real gift was computer programming.
 
-Looking back on these memories and my teaching experience, I remember it has being very challenging—emotionally, mentally, physically. But I also remember all the joy. Helping a student learn always brought me joy. How Miguel’s eyes lit up during a demonstration. The way Juana pumped her fist when she balanced a difficult chemistry equation. When our rocket project helped Jerry transform from my worst nightmare and to my biggest supporter.
+Looking back on these memories and my teaching experience, I remember it has being very challenging—emotionally, mentally, physically. But I also remember all the joy. Helping a student learn brought me so much. How Miguel’s eyes lit up during a demonstration. The way Juana pumped her fist when she balanced a difficult chemistry equation. When our rocket project helped Jerry transform from my worst nightmare and to my biggest supporter.
 
 I often say my first day of teaching was also my first day as a programmer. In the [first article for this site](https://joyofrails.com/articles/introducing-joy-of-rails), I talked about the joy I felt when I experienced Ruby on Rails for the first time. Looking back, it seems likely I might never have encountered Ruby or Rails or even started a career in computers had it not been for my humble beginnings as a teacher and Ms. Young’s Lego Mindstorms kits. I may have left teaching for tech, but the teacher in me never left. Teaching and programming for me are inexorably linked.
 

app/content/pages/articles/custom-color-schemes-with-ruby-on-rails.html.mdrb

@@ -4,7 +4,7 @@ author: Ross Kaffenberger
 layout: article
 description: You can edit the color scheme of this website right in content of this blog post. Play with the controls while we highlight the benefits of Rails, Hotwire, and CSS variables.
 summary: You can edit the color scheme of this website right in content of this blog post. Play with the controls while we highlight the benefits of Rails, Hotwire, and CSS variables.
-# published:
+published: 2024-07-15
 image: articles/custom-color-schemes-with-ruby-on-rails/rainbows.jpg
 uuid: d99f045b-f3f7-4408-811e-9701b1a13ce8
 tags:
@@ -31,7 +31,7 @@ Pretty cool, huh? Here are the key ingredients:
 - [Cookies](https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies): A session cookie to store your saved color scheme selection
 - [Hotwire](https://hotwired.dev/): Server-rendered HTML and a single-page app experience powered by Rails, [Turbo Drive](https://turbo.hotwired.dev/handbook/introduction#turbo-drive%3A-navigate-within-a-persistent-process), and [Turbo Frames](https://turbo.hotwired.dev/handbook/introduction#turbo-frames%3A-decompose-complex-pages)
 
-I started with the premise of using a monochromatic color scheme based on the 11 color scale Tailwind uses for each of [its default color sets](https://tailwindcss.com/docs/customizing-colors). The curated options are all generated from [uicolors.app](https://uicolors.app/create).
+I started with the premise of using a monochromatic color scheme based on the eleven-item color scale [Tailwind](https://tailwindcss.com) uses for each of [its default color sets](https://tailwindcss.com/docs/customizing-colors). The curated options are all generated from [uicolors.app](https://uicolors.app/create).
 
 Each color scheme is a row in the `color_schemes` table, with a name and CSS hex code values for each of the eleven weights.
 
@@ -51,7 +51,7 @@ end
 
 CSS variables make it easy to change repeated CSS in a lot of places. You can set a CSS variable with double dashes, `--`. The CSS variable can be accessed using the `var()` expression. CSS variables can be overridden and can be defined in terms of other variables.
 
-Here’s a simplified a view of how I used CSS variables to define the main background color of the `<body>` element.
+Here’s a simplified a view of how I used CSS variables to define the main background color of the `<body>` element. Using the pseudo-class `:root` means the CSS variable can be accessed from any scope in CSS.
 
 ```css:{"show_header": false}
 :root {
@@ -66,9 +66,11 @@ body {
 }
 ```
 
-Even though Joy of Rails does not use Tailwind, this approach is consistent with [the Tailwind docs for using CSS variables to customize Tailwind colors](https://tailwindcss.com/docs/customizing-colors#using-css-variables).
+This approach is consistent with [the Tailwind docs for using CSS variables to customize Tailwind colors](https://tailwindcss.com/docs/customizing-colors#using-css-variables) for those of you that may be using (or interested in using) Tailwind.
 
-When you click the "Save" button, the application stores the `id` of the chosen color scheme in your Rails session:
+Most of the buttons in the color scheme demo are connected to `<form>` elements with actions that point to the [`ColorSchemesController`](https://github.com/joyofrails/joyofrails.com/blob/a08589e1cbe2accf4a20713829df56533e31755e/app/controllers/settings/color_schemes_controller.rb) in the Joy of Rails application.
+
+When you click the "Save" button, [the application stores the `id` of the chosen color scheme in your Rails session](https://github.com/joyofrails/joyofrails.com/blob/a08589e1cbe2accf4a20713829df56533e31755e/app/controllers/settings/color_schemes_controller.rb#L31):
 
 ```ruby:{"show_header":false}
 session[:color_scheme_id] = @color_scheme.id
@@ -77,12 +79,10 @@ session[:color_scheme_id] = @color_scheme.id
 When the page is rendered, the application checks for the presence of the session data to query for the desired color scheme:
 
 ```ruby:{"show_header":false}
-if session[:color_scheme_id]
-  @color_scheme = ColorScheme.find(session[:color_scheme_id])
-end
+session[:color_scheme_id] && ColorScheme.find(session[:color_scheme_id])
 ```
 
-The color scheme CSS variables can be written directly into a style tag
+The color scheme CSS variables are written directly into a style tag:
 
 ```erb:{"filename":"app/view/layouts/application.html.erb"}
 <style>

app/controllers/concerns/color_scheming.rb

@@ -17,16 +17,16 @@ def custom_color_scheme?
   end
 
   def find_color_scheme
-    preview_color_scheme || session_color_scheme || default_color_scheme
+    @color_scheme ||= preview_color_scheme || session_color_scheme || default_color_scheme
   end
 
   def preview_color_scheme_id = params.dig(:settings, :color_scheme_id)
 
-  def preview_color_scheme = preview_color_scheme_id && ColorScheme.find(preview_color_scheme_id)
-
   def session_color_scheme_id = session[:color_scheme_id]
 
-  def session_color_scheme = session_color_scheme_id && ColorScheme.find(session_color_scheme_id)
+  def preview_color_scheme = @preview_color_scheme ||= preview_color_scheme_id && ColorScheme.find(preview_color_scheme_id)
+
+  def session_color_scheme = @session_color_scheme ||= session_color_scheme_id && ColorScheme.find(session_color_scheme_id)
 
   def default_color_scheme = @default_color_scheme ||= ColorScheme.cached_default
 end

app/views/components/pages/header.rb

@@ -4,10 +4,11 @@ class Pages::Header < ApplicationComponent
 
   attr_accessor :current_page
 
-  def initialize(title: nil, description: nil, published_on: nil)
+  def initialize(title: nil, description: nil, published_on: nil, updated_on: nil)
     @title = title
     @description = description
     @published_on = published_on
+    @updated_on = updated_on
   end
 
   def view_template
@@ -19,11 +20,27 @@ def view_template
           h1 { @title }
         end
         p(class: "description") { @description } if @description
-        if @published_on
+        if @published_on || @updated_on
           span(class: "block") do
-            # <time datetime="2024-03-13T00:00:00Z" itemprop="datePublished" class="dt-published"> March 13th, 2024 </time>
-            em do
-              time_tag @published_on, itemprop: "datePublished", class: "dt-published"
+            if @published_on && @updated_on
+              plain "Published:"
+              whitespace
+            end
+            if @published_on
+              em do
+                time_tag @published_on, itemprop: "datePublished", class: "dt-published"
+              end
+            end
+            if @updated_on
+              if @published_on
+                plain " // "
+              end
+              plain "Updated:"
+              whitespace
+
+              em do
+                time_tag @updated_on, itemprop: "dateModified", class: "dt-modified"
+              end
             end
           end
         end

spec/views/components/pages/header_spec.rb

@@ -0,0 +1,31 @@
+require "rails_helper"
+
+RSpec.describe Pages::Header, type: :view do
+  def render(**kwargs)
+    described_class.new(**kwargs).call(view_context: view)
+  end
+
+  describe "#call" do
+    it "renders the header" do
+      expect(render(title: "Hello")).to have_css(".page-header h1", text: "Hello")
+    end
+
+    it "renders the description" do
+      expect(render(description: "Describe me")).to have_css(".page-header p", text: "Describe me")
+    end
+
+    it "renders the published date" do
+      expect(render(published_on: Date.today)).to have_css("time.dt-published", text: Date.today.to_fs(:long))
+    end
+
+    it "renders the updated date" do
+      expect(render(updated_on: Date.today)).to have_css("time.dt-modified", text: Date.today.to_fs(:long))
+    end
+
+    it "renders the published and updated date" do
+      rendered = render(published_on: Date.yesterday, updated_on: Date.today)
+      expect(rendered).to have_css("time.dt-published", text: Date.yesterday.to_fs(:long))
+      expect(rendered).to have_css("time.dt-modified", text: Date.today.to_fs(:long))
+    end
+  end
+end