DEV: Add CI setup and fix linting issues (#18)

.eslintrc

@@ -1,3 +1,8 @@
 {
-  "extends": "eslint-config-discourse"
+  "extends": "eslint-config-discourse",
+  "ignorePatterns": ["javascripts/vendor/*"],
+  "globals": {
+    "settings": "readonly",
+    "themePrefix": "readonly"
+  }
 }

.github/workflows/component-linting.yml

@@ -0,0 +1,48 @@
+name: Linting
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+
+concurrency:
+  group: plugin-linting-${{ format('{0}-{1}', github.head_ref || github.run_number, github.job) }}
+  cancel-in-progress: true
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          cache: yarn
+
+      - name: Yarn install
+        run: yarn install
+
+      - name: ESLint
+        if: ${{ always() }}
+        run: yarn eslint --ext .js,.js.es6 --no-error-on-unmatched-pattern {test,javascripts}
+
+      - name: Prettier
+        if: ${{ always() }}
+        shell: bash
+        run: |
+          yarn prettier -v
+          files=$(find javascripts desktop mobile common scss -type f \( -name "*.scss" -or -name "*.js" -or -name "*.es6" \) 2> /dev/null) || true
+          if [ -n "$files" ]; then
+            yarn prettier --list-different $files
+          fi
+          if [ 0 -lt $(find test -type f \( -name "*.js" -or -name "*.es6" \) 2> /dev/null | wc -l) ]; then
+            yarn prettier --list-different "test/**/*.{js,es6}"
+          fi
+
+      - name: Ember template lint
+        if: ${{ always() }}
+        run: yarn ember-template-lint --no-error-on-unmatched-pattern javascripts

.github/workflows/component-tests.yml

@@ -0,0 +1,147 @@
+name: Tests
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+
+concurrency:
+  group: plugin-tests-${{ format('{0}-{1}', github.head_ref || github.run_number, github.job) }}
+  cancel-in-progress: true
+
+jobs:
+  check:
+    runs-on: ubuntu-latest
+    outputs:
+      tests_exist: ${{ steps.check_tests.outputs.tests_exist }}
+
+    steps:
+      - name: Install component
+        uses: actions/checkout@v3
+        with:
+          path: tmp/component
+          fetch-depth: 1
+
+      - name: Check QUnit existence
+        id: check_tests
+        shell: bash
+        run: |
+          if [ 0 -lt $(find tmp/component/test -type f \( -name "*.js" -or -name "*.es6" \) 2> /dev/null | wc -l) ]; then
+            echo "::set-output name=tests_exist::true"
+          fi
+
+  test:
+    needs: check
+    if: ${{ needs.check.outputs.tests_exist }}
+    runs-on: ubuntu-latest
+    container: discourse/discourse_test:slim-browsers
+    timeout-minutes: 15
+
+    env:
+      DISCOURSE_HOSTNAME: www.example.com
+      RUBY_GLOBAL_METHOD_CACHE_SIZE: 131072
+      RAILS_ENV: development
+      PGUSER: discourse
+      PGPASSWORD: discourse
+
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          repository: discourse/discourse
+          fetch-depth: 1
+
+      - name: Install component
+        uses: actions/checkout@v3
+        with:
+          path: tmp/component
+          fetch-depth: 1
+
+      - name: Setup Git
+        run: |
+          git config --global user.email "ci@ci.invalid"
+          git config --global user.name "Discourse CI"
+
+      - name: Start redis
+        run: |
+          redis-server /etc/redis/redis.conf &
+
+      - name: Start Postgres
+        run: |
+          chown -R postgres /var/run/postgresql
+          sudo -E -u postgres script/start_test_db.rb
+          sudo -u postgres psql -c "CREATE ROLE $PGUSER LOGIN SUPERUSER PASSWORD '$PGPASSWORD';"
+
+      - name: Bundler cache
+        uses: actions/cache@v3
+        with:
+          path: vendor/bundle
+          key: ${{ runner.os }}-gem-${{ hashFiles('**/Gemfile.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-gem-
+
+      - name: Setup gems
+        run: |
+          gem install bundler --conservative -v $(awk '/BUNDLED WITH/ { getline; gsub(/ /,""); print $0 }' Gemfile.lock)
+          bundle config --local path vendor/bundle
+          bundle config --local deployment true
+          bundle config --local without development
+          bundle install --jobs 4
+          bundle clean
+
+      - name: Lint English locale
+        run: bundle exec ruby script/i18n_lint.rb "tmp/component/locales/en.yml"
+
+      - name: Get yarn cache directory
+        id: yarn-cache-dir
+        run: echo "::set-output name=dir::$(yarn cache dir)"
+
+      - name: Yarn cache
+        uses: actions/cache@v3
+        id: yarn-cache
+        with:
+          path: ${{ steps.yarn-cache-dir.outputs.dir }}
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
+
+      - name: Yarn install
+        run: yarn install
+
+      - name: Fetch app state cache
+        uses: actions/cache@v3
+        id: app-cache
+        with:
+          path: tmp/app-cache
+          key: >-
+            ${{ hashFiles('.github/workflows/tests.yml') }}-
+            ${{ hashFiles('db/**/*', 'plugins/**/db/**/*') }}-
+
+      - name: Restore database from cache
+        if: steps.app-cache.outputs.cache-hit == 'true'
+        run: psql -f tmp/app-cache/cache.sql postgres
+
+      - name: Restore uploads from cache
+        if: steps.app-cache.outputs.cache-hit == 'true'
+        run: rm -rf public/uploads && cp -r tmp/app-cache/uploads public/uploads
+
+      - name: Create and migrate database
+        if: steps.app-cache.outputs.cache-hit != 'true'
+        run: |
+          bin/rake db:create
+          bin/rake db:migrate
+
+      - name: Dump database for cache
+        if: steps.app-cache.outputs.cache-hit != 'true'
+        run: mkdir -p tmp/app-cache && pg_dumpall > tmp/app-cache/cache.sql
+
+      - name: Dump uploads for cache
+        if: steps.app-cache.outputs.cache-hit != 'true'
+        run: rm -rf tmp/app-cache/uploads && cp -r public/uploads tmp/app-cache/uploads
+
+      - name: Component QUnit
+        run: |
+          THEME_NAME=$(ruby -e 'require "json"; puts JSON.parse(File.read("tmp/component/about.json"))["name"]')
+          bundle exec rake themes:install -- "--{\"$THEME_NAME\": \"tmp/component\"}"
+          UNICORN_TIMEOUT=120 bundle exec rake "themes:qunit[name,$THEME_NAME]"
+        timeout-minutes: 10

.gitignore

@@ -1,3 +1,2 @@
-.discourse-site
 node_modules
-HELP
+.discourse-site

.prettierrc

@@ -0,0 +1 @@
+{}

README.md

@@ -14,6 +14,7 @@ A clean & modern theme with a handful of theme-components included to enhance yo
 ![image|690x427, 75%](https://d11a6trkgmumsb.cloudfront.net/original/3X/b/d/bdb109def295c9954125124b9fc33be49d12e4f2.png)
 
 This theme includes a handful of components to enhance your forum as well.
+
 - Dark Light Scheme Toggle
 - Clickable Topics
 - Discourse Loading Slider
@@ -23,8 +24,11 @@ This theme includes a handful of components to enhance your forum as well.
 > :exclamation: Please read through these tips upon installation, as there are a couple of settings that **NEED TO BE ENABLED** for this to theme to render properly.
 
 ---
+
 # Tips
+
 ### Dark Light Scheme Toggle
+
 ![image|424x500, 50%](https://d11a6trkgmumsb.cloudfront.net/original/3X/1/e/1e498e5d1f26f6e46d09d48eabf7c7b6d291cd26.png)
 
 For this to work properly, at least 2 color scheme choices need to be enabled in your `https://discourse.jordanvidrine.com/admin/customize/colors` area. At least two colors need to have `color scheme can be selected by users` enabled.
@@ -35,27 +39,33 @@ Once this is done, users should be able to choose between two color schemes as t
 
 ![image|689x338, 50%](https://d11a6trkgmumsb.cloudfront.net/original/3X/1/8/184e79ce3851b9feb965117b68a97e5e7de00b93.png)
 
-___
+---
+
 ## Discourse Search Banner
+
 In the options for the `discourse-search-banner` theme component, the `plugin-outlet` options needs to be set to **BELOW-SITE-HEADER** for this theme to render properly.
 
 ![image|690x75, 75%](https://d11a6trkgmumsb.cloudfront.net/original/3X/a/c/acb30097e038fcdb3b2d77043237f46328ed8dd5.png)
-___
+
+---
+
 ## Modern Category + Group Boxes
+
 This theme component requires your categories to use the **CATEGORY BOXES WITH SUBCATEGORIES** setting in your `/admin/site_settings/category/all_results?filter=categories` area.
 
 ![image|690x64, 75%](https://d11a6trkgmumsb.cloudfront.net/original/3X/c/2/c2798276e772741144c88c2ea47660b60bc3d4b5.png)
 
 This theme component also allows the forum admin to organize their category page with header titles, and choose which categories appear under each header. To keep things simple, I have only allowed up to 5 headings to be used. **If no categories + heading settings are chosen, all categories will render as they do above, this is the default rendering option.**
-___
+
+---
 
 Feel free to post any issues here :grinning_face_with_smiling_eyes:
 
 I hope you enjoy!
 
-||||
+|                     |                              |                                                                                                                             |
-|-|-|-|
+| ------------------- | ---------------------------- | --------------------------------------------------------------------------------------------------------------------------- |
-| :eyeglasses:|**Preview**| https://discourse.jordanvidrine.com/ |
+| :eyeglasses:        | **Preview**                  | https://discourse.jordanvidrine.com/                                                                                        |
-| :hammer_and_wrench:|**Repository**| https://github.com/discourse/discourse-air.git |
+| :hammer_and_wrench: | **Repository**               | https://github.com/discourse/discourse-air.git                                                                              |
-| :question:|**Install Guide**|[How to install a theme or theme component](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682)|
+| :question:          | **Install Guide**            | [How to install a theme or theme component](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682) |
-| :open_book:|**New to Discourse Themes?**| [Beginner’s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966)
+| :open_book:         | **New to Discourse Themes?** | [Beginner’s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966)  |

about.json

@@ -1,37 +1,41 @@
 {
+  "name": "Air Theme",
   "about_url": null,
   "license_url": null,
-  "assets": {
+  "components": [
-  },
+    "https://github.com/jordanvidrine/discourse-category-group-boxes.git",
+    "https://github.com/discourse/discourse-color-scheme-toggle.git",
+    "https://github.com/discourse/discourse-loading-slider.git",
+    "https://github.com/discourse/discourse-clickable-topic.git",
+    "https://github.com/discourse/discourse-search-banner.git"
+  ],
   "modifiers": {
     "serialize_topic_excerpts": true
   },
-  "name": "Air Theme",
   "color_schemes": {
     "air-light": {
       "primary": "1c1c1c",
-      "secondary": "F9FCFF",
+      "secondary": "f9fcff",
       "tertiary": "3877e5",
-      "quaternary": "7E8B93",
+      "quaternary": "7e8b93",
-      "header_background": "F9FCFF",
+      "header_background": "f9fcff",
       "header_primary": "122b43",
-      "highlight": "E6CB37",
+      "highlight": "e6cb37",
-      "danger": "D05454",
+      "danger": "d05454",
-      "success": "71BD9F",
+      "success": "71bd9f",
-      "love": "C16AD7"
+      "love": "c16ad7"
     },
     "air-dark": {
-      "primary": "E0E0E0",
+      "primary": "e0e0e0",
-      "secondary": "2D2D2D",
+      "secondary": "2d2d2d",
-      "tertiary": "9A5CFD",
+      "tertiary": "9a5cfd",
       "quaternary": "71bd9f",
       "header_background": "202020",
-      "header_primary": "E0E0E0",
+      "header_primary": "e0e0e0",
-      "highlight": "9A5CFD",
+      "highlight": "9a5cfd",
-      "danger": "D05454",
+      "danger": "d05454",
-      "success": "71BD9F",
+      "success": "71bd9f",
-      "love": "C16AD7"
+      "love": "c16ad7"
     }
-  },
+  }
-  "components": ["https://github.com/jordanvidrine/discourse-category-group-boxes.git","https://github.com/discourse/discourse-color-scheme-toggle.git","https://github.com/discourse/discourse-loading-slider.git","https://github.com/discourse/discourse-clickable-topic.git","https://github.com/discourse/discourse-search-banner.git"]
 }

javascripts/discourse/initializers/customize-edit-category-general.js

@@ -1,26 +1,26 @@
 import { withPluginApi } from "discourse/lib/plugin-api";
-import { cancel, later } from "@ember/runloop";
+import { cancel } from "@ember/runloop";
 
 export default {
   name: "customize-edit-category-general",
 
   initialize() {
-    withPluginApi("0.8.14", api => {
+    withPluginApi("0.8.14", (api) => {
       api.modifyClass("component:edit-category-general", {
         pluginId: "discourse-air",
 
         didInsertElement() {
           this._super(...arguments);
-          document.body.classList.add("edit-category")
+          document.body.classList.add("edit-category");
           this._focusCategoryName();
         },
 
         willDestroyElement() {
           this._super(...arguments);
-          document.body.classList.remove("edit-category")
+          document.body.classList.remove("edit-category");
           this._laterFocus && cancel(this._laterFocus);
         },
-      })
+      });
-    })
+    });
-  }
+  },
-}
+};

javascripts/discourse/initializers/init-topic-excerpts.js

@@ -1,8 +1,8 @@
 import { apiInitializer } from "discourse/lib/api";
 
-export default apiInitializer("0.8", api => {
+export default apiInitializer("0.8", (api) => {
   api.modifyClass("component:topic-list-item", {
     pluginId: "discourse-air",
-    expandPinned: true
+    expandPinned: true,
-  })
+  });
-})
+});

package.json

@@ -1,7 +1,10 @@
 {
+  "name": "discourse-air",
+  "version": "1.0.0",
+  "repository": "https://github.com/discourse/discourse-air",
   "author": "Jordan Vidrine",
-  "license": "MIT",
+  "license": "GPL-2.0-or-later",
   "devDependencies": {
-    "eslint-config-discourse": "latest"
+    "eslint-config-discourse": "^3.2.0"
   }
 }

scss/chat-mobile.scss

@@ -1,6 +1,4 @@
-html
+html body.has-full-page-chat #main-outlet.wrap {
-  body.has-full-page-chat
-  #main-outlet.wrap {
   width: 100% !important;
   padding: 0 !important;
   background-color: var(--secondary) !important;