# magi

> Magically turn markdown file into static website.

Latest version **0.4.0** (published 2017-03-04) · MIT license · 0 weekly downloads

## Install

```sh
npm install magi
pnpm add magi
yarn add magi
bun add magi
```

Provides the command `magi`.

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.4.0 |
| Published | 2017-03-04 |
| First published | 2015-11-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 19 |
| Known vulnerabilities | 0 (+3 in 2 direct dependencies) |
| Install scripts | no |
| GitHub stars | 23 |
| Author | egoist |
| Maintainers | rem |

## Links

- npm: https://www.npmjs.com/package/magi
- Repository: https://github.com/egoist/magi
- Homepage: https://github.com/egoist/magi#readme
- Issues: https://github.com/egoist/magi/issues
- npm.io page: https://npm.io/package/magi

## Dependencies (19)

- [mz](https://npm.io/package/mz.md) ^2.6.0
- [pug](https://npm.io/package/pug.md) ^2.0.0-beta11
- [detab](https://npm.io/package/detab.md) ^2.0.0
- [yargs](https://npm.io/package/yargs.md) next
- [mkdirp](https://npm.io/package/mkdirp.md) ^0.5.1
- [remark](https://npm.io/package/remark.md) ^7.0.0
- [express](https://npm.io/package/express.md) ^4.15.0
- [nofetch](https://npm.io/package/nofetch.md) ^0.1.0
- [prismjs](https://npm.io/package/prismjs.md) ^1.6.0
- [html-matter](https://npm.io/package/html-matter.md) ^0.1.1
- [remark-html](https://npm.io/package/remark-html.md) ^6.0.0
- [remark-slug](https://npm.io/package/remark-slug.md) ^4.2.2
- [babel-runtime](https://npm.io/package/babel-runtime.md) ^6.23.0
- [unist-builder](https://npm.io/package/unist-builder.md) ^1.0.2
- [unist-util-visit](https://npm.io/package/unist-util-visit.md) ^1.1.1
- [hast-util-to-html](https://npm.io/package/hast-util-to-html.md) ^3.0.0
- [unist-util-remove](https://npm.io/package/unist-util-remove.md) ^0.2.1
- [mdast-util-to-hast](https://npm.io/package/mdast-util-to-hast.md) ^2.4.0
- [unist-util-find-all-between](https://npm.io/package/unist-util-find-all-between.md) ^1.0.1

## Recent versions

- 0.4.0 (latest) — 2017-03-04
- 0.3.0 — 2017-03-04
- 0.2.0 — 2017-03-04
- 0.1.0 — 2017-03-04
- 0.0.0 — 2015-11-26

## README

<!-- @magi
github: egoist/magi
-->

# magi

[![NPM version](https://img.shields.io/npm/v/magi.svg?style=flat-square)](https://npmjs.com/package/magi) [![NPM downloads](https://img.shields.io/npm/dm/magi.svg?style=flat-square)](https://npmjs.com/package/magi) [![Build Status](https://img.shields.io/circleci/project/egoist/magi/master.svg?style=flat-square)](https://circleci.com/gh/egoist/magi) [![donate](https://img.shields.io/badge/$-donate-ff69b4.svg?maxAge=2592000&style=flat-square)](https://github.com/egoist/donate)

> The simplest way to build website for your OSS project.

## Install

```bash
yarn global add magi
# or npm 
npm i -g magi
```

## Usage

Given `README.md`:

```md
# site name

> site description

## section title

> section description

section body content, **looks not bad huh**.
```

Run `magi` in your terminal, open browser and you'll see:

![p](https://ooo.0o0.ooo/2017/03/03/58b98b9aae6fb.png)

## How does it work?

`# h1` is used as site name, `blockquote` after that will be used as site description, and all other stuffs between `h1` and `h2` will be put in the banner.

Here's another using [developit/unfetch](https://github.com/developit/unfetch) as example:

![p](https://ooo.0o0.ooo/2017/03/03/58b98d446a40d.png?v=2)

## Recipes

### Add a GitHub corner ribbon

You can use [html-matter](https://github.com/egoist/html-matter) to set it anywhere in your markdown file, for example, at the top of it:

```markdown
<!-- @magi
github: owner/repo
-->
```

Notice that it should start with `@magi` so that we know we need to parse it, the rest part of it is simple [front-matter syntax used in Jekyll](https://jekyllrb.com/docs/frontmatter/).

### External stypes and scripts

To insert `style` and `script` tag with external resource:

```markdown
<!-- @magi
styles:
  - ./css/custom.css
scripts:
  - ./js/app.js
  - ./js/post.js
-->
```

## CLI

```bash
# defaults to README.md
# run server to preview
magi [file]

# build html file
magi build [file]
# defaults to output to index.html
# but you can change it
magi build [file] --out docs/index.html
```

## Contributing

1. Fork it!
2. Create your feature branch: `git checkout -b my-new-feature`
3. Commit your changes: `git commit -am 'Add some feature'`
4. Push to the branch: `git push origin my-new-feature`
5. Submit a pull request :D


## Author

**magi** © [egoist](https://github.com/egoist), Released under the [MIT](./LICENSE) License.<br>
Authored and maintained by egoist with help from contributors ([list](https://github.com/egoist/magi/contributors)).

> [egoistian.com](https://egoistian.com) · GitHub [@egoist](https://github.com/egoist) · Twitter [@rem_rin_rin](https://twitter.com/rem_rin_rin)

---
_Source: https://npm.io/package/magi · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._