# site-flame

> 基于React的静态网页创建工具(markdown)

Latest version **1.0.13** (published 2019-03-16) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install site-flame
pnpm add site-flame
yarn add site-flame
bun add site-flame
```

Provides the command `flammae`.

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.0.13 |
| Published | 2019-03-16 |
| First published | 2019-03-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 32 |
| Unpacked size | 199.8 KB |
| Known vulnerabilities | 0 (+10 in 3 direct dependencies) |
| Install scripts | no |
| GitHub stars | 1 |
| Author | LiZ2z |
| Maintainers | liz2z |
| Keywords | react, markdown, site |

## Links

- npm: https://www.npmjs.com/package/site-flame
- Repository: https://github.com/LiZ2z/flammae
- Homepage: https://github.com/LiZ2z/flammae#readme
- Issues: https://github.com/LiZ2z/flammae/issues
- npm.io page: https://npm.io/package/site-flame

## Dependencies (32)

- [chalk](https://npm.io/package/chalk.md) 2.4.2
- [react](https://npm.io/package/react.md) ^16.8.3
- [eslint](https://npm.io/package/eslint.md) 5.14.1
- [marked](https://npm.io/package/marked.md) ^0.6.1
- [webpack](https://npm.io/package/webpack.md) 4.29.5
- [fs-extra](https://npm.io/package/fs-extra.md) 7.0.1
- [react-dom](https://npm.io/package/react-dom.md) ^16.8.3
- [css-loader](https://npm.io/package/css-loader.md) 2.1.0
- [url-loader](https://npm.io/package/url-loader.md) 1.1.2
- [file-loader](https://npm.io/package/file-loader.md) 3.0.1
- [babel-eslint](https://npm.io/package/babel-eslint.md) 10.0.1
- [babel-loader](https://npm.io/package/babel-loader.md) 8.0.5
- [highlight.js](https://npm.io/package/highlight.js.md) ^9.15.6
- [style-loader](https://npm.io/package/style-loader.md) 0.23.1
- [@svgr/webpack](https://npm.io/package/@svgr/webpack.md) 4.1.0
- [eslint-loader](https://npm.io/package/eslint-loader.md) 2.1.2
- [postcss-loader](https://npm.io/package/postcss-loader.md) 3.0.0
- [react-router-dom](https://npm.io/package/react-router-dom.md) ^4.4.0
- [postcss-preset-env](https://npm.io/package/postcss-preset-env.md) 6.5.0
- [webpack-dev-server](https://npm.io/package/webpack-dev-server.md) 3.2.1
- [eslint-plugin-react](https://npm.io/package/eslint-plugin-react.md) 7.12.4
- [html-webpack-plugin](https://npm.io/package/html-webpack-plugin.md) 3.2.0
- [postcss-safe-parser](https://npm.io/package/postcss-safe-parser.md) 4.0.1
- [eslint-plugin-import](https://npm.io/package/eslint-plugin-import.md) 2.16.0
- [terser-webpack-plugin](https://npm.io/package/terser-webpack-plugin.md) 1.2.3
- [babel-preset-react-app](https://npm.io/package/babel-preset-react-app.md) 7.0.1
- [eslint-plugin-jsx-a11y](https://npm.io/package/eslint-plugin-jsx-a11y.md) 6.2.1
- [mini-css-extract-plugin](https://npm.io/package/mini-css-extract-plugin.md) 0.5.0
- [@78d6/eslint-config-common](https://npm.io/package/@78d6/eslint-config-common.md) 0.1.5
- [@78d6/eslint-config-react-app](https://npm.io/package/@78d6/eslint-config-react-app.md) 0.1.1
- [babel-plugin-named-asset-import](https://npm.io/package/babel-plugin-named-asset-import.md) 0.3.1
- [optimize-css-assets-webpack-plugin](https://npm.io/package/optimize-css-assets-webpack-plugin.md) 5.0.1

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.13 (latest) — 2019-03-16
- 1.0.12 — 2019-03-16
- 1.0.11 — 2019-03-16
- 1.0.10 — 2019-03-08
- 1.0.9 — 2019-03-08
- 1.0.8 — 2019-03-07
- 1.0.7 — 2019-03-05
- 1.0.6 — 2019-03-05
- 1.0.5 — 2019-03-04
- 1.0.4 — 2019-03-04
- 1.0.3 — 2019-03-04
- 1.0.2 — 2019-03-04
- 1.0.1 — 2019-03-01
- 1.0.0 — 2019-03-01

## README

## **site-flame已改名为flammae! 将停止更新此npm包，请更换成flammae**

# site-flame
基于React的静态网页创建工具(markdown)

## 注意


site-flame 还在开发阶段，可能存在bug，发现bug请及时反馈，多谢！

issues: https://github.com/LiZ2z/flammae/issues

## 安装

```
npm install site-flame
```
在`package.json`中添加
```json
 "scripts": {
    "start": "node node_modules/site-flame/scripts/start -dev",
    "build": "node node_modules/site-flame/scripts/start -build"
  }
```

## 项目目录

项目目录一般为：
```
|-node_modules
|-src
|-package.json
|-flame.config.js
```
src目录下又包括（_这些文件夹将被`flame`解析，其他命名文件夹不会被解析_）：
```
|-templates     用于存放 .jsx 文件
|-docs          用于存放 .md  文件
|-pages         用于存放 .jsx 文件
|-styles        用于存放 .css 文件
```


#### 1. `templates`
`templates`用于存放模板文件，目前可选的有`index.js`和`content.js`。

`index.js`将会作为网站的首页，可通过`#/index`访问到。

`content.js`将被用作每个`.md`文件的渲染模板。
例如：
```jsx
import React, { Component } from 'react';
import {
   siteData
} from 'site-flame'

class Content extends Component {
    render() {
        return (
            <div>
                {/* 其他的一些代码 */}
                {this.props.renderMarkdown()}
                {/* 其他的一些代码 */}
            </div>
        );
    }
}

export default Content;
```

#### 2. `pages`和`docs`
其中`pages`和`docs`目录下的每个文件都会作为一个单独的页面进行处理，且都需要在文件的头部做信息的声明。

对于`.md`文件，需要在头部使用类似`yaml`语言的方式书写信息：
``` frontmatter
---
path: '/router'
title: 'My first flame page'
---
```
这样，我们就可以在上面说到的`templates\content.js`中通过`this.props.data`来访问这些信息。

对于`.jsx`文件，需要在头部使用行级注释（`//`）的方式书写信息：
```jsx
// path: '/router'
// title: 'My first flame page'
```
同样，这些信息可以在`this.props.data`中访问到。

>注意： path是必须的，path声明的值将作为访问这个页面的路由地址，如果没有path，该文件将不被显示。

>在flame的项目中你可以通过`import {siteData} from 'site-flame'`的方式访问到全部文件的头部数据



#### 3. `styles`
`styles`下只能用来存放样式文件（`.css`、`.less`或`.scss`），否则会导致错误。这些文件将会作为全局的样式文件，放在项目的入口处。对于`.less`或`.scss`之类的文件，需要在`root\flame.config.js`中添加配置，并安装相应的`loader`。

## `flame.config.js`的配置

待续。。。

## markdown 编写规范

### 为markdown引入样式
```
::: style
\`\`\` javascript
require('./style.css')
\`\`\`
:::
```

### 代码演示
如果代码想要被演示（根据markdown中的代码块动态渲染内容，目前仅支持`jsx`）， 需要在代码标识符后加`lang`（根据不同的语言）和`demo`字符串 ，例如，我们想演示一个`React`组件，需要用`:::`将代码块包起来，像下面这样：

```
:::
\`\`\` jsx
class Demo extends Component {
    ...code here
}
\`\`\`
:::
```
这样，当加载到这个markdown文件时，解析器就会知道该代码片段需要展示出来，且需要使用能解析`jsx`语法的编译器（即flame的代码插件，flame默认提供针对`jsx`的解析插件）来处理这段代码。

注意，必须指定代码块的语言（上方的`jsx`），不然flame不知道用什么编译器来处理该段代码。

**代码的编写规则由相应的插件规定。**

此外我们还可以在`:::`符号后面加入一些指令或说明，就像下面这样

```
::: only

这里是代码的一些说明
here is some note for code

\`\`\` jsx
class Demo extends Component {
    ...code here
}
\`\`\`
:::
```

`:::`内部的内容（不包括代码块）将被当作对代码的说明传给插件。

`:::`后面的字符将被当作指令传递给插件，具体的指令由不同的插件规定。

flame目前有一个自带指令：`style`，通过该指令，你就可以为每个`.md`文件编写样式。
```
::: style
\`\`\` (可不用指定语言)
    require('./style.css')
\`\`\`
:::
```


### `jsx`解析插件的规则

#### 一般规则

假如我们有如下需要演示的代码（当然，要使用`:::`包裹住。）：

```jsx
import {Component} from 'react'
import {Button} from 'ui'
class Demo extends Component {
    handleClick() {
        console.log('clicked')
    }
    render() {
        return (
            <div>
                <Button onClick={this.handleClick.bind(this)}>click</Button>
                <Button>click</Button>
            </div>
        );
    }
}
```

1. class 的名称必须为 `Demo`。如果写成函数式的组件，那么函数名也必须为 `Demo`。




#### 指令
待续。。。


## TODO: 
- 完善可配置项
- 自动化监听文件部分功能代码优化

## CONCEPT
- 将site-flame改成webpack的插件
- 提取loader跟模板，要求每个loader自带一套模板

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