Testing github pages workflow

halftheopposite · halftheopposite · commit accc5dd774f9 · 2025-04-07T23:22:51.000+02:00
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -0,0 +1,54 @@
+name: Build and Deploy
+
+on:
+  push:
+    branches: [main]
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment
+concurrency:
+  group: "pages"
+  cancel-in-progress: true
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+          cache: "yarn"
+
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+
+      - name: Build
+        run: yarn build
+
+      - name: Setup Pages
+        uses: actions/configure-pages@v4
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: "./public"
+
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4
diff --git a/README.md b/README.md
@@ -1,2 +1,46 @@
-# arduino-tilemap-editor
+# Arduino Tilemap Editor
+
 Create, edit, and export tilemaps directly to C++ header files for Arduino-powered devices.
+
+## Live Demo
+
+You can try the application online at [https://halftheopposite.github.io/arduino-tilemap-editor](https://halftheopposite.github.io/arduino-tilemap-editor)
+
+## Development
+
+### Prerequisites
+
+- Node.js (v14 or higher)
+- Yarn
+
+### Installation
+
+```bash
+# Clone the repository
+git clone https://github.com/halftheopposite/arduino-tilemap-editor.git
+cd arduino-tilemap-editor
+
+# Install dependencies
+yarn install
+
+# Start the development server
+yarn start
+```
+
+The application will be available at http://localhost:3000
+
+### Building
+
+```bash
+yarn build
+```
+
+This will create a production build in the `public` directory.
+
+## Deployment
+
+The application is automatically deployed to GitHub Pages when changes are pushed to the main branch using GitHub Actions.
+
+## License
+
+MIT
diff --git a/esbuild.config.js b/esbuild.config.js
@@ -7,6 +7,9 @@ const isServe = args.includes("--serve");
 
 const PORT = 3000;
 
+// Check if we're building for GitHub Pages
+const isGitHubPages = process.env.GITHUB_ACTIONS === "true";
+
 const buildOptions = {
   entryPoints: ["src/index.tsx"],
   bundle: true,
@@ -22,6 +25,8 @@ const buildOptions = {
     ".ts": "tsx",
   },
   jsx: "automatic",
+  // Set the public path for GitHub Pages if needed
+  publicPath: isGitHubPages ? "/arduino-tilemap-editor" : "/",
 };
 
 // Function to start the development server
diff --git a/package.json b/package.json
@@ -2,6 +2,7 @@
   "name": "arduino-tilemap-editor",
   "version": "0.1.0",
   "description": "Create, edit, and export tilemaps directly to C++ header files for Arduino.",
+  "homepage": "https://halftheopposite.github.io/arduino-tilemap-editor",
   "scripts": {
     "start": "node esbuild.config.js --serve",
     "build": "node esbuild.config.js"
diff --git a/public/.nojekyll b/public/.nojekyll
@@ -0,0 +1 @@
+
diff --git a/public/index.html b/public/index.html
@@ -8,6 +8,18 @@
       name="description"
       content="Create, edit, and export tilemaps directly to C++ header files for Arduino."
     />
+    <!-- Base URL for GitHub Pages deployment -->
+    <script>
+      // Dynamically set the base URL based on the environment
+      (function () {
+        const isGitHubPages = window.location.hostname.includes("github.io");
+        if (isGitHubPages) {
+          const baseElement = document.createElement("base");
+          baseElement.href = "/arduino-tilemap-editor/";
+          document.head.appendChild(baseElement);
+        }
+      })();
+    </script>
     <link rel="stylesheet" href="styles.css" />
   </head>
   <body>
