Dev/merge

.github/workflows/ci.yml

@@ -36,7 +36,7 @@ jobs:
         uses: docker/metadata-action@v5
         with:
           images: |
-            ghcr.io/${{ github.repository }}/web
+            ghcr.io/${{ github.repository }}
           tags: |
             type=ref,event=branch
             type=ref,event=pr
@@ -49,8 +49,6 @@ jobs:
         uses: docker/build-push-action@v6
         with:
           push: false
-          build-args: |
-            VITE_CLERK_PUBLISHABLE_KEY=${{ secrets.CLERK_PUBLISHABLE_KEY }}
           tags: ${{ steps.meta.outputs.tags }}
           cache-from: type=gha
           cache-to: type=gha,mode=max
@@ -70,8 +68,6 @@ jobs:
         uses: docker/build-push-action@v6
         with:
           push: false
-          build-args: |
-            VITE_CLERK_PUBLISHABLE_KEY=${{ secrets.CLERK_PUBLISHABLE_KEY }}
           tags: ${{ needs.build.outputs.tags }}
           load: true
           cache-from: type=gha
@@ -80,7 +76,12 @@ jobs:
         env:
           REPOSITORY: '${{ github.repository }}'
         run: |
-          docker run -d -p 5173:80 ghcr.io/${REPOSITORY,,}/web:sha-${{ github.sha }}
+          docker run -d -p 5173:80 ghcr.io/${REPOSITORY,,}:sha-${{ github.sha }}
+      - name: Setup Firefox
+        if: matrix.browser == 'firefox'
+        uses: browser-actions/setup-firefox@v1
+        with:
+          firefox-version: "140.0"
       - name: Cypress run
         uses: cypress-io/github-action@v6
         with:
@@ -93,29 +94,3 @@ jobs:
           name: cypress-screenshots-${{ matrix.browser }}
           path: cypress/screenshots/
           retention-days: 7
-
-  push:
-    name: Push
-    runs-on: ubuntu-latest
-    needs: [build, test]
-    if: success()
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v4
-      - name: Setup buildx
-        uses: docker/setup-buildx-action@v3
-      - name: Login to GHCR
-        uses: docker/login-action@v3
-        with:
-          registry: ghcr.io
-          username: ${{ github.actor }}
-          password: ${{ secrets.GITHUB_TOKEN }}
-      - name: Build and Push Docker image
-        uses: docker/build-push-action@v6
-        with:
-          push: true
-          build-args: |
-            VITE_CLERK_PUBLISHABLE_KEY=${{ secrets.CLERK_PROD_PUBLISHABLE_KEY }}
-          tags: ${{ needs.build.outputs.tags }}
-          cache-from: type=gha
-          cache-to: type=gha,mode=max

.github/workflows/publish.yml

@@ -0,0 +1,46 @@
+name: CI
+on:
+  push:
+    branches:
+      - main
+    tags:
+      - '*'
+
+jobs:
+  push:
+    name: Push
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      packages: write
+      attestations: write
+      id-token: write
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+      - name: Login to GHCR
+        uses: docker/login-action@v3
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+      - name: Setup buildx
+        uses: docker/setup-buildx-action@v3
+      - name: Docker meta
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          images: ghcr.io/${{ github.repository }}
+          tags: |
+            type=ref,event=branch
+            type=ref,event=pr
+            type=semver,pattern={{version}}
+            type=semver,pattern={{major}}.{{minor}}
+            type=sha,format=long
+      - name: Build and Push Docker image
+        uses: docker/build-push-action@v6
+        with:
+          push: true
+          tags: ${{ needs.build.outputs.tags }}
+          cache-from: type=gha
+          cache-to: type=gha,mode=max

Dockerfile

@@ -1,6 +1,4 @@
 FROM node:22.14.0-alpine AS build-stage
-ARG VITE_CLERK_PUBLISHABLE_KEY
-ENV VITE_CLERK_PUBLISHABLE_KEY=$VITE_CLERK_PUBLISHABLE_KEY
 
 WORKDIR /app
 

README.md

@@ -11,9 +11,6 @@ Check the [open issues](https://github.com/lost-university/web/issues) to see wh
 
 ## Project setup
 
-A [Clerk](https://clerk.com/) publishable key is needed to run the project in combination with the backend. Copy the `example.env` file to `.env` and set the variable. 
-> You don't have to set it up if you only want to run the frontend without the backend. 
-
 ```
 npm install
 ```
@@ -67,11 +64,3 @@ npm run test:dev
 ```
 npm run test
 ```
-
-## Pipeline
-
-The pipeline is configured to set the `CLERK_PUBLISHABLE_KEY` environment variable which is stored inside a github secret. The token will be compiled into the docker container. If the publishable key has changed, a new image must be built. This is because the application is compiled into static files so there is no node server when running in production which could set the token dynamically. 
-> As the name publishable key suggests, it is not a secret. It is only used to identify the application and to allow Clerk to serve the correct configuration. It is limited to the url configured for this application.
-
-
-

cypress/e2e/graph/graphView.cy.ts

@@ -1,13 +1,13 @@
 /* eslint-disable max-len */
 describe("Graph View E2E Tests", () => {
   beforeEach(() => {
-    cy.intercept("GET", "https://raw.githubusercontent.com/Janooski/data/main/data/modules.json", {
+    cy.intercept("GET", "https://raw.githubusercontent.com/lost-university/data/main/data/modules.json", {
       fixture: "modules.json",
     }).as("modules");
 
     cy.intercept(
       "GET",
-      "https://raw.githubusercontent.com/Janooski/data/main/data2I/categories.json",
+      "https://raw.githubusercontent.com/lost-university/data/main/data2I/categories.json",
       { fixture: "categories.json" }
     ).as("categories");
 

src/api/config.ts

@@ -0,0 +1,14 @@
+const fetchConfig = async (): Promise<string> => {
+  try {
+    const response = await fetch('/api/config');
+    const data = await response.json();
+
+    return data.clerkPublishableKey
+  } catch (error) {
+    return '';
+  }
+}
+
+export {
+  fetchConfig
+}

src/components/GraphModule.vue

@@ -109,7 +109,7 @@ export default defineComponent({
       required: true
     },
     id: {
-      type: Number,
+      type: String,
       required: true
     }
   },

src/components/GraphModuleHightlight.vue

@@ -9,7 +9,7 @@
     @mouseleave="handleMouseLeave"
   >
     <ModuleComponent
-      :id="Number(id)"
+      :id="id"
       :module="moduleData"
     />
   </div>

src/components/GraphModuleList.vue

@@ -16,7 +16,7 @@
         >
           <ModuleCard
             v-if="mod?.name"
-            :id="Number(mod.id)"
+            :id="mod.id"
             :module="mod"
           />
 
@@ -114,4 +114,4 @@ export default defineComponent({
     },
   },
 });
-</script>
+</script>

src/components/Module.vue

@@ -30,7 +30,7 @@ export default defineComponent({
   components: { ModuleCard },
   props: {
     module: { type: Object as () => Module, required: true },
-    id: { type: Number, required: true }
+    id: { type: String, required: true }
   },
   emits: ['on-delete']
 })