Add third party packages section to document

docs/docs.yaml

@@ -30,8 +30,8 @@
     - typescript
     - extract-static
 
-# This loads the READMEs instead of files in docs/
-- title: Packages
+# Official Packages loads the READMEs instead of files in docs/
+- title: Official Packages
   items:
     - emotion
     - react-emotion
@@ -42,4 +42,8 @@
     - create-emotion
     - create-emotion-styled
     - create-emotion-server
-    - preact-emotion
+    - preact-emotion
+
+- title: Third Party Packages
+  items:
+    - ember-emotion

docs/ember-emotion.md

@@ -0,0 +1,49 @@
+# ember-emotion
+
+> Use emotion in Ember.js
+
+[![Build Status](https://travis-ci.org/alexlafroscia/ember-emotion.svg?branch=master)](https://travis-ci.org/alexlafroscia/ember-emotion)
+[![Ember Observer Score](https://emberobserver.com/badges/ember-emotion.svg)](https://emberobserver.com/addons/ember-emotion)
+[![npm version](https://badge.fury.io/js/ember-emotion.svg)](https://www.npmjs.com/package/ember-emotion)
+
+This addon
+
+- 👩‍🎤 Exposes `emotion` as a module that can be imported in Ember
+- 📦 Adds the ability to define styles scoped to a pod
+- 🚀 Supports FastBoot out-of-the-box
+- ⚡️ Allows for dynamically defining CSS values
+
+## Installation
+
+```bash
+ember install ember-emotion
+```
+
+## Usage
+
+To start using `ember-emotion`, add a `style.js` file within a `Component` or `Controller` pod. Each named export can be accessed through the `emotion-class` helper in the pod's template. The default export, for `Component` pods, is merged into the `classNames` property automatically
+
+```javascript
+// components/foo-bar/style.js
+import { css } from 'emotion';
+
+export default css`
+  background: grey;
+`;
+
+export const paragraph = css`
+  color: blue;
+`;
+```
+
+```handlebars
+{{! components/foo-bar/template.hbs }}
+The component background will be grey.
+<p class={{emotion-class 'paragraph'}}>
+  Just this text will be blue.
+</p>
+```
+
+For more information, check out the [project `README`][ember-emotion].
+
+[ember-emotion]: https://github.com/alexlafroscia/ember-emotion

packages/site/gatsby-config.js

@@ -1,14 +1,14 @@
 const path = require('path')
-const packages = require('./docs-yaml')().filter(
-  ({ title }) => title === 'Packages'
+const officialPackages = require('./docs-yaml')().filter(
+  ({ title }) => title === 'Official Packages'
 )[0].items
 
 module.exports = {
   siteMetadata: {
     siteUrl: 'https://emotion.sh',
     title: `emotion`
   },
-  plugins: packages
+  plugins: officialPackages
     .map(pkg => path.resolve(`${__dirname}/../${pkg}/README.md`))
     .map(file => ({
       resolve: 'gatsby-source-filesystem',

packages/site/gatsby-node.js

@@ -1,6 +1,7 @@
 const path = require('path')
-const docs = require('./docs-yaml')()
-const packages = docs.filter(({ title }) => title === 'Packages')[0].items
+const officialPackages = require('./docs-yaml')().filter(
+  ({ title }) => title === 'Official Packages'
+)[0].items
 var BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
   .BundleAnalyzerPlugin
 global.Babel = require('babel-standalone')
@@ -56,9 +57,8 @@ exports.modifyBabelrc = ({ babelrc }) => {
 
 exports.createPages = async ({ graphql, boundActionCreators }) => {
   const { createPage } = boundActionCreators
-  const docs1 = require('./docs-yaml')()
   const docTemplate = require.resolve(`./src/templates/doc.js`)
-  docs1.forEach(({ title, items }) => {
+  require('./docs-yaml')().forEach(({ title, items }) => {
     items.forEach(itemName => {
       createPage({
         path: `docs/${itemName}`,
@@ -255,8 +255,8 @@ exports.setFieldsOnGraphQLNodeType = ({ type }) => {
           }
         })
 
-        if (packages.indexOf(node.fields.slug) !== -1) {
-          // Remove the title from the markdown if it's a package
+        if (officialPackages.indexOf(node.fields.slug) !== -1) {
+          // Remove the title from the markdown if it's a official package
           hast.children.shift()
         }
         return hast

packages/site/src/utils/highlight-css.js

@@ -2,6 +2,8 @@ require('prismjs/components/prism-css')
 require('prismjs/components/prism-jsx')
 require('prismjs/components/prism-typescript')
 require('prismjs/components/prism-tsx')
+require('prismjs/components/prism-markup-templating')
+require('prismjs/components/prism-handlebars')
 
 global.Prism.languages.insertBefore('jsx', 'template-string', {
   'styled-template-string': {