From 6872e91b43b5f7582ce5ce727c2af8c7627a3440 Mon Sep 17 00:00:00 2001 From: Julio Lucero Date: Thu, 30 Oct 2025 09:48:45 -0300 Subject: [PATCH] Use FastRuby Styleguide --- Gemfile | 3 + Gemfile.lock | 111 ++++++++++- app/assets/config/manifest.js | 6 + .../{application.css => application.scss} | 182 ++++++++++++------ app/views/layouts/application.html.erb | 2 +- app/views/puzzles/login.html.erb | 50 ++++- config/initializers/assets.rb | 21 +- 7 files changed, 296 insertions(+), 79 deletions(-) create mode 100644 app/assets/config/manifest.js rename app/assets/stylesheets/{application.css => application.scss} (56%) diff --git a/Gemfile b/Gemfile index 3e11698..7c43405 100644 --- a/Gemfile +++ b/Gemfile @@ -8,6 +8,7 @@ gem "discordrb" gem "dotenv-rails" gem "propshaft" +gem "dartsass-rails" # Use postgresql as the database for Active Record gem "pg", "~> 1.5.9" # Use the Puma web server [https://github.com/puma/puma] @@ -47,6 +48,8 @@ gem "thruster", require: false gem "slack-ruby-block-kit", ">= 0.24.0" gem "slack-ruby-client", ">= 2.4.0" +gem "fastruby-styleguide", github: "fastruby/styleguide", branch: "gh-pages" + # auth gems gem "omniauth" gem "omniauth-google-oauth2" diff --git a/Gemfile.lock b/Gemfile.lock index f59e60e..75dcf1f 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -1,3 +1,16 @@ +GIT + remote: https://github.com/fastruby/styleguide.git + revision: 72e40c19980e37acaccb741dc1a8a47e3242cba3 + branch: gh-pages + specs: + fastruby-styleguide (0.1.0) + bootstrap-sass (>= 3.4.0) + jquery-rails (>= 4.3.0) + material_design_lite-sass (>= 1.3.0) + popper_js (>= 1.14.5) + rails (>= 5.2.1) + sass-rails (>= 5.0) + GEM remote: https://rubygems.org/ specs: @@ -75,6 +88,8 @@ GEM addressable (2.8.7) public_suffix (>= 2.0.2, < 7.0) ast (2.4.2) + autoprefixer-rails (10.4.21.0) + execjs (~> 2) base64 (0.3.0) bcrypt_pbkdf (1.1.1) bcrypt_pbkdf (1.1.1-arm64-darwin) @@ -83,6 +98,9 @@ GEM bindex (0.8.1) bootsnap (1.18.6) msgpack (~> 1.2) + bootstrap-sass (3.4.1) + autoprefixer-rails (>= 5.2.1) + sassc (>= 2.0.0) brakeman (7.1.0) racc builder (3.3.0) @@ -98,6 +116,9 @@ GEM concurrent-ruby (1.3.5) connection_pool (2.5.3) crass (1.0.6) + dartsass-rails (0.5.1) + railties (>= 6.0.0) + sass-embedded (~> 1.63) date (3.4.1) debug (1.11.0) irb (~> 1.10) @@ -122,6 +143,7 @@ GEM et-orbi (1.2.11) tzinfo event_emitter (0.2.6) + execjs (2.10.0) faraday (2.13.1) faraday-net_http (>= 2.0, < 3.5) json @@ -147,6 +169,24 @@ GEM ostruct globalid (1.2.1) activesupport (>= 6.1) + google-protobuf (4.33.0) + bigdecimal + rake (>= 13) + google-protobuf (4.33.0-aarch64-linux-gnu) + bigdecimal + rake (>= 13) + google-protobuf (4.33.0-aarch64-linux-musl) + bigdecimal + rake (>= 13) + google-protobuf (4.33.0-arm64-darwin) + bigdecimal + rake (>= 13) + google-protobuf (4.33.0-x86_64-linux-gnu) + bigdecimal + rake (>= 13) + google-protobuf (4.33.0-x86_64-linux-musl) + bigdecimal + rake (>= 13) hashie (5.0.0) http-accept (1.7.0) http-cookie (1.0.8) @@ -165,6 +205,10 @@ GEM jbuilder (2.13.0) actionview (>= 5.0.0) activesupport (>= 5.0.0) + jquery-rails (4.6.1) + rails-dom-testing (>= 1, < 3) + railties (>= 4.2.0) + thor (>= 0.14, < 2.0) json (2.10.2) jwt (2.10.1) base64 @@ -191,6 +235,9 @@ GEM net-pop net-smtp marcel (1.0.4) + material_design_lite-sass (1.3.0.1) + autoprefixer-rails (>= 6.5) + sass (>= 3.3) matrix (0.4.2) mime-types (3.6.0) logger @@ -243,8 +290,9 @@ GEM rack (>= 1.2, < 4) snaky_hash (~> 2.0, >= 2.0.3) version_gem (>= 1.1.8, < 3) - omniauth (2.1.3) + omniauth (2.1.4) hashie (>= 3.4.6) + logger rack (>= 2.2.3) rack-protection omniauth-google-oauth2 (1.2.1) @@ -263,6 +311,7 @@ GEM ast (~> 2.4.1) racc pg (1.5.9) + popper_js (2.11.8) pp (0.6.2) prettyprint prettyprint (0.2.0) @@ -279,18 +328,17 @@ GEM nio4r (~> 2.0) raabro (1.4.0) racc (1.8.1) - rack (3.1.15) - rack-protection (4.1.1) - base64 (>= 0.1.0) - logger (>= 1.6.0) - rack (>= 3.0.0, < 4) - rack-session (2.1.1) + rack (2.2.20) + rack-protection (3.2.0) base64 (>= 0.1.0) - rack (>= 3.0.0) + rack (~> 2.2, >= 2.2.4) + rack-session (1.0.2) + rack (< 3) rack-test (2.2.0) rack (>= 1.3) - rackup (2.2.1) - rack (>= 3) + rackup (1.0.1) + rack (< 3) + webrick rails (8.0.2) actioncable (= 8.0.2) actionmailbox (= 8.0.2) @@ -322,6 +370,9 @@ GEM zeitwerk (~> 2.6) rainbow (3.1.1) rake (13.3.0) + rb-fsevent (0.11.2) + rb-inotify (0.11.1) + ffi (~> 1.0) rdoc (6.14.1) erb psych (>= 4.0.0) @@ -367,6 +418,35 @@ GEM rubyzip (2.4.1) rufus-scheduler (3.9.2) fugit (~> 1.1, >= 1.11.1) + sass (3.7.4) + sass-listen (~> 4.0.0) + sass-embedded (1.93.2-aarch64-linux-gnu) + google-protobuf (~> 4.31) + sass-embedded (1.93.2-aarch64-linux-musl) + google-protobuf (~> 4.31) + sass-embedded (1.93.2-arm-linux-gnueabihf) + google-protobuf (~> 4.31) + sass-embedded (1.93.2-arm-linux-musleabihf) + google-protobuf (~> 4.31) + sass-embedded (1.93.2-arm64-darwin) + google-protobuf (~> 4.31) + sass-embedded (1.93.2-x86_64-linux-gnu) + google-protobuf (~> 4.31) + sass-embedded (1.93.2-x86_64-linux-musl) + google-protobuf (~> 4.31) + sass-listen (4.0.0) + rb-fsevent (~> 0.9, >= 0.9.4) + rb-inotify (~> 0.9, >= 0.9.7) + sass-rails (6.0.0) + sassc-rails (~> 2.1, >= 2.1.1) + sassc (2.4.0) + ffi (~> 1.9) + sassc-rails (2.1.2) + railties (>= 4.0.0) + sassc (>= 2.0) + sprockets (> 3.0) + sprockets-rails + tilt securerandom (0.4.1) selenium-webdriver (4.33.0) base64 (~> 0.2) @@ -418,6 +498,14 @@ GEM fugit (~> 1.11.0) railties (>= 7.1) thor (~> 1.3.1) + sprockets (4.2.2) + concurrent-ruby (~> 1.0) + logger + rack (>= 2.2.4, < 4) + sprockets-rails (3.5.2) + actionpack (>= 6.1) + activesupport (>= 6.1) + sprockets (>= 3.0.0) sshkit (1.24.0) base64 logger @@ -451,6 +539,7 @@ GEM activemodel (>= 6.0.0) bindex (>= 0.4.0) railties (>= 6.0.0) + webrick (1.9.1) websocket (1.2.11) websocket-client-simple (0.9.0) base64 @@ -481,9 +570,11 @@ DEPENDENCIES bootsnap brakeman capybara + dartsass-rails debug discordrb dotenv-rails + fastruby-styleguide! importmap-rails jbuilder kamal diff --git a/app/assets/config/manifest.js b/app/assets/config/manifest.js new file mode 100644 index 0000000..0c07021 --- /dev/null +++ b/app/assets/config/manifest.js @@ -0,0 +1,6 @@ +// This file is required by Sprockets (pulled in by styleguide gem dependencies) +// Propshaft actually serves the assets, this manifest is just to prevent Sprockets errors +// JavaScript is handled by importmap, not the asset pipeline +//= link_tree ../images +//= link application.css + diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.scss similarity index 56% rename from app/assets/stylesheets/application.css rename to app/assets/stylesheets/application.scss index 3913646..b2fa9f0 100644 --- a/app/assets/stylesheets/application.css +++ b/app/assets/stylesheets/application.scss @@ -1,33 +1,97 @@ -/* - * This is a manifest file that'll be compiled into application.css. - * - * With Propshaft, assets are served efficiently without preprocessing steps. You can still include - * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard - * cascading order, meaning styles declared later in the document or manifest will override earlier ones, - * depending on specificity. - * - * Consider organizing styles into separate files for maintainability. - */ - -/* General styles */ -body { - font-family: 'Open Sans', sans-serif; - padding: 20px; -} +// Import FastRuby styleguide +@import "fastruby/styleguide"; + +// Custom application styles +// Only keep styles that are specific to this application and not covered by the styleguide body.login { + color: #333; + margin: 150px auto; + min-height: 100vh; display: flex; - justify-content: center; + flex-direction: column; align-items: center; - height: 100vh; - margin: 0; + justify-content: flex-start; + max-width: 800px; } + +.how-to-play-container, .intro-text { + margin: 40px auto 32px auto; + width: 100%; + text-align: center; + padding: 0 30px; +} + +.how-to-play-container { + min-height: 400px; +} + +.login-bottom-row { + display: flex; + flex-direction: row; + justify-content: center; + align-items: flex-start; + gap: 32px; + margin-bottom: 40px; + padding-bottom: 40px; +} + +/* Stack vertically on small screens */ +@media (max-width: 640px) { + .login-bottom-row { + flex-direction: column; + align-items: stretch; + gap: 20px; + } +} + +.login-box { + min-width: 260px; + max-width: 340px; + flex: 1 1 0; +} + +@media (max-width: 640px) { + .login-box { + min-width: 100%; + } + /* Override the base container height only inside login boxes on small screens */ + .login-box .container { + min-height: 172px; + } +} + .container { text-align: center; padding: 20px; border: 2px solid #FFD633; border-radius: 5px; max-width: 400px; + min-height: 204px; +} + +.game-details { + margin-top: 24px; + text-align: left; +} + +.game-details h3 { + margin-bottom: 12px; +} + +.game-details ul { + margin: 0 0 16px; + padding-left: 20px; + list-style: disc; +} + +.game-details a { + color: #FF8C00; + font-weight: 600; +} + +.game-details a:hover { + text-decoration: underline; } .logout-container { @@ -35,6 +99,11 @@ body.login { margin-bottom: 20px; } +.inline-form { + display: inline; +} + +/* Tables */ table { border-collapse: collapse; width: 100%; @@ -47,41 +116,8 @@ th, td { th { background-color: #f2f2f2; } -.inline-form { - display: inline; -} - -/* Reusable button base style */ -.btn { - display: inline-block; - padding: 8px 16px; - background-color: #FFC000; - color: black; - text-decoration: none; - border-radius: 4px; - border: none; - cursor: pointer; -} - -.btn:hover { - background-color: #FFD633; -} -/* Specific button variants */ -.approve-btn { - background-color: #4CAF50; -} - -.reject-btn, .close-btn { - background-color: #f44336; -} - -.pending-btn, .edit-btn { - background-color: yellow; - color: black; -} - -/* Banner styles */ +/* Banner styles - using styleguide colors where possible */ .banner { position: fixed; top: 0; @@ -111,21 +147,20 @@ th { color: #856404; } -/* full screen overlay */ +/* Modal styles */ .modal-overlay { position: fixed; - top: 0; - left: 0; + top: 0; + left: 0; width: 100vw; height: 100vh; - background-color: rgba(0, 0, 0, 0.5); /* semi-transparent black */ + background-color: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: 9999; } -/* modal content box */ .modal-content { background-color: white; padding: 1.5rem; @@ -141,12 +176,13 @@ th { margin-bottom: 1rem; } -/* Horizontal radio buttons for puzzle answer */ +/* Form styles */ .answer-radio-group { display: flex; gap: 1.5em; align-items: center; } + .answer-radio-group label { display: flex; align-items: center; @@ -166,4 +202,32 @@ input.error, textarea.error { box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25); } +/* Buttons */ +.btn { + font-size: 0.75rem; + display: inline-block; + padding: 8px 16px; + background-color: #FFC000; + color: black; + text-decoration: none; + border-radius: 4px; + border: none; + cursor: pointer; +} + +.btn:hover { + background-color: #FFD633; +} +.approve-btn { + background-color: #4CAF50; +} + +.reject-btn, .close-btn { + background-color: #f44336; +} + +.pending-btn, .edit-btn { + background-color: yellow; + color: black; +} diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index 3af3fed..57eb0e8 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -14,7 +14,7 @@ <%#= tag.link rel: "manifest", href: pwa_manifest_path(format: :json) %> <%# Includes all stylesheet files in app/assets/stylesheets %> - <%= stylesheet_link_tag :app, "data-turbo-track": "reload" %> + <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %> <%= javascript_importmap_tags %> <% if Rails.env.production? %> <%= Sentry.get_trace_propagation_meta.html_safe %> diff --git a/app/views/puzzles/login.html.erb b/app/views/puzzles/login.html.erb index 899a660..ad1cbbd 100644 --- a/app/views/puzzles/login.html.erb +++ b/app/views/puzzles/login.html.erb @@ -1,11 +1,51 @@ <% @title = "Ruby or Rails Login" %> -
-

Log In

-
-

Log in to access the Ruby or Rails admin panel.

- Login with Google +

It is Ruby or Rails Discord Puzzle

+ +
+

Have you ever wondered whether something is Ruby or Rails? We have. A lot.

+

+ Is It Ruby or Rails? is a game to test your Ruby knowledge brought to you by FastRuby.io. +

+
+ +
+
+

How to Play

+

+ Every day, a new puzzle is sent to a defined channel, and members get to answer the "Ruby or Rails?" question. At the end of each week, we'll share a leaderboard so you know who's the Ruby master of the week! +

+

Each puzzle shows a Ruby-related code snippet or method.

+

Decide whether it comes from core Ruby or from Rails.

+

Review the explanation to sharpen your understanding and share the fun.

+
+
+ + diff --git a/config/initializers/assets.rb b/config/initializers/assets.rb index 4873244..41b79d9 100644 --- a/config/initializers/assets.rb +++ b/config/initializers/assets.rb @@ -1,7 +1,20 @@ # Be sure to restart your server when you modify this file. -# Version of your assets, change this if you want to expire all your assets. -Rails.application.config.assets.version = "1.0" +# Propshaft handles CSS/images automatically - no configuration needed here +# JavaScript is handled by importmap, not the asset pipeline -# Add additional assets to the asset load path. -# Rails.application.config.assets.paths << Emoji.images_path +# Prevent Sprockets from complaining about JavaScript files in production +# (they're handled by importmap, not the asset pipeline) +if defined?(Sprockets) && + Rails.application.config.respond_to?(:assets) && + Rails.application.config.assets.respond_to?(:precompile) + # Add all JavaScript files that importmap might reference + # These are placeholders so Sprockets is satisfied; importmap serves them + Rails.application.config.assets.precompile += %w[ + application.js + controllers/application.js + controllers/hello_controller.js + controllers/index.js + controllers/modal_controller.js + ] +end