DEV: Update linting config and run gjs-codemod

Author: CvX

.discourse-compatibility

@@ -1,3 +1,4 @@
+< 3.5.0.beta5-dev: 0d4a895d8913a3f55e68667255be9ad3a869eb56
 < 3.5.0.beta1-dev: d94b28fa2482ac71351f3ab4885862100e310680
 < 3.4.0.beta1-dev: b0370f7b7eb7feffc7a6ae9bdf5b0f4597763d8e
 < 3.3.0.beta1-dev: 38e6cf2dd7bb16d56594eb406d8880709101e131

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.1)
     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.75.8)
       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.44.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.44.1)
+      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

@@ -10,7 +10,7 @@ html.homepage-featured-topics {
   border-bottom: 1px solid var(--primary-low);
   position: relative;
 
-  @media screen and (max-width: 450px) {
+  @media screen and (width <= 450px) {
     margin-top: 1em;
   }
 
@@ -22,7 +22,7 @@ html.homepage-featured-topics {
     margin-left: auto;
     margin-right: auto;
 
-    @media screen and (max-width: 450px) {
+    @media screen and (width <= 450px) {
       top: 70px;
     }
   }
@@ -46,7 +46,7 @@ html.homepage-featured-topics {
       align-items: center;
       justify-content: center;
 
-      @media screen and (min-width: 451px) {
+      @media screen and (width >= 451px) {
         margin: 0 1.25em;
 
         &:first-of-type:not(:last-of-type) {
@@ -58,7 +58,7 @@ html.homepage-featured-topics {
         }
       }
 
-      @media screen and (max-width: 999px) {
+      @media screen and (width <= 999px) {
         &:nth-of-type(4) {
           margin-right: 0;
         }
@@ -68,7 +68,7 @@ html.homepage-featured-topics {
         }
       }
 
-      @media screen and (max-width: 800px) {
+      @media screen and (width <= 800px) {
         &:nth-of-type(3) {
           margin-right: 0;
         }
@@ -78,7 +78,7 @@ html.homepage-featured-topics {
         }
       }
 
-      @media screen and (max-width: 600px) {
+      @media screen and (width <= 600px) {
         width: 100%;
 
         &:nth-of-type(2) {
@@ -90,7 +90,7 @@ html.homepage-featured-topics {
         }
       }
 
-      @media screen and (max-width: 450px) {
+      @media screen and (width <= 450px) {
         width: 100%;
 
         &:nth-of-type(n + 2) {
@@ -135,7 +135,7 @@ html.homepage-featured-topics {
     .featured-topics {
       justify-content: flex-start;
 
-      @media screen and (max-width: 999px) {
+      @media screen and (width <= 999px) {
         flex-direction: row;
         gap: 1.25em;
         padding-bottom: 1rem; // spacing for scroll on mobile
@@ -151,7 +151,7 @@ html.homepage-featured-topics {
         }
       }
 
-      @media screen and (max-width: 800px) {
+      @media screen and (width <= 800px) {
         .featured-topic {
           flex-basis: 45%;
 
@@ -163,7 +163,7 @@ html.homepage-featured-topics {
     }
   }
 
-  @media screen and (max-width: 600px) {
+  @media screen and (width <= 600px) {
     &.-mobile-stacked {
       .featured-topics {
         flex-direction: column;
@@ -206,7 +206,7 @@ html.homepage-featured-topics {
     }
   }
 
-  @media screen and (max-width: 400px) {
+  @media screen and (width <= 400px) {
     &.-mobile-horizontal {
       .featured-topics {
         .featured-topic {

javascripts/discourse/components/featured-homepage-topics.js renamed to javascripts/discourse/components/featured-homepage-topics.gjs

@@ -1,7 +1,14 @@
 import Component from "@glimmer/component";
 import { tracked } from "@glimmer/tracking";
+import { concat } from "@ember/helper";
 import { action } from "@ember/object";
+import didInsert from "@ember/render-modifiers/modifiers/did-insert";
 import { service } from "@ember/service";
+import { and, not } from "truth-helpers";
+import DButton from "discourse/components/d-button";
+import concatClass from "discourse/helpers/concat-class";
+import icon from "discourse/helpers/d-icon";
+import htmlSafe from "discourse/helpers/html-safe";
 import getURL from "discourse/lib/get-url";
 import { emojiUnescape } from "discourse/lib/text";
 import { defaultHomepage } from "discourse/lib/utilities";
@@ -128,4 +135,76 @@ export default class FeaturedHomepageTopics extends Component {
       )
       .slice(0, settings.number_of_topics);
   }
+
+  <template>
+    {{#if (and this.showFor this.showHere)}}
+      <div
+        class="custom-homepage-wrapper"
+        {{didInsert this.getBannerTopics}}
+        {{didInsert this.checkShowHere}}
+      >
+        {{#if this.featuredTagTopics}}
+          <div class="custom-homepage">
+            {{#if settings.make_collapsible}}
+              <DButton
+                class={{concatClass
+                  "featured-topic-toggle"
+                  (if this.toggleTopics "is-open")
+                }}
+                @action={{action "toggle"}}
+                @translatedLabel={{this.featuredTitle}}
+              >
+                {{#if this.toggleTopics}}
+                  {{icon "angle-right"}}
+                {{else}}
+                  {{icon "angle-down"}}
+                {{/if}}
+              </DButton>
+            {{/if}}
+
+            <div
+              class={{concatClass
+                "featured-topic-wrapper"
+                this.mobileStyle
+                (if (and this.toggleTopics settings.make_collapsible) "hidden")
+              }}
+            >
+              {{#if (and settings.show_title (not settings.make_collapsible))}}
+                <h2>
+                  {{this.featuredTitle}}
+                </h2>
+              {{/if}}
+
+              <div class="featured-topics">
+                {{#each this.featuredTagTopics as |t|}}
+                  <div class="featured-topic">
+                    <div
+                      class="featured-topic-image"
+                      style={{htmlSafe
+                        (concat "background-image: url(" t.image_url ")")
+                      }}
+                    >
+                      {{! template-lint-disable no-invalid-link-text }}
+                      <a href={{this.topicHref t}}></a>
+                    </div>
+                    <h3>
+                      <a
+                        href={{this.topicHref t}}
+                        role="heading"
+                        aria-level="2"
+                        data-topic-id={{t.id}}
+                      >
+                        {{htmlSafe (this.emojiTitle t.fancy_title)}}
+                      </a>
+                    </h3>
+                  </div>
+                {{/each}}
+              </div>
+            </div>
+          </div>
+        {{/if}}
+      </div>
+
+    {{/if}}
+  </template>
 }

javascripts/discourse/components/featured-homepage-topics.hbs

@@ -0,0 +1,21 @@
+import Component from "@ember/component";
+import FeaturedHomepageTopics from "_fake_theme/discourse/components/featured-homepage-topics";
+import { classNames } from "@ember-decorators/component";
+
+@classNames("above-main-container-outlet", "homepage-featured-topics")
+export default class HomepageFeaturedTopics extends Component {
+  init() {
+    super.init(...arguments);
+    this.set(
+      "switchOutletToAboveMainContainer",
+      settings.featured_content_position === "above_main_container" ||
+        settings.show_on === "all"
+    );
+  }
+
+  <template>
+    {{#if this.switchOutletToAboveMainContainer}}
+      <FeaturedHomepageTopics />
+    {{/if}}
+  </template>
+}