├── vendor
    └── .gitkeep
├── tests
    ├── helpers
    │   └── .gitkeep
    ├── integration
    │   ├── .gitkeep
    │   └── components
    │   │   ├── example-1
    │   │       └── component-test.js
    │   │   └── aspect-ratio-test.js
    ├── test-helper.js
    └── index.html
├── .node-version
├── .watchmanconfig
├── public
    └── robots.txt
├── tailwind.config.js
├── .template-lintrc.js
├── postcss.config.js
├── app
    ├── components
    │   ├── final
    │   │   ├── text.hbs
    │   │   ├── link.hbs
    │   │   ├── aspect-ratio.hbs
    │   │   ├── aspect-ratio.js
    │   │   └── link.js
    │   └── exercises
    │   │   ├── exercise-13
    │   │       ├── exercise.js
    │   │       ├── solution.js
    │   │       ├── solution.hbs
    │   │       └── exercise.hbs
    │   │   ├── exercise-2
    │   │       ├── exercise.hbs
    │   │       └── solution.hbs
    │   │   ├── exercise-8
    │   │       ├── exercise.js
    │   │       ├── solution.js
    │   │       ├── solution.hbs
    │   │       └── exercise.hbs
    │   │   ├── exercise-5
    │   │       ├── exercise.hbs
    │   │       └── solution.hbs
    │   │   ├── exercise-9
    │   │       ├── exercise.hbs
    │   │       └── solution.hbs
    │   │   ├── exercise-10
    │   │       ├── exercise.hbs
    │   │       └── solution.hbs
    │   │   ├── exercise-3
    │   │       ├── exercise.hbs
    │   │       └── solution.hbs
    │   │   ├── exercise-4
    │   │       ├── exercise.hbs
    │   │       └── solution.hbs
    │   │   ├── exercise-12
    │   │       ├── exercise.hbs
    │   │       └── solution.hbs
    │   │   ├── exercise-7
    │   │       ├── exercise.hbs
    │   │       └── solution.hbs
    │   │   ├── exercise-1
    │   │       ├── exercise.hbs
    │   │       └── solution.hbs
    │   │   ├── exercise-6
    │   │       ├── solution.hbs
    │   │       └── exercise.hbs
    │   │   └── exercise-11
    │   │       ├── exercise.hbs
    │   │       └── solution.hbs
    ├── routes
    │   ├── index.js
    │   └── exercise.js
    ├── styles
    │   ├── app.css
    │   └── tailwind.config.js
    ├── app.js
    ├── router.js
    ├── templates
    │   ├── exercise.hbs
    │   └── application.hbs
    ├── index.html
    └── controllers
    │   └── application.js
├── jsconfig.json
├── config
    ├── optional-features.json
    ├── targets.js
    └── environment.js
├── .ember-cli
├── .eslintignore
├── .editorconfig
├── .gitignore
├── .travis.yml
├── testem.js
├── ember-cli-build.js
├── .eslintrc.js
├── package.json
└── README.md


/vendor/.gitkeep:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/tests/helpers/.gitkeep:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/.node-version:
--------------------------------------------------------------------------------
1 | 12.16.0
2 | 


--------------------------------------------------------------------------------
/tests/integration/.gitkeep:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/.watchmanconfig:
--------------------------------------------------------------------------------
1 | {
2 |   "ignore_dirs": ["tmp", "dist"]
3 | }
4 | 


--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # http://www.robotstxt.org
2 | User-agent: *
3 | Disallow:
4 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
1 | module.exports = require("./app/styles/tailwind.config.js");
2 | 


--------------------------------------------------------------------------------
/.template-lintrc.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 | 
3 | module.exports = {
4 |   extends: 'octane'
5 | };
6 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: [require("tailwindcss"), require("autoprefixer")]
3 | };
4 | 


--------------------------------------------------------------------------------
/app/components/final/text.hbs:
--------------------------------------------------------------------------------
1 | <p class="w-full max-w-md text-xs font-medium text-gray-600" ...attributes>
2 |   {{yield}}
3 | </p>


--------------------------------------------------------------------------------
/jsconfig.json:
--------------------------------------------------------------------------------
1 | {"compilerOptions":{"target":"es6","experimentalDecorators":true},"exclude":["node_modules","bower_components","tmp","vendor",".git","dist"]}


--------------------------------------------------------------------------------
/app/components/final/link.hbs:
--------------------------------------------------------------------------------
1 | <LinkTo
2 |   @route={{@route}}
3 |   ...attributes
4 |   class={{if this.isActive @activeClass @inactiveClass}}
5 | >
6 |   {{yield}}
7 | </LinkTo>


--------------------------------------------------------------------------------
/app/routes/index.js:
--------------------------------------------------------------------------------
1 | import Route from "@ember/routing/route";
2 | 
3 | export default class extends Route {
4 |   beforeModel() {
5 |     this.transitionTo("exercise", "exercise-1");
6 |   }
7 | }
8 | 


--------------------------------------------------------------------------------
/app/components/final/aspect-ratio.hbs:
--------------------------------------------------------------------------------
1 | <div class="relative bg-red-500" style={{this.style}}>
2 |   <div class="absolute object-cover w-full h-full overflow-hidden">
3 |     {{yield}}
4 |   </div>
5 | </div>


--------------------------------------------------------------------------------
/config/optional-features.json:
--------------------------------------------------------------------------------
1 | {
2 |   "application-template-wrapper": false,
3 |   "default-async-observers": true,
4 |   "jquery-integration": false,
5 |   "template-only-glimmer-components": true
6 | }
7 | 


--------------------------------------------------------------------------------
/app/routes/exercise.js:
--------------------------------------------------------------------------------
 1 | import Route from "@ember/routing/route";
 2 | 
 3 | export default class extends Route {
 4 |   model({ exercise_slug }) {
 5 |     return {
 6 |       exerciseNumber: exercise_slug.replace("exercise-", "")
 7 |     };
 8 |   }
 9 | }
10 | 


--------------------------------------------------------------------------------
/tests/test-helper.js:
--------------------------------------------------------------------------------
1 | import Application from '../app';
2 | import config from '../config/environment';
3 | import { setApplication } from '@ember/test-helpers';
4 | import { start } from 'ember-qunit';
5 | 
6 | setApplication(Application.create(config.APP));
7 | 
8 | start();
9 | 


--------------------------------------------------------------------------------
/app/styles/app.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | 
 5 | nav.app a.active {
 6 |   @apply text-white bg-gray-900;
 7 | }
 8 | nav.app a:not(.active) {
 9 |   @apply text-gray-300;
10 | }
11 | nav.app a:hover:not(.active) {
12 |   @apply text-white bg-gray-700;
13 | }
14 | 


--------------------------------------------------------------------------------
/.ember-cli:
--------------------------------------------------------------------------------
 1 | {
 2 |   /**
 3 |     Ember CLI sends analytics information by default. The data is completely
 4 |     anonymous, but there are times when you might want to disable this behavior.
 5 | 
 6 |     Setting `disableAnalytics` to true will prevent any data from being sent.
 7 |   */
 8 |   "disableAnalytics": false
 9 | }
10 | 


--------------------------------------------------------------------------------
/app/styles/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | const defaultTheme = require("tailwindcss/defaultTheme");
 2 | 
 3 | module.exports = {
 4 |   theme: {
 5 |     extend: {
 6 |       fontFamily: {
 7 |         sans: ["Inter var", ...defaultTheme.fontFamily.sans]
 8 |       }
 9 |     }
10 |   },
11 | 
12 |   plugins: [require("@tailwindcss/ui")]
13 | };
14 | 


--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
 1 | # unconventional js
 2 | /blueprints/*/files/
 3 | /vendor/
 4 | 
 5 | # compiled output
 6 | /dist/
 7 | /tmp/
 8 | 
 9 | # dependencies
10 | /bower_components/
11 | /node_modules/
12 | 
13 | # misc
14 | /coverage/
15 | !.*
16 | 
17 | # ember-try
18 | /.node_modules.ember-try/
19 | /bower.json.ember-try
20 | /package.json.ember-try
21 | 


--------------------------------------------------------------------------------
/app/app.js:
--------------------------------------------------------------------------------
 1 | import Application from "@ember/application";
 2 | import Resolver from "ember-resolver";
 3 | import loadInitializers from "ember-load-initializers";
 4 | import config from "./config/environment";
 5 | 
 6 | export default class App extends Application {
 7 |   modulePrefix = config.modulePrefix;
 8 |   Resolver = Resolver;
 9 | }
10 | 
11 | loadInitializers(App, config.modulePrefix);
12 | 


--------------------------------------------------------------------------------
/app/components/exercises/exercise-13/exercise.js:
--------------------------------------------------------------------------------
 1 | import Component from "@glimmer/component";
 2 | import { action } from "@ember/object";
 3 | import { tracked } from "@glimmer/tracking";
 4 | 
 5 | export default class ExercisesExercise14SolutionComponent extends Component {
 6 |   @tracked isOpen = false;
 7 | 
 8 |   @action
 9 |   toggleIsOpen() {
10 |     this.isOpen = !this.isOpen;
11 |   }
12 | }
13 | 


--------------------------------------------------------------------------------
/config/targets.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const browsers = [
 4 |   'last 1 Chrome versions',
 5 |   'last 1 Firefox versions',
 6 |   'last 1 Safari versions'
 7 | ];
 8 | 
 9 | const isCI = !!process.env.CI;
10 | const isProduction = process.env.EMBER_ENV === 'production';
11 | 
12 | if (isCI || isProduction) {
13 |   browsers.push('ie 11');
14 | }
15 | 
16 | module.exports = {
17 |   browsers
18 | };
19 | 


--------------------------------------------------------------------------------
/app/components/final/aspect-ratio.js:
--------------------------------------------------------------------------------
 1 | import Component from "@glimmer/component";
 2 | import { htmlSafe } from "@ember/string";
 3 | 
 4 | export default class AspectRatioComponent extends Component {
 5 |   get style() {
 6 |     let paddingBottom = this.args.ratio
 7 |       .split(":")
 8 |       .map(str => +str)
 9 |       .reduce((prev, curr) => curr / prev);
10 | 
11 |     return htmlSafe(`padding-bottom: ${paddingBottom * 100}%`);
12 |   }
13 | }
14 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # EditorConfig helps developers define and maintain consistent
 2 | # coding styles between different editors and IDEs
 3 | # editorconfig.org
 4 | 
 5 | root = true
 6 | 
 7 | [*]
 8 | end_of_line = lf
 9 | charset = utf-8
10 | trim_trailing_whitespace = true
11 | insert_final_newline = true
12 | indent_style = space
13 | indent_size = 2
14 | 
15 | [*.hbs]
16 | insert_final_newline = false
17 | 
18 | [*.{diff,md}]
19 | trim_trailing_whitespace = false
20 | 


--------------------------------------------------------------------------------
/app/components/exercises/exercise-13/solution.js:
--------------------------------------------------------------------------------
 1 | import Component from "@glimmer/component";
 2 | import { action } from "@ember/object";
 3 | import { tracked } from "@glimmer/tracking";
 4 | 
 5 | export default class ExercisesExercise14SolutionComponent extends Component {
 6 |   @tracked isOpen = false;
 7 | 
 8 |   links = ["Dashboard", "Team", "Projects", "Calendar"];
 9 | 
10 |   @action
11 |   toggleIsOpen() {
12 |     this.isOpen = !this.isOpen;
13 |   }
14 | }
15 | 


--------------------------------------------------------------------------------
/app/router.js:
--------------------------------------------------------------------------------
 1 | import EmberRouter from "@ember/routing/router";
 2 | import config from "./config/environment";
 3 | 
 4 | export default class Router extends EmberRouter {
 5 |   location = config.locationType;
 6 |   rootURL = config.rootURL;
 7 | }
 8 | 
 9 | Router.map(function() {
10 |   this.route("exercise", { path: "/:exercise_slug" }, function() {
11 |     this.route("child-1");
12 |     this.route("child-2");
13 |     this.route("child-3");
14 |   });
15 | });
16 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/ignore-files/ for more about ignoring files.
 2 | 
 3 | # compiled output
 4 | /dist/
 5 | /tmp/
 6 | 
 7 | # dependencies
 8 | /bower_components/
 9 | /node_modules/
10 | 
11 | # misc
12 | /.env*
13 | /.pnp*
14 | /.sass-cache
15 | /connect.lock
16 | /coverage/
17 | /libpeerconnection.log
18 | /npm-debug.log*
19 | /testem.log
20 | /yarn-error.log
21 | 
22 | # ember-try
23 | /.node_modules.ember-try/
24 | /bower.json.ember-try
25 | /package.json.ember-try
26 | 


--------------------------------------------------------------------------------
/app/components/exercises/exercise-2/exercise.hbs:
--------------------------------------------------------------------------------
 1 | <div class="mt-8">
 2 |   <div class="w-1/2 mx-auto overflow-hidden rounded shadow-lg">
 3 |     <img
 4 |       class="object-cover w-full h-28"
 5 |       src="https://source.unsplash.com/_Dogn_h7Qek"
 6 |     />
 7 |     <div class="p-4 text-sm font-medium text-gray-500">
 8 |       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia odit
 9 |       quod ab, asperiores, praesentium veniam.
10 |     </div>
11 |   </div>
12 | </div>
13 | 


--------------------------------------------------------------------------------
/app/components/exercises/exercise-2/solution.hbs:
--------------------------------------------------------------------------------
 1 | <div class="mt-8">
 2 |   <div class="w-1/2 mx-auto overflow-hidden rounded shadow-lg">
 3 |     <Final::AspectRatio @ratio="6016:4016">
 4 |       <img class="" src="https://source.unsplash.com/_Dogn_h7Qek" />
 5 |     </Final::AspectRatio>
 6 | 
 7 |     <div class="p-4 text-sm font-medium text-gray-500">
 8 |       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia odit quod ab, asperiores, praesentium veniam.
 9 |     </div>
10 |   </div>
11 | </div>


--------------------------------------------------------------------------------
/app/components/final/link.js:
--------------------------------------------------------------------------------
 1 | import Component from "@glimmer/component";
 2 | import { inject as service } from "@ember/service";
 3 | 
 4 | export default class extends Component {
 5 |   @service router;
 6 | 
 7 |   get isActive() {
 8 |     let routerArgs = [this.args.route];
 9 |     if (this.args.models) {
10 |       routerArgs = [...routerArgs, ...this.args.models];
11 |     }
12 | 
13 |     let url = this.router.urlFor(routerArgs);
14 | 
15 |     return this.router.currentURL.startsWith(url);
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/app/templates/exercise.hbs:
--------------------------------------------------------------------------------
 1 | <div class="grid h-full grid-cols-2 gap-2 overflow-y-auto bg-gray-100">
 2 |   <div class="h-full overflow-y-auto">
 3 |     <div class="h-full overflow-y-auto bg-white">
 4 |       {{component
 5 |         (concat "exercises/exercise-" @model.exerciseNumber "/exercise")
 6 |       }}
 7 |     </div>
 8 |   </div>
 9 |   <div class="h-full">
10 |     <div class="h-full overflow-y-auto bg-white">
11 |       {{component
12 |         (concat "exercises/exercise-" @model.exerciseNumber "/solution")
13 |       }}
14 |     </div>
15 |   </div>
16 | </div>


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
 1 | ---
 2 | language: node_js
 3 | node_js:
 4 |   - "10"
 5 | 
 6 | dist: trusty
 7 | 
 8 | addons:
 9 |   chrome: stable
10 | 
11 | cache:
12 |   yarn: true
13 | 
14 | env:
15 |   global:
16 |     # See https://git.io/vdao3 for details.
17 |     - JOBS=1
18 | 
19 | branches:
20 |   only:
21 |     - master
22 | 
23 | before_install:
24 |   - curl -o- -L https://yarnpkg.com/install.sh | bash
25 |   - export PATH=$HOME/.yarn/bin:$PATH
26 | 
27 | install:
28 |   - yarn install --non-interactive
29 | 
30 | script:
31 |   - yarn lint:hbs
32 |   - yarn lint:js
33 |   - yarn test
34 | 


--------------------------------------------------------------------------------
/testem.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   test_page: 'tests/index.html?hidepassed',
 3 |   disable_watching: true,
 4 |   launch_in_ci: [
 5 |     'Chrome'
 6 |   ],
 7 |   launch_in_dev: [
 8 |     'Chrome'
 9 |   ],
10 |   browser_start_timeout: 120,
11 |   browser_args: {
12 |     Chrome: {
13 |       ci: [
14 |         // --no-sandbox is needed when running Chrome inside a container
15 |         process.env.CI ? '--no-sandbox' : null,
16 |         '--headless',
17 |         '--disable-dev-shm-usage',
18 |         '--disable-software-rasterizer',
19 |         '--mute-audio',
20 |         '--remote-debugging-port=0',
21 |         '--window-size=1440,900'
22 |       ].filter(Boolean)
23 |     }
24 |   }
25 | };
26 | 


--------------------------------------------------------------------------------
/app/components/exercises/exercise-8/exercise.js:
--------------------------------------------------------------------------------
 1 | import Component from "@glimmer/component";
 2 | 
 3 | export default class ExercisesExercise8Component extends Component {
 4 |   items = [
 5 |     { title: "Full name", data: "Margot Foster" },
 6 |     { title: "Application for", data: "Backend Developer" },
 7 |     { title: "Email address", data: "margotfoster@example.com" },
 8 |     { title: "Salary expectation", data: "$120,000" },
 9 |     {
10 |       title: "About",
11 |       data:
12 |         "Fugiat ipsum ipsum deserunt culpa aute sint do nostrud anim incididunt cillum culpa consequat. Excepteur qui ipsum aliquip consequat sint. Sit id mollit nulla mollit nostrud in ea officia proident. Irure nostrud pariatur mollit ad adipisicing reprehenderit deserunt qui eu."
13 |     }
14 |   ];
15 | }
16 | 


--------------------------------------------------------------------------------
/app/components/exercises/exercise-8/solution.js:
--------------------------------------------------------------------------------
 1 | import Component from "@glimmer/component";
 2 | 
 3 | export default class ExercisesExercise8Component extends Component {
 4 |   items = [
 5 |     { title: "Full name", data: "Margot Foster" },
 6 |     { title: "Application for", data: "Backend Developer" },
 7 |     { title: "Email address", data: "margotfoster@example.com" },
 8 |     { title: "Salary expectation", data: "$120,000" },
 9 |     {
10 |       title: "About",
11 |       data:
12 |         "Fugiat ipsum ipsum deserunt culpa aute sint do nostrud anim incididunt cillum culpa consequat. Excepteur qui ipsum aliquip consequat sint. Sit id mollit nulla mollit nostrud in ea officia proident. Irure nostrud pariatur mollit ad adipisicing reprehenderit deserunt qui eu."
13 |     }
14 |   ];
15 | }
16 | 


--------------------------------------------------------------------------------
/app/components/exercises/exercise-5/exercise.hbs:
--------------------------------------------------------------------------------
 1 | <div class="p-8">
 2 |   <img
 3 |     class="w-56 rounded-lg"
 4 |     src="https://images.unsplash.com/photo-1556740738-b6a63e27c4df?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=448&q=80"
 5 |     alt="Woman paying for a purchase"
 6 |   />
 7 |   <div>
 8 |     <div class="text-sm font-bold tracking-wide text-indigo-600 uppercase">
 9 |       Marketing
10 |     </div>
11 |     <a
12 |       href="#"
13 |       class="block mt-1 text-lg font-semibold leading-tight text-gray-900 hover:underline"
14 |     >
15 |       Finding customers for your new business
16 |     </a>
17 |     <p class="mt-2 text-gray-600">
18 |       Getting a new business off the ground is a lot of hard work. Here are five ideas you can use to find your first customers.
19 |     </p>
20 |   </div>
21 | </div>


--------------------------------------------------------------------------------
/app/components/exercises/exercise-9/exercise.hbs:
--------------------------------------------------------------------------------
 1 | <!--
 2 |   Add 10 padding to the left of the input
 3 | 
 4 |   Then add the svg icon:
 5 | 
 6 |   <svg viewBox="0 0 20 20">
 7 |     <path
 8 |       fill-rule="evenodd"
 9 |       d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884zM18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"
10 |       clip-rule="evenodd"
11 |       fill="#4299E1"
12 |     ></path>
13 |   </svg>
14 | -->
15 | 
16 | <div class="p-8">
17 |   <label for="email" class="block text-sm font-medium leading-5 text-gray-700">
18 |     Email
19 |   </label>
20 |   <div class="relative mt-1 rounded-md shadow-sm">
21 |     <input
22 |       id="email"
23 |       class="block w-full placeholder-gray-400 form-input sm:text-sm sm:leading-5"
24 |       placeholder="you@example.com"
25 |     />
26 |   </div>
27 | </div>


--------------------------------------------------------------------------------
/tests/integration/components/example-1/component-test.js:
--------------------------------------------------------------------------------
 1 | import { module, test } from 'qunit';
 2 | import { setupRenderingTest } from 'ember-qunit';
 3 | import { render } from '@ember/test-helpers';
 4 | import { hbs } from 'ember-cli-htmlbars';
 5 | 
 6 | module('Integration | Component | example-1', function(hooks) {
 7 |   setupRenderingTest(hooks);
 8 | 
 9 |   test('it renders', async function(assert) {
10 |     // Set any properties with this.set('myProperty', 'value');
11 |     // Handle any actions with this.set('myAction', function(val) { ... });
12 | 
13 |     await render(hbs`<Example1 />`);
14 | 
15 |     assert.equal(this.element.textContent.trim(), '');
16 | 
17 |     // Template block usage:
18 |     await render(hbs`
19 |       <Example1>
20 |         template block text
21 |       </Example1>
22 |     `);
23 | 
24 |     assert.equal(this.element.textContent.trim(), 'template block text');
25 |   });
26 | });
27 | 


--------------------------------------------------------------------------------
/tests/integration/components/aspect-ratio-test.js:
--------------------------------------------------------------------------------
 1 | import { module, test } from 'qunit';
 2 | import { setupRenderingTest } from 'ember-qunit';
 3 | import { render } from '@ember/test-helpers';
 4 | import { hbs } from 'ember-cli-htmlbars';
 5 | 
 6 | module('Integration | Component | aspect-ratio', function(hooks) {
 7 |   setupRenderingTest(hooks);
 8 | 
 9 |   test('it renders', async function(assert) {
10 |     // Set any properties with this.set('myProperty', 'value');
11 |     // Handle any actions with this.set('myAction', function(val) { ... });
12 | 
13 |     await render(hbs`<AspectRatio />`);
14 | 
15 |     assert.equal(this.element.textContent.trim(), '');
16 | 
17 |     // Template block usage:
18 |     await render(hbs`
19 |       <AspectRatio>
20 |         template block text
21 |       </AspectRatio>
22 |     `);
23 | 
24 |     assert.equal(this.element.textContent.trim(), 'template block text');
25 |   });
26 | });
27 | 


--------------------------------------------------------------------------------
/app/components/exercises/exercise-9/solution.hbs:
--------------------------------------------------------------------------------
 1 | <div class="p-8">
 2 |   <label for="email" class="block text-sm font-medium leading-5 text-gray-700">
 3 |     Email
 4 |   </label>
 5 |   <div class="relative mt-1 rounded-md shadow-sm">
 6 |     <div
 7 |       class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none"
 8 |     >
 9 |       <svg
10 |         class="w-5 h-5 text-gray-400"
11 |         fill="currentColor"
12 |         viewBox="0 0 20 20"
13 |       >
14 |         <path
15 |           fill-rule="evenodd"
16 |           d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884zM18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"
17 |           clip-rule="evenodd"
18 |         ></path>
19 |       </svg>
20 |     </div>
21 |     <input
22 |       id="email"
23 |       class="block w-full pl-10 placeholder-gray-400 form-input sm:text-sm sm:leading-5"
24 |       placeholder="you@example.com"
25 |     />
26 |   </div>
27 | </div>


--------------------------------------------------------------------------------
/app/components/exercises/exercise-5/solution.hbs:
--------------------------------------------------------------------------------
 1 | <div class="p-8">
 2 |   <div class="flex">
 3 |     <div class="flex-shrink-0">
 4 |       <img
 5 |         class="w-56 rounded-lg"
 6 |         src="https://images.unsplash.com/photo-1556740738-b6a63e27c4df?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=448&q=80"
 7 |         alt="Woman paying for a purchase"
 8 |       />
 9 |     </div>
10 |     <div class="ml-6">
11 |       <div class="text-sm font-bold tracking-wide text-indigo-600 uppercase">
12 |         Marketing
13 |       </div>
14 |       <a
15 |         href="#"
16 |         class="block mt-1 text-lg font-semibold leading-tight text-gray-900 hover:underline"
17 |       >
18 |         Finding customers for your new business
19 |       </a>
20 |       <p class="mt-2 text-gray-600">
21 |         Getting a new business off the ground is a lot of hard work. Here are five ideas you can use to find your first customers.
22 |       </p>
23 |     </div>
24 |   </div>
25 | </div>


--------------------------------------------------------------------------------
/app/components/exercises/exercise-10/exercise.hbs:
--------------------------------------------------------------------------------
 1 | <!--
 2 |   Icon:
 3 | 
 4 |   <svg viewBox="0 0 20 20">
 5 |     <path
 6 |       fill-rule="evenodd"
 7 |       d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z"
 8 |       clip-rule="evenodd"
 9 |       fill='black'
10 |     ></path>
11 |   </svg>
12 | 
13 |   It should be color red-500
14 | -->
15 | 
16 | <div class="p-8">
17 |   <label for="email" class="block text-sm font-medium leading-5 text-gray-700">
18 |     Email
19 |   </label>
20 |   <div class="relative mt-1 rounded-md shadow-sm">
21 |     <input
22 |       id="email"
23 |       class="block w-full text-red-900 placeholder-red-300 border-red-300 form-input focus:border-red-300 focus:shadow-outline-red sm:text-sm sm:leading-5"
24 |       placeholder="you@example.com"
25 |       value="adamwathan"
26 |     />
27 |   </div>
28 |   <p class="mt-2 text-sm text-red-600">
29 |     Your password must be less than 4 characters.
30 |   </p>
31 | </div>


--------------------------------------------------------------------------------
/app/components/exercises/exercise-3/exercise.hbs:
--------------------------------------------------------------------------------
 1 | <!--
 2 |   Add "text-indigo-600 border-indigo-500" as @activeClass
 3 | -->
 4 | 
 5 | <div class="mx-8 border-b border-gray-200">
 6 |   <nav class="flex -mb-px">
 7 |     <LinkTo
 8 |       @route="exercise.child-1"
 9 |       class="px-1 py-4 text-sm font-medium leading-5 text-gray-500 whitespace-no-wrap border-b-2 border-transparent hover:text-gray-700 hover:border-gray-300"
10 |     >
11 |       My Account
12 |     </LinkTo>
13 |     <LinkTo
14 |       @route="exercise.child-2"
15 |       class="px-1 py-4 ml-8 text-sm font-medium leading-5 text-gray-500 whitespace-no-wrap border-b-2 border-transparent hover:text-gray-700 hover:border-gray-300"
16 |     >
17 |       Company
18 |     </LinkTo>
19 |     <LinkTo
20 |       @route="exercise.child-3"
21 |       class="px-1 py-4 ml-8 text-sm font-medium leading-5 text-gray-500 whitespace-no-wrap border-b-2 border-transparent hover:text-gray-700 hover:border-gray-300"
22 |     >
23 |       Team Members
24 |     </LinkTo>
25 |   </nav>
26 | </div>


--------------------------------------------------------------------------------
/app/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <title>Tailwind CSS Best Practices - EmberConf 2020</title>
 7 |     <meta name="description" content="" />
 8 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 9 | 
10 |     {{content-for "head"}}
11 | 
12 |     <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
13 |     <link integrity="" rel="stylesheet" href="{{rootURL}}assets/vendor.css" />
14 |     <link
15 |       integrity=""
16 |       rel="stylesheet"
17 |       href="{{rootURL}}assets/emberconf2020-tailwindcss-best-practices.css"
18 |     />
19 | 
20 |     {{content-for "head-footer"}}
21 |   </head>
22 |   <body>
23 |     {{content-for "body"}}
24 | 
25 |     <script src="{{rootURL}}assets/vendor.js"></script>
26 |     <script src="{{rootURL}}assets/emberconf2020-tailwindcss-best-practices.js"></script>
27 | 
28 |     {{content-for "body-footer"}}
29 |   </body>
30 | </html>
31 | 


--------------------------------------------------------------------------------
/app/components/exercises/exercise-10/solution.hbs:
--------------------------------------------------------------------------------
 1 | <div class="p-8">
 2 |   <label for="email" class="block text-sm font-medium leading-5 text-gray-700">
 3 |     Email
 4 |   </label>
 5 |   <div class="relative mt-1 rounded-md shadow-sm">
 6 |     <input
 7 |       id="email"
 8 |       class="block w-full pr-10 text-red-900 placeholder-red-300 border-red-300 form-input focus:border-red-300 focus:shadow-outline-red sm:text-sm sm:leading-5"
 9 |       placeholder="you@example.com"
10 |       value="adamwathan"
11 |     />
12 |     <div
13 |       class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none"
14 |     >
15 |       <svg class="w-5 h-5 text-red-500" fill="currentColor" viewBox="0 0 20 20">
16 |         <path
17 |           fill-rule="evenodd"
18 |           d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z"
19 |           clip-rule="evenodd"
20 |         ></path>
21 |       </svg>
22 |     </div>
23 |   </div>
24 |   <p class="mt-2 text-sm text-red-600">
25 |     Your password must be less than 4 characters.
26 |   </p>
27 | </div>


--------------------------------------------------------------------------------
/app/components/exercises/exercise-4/exercise.hbs:
--------------------------------------------------------------------------------
 1 | <div class="h-full p-4 bg-gray-50">
 2 |   <div class="inline-block rounded-md shadow-sm">
 3 |     <button
 4 |       type="button"
 5 |       class="float-left px-4 py-2 text-sm font-medium leading-5 text-gray-700 transition duration-150 ease-in-out bg-white border border-gray-300 rounded-l-md hover:text-gray-500 focus:outline-none active:bg-gray-100 active:text-gray-700"
 6 |     >
 7 |       Years
 8 |     </button>
 9 |     <button
10 |       type="button"
11 |       class="float-left px-4 py-2 -ml-px text-sm font-medium leading-5 text-gray-700 transition duration-150 ease-in-out bg-white border border-gray-300 hover:text-gray-500 focus:outline-none active:bg-gray-100 active:text-gray-700"
12 |     >
13 |       Months
14 |     </button>
15 |     <button
16 |       type="button"
17 |       class="float-left px-4 py-2 -ml-px text-sm font-medium leading-5 text-gray-700 transition duration-150 ease-in-out bg-white border border-gray-300 rounded-r-md hover:text-gray-500 focus:outline-none active:bg-gray-100 active:text-gray-700"
18 |     >
19 |       Days
20 |     </button>
21 |   </div>
22 | </div>


--------------------------------------------------------------------------------
/app/components/exercises/exercise-8/solution.hbs:
--------------------------------------------------------------------------------
 1 | <div class="h-full p-8 bg-gray-50">
 2 |   <div class="overflow-hidden bg-white shadow lg:rounded-lg">
 3 |     <div class="px-4 py-5 border-b border-gray-200 lg:px-6">
 4 |       <h3 class="text-lg font-medium leading-6 text-gray-900">
 5 |         Applicant Information
 6 |       </h3>
 7 |       <p class="max-w-2xl mt-1 text-sm leading-5 text-gray-500">
 8 |         Personal details and application.
 9 |       </p>
10 |     </div>
11 |     <div class="px-4 py-5 lg:p-0">
12 |       <dl>
13 |         {{#each items as |item index|}}
14 |           <div
15 |             class="lg:grid lg:grid-cols-3 lg:gap-4 lg:px-6 lg:py-5
16 | 
17 | 
18 |               {{if (gt index 0) "mt-8 lg:mt-0 lg:border-t lg:border-gray-200"}}"
19 |           >
20 |             <dt class="text-sm font-medium leading-5 text-gray-500">
21 |               {{item.title}}
22 |             </dt>
23 |             <dd
24 |               class="mt-1 text-sm leading-5 text-gray-900 lg:mt-0 lg:col-span-2"
25 |             >
26 |               {{item.data}}
27 |             </dd>
28 |           </div>
29 |         {{/each}}
30 |       </dl>
31 |     </div>
32 |   </div>
33 | </div>


--------------------------------------------------------------------------------
/app/components/exercises/exercise-4/solution.hbs:
--------------------------------------------------------------------------------
 1 | <div class="h-full p-4 bg-gray-50">
 2 |   <div class="flex justify-center">
 3 |     <div class="flex rounded-md shadow-sm">
 4 |       <button
 5 |         type="button"
 6 |         class="px-4 py-2 text-sm font-medium leading-5 text-gray-700 transition duration-150 ease-in-out bg-white border border-gray-300 rounded-l-md hover:text-gray-500 focus:outline-none active:bg-gray-100 active:text-gray-700"
 7 |       >
 8 |         Years
 9 |       </button>
10 |       <button
11 |         type="button"
12 |         class="px-4 py-2 -ml-px text-sm font-medium leading-5 text-gray-700 transition duration-150 ease-in-out bg-white border border-gray-300 hover:text-gray-500 focus:outline-none active:bg-gray-100 active:text-gray-700"
13 |       >
14 |         Months
15 |       </button>
16 |       <button
17 |         type="button"
18 |         class="px-4 py-2 -ml-px text-sm font-medium leading-5 text-gray-700 transition duration-150 ease-in-out bg-white border border-gray-300 rounded-r-md hover:text-gray-500 focus:outline-none active:bg-gray-100 active:text-gray-700"
19 |       >
20 |         Days
21 |       </button>
22 |     </div>
23 |   </div>
24 | </div>


--------------------------------------------------------------------------------
/app/controllers/application.js:
--------------------------------------------------------------------------------
 1 | import Controller from "@ember/controller";
 2 | import { action } from "@ember/object";
 3 | import { tracked } from "@glimmer/tracking";
 4 | import { inject as service } from "@ember/service";
 5 | 
 6 | export default class ApplicationController extends Controller {
 7 |   @service router;
 8 |   @tracked sidebarIsOpen;
 9 | 
10 |   exercisesCount = 13;
11 | 
12 |   get currentExercise() {
13 |     let slug = this.router.currentRoute.parent.params.exercise_slug;
14 | 
15 |     return slug.replace("exercise-", "");
16 |   }
17 | 
18 |   get previousExercise() {
19 |     return +this.currentExercise > 1 ? +this.currentExercise - 1 : null;
20 |   }
21 | 
22 |   get nextExercise() {
23 |     return +this.currentExercise < this.exercisesCount
24 |       ? +this.currentExercise + 1
25 |       : null;
26 |   }
27 | 
28 |   @action
29 |   toggleSidebarIsOpen() {
30 |     this.sidebarIsOpen = !this.sidebarIsOpen;
31 |   }
32 | 
33 |   @action
34 |   transitionToPreviousExercise() {
35 |     this.router.transitionTo(`/exercise-${this.previousExercise}`);
36 |   }
37 | 
38 |   @action
39 |   transitionToNextExercise() {
40 |     this.router.transitionTo(`/exercise-${this.nextExercise}`);
41 |   }
42 | }
43 | 


--------------------------------------------------------------------------------
/app/components/exercises/exercise-3/solution.hbs:
--------------------------------------------------------------------------------
 1 | <div class="mx-8 border-b border-gray-200">
 2 |   <nav class="flex -mb-px">
 3 |     <Final::Link
 4 |       @route="exercise.child-1"
 5 |       class="px-1 py-4 text-sm font-medium leading-5 whitespace-no-wrap border-b-2 border-transparent"
 6 |       @inactiveClass="text-gray-500 hover:text-gray-700 hover:border-gray-300"
 7 |       @activeClass="text-indigo-600 border-indigo-500"
 8 |     >
 9 |       My Account
10 |     </Final::Link>
11 |     <Final::Link
12 |       @route="exercise.child-2"
13 |       class="px-1 py-4 ml-8 text-sm font-medium leading-5 whitespace-no-wrap border-b-2 border-transparent"
14 |       @inactiveClass="text-gray-500 hover:text-gray-700 hover:border-gray-300"
15 |       @activeClass="text-indigo-600 border-indigo-500"
16 |     >
17 |       Company
18 |     </Final::Link>
19 |     <Final::Link
20 |       @route="exercise.child-3"
21 |       class="px-1 py-4 ml-8 text-sm font-medium leading-5 whitespace-no-wrap border-b-2 border-transparent"
22 |       @inactiveClass="text-gray-500 hover:text-gray-700 hover:border-gray-300"
23 |       @activeClass="text-indigo-600 border-indigo-500"
24 |     >
25 |       Team Members
26 |     </Final::Link>
27 |   </nav>
28 | </div>


--------------------------------------------------------------------------------
/app/components/exercises/exercise-8/exercise.hbs:
--------------------------------------------------------------------------------
 1 | <!--
 2 |   Add grid on lg: screen. Hint: it's a three-column grid.
 3 | 
 4 |   Look up "Grid Column Start / End" in Tailwind docs
 5 | -->
 6 | 
 7 | <div class="h-full p-8 bg-gray-50">
 8 |   <div class="overflow-hidden bg-white shadow lg:rounded-lg">
 9 |     <div class="px-4 py-5 border-b border-gray-200 lg:px-6">
10 |       <h3 class="text-lg font-medium leading-6 text-gray-900">
11 |         Applicant Information
12 |       </h3>
13 |       <p class="max-w-2xl mt-1 text-sm leading-5 text-gray-500">
14 |         Personal details and application.
15 |       </p>
16 |     </div>
17 |     <div class="px-4 py-5 lg:p-0">
18 |       <dl>
19 |         {{#each items as |item index|}}
20 |           <div
21 |             class="lg:px-6 lg:py-5
22 | 
23 | 
24 |               {{if (gt index 0) "mt-8 lg:mt-0 lg:border-t lg:border-gray-200"}}"
25 |           >
26 |             <dt class="text-sm font-medium leading-5 text-gray-500">
27 |               {{item.title}}
28 |             </dt>
29 |             <dd class="mt-1 text-sm leading-5 text-gray-900 lg:mt-0">
30 |               {{item.data}}
31 |             </dd>
32 |           </div>
33 |         {{/each}}
34 |       </dl>
35 |     </div>
36 |   </div>
37 | </div>


--------------------------------------------------------------------------------
/tests/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <title>Tailwind CSS Best Practices - EmberConf 2020</title>
 7 |     <meta name="description" content="" />
 8 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 9 | 
10 |     {{content-for "head"}} {{content-for "test-head"}}
11 | 
12 |     <link rel="stylesheet" href="{{rootURL}}assets/vendor.css" />
13 |     <link
14 |       rel="stylesheet"
15 |       href="{{rootURL}}assets/emberconf2020-tailwindcss-best-practices.css"
16 |     />
17 |     <link rel="stylesheet" href="{{rootURL}}assets/test-support.css" />
18 | 
19 |     {{content-for "head-footer"}} {{content-for "test-head-footer"}}
20 |   </head>
21 |   <body>
22 |     {{content-for "body"}} {{content-for "test-body"}}
23 | 
24 |     <script src="/testem.js" integrity=""></script>
25 |     <script src="{{rootURL}}assets/vendor.js"></script>
26 |     <script src="{{rootURL}}assets/test-support.js"></script>
27 |     <script src="{{rootURL}}assets/emberconf2020-tailwindcss-best-practices.js"></script>
28 |     <script src="{{rootURL}}assets/tests.js"></script>
29 | 
30 |     {{content-for "body-footer"}} {{content-for "test-body-footer"}}
31 |   </body>
32 | </html>
33 | 


--------------------------------------------------------------------------------
/app/components/exercises/exercise-12/exercise.hbs:
--------------------------------------------------------------------------------
 1 | <div class="flex justify-center pt-8">
 2 |   <span class="relative z-0 inline-flex rounded-md shadow-sm">
 3 |     <button
 4 |       type="button"
 5 |       class="relative inline-flex items-center px-4 py-2 text-sm font-medium leading-5 text-gray-700 transition duration-150 ease-in-out bg-white border border-gray-300 rounded-l-md hover:text-gray-500 focus:z-10 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-100 active:text-gray-700"
 6 |     >
 7 |       Years
 8 |     </button>
 9 |     <button
10 |       type="button"
11 |       class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium leading-5 text-gray-700 transition duration-150 ease-in-out bg-white border border-gray-300 hover:text-gray-500 focus:z-10 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-100 active:text-gray-700"
12 |     >
13 |       Months
14 |     </button>
15 |     <button
16 |       type="button"
17 |       class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium leading-5 text-gray-700 transition duration-150 ease-in-out bg-white border border-gray-300 rounded-r-md hover:text-gray-500 focus:z-10 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-100 active:text-gray-700"
18 |     >
19 |       Days
20 |     </button>
21 |   </span>
22 | </div>


--------------------------------------------------------------------------------
/ember-cli-build.js:
--------------------------------------------------------------------------------
 1 | "use strict";
 2 | 
 3 | const EmberApp = require("ember-cli/lib/broccoli/ember-app");
 4 | 
 5 | module.exports = function(defaults) {
 6 |   let app = new EmberApp(defaults, {
 7 |     snippetPaths: ["app/exercises"],
 8 |     "ember-prism": {
 9 |       plugins: ["normalize-plugins"]
10 |     },
11 | 
12 |     postcssOptions: {
13 |       compile: {
14 |         enabled: true,
15 |         plugins: [
16 |           require("tailwindcss")("./app/styles/tailwind.config.js"),
17 |           require("autoprefixer")
18 |         ],
19 |         cacheExclude: [],
20 |         cacheInclude: [/.*\.(css|scss)$/, /.tailwind\.config\.js$/]
21 |       }
22 |     }
23 |   });
24 | 
25 |   // Use `app.import` to add additional libraries to the generated
26 |   // output files.
27 |   app.import("node_modules/focus-visible/dist/focus-visible.min.js");
28 |   //
29 |   // If you need to use different assets in different
30 |   // environments, specify an object as the first parameter. That
31 |   // object's keys should be the environment name and the values
32 |   // should be the asset to use in that environment.
33 |   //
34 |   // If the library that you are including contains AMD or ES6
35 |   // modules that you would like to import into your application
36 |   // please specify an object with the list of modules as keys
37 |   // along with the exports of each module as its value.
38 | 
39 |   return app.toTree();
40 | };
41 | 


--------------------------------------------------------------------------------
/app/components/exercises/exercise-12/solution.hbs:
--------------------------------------------------------------------------------
 1 | <div class="flex justify-center pt-8">
 2 |   <span class="relative z-0 inline-flex rounded-md shadow-sm">
 3 |     <button
 4 |       type="button"
 5 |       class="relative inline-flex items-center px-4 py-2 text-sm font-medium leading-5 text-gray-700 transition duration-150 ease-in-out bg-white border border-gray-300 rounded-l-md hover:text-gray-500 focus-visible:z-10 focus:outline-none focus-visible:border-blue-300 focus-visible:shadow-outline-blue active:bg-gray-100 active:text-gray-700"
 6 |     >
 7 |       Years
 8 |     </button>
 9 |     <button
10 |       type="button"
11 |       class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium leading-5 text-gray-700 transition duration-150 ease-in-out bg-white border border-gray-300 hover:text-gray-500 focus-visible:z-10 focus:outline-none focus-visible:border-blue-300 focus-visible:shadow-outline-blue active:bg-gray-100 active:text-gray-700"
12 |     >
13 |       Months
14 |     </button>
15 |     <button
16 |       type="button"
17 |       class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium leading-5 text-gray-700 transition duration-150 ease-in-out bg-white border border-gray-300 rounded-r-md hover:text-gray-500 focus-visible:z-10 focus:outline-none focus-visible:border-blue-300 focus-visible:shadow-outline-blue active:bg-gray-100 active:text-gray-700"
18 |     >
19 |       Days
20 |     </button>
21 |   </span>
22 | </div>


--------------------------------------------------------------------------------
/config/environment.js:
--------------------------------------------------------------------------------
 1 | "use strict";
 2 | 
 3 | module.exports = function(environment) {
 4 |   let ENV = {
 5 |     modulePrefix: "emberconf2020-tailwindcss-best-practices",
 6 |     environment,
 7 |     rootURL: "/",
 8 |     locationType: "auto",
 9 |     EmberENV: {
10 |       FEATURES: {
11 |         // Here you can enable experimental features on an ember canary build
12 |         // e.g. EMBER_NATIVE_DECORATOR_SUPPORT: true
13 |       },
14 |       EXTEND_PROTOTYPES: {
15 |         // Prevent Ember Data from overriding Date.parse.
16 |         Date: false
17 |       }
18 |     },
19 | 
20 |     APP: {
21 |       // Here you can pass flags/options to your application instance
22 |       // when it is created
23 |     }
24 |   };
25 | 
26 |   if (environment === "development") {
27 |     // ENV.APP.LOG_RESOLVER = true;
28 |     // ENV.APP.LOG_ACTIVE_GENERATION = true;
29 |     // ENV.APP.LOG_TRANSITIONS = true;
30 |     // ENV.APP.LOG_TRANSITIONS_INTERNAL = true;
31 |     // ENV.APP.LOG_VIEW_LOOKUPS = true;
32 |   }
33 | 
34 |   if (environment === "test") {
35 |     // Testem prefers this...
36 |     ENV.locationType = "none";
37 | 
38 |     // keep test console output quieter
39 |     ENV.APP.LOG_ACTIVE_GENERATION = false;
40 |     ENV.APP.LOG_VIEW_LOOKUPS = false;
41 | 
42 |     ENV.APP.rootElement = "#ember-testing";
43 |     ENV.APP.autoboot = false;
44 |   }
45 | 
46 |   if (environment === "production") {
47 |     // here you can enable a production-specific feature
48 |   }
49 | 
50 |   return ENV;
51 | };
52 | 


--------------------------------------------------------------------------------
/app/components/exercises/exercise-7/exercise.hbs:
--------------------------------------------------------------------------------
 1 | <div class="h-full p-8 bg-gray-100">
 2 |   <h3 class="text-lg font-medium leading-6 text-gray-900">
 3 |     Last 30 days
 4 |   </h3>
 5 |   <div class="mt-5">
 6 |     <div class="overflow-hidden bg-white rounded-lg shadow">
 7 |       <div class="px-4 py-5 lg:p-6">
 8 |         <dl>
 9 |           <dt class="text-sm font-medium leading-5 text-gray-500 truncate">
10 |             Total Subscribers
11 |           </dt>
12 |           <dd class="mt-1 text-3xl font-semibold leading-9 text-gray-900">
13 |             71,897
14 |           </dd>
15 |         </dl>
16 |       </div>
17 |     </div>
18 |     <div class="overflow-hidden bg-white rounded-lg shadow">
19 |       <div class="px-4 py-5 lg:p-6">
20 |         <dl>
21 |           <dt class="text-sm font-medium leading-5 text-gray-500 truncate">
22 |             Avg. Open Rate
23 |           </dt>
24 |           <dd class="mt-1 text-3xl font-semibold leading-9 text-gray-900">
25 |             58.16%
26 |           </dd>
27 |         </dl>
28 |       </div>
29 |     </div>
30 |     <div class="overflow-hidden bg-white rounded-lg shadow">
31 |       <div class="px-4 py-5 lg:p-6">
32 |         <dl>
33 |           <dt class="text-sm font-medium leading-5 text-gray-500 truncate">
34 |             Avg. Click Rate
35 |           </dt>
36 |           <dd class="mt-1 text-3xl font-semibold leading-9 text-gray-900">
37 |             24.57%
38 |           </dd>
39 |         </dl>
40 |       </div>
41 |     </div>
42 |   </div>
43 | </div>


--------------------------------------------------------------------------------
/app/components/exercises/exercise-1/exercise.hbs:
--------------------------------------------------------------------------------
 1 | <article>
 2 |   <h1>
 3 |     Utility-First
 4 |   </h1>
 5 |   <p>
 6 |     Traditionally, whenever you need to style something on the web, you write CSS. With Tailwind, you style elements by applying pre-existing classes directly in your HTML.
 7 |   </p>
 8 |   <p>
 9 |     Once you've actually built something this way, you'll quickly notice some really important benefits:
10 |   </p>
11 |   <ul>
12 |     <li>
13 |       You aren't wasting energy inventing class names.
14 |     </li>
15 |     <li>
16 |       Your CSS stops growing.
17 |     </li>
18 |     <li>
19 |       Making changes feels safer.
20 |     </li>
21 |   </ul>
22 |   <p>
23 |     When you realize how productive you can be working exclusively in HTML with predefined utility classes, working any other way will feel like torture.
24 |   </p>
25 |   <p>
26 |     The biggest maintainability concern when using a utility-first approach is managing commonly repeated utility combinations. This is easily solved by extracting components, either as template partials/JavaScript components, or using Tailwind's @apply feature to create abstractions around common utility patterns.
27 |   </p>
28 |   <p>
29 |     Aside from that, maintaining a utility-first CSS project turns out to be a lot easier than maintaining a large CSS codebase, simply because HTML is so much easier to maintain than CSS. Large companies like GitHub, Heroku, Kickstarter, Twitch, Segment, and more are using this approach with great success.
30 |   </p>
31 | </article>


--------------------------------------------------------------------------------
/app/components/exercises/exercise-7/solution.hbs:
--------------------------------------------------------------------------------
 1 | <div class="h-full p-8 bg-gray-100">
 2 |   <h3 class="text-lg font-medium leading-6 text-gray-900">
 3 |     Last 30 days
 4 |   </h3>
 5 |   <div class="grid grid-cols-1 gap-5 mt-5 lg:grid-cols-3">
 6 |     <div class="overflow-hidden bg-white rounded-lg shadow">
 7 |       <div class="px-4 py-5 lg:p-6">
 8 |         <dl>
 9 |           <dt class="text-sm font-medium leading-5 text-gray-500 truncate">
10 |             Total Subscribers
11 |           </dt>
12 |           <dd class="mt-1 text-3xl font-semibold leading-9 text-gray-900">
13 |             71,897
14 |           </dd>
15 |         </dl>
16 |       </div>
17 |     </div>
18 |     <div class="overflow-hidden bg-white rounded-lg shadow">
19 |       <div class="px-4 py-5 lg:p-6">
20 |         <dl>
21 |           <dt class="text-sm font-medium leading-5 text-gray-500 truncate">
22 |             Avg. Open Rate
23 |           </dt>
24 |           <dd class="mt-1 text-3xl font-semibold leading-9 text-gray-900">
25 |             58.16%
26 |           </dd>
27 |         </dl>
28 |       </div>
29 |     </div>
30 |     <div class="overflow-hidden bg-white rounded-lg shadow">
31 |       <div class="px-4 py-5 lg:p-6">
32 |         <dl>
33 |           <dt class="text-sm font-medium leading-5 text-gray-500 truncate">
34 |             Avg. Click Rate
35 |           </dt>
36 |           <dd class="mt-1 text-3xl font-semibold leading-9 text-gray-900">
37 |             24.57%
38 |           </dd>
39 |         </dl>
40 |       </div>
41 |     </div>
42 |   </div>
43 | </div>


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   parser: "babel-eslint",
 4 |   parserOptions: {
 5 |     ecmaVersion: 2018,
 6 |     sourceType: "module",
 7 |     ecmaFeatures: {
 8 |       legacyDecorators: true
 9 |     }
10 |   },
11 |   plugins: ["ember"],
12 |   extends: ["eslint:recommended", "plugin:ember/recommended"],
13 |   env: {
14 |     browser: true
15 |   },
16 |   rules: {
17 |     "ember/no-jquery": "error",
18 |     "no-unused-vars": ["error", { args: "none" }],
19 |     "no-console": "off",
20 |     "ember/avoid-leaking-state-in-ember-objects": "off"
21 |   },
22 |   overrides: [
23 |     // node files
24 |     {
25 |       files: [
26 |         ".eslintrc.js",
27 |         ".template-lintrc.js",
28 |         "ember-cli-build.js",
29 |         "tailwind.config.js",
30 |         "postcss.config.js",
31 |         "testem.js",
32 |         "blueprints/*/index.js",
33 |         "config/**/*.js",
34 |         "lib/*/index.js",
35 |         "server/**/*.js"
36 |       ],
37 |       parserOptions: {
38 |         sourceType: "script"
39 |       },
40 |       env: {
41 |         browser: false,
42 |         node: true
43 |       },
44 |       plugins: ["node"],
45 |       rules: Object.assign(
46 |         {},
47 |         require("eslint-plugin-node").configs.recommended.rules,
48 |         {
49 |           // add your custom rules and overrides for node files here
50 | 
51 |           // this can be removed once the following is fixed
52 |           // https://github.com/mysticatea/eslint-plugin-node/issues/77
53 |           "node/no-unpublished-require": "off"
54 |         }
55 |       )
56 |     }
57 |   ]
58 | };
59 | 


--------------------------------------------------------------------------------
/app/components/exercises/exercise-6/solution.hbs:
--------------------------------------------------------------------------------
 1 | <article class="flex flex-col items-center px-4 mt-4">
 2 |   <h1 class="w-full max-w-md text-xl font-bold">
 3 |     Lowest Common Ancestor
 4 |   </h1>
 5 | 
 6 |   <Final::Text class="mt-4">
 7 |     One of the biggest challenges when writing a JavaScript application is keeping multiple parts of the interface in sync. A user interaction in one part of the interface often affects data in another. If not managed well, this data can end up in multiple places, but with inconsistent values.
 8 |   </Final::Text>
 9 | 
10 |   <div class="-mx-4">
11 |     <img
12 |       class="object-cover object-bottom w-full h-48 my-6"
13 |       src="https://source.unsplash.com/ots0EOYuGtU"
14 |     />
15 |   </div>
16 | 
17 |   <Final::Text class="mt-4">
18 |     In the past few years, the JavaScript community has learned a lot about how to deal with this problem. The solution involves the principle of the Lowest Common Ancestor. To explain this principle, let's look at some interface elements you might build while working on a real-world application.
19 |   </Final::Text>
20 | 
21 |   <Final::Text class="mt-4">
22 |     Let's say we're building an app with a collapsible panel. If the panel isOpen, we'll show the body. Clicking the title triggers the toggleIsOpen action.
23 |   </Final::Text>
24 | 
25 |   <Final::Text class="mt-4">
26 |     Currently, our application looks like this. isOpen is the only piece of state in our application that changes. Further, the collapsible panel is the only part of the interface that needs to know about it. Because of this, it makes sense for the panel itself to "own" this piece of application state. So, we'll leave isOpen right where it is - as a simple property on the component.
27 |   </Final::Text>
28 | </article>


--------------------------------------------------------------------------------
/app/components/exercises/exercise-6/exercise.hbs:
--------------------------------------------------------------------------------
 1 | <article class="px-4 mt-4">
 2 |   <h1 class="w-full max-w-md mx-auto text-xl font-bold">
 3 |     Lowest Common Ancestor
 4 |   </h1>
 5 | 
 6 |   <p class="mt-4 text-xs font-medium text-gray-600">
 7 |     One of the biggest challenges when writing a JavaScript application is keeping multiple parts of the interface in sync. A user interaction in one part of the interface often affects data in another. If not managed well, this data can end up in multiple places, but with inconsistent values.
 8 |   </p>
 9 | 
10 |   <div class="-mx-4">
11 |     <img
12 |       class="object-cover object-bottom w-full h-48 my-6"
13 |       src="https://source.unsplash.com/ots0EOYuGtU"
14 |     />
15 |   </div>
16 | 
17 |   <p class="mt-4 text-xs font-medium text-gray-600">
18 |     In the past few years, the JavaScript community has learned a lot about how to deal with this problem. The solution involves the principle of the Lowest Common Ancestor. To explain this principle, let's look at some interface elements you might build while working on a real-world application.
19 |   </p>
20 | 
21 |   <p class="mt-4 text-xs font-medium text-gray-600">
22 |     Let's say we're building an app with a collapsible panel. If the panel isOpen, we'll show the body. Clicking the title triggers the toggleIsOpen action.
23 |   </p>
24 | 
25 |   <p class="mt-4 text-xs font-medium text-gray-600">
26 |     Currently, our application looks like this. isOpen is the only piece of state in our application that changes. Further, the collapsible panel is the only part of the interface that needs to know about it. Because of this, it makes sense for the panel itself to "own" this piece of application state. So, we'll leave isOpen right where it is - as a simple property on the component.
27 |   </p>
28 | </article>


--------------------------------------------------------------------------------
/app/components/exercises/exercise-11/exercise.hbs:
--------------------------------------------------------------------------------
 1 | <div class="p-8">
 2 |   <label class="block">
 3 |     <span class="text-gray-700">
 4 |       Name
 5 |     </span>
 6 |     <input class="block w-full mt-1 form-input" placeholder="Jane Doe" />
 7 |   </label>
 8 | 
 9 |   <div class="mt-4">
10 |     <span class="text-gray-700">
11 |       Account Type
12 |     </span>
13 |     <div class="mt-2">
14 |       <label class="inline-flex items-center">
15 |         <input
16 |           type="radio"
17 |           class="form-radio"
18 |           name="accountType"
19 |           value="personal"
20 |         />
21 |         <span class="ml-2">
22 |           Personal
23 |         </span>
24 |       </label>
25 |       <label class="inline-flex items-center ml-6">
26 |         <input
27 |           type="radio"
28 |           class="form-radio"
29 |           name="accountType"
30 |           value="busines"
31 |         />
32 |         <span class="ml-2">
33 |           Business
34 |         </span>
35 |       </label>
36 |     </div>
37 |   </div>
38 | 
39 |   <label class="block mt-4">
40 |     <span class="text-gray-700">
41 |       Requested Limit
42 |     </span>
43 |     <select class="block w-full mt-1 form-select">
44 |       <option>
45 |         $1,000
46 |       </option>
47 |       <option>
48 |         $5,000
49 |       </option>
50 |       <option>
51 |         $10,000
52 |       </option>
53 |       <option>
54 |         $25,000
55 |       </option>
56 |     </select>
57 |   </label>
58 | 
59 |   <div class="flex mt-6">
60 |     <label class="flex items-center">
61 |       <input type="checkbox" class="form-checkbox" />
62 |       <span class="ml-2">
63 |         I agree to the
64 |         <span class="underline">
65 |           privacy policy
66 |         </span>
67 |       </span>
68 |     </label>
69 |   </div>
70 | </div>


--------------------------------------------------------------------------------
/app/components/exercises/exercise-11/solution.hbs:
--------------------------------------------------------------------------------
 1 | <div class="p-8">
 2 |   <label class="block">
 3 |     <span class="text-gray-700">
 4 |       Name
 5 |     </span>
 6 |     <input class="block w-full mt-1 form-input" placeholder="Jane Doe" />
 7 |   </label>
 8 | 
 9 |   <div class="mt-4">
10 |     <span class="text-gray-700">
11 |       Account Type
12 |     </span>
13 |     <div class="mt-2">
14 |       <label class="inline-flex items-center">
15 |         <input
16 |           type="radio"
17 |           class="form-radio"
18 |           name="accountType"
19 |           value="personal"
20 |         />
21 |         <span class="ml-2">
22 |           Personal
23 |         </span>
24 |       </label>
25 |       <label class="inline-flex items-center ml-6">
26 |         <input
27 |           type="radio"
28 |           class="form-radio"
29 |           name="accountType"
30 |           value="busines"
31 |         />
32 |         <span class="ml-2">
33 |           Business
34 |         </span>
35 |       </label>
36 |     </div>
37 |   </div>
38 | 
39 |   <label class="block mt-4">
40 |     <span class="text-gray-700">
41 |       Requested Limit
42 |     </span>
43 |     <select class="block w-full mt-1 form-select">
44 |       <option>
45 |         $1,000
46 |       </option>
47 |       <option>
48 |         $5,000
49 |       </option>
50 |       <option>
51 |         $10,000
52 |       </option>
53 |       <option>
54 |         $25,000
55 |       </option>
56 |     </select>
57 |   </label>
58 | 
59 |   <div class="flex mt-6">
60 |     <label class="flex items-center">
61 |       <input type="checkbox" class="form-checkbox" />
62 |       <span class="ml-2">
63 |         I agree to the
64 |         <span class="underline">
65 |           privacy policy
66 |         </span>
67 |       </span>
68 |     </label>
69 |   </div>
70 | </div>


--------------------------------------------------------------------------------
/app/components/exercises/exercise-1/solution.hbs:
--------------------------------------------------------------------------------
 1 | <div class="h-full p-4 overflow-y-auto bg-blue-300">
 2 |   <article
 3 |     class="max-w-lg p-8 mx-auto mt-8 mb-12 text-gray-700 bg-white rounded shadow-xl"
 4 |   >
 5 |     <h1 class="text-4xl font-bold leading-8 text-center text-gray-800">
 6 |       Utility-First
 7 |     </h1>
 8 |     <p class="mt-12">
 9 |       Traditionally, whenever you need to style something on the web, you write CSS. With Tailwind, you style elements by applying pre-existing classes directly in your HTML.
10 |     </p>
11 |     <p class="mt-4">
12 |       Once you've actually built something this way, you'll quickly notice some really important benefits:
13 |     </p>
14 |     <ul class="mt-4 ml-8 list-disc">
15 |       <li>
16 |         You aren't wasting energy inventing class names.
17 |       </li>
18 |       <li>
19 |         Your CSS stops growing.
20 |       </li>
21 |       <li>
22 |         Making changes feels safer.
23 |       </li>
24 |     </ul>
25 |     <p class="mt-4">
26 |       When you realize how productive you can be working exclusively in HTML with predefined utility classes, working any other way will feel like torture.
27 |     </p>
28 |     <p class="mt-4">
29 |       The biggest maintainability concern when using a utility-first approach is managing commonly repeated utility combinations. This is easily solved by extracting components, either as template partials/JavaScript components, or using Tailwind's @apply feature to create abstractions around common utility patterns.
30 |     </p>
31 |     <p class="mt-4">
32 |       Aside from that, maintaining a utility-first CSS project turns out to be a lot easier than maintaining a large CSS codebase, simply because HTML is so much easier to maintain than CSS. Large companies like GitHub, Heroku, Kickstarter, Twitch, Segment, and more are using this approach with great success.
33 |     </p>
34 |   </article>
35 | </div>


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "emberconf2020-tailwindcss-best-practices",
 3 |   "version": "0.0.0",
 4 |   "private": true,
 5 |   "description": "",
 6 |   "repository": "",
 7 |   "license": "MIT",
 8 |   "author": "",
 9 |   "directories": {
10 |     "doc": "doc",
11 |     "test": "tests"
12 |   },
13 |   "scripts": {
14 |     "build": "ember build --environment=production",
15 |     "lint:hbs": "ember-template-lint .",
16 |     "lint:js": "eslint .",
17 |     "start": "ember serve",
18 |     "test": "ember test"
19 |   },
20 |   "devDependencies": {
21 |     "@ember/optional-features": "^1.3.0",
22 |     "@ember/render-modifiers": "^1.0.2",
23 |     "@glimmer/component": "^1.0.0",
24 |     "@glimmer/tracking": "^1.0.0",
25 |     "@tailwindcss/custom-forms": "^0.2.1",
26 |     "@tailwindcss/ui": "^0.1.3",
27 |     "autoprefixer": "^9.7.5",
28 |     "babel-eslint": "^10.0.3",
29 |     "broccoli-asset-rev": "^3.0.0",
30 |     "ember-auto-import": "^1.5.3",
31 |     "ember-cli": "~3.17.0",
32 |     "ember-cli-app-version": "^3.2.0",
33 |     "ember-cli-babel": "^7.17.2",
34 |     "ember-cli-dependency-checker": "^3.2.0",
35 |     "ember-cli-eslint": "^5.1.0",
36 |     "ember-cli-htmlbars": "^4.2.2",
37 |     "ember-cli-inject-live-reload": "^2.0.2",
38 |     "ember-cli-postcss": "^6.0.0",
39 |     "ember-cli-sri": "^2.1.1",
40 |     "ember-cli-string-helpers": "^4.0.6",
41 |     "ember-cli-uglify": "^3.0.0",
42 |     "ember-code-snippet": "^3.0.0",
43 |     "ember-composable-helpers": "^3.1.1",
44 |     "ember-data": "~3.17.0",
45 |     "ember-export-application-global": "^2.0.1",
46 |     "ember-fetch": "^7.0.0",
47 |     "ember-load-initializers": "^2.1.1",
48 |     "ember-math-helpers": "^2.13.0",
49 |     "ember-maybe-import-regenerator": "^0.1.6",
50 |     "ember-prism": "^0.6.0",
51 |     "ember-qunit": "^4.6.0",
52 |     "ember-render-helpers": "^0.1.1",
53 |     "ember-resolver": "^7.0.0",
54 |     "ember-source": "~3.17.1",
55 |     "ember-truth-helpers": "^2.1.0",
56 |     "eslint-plugin-ember": "^7.7.2",
57 |     "eslint-plugin-node": "^11.0.0",
58 |     "faker": "^4.1.0",
59 |     "focus-visible": "^5.0.2",
60 |     "loader.js": "^4.7.0",
61 |     "postcss-cli": "^7.1.0",
62 |     "qunit-dom": "^1.0.0",
63 |     "tailwindcss": "^1.2.0"
64 |   },
65 |   "engines": {
66 |     "node": "10.* || >= 12"
67 |   },
68 |   "ember": {
69 |     "edition": "octane"
70 |   },
71 |   "dependencies": {
72 |     "graphql": "^14.6.0"
73 |   }
74 | }
75 | 


--------------------------------------------------------------------------------
/app/components/exercises/exercise-13/solution.hbs:
--------------------------------------------------------------------------------
 1 | <div class="min-h-screen bg-white">
 2 |   <nav class="bg-white border-b border-gray-200">
 3 |     <div class="px-4 mx-auto max-w-7xl md:px-6 lg:px-8">
 4 |       <div class="flex justify-between h-16">
 5 |         <div class="flex">
 6 |           <!-- Desktop menu -->
 7 |           <div class="hidden -ml-8 md:-my-px md:flex">
 8 |             {{#each this.links as |link|}}
 9 |               <a
10 |                 href="#"
11 |                 class="inline-flex items-center px-1 pt-1 ml-8 text-sm font-medium leading-5 text-gray-500 transition duration-150 ease-in-out border-b-2 border-transparent hover:text-gray-700 hover:border-gray-300 focus:outline-none focus:text-gray-700 focus:border-gray-300"
12 |               >
13 |                 {{link}}
14 |               </a>
15 |             {{/each}}
16 |           </div>
17 |         </div>
18 | 
19 |         <div class="flex items-center -mr-2 md:hidden">
20 |           <button
21 |             class="inline-flex items-center justify-center p-2 text-gray-400 transition duration-150 ease-in-out rounded-md hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500"
22 |             {{on "click" this.toggleIsOpen}}
23 |           >
24 |             <svg
25 |               class="w-6 h-6"
26 |               stroke="currentColor"
27 |               fill="none"
28 |               viewBox="0 0 24 24"
29 |             >
30 |               <path
31 |                 class="{{if this.isOpen "hidden" "inline-flex"}}"
32 |                 stroke-linecap="round"
33 |                 stroke-linejoin="round"
34 |                 stroke-width="2"
35 |                 d="M4 6h16M4 12h16M4 18h16"
36 |               ></path>
37 |               <path
38 |                 class="{{if this.isOpen "inline-flex" "hidden"}}"
39 |                 stroke-linecap="round"
40 |                 stroke-linejoin="round"
41 |                 stroke-width="2"
42 |                 d="M6 18L18 6M6 6l12 12"
43 |               ></path>
44 |             </svg>
45 |           </button>
46 |         </div>
47 |       </div>
48 |     </div>
49 |     <!-- Mobile menu -->
50 |     <div class="{{if this.isOpen "block" "hidden"}} md:hidden">
51 |       <div class="pt-2 pb-3">
52 |         {{#each this.links as |link|}}
53 |           <a
54 |             href="#"
55 |             class="block py-2 pl-3 pr-4 mt-1 text-base font-medium text-gray-600 transition duration-150 ease-in-out border-l-4 border-transparent hover:text-gray-800 hover:bg-gray-50 hover:border-gray-300 focus:outline-none focus:text-gray-800 focus:bg-gray-50 focus:border-gray-300"
56 |           >
57 |             {{link}}
58 |           </a>
59 |         {{/each}}
60 |       </div>
61 |     </div>
62 |   </nav>
63 | 
64 |   <div class="py-10">
65 |     <header>
66 |       <div class="px-4 mx-auto max-w-7xl md:px-6 lg:px-8">
67 |         <h1 class="text-3xl font-bold leading-tight text-gray-900">
68 |           Dashboard
69 |         </h1>
70 |       </div>
71 |     </header>
72 |     <main>
73 |       <div class="mx-auto max-w-7xl md:px-6 lg:px-8">
74 |         <div class="px-4 py-8 md:px-0">
75 |           <div
76 |             class="border-4 border-gray-200 border-dashed rounded-lg h-96"
77 |           ></div>
78 |         </div>
79 |       </div>
80 |     </main>
81 |   </div>
82 | </div>


--------------------------------------------------------------------------------
/app/components/exercises/exercise-13/exercise.hbs:
--------------------------------------------------------------------------------
  1 | <div class="min-h-screen bg-white">
  2 |   <nav class="bg-white border-b border-gray-200">
  3 |     <div class="px-4 mx-auto max-w-7xl md:px-6 lg:px-8">
  4 |       <div class="flex justify-between h-16">
  5 |         <div class="flex">
  6 |           <!-- Desktop menu -->
  7 |           <div class="hidden md:-my-px md:flex">
  8 |             <a
  9 |               href="#"
 10 |               class="inline-flex items-center px-1 pt-1 text-sm font-medium leading-5 text-gray-900 transition duration-150 ease-in-out border-b-2 border-indigo-500 focus:outline-none focus:border-indigo-700"
 11 |             >
 12 |               Dashboard
 13 |             </a>
 14 |             <a
 15 |               href="#"
 16 |               class="inline-flex items-center px-1 pt-1 ml-8 text-sm font-medium leading-5 text-gray-500 transition duration-150 ease-in-out border-b-2 border-transparent hover:text-gray-700 hover:border-gray-300 focus:outline-none focus:text-gray-700 focus:border-gray-300"
 17 |             >
 18 |               Team
 19 |             </a>
 20 |             <a
 21 |               href="#"
 22 |               class="inline-flex items-center px-1 pt-1 ml-8 text-sm font-medium leading-5 text-gray-500 transition duration-150 ease-in-out border-b-2 border-transparent hover:text-gray-700 hover:border-gray-300 focus:outline-none focus:text-gray-700 focus:border-gray-300"
 23 |             >
 24 |               Projects
 25 |             </a>
 26 |             <a
 27 |               href="#"
 28 |               class="inline-flex items-center px-1 pt-1 ml-8 text-sm font-medium leading-5 text-gray-500 transition duration-150 ease-in-out border-b-2 border-transparent hover:text-gray-700 hover:border-gray-300 focus:outline-none focus:text-gray-700 focus:border-gray-300"
 29 |             >
 30 |               Calendar
 31 |             </a>
 32 |           </div>
 33 |         </div>
 34 | 
 35 |         <div class="flex items-center -mr-2 md:hidden">
 36 |           <button
 37 |             class="inline-flex items-center justify-center p-2 text-gray-400 transition duration-150 ease-in-out rounded-md hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500"
 38 |             {{on "click" this.toggleIsOpen}}
 39 |           >
 40 |             <svg
 41 |               class="w-6 h-6"
 42 |               stroke="currentColor"
 43 |               fill="none"
 44 |               viewBox="0 0 24 24"
 45 |             >
 46 |               <path
 47 |                 class="{{if this.isOpen "hidden" "inline-flex"}}"
 48 |                 stroke-linecap="round"
 49 |                 stroke-linejoin="round"
 50 |                 stroke-width="2"
 51 |                 d="M4 6h16M4 12h16M4 18h16"
 52 |               ></path>
 53 |               <path
 54 |                 class="{{if this.isOpen "inline-flex" "hidden"}}"
 55 |                 stroke-linecap="round"
 56 |                 stroke-linejoin="round"
 57 |                 stroke-width="2"
 58 |                 d="M6 18L18 6M6 6l12 12"
 59 |               ></path>
 60 |             </svg>
 61 |           </button>
 62 |         </div>
 63 |       </div>
 64 |     </div>
 65 |     <!-- Mobile menu -->
 66 |     <div class="{{if this.isOpen "block" "hidden"}} md:hidden">
 67 |       <div class="pt-2 pb-3">
 68 |         <a
 69 |           href="#"
 70 |           class="block py-2 pl-3 pr-4 text-base font-medium text-indigo-700 transition duration-150 ease-in-out border-l-4 border-indigo-500 bg-indigo-50 focus:outline-none focus:text-indigo-800 focus:bg-indigo-100 focus:border-indigo-700"
 71 |         >
 72 |           Dashboard
 73 |         </a>
 74 |         <a
 75 |           href="#"
 76 |           class="block py-2 pl-3 pr-4 mt-1 text-base font-medium text-gray-600 transition duration-150 ease-in-out border-l-4 border-transparent hover:text-gray-800 hover:bg-gray-50 hover:border-gray-300 focus:outline-none focus:text-gray-800 focus:bg-gray-50 focus:border-gray-300"
 77 |         >
 78 |           Team
 79 |         </a>
 80 |         <a
 81 |           href="#"
 82 |           class="block py-2 pl-3 pr-4 mt-1 text-base font-medium text-gray-600 transition duration-150 ease-in-out border-l-4 border-transparent hover:text-gray-800 hover:bg-gray-50 hover:border-gray-300 focus:outline-none focus:text-gray-800 focus:bg-gray-50 focus:border-gray-300"
 83 |         >
 84 |           Projects
 85 |         </a>
 86 |         <a
 87 |           href="#"
 88 |           class="block py-2 pl-3 pr-4 mt-1 text-base font-medium text-gray-600 transition duration-150 ease-in-out border-l-4 border-transparent hover:text-gray-800 hover:bg-gray-50 hover:border-gray-300 focus:outline-none focus:text-gray-800 focus:bg-gray-50 focus:border-gray-300"
 89 |         >
 90 |           Calendar
 91 |         </a>
 92 |       </div>
 93 |     </div>
 94 |   </nav>
 95 | 
 96 |   <div class="py-10">
 97 |     <header>
 98 |       <div class="px-4 mx-auto max-w-7xl md:px-6 lg:px-8">
 99 |         <h1 class="text-3xl font-bold leading-tight text-gray-900">
100 |           Dashboard
101 |         </h1>
102 |       </div>
103 |     </header>
104 |     <main>
105 |       <div class="mx-auto max-w-7xl md:px-6 lg:px-8">
106 |         <div class="px-4 py-8 md:px-0">
107 |           <div
108 |             class="border-4 border-gray-200 border-dashed rounded-lg h-96"
109 |           ></div>
110 |         </div>
111 |       </div>
112 |     </main>
113 |   </div>
114 | </div>


--------------------------------------------------------------------------------
/app/templates/application.hbs:
--------------------------------------------------------------------------------
  1 | <div
  2 |   class="flex h-screen overflow-hidden antialiased"
  3 | >
  4 |   {{! Off-canvas menu }}
  5 |   <div class="">
  6 |     <button type='button'
  7 |       {{on 'click' this.toggleSidebarIsOpen}}
  8 |       class="
  9 |         fixed w-full inset-0 z-30 transition-opacity duration-300 ease-linear bg-gray-600 
 10 |         {{if this.sidebarIsOpen 'opacity-75 pointer-events-auto' 'opacity-0 pointer-events-none'}}
 11 |       "
 12 |     ></button>
 13 |     <div
 14 |       class="
 15 |         fixed inset-y-0 left-0 z-40 flex flex-col w-full max-w-xs duration-300 ease-in-out transform  bg-gray-800
 16 |         {{if this.sidebarIsOpen 'translate-x-0' '-translate-x-full'}}
 17 |       "
 18 |     >
 19 |       <div class="absolute top-0 right-0 p-1 -mr-14">
 20 |         {{#if this.sidebarIsOpen}}
 21 |           <button
 22 |             {{on 'click' this.toggleSidebarIsOpen}}
 23 |             type="button"
 24 |             class="flex items-center justify-center w-12 h-12 rounded-full focus:outline-none focus:bg-gray-600"
 25 |           >
 26 |             <svg
 27 |               class="w-6 h-6 text-white"
 28 |               stroke="currentColor"
 29 |               fill="none"
 30 |               viewBox="0 0 24 24"
 31 |             >
 32 |               <path
 33 |                 stroke-linecap="round"
 34 |                 stroke-linejoin="round"
 35 |                 stroke-width="2"
 36 |                 d="M6 18L18 6M6 6l12 12"
 37 |               ></path>
 38 |             </svg>
 39 |           </button>
 40 |         {{/if}}
 41 |       </div>
 42 |       <div class="flex-1 h-0 pt-5 pb-4 overflow-y-auto">
 43 |         <div class="flex items-center flex-shrink-0 px-4">
 44 |           <p class="text-xl font-semibold text-white">
 45 |             Tailwind CSS Best Practices
 46 |           </p>
 47 |         </div>
 48 |         <nav class="px-2 mt-5 app">
 49 |           {{#each (range 1 this.exercisesCount true) as |exerciseNumber|}}
 50 |             <LinkTo 
 51 |               @route="exercise"
 52 |               @model={{concat 'exercise-' exerciseNumber}}
 53 |               {{on 'click' this.toggleSidebarIsOpen}}
 54 |               class="flex items-center px-2 py-2 mt-1 text-base font-medium leading-6 text-white transition duration-150 ease-in-out rounded-md group focus:outline-none"
 55 |             >
 56 |               <svg
 57 |                 class="w-6 h-6 mr-4 text-gray-300 transition duration-150 ease-in-out group-hover:text-gray-300 group-focus:text-gray-300"
 58 |                 stroke="currentColor"
 59 |                 fill="none"
 60 |                 viewBox="0 0 24 24"
 61 |               >
 62 |                 <path
 63 |                   stroke-linecap="round"
 64 |                   stroke-linejoin="round"
 65 |                   stroke-width="2"
 66 |                   d="M3 12l9-9 9 9M5 10v10a1 1 0 001 1h3a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1h3a1 1 0 001-1V10M9 21h6"
 67 |                 ></path>
 68 |               </svg>
 69 |               Exercise {{exerciseNumber}}
 70 |             </LinkTo>
 71 |           {{/each}}
 72 |         </nav>
 73 |       </div>
 74 |     </div>
 75 |   </div>
 76 | 
 77 |   <div class="flex flex-col flex-1 w-0 overflow-hidden">
 78 |     <div class="flex items-center text-xs font-medium text-gray-500 bg-gray-100 border-b ">
 79 |       <button
 80 |         type="button"
 81 |         {{on 'click' this.toggleSidebarIsOpen}}
 82 |         class="inline-flex items-center justify-center px-2 py-0.5 m-1 transition duration-150 ease-in-out rounded-md hover:bg-gray-200 hover:text-gray-900 focus:outline-none focus:bg-gray-200"
 83 |       >
 84 |         <svg
 85 |           class="w-4 h-4 mr-1"
 86 |           stroke="currentColor"
 87 |           fill="none"
 88 |           viewBox="0 0 24 24"
 89 |         >
 90 |           <path
 91 |             stroke-linecap="round"
 92 |             stroke-linejoin="round"
 93 |             stroke-width="2"
 94 |             d="M4 6h16M4 12h16M4 18h16"
 95 |           ></path>
 96 |         </svg>
 97 |         Exercises
 98 |       </button>
 99 |       <button {{on 'click' this.transitionToPreviousExercise}}
100 |         class='
101 |           focus:outline-none px-1 py-0.5 rounded-md
102 |           {{if (not this.previousExercise) 'opacity-50 pointer-events-none' 'hover:bg-gray-200 hover:text-gray-900 '}}
103 |         '
104 |         type='button'
105 |         disabled={{not this.previousExercise}}
106 |       >
107 |         <svg class='h-4' viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
108 |       </button>
109 |       <p class='w-4 text-center py-0.5'>
110 |         {{this.currentExercise}}
111 |       </p>
112 |       <button {{on 'click' this.transitionToNextExercise}} 
113 |         class='
114 |           focus:outline-none px-1 py-0.5 rounded-md
115 |           {{if (not this.nextExercise) 'opacity-50 pointer-events-none' 'hover:bg-gray-200 hover:text-gray-900 '}}
116 |         '
117 |         type='button'
118 |         disabled={{not this.nextExercise}}
119 |       >
120 |         <svg class='h-4' viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
121 |       </button>
122 |     </div>
123 |     <main
124 |       class="relative z-0 flex flex-col flex-1 overflow-y-auto focus:outline-none"
125 |       tabindex="0"
126 |     >
127 |       {{outlet}}
128 |     </main>
129 |   </div>
130 | </div>


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # EmberConf 2020: Tailwind CSS Best Practices
  2 | 
  3 | Welcome!
  4 | 
  5 | You can view the training on YouTube:
  6 | 
  7 | [→ View the training on YouTube](https://www.youtube.com/watch?v=eTdYzNMPn1o)
  8 | 
  9 | Follow along using the instructions below.
 10 | 
 11 | ## Getting help
 12 | 
 13 | If you have any questions,
 14 | 
 15 | - DM us (@samselikoff or @ryanto) in the Ember Community Discord
 16 | - Email us at hello@embermap.com
 17 | 
 18 | ## Running the training app on your computer
 19 | 
 20 | From a directory,
 21 | 
 22 | ```sh
 23 | git clone git@github.com:embermap/emberconf-2020-tailwindcss-best-practices.git
 24 | cd emberconf-2020-tailwindcss-best-practices
 25 | yarn install
 26 | ember s
 27 | ```
 28 | 
 29 | ## Intro
 30 | 
 31 | Quick overview.
 32 | 
 33 | Some useful VSCode plugins:
 34 | 
 35 | - [Tailwind CSS IntelliSense for VS Code](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss)
 36 | - [Headwind for VS Code](https://marketplace.visualstudio.com/items?itemName=heybourn.headwind)
 37 | 
 38 | ## 1: Basic Tailwind
 39 | 
 40 | - Style a blog post
 41 | - Pseudo states
 42 | - Responsive design
 43 | 
 44 | ## 2: Extract components, not classes
 45 | 
 46 | Padding trick for fixed aspect ratio.
 47 | 
 48 | ```hbs
 49 | <div class="relative bg-red-500 pb-2/3">
 50 |   <img
 51 |     class="absolute object-cover w-full h-full"
 52 |     src="https://source.unsplash.com/_Dogn_h7Qek"
 53 |   />
 54 | </div>
 55 | ```
 56 | 
 57 | How to think about abstracting + sharing? Might reach for @apply.
 58 | 
 59 | Problem is, you still have to duplicate html structure. You need a wrapper + a child. Another problem is that you have to go to the css file and break html-first workflow.
 60 | 
 61 | Instead, use components.
 62 | 
 63 | ```hbs
 64 | <AspectRatio @ratio='16:9'>
 65 |   <img>
 66 | </AspectRatio>
 67 | ```
 68 | 
 69 | This is going to be a theme of this training. Components like this keep us in the html. That should be a goal with the abstractions you make: html-first workflow. Keeps you productive.
 70 | 
 71 | ## 3: Tailwind-friendly Component APIs
 72 | 
 73 | `<Link>` takes activeClass arg. Let's make it work.
 74 | 
 75 | Our styles are stomping each other. We need to think of an API that's Tailwind-friendly.
 76 | 
 77 | What we really want is `<Link class='' @activeClass='' @inactiveClass=''>`. Let's make it work.
 78 | 
 79 | ## 4: Layout with Flexbox
 80 | 
 81 | Old school button group here. Buttons are foated left, parent is inline-block. How to center?
 82 | 
 83 | Use text-center.
 84 | 
 85 | This is weird - we're using `text-align: center` to lay out a component?
 86 | 
 87 | With Tailwind + modern css you'll get very familiar with flexbox. Its great because it works in many more contexts and you usually don't need to worry about whether the child you're laying out is block or inline. The layout is kept more separate from the thing you're laying out. Also floats are super weird. Also the height of our group is different from the buttons – because of line-height. Again, inline elements are kinda weird.
 88 | 
 89 | [ **Exercise**: Once you have it using flexbox, copy + paste the button group so there are two. Play with the justify-* classes on the parent. ]
 90 | 
 91 | ## 5: Exercise: Practice Layout with Flexbox
 92 | 
 93 | Match the layout on the right. Notice the behavior if you shrink the viewport. You'll need to look up the "Flex Shrink" utilities on tailwindcss.com.
 94 | 
 95 | ## 6: More layout - measured text
 96 | 
 97 | Try to encapsulate the measured text in a component. Notice how you can lay it out with flexbox.
 98 | 
 99 | ## 7: Layout with Grid
100 | 
101 | Build with flexbox first. Then refactor to grid.
102 | 
103 | Grid is amazing. Gap is amazing.
104 | 
105 | ## 8: Exercise: Practice with Grid
106 | 
107 | ## 9: Working with SVG
108 | 
109 | Copy svgs in, get rid of hard-coded widths and heights. Set fill or stroke to currentColor.
110 | 
111 | ## 10: Exercise: Practice with SVG
112 | 
113 | Copy svgs in, get rid of hard-coded widths and heights. Set fill or stroke to currentColor.
114 | 
115 | ## 11: Form styling library
116 | 
117 | Forms by default aren't very "utility-friendly". There's also lots of inconsistencies across browsers.
118 | 
119 | The Custom forms plugin smoothes these out. Let's see how it works.
120 | 
121 | - https://github.com/tailwindcss/custom-forms
122 | - Make sure you have autoprefixer
123 | 
124 | ## 12: Writing a plugin for focus-visible
125 | 
126 | Polyfill: https://github.com/WICG/focus-visible
127 | 
128 | Download & import the polyfill
129 | 
130 | Impot `plugin` from Tailwind:
131 | 
132 | ```js
133 | const plugin = require("tailwindcss/plugin");
134 | ```
135 | 
136 | Write the plugin.
137 | 
138 | ```js
139 | plugin(function({ addVariant, e }) {
140 |   addVariant("focus-visible", ({ modifySelectors, separator }) => {
141 |     modifySelectors(({ className }) => {
142 |       return `.${e(
143 |         `focus-visible${separator}${className}`
144 |       )}[data-focus-visible-added]`;
145 |     });
146 |   });
147 | });
148 | ```
149 | 
150 | Add the `focus-visible` variant to the relevant plugins:
151 | 
152 | ```js
153 | variants: {
154 |   borderColor: ["responsive", "hover", "focus", "focus-visible"],
155 |   boxShadow: ["responsive", "hover", "focus", "focus-visible"],
156 |   zIndex: ["responsive", "focus", "focus-visible"]
157 | },
158 | ```
159 | 
160 | ## 13: Responsive designs for very different layouts
161 | 
162 | Finishing off with a hard lesson learned.
163 | 
164 | First, if a layout is very different between two breakpoints, just split it up.
165 | 
166 | Avoid JS device viewport width. Use CSS media queries. Robust to SSR.
167 | 
168 | ## Resources
169 | 
170 | - [Tailwind CSS](https://tailwindcss.com/)
171 | - [Tailwind CSS IntelliSense for VS Code](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss)
172 | - [Headwind for VS Code](https://marketplace.visualstudio.com/items?itemName=heybourn.headwind)
173 | - [Tailwind Custom forms plugin](https://github.com/tailwindcss/custom-forms)
174 | - [Heroicons: Free SVG icons](https://heroicons.dev/)
175 | - [Focus-visible polyfill](https://github.com/WICG/focus-visible)
176 | - [Tailwind UI](https://tailwindui.com)
177 | 


--------------------------------------------------------------------------------