DEV: Update linting (#13)

.eslintrc.cjs

@@ -0,0 +1 @@
+module.exports = require("@discourse/lint-configs/eslint-theme");

.github/workflows/discourse-theme.yml

@@ -0,0 +1,11 @@
+name: Discourse Theme
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+
+jobs:
+  ci:
+    uses: discourse/.github/.github/workflows/discourse-theme.yml@v1

.gitignore

@@ -0,0 +1,2 @@
+node_modules
+.discourse-site

.prettierrc.cjs

@@ -0,0 +1 @@
+module.exports = require("@discourse/lint-configs/prettier");

.template-lintrc.cjs

@@ -0,0 +1 @@
+module.exports = require("@discourse/lint-configs/template-lint");

common/common.scss

@@ -1 +1 @@
-@import "card-filters";
+@import "card-filters";

desktop/desktop.scss

@@ -8,4 +8,4 @@
 
 .docs-browse .docs-items .docs-item {
   padding: 0.25em 0;
-}
+}

javascripts/discourse-docs-card-filter/connectors/before-docs-search/card-filter.hbs

@@ -1 +1,6 @@
-{{cards-filter updateSelectedCategory=selectCategory updateSelectedTag=selectTag tags=tags categories=categories}}
+{{cards-filter
+  updateSelectedCategory=selectCategory
+  updateSelectedTag=selectTag
+  tags=tags
+  categories=categories
+}}

javascripts/discourse/components/cards-filter.js

@@ -1,8 +1,6 @@
 import Component from "@ember/component";
-import { withPluginApi } from "discourse/lib/plugin-api";
-import { inject as service } from "@ember/service";
+import { service } from "@ember/service";
 import discourseComputed from "discourse-common/utils/decorators";
-import { readOnly } from "@ember/object/computed";
 
 export default Component.extend({
   classNameBindings: ["shouldShow:visible"],
@@ -12,8 +10,10 @@ export default Component.extend({
   },
 
   @discourseComputed("router.currentRoute.queryParams")
-  shouldShow(params) {
-    if (!this.siteSettings.docs_enabled) return false;
+  shouldShow() {
+    if (!this.siteSettings.docs_enabled) {
+      return false;
+    }
     return this.includedCategories?.length > 0 || this.includedTags?.length > 0;
   },
 
@@ -24,7 +24,7 @@ export default Component.extend({
     let shownCategories;
 
     if (categories) {
-      shownCategories = categories.filter(category => {
+      shownCategories = categories.filter((category) => {
         let currentCategory;
 
         if (params?.category) {
@@ -48,16 +48,15 @@ export default Component.extend({
     let shownTags;
 
     if (tags) {
-      shownTags = tags.filter(tag => {
+      shownTags = tags.filter((tag) => {
         let currentTags = [];
 
         if (params?.tags) {
           currentTags.push(...params.tags.split("|"));
         }
 
         return (
-          pluginTags.includes(`${tag.id}`) &&
-          !currentTags.includes(tag.id)
+          pluginTags.includes(`${tag.id}`) && !currentTags.includes(tag.id)
         );
       });
     }
@@ -69,7 +68,7 @@ export default Component.extend({
   tagIcons() {
     let icons = {};
 
-    settings.tag_icons.split("|").forEach(data => {
+    settings.tag_icons.split("|").forEach((data) => {
       icons[data.split(",")[0]] = data.split(",")[1];
     });
 
@@ -80,7 +79,7 @@ export default Component.extend({
   tagOrders() {
     let order = {};
 
-    settings.tag_icons.split("|").forEach(data => {
+    settings.tag_icons.split("|").forEach((data) => {
       const arrayData = data.split(",");
       if (arrayData.length === 3) {
         order[arrayData[0]] = arrayData[2];
@@ -94,7 +93,7 @@ export default Component.extend({
   categoryOrders() {
     let order = {};
 
-    settings.category_icons.split("|").forEach(data => {
+    settings.category_icons.split("|").forEach((data) => {
       const arrayData = data.split(",");
       if (arrayData.length === 3) {
         order[arrayData[0]] = arrayData[2];
@@ -108,10 +107,10 @@ export default Component.extend({
   categoryIcons() {
     let icons = {};
 
-    settings.category_icons.split("|").forEach(data => {
+    settings.category_icons.split("|").forEach((data) => {
       icons[data.split(",")[0]] = data.split(",")[1];
     });
 
     return icons;
-  }
+  },
 });

javascripts/discourse/components/category-wrapper.js

@@ -1,8 +1,8 @@
 import Component from "@ember/component";
-import I18n from "I18n";
-import discourseComputed from "discourse-common/utils/decorators";
 import { action } from "@ember/object";
-import { inject as service } from "@ember/service";
+import { service } from "@ember/service";
+import discourseComputed from "discourse-common/utils/decorators";
+import I18n from "I18n";
 
 export default Component.extend({
   router: service(),
@@ -62,7 +62,7 @@ export default Component.extend({
   categoryName(categoryName) {
     return categoryName;
   },
-  
+
   @discourseComputed("categoryInfo.slug")
   categorySlug(categorySlug) {
     return categorySlug;

javascripts/discourse/components/tag-wrapper.js

@@ -1,8 +1,8 @@
 import Component from "@ember/component";
-import I18n from "I18n";
-import discourseComputed from "discourse-common/utils/decorators";
 import { action } from "@ember/object";
-import { inject as service } from "@ember/service";
+import { service } from "@ember/service";
+import discourseComputed from "discourse-common/utils/decorators";
+import I18n from "I18n";
 
 export default Component.extend({
   router: service(),

javascripts/discourse/templates/components/cards-filter.hbs

@@ -1,13 +1,22 @@
 <div class="docs-cards-filter">
   {{#if includedCategories}}
     {{#each includedCategories as |category|}}
-      {{category-wrapper category=category categoryOrders=categoryOrders categoryIcons=categoryIcons updateSelectedCategory=updateSelectedCategory}}
+      {{category-wrapper
+        category=category
+        categoryOrders=categoryOrders
+        categoryIcons=categoryIcons
+        updateSelectedCategory=updateSelectedCategory
+      }}
     {{/each}}
   {{/if}}
   {{#if includedTags}}
     {{#each includedTags as |tag|}}
-      {{tag-wrapper tag=tag tagOrders=tagOrders tagIcons=tagIcons updateSelectedTag=updateSelectedTag}}
+      {{tag-wrapper
+        tag=tag
+        tagOrders=tagOrders
+        tagIcons=tagIcons
+        updateSelectedTag=updateSelectedTag
+      }}
     {{/each}}
   {{/if}}
-</div>
-
+</div>

javascripts/discourse/templates/components/category-wrapper.hbs

@@ -1,9 +1,16 @@
-<a class="docs-card-box category-card card-{{categorySlug}}" onclick={{selectCategory}}>
+<a
+  {{on "click" this.selectCategory}}
+  href
+  class="docs-card-box category-card card-{{categorySlug}}"
+>
   <div class="docs-card-box-header">
     {{#if categoryIcon}}
       {{d-icon categoryIcon}}
     {{else}}
-      <span class="docs-card-box-header-badge-category-bg" style="background-color: {{categoryColor}}"></span>
+      <span
+        class="docs-card-box-header-badge-category-bg"
+        style={{html-safe (concat "background-color: " this.categoryColor)}}
+      ></span>
     {{/if}}
     <h3 class="docs-card-box-header-title">{{categoryName}}</h3>
   </div>
@@ -13,4 +20,4 @@
   {{/if}}
 
   <span class="docs-card-box-count">{{topicCount}}</span>
-</a>
+</a>

javascripts/discourse/templates/components/tag-wrapper.hbs

@@ -1,4 +1,8 @@
-<a class="docs-card-box tag-card card-{{tag.id}}" onclick={{selectTag}}>
+<a
+  {{on "click" this.selectTag}}
+  href
+  class="docs-card-box tag-card card-{{tag.id}}"
+>
   <div class="docs-card-box-header">
     {{#if tagIcon}}
       {{d-icon tagIcon}}
@@ -9,4 +13,4 @@
   </div>
 
   <span class="docs-card-box-count">{{topicCount}}</span>
-</a>
+</a>

package.json

@@ -0,0 +1,9 @@
+{
+  "private": true,
+  "devDependencies": {
+    "@discourse/lint-configs": "^1.3.7",
+    "ember-template-lint": "^5.13.0",
+    "eslint": "^8.56.0",
+    "prettier": "^2.8.8"
+  }
+}

scss/card-filters.scss

@@ -29,7 +29,7 @@
   scrollbar-color: var(--primary-low) transparent;
 
   &::before {
-    content: '';
+    content: "";
     width: 100%;
     height: 2em;
     background: linear-gradient(
@@ -44,7 +44,7 @@
   }
 
   &::after {
-    content: '';
+    content: "";
     width: 100%;
     height: 2em;
     background: linear-gradient(