add source

geolonia · Sep 3, 2024 · 30970c5 · 30970c5
commit 30970c5
Show file tree

Hide file tree

Showing 15 changed files with 1,450 additions and 0 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,11 @@
+# EditorConfig is awesome: https://editorconfig.org
+
+# top-most EditorConfig file
+root = true
+
+# Unix-style newlines with a newline ending every file
+[*]
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+charset = utf-8
diff --git a/.github/workflows/icons.yml b/.github/workflows/icons.yml
@@ -0,0 +1,48 @@
+name: "Build Icons"
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    permissions:
+      pages: write # to deploy to Pages
+      id-token: write # to verify the deployment originates from an appropriate source
+
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          token: ${{ secrets.PAT }}
+
+      - name: Set up Git
+        run: |
+          git config --global user.name "shiwaku"
+          git config --global user.email "[email protected]"
+
+      - name: Install Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Build icons
+        run: npm run build
+
+      - name: Upload pages artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: "_site/"
+
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,5 @@
+node_modules
+_site/sprite.json
+_site/sprite.png
+_site/[email protected]
+_site/[email protected]
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Geolonia, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/README.md b/README.md
@@ -0,0 +1,18 @@
+# Geolonia アイコンセットのテンプレート
+
+Geolonia Maps または Maplibre でアイコンを表示させるためにスプライトシートを作るテンプレート
+
+Geolonia Maps の標準アイコンセットはこちらのテンプレートを利用しているので、使い方にご参照にしてください。 [GitHub](https://github.com/geoloniamaps/sprite-gstd) [プレビュー](https://geoloniamaps.github.io/sprite-gstd/)
+
+## 使い方
+
+こちらのレポジトリをテンプレートとして、新しいレポジトリを作成してください。その後、
+
+1. スプライトシートに追加したいアイコンを `icons` ディレクトリに追加
+1. GitHub Pages を GitHub Actions からデプロイするように設定する（ Settings → Pages → Source を GitHub Actions に変更）
+1. この README を編集
+1. `_site/index.html` の `<title>` `h1` タグ等を適切に編集します。
+
+ローカルで編集する場合は、 `npm install` 後に `npm run start` をすると、ローカルのサーバーが起動され、GitHubにプッシュする前に確認できます。
+
+うまく行けば、スプライトシートが `https://<GitHub username>.github.io/<repository name>/sprite.png` でホスティングされます。MapLibre対応の `.png / .json / @2x.png / @2x.json` の合計4ファイルが作成されます。MapLibreに複数スプライトシートを読み込ませる方法は、 [公式ドキュメンテーション](https://maplibre.org/maplibre-style-spec/sprite/#multiple-sprite-sources) を参照にしてください。
diff --git a/_site/index.html b/_site/index.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <title>穴吹ハウジングサービス アイコンセットのテンプレート</title>
+  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
+    integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+  <style>
+    .sprite-icon {
+      background-image: image-set(url(./sprite.png) 1x, url(./[email protected]) 2x);
+    }
+  </style>
+</head>
+
+<body>
+  <main class="container">
+    <div class="px-4 py-5 my-5 text-center">
+      <h1 class="display-5 fw-bold text-body-emphasis">穴吹ハウジングサービス アイコンセットのテンプレート</h1>
+      <div class="col-lg-6 mx-auto">
+        <p class="lead mb-4">
+          geoloniamaps/sprite-template で作成したアイコンセットのテンプレートです。
+        </p>
+      </div>
+    </div>
+    <div id="icon-table"></div>
+  </main>
+  <script src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
+  <script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
+  <script type="module">
+    import htm from 'https://unpkg.com/htm?module';
+    const html = htm.bind(React.createElement);
+    const IconTable = () => {
+      const [icons, setIcons] = React.useState([]);
+
+      React.useEffect(() => {
+        (async () => {
+          const [
+            spritesheet1x,
+            spritesheet2x,
+          ] = await Promise.all([
+            fetch('./sprite.json').then((res) => res.json()),
+            fetch('./[email protected]').then((res) => res.json()),
+          ]);
+          // console.log(spritesheet1x, spritesheet2x);
+          const icons = [];
+          for (const [key, s1x] of Object.entries(spritesheet1x)) {
+            const s2x = spritesheet2x[key];
+            icons.push({
+              name: key,
+              s1x, // {"height":17,"width":17,"x":91,"y":87,"pixelRatio":1}
+              s2x, // {"height":34,"width":34,"x":182,"y":174,"pixelRatio":2}
+            })
+          }
+          icons.sort((a, b) => a.name.localeCompare(b.name));
+          setIcons(icons);
+        })();
+      }, []);
+
+      return html`
+          <ul class="row row-cols-3 row-cols-sm-4 row-cols-lg-6 row-cols-xl-8 list-unstyled list">
+            ${icons.map((icon) => html`
+              <li class="col mb-4">
+                <div class="px-3 py-4 mb-2 bg-body-secondary text-center rounded">
+                  <div class="d-inline-block sprite-icon" style=${{
+          width: `${icon.s1x.width}px`,
+          height: `${icon.s1x.height}px`,
+          backgroundPosition: `-${icon.s1x.x}px -${icon.s1x.y}px`,
+        }}></div>
+                </div>
+                <div class="name text-center pt-1">
+                  <code><pre>${icon.name}</pre></code>
+                </div>
+              </li>
+            `)}
+          </ul>
+        `;
+    };
+    ReactDOM.render(html`<${IconTable} />`, document.getElementById('icon-table'));
+  </script>
+</body>
+
+</html>
diff --git a/icons/port-agreed.svg b/icons/port-agreed.svg
diff --git a/icons/port-completed.svg b/icons/port-completed.svg
diff --git a/icons/port-default.svg b/icons/port-default.svg