Secure apify token

Author: Dean Sofer

.env.example

@@ -0,0 +1 @@
+APIFY_TOKEN=apify_api_1234567890

.github/workflows/deploy.yml

@@ -0,0 +1,50 @@
+name: Deploy to GitHub Pages
+
+on:
+  push:
+    branches:
+      - gh-pages
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Inject APIFY_TOKEN into map.js
+        env:
+          APIFY_TOKEN: ${{ secrets.APIFY_TOKEN }}
+        run: |
+          sed -i "s/__APIFY_TOKEN__/${APIFY_TOKEN}/g" map.js
+
+      - name: Setup Pages
+        uses: actions/configure-pages@v4
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: '.'
+
+  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

.gitignore

@@ -1 +1,2 @@
-node_modules
+node_modules
+.env

README.md

@@ -6,4 +6,42 @@ Data is refreshed every other day by Apify crawler.
 [![Screenshot](https://proloser.github.io/funcheapmap/screenshot.png)](https://proloser.github.io/funcheapmap/)
 
 Latest version has a button to quickly add events to your calendar of choice
-<img width="741" alt="Screenshot 2024-08-05 at 1 38 18 PM" src="https://github.com/user-attachments/assets/14fcbafa-13b7-447e-9f1e-d018c191983c">
+<img width="741" alt="Screenshot 2024-08-05 at 1 38 18 PM" src="https://github.com/user-attachments/assets/14fcbafa-13b7-447e-9f1e-d018c191983c">
+
+## Setup
+
+### Local Development
+
+1. Copy the example environment file:
+   ```bash
+   cp .env.example .env
+   ```
+
+2. Add your Apify API token to `.env`:
+   ```
+   APIFY_TOKEN=your_actual_apify_token_here
+   ```
+
+3. Open `index.html` in your browser directly, or use a local server:
+   ```bash
+   python -m http.server 8080
+   # or
+   npx http-server -p 8080
+   ```
+
+### GitHub Pages Deployment
+
+The site automatically deploys to GitHub Pages when you push to the `gh-pages` branch.
+
+**Required GitHub Secret:**
+
+You need to add your Apify API token as a GitHub secret:
+
+1. Go to your repository on GitHub
+2. Navigate to **Settings** → **Secrets and variables** → **Actions**
+3. Click **New repository secret**
+4. Name: `APIFY_TOKEN`
+5. Value: Your Apify API token
+6. Click **Add secret**
+
+The GitHub Actions workflow will automatically inject this token into the JavaScript file at build time.

map.js

@@ -320,6 +320,8 @@ window.showUserLocation = async function () {
  * Utility class for managing event data
  */
 class Events {
+  static API_TOKEN = '__APIFY_TOKEN__';
+  static API = `https://api.apify.com/v2/acts/apify~cheerio-scraper/runs/last/dataset/items?clean=true&token=${Events.API_TOKEN}`;
   /**
    * Generates and returns a google maps info window
    * 
@@ -473,7 +475,13 @@ class Events {
    */
   query() {
     return fetch(new Request(Events.API))
-      .then(response => response.json());
+      .then(response => {
+        if (!response.ok) {
+          const error = new Error(`Events Query Failed! ${response.status}`);
+          error.response = response;
+          throw error;
+        }
+        return response.json();
+      });
   }
 }
-Events.API = 'https://api.apify.com/v2/acts/apify~cheerio-scraper/runs/last/dataset/items?clean=true&token=apify_api_1U4gg8GRgTkFBjyfEkxKNtS9n4gUUw3wUjUV';