Wip/new to nl 2 (#658)

Changes made as part of the Wayfinder Project in partnership with
Collective Interchange.

https://github.com/collective-interchange-coop/new-to-nl

# Summary: Wayfinder Enhancements and Fixes

This pull request introduces a comprehensive set of updates,
optimizations, and new features for the **Wayfinder Project** in
partnership with **Collective Interchange**. The changes include
enhancements to navigation, content blocks, caching, localization, and
accessibility, as well as various bug fixes and performance
improvements.

---

## Key Changes:

### 1. Navigation Improvements:
- Improved sidebar and top navigation usability and performance.
- Optimized SQL queries for navigation rendering, reducing database load
times.
- Cached sidebar, header, and footer navigation items for enhanced
performance.
- Enhanced dropdown menu styling and active state behavior.
- Added scroll indicators to large hero blocks for better user
experience.

### 2. Content Block Enhancements:
- Introduced new content block types, including hero blocks and
translatable HTML blocks.
- Improved background image support with optimized rendering and
caching.
- Added a customizable CSS content block for platform-wide theming.
- Enhanced page builder functionality with independent CRUD operations
for blocks.

### 3. Caching and Performance Optimization:
- Cached frequently accessed data such as navigation items, blocks, and
permissions.
- Preloaded associations to improve rendering times for navigation and
profile pages.
- Introduced instance-level caching for roles and CSS blocks.
- Drastically improved load times for navigation and page blocks through
caching.

### 4. Localization and Translation:
- Completed Spanish and French translations for key views and features.
- Added automated translation tasks using OpenAI API for translatable
attributes.
- Ensured consistent capitalization and localization of translated
attributes.
- Scoped routes and dispatch helpers to respect locale settings.

### 5. Notifications and Messaging:
- Added the `noticed` gem for in-app notifications.
- Introduced initial versions of messaging and conversations
functionality.
- Enhanced notification management actions and UI.

### 6. Metrics and Analytics:
- Added tracking for page views, link clicks, and downloads.
- Implemented background jobs to process social share and metrics data.
- Excluded bot user agents and specific links (e.g., Trix editor links)
from tracking.

### 7. Accessibility and UI Enhancements:
- Improved accessibility for navigation, forms, and buttons.
- Enhanced profile images and social share button layout.
- Added password visibility toggles to login forms.
- Improved structure and spacing of UI elements for a more user-friendly
experience.

### 8. Bug Fixes:
- Resolved issues with navigation item visibility checks and link
generation.
- Fixed problems with route generation in localized contexts.
- Addressed caching issues for user navigation and content rendering.

---

## Technical Improvements:
- Added default profile images for people and communities.
- Enhanced performance profiling tools for platform managers.
- Resolved Rubocop and Brakeman warnings for code quality and security.
- Simplified Stimulus controller handling under the `better_together`
namespace.

---

## Future Considerations:
This PR establishes a solid foundation for upcoming features, including:
- Expanded page builder capabilities with additional block types.
- Improved metrics tracking and analytics reporting.
- Further enhancements to automated translation for rich text
attributes.

---

Author: rsmithlal

.github/workflows/rubyonrails.yml

@@ -9,7 +9,7 @@ on:
   push:
     branches: [ "main" ]
   pull_request:
-    branches: [ "main" ]
+    branches: [ "main", "wip/new-to-nl-2" ]
 jobs:
   rspec:
     runs-on: ubuntu-latest

Gemfile

@@ -76,6 +76,8 @@ group :development do
   gem 'bundler-audit', require: false
   # Facilitate I18n translation management
   gem 'i18n_generators'
+
+  gem 'easy_translate'
   # Listen for file system changes
   gem 'listen', '>= 3.0.5', '< 3.10'
   # Rack mini profiler for performance profiling

Gemfile.lock

@@ -20,6 +20,7 @@ PATH
   remote: .
   specs:
     better_together (0.6.0)
+      active_storage_svg_sanitizer
       active_storage_validations
       activerecord-import
       activerecord-postgis-adapter
@@ -33,21 +34,26 @@ PATH
       font-awesome-sass (~> 6.5)
       friendly_id (>= 5.2, < 5.6)
       friendly_id-mobility (~> 1.0.4)
+      groupdate
       i18n-timezones
       image_processing (~> 1.2)
       importmap-rails (~> 2.0)
       jsonapi-resources (>= 0.10.0)
+      memory_profiler
       mobility (>= 1.0.1, < 2.0)
       mobility-actiontext (~> 1.1)
       noticed
       premailer-rails
       pundit (>= 2.1, < 2.5)
       pundit-resources
       rack-cors (>= 1.1.1, < 2.1.0)
+      rack-mini-profiler
       rails (>= 5.2.2, < 7.2.0)
       reform-rails (~> 0.2.0)
       rswag (>= 2.3.1, < 2.17.0)
+      ruby-openai
       sprockets-rails
+      stackprof
       stimulus-rails (~> 1.3)
       storext
       translate_enum
@@ -105,6 +111,8 @@ GEM
       erubi (~> 1.11)
       rails-dom-testing (~> 2.2)
       rails-html-sanitizer (~> 1.6)
+    active_storage_svg_sanitizer (0.1.0)
+      rails (>= 5.2)
     active_storage_validations (1.4.0)
       activejob (>= 6.1.4)
       activemodel (>= 6.1.4)
@@ -218,7 +226,7 @@ GEM
       thor (~> 1.2)
       tins (~> 1.32)
     crass (1.0.6)
-    css_parser (1.19.0)
+    css_parser (1.21.0)
       addressable
     dartsass-sprockets (3.2.0)
       railties (>= 4.0.0)
@@ -254,15 +262,19 @@ GEM
       representable (>= 3.1.1, < 4)
     docile (1.4.0)
     drb (2.2.1)
-    dry-auto_inject (1.0.1)
-      dry-core (~> 1.0)
+    dry-auto_inject (1.1.0)
+      dry-core (~> 1.1)
       zeitwerk (~> 2.6)
-    dry-configurable (1.2.0)
-      dry-core (~> 1.0, < 2)
+    dry-configurable (1.3.0)
+      dry-core (~> 1.1)
       zeitwerk (~> 2.6)
-    dry-core (1.0.1)
+    dry-core (1.1.0)
       concurrent-ruby (~> 1.0)
+      logger
       zeitwerk (~> 2.6)
+    easy_translate (0.5.1)
+      thread
+      thread_safe
     elasticsearch (7.17.11)
       elasticsearch-api (= 7.17.11)
       elasticsearch-transport (= 7.17.11)
@@ -278,20 +290,24 @@ GEM
       faraday (>= 1, < 3)
       multi_json
     erubi (1.13.1)
+    event_stream_parser (1.0.0)
     excon (1.2.3)
-    execjs (2.9.1)
+    execjs (2.10.0)
     factory_bot (6.5.0)
       activesupport (>= 5.0.0)
     factory_bot_rails (6.4.4)
       factory_bot (~> 6.5)
       railties (>= 5.0.0)
     faker (3.5.1)
       i18n (>= 1.8.11, < 2)
-    faraday (2.11.0)
-      faraday-net_http (>= 2.0, < 3.4)
+    faraday (2.12.2)
+      faraday-net_http (>= 2.0, < 3.5)
+      json
       logger
-    faraday-net_http (3.3.0)
-      net-http
+    faraday-multipart (1.1.0)
+      multipart-post (~> 2.0)
+    faraday-net_http (3.4.0)
+      net-http (>= 0.5.0)
     ffi (1.17.1-x86_64-linux-gnu)
     fog-aws (3.30.0)
       base64 (~> 0.2.0)
@@ -325,6 +341,8 @@ GEM
     google-protobuf (4.29.3-x86_64-linux)
       bigdecimal
       rake (>= 13)
+    groupdate (6.5.1)
+      activesupport (>= 7)
     hashie (5.0.0)
     highline (3.1.0)
       reline
@@ -362,13 +380,14 @@ GEM
       reline (>= 0.4.2)
     jmespath (1.6.2)
     json (2.10.1)
-    json-schema (5.1.0)
+    json-schema (5.1.1)
       addressable (~> 2.8)
+      bigdecimal (~> 3.1)
     jsonapi-resources (0.10.7)
       activerecord (>= 4.1)
       concurrent-ruby
       railties (>= 4.1)
-    jwt (2.8.2)
+    jwt (2.10.1)
       base64
     language_server-protocol (3.17.0.4)
     lint_roller (1.1.0)
@@ -386,6 +405,7 @@ GEM
       net-smtp
     marcel (1.0.4)
     matrix (0.4.2)
+    memory_profiler (1.1.0)
     method_source (1.1.0)
     mime-types (3.6.0)
       logger
@@ -404,8 +424,9 @@ GEM
       mobility (~> 1.2)
     msgpack (1.7.2)
     multi_json (1.15.0)
+    multipart-post (2.4.1)
     mutex_m (0.3.0)
-    net-http (0.4.1)
+    net-http (0.6.0)
       uri
     net-imap (0.5.6)
       date
@@ -593,6 +614,10 @@ GEM
     rubocop-rspec (3.5.0)
       lint_roller (~> 1.1)
       rubocop (~> 1.72, >= 1.72.1)
+    ruby-openai (7.3.1)
+      event_stream_parser (>= 0.3.0, < 2.0.0)
+      faraday (>= 1)
+      faraday-multipart (>= 1)
     ruby-progressbar (1.13.0)
     ruby-vips (2.2.3)
       ffi (~> 1.12)
@@ -654,6 +679,7 @@ GEM
     terminal-table (3.0.2)
       unicode-display_width (>= 1.1.1, < 3)
     thor (1.3.2)
+    thread (0.2.2)
     thread_safe (0.3.6)
     tilt (2.6.0)
     timeout (0.4.3)
@@ -673,14 +699,14 @@ GEM
       execjs (>= 0.3.0, < 3)
     unf (0.2.0)
     unicode-display_width (2.6.0)
-    uri (0.13.1)
+    uri (1.0.2)
     virtus (2.0.0)
       axiom-types (~> 0.1)
       coercible (~> 1.0)
       descendants_tracker (~> 0.0, >= 0.0.3)
     warden (1.2.9)
       rack (>= 2.0.9)
-    warden-jwt_auth (0.10.0)
+    warden-jwt_auth (0.11.0)
       dry-auto_inject (>= 0.8, < 2)
       dry-configurable (>= 0.13, < 2)
       jwt (~> 2.1)
@@ -721,6 +747,7 @@ DEPENDENCIES
   coveralls_reborn
   database_cleaner
   database_cleaner-active_record
+  easy_translate
   factory_bot_rails
   faker
   fog-aws

app/assets/images/cover_images/default_cover_image_community.jpg

@@ -10,40 +10,52 @@
  * files in this directory. Styles in this file should be added after the last require_* statement.
  * It is generally better to create a new file per style scope.
  *
- *= require_tree .
  *= require_self
  */
 
- @import 'bootstrap';
- @import 'font-awesome';
+@import 'theme';
 
- /* Default text color for light mode */
- .text-opposite-theme {
-  color: #333; /* dark text on light background */
+// Import Bootstrap and Font Awesome
+
+@import 'bootstrap';
+@import 'font-awesome';
+@import 'actiontext';
+@import 'contact_details';
+@import 'content_blocks';
+@import 'conversations';
+@import 'forms';
+@import 'metrics';
+@import 'navigation';
+@import 'notifications';
+@import 'profiles';
+@import 'share';
+@import 'sidebar_nav';
+@import 'trix-extensions/richtext';
+
+// Styles that use the variables
+.text-opposite-theme {
+  color: $text-opposite-theme-color; /* Use the defined variable */
 }
 
-/* When the user's system preference is dark mode, adjust text color */
 @media (prefers-color-scheme: dark) {
   .text-opposite-theme {
-    color: #f8f9fa; /* light text on dark background */
+    color: $dark-text-color;
   }
 }
 
-/* Similarly, if the background is meant to be dark, you can set text to be light and vice versa */
-/* Default background color for light mode with dark text */
 .background-opposite-theme {
-  background-color: #fff;
-  color: #333;
+  background-color: $background-opposite-theme-color;
+  color: $text-opposite-theme-color;
 }
 
-/* When the user's system preference is dark mode, adjust background and text color */
 @media (prefers-color-scheme: dark) {
   .background-opposite-theme {
-    background-color: #212529;
-    color: #f8f9fa;
+    background-color: $dark-background-color;
+    color: $dark-text-color;
   }
 }
 
+
 .highlight-translation-missing span.translation_missing {
   background: #e1b1ed;
 }
@@ -56,3 +68,31 @@
 #flash_messages {
   position: relative;
 }
+
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh; /* Ensure the wrapper takes full height */
+}
+
+.content {
+  flex: 1; /* Allow the main content to grow and take up remaining space */
+  position: relative;
+}
+
+@keyframes flip {
+  0% {
+    transform: rotateY(0deg);
+  }
+  50% {
+    transform: rotateY(180deg);
+  }
+  100% {
+    transform: rotateY(360deg);
+  }
+}
+
+.spin-horizontal {
+  animation: flip 1s linear infinite;
+}
+