First 2 games

.github/workflows/dockerBuildAndPush.yml

@@ -0,0 +1,49 @@
+name: Docker build and publish to GHCR
+
+on:
+  push:
+    branches:
+      - master
+  release:
+    types: [published] # will use tag name regardless of naming
+
+jobs:
+  build_and_publish:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      packages: write
+    steps:
+      - name: Checkout current Repository
+        uses: actions/checkout@v3
+
+      - name: Set up Docker Buildx
+        id: buildx
+        uses: docker/setup-buildx-action@v2
+
+      - name: Available platforms
+        run: echo ${{ steps.buildx.outputs.platforms }}
+
+      - name: Log in to the Container registry
+        run:  docker login --username PatrickMohr --password ${{secrets.PUBLISH_PACKAGES}} ghcr.io
+
+      - name: Extract metadata (tags, labels) for Docker
+        id: meta
+        uses: docker/metadata-action@v4
+        with:
+          images: ghcr.io/${{ github.repository }}
+          tags: |
+            type=ref,event=tag
+            type=raw,value=latest
+
+      - name: Build and push Docker image
+        uses: docker/build-push-action@v4
+        with:
+          context: .
+          platforms: linux/amd64,linux/arm64
+          push: true
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
+          build-args: |
+            EXECUTION_ENV=ci
+            GITHUB_PACKAGE_READ_TOKEN=${{ secrets.PUBLISH_PACKAGES }}

Dockerfile

@@ -0,0 +1,22 @@
+FROM node:lts-alpine
+
+# install simple http server for serving static content
+RUN npm install -g http-server
+
+# make the 'app' folder the current working directory
+WORKDIR /app
+
+# copy both 'package.json' and 'package-lock.json' (if available)
+COPY package*.json ./
+
+# install project dependencies
+RUN npm install
+
+# copy project files and folders to the current working directory (i.e. 'app' folder)
+COPY . .
+
+# build app for production with minification
+RUN npm run build
+
+EXPOSE 8080
+CMD [ "http-server", "dist" ]

app.vue

@@ -1,5 +1,10 @@
+<script setup lang="ts">
+const route = useRoute()
+</script>
+
 <template>
-  <div>
-    <NuxtWelcome />
-  </div>
-</template>
+  <NuxtLoadingIndicator />
+  <NuxtLayout>
+    <NuxtPage />
+  </NuxtLayout>
+</template>

docker-compose.yml

@@ -0,0 +1,14 @@
+version: "1"
+
+services:
+  testpage:
+    image: ghcr.io/patrickmohr/abitmohrhub:latest
+    restart: always
+    pull_policy: always
+    ports:
+      - 8080:8080
+
+networks:
+  default:
+    external: true
+    name: proxy

nuxt.config.ts

@@ -1,4 +1,14 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
-  devtools: { enabled: true }
-})
+  devtools: { enabled: true },
+  // @ts-ignore
+  pages: true,
+  nitro: {
+
+  },
+  runtimeConfig: {
+    public: {
+      baseURL: process.env.BASE_URL || '127.0.0.1',
+    },
+  }
+})

pages/index.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <div class="pixelgames-div">
+    <NuxtLink to="/pixelgames">
+      <button>PixelGames</button>
+    </NuxtLink>
+  </div>
+</template>
+
+<style scoped>
+
+.pixelgames-div {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 90vh
+}
+
+button {
+  background-color: #04AA6D; /* Green */
+  border: 2px solid #04AA6D;
+  border-radius: 1vw;
+  color: white;
+  padding: 0.5vw 1vw;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  font-size: 3vw;
+  transition-duration: 0.4s;
+}
+
+button:hover {
+  background-color: #ffffff; /* Green */
+  color: #04AA6D;
+}
+</style>

pages/pixelgames.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <div class="title-container">
+    <h1>PixelGames</h1>
+  </div>
+  <div class="game-container">
+    <div class="gametitle-container">
+      <h1>Fruitdrop</h1>
+    </div>
+    <div class="iframe-container">
+      <iframe src="static/fruit_drop.html" width="800" height="600" frameborder="0" allowfullscreen="true"></iframe>
+    </div>
+  </div>
+  <div class="game-container">
+    <div class="gametitle-container">
+      <h1>Breakout</h1>
+    </div>
+    <div class="iframe-container">
+      <iframe src="static/breakout.html" width="800" height="600" frameborder="0" allowfullscreen="true"></iframe>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+.game-container {
+  margin: 1.5vw;
+  padding: 0.5vw;
+  background-color: #fff;
+  border-radius: 1vw;
+  box-shadow: 0 0 1vw rgba(0, 0, 0, 0.3);
+}
+
+.title-container {
+  text-align: center;
+  font-family: 'Arial', sans-serif;
+  margin: 2vw;
+  font-size: 1.2vw;
+  color: #363636;
+}
+
+.gametitle-container {
+  text-align: center;
+  font-family: 'Arial', sans-serif;
+  margin: 1vw;
+  font-size: 0.8vw;
+  color: #555;
+}
+
+.iframe-container {
+  text-align: center;
+  background-color: #fff;
+  margin: 1.5vw;
+  padding: 0.5vw;
+}
+
+</style>