feat: Improve docs (esbanarango#112)

* CHORE: Initial changes to improve the documentation app

* Use ember-post-css instead of ember-sass to experiment with it.
* Use Tailwind instead of Tachyons.
* Use ember-cli-addon-docs instead of mantaning a custom documentation page

* feat: Moving component docs pages to Tailwind and docs addons

* feat: Remove ESdoc because it is not helpful atm and small UI improvements

* chore: Add angle bracket components polyfill

.eslintrc.js

@@ -45,7 +45,9 @@ module.exports = {
       },
       plugins: ['node'],
       rules: Object.assign({}, require('eslint-plugin-node').configs.recommended.rules, {
-        // add your custom rules and overrides for node files here
+        "node/no-extraneous-require": ["error", {
+          "allowModules": ["postcss-scss"]
+        }]
       })
     }
   ]

.npmignore

@@ -29,3 +29,4 @@
 /.node_modules.ember-try/
 /bower.json.ember-try
 /package.json.ember-try
+/config/addon-docs.js

config/addon-docs.js

@@ -0,0 +1,9 @@
+/* eslint-env node */
+'use strict';
+
+const AddonDocsConfig = require('ember-cli-addon-docs/lib/config');
+
+module.exports = class extends AddonDocsConfig {
+  // See https://ember-learn.github.io/ember-cli-addon-docs/docs/deploying
+  // for details on configuration you can override here.
+};

config/deploy.js

@@ -0,0 +1,29 @@
+/* eslint-env node */
+'use strict';
+
+module.exports = function(deployTarget) {
+  let ENV = {
+    build: {}
+    // include other plugin configuration that applies to all deploy targets here
+  };
+
+  if (deployTarget === 'development') {
+    ENV.build.environment = 'development';
+    // configure other plugins for development deploy target here
+  }
+
+  if (deployTarget === 'staging') {
+    ENV.build.environment = 'production';
+    // configure other plugins for staging deploy target here
+  }
+
+  if (deployTarget === 'production') {
+    ENV.build.environment = 'production';
+    // configure other plugins for production deploy target here
+  }
+
+  // Note: if you need to build some configuration asynchronously, you can return
+  // a promise that resolves with the ENV object instead of returning the
+  // ENV object synchronously.
+  return ENV;
+};

ember-cli-build.js

@@ -4,15 +4,35 @@ const EmberAddon = require('ember-cli/lib/broccoli/ember-addon');
 
 module.exports = function(defaults) {
   let app = new EmberAddon(defaults, {
-    // Add options here
+    outputPaths: {
+      app: {
+        css: {
+          'app': '/assets/dummy.css'
+        }
+      }
+    },
+    postcssOptions: {
+      compile: {
+        extension: 'scss',
+        enabled: true,
+        parser: require('postcss-scss'),
+        plugins: [
+          {
+            module: require('@csstools/postcss-sass'),
+            options: {
+              includePaths: [
+                'node_modules'
+              ]
+            }
+          },
+          require('tailwindcss')('tests/dummy/app/styles/tailwind.config.js')
+        ]
+      },
+      filter: {
+        enabled: false
+      }
+    }
   });
 
-  /*
-    This build file specifies the options for the dummy test app of this
-    addon, located in `/tests/dummy`
-    This build file does *not* influence how the addon or the app using it
-    behave. You most likely want to be modifying `./index.js` or app's build file
-  */
-
   return app.toTree();
 };

package.json

@@ -16,17 +16,24 @@
     "ember-cli-htmlbars": "^3.0.0"
   },
   "devDependencies": {
+    "@csstools/postcss-sass": "^4.0.0",
     "@ember/optional-features": "^0.6.3",
     "broccoli-asset-rev": "^2.7.0",
+    "ember-angle-bracket-invocation-polyfill": "^2.0.2",
     "ember-cli": "~3.7.1",
+    "ember-cli-addon-docs": "^0.6.16",
     "ember-cli-chai": "^0.4.0",
     "ember-cli-dependency-checker": "^3.0.0",
+    "ember-cli-deploy": "^1.0.2",
+    "ember-cli-deploy-build": "^2.0.0",
+    "ember-cli-deploy-git": "^1.3.4",
+    "ember-cli-deploy-git-ci": "^1.0.1",
     "ember-cli-dotenv": "2.0.0",
     "ember-cli-eslint": "^4.2.3",
     "ember-cli-github-pages": "^0.2.1",
     "ember-cli-htmlbars-inline-precompile": "^1.0.3",
     "ember-cli-inject-live-reload": "^1.8.2",
-    "ember-cli-sass": "^10.0.0",
+    "ember-cli-postcss": "^6.0.0",
     "ember-cli-sri": "^2.1.1",
     "ember-cli-template-lint": "^1.0.0-beta.1",
     "ember-cli-test-loader": "2.1.0",
@@ -49,7 +56,7 @@
     "eslint-plugin-ember": "^5.2.0",
     "eslint-plugin-node": "^7.0.1",
     "loader.js": "^4.7.0",
-    "sass": "^1.17.0"
+    "tailwindcss": "^1.4.4"
   },
   "keywords": [
     "ember-addon"
@@ -67,11 +74,12 @@
   "ember-addon": {
     "configPath": "tests/dummy/config"
   },
-  "resolutions" : {
-    "growl" : "^1.10.0"
+  "resolutions": {
+    "growl": "^1.10.0"
   },
   "volta": {
     "node": "10.16.3",
     "yarn": "1.19.1"
-  }
+  },
+  "homepage": "https://dmuneras.github.io/ember-place-autocomplete"
 }

tests/dummy/app/index.html

@@ -11,7 +11,6 @@
 
     <link integrity="" rel="stylesheet" href="{{rootURL}}assets/vendor.css">
     <link integrity="" rel="stylesheet" href="{{rootURL}}assets/dummy.css">
-    <link rel="stylesheet" href="https://unpkg.com/tachyons@4/css/tachyons.min.css">
 
     {{content-for "head-footer"}}
   </head>

tests/dummy/app/router.js

@@ -1,23 +1,24 @@
-import Router from '@ember/routing/router';
+import AddonDocsRouter, { docsRoute } from 'ember-cli-addon-docs/router';
 import config from './config/environment';
 
-const AppRouter = Router.extend({
+const Router = AddonDocsRouter.extend({
   location: config.locationType,
-  rootURL: config.rootURL
+  rootURL: config.rootURL,
 });
 
-AppRouter.map(function() {
-  this.route('about', { path: '/' });
-  this.route('usage', function() {
-    this.route('component');
-    this.route('service');
-  });
-  this.route('configuration');
-  this.route('installation');
+Router.map(function() {
+  docsRoute(this, function() {
+    this.route('usage', function() {
+      this.route('component');
+      this.route('service');
+    });
+    this.route('configuration');
+    this.route('installation');
 
-  this.route('addon-tests', function() {
-    this.route('mocks');
+    this.route('addon-tests', function() {
+      this.route('mocks');
+    });
   });
 });
 
-export default AppRouter;
+export default Router;

tests/dummy/app/routes/docs.js

@@ -0,0 +1,4 @@
+import Route from '@ember/routing/route';
+
+export default Route.extend({
+});

tests/dummy/app/styles/app.scss

@@ -1,4 +1,32 @@
 @import "ember-power-select";
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+p {
+  @apply py-2;
+}
+
+h2 {
+  @apply text-3xl;
+  @apply py-4;
+}
+
+h4,
+h3 {
+  @apply text-2xl;
+  @apply py-4;
+}
+
+a {
+  @apply no-underline;
+  @apply text-red-700;
+  @apply text-lg;
+
+  &:hover {
+    @apply underline;
+  }
+}
 
 .input-field-example{
   padding: 10px;
@@ -45,3 +73,12 @@
   animation-name: fadein;
   animation-iteration-count: infinite;
 }
+
+.main-sidebar {
+  min-height: 70vh;
+}
+
+// Override addon styles while I learn how it works
+.documentation-hero .docs-max-w-sm.docs-mx-auto{
+  max-width: 100%;
+}

tests/dummy/app/styles/tailwind.config.js

@@ -0,0 +1,12 @@
+// eslint-disable-next-line no-undef
+module.exports = {
+  purge: [],
+  theme: {
+    container: {
+      center: true,
+      padding: '2rem'
+    },
+  },
+  variants: {},
+  plugins: [],
+}

tests/dummy/app/templates/about.hbs

@@ -1,4 +1,4 @@
-<h2 class="f2 mt0">About</h2>
+<h2>About</h2>
 <div class="flex flex-inline">
   <img class="mr2" alt="badge" src="https://img.shields.io/npm/dt/ember-place-autocomplete.svg">
   <img class="mr2" alt="badge" src="https://travis-ci.org/dmuneras/ember-place-autocomplete.svg?branch=master">
@@ -9,7 +9,7 @@
     <img class="mr2" alt="badge" src="https://badge.fury.io/js/ember-place-autocomplete.svg">
   </a>
 </div>
-<p class="mt4">
+<p>
   Ember addon that provides a component which uses Google Places API to autocomplete place information when someone writes an address in a text field.
 </p>
 <p>
@@ -21,14 +21,14 @@
 </p>
 <ul>
   <li>
-    <h3 class="f5">place-autocomplete-field component</h3>
+    <h3>place-autocomplete-field component</h3>
     <p>This component is a input text field that fetches Google place predictions while the user is typing.</p>
     <p>
       More information: {{#link-to "usage.component"}}here{{/link-to}}
     </p>
   </li>
   <li>
-    <h3 class="f5">google-place-autocomplete service</h3>
+    <h3>google-place-autocomplete service</h3>
     <p>
       Instead of using the standard Google place autocomplete component, which delegates to google the responsibility of adding the UI elements to intereact with place predictions. It is possible to use a Google service that you can call to get the information in JSON format. The service provides more flexibility when communicating with Google Places API. One advantage of usin the service is the possibility to use <strong><i>sessionTokens</i></strong> in order to reduce the cost of paid services when getting places information.
     </p>
@@ -37,7 +37,7 @@
     </p>
   </li>
 </ul>
-<h2 class="f2">Issues</h2>
+<h2>Issues</h2>
 <p>
   You can report any issue you find <a href="https://github.com/dmuneras/ember-place-autocomplete/issues" target="_blank" rel="noopener">here</a>
 </p>