Build the page using NPM (#7)

* Restructured repo as NPM package

* Include MapLibre through NPM

* Added start command

* Replaced custom date filtering with maplibre-gl-dates

* Added deployment workflow

* Updated documentation

* Updated repository name

* Updated description in readme

* Added build workflow

* Fixed syntax error

.github/workflows/build.yml

@@ -0,0 +1,32 @@
+name: Build
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency: preview-${{ github.ref }}
+
+jobs:
+  # Build job
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Setup Node.js environment
+        uses: actions/[email protected]
+        with:
+          node-version: 22
+      - name: Build with Node.js
+        run: |
+          npm ci
+          npm run build

.github/workflows/deploy.yml

@@ -0,0 +1,59 @@
+# Sample workflow for building and deploying a Jekyll site to GitHub Pages
+name: Build and deploy
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+    branches: ["main"]
+
+  # Allows you to run this workflow manually from the Actions tab
+  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, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  # Build job
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Setup Pages
+        uses: actions/configure-pages@v5
+      - name: Setup Node.js environment
+        uses: actions/[email protected]
+        with:
+          node-version: 22
+      - name: Build with Node.js
+        run: |
+          npm ci
+          npm run build
+      - name: Build with Jekyll
+        uses: actions/jekyll-build-pages@v1
+        with:
+          source: ./dist
+          destination: ./_site
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+
+  # Deployment job
+  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

@@ -0,0 +1,130 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional stylelint cache
+.stylelintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+.temp
+.cache
+
+# Docusaurus cache and generated files
+.docusaurus
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*

CONTRIBUTING.md

@@ -0,0 +1,9 @@
+# Contributing
+
+## Building
+
+To build the embed with its dependencies, run `npm run build`. This outputs index.html inside the dist/ folder.
+
+## Testing
+
+To test the embed page locally, run `npm start`. This builds the page with its dependencies, opens it in your default Web browser, and automatically reloads the page as you change its source code.

README.md

@@ -1,11 +1,8 @@
 # Embeddable OpenHistoricalMap
-Embed version of OHM default map style
 
-This is a simple embeddable version of the OpenHistoricalMap default map style, with the ability to select and display a single year via URL parameter or animate across a timespan. The map responds to gestures interactively, but the dates can only be adjusted via the URL.
+This is a simple world historical map based on [OpenHistoricalMap](https://www.openhistoricalmap.org/) data that is suitable for embedding inside a third-party webpage. Using URL parameters, you can choose a location, time period, and cartographic style. To show a place’s evolution, you can also animate smoothly between two arbitrary dates. The map responds to gestures interactively, but the dates can only be adjusted via the URL.
 
-The use case for this would be, for example, to embed map showing a specific place and time in a blog post about that place and time. The map is zoomable and pannable, but doesn't allow changing the year within the interface, such as is possible with the timeslider on openhistoricalmap.org.
-
-The base URL of the embed is https://embed.openhistoricalmap.org/
+Visit the map directly at [embed.openhistoricalmap.org](https://embed.openhistoricalmap.org/). Or export a code snippet for your webpage by opening the Share panel on the right side of [OHM’s homepage](https://www.openhistoricalmap.org/) and changing the format to “HTML”.
 
 ## URL parameters
 
@@ -47,6 +44,6 @@ Simply use code like this to embed:
 
 Here's an [example iFrame](https://embed.openhistoricalmap.org/iframe-example.html).
 
-## For development
+## Feedback
 
-Start a webserver in this directory, e.g., `http-server`. Use the resulting base url, e.g., `http://localhost:8082/` as `ohm-website`'s [`embed_server_url` in `config/settings.local.yml`](https://github.com/OpenHistoricalMap/ohm-website/blob/staging/config/settings.yml).
+Please submit bug reports and feature requests to [OpenHistoricalMap’s central issue tracker](https://github.com/OpenHistoricalMap/issues/issues/), noting “OpenHistoricalMap embed” somewhere in the title or description. 

index.html

@@ -4,14 +4,23 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width">
   <title>OpenHistoricalMap</title>
-  <script src="https://unpkg.com/maplibre-gl@%5E2.4/dist/maplibre-gl.js" type="text/javascript"></script>
-  <script src="./embed-map-single-year.js" type="text/javascript"></script>
-  <link rel="stylesheet" href="https://unpkg.com/maplibre-gl@%5E2.4/dist/maplibre-gl.css">
-  <link rel="stylesheet" href="./styles.css">
+  <script src="./index.js" type="text/javascript"></script>
+  <link rel="stylesheet" href="./index.css">
+  <style type="text/css">
+    body {
+      margin: 0;
+      padding: 0;
+    }
+
+    html, body, #map {
+      width: 100%;
+      height: 100%;
+    }
+  </style>
 </head>
 <body>
 
 <div id="map"></div>
 
 </body>
-</html>
+</html>