# homupe

> フォルダに置いたファイルがそのまま https://{site}-{user}.homupe.dev で公開されるホスティング。
> サーバー側のコードは書けないが、静的HTMLから使える「ホムペパーツ」でカウンターや掲示板などの動的な機能を持てる。

## ページの書き方

- 1つのサイト = 1つのフォルダ。index.html がトップページ。
- HTML/CSS/JS/画像をそのまま置く。ビルドは不要。
- 外部のバックエンドやAPIキーは使わず、データの保存には下のホムペパーツを使う。

## ホムペパーツ

### 1. homupe.json で使うものを宣言する

サイトのフォルダ直下に homupe.json を置く。ここに書いたカウンターとコレクションだけが使える。

{
  "counters": ["top", "clap"],
  "collections": {
    "guestbook": { "read": "public", "write": "public", "max": 500 },
    "board":     { "read": "public", "write": "signed-in" },
    "news":      { "read": "public", "write": "owner" },
    "inbox":     { "read": "owner",  "write": "public" }
  }
}

- read / write は "public" (誰でも)、"signed-in" (このサイトに homupe アカウントでログインした人)、"owner" (サイトの持ち主だけ)。
- 荒らしが心配な掲示板は write: "signed-in" にする。ログインした人は自分の書き込みを消せる。
- 省略時は read: "public", write: "owner", max: 100。max は 1000 まで。
- 訪問者に書かせたいコレクションは write: "public" を明示する。
- 問い合わせフォームのように持ち主だけが読むものは read: "owner" にする。
- カウンターは宣言すれば誰でも読めて、誰でも増やせる。
- 名前は小文字英数字と - _ (64文字まで)。カウンター50個、コレクション20個まで。
- 1か所でも不正な値があると homupe.json 全体が無効になり、何も使えなくなる。

### 2. ページでスクリプトを読み込む

<script src="/_homupe/homupe.js"></script>

### カスタム要素

- <homupe-counter name="top" digits="6"></homupe-counter>
  アクセスカウンター。同じタブでの再読み込みは数えない。
- <homupe-clap name="clap" label="👏"></homupe-clap>
  押すたびに数が増える拍手ボタン。
- <homupe-guestbook name="guestbook"></homupe-guestbook>
  なまえとメッセージを書き込める掲示板。自分の書き込みには削除ボタンが付き、持ち主がログインしていれば全部に付く。
  write: "signed-in" のコレクションに未ログインで書こうとすると、ログインボタンに変わる。
- <homupe-login></homupe-login>
  ログイン / ログアウトのボタン。

要素は Shadow DOM を使わずに描画されるので、普通の CSS (例: homupe-guestbook li { ... }) で見た目を変えられる。

### JavaScript API

- await homupe.count(name)            カウンターの値を読む
- await homupe.hit(name)              カウンターを 1 増やして新しい値を返す
- await homupe.list(collection, limit) 書き込みを新しい順に返す ([{ id, data, createdAt }])
- await homupe.add(collection, data)  JSON オブジェクトを追記する (4096 バイトまで)
- await homupe.remove(collection, id) 自分の書き込みを消す (持ち主は誰のでも消せる)
- await homupe.me()                   ログインしていれば { owner: true/false }、していなければ null
- homupe.login() / homupe.logout()    ログイン画面へ移動する / ログアウトする

list と add の各書き込みには mine (自分が書いたものなら true) が付く。書いた人の ID は返らない。
権限がないとき、未ログインならエラーの status が 401、ログインしていても駄目なら 403。

アンケート、いいね、ランキング、ひとこと日記などは list/add の組み合わせで作れる。

### 必ず守ること

- list で取ってきた data は他人が書いた文字列なので、表示には必ず textContent を使う。innerHTML や insertAdjacentHTML に入れてはいけない。
- 書き込みは追記のみで、編集はできない。削除できるのは書いた本人 (ログインして書いたもの) とサイトの持ち主だけ。
- read: "public" のコレクションは誰でも読める。パスワードや個人情報は保存しない。