👷 CI/CD 導入

.cspell.json

@@ -1,28 +1,26 @@
 {
   "$schema": "https://raw.githubusercontent.com/streetsidesoftware/cspell/main/cspell.schema.json",
   "version": "0.2",
-  "ignorePaths": ["node_modules", "/package.json"],
+  "ignorePaths": [
+    "node_modules",
+    "/package.json"
+  ],
   "words": [
     "Aichi",
     "backburger",
     "cloudflare",
     "consts",
-    "cloudflare",
-    "consts",
+    "DKKI",
     "envsafe",
     "fontsource",
     "gemini",
-    "fontsource",
-    "gemini",
     "Hstack",
     "iconify",
     "instagram",
     "jetbrains",
     "lottie",
     "lottiefiles",
     "neverthrow",
-    "instagram",
-    "neverthrow",
     "pandacss",
     "supabase",
     "SUPABASE",

.env

@@ -13,3 +13,4 @@ VITE_GEMINI_API_KEY="encrypted:BBcfg5FvxzqtXAWYLmIVSrEY7E2W7pjQJW+9ZJA8B9PGZR1qI
 SUPABSE_AUTH_GOOGLE_CLIENT_ID="encrypted:BH2gXi+3RVRhmjuc0L4yFX3ZQ5MpgXcYnnRZ2RM7V0gijmvso76UJkcedzEl0W1ign+uF+xXYq/cNJ3quh+rAXzuBEH3EIwr+KFUXtUUZRhVfQgqG4pbDlvtUxlLMW0WZSDBQtrfUtINBATrVLmJm4c5viXJ/sdIaMMDqGN48/L+EoGXzdNmDNUZrvZAd6qLwrVm9QtQmW+eIhPeE34f6ofcrudLYbxIUg=="
 SUPABSE_AUTH_GOOGLE_CLIENT_SECRET="encrypted:BGdglht6PhNgampfxpYHbL/mmIpirBexAwv/IvH1pdP0BwjZxiMdvAugocijOmXdw/1tFrQFtvA5z4ebQ1FUfh7kmlDQfkKdkvxBvJPD4yyxAoW9diNBF99c65VejZVrvDW4NEJa7iRgD0OHyR4niaScRXksyE39zfMFSoCrclavYUnh"
 YAHOO_REV_GEO_API_KEY="encrypted:BLPKxHwlqs3jKdEK2PEoaDiMan1p7H1m/4YhEnctF8VCoWL5Yp83iFF8DqqRf7aVGTQtfSsu8QNQEociZ28BC1P3SCCzQ7lXWCT+bGAtoGc9Gab9LK02F2x9xhthYXDaQ/l3SxcBqLNPmI3gAF5BCoE6zeoF3Uyw0vpORhiSjCXfJPEmAxl81cb36Q7010lR2b9IQ2wxlL4B"
+ADDR_REFERER_URL="http://127.0.0.1:5173"

.env.production

@@ -6,3 +6,4 @@ DOTENV_PUBLIC_KEY_PRODUCTION="02158caa476f67de708aa5d29234e73a9ee18d586e14bb3716
 
 # .env.production
 VITE_SUPABASE_URL="encrypted:BLiNk1AbwSiE+TBRMmMEShJP+zjdZ2EjTAMZClzcFHU+Sv0QBqPRlDFoEKLr1AackHwepKq+XMEw8MIU4s7Ay29COFlcoI9QJjUKMUBLf3vCeVJcDlvWmBB7dnfB6IInKJGCQ/j6CYl8pDzXqH/veUHGw4CytPpWx9RSWEMLmSCQ5fnf7nFg4E4="
+ADDR_REFERER_URL="https://wkb.pages.dev"

.github/workflows/build.yml

@@ -0,0 +1,66 @@
+name: cloudflare
+
+on:
+  push:
+    branches:
+      - main
+  workflow_dispatch:
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    if: contains(github.event.head_commit.message, '[skip ci]') == false
+
+    steps:
+      - name: 📥 Checkout repository
+        uses: actions/checkout@v3
+
+      - name: 📸 Calculate commit hash
+        id: sha
+        uses: pr-mpt/actions-commit-hash@v2
+
+      - name: 🔨 Prepare Node environment
+        uses: actions/setup-node@v4
+        with:
+          node-version: 16
+      - name: 🔨 Prepare Bun environment
+        uses: oven-sh/setup-bun@v2
+        with:
+          bun-version: latest
+
+      - run: curl -sfS https://dotenvx.sh/install.sh | sh
+
+      - name: 🎉 Install project dependencies
+        run: bun i
+
+      - name: 🏗️ Build app
+        run: bun run build
+        env:
+          DOTENV_PRIVATE_KEY: ${{ secrets.DOTENV_PRIVATE_KEY }}
+          DOTENV_PRIVATE_KEY_PRODUCTION: ${{ secrets.DOTENV_PRIVATE_KEY_PRODUCTION }}
+
+      - name: 🚀 Deploy to Cloudflare Pages
+        id: cloudflare_pages_deploy
+        uses: cloudflare/[email protected]
+        with:
+          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+          command: "pages deploy . --project-name wkb"
+          workingDirectory: ./dist
+        env:
+          NODE_VERSION: 22
+
+      - name: 🚀 Deploy pages based on commit sha
+        uses: actions/github-script@v6
+        with:
+          script: |
+            const sha = context.payload.pull_request?.head.sha ?? context.sha;
+            await github.rest.repos.createCommitStatus({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              context: "cloudflare / build (push)",
+              description: "Commit based deploy",
+              state: "success",
+              sha,
+              target_url: "https://wkb.pages.dev",
+            });

.github/workflows/test.yml

@@ -0,0 +1,28 @@
+name: test
+
+on:
+  push:
+  pull_request:
+  workflow_dispatch:
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    if: contains(github.event.head_commit.message, '[skip ci]') == false
+
+    steps:
+      - name: 📥 Checkout repository
+        uses: actions/checkout@v3
+
+      - name: 🔨 Prepare Bun environment
+        uses: oven-sh/setup-bun@v2
+        with:
+          bun-version: latest
+
+      - run: curl -sfS https://dotenvx.sh/install.sh | sh
+
+      - name: 🎉 Install project dependencies
+        run: bun i
+
+      - name: 😺 Check
+        run: bun run test

.gitignore

@@ -28,3 +28,4 @@ src/routeTree.gen.ts
 src/types/supabase.gen.ts
 tsconfig.tsbuildinfo
 .wrangler/
+tsconfig.tsbuildinfo

functions/__lib/consts.ts

@@ -1,5 +1,6 @@
 export type Env = {
   YAHOO_REV_GEO_API_KEY: string;
+  ADDR_REFERER_URL: string;
 };
 
 export function getEnv<T extends keyof Env>(env: Partial<Env>, key: T): Env[T] {
@@ -11,11 +12,11 @@ export function getEnv<T extends keyof Env>(env: Partial<Env>, key: T): Env[T] {
   return value;
 }
 
-export function getDefaultCors(esaAppRedirectUri: string): Response {
+export function getDefaultCors(ADDR_REFERER_URL: string): Response {
   return new Response(null, {
     status: 204,
     headers: {
-      "Access-Control-Allow-Origin": new URL(esaAppRedirectUri).origin,
+      "Access-Control-Allow-Origin": new URL(ADDR_REFERER_URL).origin,
       "Access-Control-Allow-Headers": "*",
       "Access-Control-Allow-Methods": "GET, OPTIONS",
       "Access-Control-Max-Age": "86400",

functions/address.ts

@@ -1,6 +1,9 @@
 import type { PagesFunction } from "@cloudflare/workers-types";
 import { z } from "zod";
-import { type Env } from "./__lib/consts.js";
+import { getDefaultCors, type Env } from "./__lib/consts.js";
+
+export const onRequestOptions: PagesFunction<Env> = async ({ env }) =>
+  getDefaultCors(env.ADDR_REFERER_URL);
 
 export const onRequest: PagesFunction<Env> = async ({ request, env }) => {
   if (request.method !== "GET") {

package.json

@@ -7,7 +7,7 @@
     "prepare": "panda codegen",
     "dev": "dotenvx run -- bun vite",
     "dev:workers": "dotenvx run -- wrangler pages dev --ip 127.0.0.1 --port 5173 -- bun run dev",
-    "build": "dotenvx run -- bun tsc -b && vite build && bunx cpx wrangler.toml dist/ && bunx cpx \"functions/**\" dist/functions",
+    "build": "dotenvx run -f .env -f .env.production --overload -- bun tsc -b && vite build && bunx cpx wrangler.toml dist/ && bunx cpx \"functions/**\" dist/functions",
     "preview": "vite preview",
     "test": "tsc && bun typo && prettier --check ./src/ ./functions/ --check && eslint --ext .ts,.tsx ./src ./functions/ ",
     "fmt": "prettier --write ./src/",

src/assets/data.ts

@@ -203,14 +203,14 @@ export const sponsorDataData: Array<
     target_amount_of_money: 1000,
     reports: [
       {
-      body: "スポンサー1のレポート",
-      created_at: "2024-09-22T00:00:00Z",
-      key_visual: "https://via.placeholder.com/150",
-      project_id: "1",
-      report_id: "1",
-      sponsor_id: "1",
-      title: "スポンサー1のレポート",
-      }
+        body: "スポンサー1のレポート",
+        created_at: "2024-09-22T00:00:00Z",
+        key_visual: "https://via.placeholder.com/150",
+        project_id: "1",
+        report_id: "1",
+        sponsor_id: "1",
+        title: "スポンサー1のレポート",
+      },
     ],
     fruits: [
       {

src/routes/demo/-components/GeminiTest2.tsx

@@ -240,7 +240,7 @@ export function GeminiDemo2(): ReactElement {
             }}
             variant="outlined"
           >
-            <IconText icon="emdi:cloud-sync">Gemini に聞いてみる</IconText>
+            <IconText icon="mdi:cloud-sync">Gemini に聞いてみる</IconText>
           </Button>
         )}
       </VStack>

src/routes/demo/index.tsx

@@ -3,17 +3,28 @@ import { css } from "panda/css";
 import { VStack, styled as p } from "panda/jsx"; // NOTE: この行のスニペット: `pd` → Tab
 // import { PopoverSample } from "./-components/CheckBox";
 // import { GeminiDemo } from "./-components/GeminiTest";
+import { useEffect } from "react";
 import { GeminiDemo2 } from "./-components/GeminiTest2";
+import { fetchAddressFromLocation } from "@/lib/services/address";
 // import { Logo, LogoComposite } from "@/components/Logo";
 
 export const Route = createFileRoute("/demo/")({
-  component: () => (
-    <VStack
-      alignItems="start"
-      className={css({ "& > h2": { fontWeight: "bold" } })}
-      p="2"
-    >
-      {/* <p.h2>
+  component: () => {
+    useEffect(() => {
+      void fetchAddressFromLocation({ lat: 35.681236, lon: 139.767125 }).then(
+        (res) => {
+          console.log(res);
+        },
+      );
+    }, []);
+
+    return (
+      <VStack
+        alignItems="start"
+        className={css({ "& > h2": { fontWeight: "bold" } })}
+        p="2"
+      >
+        {/* <p.h2>
         Ark UI + Atomic Slot Recipe (<p.code>sva</p.code>) demo
       </p.h2>
       <PopoverSample />
@@ -30,9 +41,10 @@ export const Route = createFileRoute("/demo/")({
         <p.p>複合 (4:1) ロゴ</p.p>
         <LogoComposite />
       </HStack> */}
-      <p.h2>Gemini API Demo</p.h2>
-      {/* <GeminiDemo /> */}
-      <GeminiDemo2 />
-    </VStack>
-  ),
+        <p.h2>Gemini API Demo</p.h2>
+        {/* <GeminiDemo /> */}
+        <GeminiDemo2 />
+      </VStack>
+    );
+  },
 });