Merge pull request #165 from joyofrails/feat/color-scheme

Ability to manage color scheme

Author: rossta

Gemfile

@@ -36,6 +36,7 @@ gem "sitepress-rails", group: [:default, :wasm] # Static site generator for Rail
 gem "phlex-rails", group: [:default, :wasm] # An object-oriented alternative to ActionView for Ruby on Rails. [https://github.com/phlex-ruby/phlex-rails]
 gem "commonmarker", require: false
 gem "invisible_captcha", group: [:default, :wasm] # Unobtrusive and flexible spam protection for Rails apps [https://github.com/markets/invisible_captcha]
+gem "color_conversion", group: [:default, :wasm] # A ruby gem to perform color conversions [https://github.com/devrieda/color_conversion]
 
 gem "bootsnap", require: false # Reduces boot times through caching; required in config/boot.rb [https://github.com/Shopify/bootsnap]
 
@@ -87,5 +88,3 @@ end
 group :browser do
   gem "js" # JavaScript bindings for ruby.wasm [https://github.com/ruby/ruby.wasm/blob/main/packages/gems/js]
 end
-
-gem "color_conversion", "~> 0.1.1"

Gemfile.lock

@@ -551,7 +551,7 @@ DEPENDENCIES
   brakeman
   bundle-audit
   capybara
-  color_conversion (~> 0.1.1)
+  color_conversion
   commonmarker
   cuprite!
   debug

Procfile.litestream.dev

@@ -1,2 +1,2 @@
 minio: docker run -p 9000:9000 -p 9001:9001 minio/minio server /data --console-address ":9001"
-litestrem: bin/rails litestream:custom_replicate
+litestrem: bin/litestream replicate --config=config/litestream/development.yml

app/controllers/application_controller.rb

@@ -1,4 +1,5 @@
 class ApplicationController < ActionController::Base
   include Erroring
   include Authentication
+  include ColorScheming
 end

app/controllers/concerns/color_scheming.rb

@@ -0,0 +1,28 @@
+module ColorScheming
+  extend ActiveSupport::Concern
+
+  included do
+    helper_method :custom_color_scheme_params
+    helper_method :custom_color_scheme?
+  end
+
+  def custom_color_scheme_params = preview_color_scheme_id ? {settings: {color_scheme_id: preview_color_scheme_id}} : {}
+
+  def custom_color_scheme?
+    preview_color_scheme_id.present? || session_color_scheme_id.present?
+  end
+
+  def preview_color_scheme_id = params.dig(:settings, :color_scheme_id)
+
+  def session_color_scheme_id = session[:color_scheme_id]
+
+  def find_color_scheme
+    preview_color_scheme || session_color_scheme || default_color_scheme
+  end
+
+  def preview_color_scheme = preview_color_scheme_id && ColorScheme.find(preview_color_scheme_id)
+
+  def 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/controllers/settings/color_schemes_controller.rb

@@ -0,0 +1,36 @@
+class Settings::ColorSchemesController < ApplicationController
+  def show
+    @color_scheme = find_color_scheme
+
+    respond_to do |format|
+      format.html {
+        render ColorSchemes::ShowView.new(
+          settings: Settings.new(color_scheme: @color_scheme),
+          curated_color_schemes: ColorScheme.cached_curated,
+          preview_color_scheme: preview_color_scheme,
+          session_color_scheme: session_color_scheme,
+          default_color_scheme: default_color_scheme
+        )
+      }
+      format.css {
+        render ColorSchemes::Css.new(color_scheme: @color_scheme), layout: false
+      }
+    end
+  end
+
+  def update
+    update_params = params[:settings] ? params.require(:settings).permit(:color_scheme_id) : {}
+    color_scheme_id = update_params[:color_scheme_id]
+    @color_scheme = ColorScheme.find(color_scheme_id)
+
+    redirect_to settings_color_scheme_path unless @color_scheme.present?
+
+    if @color_scheme == ColorScheme.cached_default
+      session.delete(:color_scheme_id)
+    else
+      session[:color_scheme_id] = @color_scheme.id
+    end
+
+    redirect_to settings_color_scheme_path, status: :see_other
+  end
+end

app/controllers/site_controller.rb

@@ -29,11 +29,15 @@ def process_rendition(rendition)
   # @param rendition [Sitepress::Rendition] Rendered representatio of current_resource
   #
   def post_render(rendition)
-    if current_path?(root_path) || stale?(rendition.source, last_modified: current_resource.asset.updated_at.utc, public: true)
+    if skip_http_cache? || stale?(rendition.source, last_modified: current_resource.asset.updated_at.utc, public: true)
       render body: rendition.output, content_type: rendition.mime_type
     end
   end
 
+  def skip_http_cache?
+    current_path?(root_path) || custom_color_scheme?
+  end
+
   def current_path?(path)
     request.path == path
   end

app/javascript/css/application.css

@@ -3,7 +3,7 @@
 @import './reset.css' layer(reset);
 
 @import './config/colors-tailwind.css' layer(theme);
-@import './config/colors-uicolors.css' layer(theme);
+/* @import './config/colors-uicolors.css' layer(theme); */
 @import './config/colors.css' layer(theme);
 @import './config/dracula.css' layer(theme);
 @import './config/theme.css' layer(theme);
@@ -22,6 +22,7 @@
 
 @import './components/logo.css';
 @import './components/button.css';
+@import './components/select.css';
 @import './components/code.scss';
 @import './components/page-header.css';
 @import './components/skip-to-content.css';
@@ -32,3 +33,4 @@
 @import './components/newsletter-banner.css';
 @import './components/anchors.scss';
 @import './components/callout.css';
+@import './components/color-scheme.scss';

app/javascript/css/baseline.css

@@ -621,7 +621,11 @@ svg {
 
   button,
   input,
+  select,
   textarea {
     background-color: var(--joy-dark);
   }
+  select {
+    color: var(--joy-text);
+  }
 }

app/javascript/css/components/button.css

@@ -1,38 +1,67 @@
 .button {
+  border: 1px solid var(--joy-border-subtle);
   border-radius: 0.375rem;
-  padding: 0.5rem 0.75rem;
+  padding: 0.75rem;
   display: inline-flex;
   align-items: center;
   font-size: 0.875rem;
   font-family: var(--sans-serif);
   line-height: 1.5715;
   font-weight: 600;
-  --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity));
-  line-height: inherit;
+  color: var(--joy-light);
+  line-height: 1rem;
 
   &:is(a) {
     text-decoration: none;
   }
 
   &:hover {
     cursor: pointer;
-    --tw-text-opacity: 1;
-    color: rgb(255 255 255 / var(--tw-text-opacity));
     text-decoration-line: none;
   }
 
   &.hidden {
     display: none;
   }
   &.primary {
+    border: 1px solid var(--joy-button-primary);
     background-color: var(--joy-button-primary);
+
+    &:hover {
+      background-color: var(--joy-button-primary-hover);
+    }
+    &:active {
+      background-color: var(--joy-button-primary-active);
+    }
   }
   &.secondary {
     background-color: var(--joy-button-secondary);
+    color: var(--joy-text);
+    &:hover {
+      background-color: var(--joy-button-secondary-hover);
+    }
+    &:active {
+      background-color: var(--joy-button-secondary-active);
+    }
+  }
+  &.tertiary {
+    border: 1px solid var(--joy-button-tertiary);
+    background-color: var(--joy-button-tertiary);
+    &:hover {
+      background-color: var(--joy-button-tertiary-hover);
+    }
+    &:active {
+      background-color: var(--joy-button-tertiary-active);
+    }
   }
   &.warn {
     background-color: var(--joy-button-warn);
+    &:hover {
+      background-color: var(--joy-button-warn-hover);
+    }
+    &:active {
+      background-color: var(--joy-button-warn);
+    }
   }
   &.danger {
     background-color: var(--joy-button-warn);