simplify app

.github/workflows/static.yml

@@ -0,0 +1,50 @@
+# Simple workflow for deploying static content to GitHub Pages
+name: Deploy static content to 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:
+  # Single deploy job since we're just deploying
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v2
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v2
+      - name: Compile Javascript assets
+        run: |
+          make
+      - name: Setup Pages
+        uses: actions/configure-pages@v4
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          # Upload entire repository
+          path: './static/dist'
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

.gitignore

@@ -1,2 +1,2 @@
-
+static
 Ideen/~$kriterienkataloge.xlsx

Makefile

@@ -0,0 +1,2 @@
+build-ui-docker:
+	docker run --rm -v ${PWD}/pupil-submission-page:/app -v ${PWD}/static/dist/:/app/dist -w /app --entrypoint vite mam10eks/github-page-tutorial:0.0.2 build

pupil-submission-page/.devcontainer.json

@@ -1,5 +1,5 @@
 {
-  "image": "webis/tira-application:basis-0.0.97",
+  "image": "mam10eks/github-page-tutorial:0.0.2",
   "customizations": {
     "vscode": {
       "extensions": ["ms-python.python", "ms-python.vscode-pylance", "ms-toolsai.jupyter"]

pupil-submission-page/src/components/MainStudentPage.vue

@@ -7,26 +7,16 @@ import Stepper_4 from "./Stepper_4.vue"
 
 <!-- eslint-disable vue/valid-v-slot -->
 <template>
-    <v-container>
-        <v-stepper :items="['Deine Aufgabe', 'Baue Deinen Datensatz', 'Trainiere Deine KI', 'Teste Deine KI']">
-            <template v-slot:item.1>
-                <Stepper_1/>
-            </template>
+    <v-stepper :items="['Deine Aufgabe', 'Baue Deinen Datensatz', 'Trainiere Deine KI', 'Teste Deine KI']" next-text="Weiter" prev-text="Zur&Uuml;ck">
+        <template v-slot:item.1><Stepper_1/></template>
 
-            <template v-slot:item.2>
-                <Stepper_2/>
-            </template>
+        <template v-slot:item.2><Stepper_2/></template>
 
-            <template v-slot:item.3>
-                <Stepper_3/>
-            </template>
+        <template v-slot:item.3><Stepper_3/></template>
 
-            <template v-slot:item.4>
-                <Stepper_4/>
-            </template>
+        <template v-slot:item.4><Stepper_4/></template>
 
-        </v-stepper>
-    </v-container>
+    </v-stepper>
 </template> 
 
 <style></style>

pupil-submission-page/src/components/Stepper_1.vue

@@ -7,9 +7,9 @@
                 </v-row>
             </template>
         </v-img>
-        <v-card>
+        <div class="text-center">
             <v-btn @click="downloadMyPdf" color="blue" class="mt-5">Download Aufgabe</v-btn>
-        </v-card>
+        </div>
     </v-card>
 </template>
 

pupil-submission-page/src/main.ts

@@ -11,18 +11,18 @@ import App from './App.vue';
 import { createApp } from 'vue';
 import { createVuetify } from 'vuetify'
 import 'vuetify/styles' // Import Vuetify styles
+import router from './router'
 
 // Create a Vuetify instance with any options you want to include
 const vuetify = createVuetify({
   // theme, icons, etc.
 });
-// Plugins
-import { registerPlugins } from '@/plugins'
+
 
 // Create and mount the root instance of your Vue app
 const app = createApp(App)
 
 app.use(vuetify)
-registerPlugins(app)
+app.use(router)
 
 app.mount('#app')

pupil-submission-page/src/router/index.ts

@@ -1,14 +1,10 @@
 import { createRouter, createWebHistory } from "vue-router";
 
-
 const router = createRouter({
   history: createWebHistory(),
   routes: [
-    {
-      path: "/",
-      name: "StudentPage",
-      component: () => import("../views/StudentPageView.vue"),
-    },
+    {path: "/", component: () => import("../views/StudentPageView.vue")},
+    {path: '/:pathMatch(.*)*', component: () => import("../views/StudentPageView.vue")},
   ],
 });
 

pupil-submission-page/src/views/StudentPageView.vue

@@ -7,22 +7,5 @@ import Header from "@/components/Header.vue";
 </script>
 
 <template>
-    <v-app>
-        <v-main>
-            <Header />
-            <StudentPage />
-        </v-main>
-    </v-app>
-</template>
-
-
-<style>
-#app {
-    font-family: Avenir, Helvetica, Arial, sans-serif;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    text-align: center;
-    color: #2c3e50;
-    margin-top: 60px;
-}
-</style>
+    <StudentPage />
+</template>

pupil-submission-page/vite.config.ts

@@ -50,4 +50,21 @@ export default defineConfig({
     },
     port: 3000,
   },
+  build: {
+    rollupOptions: {
+      output: {
+        // TODO: We would usually like to use assets/ here, but we first have to fix this disraptor problem: https://github.com/disraptor/disraptor/issues/33
+        assetFileNames: 'assets-public/[name].[ext]',
+        chunkFileNames: 'chunks/[name].js',
+        entryFileNames: 'entries/[name].js',
+      },
+    },
+    outDir: '/dist',
+  },
+  experimental: {
+    renderBuiltUrl(filename: string, { hostType }: { hostType: 'js' | 'css' | 'html' }) {
+      // Github pages places the resourecs/assets at this location
+      return '/tira-for-school/dist/' + filename
+    }
+  }
 })