Merge pull request #320 from neilccbrown/main

Added automatic deployment to Github Pages for testing

.github/workflows/build-pages-test-site.yml

@@ -0,0 +1,51 @@
+name: Deploy to GitHub Pages
+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: Install Node.js and NPM
+              uses: actions/setup-node@v4
+            - name: NPM Install
+              run: npm install
+            - name: NPM Build
+              run: npm run build --python --githubpages
+            - name: Upload artifact
+              uses: actions/upload-pages-artifact@v3
+              with:
+                  path: dist/
+
+    # 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

src/assets/style/test-watermark.scss

@@ -0,0 +1,13 @@
+body::before {
+    content: "TESTING"; /* The watermark text */
+    position: fixed; /* Stays in place across the viewport */
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%) rotate(-45deg); /* Center and rotate diagonally */
+    font-size: 15vw; /* Adjust size relative to the viewport width */
+    color: rgba(0, 0, 0, 0.1); /* Light grey and semi-transparent */
+    white-space: nowrap; /* Prevent text wrapping */
+    pointer-events: none; /* Allow interaction with page elements below */
+    z-index: 9999; /* Ensure it stays on top without affecting others */
+    user-select: none; /* Prevent text selection */
+}

vue.config.js

@@ -81,7 +81,7 @@ module.exports = {
         }
     },
 
-    publicPath: (process.env.npm_config_python)?"/editor/":"/microbit/",
+    publicPath: (process.env.npm_config_githubpages) ? "/Strype/" : ((process.env.npm_config_python)?"/editor/":"/microbit/"),
     pluginOptions: {
         i18n: {
             locale: "en",
@@ -96,7 +96,9 @@ module.exports = {
             scss: {
                 additionalData: `
                     @import "@/assets/style/variables.scss";
-                `,
+                ` + (process.env.npm_config_githubpages ?  `
+                    @import "@/assets/style/test-watermark.scss";
+                ` : ""),
             },
         },
     },