update specifications

apps/web-docs/.vitepress/config.mts

@@ -9,6 +9,8 @@ export default defineConfig({
     nav: [
       { text: 'Top', link: '/' },
       { text: 'CSS', link: '/css/getting-started' },
+      { text: 'Path Design', link: '/path-design' },
+      { text: 'Namecard Debug', link: '/namecard-debug' },
       {
         text: 'RPA',
         items: [
@@ -24,6 +26,25 @@ export default defineConfig({
           },
         ],
       },
+      {
+        text: 'Admin for Staff',
+        items: [
+          {
+            text: 'Specification',
+            link: '/admin/specification',
+          },
+          {
+            text: 'Page',
+            items: [
+              { text: 'Speaker, Paneler', link: '/admin/page/speaker' },
+              { text: 'Sponsor', link: '/admin/page/sponsor' },
+              { text: 'Job for jobboard', link: '/admin/page/job' },
+              { text: 'Namecard', link: '/admin/page/namecard' },
+              { text: 'Staff (Core, Volunteer)', link: '/admin/page/staff' },
+            ],
+          },
+        ],
+      },
       {
         text: 'Supabase',
         items: [
@@ -50,6 +71,8 @@ export default defineConfig({
         text: 'Examples',
         items: [
           { text: 'CSS', link: '/css/getting-started' },
+          { text: 'Path Design', link: '/path-design' },
+          { text: 'Namecard Debug', link: '/namecard-debug' },
           {
             text: 'RPA',
             items: [
@@ -66,6 +89,25 @@ export default defineConfig({
               },
             ],
           },
+          {
+            text: 'Admin for Staff',
+            items: [
+              {
+                text: 'Specification',
+                link: '/admin/specification',
+              },
+              {
+                text: 'Page',
+                items: [
+                  { text: 'Speaker, Paneler', link: '/admin/page/speaker' },
+                  { text: 'Sponsor', link: '/admin/page/sponsor' },
+                  { text: 'Job for jobboard', link: '/admin/page/job' },
+                  { text: 'Namecard', link: '/admin/page/namecard' },
+                  { text: 'Staff (Core, Volunteer)', link: '/admin/page/staff' },
+                ],
+              },
+            ],
+          },
           {
             text: 'Supabase',
             items: [
@@ -92,6 +134,18 @@ export default defineConfig({
     socialLinks: [
       { icon: 'x', link: 'https://x.com/vuefes' },
       { icon: 'github', link: 'https://github.com/vuejs-jp/vuefes-2024' },
+      {
+        icon: {
+          svg: '<svg width="48.000000pt" height="48.000000pt" viewBox="0 0 48.000000 48.000000" version="1.0" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet"><g transform="translate(0.000000,48.000000) scale(0.100000,-0.100000)" stroke="none"><path d="M315 398 c-11 -6 -24 -17 -28 -25 -11 -19 -25 -16 -32 7 -9 30 -17 25 -46 -28 l-27 -48 27 -47 c14 -26 28 -47 31 -47 3 0 21 28 40 63 34 60 37 62 79 65 l43 3 -26 -47 c-14 -26 -24 -49 -22 -52 13 -12 57 12 71 38 22 43 19 68 -14 101 -31 30 -62 36 -96 17z"/><path d="M92 146 c-23 -40 -42 -76 -42 -80 0 -3 42 -6 94 -6 l95 0 -46 80 c-25 44 -48 80 -52 80 -4 0 -26 -33 -49 -74z"/><path d="M292 146 c-23 -40 -42 -76 -42 -80 0 -3 42 -6 94 -6 l95 0 -46 80 c-25 44 -48 80 -52 80 -4 0 -26 -33 -49 -74z"/></g></svg>',
+        },
+        link: 'https://vuefes.jp/2024',
+      },
+      {
+        icon: {
+          svg: '<svg width="800px" height="800px" viewBox="-31.5 0 319 319" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid"><defs><path d="M9.87245893,293.324145 L0.0114611411,30.5732167 C-0.314208957,21.8955842 6.33948896,14.5413918 15.0063196,13.9997149 L238.494389,0.0317105427 C247.316188,-0.519651867 254.914637,6.18486163 255.466,15.0066607 C255.486773,15.339032 255.497167,15.6719708 255.497167,16.0049907 L255.497167,302.318596 C255.497167,311.157608 248.331732,318.323043 239.492719,318.323043 C239.253266,318.323043 239.013844,318.317669 238.774632,318.306926 L25.1475605,308.712253 C16.8276309,308.338578 10.1847994,301.646603 9.87245893,293.324145 L9.87245893,293.324145 Z" id="path-1"></path></defs><g><mask id="mask-2" fill="white"><use xlink:href="#path-1"></use></mask><use fill="#FF4785" fill-rule="nonzero" xlink:href="#path-1"></use><path d="M188.665358,39.126973 L190.191903,2.41148534 L220.883535,0 L222.205755,37.8634126 C222.251771,39.1811466 221.22084,40.2866846 219.903106,40.3327009 C219.338869,40.3524045 218.785907,40.1715096 218.342409,39.8221376 L206.506729,30.4984116 L192.493574,41.1282444 C191.443077,41.9251106 189.945493,41.7195021 189.148627,40.6690048 C188.813185,40.2267976 188.6423,39.6815326 188.665358,39.126973 Z M149.413703,119.980309 C149.413703,126.206975 191.355678,123.222696 196.986019,118.848893 C196.986019,76.4467826 174.234041,54.1651411 132.57133,54.1651411 C90.9086182,54.1651411 67.5656805,76.7934542 67.5656805,110.735941 C67.5656805,169.85244 147.345341,170.983856 147.345341,203.229219 C147.345341,212.280549 142.913138,217.654777 133.162291,217.654777 C120.456641,217.654777 115.433477,211.165914 116.024438,189.103298 C116.024438,184.317101 67.5656805,182.824962 66.0882793,189.103298 C62.3262146,242.56887 95.6363019,257.990394 133.753251,257.990394 C170.688279,257.990394 199.645341,238.303123 199.645341,202.663511 C199.645341,139.304202 118.683759,141.001326 118.683759,109.604526 C118.683759,96.8760922 128.139127,95.178968 133.753251,95.178968 C139.662855,95.178968 150.300143,96.2205679 149.413703,119.980309 Z" fill="#FFFFFF" fill-rule="nonzero" mask="url(#mask-2)"></path></g></svg>',
+        },
+        link: 'https://vuefes-2024-designsystem.pages.dev/',
+      },
     ],
   },
 })

apps/web-docs/admin/page/job.md

@@ -0,0 +1,17 @@
+# ジョブ
+
+![](https://i.imgur.com/N6KosuS.png)
+
+## 対象
+
+- シルバー以上 (プラチナ、ゴールド、シルバー) のスポンサー
+
+## できること
+
+- ジョブを追加、更新する
+  - 削除は非対応（Supabase 管理画面より直接操作するか、または `is_open` による切替を実施してください）
+- 回遊先のリンク、バナー画像（alt 属性を含む）を編集する
+
+## DB (Supabase)
+
+[DB 設計](../../supabase/db/job.md)

apps/web-docs/admin/page/namecard.md

@@ -0,0 +1,25 @@
+# 参加者
+
+ドロップダウンで参加者種別（attendee or attendee + party）を選択してください。
+
+なお、ドロップダウンの初期値は `attendee` となります。
+
+| attendee | attendee + party |
+|:----|:----|
+|![](https://i.imgur.com/bDa1Kto.png)|![](https://i.imgur.com/EI7ROez.png)|
+
+## 対象
+
+いずれも照合を経て、注文番号照合完了 or 注文番号照合失敗を果たした者も含んでいます。
+
+- 「一般チケットチケット」購入者のうち、注文番号照合中を果たした者
+- 「一般 + アフターパーティーチケット」購入者のうち、注文番号照合中を果たした者
+
+## できること
+
+- ネームカード作成者を確認する
+- 手動で注文番号を照合する or 逆に照合状態を解除する（デバッグ期間に使いたかったため）
+
+## DB (Supabase)
+
+[DB 設計](../../supabase/db/attendee.md)

apps/web-docs/admin/page/speaker.md

@@ -0,0 +1,24 @@
+# スピーカー
+
+![](https://i.imgur.com/nuQiDMq.png)
+
+## 対象
+
+- 海外・招待スピーカー
+- 日本・招待スピーカー
+- 海外・Call for Paper (CfP) スピーカー
+- 日本・Call for Paper (CfP) スピーカー
+- スポンサーセッションスピーカー
+- パネラー (次世代フロントエンドクロストーク、Vue.js コミュニティにようこそ！)
+
+## できること
+
+- スピーカーを追加、更新する
+  - 削除は非対応（Supabase 管理画面より直接操作するか、または `is_open` による切替を実施してください）
+- 所属、肩書き、自己紹介を編集する
+- セッションのタイトル、紹介、登壇スライドを編集する（パネラー以外）
+- 登壇予定のイベントを更新する（パネラーのみ、更新の対象は次世代フロントエンドクロストーク、Vue.js コミュニティにようこそ！の 2 つ）
+
+## DB (Supabase)
+
+[DB 設計](../../supabase/db/speaker.md)

apps/web-docs/admin/page/sponsor.md

@@ -0,0 +1,19 @@
+# スポンサー
+
+![](https://i.imgur.com/KTU7rFE.png)
+
+## 対象
+
+- プラチナ、ゴールド、シルバー、ブロンズ
+- スペシャルネーミングライツ、ネーミングライツ、スペシャルランチ、ランチ、アフターパーティー、ネームカード、同時通訳、託児サポート、ハンズオン、メディア、ツール
+
+## できること
+
+- スポンサーを追加、更新する
+  - 削除は非対応（Supabase 管理画面より直接操作するか、または `is_open` による切替を実施してください）
+- カテゴリー、紹介を編集する
+- スポンサーセッションで登壇予定のスピーカーとの紐付けを更新する
+
+## DB (Supabase)
+
+[DB 設計](../../supabase/db/sponsor.md)

apps/web-docs/admin/page/staff.md

@@ -0,0 +1,19 @@
+# スタッフ
+
+![](https://i.imgur.com/C8o5tqA.png)
+
+## 対象
+
+- コアスタッフ
+- ボランティアスタッフ
+
+## できること
+
+- スタッフを追加、更新する
+  - 削除は非対応（Supabase 管理画面より直接操作するか、または `is_open` による切替を実施してください）
+- 名前、X or GitHub ID を編集する
+- 招待機能を利用して登録したメールアドレスを確認する
+
+## DB (Supabase)
+
+[DB 設計](../../supabase/db/staff.md)

apps/web-docs/admin/specification.md

@@ -0,0 +1,9 @@
+# スタッフ管理画面
+
+Supabase 管理画面と異なる存在として、Vue Fes Japan 2024 ウェブサイトの一部に、スタッフ管理画面を組み込みました。
+
+- [Speaker, Paneler](./page/speaker.md)
+- [Sponsor](./page/sponsor.md)
+- [Job](./page/job.md)
+- [Namecard](./page/namecard.md)
+- [Staff (Core, Volunteer)](./page/staff.md)

apps/web-docs/index.md

@@ -11,6 +11,9 @@ hero:
     - theme: brand
       text: RPA
       link: /rpa/getting-started
+    - theme: brand
+      text: Admin
+      link: /admin/specification
     - theme: brand
       text: Supabase
       link: /supabase/getting-started

apps/web-docs/namecard-debug.md

@@ -0,0 +1,65 @@
+# ネームカードデバッグ
+
+- ちょっと時間のある方向け
+- しっかり見ていただける方向け
+
+## ちょっと時間のある方向けに 10 分デバッグ
+
+デスクトップだけではなくスマフォでもチェックしていただければ幸いです。
+
+1. プレビュー用 URL にアクセスします。
+2. 「ネームカードを作成する」ボタンをクリックする
+3. 文言を読み、「ログインする」ボタンをクリックする
+4. GitHub or Google お好みのソーシャルアカウントでログインする
+5. 文言を読み、「編集する」ボタンをクリックする
+6. 「ネームカード作成・編集」画面で、お名前、アバター画像、注文番号（適当な文字列を入力いただいて OK）項目を入力する。なお、注文番号に対するバリデーションは、現在盛り込まれていません。
+7. 「確定する」ボタンをクリックする
+8. 入力した内容がネームカードに反映され、ステータスが「注文番号照合中」になっているかどうかを確認します。
+
+## しっかり見ていただける方向けに複数パターンデバッグ
+
+::: tip
+
+ネームカードが作成される際、チケット購入時に発行される注文番号との照合が必要になります。この照合作業は、ネームカード本リリース以降 1 日 4 回、自動的に行われる予定となります。
+
+:::
+
+各デバッグ実施者が手動で照合を完了 or 失敗させることを目指します。
+
+Supabase の管理画面より SQL Editor（赤枠）を開きます。
+
+![](https://i.imgur.com/ss9PkSd.png)
+
+SQL Editor を開いて、SQL 入力エリア（赤枠）に以下の SQL を入力してください。
+
+![](https://i.imgur.com/gpgy1NC.png)
+
+その際、事前にユーザー ID を記録しておき、そのユーザー ID を `<user_id>` の箇所に代入、「RUN（実行する）」ボタンをクリックします。
+
+```sql
+-- 照合完了に変更したい
+UPDATE public.attendees
+SET activated_at = now()
+WHERE user_id = '<user_id>' AND activated_at IS NULL;
+```
+
+```sql
+-- 照合失敗に変更したい
+UPDATE public.attendees
+SET canceled_at = now()
+WHERE user_id = '<user_id>' AND canceled_at IS NULL;
+```
+
+スタッフ管理画面で照合を完了 or 失敗させることが可能となります。
+
+あくまで「注文番号に依らず」照合を完了 or 失敗させることになる点にはご留意ください。
+
+したがって、この方法はデバッグ時にのみ利用しつつ、本りりーす以降は利用しないようご協力いただければ幸いです。
+
+### スタッフ管理画面より操作する方法について
+
+照合完了 or 照合失敗を果たしていない者は、action 列にある「Activate or Deactivate」ボタンをクリックできる状態となります。
+
+この「Activate or Deactivate」ボタンをクリックすることで、該当するユーザーのステータスが「注文番号照合完了 or 注文番号照合失敗」になっているかどうか確認します。
+
+![](https://i.imgur.com/bDa1Kto.png)

apps/web-docs/path-design.md

@@ -0,0 +1,39 @@
+# パス設計
+
+ウェブサイト全体を下のツリー図で表しました。
+
+```
+. ... トップページ
+├── namecard/
+│   ├── [id]/
+│   │   ├── edit/
+│   │   │   ├── complete.vue ... 作成・編集完了画面
+│   │   │   └── index.vue ... 作成・編集画面
+│   │   ├── share.vue ... シェア URL
+│   │   └── index.vue ... ログイン後画面
+│   └── index.vue ... 扉ページ
+├── sessions/
+│   └── [id]/
+│       ├── index.vue ... 詳細ページ
+│       └── share.vue ... シェア URL
+├── sponsors/
+│   └── [id]/
+│       ├── index.vue ... 詳細ページ
+│       └── share.vue ... シェア URL
+├── staff/ ... 本番環境ではフラグを切らせてもらっています
+│   ├── console.vue ... 管理画面（スピーカー、スポンサー、ジョブ、スタッフ、参加者を管理するため）
+│   └── invite.vue ... 招待 (仮機能)
+├── staffs/
+│   └── [id]/
+│       └── share.vue ... シェア URL
+├── code-of-conduct.vue ... 行動規範 (Code of Conduct)
+├── events.vue ... 関連イベント
+├── jobboard.vue ... ジョブボード
+├── privacy.vue ... プライバシーポリシー
+├── sharemap.vue ... シェア URL
+└── tokusho.vue ... 特定商取引法に基づく表記
+```
+
+## 参照
+
+[jiyuujin](https://yuma-kitamura.nekohack.me/) 自ら Zenn の「Vue・Nuxt 情報が集まる広場」というパブリケーション上で、記事 [Vue Fes Japan 2024 ウェブサイトのシェア URL で遊んでみよう](https://zenn.dev/comm_vue_nuxt/articles/vuefes-2024-waiwai) を書かせてもらいました。

apps/web-docs/rpa/peatix/csv.md

@@ -279,4 +279,22 @@ CSV ダウンロードを実行すると、下に記したカラムの基で CSV
 
 この CSV に入っているということは、全員が「何らかの」チケットを購入しているということを意味しています。
 
-ちなみに、このうち申込日、申込日、チケット名がネームカードの照合処理にとって必要な情報になるため、これらの情報をステートとして持っておくことにします。
+ちなみに、このうちレシート ID、申込日、チケット名がネームカードの照合処理にとって必要な情報になるため、これらの情報をステートとして持っておくことにします。
+
+事前に CSV のインデックスを持っておけば、あとはそれに合わせる形でデータを取得するだけとなります。
+
+```ts
+export const Constants = {
+  PEATIX_RECEIPT_ID_ROW_INDEX: 0, // レシート ID
+  PEATIX_APPLIED_AT_ROW_INDEX: 3, // 申込日時
+  PEATIX_RECEIPTS_TICKET_NAME_ROW_INDEX: 4, // チケット名
+} as const
+```
+
+なお、個人スポンサーのクレジット名についても同様に CSV のインデックスを持っておけば、あとはそれに合わせる形でデータを取得するだけとなります。
+
+```ts
+export const Constants = {
+  PEATIX_PERSONAL_SPONSOR_NAME_ROW_INDEX: 16, // 個人スポンサー クレジット名
+} as const
+```

apps/web-docs/rpa/peatix/json.md

@@ -1,5 +1,11 @@
 # Fetch JSON data
 
+::: warning
+
+Vue Fes Japan 2024 では、こちらの方法を取っていません。
+
+:::
+
 ## Peatix API
 
 公式に API 提供はアナウンスされていません。

apps/web-docs/supabase/getting-started.md

@@ -101,6 +101,10 @@ const { error } = await supabase.auth.admin.inviteUserByEmail(
 )
 ```
 
+実際に裏側で行えるよう、ページを作成しました（なお、現在はページ表示のためのフラグを切らせていただいております）
+
+![](https://i.imgur.com/0UGwScP.png)
+
 #### API を利用してユーザーを削除
 
 Supabase 管理画面よりユーザーを削除する操作を行えないため、API ([`deleteUser`](https://supabase.com/docs/reference/javascript/auth-admin-deleteuser)) のお世話になります。

packages/ui/.storybook/manager-head.html

@@ -0,0 +1,13 @@
+<meta name="title" content="Vue Fes Japan 2024 デザインシステム" />
+<meta name="description" content="今年は Vue Fes Japan のデザインシステムを構築しました。" />
+<meta property="og:type" content="website" />
+<meta property="og:url" content="https://vuefes-2024-designsystem.pages.dev/" />
+<meta property="og:title" content="Vue Fes Japan 2024 デザインシステム" />
+<meta property="og:description" content="今年は Vue Fes Japan のデザインシステムを構築しました。" />
+<meta property="og:locale" content="ja_JP" />
+<meta property="og:image" content="https://i.imgur.com/Uy6BVrw.png" />
+<meta property="og:image:width" content="1200" />
+<meta property="og:image:height" content="670" />
+<meta property="og:image:type" content="image/png" />
+<meta property="og:image:alt" content="Vue Fes Japan 2024 デザインシステム バナー" />
+<meta property="twitter:card" content="summary_large_image" />