DEV: Update linting config and run gjs-codemod (#53)

Author: CvX

.discourse-compatibility

@@ -1,3 +1,4 @@
+< 3.5.0.beta5-dev: 02c3e4ad4962fc224a5496211444ee72b2384e8a
 < 3.5.0.beta1-dev: 21a87052efc621c728a6aba596a6c437675d8574
 < 3.4.0.beta2-dev: fe80ffbca41027dc1262881bef3eade511d05d3f
 < 3.4.0.beta1-dev: 8520420d6154d47be11c7667a502e60cdc3d375b

Gemfile.lock

@@ -14,42 +14,44 @@ GEM
       securerandom (>= 0.3)
       tzinfo (~> 2.0, >= 2.0.5)
       uri (>= 0.13.1)
-    ast (2.4.2)
-    base64 (0.2.0)
-    benchmark (0.4.0)
-    bigdecimal (3.1.9)
+    ast (2.4.3)
+    base64 (0.3.0)
+    benchmark (0.4.1)
+    bigdecimal (3.2.2)
     concurrent-ruby (1.3.5)
-    connection_pool (2.5.0)
-    drb (2.2.1)
+    connection_pool (2.5.3)
+    drb (2.2.3)
     i18n (1.14.7)
       concurrent-ruby (~> 1.0)
-    json (2.10.2)
-    language_server-protocol (3.17.0.4)
+    json (2.12.2)
+    language_server-protocol (3.17.0.5)
     lint_roller (1.1.0)
-    logger (1.6.6)
+    logger (1.7.0)
     minitest (5.25.5)
-    parallel (1.26.3)
-    parser (3.3.7.1)
+    parallel (1.27.0)
+    parser (3.3.8.0)
       ast (~> 2.4.1)
       racc
     prettier_print (1.2.1)
+    prism (1.4.0)
     racc (1.8.1)
-    rack (3.1.12)
+    rack (3.1.15)
     rainbow (3.1.1)
     regexp_parser (2.10.0)
-    rubocop (1.74.0)
+    rubocop (1.76.0)
       json (~> 2.3)
       language_server-protocol (~> 3.17.0.2)
       lint_roller (~> 1.1.0)
       parallel (~> 1.10)
       parser (>= 3.3.0.2)
       rainbow (>= 2.2.2, < 4.0)
       regexp_parser (>= 2.9.3, < 3.0)
-      rubocop-ast (>= 1.38.0, < 2.0)
+      rubocop-ast (>= 1.45.0, < 2.0)
       ruby-progressbar (~> 1.7)
       unicode-display_width (>= 2.4.0, < 4.0)
-    rubocop-ast (1.39.0)
-      parser (>= 3.3.1.0)
+    rubocop-ast (1.45.0)
+      parser (>= 3.3.7.2)
+      prism (~> 1.4)
     rubocop-capybara (2.22.1)
       lint_roller (~> 1.1)
       rubocop (~> 1.72, >= 1.72.1)
@@ -65,13 +67,13 @@ GEM
     rubocop-factory_bot (2.27.1)
       lint_roller (~> 1.1)
       rubocop (~> 1.72, >= 1.72.1)
-    rubocop-rails (2.30.3)
+    rubocop-rails (2.32.0)
       activesupport (>= 4.2.0)
       lint_roller (~> 1.1)
       rack (>= 1.1)
-      rubocop (>= 1.72.1, < 2.0)
-      rubocop-ast (>= 1.38.0, < 2.0)
-    rubocop-rspec (3.5.0)
+      rubocop (>= 1.75.0, < 2.0)
+      rubocop-ast (>= 1.44.0, < 2.0)
+    rubocop-rspec (3.6.0)
       lint_roller (~> 1.1)
       rubocop (~> 1.72, >= 1.72.1)
     rubocop-rspec_rails (2.31.0)
@@ -98,4 +100,4 @@ DEPENDENCIES
   syntax_tree
 
 BUNDLED WITH
-   2.6.6
+   2.6.9

common/common.scss

@@ -260,7 +260,7 @@
   }
 }
 
-@media screen and (max-width: 736px) {
+@media screen and (width <= 736px) {
   // Wrap columns
   .banner-box .row {
     display: block;

javascripts/discourse/components/versatile-banner-column.gjs

@@ -0,0 +1,31 @@
+import Component from "@glimmer/component";
+import { or } from "truth-helpers";
+import icon from "discourse/helpers/d-icon";
+import htmlSafe from "discourse/helpers/html-safe";
+
+export default class VersatileBannerColumn extends Component {
+  get isHttpLink() {
+    return this.args.icon.startsWith("http");
+  }
+
+  <template>
+    {{#if (or @icon @columnContent)}}
+      <div class="{{@columnClass}} single-box">
+        {{#if @icon}}
+          <div class="icon">
+            {{#if this.isHttpLink}}
+              <img class="responsive-img" src={{@icon}} alt="Icon" />
+            {{else}}
+              {{icon @icon}}
+            {{/if}}
+          </div>
+        {{/if}}
+        {{#if @columnContent}}
+          <div>
+            {{htmlSafe @columnContent}}
+          </div>
+        {{/if}}
+      </div>
+    {{/if}}
+  </template>
+}

javascripts/discourse/components/versatile-banner-column.hbs

@@ -2,10 +2,14 @@ import Component from "@glimmer/component";
 import { tracked } from "@glimmer/tracking";
 import { action } from "@ember/object";
 import { service } from "@ember/service";
+import { and } from "truth-helpers";
+import DButton from "discourse/components/d-button";
+import htmlSafe from "discourse/helpers/html-safe";
 import cookie, { removeCookie } from "discourse/lib/cookie";
 import { convertIconClass } from "discourse/lib/icon-library";
 import { defaultHomepage } from "discourse/lib/utilities";
 import { i18n } from "discourse-i18n";
+import VersatileBannerColumn from "./versatile-banner-column";
 
 export default class VersatileBanner extends Component {
   @service router;
@@ -134,4 +138,55 @@ export default class VersatileBanner extends Component {
       path: "/",
     });
   }
+
+  <template>
+    {{#if this.shouldShow}}
+      {{#unless this.bannerClosed}}
+        <div class="banner-box">
+          <div class="container">
+            <div class="button-container">
+              {{#if settings.dismissible}}
+                <DButton
+                  @action={{this.closeBanner}}
+                  @translatedLabel={{i18n (themePrefix "close.label")}}
+                  @translatedTitle={{i18n (themePrefix "close.title")}}
+                  @icon="xmark"
+                  class="close"
+                />
+              {{/if}}
+              {{#if settings.collapsible}}
+                <DButton
+                  @action={{this.toggleBanner}}
+                  @translatedLabel={{this.toggleLabel}}
+                  @translatedTitle={{i18n (themePrefix "toggle.title")}}
+                  @icon={{this.toggleIcon}}
+                  class="toggle"
+                />
+              {{/if}}
+            </div>
+            <div class="section-header">
+              {{htmlSafe settings.main_heading_content}}
+            </div>
+            <div
+              id="banner-content_wrap"
+              class={{if
+                (and settings.collapsible this.bannerCollapsed)
+                "--banner-collapsed"
+              }}
+            >
+              <div class="row">
+                {{#each this.columnData as |data|}}
+                  <VersatileBannerColumn
+                    @columnContent={{data.content}}
+                    @icon={{data.icon}}
+                    @columnClass={{data.class}}
+                  />
+                {{/each}}
+              </div>
+            </div>
+          </div>
+        </div>
+      {{/unless}}
+    {{/if}}
+  </template>
 }

javascripts/discourse/components/versatile-banner-column.js

@@ -4,7 +4,7 @@ export default function migrate(settings) {
     "second_column_icon",
     "third_column_icon",
     "fourth_column_icon",
-  ]
+  ];
 
   settingNames.forEach((settingName) => {
     const oldSetting = settings.get(settingName);

javascripts/discourse/components/versatile-banner.js renamed to javascripts/discourse/components/versatile-banner.gjs

@@ -1,11 +1,11 @@
 {
   "private": true,
   "devDependencies": {
-    "@discourse/lint-configs": "2.11.1",
-    "ember-template-lint": "7.0.1",
-    "eslint": "9.22.0",
+    "@discourse/lint-configs": "2.25.0",
+    "ember-template-lint": "7.8.1",
+    "eslint": "9.28.0",
     "prettier": "3.5.3",
-    "stylelint": "16.16.0"
+    "stylelint": "16.20.0"
   },
   "engines": {
     "node": ">= 22",