Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/m4k15y6666fk/cheki-html
CLI tool for converting Nunjucks + SCSS documents to PNG Images.
https://github.com/m4k15y6666fk/cheki-html
cli convert css html nunjucks screenshot scss
Last synced: 7 days ago
JSON representation
CLI tool for converting Nunjucks + SCSS documents to PNG Images.
- Host: GitHub
- URL: https://github.com/m4k15y6666fk/cheki-html
- Owner: m4k15y6666fk
- License: mit
- Created: 2023-01-31T15:55:55.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2023-02-02T09:40:52.000Z (over 1 year ago)
- Last Synced: 2024-09-25T12:33:23.442Z (8 days ago)
- Topics: cli, convert, css, html, nunjucks, screenshot, scss
- Language: JavaScript
- Homepage:
- Size: 5.93 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README-ja.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# cheki-html
"cheki-html" は、Nunjucks と SCSS で書かれたファイルを PNG 画像 に変換するツールです。
## 言語
* [日本語](https://github.com/m4k15y6666fk/cheki-html/blob/master/README-ja.md)
* [English](https://github.com/m4k15y6666fk/cheki-html#readme)
## サンプル
"cheki-html" と [Nunjucks と SCSS で書かれたファイル](https://github.com/m4k15y6666fk/cheki-html/blob/master/input/example.njk) から以下のような画像が作れます:
## 目的
このツールはもともと、チャットアプリのスクリーンショットを テキストベースな方法で・半自動で 生成できるように考えられました。
"cheki-html" はこのアイディアを抽象化し、Nunjucks と SCSS のテキストから定型化された画像を生成することができるようになりました。
## システム要件
* Node.js >= 18.12.1
* npm >= 8.19.2
```bash
node --version
# 19.5.0
npm --version
# 9.3.1
```
## インストール
"cheki-html" は "npm" コマンドを使ってインストールできます:
```bash
npm install -g cheki-html
```
または、ローカルプロジェクトにインストールすることもできます:
```bash
cd
npm install cheki-html
# then, you have to execute "cheki-html" with "npx" command;
# e.g.) npx cheki-html build
```
## 使い方
"cheki-html" は ４つのサブコマンド (help, init, preview, build) と それらのオプションを使用します.
```bash
cheki-html [options]
```
1. デフォルトのテンプレートを用意する
```bash
mkdir
cd
cheki-html init
```
2. テンプレートを編集する
```bash
nano example.njk
# or add some html/nunjucks files (.html/.njk)
nano assets/css/chat.scss
# or add some css/scss/sass files (.css/.scss/.sass)
```
3. テンプレートをプレビューする
```bash
cheki-html preview
```
Open your browser, and access `http://localhost:8080/preview`
4. テンプレートを変換する
```bash
cheki-html build
```
"output" ディレクトリの中に画像が生成されます。
## 注意事項
Linux, Windows では動作のテストをしていません。
## 作者
* M4K-15Y-6666-FK
* [GitHub](https://github.com/m4k15y6666fk)
* [OFUSE](https://ofuse.me/m4k15y6666fk)
* [Email](mailto:[email protected])
## 寄付
[OFUSE](https://ofuse.me/m4k15y6666fk)
メッセージを送ったり、作品の進捗を確認することができます。
もちろん、ただ寄付することもできます。
## ライセンス
"cheki-html" は [MIT license](https://opensource.org/licenses/MIT) のもとで公開されています。
ぜひ、生成した画像を商用プロジェクトにも利用してください！
ただし、テンプレートの中で使われる画像のライセンスには気をつけてください（特に、このプログラムとは分けて使用する時） 詳しくは [input/assets/img/LICENSE](https://github.com/m4k15y6666fk/cheki-html/blob/master/input/assets/img/LICENSE) を見てください。