Demo

Author: lolmaus

.eslintignore

@@ -21,3 +21,7 @@
 # IDE
 /.idea/
 /.history/
+
+# Vendor assets
+/tests/dummy/
+/typedoc-theme/

.github/workflows/github-pages.yml

@@ -10,7 +10,7 @@ env:
   NODE_VERSION: 14
 
 jobs:
-  api-docs-deploy:
+  deploy:
     name: Deploy API docs
     runs-on: ubuntu-latest
     timeout-minutes: 7
@@ -47,12 +47,14 @@ jobs:
         run: yarn install
         # if: steps.cache-dependencies.outputs.cache-hit != 'true'
 
-      - name: Build
+      - name: Build demo
+        run: yarn build
+
+      - name: Build API docs
         run: yarn typedoc
 
       - name: Deploy
         uses: peaceiris/actions-gh-pages@v3
         with:
           github_token: ${{ secrets.GITHUB_TOKEN }}
-          publish_dir: ./api-docs
-          destination_dir: api
+          publish_dir: ./dist

.gitignore

@@ -1,7 +1,6 @@
 # See https://help.github.com/ignore-files/ for more about ignoring files.
 
 # compiled output
-/api-docs/
 /dist/
 /tmp/
 

.lintstagedrc.js

@@ -13,5 +13,5 @@ module.exports = {
   '**/*.{js,ts}': ['yarn lint:eslint --fix'],
 
   // Template lint
-  '**/*.hbs': ['yarn ember-template-lint'],
+  '**/*.hbs': ['yarn lint:hbs:fix'],
 };

README.md

@@ -83,7 +83,7 @@ https://lolmaus.github.io/ember-element-query/api/
 Roadmap
 -------
 
-This addon is in active development.
+This addon is ~~in active development~~ complete! 🎉
 
 * [x] `{{element-query}}` modifier
   * [x] Exists
@@ -118,10 +118,10 @@ This addon is in active development.
   * [x] Usage
   * [x] Browser support
   * [x] Comparison with alternatives
-  * [ ] TypeDoc API documentation
-    * [ ] Document
-    * [ ] Set up auto deployment
-* [ ] Demo app
+  * [x] TypeDoc API documentation
+    * [x] Document
+    * [x] Set up auto deployment
+* [x] Demo app
 
 
 Rationale
@@ -1250,4 +1250,6 @@ Implemented by Andrey Mikhaylov ([lolmaus](https://github.com/lolmaus)) and [con
 
 Thanks to Chad Carbert ([@chadian](https://github.com/chadian)) and Isaac Lee ([@ijlee2](https://github.com/ijlee2)) for feedback, ideas, brainstorming and criticism.
 
-Sponsored by [@kaliber5](https://github.com/kaliber5), https://kaliber5.de.
+This addon's demo is borrowed from [ember-container-query](https://github.com/ijlee2/ember-element-query) per [@ijlee2](https://www.linkedin.com/in/ijlee2/)'s generous permission.
+
+Sponsored in part by [@kaliber5](https://github.com/kaliber5), https://kaliber5.de.

package.json

@@ -20,10 +20,10 @@
     "lint": "npm-run-all --aggregate-output --continue-on-error --parallel 'lint:!(fix)'",
     "lint:ts": "tsc --noEmit",
     "lint:fix": "npm-run-all --aggregate-output --continue-on-error --parallel lint:*:fix",
-    "lint:hbs": "ember-template-lint .",
+    "lint:hbs": "ember-template-lint . --ignore-pattern '**/typedoc-theme/**'",
     "lint:eslint": "eslint . --ext .js,.ts",
     "lint-staged": "lint-staged",
-    "lint:hbs:fix": "ember-template-lint . --fix",
+    "lint:hbs:fix": "yarn lint:hbs --fix",
     "lint:js:fix": "eslint . --fix",
     "start": "ember serve",
     "test": "npm-run-all lint test:*",
@@ -44,12 +44,14 @@
     "ember-cli-htmlbars": "5.7.1",
     "ember-cli-typescript": "^4.2.1",
     "ember-element-helper": "^0.5.5",
+    "ember-lifeline": "^6.0.2",
     "ember-modifier": "^2.1.2",
     "ember-resize-observer-modifier": "^1.1.1",
     "ember-window-mock": "^0.7.2"
   },
   "devDependencies": {
     "@ember/optional-features": "^2.0.0",
+    "@ember/render-modifiers": "^1.0.2",
     "@ember/test-helpers": "^2.2.5",
     "@embroider/test-setup": "^0.42.2",
     "@glimmer/component": "^1.0.4",
@@ -65,22 +67,29 @@
     "@typescript-eslint/parser": "^4.28.0",
     "babel-eslint": "^10.1.0",
     "broccoli-asset-rev": "^3.0.0",
+    "d3-array": "^3.0.1",
+    "d3-axis": "^3.0.0",
+    "d3-scale": "^4.0.0",
+    "d3-selection": "^3.0.0",
+    "d3-shape": "^3.0.1",
     "ember-auto-import": "^1.11.2",
     "ember-cli": "~3.26.1",
     "ember-cli-dependency-checker": "^3.2.0",
     "ember-cli-inject-live-reload": "^2.1.0",
     "ember-cli-sri": "^2.1.1",
     "ember-cli-terser": "^4.0.1",
     "ember-cli-typescript-blueprints": "^3.0.0",
+    "ember-css-modules": "^1.5.0",
     "ember-disable-prototype-extensions": "^1.1.3",
     "ember-export-application-global": "^2.0.1",
     "ember-load-initializers": "^2.1.2",
     "ember-maybe-import-regenerator": "^0.1.6",
-    "ember-page-title": "^6.2.1",
+    "ember-page-title": "^6.2.2",
     "ember-qunit": "^5.1.4",
     "ember-resolver": "^8.0.2",
     "ember-source": "^3.26.1",
     "ember-source-channel-url": "^3.0.0",
+    "ember-svg-jar": "^2.3.3",
     "ember-template-lint": "^3.2.0",
     "ember-truth-helpers": "^3.0.0",
     "ember-try": "^1.4.0",

tests/dummy/app/app.js

@@ -1,7 +1,7 @@
 import Application from '@ember/application';
+import config from 'dummy/config/environment';
 import Resolver from 'ember-resolver';
 import loadInitializers from 'ember-load-initializers';
-import config from 'dummy/config/environment';
 
 export default class App extends Application {
   modulePrefix = config.modulePrefix;

tests/dummy/app/components/.gitkeep

@@ -0,0 +1,27 @@
+.menu {
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+}
+
+.list {
+  align-items: center;
+  display: flex;
+}
+
+.item.active-route {
+  background-color: rgba(255, 255, 255, 0.075);
+}
+
+.link {
+  display: inline-block;
+  font-size: 0.875rem;
+  padding: 0.875rem 1rem;
+  text-decoration: none;
+  white-space: nowrap;
+}
+
+.link:hover {
+  background-color: rgba(255, 255, 255, 0.075);
+  transition: background-color 0.17s;
+}

tests/dummy/app/components/navigation-menu/index.css

@@ -0,0 +1,40 @@
+<nav
+  data-test-nav={{@name}}
+  aria-label={{@name}}
+  local-class="menu"
+>
+  <ul local-class="list">
+    {{#each @menuItems as |menuItem|}}
+      <li local-class="item {{if (eq menuItem.route this.rootRoute) "active-route"}}">
+        <LinkTo
+          data-test-link={{menuItem.label}}
+          local-class="link"
+          @route={{menuItem.route}}
+        >
+          {{menuItem.label}}
+        </LinkTo>
+      </li>
+    {{/each}}
+  </ul>
+
+  <ul local-class="list">
+      <li local-class="item">
+        <a
+          local-class="link"
+          href="https://github.com/lolmaus/ember-element-query/"
+        >
+          GitHub and Guide
+        </a>
+      </li>
+
+      <li local-class="item">
+
+        <a
+          local-class="link"
+          href="https://lolmaus.github.io/ember-element-query/api/"
+        >
+          API docs
+        </a>
+      </li>
+  </ul>
+</nav>