Generate bundle READMEs from a template

script/generate-bundle-readmes

@@ -0,0 +1,21 @@
+#!/usr/bin/env node
+const {dirname, join} = require('path')
+const globby = require('globby')
+const {exists, readFile, writeFile} = require('fs-extra')
+
+Promise.all([
+  readFile('src/README.template.md', 'utf8'),
+  globby('src/*/index.scss')
+]).then(async ([template, indexes]) => {
+  for (const indexPath of indexes) {
+    const dir = dirname(indexPath)
+    const parts = dir.split('/')
+    const bundle = parts.pop()
+    const readmePath = join(dir, 'README.md')
+    await writeFile(readmePath, getReadmeContents(bundle), 'utf8')
+  }
+
+  function getReadmeContents(bundle) {
+    return template.replace(/{bundle}/g, bundle)
+  }
+})

src/README.template.md

@@ -0,0 +1,25 @@
+---
+bundle: "{bundle}"
+generated: true
+---
+
+# Primer CSS: `{bundle}` bundle
+
+## Usage
+
+Primer CSS source files are written in [SCSS]. To include this Primer CSS module in your own build, ensure that your `node_modules` directory is listed in your Sass include paths, then import it with:
+
+```scss
+@import "@primer/css/{bundle}/index.scss";
+```
+
+## Build
+
+The `@primer/css` npm package includes a standalone CSS build of this module in `dist/{bundle}.css`.
+
+## License
+
+[MIT](https://github.com/primer/css/blob/master/LICENSE) © [GitHub](https://github.com/)
+
+
+[scss]: https://sass-lang.com/documentation/syntax#scss

src/alerts/README.md

@@ -1,36 +1,25 @@
-# Primer Alerts
-> Flash messages, or alerts, inform users of successful or pending actions. Use them sparingly. Don’t show more than one at a time.
+---
+bundle: "alerts"
+generated: true
+---
 
-This repository is a module of the full [Primer CSS][primer] repository.
+# Primer CSS: `alerts` bundle
 
 ## Usage
 
-The source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.
+Primer CSS source files are written in [SCSS]. To include this Primer CSS module in your own build, ensure that your `node_modules` directory is listed in your Sass include paths, then import it with:
 
 ```scss
-@import "primer-alerts/index.scss";
+@import "@primer/css/alerts/index.scss";
 ```
 
-You can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._
-
 ## Build
 
-For a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.
-
-```
-$ npm run build
-```
-
-## Documentation
-
-Find further documentation at [primer.style/css/components/alerts](https://primer.style/css/components/alerts).
+The `@primer/css` npm package includes a standalone CSS build of this module in `dist/alerts.css`.
 
 ## License
 
-[MIT](./LICENSE) © [GitHub](https://github.com/)
+[MIT](https://github.com/primer/css/blob/master/LICENSE) © [GitHub](https://github.com/)
+
 
-[primer]: https://github.com/primer/css
-[docs]: https://primer.style/css
-[npm]: https://www.npmjs.com/
-[install-npm]: https://docs.npmjs.com/getting-started/installing-node
-[sass]: http://sass-lang.com/
+[scss]: https://sass-lang.com/documentation/syntax#scss

src/avatars/README.md

@@ -1,37 +1,25 @@
-# Primer Avatars
+---
+bundle: "avatars"
+generated: true
+---
 
-> Avatars are images that users can set as their profile picture. On GitHub, they’re always going to be rounded squares. They can be custom photos, uploaded by users, or generated as Identicons as a placeholder.
-
-This repository is a module of the full [primer][primer] repository.
+# Primer CSS: `avatars` bundle
 
 ## Usage
 
-The source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.
+Primer CSS source files are written in [SCSS]. To include this Primer CSS module in your own build, ensure that your `node_modules` directory is listed in your Sass include paths, then import it with:
 
 ```scss
-@import "primer-avatars/index.scss";
+@import "@primer/css/avatars/index.scss";
 ```
 
-You can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._
-
 ## Build
 
-For a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.
-
-```
-$ npm run build
-```
-
-## Documentation
-
-Find further documentation at [primer.style/css/components/avatars](https://primer.style/css/components/avatars).
+The `@primer/css` npm package includes a standalone CSS build of this module in `dist/avatars.css`.
 
 ## License
 
-[MIT](./LICENSE) © [GitHub](https://github.com/)
+[MIT](https://github.com/primer/css/blob/master/LICENSE) © [GitHub](https://github.com/)
+
 
-[primer]: https://github.com/primer/css
-[docs]: https://primer.style/css
-[npm]: https://www.npmjs.com/
-[install-npm]: https://docs.npmjs.com/getting-started/installing-node
-[sass]: http://sass-lang.com/
+[scss]: https://sass-lang.com/documentation/syntax#scss

src/base/README.md

@@ -1,36 +1,25 @@
-# Primer Base
-> GitHub's CSS to reset the browsers default styles. Built on top of normalize.css
+---
+bundle: "base"
+generated: true
+---
 
-This repository is a module of the full [primer][primer] repository. And is built off of [normalize.css](https://github.com/necolas/normalize.css/)
+# Primer CSS: `base` bundle
 
 ## Usage
 
-The source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.
+Primer CSS source files are written in [SCSS]. To include this Primer CSS module in your own build, ensure that your `node_modules` directory is listed in your Sass include paths, then import it with:
 
 ```scss
-@import "primer-base/index.scss";
+@import "@primer/css/base/index.scss";
 ```
 
-You can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._
-
 ## Build
 
-For a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.
-
-```
-$ npm run build
-```
-
-## Documentation
-
-You can read more about base in the [docs][docs].
+The `@primer/css` npm package includes a standalone CSS build of this module in `dist/base.css`.
 
 ## License
 
-[MIT](./LICENSE) © [GitHub](https://github.com/)
+[MIT](https://github.com/primer/css/blob/master/LICENSE) © [GitHub](https://github.com/)
+
 
-[primer]: https://github.com/primer/css
-[docs]: https://primer.style/css
-[npm]: https://www.npmjs.com/
-[install-npm]: https://docs.npmjs.com/getting-started/installing-node
-[sass]: http://sass-lang.com/
+[scss]: https://sass-lang.com/documentation/syntax#scss

src/blankslate/README.md

@@ -1,37 +1,25 @@
-# Primer Blankslate
+---
+bundle: "blankslate"
+generated: true
+---
 
-> Blankslates are for when there is a lack of content within a page or section. Use them as placeholders to tell users why something isn’t there. Be sure to provide an action to add content as well.
-
-This repository is a module of the full [primer][primer] repository.
+# Primer CSS: `blankslate` bundle
 
 ## Usage
 
-The source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.
+Primer CSS source files are written in [SCSS]. To include this Primer CSS module in your own build, ensure that your `node_modules` directory is listed in your Sass include paths, then import it with:
 
 ```scss
-@import "primer-blankslate/index.scss";
+@import "@primer/css/blankslate/index.scss";
 ```
 
-You can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._
-
 ## Build
 
-For a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.
-
-```
-$ npm run build
-```
-
-## Documentation
-
-Find further documentation at [primer.style/css/components/blankslate](https://primer.style/css/components/blankslate).
+The `@primer/css` npm package includes a standalone CSS build of this module in `dist/blankslate.css`.
 
 ## License
 
-[MIT](./LICENSE) © [GitHub](https://github.com/)
+[MIT](https://github.com/primer/css/blob/master/LICENSE) © [GitHub](https://github.com/)
+
 
-[primer]: https://github.com/primer/css
-[docs]: https://primer.style/css
-[npm]: https://www.npmjs.com/
-[install-npm]: https://docs.npmjs.com/getting-started/installing-node
-[sass]: http://sass-lang.com/
+[scss]: https://sass-lang.com/documentation/syntax#scss

src/box/README.md

@@ -1,37 +1,25 @@
-# Primer box
+---
+bundle: "box"
+generated: true
+---
 
-> Box is a module for creating rounded-corner boxes with a white background and gray borders. Box has optional element styles for headers, lists, and footers.
-
-This repository is a module of the full [primer][primer] repository.
+# Primer CSS: `box` bundle
 
 ## Usage
 
-The source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.
+Primer CSS source files are written in [SCSS]. To include this Primer CSS module in your own build, ensure that your `node_modules` directory is listed in your Sass include paths, then import it with:
 
 ```scss
-@import "primer-box/index.scss";
+@import "@primer/css/box/index.scss";
 ```
 
-You can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._
-
 ## Build
 
-For a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.
-
-```
-$ npm run build
-```
-
-## Documentation
-
-Find further documentation at [primer.style/css/components/box](https://primer.style/css/components/box).
+The `@primer/css` npm package includes a standalone CSS build of this module in `dist/box.css`.
 
 ## License
 
-[MIT](./LICENSE) © [GitHub](https://github.com/)
+[MIT](https://github.com/primer/css/blob/master/LICENSE) © [GitHub](https://github.com/)
+
 
-[primer]: https://github.com/primer/css
-[docs]: https://primer.style/css
-[npm]: https://www.npmjs.com/
-[install-npm]: https://docs.npmjs.com/getting-started/installing-node
-[sass]: http://sass-lang.com/
+[scss]: https://sass-lang.com/documentation/syntax#scss

src/branch-name/README.md

@@ -1,37 +1,25 @@
-# Primer / Branch Name
+---
+bundle: "branch-name"
+generated: true
+---
 
-> A nice, consistent way to display branch names.
-
-This repository is a module of the full [primer][primer] repository.
+# Primer CSS: `branch-name` bundle
 
 ## Usage
 
-The source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.
+Primer CSS source files are written in [SCSS]. To include this Primer CSS module in your own build, ensure that your `node_modules` directory is listed in your Sass include paths, then import it with:
 
 ```scss
-@import "primer-branch-name/index.scss";
+@import "@primer/css/branch-name/index.scss";
 ```
 
-You can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._
-
 ## Build
 
-For a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:
-
-```
-$ npm run build
-```
-
-## Documentation
-
-Find further documentation at [primer.style/css/components/branch-name](https://primer.style/css/components/branch-name).
+The `@primer/css` npm package includes a standalone CSS build of this module in `dist/branch-name.css`.
 
 ## License
 
-[MIT](./LICENSE) © [GitHub](https://github.com/)
+[MIT](https://github.com/primer/css/blob/master/LICENSE) © [GitHub](https://github.com/)
+
 
-[primer]: https://github.com/primer/css
-[docs]: https://primer.style/css
-[npm]: https://www.npmjs.com/
-[install-npm]: https://docs.npmjs.com/getting-started/installing-node
-[sass]: http://sass-lang.com/
+[scss]: https://sass-lang.com/documentation/syntax#scss

src/breadcrumb/README.md

@@ -1,21 +1,25 @@
-# Primer Breadcrumb Navigation
+---
+bundle: "breadcrumb"
+generated: true
+---
 
-> Breadcrumb navigation for GitHub's pages with parents / grandparents.
+# Primer CSS: `breadcrumb` bundle
 
-This repository is a module of the full [primer][primer] repository.
+## Usage
 
-## Documentation
+Primer CSS source files are written in [SCSS]. To include this Primer CSS module in your own build, ensure that your `node_modules` directory is listed in your Sass include paths, then import it with:
 
-Find further documentation at [primer.style/css/components/breadcrumb](https://primer.style/css/components/breadcrumb).
+```scss
+@import "@primer/css/breadcrumb/index.scss";
+```
+
+## Build
+
+The `@primer/css` npm package includes a standalone CSS build of this module in `dist/breadcrumb.css`.
 
 ## License
 
-MIT © [GitHub](https://github.com/)
+[MIT](https://github.com/primer/css/blob/master/LICENSE) © [GitHub](https://github.com/)
+
 
-[primer]: https://github.com/primer/css
-[primer-support]: https://github.com/primer/css-support
-[support]: https://github.com/primer/css-support
-[docs]: https://primer.style/css
-[npm]: https://www.npmjs.com/
-[install-npm]: https://docs.npmjs.com/getting-started/installing-node
-[sass]: http://sass-lang.com/
+[scss]: https://sass-lang.com/documentation/syntax#scss