Add simple portal

.github/workflows/build.yaml

@@ -0,0 +1,60 @@
+on:
+  push:
+    branches:
+      - main
+
+name: build
+
+env:
+  IMAGE_NAME: 'mijnbureau-portal'
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    permissions:
+      packages: write
+      contents: read
+      actions: read
+      attestations: write
+      id-token: write
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Log in to the Container registry
+        uses: docker/login-action@v3
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v3
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Extract metadata for Docker
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          images:  ghcr.io/minbzk/${{ env.IMAGE_NAME }}
+        env:
+          DOCKER_METADATA_ANNOTATIONS_LEVELS: manifest,index
+
+      - name: Build and push Docker image
+        id: push
+        uses: docker/build-push-action@v6
+        with:
+          context: portal/
+          push: true
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
+          annotations: ${{ steps.meta.outputs.annotations }}
+          platforms: linux/amd64
+
+      - name: Generate artifact attestation
+        uses: actions/attest-build-provenance@v2
+        with:
+          subject-name: ghcr.io/minbzk/${{ env.IMAGE_NAME}}
+          subject-digest: ${{ steps.push.outputs.digest }}
+          push-to-registry: true

.gitignore

@@ -0,0 +1,2 @@
+node_modules/
+portal/src/vendor/

base/grafana/ingress.yaml

@@ -20,4 +20,4 @@ spec:
   tls:
     - hosts:
         - grafana.la-suite.apps.digilab.network
-      secretName: tls
+      secretName: grafana-tls

base/portal/deployment.yaml

@@ -0,0 +1,22 @@
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  name: deployment
+spec:
+  replicas: 1
+  selector:
+    matchLabels:
+      app.kubernetes.io/component: portal
+  template:
+    metadata:
+      labels:
+        app.kubernetes.io/component: portal
+      name: deployment
+    spec:
+      containers:
+        - image: ghcr.io/minbzk/mijnbureau-portal:main
+          imagePullPolicy: Always
+          name: portal
+          ports:
+            - containerPort: 80
+              protocol: TCP

base/portal/ingress.yaml

@@ -0,0 +1,23 @@
+apiVersion: networking.k8s.io/v1
+kind: Ingress
+metadata:
+  annotations:
+    cert-manager.io/cluster-issuer: letsencrypt-prod
+  name: ingress
+spec:
+  ingressClassName: nginx
+  rules:
+    - host: portal.la-suite.apps.digilab.network
+      http:
+        paths:
+          - backend:
+              service:
+                name: service
+                port:
+                  number: 80
+            path: /
+            pathType: Prefix
+  tls:
+    - hosts:
+        - portal.la-suite.apps.digilab.network
+      secretName: portal-tls

base/portal/kustomization.yaml

@@ -0,0 +1,16 @@
+apiVersion: kustomize.config.k8s.io/v1beta1
+kind: Kustomization
+
+resources:
+  - deployment.yaml
+  - ingress.yaml
+  - service.yaml
+
+namePrefix: portal-
+
+labels:
+  - pairs:
+      app.kubernetes.io/name: portal
+
+buildMetadata: [originAnnotations]
+#todo: use configmap generator for configmap.yaml

base/portal/service.yaml

@@ -0,0 +1,13 @@
+apiVersion: v1
+kind: Service
+metadata:
+  name: service
+spec:
+  ports:
+    - name: portal
+      port: 80
+      protocol: TCP
+      targetPort: 80
+  selector:
+    app.kubernetes.io/component: portal
+  type: ClusterIP

overlays/digilab/kustomization.yaml

@@ -57,6 +57,7 @@ resources:
   - ../../base/vault/
   - ../../base/grafana/
   - ../../base/oauth2-proxy/
+  - ../../base/portal/
 
 secretGenerator:
   - name: sec-keycloak

portal/Dockerfile

@@ -0,0 +1,17 @@
+FROM node:20 as build
+
+WORKDIR /app
+
+COPY package.json package-lock.json webpack.config.js ./
+COPY src/ ./src/
+
+RUN npm install
+RUN npm run build
+
+FROM nginx:1.27.3
+
+COPY --from=build /app/src /usr/share/nginx/html
+
+EXPOSE 80
+
+CMD ["nginx", "-g", "daemon off;"]

portal/compose.yaml

@@ -0,0 +1,7 @@
+services:
+  portal:
+    build:
+      context: .
+    image: "docker.io/portal:latest"
+    ports:
+      - "8080:80"

portal/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "mijn-bureau-portal",
+  "version": "1.0.0",
+  "description": "Mijn bureau portal",
+  "scripts": {
+    "build": "webpack --config webpack.config.js",
+    "dev": "webpack serve --config webpack.config.js"
+  },
+  "devDependencies": {
+    "@nl-rvo/assets": "1.0.0-alpha.360",
+    "@nl-rvo/component-library-css": "1.6.0",
+    "@nl-rvo/design-tokens": "1.3.0",
+    "copy-webpack-plugin": "^12.0.2",
+    "replace-in-file-webpack-plugin": "^1.0.6",
+    "webpack": "^5.97.1",
+    "webpack-cli": "^6.0.1",
+    "webpack-dev-server": "^5.2.0"
+  }
+}

portal/src/index.html

@@ -0,0 +1,217 @@
+<!doctype html>
+<html lang="nl">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" href="assets/mijnbureau.svg" />
+
+    <title>Mijn Bureau</title>
+
+    <link rel="stylesheet" href="vendor/roos/fonts/index.css" />
+    <link rel="stylesheet" href="vendor/roos/icons/index.css" />
+    <link rel="stylesheet" href="vendor/roos/images/index.css" />
+    <link rel="stylesheet" href="vendor/roos/design-tokens/index.css" />
+    <link rel="stylesheet" href="vendor/roos/component-library-css/index.css" />
+
+    <script type="module" src="vendor/roos/design-tokens/index.js"></script>
+  </head>
+
+  <body class="rvo-theme">
+    <header class="rvo-header">
+      <div class="rvo-header__logo-wrapper">
+        <a
+          href="/"
+          class="rvo-header__logo-link rvo-link rvo-link--no-underline"
+        >
+          <div class="rvo-logo rvo-header__logo-img">
+            <div class="rvo-logo__emblem">
+              <img
+                src="assets/mijnbureau.svg"
+                alt="Mijn Bureau"
+                class="rvo-logo__emblem-image"
+                style="width: 140px"
+              />
+
+            </div>
+            <div class="rvo-logo__wordmark">
+              <p class="rvo-logo__title"></p>
+            </div>
+          </div>
+        </a>
+      </div>
+    </header>
+    <div class="rvo-layout-column rvo-layout-gap--xl">
+      <div class="rvo-layout-column rvo-layout-gap--xl">
+        <div
+          class="rvo-topnav__background rvo-topnav__background--horizontal-rule"
+        >
+          <div
+            class="rvo-max-width-layout rvo-max-width-layout--md rvo-min-width-layout--md rvo-max-width-layout-inline-padding--none"
+          >
+            <nav class="rvo-topnav rvo-topnav--lg">
+              <ul class="rvo-topnav__list">
+                <li class="rvo-topnav__item">
+                  <a
+                    class="rvo-link rvo-topnav__link rvo-link--logoblauw"
+                    href="/"
+                  >
+                    Home
+                  </a>
+                </li>
+              </ul>
+            </nav>
+          </div>
+        </div>
+        <main class="rvo-max-width-layout rvo-max-width-layout--sm">
+          <h1 class="utrecht-heading-1">Mijn Bureau</h1>
+          <div
+            class="rvo-max-width-layout rvo-max-width-layout--md rvo-max-width-layout-inline-padding--md"
+          >
+            <div
+              class="rvo-layout-grid rvo-layout-gap--md rvo-layout-grid-columns--two"
+            >
+              <div
+                class="rvo-card rvo-card--with-image rvo-card--with-image-sm rvo-card--outline rvo-card--padding-sm"
+                onclick="window.open('https://chat.la-suite.apps.digilab.network/', '_blank');"
+              >
+                <div class="rvo-card__image-container">
+                  <img src="vendor/roos/icons/communicatie/tekstballonnen-met-punten.svg" class="rvo-card__image" style="width: 50px; padding-inline: 20px" />
+                </div>
+                <div class="rvo-card--with-link-indicator">
+                  <div class="rvo-card__content">
+                    <h3 class="utrecht-heading-3">
+                      <a
+                        class="rvo-link rvo-card__link rvo-card__full-card-link"
+                        href="https://chat.la-suite.apps.digilab.network/"
+                        target="_blank"
+                      >
+                        Chat
+                      </a>
+                    </h3>
+                    Chatten met collega's
+                  </div>
+                  <span
+                    class="utrecht-icon rvo-icon rvo-icon-delta-naar-rechts rvo-icon--sm rvo-icon--hemelblauw rvo-card__link-indicator"
+                    role="img"
+                    aria-label="Delta naar rechts"
+                  ></span>
+                </div>
+              </div>
+              <div
+                class="rvo-card rvo-card--with-image rvo-card--with-image-sm rvo-card--outline rvo-card--padding-sm"
+                onclick="window.open('https://docs.la-suite.apps.digilab.network/', '_blank');"
+              >
+                <div class="rvo-card__image-container">
+                  <img src="vendor/roos/icons/functioneel/bewerken.svg" class="rvo-card__image" style="width: 50px; padding-inline: 20px"  />
+                </div>
+                <div class="rvo-card--with-link-indicator">
+                  <div class="rvo-card__content">
+                    <h3 class="utrecht-heading-3">
+                      <a
+                        class="rvo-link rvo-card__link rvo-card__full-card-link"
+                        href="https://docs.la-suite.apps.digilab.network/"
+                        target="_blank"
+                      >
+                        Docs
+                      </a>
+                    </h3>
+                    Gezamelijk notities maken
+                  </div>
+                  <span
+                    class="utrecht-icon rvo-icon rvo-icon-delta-naar-rechts rvo-icon--sm rvo-icon--hemelblauw rvo-card__link-indicator"
+                    role="img"
+                    aria-label="Delta naar rechts"
+                  ></span>
+                </div>
+              </div>
+              <div
+                class="rvo-card rvo-card--with-image rvo-card--with-image-sm rvo-card--outline rvo-card--padding-sm"
+                onclick="window.open('https://meet.la-suite.apps.digilab.network/', '_blank');"
+              >
+                <div class="rvo-card__image-container">
+                  <img src="vendor/roos/icons/computer-en-internet/beeldbellen.svg" class="rvo-card__image" style="width: 50px; padding-inline: 20px" />
+                </div>
+                <div class="rvo-card--with-link-indicator">
+                  <div class="rvo-card__content">
+                    <h3 class="utrecht-heading-3">
+                      <a
+                        class="rvo-link rvo-card__link rvo-card__full-card-link"
+                        href="https://meet.la-suite.apps.digilab.network/"
+                        target="_blank"
+                      >
+                        Meet
+                      </a>
+                    </h3>
+                    VideoBellen
+                  </div>
+                  <span
+                    class="utrecht-icon rvo-icon rvo-icon-delta-naar-rechts rvo-icon--sm rvo-icon--hemelblauw rvo-card__link-indicator"
+                    role="img"
+                    aria-label="Delta naar rechts"
+                  ></span>
+                </div>
+              </div>
+              <div
+                class="rvo-card rvo-card--with-image rvo-card--with-image-sm rvo-card--outline rvo-card--padding-sm"
+                onclick="window.open('https://grist.la-suite.apps.digilab.network/', '_blank');"
+              >
+                <div class="rvo-card__image-container">
+                  <img src="vendor/roos/icons/computer-en-internet/applicatie.svg" class="rvo-card__image" style="width: 50px; padding-inline: 20px"  />
+                </div>
+                <div class="rvo-card--with-link-indicator">
+                  <div class="rvo-card__content">
+                    <h3 class="utrecht-heading-3">
+                      <a
+                        class="rvo-link rvo-card__link rvo-card__full-card-link"
+                        href="https://grist.la-suite.apps.digilab.network/"
+                        target="_blank"
+                      >
+                        Grist
+                      </a>
+                    </h3>
+                    Spreadsheets
+                  </div>
+                  <span
+                    class="utrecht-icon rvo-icon rvo-icon-delta-naar-rechts rvo-icon--sm rvo-icon--hemelblauw rvo-card__link-indicator"
+                    role="img"
+                    aria-label="Delta naar rechts"
+                  ></span>
+                </div>
+              </div>
+              <div
+                class="rvo-card rvo-card--with-image rvo-card--with-image-sm rvo-card--outline rvo-card--padding-sm"
+                onclick="window.open('https://id.la-suite.apps.digilab.network/realms/lasuite/account', '_blank');"
+              >
+                <div class="rvo-card__image-container">
+                  <img src="vendor/roos/icons/functioneel/user.svg" class="rvo-card__image" style="width: 50px; padding-inline: 20px" />
+                </div>
+                <div class="rvo-card--with-link-indicator">
+                  <div class="rvo-card__content">
+                    <h3 class="utrecht-heading-3">
+                      <a
+                        class="rvo-link rvo-card__link rvo-card__full-card-link"
+                        href="https://id.la-suite.apps.digilab.network/realms/lasuite/account"
+                        target="_blank"
+                      >
+                        Account
+                      </a>
+                    </h3>
+                    Account gegevens bewerken
+                  </div>
+                  <span
+                    class="utrecht-icon rvo-icon rvo-icon-delta-naar-rechts rvo-icon--sm rvo-icon--hemelblauw rvo-card__link-indicator"
+                    role="img"
+                    aria-label="Delta naar rechts"
+                  ></span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </main>
+      </div>
+      <div class="rvo-footer-bg">
+        <footer class="utrecht-page-footer rvo-footer rvo-footer--lg"></footer>
+      </div>
+    </div>
+  </body>
+</html>

portal/webpack.config.js

@@ -0,0 +1,42 @@
+const path = require('path');
+
+const CopyPlugin = require("copy-webpack-plugin");
+const ReplaceInFileWebpackPlugin = require('replace-in-file-webpack-plugin');
+
+
+module.exports = {
+  mode: 'development',
+  entry: {},
+  output: {
+    filename: 'template.js',
+    path: path.resolve(__dirname, 'src/vendor/roos/')
+  },
+  devtool: 'source-map',
+  devServer: {
+    static: {
+      directory: path.join(__dirname, 'src'),
+    },
+    compress: true,
+    port: 9000,
+  },
+  plugins: [
+    new CopyPlugin({
+        patterns: [
+          { from: "node_modules/@nl-rvo/assets/fonts", to: "fonts" },
+          { from: "node_modules/@nl-rvo/assets/icons", to: "icons" },
+          { from: "node_modules/@nl-rvo/assets/images", to: "images" },
+          { from: "node_modules/@nl-rvo/design-tokens/dist/index.css", to: "design-tokens/index.css" },
+          { from: "node_modules/@nl-rvo/design-tokens/dist/index.js", to: "design-tokens/index.js" },
+          { from: "node_modules/@nl-rvo/component-library-css/dist/index.css", to: "component-library-css/index.css" },
+        ],
+    }),
+    new ReplaceInFileWebpackPlugin([{
+      dir: 'src/vendor/roos/icons/',
+      files: ['index.css'],
+      rules: [{
+        search: /url\("(?!\/)/ig,
+        replace: 'url("/vendor/roos/icons/'
+      }]
+    }])
+  ]
+};