DEV: Update linting (#7)

.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

@@ -1 +1,2 @@
 .DS_Store
+node_modules

.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,4 +1,4 @@
-@import 'variables';
+@import "variables";
 
 // INPUT FIELDS - SELECT - DROPDOWNS
 // *------------------------------------------------*
@@ -96,7 +96,8 @@ textarea:focus {
 // MODAL
 // *------------------------------------------------*
 .modal-inner-container {
-  box-shadow: 0 8px 60px 0 rgba(103,151,255,.15), 0 12px 90px 0 rgba(103,151,255,.15);
+  box-shadow: 0 8px 60px 0 rgba(103, 151, 255, 0.15),
+    0 12px 90px 0 rgba(103, 151, 255, 0.15);
   border-radius: $radius-8;
 }
 
@@ -144,7 +145,8 @@ textarea:focus {
 
 .menu-panel.drop-down {
   border-radius: $radius-20;
-  box-shadow: 0 8px 60px 0 rgba(255, 103, 222, 0.15), 0 12px 90px 0 rgba(255, 103, 217, 0.15);
+  box-shadow: 0 8px 60px 0 rgba(255, 103, 222, 0.15),
+    0 12px 90px 0 rgba(255, 103, 217, 0.15);
 }
 
 .search-menu input[type="text"] {
@@ -153,19 +155,19 @@ textarea:focus {
 
 // Buttons
 // *------------------------------------------------*
-#create-topic{
+#create-topic {
   border: 2px solid $color-royal;
   background-color: $color-royal;
   border-radius: 10px;
   color: $color-white;
-  transition: .3s;
+  transition: 0.3s;
   .fa {
     color: $color-white;
   }
 }
 #create-topic:hover {
   box-shadow: 8px 8px $color-light-violet;
-  transition: .3s;
+  transition: 0.3s;
 }
 
 .btn {
@@ -210,7 +212,7 @@ textarea:focus {
   .discourse-no-touch & {
     &:hover,
     &.btn-hover {
-     background: $danger-hover;
+      background: $danger-hover;
     }
   }
 }
@@ -244,7 +246,7 @@ textarea:focus {
 // Admin
 // *------------------------------------------------*
 .admin-controls {
-  .nav-pills>li a.active {
+  .nav-pills > li a.active {
     background: none;
     color: $tertiary;
   }

desktop/desktop.scss

@@ -72,4 +72,3 @@
   color: $color-black;
   border: none;
 }
-

mobile/mobile.scss

@@ -1,18 +1,19 @@
-@import 'variables';
+@import "variables";
 
 // Container
 // *------------------------------------------------*
 #main-outlet {
   margin-top: 30px;
   margin-bottom: 30px;
   background: $color-cream;
-  box-shadow: 0 8px 60px 0 rgba(103,151,255,.15), 0 12px 90px 0 rgba(103,151,255,.15);
+  box-shadow: 0 8px 60px 0 rgba(103, 151, 255, 0.15),
+    0 12px 90px 0 rgba(103, 151, 255, 0.15);
   border-radius: $radius-20;
 }
 
 // Navigation Bar
 // *------------------------------------------------*
-.nav-pills li a {  
+.nav-pills li a {
   &.active {
     color: $color-black;
   }
@@ -24,4 +25,4 @@
 
 .list-controls .navigation-container {
   margin: 0.8em 9px 1px;
-}
+}

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/variables.scss

@@ -2,14 +2,22 @@
 // *------------------------------------------------*
 $color-white: #ffffff;
 $color-black: #000000;
-$color-cream: #FAFFFD;
+$color-cream: #fafffd;
 $color-mud: #f4d35e;
 $color-royal: #3c73ff;
 $color-green: #2ecc71;
-$color-turqoise: #CCE1EA;
+$color-turqoise: #cce1ea;
 $color-light-violet: #99bdff;
-$gradient-pink: linear-gradient(146deg,rgba(255,74,158,0) 55%,rgba(255,74,158,.4) 100%);
-$gradient-blue: linear-gradient(200deg,rgba(255,74,158,0) 45%,rgba(40, 13, 194, 0.068) 100%);
+$gradient-pink: linear-gradient(
+  146deg,
+  rgba(255, 74, 158, 0) 55%,
+  rgba(255, 74, 158, 0.4) 100%
+);
+$gradient-blue: linear-gradient(
+  200deg,
+  rgba(255, 74, 158, 0) 45%,
+  rgba(40, 13, 194, 0.068) 100%
+);
 
 $radius-2: 2px;
 $radius-4: 4px;