Touchups and dep fixes

Author: samselikoff

CHANGELOG.md

@@ -4,6 +4,9 @@
 
 - Adds new `section` contextual component yielded from DocsViewer
 - Renames `{{docs-navbar}}` to `{{docs-header}}`
+- Removes yield for alt-logo in docs-hero (was anyone using this?)
+- Adds `style` attr to docs-hero which can be "light" or "dark". Defaults to "light".
+- Simpler /docs/template.hbs setup (viewer.main outlet)
 
 ## 0.2.4
 

addon/components/api/x-class/template.hbs

@@ -1,4 +1,4 @@
-<h1>{{class.name}}</h1>
+<h1 class='docs-h1'>{{class.name}}</h1>
 
 {{! wrapping in a div seems to work around https://github.com/ember-learn/ember-cli-addon-docs/issues/7 }}
 <div>{{{class.description}}}</div>

addon/components/docs-hero/component.js

@@ -19,6 +19,14 @@ export default Component.extend({
   layout,
   tagName: '',
 
+  /**
+    The style of the header, "light" or "dark". Defaults to light.
+
+    @argument style
+    @type String
+  */
+  style: 'light',
+
   /**
     The logo to show, one of: 'ember', 'ember-cli', or 'ember-data'
 

addon/components/docs-hero/template.hbs

@@ -1,11 +1,13 @@
-<div class="text-center text-grey-darkest py-8 md:py-16">
+<div class="
+  text-center py-8 md:py-16
+  {{if (eq style 'light') 'text-grey-darkest'}}
+  {{if (eq style 'dark') 'bg-black text-white'}}
+">
   <div class='docs-container'>
-    <h1 class='text-5xl leading-none'>
-      {{#if hasBlock}}
-        {{yield}}
-      {{else if logo}}
-        <div>
-          <span class='inline-block h-6'>
+    <h1 class='text-5xl md:text-jumbo leading-none'>
+      {{#if logo}}
+        <div class='md:-mb-1 -mt-4 md:-mt-8'>
+          <span class='inline-block h-6 opacity-50'>
             {{docs-logo logo=logo}}
           </span>
         </div>
@@ -14,8 +16,10 @@
       <span class='font-thin'>{{slimHeading}}</span>{{strongHeading}}
     </h1>
 
-    <p class='text-grey-darker text-lg mt-4 w-3/4 mx-auto leading-tight'>
+    <p class='opacity-75 text-xl mt-4 w-3/4 mx-auto leading-tight'>
       {{byline}}
     </p>
+
+    {{yield}}
   </div>
 </div>

addon/components/docs-viewer/x-nav/template.hbs

@@ -68,8 +68,9 @@
 
     <div class="mt-16 mr-2 text-xs rounded">
       <a href="https://github.com/ember-learn/ember-cli-addon-docs"
-        class='opacity-50 hover:opacity-100 transition no-underline text-inherit flex items-center'>
-        {{svg-jar 'logo-horizontal' width=22 height=16 class='mr-2'}}
+        class='opacity-50 hover:opacity-100 transition no-underline
+        text-inherit flex items-center text-grey-darkest'>
+        {{svg-jar 'addon-docs-pen' width=22 height=16 class='mr-2'}}
         <div>
           Powered by
           <span class="font-bold">AddonDocs</span>

addon/tailwind/config/modules.css

@@ -126,11 +126,14 @@ pre {
 
 /* Need to learn how to use Tailwind to generate the responsive stuff for this automatically */
 .mask-image {
-  mask-image: linear-gradient(to right, transparent, black 20px, black 90%, transparent);
+  /* Autoprefixer is in dependencies but not working on host apps */
+  -webkit-mask-image: linear-gradient(to right, transparent, black 20px, black 90%, transparent);
+          mask-image: linear-gradient(to right, transparent, black 20px, black 90%, transparent);
 }
 @media (min-width: 768px) {
   .md\:no-mask-image {
-    mask-image: none;
+    -webkit-mask-image: none;
+            mask-image: none;
   }
 }
 .overflow-momentum {

addon/tailwind/text-sizes.js

@@ -27,4 +27,6 @@ export default {
   '3xl': '1.875rem',  // 30px
   '4xl': '2.25rem',   // 36px
   '5xl': '3rem',      // 48px
+
+  'jumbo': '3.75rem'
 };

app/templates/docs/api/index.hbs

@@ -148,9 +148,16 @@ function generateResolvedTypedNavigationItems(collection, file, type) {
       fileName = segments.pop();
     }
 
+    let name;
+    if (['component', 'helper'].includes(type)) {
+      name = `{{${fileName}}}`;
+    } else {
+      name = _.upperFirst(_.camelCase(fileName));
+    }
+
     return {
       path: `${type}s/${fileName}`,
-      name: `{{${fileName}}}`
+      name
     };
   });
 }

lib/broccoli/docs-compiler.js

@@ -41,13 +41,16 @@
     "ember-cli-tailwind": "0.2.7",
     "ember-code-snippet": "ef4/ember-code-snippet",
     "ember-component-css": "^0.3.5",
+    "ember-concurrency": "^0.8.16",
     "ember-data": "^2.18.0",
     "ember-fetch": "^3.4.4",
     "ember-href-to": "^1.15.1",
     "ember-keyboard": "^3.0.0",
     "ember-modal-dialog": "2.4.3",
+    "ember-responsive": "^3.0.0-beta.1",
     "ember-router-scroll": "^0.4.0",
     "ember-svg-jar": "^0.12.0",
+    "ember-tether": "^1.0.0-beta.2",
     "ember-truth-helpers": "^2.0.0",
     "execa": "^0.9.0",
     "fs-extra": "^5.0.0",
@@ -90,17 +93,14 @@
     "ember-cli-shims": "^1.2.0",
     "ember-cli-sri": "^2.1.0",
     "ember-cli-uglify": "^2.0.0",
-    "ember-concurrency": "^0.8.16",
     "ember-disable-prototype-extensions": "^1.1.3",
     "ember-export-application-global": "^2.0.0",
     "ember-load-initializers": "^1.0.0",
     "ember-maybe-import-regenerator-for-testing": "^1.0.0",
     "ember-resolver": "^4.5.0",
-    "ember-responsive": "^3.0.0-beta.1",
     "ember-source": "~3.0.0",
     "ember-source-channel-url": "^1.0.1",
     "ember-test-selectors": "^0.3.8",
-    "ember-tether": "^1.0.0-beta.2",
     "ember-try": "^0.2.23",
     "eslint-plugin-ember": "^5.0.3",
     "eslint-plugin-node": "^5.2.1",