# UI 開発基盤

## セットアップ

```shell
git@github.com:naporin0624/flat-kobo-makeshop-design.git
cd flat-kobo-makeshop-design/
docker-compose up -d
npm install
npm run dev # <-- これで javascript の開発できるようになる
```

localhost:8080 でアクセス

### 一部 Linux 環境で Permission Error が発生する件

一部の Linux 環境ではコンテナ内の Apache 実行ユーザーをコンテナ実行ユーザーに合わせる必要があります。

```bash
id
> uid=xxxx(user) gid=xxxx(user)
```

この uid と gid を .env に記述

```shell
UID=xxxx
GID=xxxx
```

## ディレクトリ構成

`html/theme/data/`以下にデータファイル(.json)、`html/theme/templates/`以下にテンプレートファイル(.tpl)を配置します。

- html/ : Apache document root
  - **theme/**
    - **data/** : テンプレートから呼び出すデータ
      - data1.json
      - data2.json
      - data3.json
      - ...
    - **templates/** : テンプレートファイル
      - module/ : モジュール (テンプレートから`{$module.header}`等で呼び出し)
        - header.tpl
        - footer.tpl
        - side_bar.tpl
        - ...
      - page1.tpl
      - page2.tpl
      - page2.tpl
      - ...

`theme/`以下のファイルには`/`以下でアクセス可能です。(例: `theme/assets/style.css` -> `/assets/style.css`)

## サンプル

### データファイル (html/theme/data/data.json)

```json
{
  "page": {
    "title": "デザインテンプレート開発環境",
    "css": "/assets/style.css"
  },
  "shop": {
    "name": "ショップ名"
  }
}
```

上記 page と shop は別ファイルに分割することも出来ます。

#### data1.json

```json
{
  "page": {
    "title": "デザインテンプレート開発環境",
    "css": "/assets/style.css"
  }
}
```

#### data2.json

```json
{
  "shop": {
    "name": "ショップ名"
  }
}
```

### テンプレート (html/theme/templates/top.tpl)

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title><{$page.title}></title>
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <link rel="stylesheet" href="<{$page.css}>" />
  </head>
  <body>
    <{$module.header}>
  </body>
</html>
```

### テンプレートモジュール (html/theme/templates/module/header.tpl)

```html
<h1><{$shop.name}></h1>
```

## License

MIT License

## release

機能修正・追加ごとに以下のコマンドを実行してください。

```shell
npx changeset add
```

それぞれの変更に対して、以下のように変更の種類を選択してください。

- patch
  - バグ修正
- minor
  - 機能追加
- major
  - 破壊的変更
  - 特大リリース

変更の種類を選択すると、CHANGELOG.md に記載される変更内容の入力が求められるので、変更内容を記載してください。