main

.dockerignore

@@ -1,3 +1,5 @@
 /build
 /node_modules
-/.git
+/.git
+/.vscode
+/.github

.github/workflows/deploy-pages.yml

@@ -1,8 +1,12 @@
 name: Deploy to GitHub Pages
 
 on:
-  release:
-    types: [created]
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
 
 permissions:
   contents: read

.github/workflows/publish.yml

@@ -2,7 +2,7 @@ name: Publish to npm
 
 on:
   release:
-    types: [created]
+    types: [published]
 
 permissions:
     contents: read

.github/workflows/push-docker.yml

@@ -0,0 +1,50 @@
+name: Build and Push Docker Image
+
+permissions:
+    contents: read
+    id-token: write
+
+on:
+  release:
+    types: [published]
+
+jobs:
+  build-and-push:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@885d1462b80bc1c1c7f0b00334ad271f09369c55
+
+      - name: Login to DockerHub
+        uses: docker/login-action@465a07811f14bebb1938fbed4728c6a1ff8901fc
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+
+      - name: Extract metadata (tags, labels) for Docker
+        id: meta
+        uses: docker/metadata-action@9ec57ed1fcdbf14dcef7dfbe97b2010124a938b7
+        with:
+          images: ${{ vars.DOCKERHUB_REPO }}
+
+      - name: Build and push Docker image
+        uses: docker/build-push-action@3b5e8027fcad23fda98b2e3ac259d8d67585f671
+        with:
+          context: .
+          file: ./docker/Dockerfile
+          push: true
+          build-args: GITHUB_REF=${{ github.ref_name }}
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
+          platforms: linux/amd64,linux/arm64
+
+      - uses: shrink/actions-docker-extract@f97780187d59e88f06a98b166a7e700c0f400314
+        id: extract
+        with:
+          image: ${{ vars.DOCKERHUB_REPO }}
+          path: /usr/share/nginx/html/.
+          destination: dist

README.md

@@ -23,9 +23,10 @@ Go to https://yasgui.matdata.eu/ and use it freely in production. Or fork this r
 ## Useful Links
 
 - Production environment: https://yasgui.matdata.eu/
-- Dev environment: https://yasgui-dev.matdata.eu/
+- Dev environment: https://yasgui-dev.matdata.eu/ (GitHub Pages - automatically updated with every commit to main branch)
 - User documentation: https://docs.triply.cc/yasgui/
 - Developer documentation: https://docs.triply.cc/yasgui-api/
+- Docker Hub: https://hub.docker.com/r/mathiasvda/yasgui
 
 ## Features
 
@@ -88,6 +89,23 @@ npm i @matdata/yasgui
 yarn add @matdata/yasgui
 ```
 
+### Docker
+
+Yasgui is also available as a Docker image on Docker Hub. Images are built and published automatically when a new release is created.
+
+```sh
+docker pull mathiasvda/yasgui:latest
+docker run -p 8080:8080 mathiasvda/yasgui:latest
+```
+
+You can customize the default SPARQL endpoint by setting the `YASGUI_DEFAULT_ENDPOINT` environment variable:
+
+```sh
+docker run -p 8080:8080 -e YASGUI_DEFAULT_ENDPOINT=https://your-endpoint.com/sparql mathiasvda/yasgui:latest
+```
+
+The application will be available at `http://localhost:8080`.
+
 ## Local Development
 
 #### Installing dependencies

docker/Dockerfile

@@ -0,0 +1,35 @@
+# Use the official Node.js image as the base image
+FROM node:20
+
+# Set the working directory
+WORKDIR /app
+
+# Copy package.json and package-lock.json
+COPY package*.json ./
+
+# Install dependencies
+RUN npm install
+
+# Copy the rest of the application code
+COPY . .
+
+# Build the React app
+RUN npm run build
+
+# Use the official Nginx image to serve the React app
+FROM nginxinc/nginx-unprivileged:alpine
+
+# Copy only JS/CSS from the build output
+COPY --from=0 /app/build/yasgui.min.js /usr/share/nginx/html/
+COPY --from=0 /app/build/yasgui.min.css /usr/share/nginx/html/
+
+# Copy other static assets
+COPY docker/src/ /usr/share/nginx/html/
+
+USER root
+
+COPY docker/change-default-endpoint.sh /docker-entrypoint.d/
+RUN chmod +x /docker-entrypoint.d/change-default-endpoint.sh
+RUN chown 1001:0 -R /usr/share/nginx/html/
+
+USER 1001

docker/change-default-endpoint.sh

@@ -0,0 +1,14 @@
+#!/bin/sh
+
+# Set default value if the environment variable is not set
+: ${YASGUI_DEFAULT_ENDPOINT:="https://dbpedia.org/sparql"}
+
+# Replace the default endpoint in the bundle.js file
+echo "Switching YASGUI default endpoint to: $YASGUI_DEFAULT_ENDPOINT"
+sed -i "s|https://change.to.default.endpoint/sparql|$(printf '%s' "$YASGUI_DEFAULT_ENDPOINT" | sed 's/[&/\]/\\&/g')|g" /usr/share/nginx/html/*.js
+
+# Execute the command passed to the entrypoint
+exec "$@"
+
+# Execute the original Docker entrypoint script
+exec /docker-entrypoint.sh

docker/src/index.html

@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <link rel="icon" href="favicon.png" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="theme-color" content="#000000" />
+  <meta name="description" content="Yasgui - SPARQL interface" />
+  <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+  <link rel="manifest" href="manifest.json" />
+
+  <!-- YASGUI CSS -->
+  <link rel="stylesheet" href="yasgui.min.css">
+
+  <!-- Font Awesome for icons -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+
+  <!-- Main site stylesheet -->
+  <link rel="stylesheet" href="main.css">
+
+  <title>Yasgui</title>
+</head>
+
+<body>
+  <noscript>You need to enable JavaScript to run this app.</noscript>
+
+  <!-- YASGUI container -->
+  <div id="yasgui"></div>
+
+    <!-- YASGUI JavaScript -->
+    <script src="yasgui.min.js"></script>
+
+  <!-- Footer toggle button (visible on small screens) -->
+  <button id="footer-toggle" aria-label="Toggle footer">
+    <i class="fas fa-info-circle"></i>
+  </button>
+
+  <div id="footer">
+    <a href="https://matdata.eu/" target="_blank" rel="noopener noreferrer" class="footer-left">
+      <img id="logo" src="logo.svg" alt="Matdata Logo">
+    </a>
+    <div class="footer-center">
+      <small>Source code available on <a href="https://github.com/Matdata-eu/yasgui">Matdata-eu/yasgui</a> with credits to <a href="https://github.com/zazuko/yasgui">Zazuko/Yasgui</a>, 
+        <a href="https://github.com/triplydb/Yasgui">TriplyDB/Yasgui</a>, <a href="https://github.com/Thib-G/yasgui-geo-tg">Thib-G/yasgui-plugin-geo</a> 
+        and <a href="https://github.com/Matdata-eu/yasgui-graph-plugin">Matdata-eu/yasgui-graph-plugin</a></small>
+    </div>
+  </div>
+
+    <!-- Main site script -->
+    <script src="main.js"></script>
+</body>
+
+</html>

docker/src/main.css

@@ -0,0 +1,128 @@
+/* Global styles */
+body {
+  margin: 0;
+  padding: 0;
+  font-family:
+    -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
+    "Helvetica Neue", sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* YASGUI container */
+#yasgui {
+  margin-top: 0px;
+  height: calc(100vh - 60px);
+}
+
+/* Footer styles */
+#footer {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background-color: #f5f5f5;
+  padding: 8px 20px;
+  border-top: 1px solid #e0e0e0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  transition: transform 0.3s ease-in-out;
+}
+
+.footer-left {
+  position: absolute;
+  left: 20px;
+  display: flex;
+  align-items: center;
+}
+
+.footer-center {
+  text-align: center;
+}
+
+#logo {
+  height: 35px;
+  width: auto;
+  transition: opacity 0.2s;
+}
+
+#logo:hover {
+  opacity: 0.8;
+}
+
+#footer a {
+  color: #0066cc;
+  text-decoration: none;
+}
+
+#footer a:hover {
+  text-decoration: underline;
+}
+
+/* Footer toggle button */
+#footer-toggle {
+  display: none;
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  background-color: #0066cc;
+  color: white;
+  border: none;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  cursor: pointer;
+  z-index: 999;
+  font-size: 20px;
+  transition: all 0.3s ease;
+}
+
+#footer-toggle:hover {
+  background-color: #0052a3;
+  transform: scale(1.1);
+}
+
+#footer-toggle:active {
+  transform: scale(0.95);
+}
+
+/* Responsive behavior for small screens */
+@media (max-width: 768px) {
+  #footer {
+    transform: translateY(100%);
+  }
+
+  #footer.expanded {
+    transform: translateY(0);
+  }
+
+  #footer-toggle {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  #footer-toggle.hidden {
+    opacity: 0;
+    pointer-events: none;
+    transform: scale(0);
+  }
+
+  .footer-left {
+    position: relative;
+    left: 0;
+    margin-bottom: 10px;
+  }
+
+  #footer {
+    flex-direction: column;
+    padding: 15px 20px;
+  }
+
+  .footer-center {
+    margin-top: 10px;
+  }
+}