java 17

Dockerfile

@@ -1,11 +1,9 @@
-FROM icr.io/appcafe/open-liberty:kernel-slim-java17-openj9-ubi
-#FROM harbor-dev.alldcs.nl/allard/openliberty-java17
-
+FROM icr.io/appcafe/open-liberty:full-java17-openj9-ubi
 ARG VERSION=1.0
 ARG REVISION=SNAPSHOT
 
 LABEL \
-  org.opencontainers.image.authors="Your Name" \
+  org.opencontainers.image.authors="Allard Krings" \
   org.opencontainers.image.vendor="IBM" \
   org.opencontainers.image.url="local" \
   org.opencontainers.image.source="https://github.com/OpenLiberty/guide-getting-started" \
@@ -18,6 +16,6 @@ LABEL \
   description="This image contains the system microservice running with the Open Liberty runtime."
 
 COPY --chown=1001:0 src/main/liberty/config/ /config/
-RUN features.sh
+#RUN features.sh
 COPY --chown=1001:0 target/*.war /config/apps/
 RUN configure.sh

buildah.yaml

@@ -0,0 +1,128 @@
+apiVersion: tekton.dev/v1
+kind: Task
+metadata:
+  name: buildah
+  namespace: default
+spec:
+  description: |-
+    Buildah task builds source into a container image and then pushes it to a container registry.
+    Buildah Task builds source into a container image using Project Atomic's Buildah build tool.It uses Buildah's support for building from Dockerfiles, using its buildah bud command.This command executes the directives in the Dockerfile to assemble a container image, then pushes that image to a container registry.
+  params:
+  - description: Reference of the image buildah will produce.
+    name: IMAGE
+    type: string
+  - default: quay.io/buildah/stable:v1
+    description: The location of the buildah builder image.
+    name: BUILDER_IMAGE
+    type: string
+  - default: overlay
+    description: Set buildah storage driver
+    name: STORAGE_DRIVER
+    type: string
+  - default: ./Dockerfile
+    description: Path to the Dockerfile to build.
+    name: DOCKERFILE
+    type: string
+  - default: .
+    description: Path to the directory to use as context.
+    name: CONTEXT
+    type: string
+  - default: "true"
+    description: Verify the TLS on the registry endpoint (for push/pull to a non-TLS
+      registry)
+    name: TLSVERIFY
+    type: string
+  - default: oci
+    description: The format of the built container, oci or docker
+    name: FORMAT
+    type: string
+  - default: ""
+    description: Extra parameters passed for the build command when building images.
+      WARNING - must be sanitized to avoid command injection
+    name: BUILD_EXTRA_ARGS
+    type: string
+  - default: ""
+    description: Extra parameters passed for the push command when pushing images.
+      WARNING - must be sanitized to avoid command injection
+    name: PUSH_EXTRA_ARGS
+    type: string
+  - default: "false"
+    description: Skip pushing the built image
+    name: SKIP_PUSH
+    type: string
+  - default:
+    - ""
+    description: Dockerfile build arguments, array of key=value
+    name: BUILD_ARGS
+    type: array
+  results:
+  - description: Digest of the image just built.
+    name: IMAGE_DIGEST
+    type: string
+  - description: Image repository where the built image would be pushed to
+    name: IMAGE_URL
+    type: string
+  steps:
+  - args:
+    - $(params.BUILD_ARGS[*])
+    computeResources: {}
+    env:
+    - name: PARAM_IMAGE
+      value: $(params.IMAGE)
+    - name: PARAM_STORAGE_DRIVER
+      value: $(params.STORAGE_DRIVER)
+    - name: PARAM_DOCKERFILE
+      value: $(params.DOCKERFILE)
+    - name: PARAM_CONTEXT
+      value: $(params.CONTEXT)
+    - name: PARAM_TLSVERIFY
+      value: $(params.TLSVERIFY)
+    - name: PARAM_FORMAT
+      value: $(params.FORMAT)
+    - name: PARAM_BUILD_EXTRA_ARGS
+      value: $(params.BUILD_EXTRA_ARGS)
+    - name: PARAM_PUSH_EXTRA_ARGS
+      value: $(params.PUSH_EXTRA_ARGS)
+    - name: PARAM_SKIP_PUSH
+      value: $(params.SKIP_PUSH)
+    image: $(params.BUILDER_IMAGE)
+    name: build-and-push
+    script: |
+      BUILD_ARGS=()
+      for buildarg in "$@"
+      do
+        BUILD_ARGS+=("--build-arg=$buildarg")
+      done
+      [ "$(workspaces.sslcertdir.bound)" = "true" ] && CERT_DIR_FLAG="--cert-dir=$(workspaces.sslcertdir.path)"
+      [ "$(workspaces.dockerconfig.bound)" = "true" ] && DOCKER_CONFIG="$(workspaces.dockerconfig.path)" && export DOCKER_CONFIG
+      # build the image (CERT_DIR_FLAG should be omitted if empty and BUILD_EXTRA_ARGS can contain multiple args)
+      # shellcheck disable=SC2046,SC2086
+      buildah ${CERT_DIR_FLAG} "--storage-driver=${PARAM_STORAGE_DRIVER}" bud "${BUILD_ARGS[@]}" ${PARAM_BUILD_EXTRA_ARGS} \
+        "--format=${PARAM_FORMAT}" "--tls-verify=${PARAM_TLSVERIFY}" \
+        -f "${PARAM_DOCKERFILE}" -t "${PARAM_IMAGE}" "${PARAM_CONTEXT}"
+      [ "${PARAM_SKIP_PUSH}" = "true" ] && echo "Push skipped" && exit 0
+      # push the image (CERT_DIR_FLAG should be omitted if empty and PUSH_EXTRA_ARGS can contain multiple args)
+      # shellcheck disable=SC2046,SC2086
+      buildah ${CERT_DIR_FLAG} "--storage-driver=${PARAM_STORAGE_DRIVER}" push \
+        "--tls-verify=${PARAM_TLSVERIFY}" --digestfile /tmp/image-digest ${PARAM_PUSH_EXTRA_ARGS} \
+        "${PARAM_IMAGE}" "docker://${PARAM_IMAGE}"
+      tee "$(results.IMAGE_DIGEST.path)" < /tmp/image-digest
+      printf '%s' "${PARAM_IMAGE}" | tee "$(results.IMAGE_URL.path)"
+    securityContext:
+      privileged: true
+    volumeMounts:
+    - mountPath: /var/lib/containers
+      name: varlibcontainers
+    workingDir: $(workspaces.source.path)
+  volumes:
+  - emptyDir: {}
+    name: varlibcontainers
+  workspaces:
+  - name: source
+  - name: sslcertdir
+    optional: true
+  - description: An optional workspace that allows providing a .docker/config.json
+      file for Buildah to access the container registry. The file should be placed
+      at the root of the Workspace with name config.json.
+    name: dockerconfig
+    optional: true

pom.xml

@@ -15,8 +15,8 @@
         <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
         <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
         <!-- Liberty configuration -->
-        <liberty.var.default.http.port>9080</liberty.var.default.http.port>
-        <liberty.var.default.https.port>9443</liberty.var.default.https.port>
+        <liberty.var.http.port>9080</liberty.var.http.port>
+        <liberty.var.https.port>9443</liberty.var.https.port>
     </properties>
 
     <dependencies>
@@ -30,7 +30,7 @@
         <dependency>
             <groupId>org.eclipse.microprofile</groupId>
             <artifactId>microprofile</artifactId>
-            <version>6.0</version>
+            <version>7.1</version>
             <type>pom</type>
             <scope>provided</scope>
         </dependency>
@@ -38,19 +38,19 @@
         <dependency>
             <groupId>org.junit.jupiter</groupId>
             <artifactId>junit-jupiter</artifactId>
-            <version>5.9.2</version>
+            <version>5.14.0</version>
             <scope>test</scope>
         </dependency>
         <dependency>
             <groupId>org.jboss.resteasy</groupId>
             <artifactId>resteasy-client</artifactId>
-            <version>6.2.3.Final</version>
+            <version>6.2.14.Final</version>
             <scope>test</scope>
         </dependency>
         <dependency>
             <groupId>org.jboss.resteasy</groupId>
             <artifactId>resteasy-json-binding-provider</artifactId>
-            <version>6.2.3.Final</version>
+            <version>6.2.14.Final</version>
             <scope>test</scope>
         </dependency>
         <dependency>
@@ -68,26 +68,26 @@
             <plugin>
                 <groupId>io.openliberty.tools</groupId>
                 <artifactId>liberty-maven-plugin</artifactId>
-                <version>3.8.2</version>
+                <version>3.5.2</version>
             </plugin>
             <plugin>
                 <groupId>org.apache.maven.plugins</groupId>
                 <artifactId>maven-war-plugin</artifactId>
-                <version>3.3.2</version>
+                <version>3.5.0</version>
             </plugin>
             <plugin>
                 <groupId>org.apache.maven.plugins</groupId>
                 <artifactId>maven-surefire-plugin</artifactId>
-                <version>3.0.0</version>
+                <version>3.5.4</version>
             </plugin>
             <!-- Plugin to run functional tests -->
             <plugin>
                 <groupId>org.apache.maven.plugins</groupId>
                 <artifactId>maven-failsafe-plugin</artifactId>
-                <version>3.0.0</version>
+                <version>3.5.4</version>
                 <configuration>
                     <systemPropertyVariables>
-                        <http.port>${liberty.var.default.http.port}</http.port>
+                        <http.port>${liberty.var.http.port}</http.port>
                         <context.root>/dev</context.root>
                     </systemPropertyVariables>
                 </configuration>

src/main/webapp/css/main.css

@@ -1,5 +1,5 @@
 /*******************************************************************************
-* Copyright (c) 2018 IBM Corporation and others.
+* Copyright (c) 2018, 2024 IBM Corporation and others.
 * All rights reserved. This program and the accompanying materials
 * are made available under the terms of the Eclipse Public License v1.0
 * which accompanies this distribution, and is available at
@@ -8,22 +8,20 @@
 * Contributors:
 *     IBM Corporation - initial API and implementation
 *******************************************************************************/
-@import url("https://fonts.googleapis.com/css?family=Asap:300,400,500");
-
 @font-face {
   font-family: BunueloLight;
-    src: url("/fonts/BunueloCleanPro-Light.woff");
+  src: url("/fonts/BunueloCleanPro-Light.otf");
 }
 
 @font-face {
   font-family: BunueloSemiBold;
-    src: url("/fonts/BunueloCleanPro-SemiBold.woff");
+  src: url("/fonts/BunueloCleanPro-SemiBold.otf");
 }
 
-body{
-    font-family:Asap;
+body {
+  font-family: BunueloSemiBold;
   font-size: 16px;
-    color:#24243b;
+  color: #24243b;
   background-color: white;
   margin: 0px;
 }
@@ -33,8 +31,8 @@ section {
   padding-left: 8%;
   padding-right: 8%;
   /* font-weight: 400; */
-    letter-spacing:0;
-    text-align:left;
+  letter-spacing: 0;
+  text-align: left;
 }
 
 .line {
@@ -44,7 +42,7 @@ section {
 }
 
 .headerImage {
-    background-image: url(/img/header_ufo.png);
+  background-image: url("/img/header_ufo.png");
   background-repeat: no-repeat;
   background-position: top 20px right 15px;
   height: 103px;
@@ -61,11 +59,11 @@ p {
   margin-top: 0px;
 }
 h1 {
-    font-family:BunueloSemiBold;
+  font-family: BunueloSemiBold;
   font-size: 40px;
   font-weight: 400;
-    letter-spacing:0;
-    text-align:left;
+  letter-spacing: 0;
+  text-align: left;
 }
 h2 {
   font-size: 24px;
@@ -79,7 +77,7 @@ a {
 }
 
 #appIntro {
-    background-image:linear-gradient(#141427 0%, #2c2e50 100%);
+  background-image: linear-gradient(#141427 0%, #2c2e50 100%);
   background-size: 100% calc(100% - 70px);
   background-repeat: no-repeat;
 }
@@ -90,14 +88,14 @@ a {
 }
 
 #appTitle {
-    font-family:BunueloLight;
-    font-size:55px;
+  font-family: BunueloLight;
+  font-size: 55px;
 }
 
 .headerRow {
   height: 100px;
-    position:relative;
-    z-index:2;
+  position: relative;
+  z-index: 2;
   box-shadow: 0 2px 4px 0 rgba(0,0,0,0.50);
 }
 .headerRow > div {
@@ -150,7 +148,7 @@ a {
   background-color: #E8EAEF;
 }
 .headerIcon img {
-    display:block;
+  display: Block;
   margin:auto;
   margin-top: 20px;
 }
@@ -167,7 +165,7 @@ a {
 
 .headerTitle {
   background-color: white;
-    color:#5d6a8e;
+  color: #5d6a8e;
   letter-spacing:0;
   text-align:left;
   padding-left: 40px;
@@ -190,7 +188,7 @@ a {
 
 .headerTitle > h2 {
   font-family: BunueloLight;
-    font-size:40px;
+  font-size: 40px;
   margin: 0;
 }
 
@@ -222,11 +220,11 @@ a {
 }
 
 button {
-    border-radius:100px;
-    height:44px;
-    color:#24253a;
-    text-align:center;
-    font-family: Asap;
+  border-radius: 100px;
+  height: 44px;
+  color: #24253a;
+  text-align: center;
+  font-family: BunueloSemiBold;
   margin-top: 25px;
   margin-bottom: 70px;
   cursor: pointer;
@@ -235,24 +233,24 @@ button {
 
 button a {
   text-decoration: none;
-    color:#F4914D;
+  color: #F4914D;
 }
 
 #guidesButton {
-    background-color:#abd155;
-    width:269px;
+  background-color: #abd155;
+  width: 269px;
   font-weight: 500;
-    font-size:16px;
+  font-size: 16px;
   transition: background-color .2s;
 }
 #guidesButton:hover {
   background-color: #C7EE63;
 }
 #mpGuidesButton {
-    border:2px solid #f4914d8c;
-    border-radius:100px;
-    font-size:20px;
-    letter-spacing:0;
+  border: 2px solid #f4914d8c;
+  border-radius: 100px;
+  font-size: 20px;
+  letter-spacing: 0;
   padding-left: 40px;
   padding-right: 40px;
   background-color: white;
@@ -264,7 +262,7 @@ button a {
 }
 
 section#openLibertyAndMp {
-    background:#f4f4f5;
+  background: #f4f4f5;
   background-size: 100% calc(100% - 70px);
   background-repeat: no-repeat;
 }
@@ -297,7 +295,7 @@ section#openLibertyAndMp {
 
 #serviceStatus {
   font-size: 50px;
-    font-family:BunueloLight;
+  font-family: BunueloLight;
   margin-top: 30px;
 }
 
@@ -378,12 +376,12 @@ td {
 }
 
 #learnMore > h2 {
-    color:#5e6b8d;
+  color: #5e6b8d;
 }
 
 .bodyFooter {
   padding: 5px 8%;
-  background-image: url(/img/footer_main.png);
+  background-image: url("/img/footer_main.png");
   background-repeat: no-repeat;
   background-position: top 20px right 110px;
   margin-bottom: 40px;
@@ -392,7 +390,7 @@ td {
 }
 
 .bodyFooterLink {
-  font-family: Asap;
+  font-family: BunueloSemiBold;
   font-weight: 300;
   font-size: 14px;
   letter-spacing: 0;

src/main/webapp/index.html

@@ -1,20 +1,7 @@
-<!--
-  Copyright (c) 2016, 2023 IBM Corp.
-
-  Licensed under the Apache License, Version 2.0 (the "License");
-  you may not use this file except in compliance with the License.
-  You may obtain a copy of the License at
-
-     http://www.apache.org/licenses/LICENSE-2.0
-
-  Unless required by applicable law or agreed to in writing, software
-  distributed under the License is distributed on an "AS IS" BASIS,
-  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  See the License for the specific language governing permissions and
-  limitations under the License.
--->
-<html>
+<!DOCTYPE html>
+<html lang="en">
     <head>
+        <title>olproperties</title>
         <script src="js/mpData.js"></script>
         <link href="https://fonts.googleapis.com/css?family=Asap" rel="stylesheet">
         <link rel="stylesheet" href="css/main.css">
@@ -22,7 +9,7 @@
     <body>
         <section id="appIntro">
             <div id="titleSection">
-                <h1 id="appTitle">Java-PitStop Openliberty/Java17 voorbeeld 3.0</h1>
+                <h1 id="appTitle">Java-PitStop Openliberty/Java17 voorbeeld 1.7</h1>
                 <div class="line"></div>
                 <div class="headerImage"></div>
                 <h2>Open Liberty Java17 applicatie op Container Hosting Platform!</h2>
@@ -104,16 +91,16 @@
 
         </section>
         <section id="whereToNext">
-            <h2>Where to next, captain?</h2>
-            <h4>Set course for the Open Liberty guides!</h4>
-            <p>All of the info you need to continue your journey is here, laid out in easy to follow steps and examples. Searching our current selection makes it easy to find the guide that will help make your next project a reality.</p>
-            <a href="https://openliberty.io/guides/"><button id="guidesButton">View all Open Liberty guides</button></a>
+            <h2>Waar wil je nu naartoe?</h2>
+            <h4>Ga naar Open Liberty tutorials!</h4>
+            <p>Alle verdere informatie, voorbeelden en hulp vind je hier:</p>
+            <a href="https://openliberty.io/guides/"><button id="guidesButton">Open Liberty Tutorials</button></a>
         </section>
 
         <script>
             displaySystemProperties(); // this calls displayMetrics() because it is a dependency
             displayHealth();
-            //displayConfigProperties();
+            displayConfigProperties();
         </script>
     </body>
 
@@ -124,7 +111,7 @@
           <a href="https://github.com/OpenLiberty">GitHub</a>
           <a href="https://openliberty.io/">openliberty.io</a>
         </div>
-        <p id="footerText">an IBM open source project</p>
-        <p id="footerCopyright">&copy;Copyright IBM Corp. 2018, 2023</p>
+        <p id="footerText">Een open-source project van Allard</p>
+        <p id="footerCopyright">&copy;Copyright AllardDCS 2025</p>
     </footer>
 </html>

target/guide-getting-started/WEB-INF/web.xml

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+    xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
+    version="3.1">
+    <display-name>Liberty Project</display-name>
+
+    <welcome-file-list>
+        <welcome-file>index.html</welcome-file>
+    </welcome-file-list>
+</web-app>

target/guide-getting-started/css/main.css

@@ -0,0 +1,424 @@
+/*******************************************************************************
+* Copyright (c) 2018, 2024 IBM Corporation and others.
+* All rights reserved. This program and the accompanying materials
+* are made available under the terms of the Eclipse Public License v1.0
+* which accompanies this distribution, and is available at
+* http://www.eclipse.org/legal/epl-v10.html
+*
+* Contributors:
+*     IBM Corporation - initial API and implementation
+*******************************************************************************/
+@font-face {
+  font-family: BunueloLight;
+  src: url("/fonts/BunueloCleanPro-Light.otf");
+}
+
+@font-face {
+  font-family: BunueloSemiBold;
+  src: url("/fonts/BunueloCleanPro-SemiBold.otf");
+}
+
+body {
+  font-family: BunueloSemiBold;
+  font-size: 16px;
+  color: #24243b;
+  background-color: white;
+  margin: 0px;
+}
+
+section {
+  padding-top: 55px;
+  padding-left: 8%;
+  padding-right: 8%;
+  /* font-weight: 400; */
+  letter-spacing: 0;
+  text-align: left;
+}
+
+.line {
+  margin-right: 200px;
+  height: 1px;
+  background-color: #C8D3D3;
+}
+
+.headerImage {
+  background-image: url("/img/header_ufo.png");
+  background-repeat: no-repeat;
+  background-position: top 20px right 15px;
+  height: 103px;
+  margin-top: -94px;
+}
+
+#whereTo {
+  padding-bottom: 80px;
+  width: 50%;
+}
+
+p {
+  line-height: 22px;
+  margin-top: 0px;
+}
+h1 {
+  font-family: BunueloSemiBold;
+  font-size: 40px;
+  font-weight: 400;
+  letter-spacing: 0;
+  text-align: left;
+}
+h2 {
+  font-size: 24px;
+  font-weight: 400;
+}
+h4 {
+  margin-top: 52px;
+}
+a {
+  text-decoration: none;
+}
+
+#appIntro {
+  background-image: linear-gradient(#141427 0%, #2c2e50 100%);
+  background-size: 100% calc(100% - 70px);
+  background-repeat: no-repeat;
+}
+
+#titleSection {
+  color: white;
+  margin-bottom: 80px;
+}
+
+#appTitle {
+  font-family: BunueloLight;
+  font-size: 55px;
+}
+
+.headerRow {
+  height: 100px;
+  position: relative;
+  z-index: 2;
+  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.50);
+}
+.headerRow > div {
+  display: inline-block;
+}
+
+.collapsibleRow {
+  transition: border 400ms ease-out, box-shadow 200ms linear;
+  cursor: pointer;
+}
+.collapsibleRow:hover .headerTitle {
+  background-color: #f4f4f4;
+  transition: background-color 0.1s;
+}
+.collapsed .collapsibleRow {
+  box-shadow: none;
+  border-bottom: 4px solid;
+}
+.collapsed#healthSection > .headerRow {
+  border-bottom-color: #D6D9E4;
+}
+.collapsed#configSection > .headerRow {
+  border-bottom-color: #F8D7C1;
+}
+.collapsed#metricsSection > .headerRow {
+  border-bottom-color: #EEF3C3;
+}
+
+.collapsed .collapsibleContent { /* collapsing animation */
+  transition: all 400ms ease-out, opacity 300ms ease-in;
+}
+.expanded .collapsibleContent { /* expanding animation */
+  transition: all 400ms ease-out, opacity 450ms ease-out;
+}
+.collapsed .collapsibleContent {
+  opacity: 0;
+  max-height: 0;
+  visibility: hidden;
+}
+.expanded .collapsibleContent {
+  opacity: 1;
+  max-height: 1000px;
+  visibility: visible;
+}
+
+.headerIcon {
+  width: 160px;
+  height: 100%;
+  float: left;
+  background-color: #E8EAEF;
+}
+.headerIcon img {
+  display: Block;
+  margin:auto;
+  margin-top: 20px;
+}
+
+#healthSection .headerIcon {
+  background-color: #E8EAEF;
+}
+#configSection .headerIcon {
+  background-color: #FDE4D1;
+}
+#metricsSection .headerIcon {
+  background-color: #F5F8DA;
+}
+
+.headerTitle {
+  background-color: white;
+  color: #5d6a8e;
+  letter-spacing:0;
+  text-align:left;
+  padding-left: 40px;
+  padding-top: 10px;
+  width: calc(100% - 200px); /* 160 from icon, 40 from padding */
+}
+#healthSection h2 {
+  color: #5D6A8E;
+}
+#configSection h2 {
+  color: #E57000;
+}
+#metricsSection h2 {
+  color: #4F6700;
+}
+
+#sysPropTitle {
+  padding-top: 28px;
+}
+
+.headerTitle > h2 {
+  font-family: BunueloLight;
+  font-size: 40px;
+  margin: 0;
+}
+
+.caret {
+  position: absolute;
+  right: 45px;
+  top: 45px;
+}
+
+.collapsed#configSection .caret {
+  background-image: url("../img/carets/caret_down_orange.svg")
+}
+.expanded#configSection .caret {
+  background-image: url("../img/carets/caret_up_orange.svg")
+}
+
+.msSection {
+  background: white;
+  box-shadow: 0 2px 4px 0 rgba(63,70,89,0.31);
+}
+
+.sectionContent {
+  margin-left: 160px;
+}
+
+#systemPropertiesTable {
+  padding-left: 160px;
+  background: white;
+}
+
+button {
+  border-radius: 100px;
+  height: 44px;
+  color: #24253a;
+  text-align: center;
+  font-family: BunueloSemiBold;
+  margin-top: 25px;
+  margin-bottom: 70px;
+  cursor: pointer;
+  border: none;
+}
+
+button a {
+  text-decoration: none;
+  color: #F4914D;
+}
+
+#guidesButton {
+  background-color: #abd155;
+  width: 269px;
+  font-weight: 500;
+  font-size: 16px;
+  transition: background-color .2s;
+}
+#guidesButton:hover {
+  background-color: #C7EE63;
+}
+#mpGuidesButton {
+  border: 2px solid #f4914d8c;
+  border-radius: 100px;
+  font-size: 20px;
+  letter-spacing: 0;
+  padding-left: 40px;
+  padding-right: 40px;
+  background-color: white;
+  transition: background-color .2s, color .2s;
+}
+#mpGuidesButton:hover {
+  background-color: #f4914d;
+  color: white;
+}
+
+section#openLibertyAndMp {
+  background: #f4f4f5;
+  background-size: 100% calc(100% - 70px);
+  background-repeat: no-repeat;
+}
+
+#healthBox {
+  text-align: left;
+  display: table-cell;
+  vertical-align: middle;
+  width: 47%;
+}
+
+#healthBox > div {
+  display: table-cell;
+  vertical-align: middle;
+}
+
+#healthIcon {
+  padding-left: 73px;
+  padding-top: 56px;
+  padding-bottom: 56px;
+}
+#healthStatusIcon {
+  width: 104px;
+  height: 104px;
+}
+
+#healthText {
+  padding: 50px;
+}
+
+#serviceStatus {
+  font-size: 50px;
+  font-family: BunueloLight;
+  margin-top: 30px;
+}
+
+#healthNote {
+  text-align: left;
+  display: table-cell;
+  vertical-align: middle;
+  padding-left: 43px;
+  line-height: 26px;
+  width: 53%;
+}
+
+table {
+  width: 100%;
+  font-size: 14px;
+  text-align: left;
+  border-collapse: collapse;
+}
+
+th {
+  height: 63px;
+  padding-left: 41px;
+  font-size: 16px;
+}
+tr {
+  height: 45px;
+}
+td {
+  padding-left: 41px;
+}
+#systemPropertiesTable tr:first-child {
+  background: #D6D9E4;
+}
+#configTable tr:first-child {
+  background: #F8D7C1;;
+}
+#metricsTable tr:first-child {
+  background: #EEF3C3;
+}
+
+#systemPropertiesTable tr:nth-child(2n+3) {
+  background: #EEEFF3;
+}
+#configTable tr:nth-child(2n+2) {
+  background: #FEF8F4;
+}
+#metricsTable tr:nth-child(2n+2) {
+  background: #FBFCEE;
+}
+
+#systemPropertiesTable .sourceRow,
+#healthTable .sourceRow {
+  border-top: 4px solid #D6D9E4;
+}
+#systemPropertiesTable .sourceRow a,
+#healthTable .sourceRow a {
+  color: #5D6A8E;
+}
+#configTable .sourceRow {
+  border-top: 4px solid #F8D7C1;
+}
+#configTable .sourceRow a {
+  color: #E57000;
+}
+#metricsTable .sourceRow {
+  border-top: 4px solid #EEF3C3;
+}
+#metricsTable .sourceRow a {
+  color: #4F6700;
+}
+.sourceRow a {
+  font-weight: 500;
+}
+
+#learnMore {
+  margin-top: 120px;
+  padding: 0px 200px 100px;
+}
+
+#learnMore > h2 {
+  color: #5e6b8d;
+}
+
+.bodyFooter {
+  padding: 5px 8%;
+  background-image: url("/img/footer_main.png");
+  background-repeat: no-repeat;
+  background-position: top 20px right 110px;
+  margin-bottom: 40px;
+  margin-top: 50px;
+  color: #3F4659;
+}
+
+.bodyFooterLink {
+  font-family: BunueloSemiBold;
+  font-weight: 300;
+  font-size: 14px;
+  letter-spacing: 0;
+  border-bottom: solid 1px #C8D3D3;
+  margin-top: 30px;
+  margin-right: 130px;
+  padding-bottom: 5px;
+  padding-right: 50px;
+  text-align: right;
+}
+
+.bodyFooterLink > a {
+  text-decoration: none;
+  padding: 10px;
+  color: #96bc32;
+}
+
+#licenseLink {
+  color: #5E6B8D;
+  text-align: left;
+}
+
+#footer_text {
+  margin-top: 4px;
+  margin-bottom: 4px;
+  font-size: 16px;
+}
+
+#footer_copyright {
+  font-size: 11px;
+}

target/guide-getting-started/img/carets/caret_down_blue.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="24px" height="15.3px" viewBox="0 0 24 15.3" style="enable-background:new 0 0 24 15.3;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#5D6A8E;}
+</style>
+<path class="st0" d="M23.3,0.6c-0.9-0.8-2.2-0.8-3.1,0l0,0l0,0l0,0l0,0L12,9L3.8,0.7l0,0v0l0,0l0,0c-0.8-0.9-2.2-0.9-3.1,0
+	c-0.9,0.8-0.9,2.2,0,3.1l11.3,11.6L23.4,3.7C24.2,2.9,24.2,1.5,23.3,0.6z"/>
+</svg>

target/guide-getting-started/img/carets/caret_down_green.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="24px" height="15.3px" viewBox="0 0 24 15.3" style="enable-background:new 0 0 24 15.3;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#4F6700;}
+</style>
+<path class="st0" d="M23.3,0.6c-0.9-0.8-2.2-0.8-3.1,0l0,0l0,0l0,0l0,0L12,9L3.8,0.7l0,0v0l0,0l0,0c-0.8-0.9-2.2-0.9-3.1,0
+	c-0.9,0.8-0.9,2.2,0,3.1l11.3,11.6L23.4,3.7C24.2,2.9,24.2,1.5,23.3,0.6z"/>
+</svg>

target/guide-getting-started/img/carets/caret_down_orange.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="24px" height="15.3px" viewBox="0 0 24 15.3" style="enable-background:new 0 0 24 15.3;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#E57000;}
+</style>
+<path class="st0" d="M23.3,0.6c-0.9-0.8-2.2-0.8-3.1,0l0,0l0,0l0,0l0,0L12,9L3.8,0.7l0,0v0l0,0l0,0c-0.8-0.9-2.2-0.9-3.1,0
+	c-0.9,0.8-0.9,2.2,0,3.1l11.3,11.6L23.4,3.7C24.2,2.9,24.2,1.5,23.3,0.6z"/>
+</svg>

target/guide-getting-started/img/carets/caret_up_blue.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="24px" height="15.3px" viewBox="0 0 24 15.3" style="enable-background:new 0 0 24 15.3;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#5D6A8E;}
+</style>
+<path class="st0" d="M23.3,14.7c-0.9,0.8-2.2,0.8-3.1,0l0,0l0,0l0,0l0,0L12,6.3l-8.2,8.4l0,0v0l0,0l0,0c-0.8,0.9-2.2,0.9-3.1,0
+	c-0.9-0.8-0.9-2.2,0-3.1L11.9,0l11.4,11.6C24.2,12.5,24.2,13.9,23.3,14.7z"/>
+</svg>

target/guide-getting-started/img/carets/caret_up_green.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="24px" height="15.3px" viewBox="0 0 24 15.3" style="enable-background:new 0 0 24 15.3;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#4F6700;}
+</style>
+<path class="st0" d="M23.3,14.7c-0.9,0.8-2.2,0.8-3.1,0l0,0l0,0l0,0l0,0L12,6.3l-8.2,8.4l0,0v0l0,0l0,0c-0.8,0.9-2.2,0.9-3.1,0
+	c-0.9-0.8-0.9-2.2,0-3.1L11.9,0l11.4,11.6C24.2,12.5,24.2,13.9,23.3,14.7z"/>
+</svg>

target/guide-getting-started/img/carets/caret_up_orange.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="24px" height="15.3px" viewBox="0 0 24 15.3" style="enable-background:new 0 0 24 15.3;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#E57000;}
+</style>
+<path class="st0" d="M23.3,14.7c-0.9,0.8-2.2,0.8-3.1,0l0,0l0,0l0,0l0,0L12,6.3l-8.2,8.4l0,0v0l0,0l0,0c-0.8,0.9-2.2,0.9-3.1,0
+	c-0.9-0.8-0.9-2.2,0-3.1L11.9,0l11.4,11.6C24.2,12.5,24.2,13.9,23.3,14.7z"/>
+</svg>

target/guide-getting-started/img/config.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="72px" height="57.6px" viewBox="-363 252.2 72 57.6" style="enable-background:new -363 252.2 72 57.6;"
+	 xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#E57000;}
+</style>
+<g>
+	<path class="st0" d="M-334.3,260.6c-0.6-4.7-4.6-8.4-9.5-8.4c-4.9,0-8.9,3.7-9.5,8.4h-9.7v2.4h9.7c0.6,4.7,4.6,8.4,9.5,8.4
+		c4.9,0,8.9-3.7,9.5-8.4h43.3v-2.4H-334.3z M-343.8,264.2c-1.3,0-2.4-1.1-2.4-2.4c0-1.3,1.1-2.4,2.4-2.4c1.3,0,2.4,1.1,2.4,2.4
+		C-341.4,263.1-342.5,264.2-343.8,264.2z"/>
+	<path class="st0" d="M-310.2,271.4c-4.9,0-8.9,3.7-9.5,8.4H-363v2.4h43.3c0.6,4.7,4.6,8.4,9.5,8.4c4.9,0,8.9-3.7,9.5-8.4h9.7v-2.4
+		h-9.7C-301.3,275.1-305.3,271.4-310.2,271.4z M-310.2,283.4c-1.3,0-2.4-1.1-2.4-2.4s1.1-2.4,2.4-2.4c1.3,0,2.4,1.1,2.4,2.4
+		S-308.9,283.4-310.2,283.4z"/>
+	<path class="st0" d="M-343.8,290.6c-4.9,0-8.9,3.7-9.5,8.4h-9.7v2.4h9.7c0.6,4.7,4.6,8.4,9.5,8.4c4.9,0,8.9-3.7,9.5-8.4h43.3V299
+		h-43.3C-334.9,294.3-338.9,290.6-343.8,290.6z M-343.8,302.6c-1.3,0-2.4-1.1-2.4-2.4c0-1.3,1.1-2.4,2.4-2.4c1.3,0,2.4,1.1,2.4,2.4
+		C-341.4,301.5-342.5,302.6-343.8,302.6z"/>
+</g>
+</svg>

target/guide-getting-started/img/health.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="81px" height="59px" viewBox="0 0 81 59" style="enable-background:new 0 0 81 59;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#7D86A3;}
+</style>
+<g>
+	<path class="st0" d="M65,59v-0.1C64.3,59,63.7,59,63,59H65z"/>
+	<path class="st0" d="M16,59h2c-0.7,0-1.3,0-2-0.1V59z"/>
+	<path class="st0" d="M0,30v11c0,9.3,7,16.9,16,17.9V12.1C7,13.1,0,20.7,0,30z"/>
+	<path class="st0" d="M65,12.1v46.8c9-1,16-8.6,16-17.9V30C81,20.7,74,13.1,65,12.1z"/>
+	<path class="st0" d="M54,12V0h-2.4h-1.1h-19h-0.6H27v12h-7v47h41V12H54z M31,4h19v8H31V4z M55,38H43v12h-5V38H26v-5h12V21h5v12h12
+		V38z"/>
+</g>
+</svg>

target/guide-getting-started/img/metrics.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="70px" height="51.3px" viewBox="-361 255.3 70 51.3" style="enable-background:new -361 255.3 70 51.3;"
+	 xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#4F6700;}
+</style>
+<g>
+	<polygon class="st0" points="-358.7,304.3 -358.7,255.3 -361,255.3 -361,304.3 -361,306.7 -358.7,306.7 -291,306.7 -291,304.3 	"/>
+	<rect x="-354" y="281" class="st0" width="16.3" height="18.7"/>
+	<path class="st0" d="M-316.7,262.3H-333v37.3h16.3V262.3z M-319,297.3h-11.7v-32.7h11.7V297.3z"/>
+	<rect x="-312" y="274" class="st0" width="16.3" height="2.3"/>
+	<rect x="-312" y="278.7" class="st0" width="16.3" height="2.3"/>
+	<rect x="-312" y="283.3" class="st0" width="16.3" height="2.3"/>
+	<rect x="-312" y="288" class="st0" width="16.3" height="2.3"/>
+	<rect x="-312" y="292.7" class="st0" width="16.3" height="2.3"/>
+	<rect x="-312" y="297.3" class="st0" width="16.3" height="2.3"/>
+</g>
+</svg>

target/guide-getting-started/img/sysProps.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="77px" height="71px" viewBox="0 0 77 71" style="enable-background:new 0 0 77 71;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#7D86A3;}
+</style>
+<path class="st0" d="M56.2,15c0-0.6-0.1-1.2-0.2-1.8l3.7-3.2l-3.1-5.1l-4.4,1.4c-1-0.9-2.2-1.6-3.6-2.1l-1-4.2h-6l-1,4.2
+	c-1.3,0.5-2.5,1.2-3.6,2.1l-4.4-1.4L29.7,10l3.7,3.2c-0.1,0.6-0.2,1.2-0.2,1.8c0,0.6,0.1,1.2,0.2,1.8L29.7,20l3.1,5.1l4.4-1.4
+	c1,0.9,2.2,1.6,3.6,2.1l1,4.2h6l1-4.2c1.3-0.5,2.5-1.2,3.6-2.1l4.4,1.4l3.1-5.1l-3.7-3.2C56.2,16.2,56.2,15.6,56.2,15z M38.7,15
+	c0-3.3,2.7-6,6-6c3.3,0,6,2.7,6,6s-2.7,6-6,6C41.4,21,38.7,18.3,38.7,15z"/>
+<path class="st0" d="M73.8,57.4c0-0.6-0.1-1.1-0.1-1.6l3.3-2.9l-2.8-4.6l-4,1.3c-0.9-0.8-2-1.5-3.2-1.9l-0.9-3.8h-5.4l-0.9,3.8
+	c-1.2,0.4-2.3,1.1-3.2,1.9l-4-1.3l-2.8,4.6l3.3,2.9C53,56.3,53,56.8,53,57.4c0,0.6,0.1,1.1,0.1,1.6l-3.3,2.9l2.8,4.6l4-1.3
+	c0.9,0.8,2,1.5,3.2,1.9l0.9,3.8h5.4l0.9-3.8c1.2-0.4,2.3-1.1,3.2-1.9l4,1.3l2.8-4.6L73.7,59C73.8,58.5,73.8,58,73.8,57.4z M58,57.4
+	c0-3,2.4-5.4,5.4-5.4c3,0,5.4,2.4,5.4,5.4s-2.4,5.4-5.4,5.4C60.4,62.8,58,60.4,58,57.4z"/>
+<path class="st0" d="M34.9,40.4c0-0.8-0.1-1.6-0.2-2.4l4.8-4.2l-4.1-6.7L29.7,29c-1.4-1.2-3-2.1-4.7-2.8l-1.3-5.6h-7.9l-1.3,5.6
+	c-1.7,0.6-3.3,1.6-4.7,2.8l-5.7-1.9L0,33.9l4.8,4.2c-0.1,0.8-0.2,1.6-0.2,2.4c0,0.8,0.1,1.6,0.2,2.4L0,47l4.1,6.7l5.7-1.9
+	c1.4,1.2,3,2.1,4.7,2.8l1.3,5.6h7.9l1.3-5.6c1.7-0.6,3.3-1.6,4.7-2.8l5.7,1.9l4.1-6.7l-4.8-4.2C34.8,42,34.9,41.3,34.9,40.4z
+	 M11.9,40.4c0-4.4,3.5-7.9,7.9-7.9c4.4,0,7.9,3.5,7.9,7.9s-3.5,7.9-7.9,7.9C15.4,48.3,11.9,44.8,11.9,40.4z"/>
+</svg>

target/guide-getting-started/img/systemDown.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="110px" height="110px" viewBox="-405 226 110 110" style="enable-background:new -405 226 110 110;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#F9D7BF;}
+	.st1{fill:#E57000;}
+</style>
+<circle class="st0" cx="-350" cy="281.1" r="52.2"/>
+<g>
+	<polygon class="st1" points="-333.1,258.6 -350,275.4 -366.9,258.6 -372.4,264.1 -355.6,281 -372.4,297.9 -366.9,303.4 -350,286.6 
+		-333.1,303.4 -327.6,297.9 -344.4,281 -327.6,264.1 	"/>
+	<path class="st1" d="M-350,226c-30.4,0-55,24.6-55,55s24.6,55,55,55c30.4,0,55-24.6,55-55S-319.6,226-350,226z M-350,332.1
+		c-28.2,0-51.1-22.9-51.1-51.1s22.9-51.1,51.1-51.1s51.1,22.9,51.1,51.1S-321.8,332.1-350,332.1z"/>
+</g>
+</svg>

target/guide-getting-started/img/systemUp.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="110px" height="110px" viewBox="-406.3 226 110 110" style="enable-background:new -406.3 226 110 110;"
+	 xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#E9F4D1;}
+	.st1{fill:#ABD155;}
+</style>
+<circle class="st0" cx="-350.9" cy="281.2" r="52.2"/>
+<g>
+	<polygon class="st1" points="-359.2,291.2 -372.1,278.2 -377.6,283.8 -359.2,302.3 -324.9,268.1 -330.5,262.5 	"/>
+	<path class="st1" d="M-351.3,226c-30.4,0-55,24.6-55,55s24.6,55,55,55c30.4,0,55-24.6,55-55S-320.9,226-351.3,226z M-351.3,332.1
+		c-28.2,0-51.1-22.9-51.1-51.1s22.9-51.1,51.1-51.1s51.1,22.9,51.1,51.1S-323.1,332.1-351.3,332.1z"/>
+</g>
+</svg>

target/guide-getting-started/index.html

@@ -0,0 +1,117 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <title>olproperties</title>
+        <script src="js/mpData.js"></script>
+        <link href="https://fonts.googleapis.com/css?family=Asap" rel="stylesheet">
+        <link rel="stylesheet" href="css/main.css">
+    </head>
+    <body>
+        <section id="appIntro">
+            <div id="titleSection">
+                <h1 id="appTitle">Java-PitStop Openliberty/Java17 voorbeeld 1.7</h1>
+                <div class="line"></div>
+                <div class="headerImage"></div>
+                <h2>Open Liberty Java17 applicatie op Container Hosting Platform!</h2>
+                <p>Dit voorbeeld gebruikt de System Properties microservice om de eigenschappen van de Liberty server te tonen.</p>
+            </div>
+
+            <div class="msSection" id="systemProperties">
+                <div class="headerRow">
+                    <div class="headerIcon"><img src="img/sysProps.svg"/></div>
+                    <div class="headerTitle" id="sysPropTitle"><h2>System Properties</h2></div>
+                </div>
+                <div class="sectionContent">
+                    <table id="systemPropertiesTable">
+                        <tbody id="sysPropertiesTableBody">
+                        <tr><th>Eigenschap</th><th>Waarde</th></tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+
+        </section>
+
+        <section id="whereTo">
+            <p>Dit voorbeeld toont de eigenschappen van de host evenals health en metrics.</p>
+        </section>
+
+        <section id="openLibertyAndMp">
+            <h1>System properties voorbeeld</h1>
+            <h2>Gebouwd met Microprofile op Open Liberty </h2>
+            <div class="msSection collapsed" id="healthSection">
+                <div class="collapsibleRow headerRow" onClick="toggle()">
+                    <div class="headerIcon"><img src="img/health.svg"/></div>
+                    <div class="headerTitle">
+                        <h2>Health</h2>
+                        <p>Monitor de gezondheid van je microservice</p>
+                        <img class="caret" src="img/carets/caret_down_blue.svg"/>
+                    </div>
+                </div>
+                <div class="collapsibleContent" id="collapsibleHealth">
+                    <div class="sectionContent">
+                        <div id="healthBox">
+                            <div id="healthIcon"><div id="healthStatusIcon"><img id="healthStatusIconImage"/></div></div>
+                            <div id="healthText">
+                                <p id="serviceName"></p>
+                                <p id="serviceStatus"></p>
+                            </div>
+                        </div>
+                        <table id="healthTable"></table>
+                    </div>
+                </div>
+            </div>
+
+            <div class="msSection collapsed" id="metricsSection">
+                <div class="collapsibleRow headerRow" onClick="toggle()">
+                    <div class="headerIcon"><img src="img/metrics.svg"/></div>
+                    <div class="headerTitle">
+                        <h2>Metrics</h2>
+                        <p>Monitoring hoe goed je service draait</p>
+                        <img class="caret" src="img/carets/caret_down_green.svg"/>
+                    </div>
+                </div>
+                <div class="collapsibleContent" id="collapsibleConfig">
+                    <div class="sectionContent" id="metricsText">
+                        <table id="metricsTable">
+                            <tbody id="metricsTableBody">
+                            <tr><th>PROPERTY</th><th>VALUE</th></tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+
+                <div id="learnMore">
+                        <h2>Want to learn more about Open Liberty and MicroProfile?</h2>
+                        <p>Continue your winning streak and keep building successful apps with the help of our guides. Our MicroProfile&trade; guides are a great place to start if you want to build something similar to this sample app.</p>
+                        <a href="https://openliberty.io/guides/?search=MicroProfile&key=tag"><button id="mpGuidesButton">Check out our MicroProfile guides</button></a>
+                    </div>
+            </div>
+
+
+        </section>
+        <section id="whereToNext">
+            <h2>Waar wil je nu naartoe?</h2>
+            <h4>Ga naar Open Liberty tutorials!</h4>
+            <p>Alle verdere informatie, voorbeelden en hulp vind je hier:</p>
+            <a href="https://openliberty.io/guides/"><button id="guidesButton">Open Liberty Tutorials</button></a>
+        </section>
+
+        <script>
+            displaySystemProperties(); // this calls displayMetrics() because it is a dependency
+            displayHealth();
+            displayConfigProperties();
+        </script>
+    </body>
+
+    <footer class="bodyFooter">
+        <div class="bodyFooterLink">
+          <a id="licenseLink" href="https://github.com/OpenLiberty/open-liberty/blob/release/LICENSE">License</a>
+          <a href="https://twitter.com/OpenLibertyIO">Twitter</a>
+          <a href="https://github.com/OpenLiberty">GitHub</a>
+          <a href="https://openliberty.io/">openliberty.io</a>
+        </div>
+        <p id="footerText">Een open-source project van Allard</p>
+        <p id="footerCopyright">&copy;Copyright AllardDCS 2025</p>
+    </footer>
+</html>

target/guide-getting-started/js/mpData.js

@@ -0,0 +1,243 @@
+/*******************************************************************************
+* Copyright (c) 2018, 2019 IBM Corporation and others.
+* All rights reserved. This program and the accompanying materials
+* are made available under the terms of the Eclipse Public License v1.0
+* which accompanies this distribution, and is available at
+* http://www.eclipse.org/legal/epl-v10.html
+*
+* Contributors:
+*     IBM Corporation - initial API and implementation
+*******************************************************************************/
+function displayMetrics() {
+    getSystemMetrics();
+}
+
+function getSystemMetrics() {
+    var url = "https://olproperties-dev.allarddcs.nl/metrics";
+    var req = new XMLHttpRequest();
+
+    var metricToDisplay = {};
+    var SRgetPropertiesTime = "io_openliberty_sample_system_SystemResource_getPropertiesTime";
+    metricToDisplay["getProperties_total{mp_scope=\"application\",}"] = "Request Count";
+    metricToDisplay[SRgetPropertiesTime + "_seconds{mp_scope=\"application\",quantile=\"0.999\",}"] = "Request Time (ms) at Quantile 0.999";
+    metricToDisplay[SRgetPropertiesTime + "_seconds{mp_scope=\"application\",quantile=\"0.5\",}"] = "Request Time (ms) at Quantile 0.5";
+    metricToDisplay[SRgetPropertiesTime + "_seconds_max{mp_scope=\"application\",}"] = "Max Request Time (ms)";
+    metricToDisplay["cpu_processCpuLoad_percent{mp_scope=\"base\",}"] = "System CPU Usage (%)";
+    metricToDisplay["memory_usedHeap_bytes{mp_scope=\"base\",}"] = "System Heap Usage (MB)";
+
+    var metricToMatch = "^(";
+    for (var metricKey in metricToDisplay) {
+        metricToMatch += metricKey + "|"
+    }
+    // remove the last |
+    metricToMatch = metricToMatch.substring(0, metricToMatch.length-1);
+    metricToMatch += ")\\s*(\\S*)$"
+
+    req.onreadystatechange = function() {
+        if (req.readyState != 4) return; // Not there yet
+        if (req.status != 200) {
+            document.getElementById("metricsText").innerHTML = req.statusText;
+            return;
+        }
+
+        var resp = req.responseText;
+        var regexpToMatch = new RegExp(metricToMatch, "gm");
+        var matchMetrics = resp.match(regexpToMatch);
+
+        var keyValPairs = {};
+        for (var metricKey in metricToDisplay) {
+            matchMetrics.forEach(function(line) {
+                var keyToMatch = metricKey + " (.*)";
+                var keyVal = line.match(new RegExp(keyToMatch));
+                if (keyVal) {
+                    var val = keyVal[1];
+                    if (metricKey.indexOf("application_io_openliberty_sample_system_SystemResource_getPropertiesTime") === 0) {
+                        val = val * 1000;
+                    } else if (metricKey.indexOf("base_memory_usedHeap_bytes") === 0) {
+                        val = val / 1000000;
+                    }
+                    keyValPairs[metricToDisplay[metricKey]] = val;
+                }
+            })
+        }
+
+        var table = document.getElementById("metricsTableBody");
+        for (key in keyValPairs) {
+            var row = document.createElement("tr");
+            var keyData = document.createElement("td");
+            keyData.innerText = key;
+            var valueData = document.createElement("td");
+            valueData.innerText = keyValPairs[key];
+            row.appendChild(keyData);
+            row.appendChild(valueData);
+            table.appendChild(row);
+        }
+
+        addSourceRow(table, url);
+    };
+
+    req.open("GET", url, true);
+    req.send();
+}
+
+function displaySystemProperties() {
+    getSystemPropertiesRequest();
+}
+
+function getSystemPropertiesRequest() {
+    var propToDisplay = ["java.vendor", "java.version", "user.name", "os.name", "wlp.install.dir", "wlp.server.name" ];
+    var url = "https://olproperties-dev.allarddcs.nl/system/properties";
+    var req = new XMLHttpRequest();
+    var table = document.getElementById("systemPropertiesTable");
+    // Create the callback:
+    req.onreadystatechange = function () {
+        if (req.readyState != 4) return; // Not there yet
+        displayMetrics();
+        if (req.status != 200) {
+            table.innerHTML = "";
+            var row = document.createElement("tr");
+            var th = document.createElement("th");
+            th.innerText = req.statusText;
+            row.appendChild(th);
+            table.appendChild(row);
+
+            addSourceRow(table, url);
+            return;
+        }
+        // Request successful, read the response
+        var resp = JSON.parse(req.responseText);
+        for (var i = 0; i < propToDisplay.length; i++) {
+            var key = propToDisplay[i];
+            if (resp.hasOwnProperty(key)) {
+                var row = document.createElement("tr");
+                var keyData = document.createElement("td");
+                keyData.innerText = key;
+                var valueData = document.createElement("td");
+                valueData.innerText = resp[key];
+                row.appendChild(keyData);
+                row.appendChild(valueData);
+                table.appendChild(row);
+            }
+        }
+
+        addSourceRow(table, url);
+    };
+    req.open("GET", url, true);
+    req.send();
+}
+
+function displayHealth() {
+    getHealth();
+}
+
+function getHealth() {
+    var url = "https://olproperties-dev.allarddcs.nl/health";
+    var req = new XMLHttpRequest();
+
+    var healthBox = document.getElementById("healthBox");
+    var serviceName = document.getElementById("serviceName");
+    var healthStatus = document.getElementById("serviceStatus");
+    var healthIcon = document.getElementById("healthStatusIconImage");
+
+    req.onreadystatechange = function () {
+        if (req.readyState != 4) return; // Not there yet
+
+        // Request successful, read the response
+        if (req.responseText) {
+            var resp = JSON.parse(req.responseText);
+            var service = resp.checks[0]; //TODO: use for loop for multiple services
+
+            resp.checks.forEach(function (service) {
+                serviceName.innerText = service.name;
+                healthStatus.innerText = service.status;
+
+                if (service.status === "UP") {
+                    healthBox.style.backgroundColor = "#f0f7e1";
+                    healthIcon.setAttribute("src", "img/systemUp.svg");
+                } else {
+                    healthBox.style.backgroundColor = "#fef7f2";
+                    healthIcon.setAttribute("src", "img/systemDown.svg");
+                }
+            });
+        }
+        var table = document.getElementById("healthTable");
+
+        addSourceRow(table, url);
+    };
+    req.open("GET", url, true);
+    req.send();
+}
+
+function displayConfigProperties() {
+    getConfigPropertiesRequest();
+}
+
+function getConfigPropertiesRequest() {
+    var url = "https://olproperties-dev.allarddcs.nl/config";
+    var req = new XMLHttpRequest();
+
+    var configToDisplay = {};
+    configToDisplay["io_openliberty_sample_system_inMaintenance"] = "System In Maintenance";
+    configToDisplay["io_openliberty_sample_testConfigOverwrite"] = "Test Config Overwrite";
+    configToDisplay["io_openliberty_sample_port_number"] = "Port Number";
+    // Create the callback:
+    req.onreadystatechange = function () {
+        if (req.readyState != 4) return; // Not there yet
+        if (req.status != 200) {
+            return;
+        }
+
+        // Request successful, read the response
+        var resp = JSON.parse(req.responseText);
+        var configProps = resp["ConfigProperties"];
+        var table = document.getElementById("configTableBody");
+        for (key in configProps) {
+            var row = document.createElement("tr");
+            var keyData = document.createElement("td");
+            keyData.innerText = configToDisplay[key];
+            var valueData = document.createElement("td");
+            valueData.innerText = configProps[key];
+            row.appendChild(keyData);
+            row.appendChild(valueData);
+            table.appendChild(row);
+        }
+
+        addSourceRow(table, url);
+    }
+    req.open("GET", url, true);
+    req.send();
+}
+
+function toggle(e) {
+    var callerElement;
+    if (!e) {
+        if (window.event) {
+            e = window.event;
+            callerElement = e.currentTarget;
+        } else {
+            callerElement = window.toggle.caller.arguments[0].currentTarget; // for firefox
+        }
+    }
+
+    var classes = callerElement.parentElement.classList;
+    var collapsed = classes.contains("collapsed");
+    var caretImg = callerElement.getElementsByClassName("caret")[0];
+    var caretImgSrc = caretImg.getAttribute("src");
+    if (collapsed) { // expand the section
+        classes.replace("collapsed", "expanded");
+        caretImg.setAttribute("src", caretImgSrc.replace("down", "up"));
+    } else { // collapse the section
+        classes.replace("expanded", "collapsed");
+        caretImg.setAttribute("src", caretImgSrc.replace("up", "down"));
+    }
+}
+
+function addSourceRow(table, url) {
+    var sourceRow = document.createElement("tr");
+    sourceRow.classList.add("sourceRow");
+    var sourceText = document.createElement("td");
+    sourceText.setAttribute("colspan", "100%");
+    sourceText.innerHTML = "API Source\: <a href='"+url+"'>"+url+"</a>";
+    sourceRow.appendChild(sourceText);
+    table.appendChild(sourceRow);
+}

target/maven-archiver/pom.properties

@@ -0,0 +1,3 @@
+artifactId=guide-getting-started
+groupId=io.openliberty.guides
+version=1.0-SNAPSHOT

target/maven-status/maven-compiler-plugin/compile/default-compile/createdFiles.lst

@@ -0,0 +1,4 @@
+io/openliberty/sample/system/SystemLivenessCheck.class
+io/openliberty/sample/system/SystemResource.class
+io/openliberty/sample/system/SystemApplication.class
+io/openliberty/sample/system/SystemReadinessCheck.class

target/maven-status/maven-compiler-plugin/compile/default-compile/inputFiles.lst

@@ -0,0 +1,4 @@
+/home/ubuntu/olproperties/src/main/java/io/openliberty/sample/system/SystemApplication.java
+/home/ubuntu/olproperties/src/main/java/io/openliberty/sample/system/SystemLivenessCheck.java
+/home/ubuntu/olproperties/src/main/java/io/openliberty/sample/system/SystemReadinessCheck.java
+/home/ubuntu/olproperties/src/main/java/io/openliberty/sample/system/SystemResource.java

target/maven-status/maven-compiler-plugin/testCompile/default-testCompile/createdFiles.lst

@@ -0,0 +1 @@
+it/io/openliberty/sample/PropertiesEndpointIT.class

target/maven-status/maven-compiler-plugin/testCompile/default-testCompile/inputFiles.lst

@@ -0,0 +1 @@
+/home/ubuntu/olproperties/src/test/java/it/io/openliberty/sample/PropertiesEndpointIT.java

test.txt

@@ -1 +1 @@
-20250327-3
+20251222-0910