Skip to content

Commit

Permalink
Merge pull request #859 from primer/generate-bundle-readmes
Browse files Browse the repository at this point in the history
Generate bundle READMEs from a template
  • Loading branch information
shawnbot authored Aug 7, 2019
2 parents e8810fe + 0a5e90b commit 483dc7b
Show file tree
Hide file tree
Showing 29 changed files with 379 additions and 560 deletions.
21 changes: 21 additions & 0 deletions script/generate-bundle-readmes
Original file line number Diff line number Diff line change
@@ -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)
}
})
25 changes: 25 additions & 0 deletions src/README.template.md
Original file line number Diff line number Diff line change
@@ -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
33 changes: 11 additions & 22 deletions src/alerts/README.md
Original file line number Diff line number Diff line change
@@ -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
34 changes: 11 additions & 23 deletions src/avatars/README.md
Original file line number Diff line number Diff line change
@@ -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
33 changes: 11 additions & 22 deletions src/base/README.md
Original file line number Diff line number Diff line change
@@ -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
34 changes: 11 additions & 23 deletions src/blankslate/README.md
Original file line number Diff line number Diff line change
@@ -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
34 changes: 11 additions & 23 deletions src/box/README.md
Original file line number Diff line number Diff line change
@@ -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
34 changes: 11 additions & 23 deletions src/branch-name/README.md
Original file line number Diff line number Diff line change
@@ -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
30 changes: 17 additions & 13 deletions src/breadcrumb/README.md
Original file line number Diff line number Diff line change
@@ -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
Loading

0 comments on commit 483dc7b

Please sign in to comment.