bcgov · junminahn · Jun 15, 2022 · Jun 15, 2022 · Jun 15, 2022
@@ -0,0 +1,55 @@
+name: Create and publish Keycloak maintenance page
+
+on: workflow_dispatch
+
+env:
+  GITHUB_REGISTRY: ghcr.io
+  IMAGE_NAME: bcgov/sso-maintenance
+
+jobs:
+  build-and-push-image:
+    runs-on: ubuntu-20.04
+    permissions:
+      contents: read
+      packages: write
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Log in to the GitHub Container registry
+        uses: docker/login-action@v2
+        with:
+          registry: ${{ env.GITHUB_REGISTRY }}
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Extract metadata (tags, labels) for Docker
+        id: meta
+        uses: docker/metadata-action@v4
+        with:
+          images: ${{ env.GITHUB_REGISTRY }}/${{ env.IMAGE_NAME }}
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v2
+
+      - name: Cache Docker layers
+        uses: actions/cache@v2
+        with:
+          path: /tmp/.buildx-mt-cache
+          key: ${{ runner.os }}-buildx-mt-${{ github.sha }}
+          restore-keys: ${{ runner.os }}-buildx-mt-
+
+      - name: Build and push Docker image
+        uses: docker/build-push-action@v3
+        with:
+          context: docker/maintenance-page
+          push: true
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
+          cache-from: type=local,src=/tmp/.buildx-mt-cache
+          cache-to: type=local,dest=/tmp/.buildx-mt-cache-new
+
+      - name: Move cache
+        run: |
+          rm -rf /tmp/.buildx-mt-cache
+          mv /tmp/.buildx-mt-cache-new /tmp/.buildx-mt-cache
@@ -0,0 +1,6 @@
+FROM nginx:alpine
+
+COPY static /usr/share/nginx/html
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+
+EXPOSE 8080
@@ -0,0 +1,2 @@
+## Keycloak Maintenance Page App
+Maintenance Page app to display when Keycloak service is offline.
@@ -0,0 +1,25 @@
+server {
+    listen       8080;
+    server_name  localhost;
+
+    add_header cross-origin-embedder-policy "require-corp";
+    add_header cross-origin-opener-policy "same-origin";
+    add_header cross-origin-resource-policy "same-origin";
+    add_header x-dns-prefetch-control "off";
+    add_header expect-ct "max-age=0";
+    add_header x-frame-options "SAMEORIGIN";
+    add_header strict-transport-security "max-age=15552000; includeSubDomains";
+    add_header x-download-options "noopen";
+    add_header x-content-type-options "nosniff";
+    add_header origin-agent-cluster "?1";
+    add_header x-permitted-cross-domain-policies "none";
+    add_header referrer-policy "strict-origin";
+    add_header x-xss-protection "0";
+    add_header permissions-policy "midi=(),sync-xhr=(),microphone=(),camera=(),magnetometer=(),gyroscope=(),fullscreen=(self),payment=()";
+
+    location / {
+        root   /usr/share/nginx/html;
+        index  index.html index.htm;
+        try_files $uri $uri.html $uri/index.html /index.html;
+    }
+}
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <link
+      href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap-reboot.min.css"
+      rel="stylesheet"
+    />
+    <link href="https://fonts.googleapis.com/css?family=Noto+Sans" rel="stylesheet" />
+    <link rel="stylesheet" href="style.css" />
+    <title>SSO Keycloak</title>
+  </head>
+  <body style="display: flex; flex-direction: column; height: 100vh">
+    <header>
+      <div class="banner">
+        <a href="https://gov.bc.ca">
+          <img src="./img/logo-banner.svg" alt="Go to the Government of British Columbia website" height="40px" />
+        </a>
+        <h1>Government of British Columbia</h1>
+      </div>
+      <div class="other">&nbsp;</div>
+    </header>
+    <article>
+      <h1>We&rsquo;ll be back soon</h1>
+      <div>
+        <p>
+          Sorry for the inconvenience but we&rsquo;re performing some maintenance at the moment. We&rsquo;ll be back
+          online shortly.
+        </p>
+      </div>
+    </article>
+  </body>
+</html>
@@ -0,0 +1,78 @@
+article {
+  display: block;
+  text-align: left;
+  width: 650px;
+  margin: 0 auto;
+  padding-top: 150px;
+}
+body {
+  text-align: center;
+  font: 20px Helvetica, sans-serif;
+  color: #333;
+}
+
+body h1 {
+  font-size: 50px;
+}
+
+header {
+  background-color: #036;
+  border-bottom: 2px solid #fcba19;
+  padding: 0 65px 0 65px;
+  color: #fff;
+  display: flex;
+  height: 65px;
+  top: 0;
+  position: fixed;
+  width: 100%;
+}
+
+header h1 {
+  font-family: ‘Noto Sans’, Verdana, Arial, sans-serif;
+  font-weight: normal; /* 400 */
+  margin: 5px 5px 0 18px;
+  visibility: hidden;
+}
+
+header .banner {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  margin: 0 10px 0 0;
+  /* border-style: dotted;
+    border-width: 1px;
+    border-color: lightgrey; */
+}
+
+header .other {
+  display: flex;
+  flex-grow: 1;
+  /* border-style: dotted;
+    border-width: 1px;
+    border-color: lightgrey; */
+}
+
+:focus {
+  outline: 4px solid #3b99fc;
+  outline-offset: 1px;
+}
+
+/*
+  These are sample media queries only. Media queries are quite subjective
+  but, in general, should be made for the three different classes of screen
+  size: phone, tablet, full.
+*/
+
+@media screen and (min-width: 600px) and (max-width: 899px) {
+  header h1 {
+    font-size: calc(7px + 2.2vw);
+    visibility: visible;
+  }
+}
+
+@media screen and (min-width: 900px) {
+  header h1 {
+    font-size: 20px;
+    visibility: visible;
+  }
+}