SXPR-40 improve lighthouse metrics

.java-version

@@ -0,0 +1 @@
+17

README.md

@@ -32,6 +32,9 @@ To use this project on existing environment you have to use a command from secti
 ## Development
 
 ### Build
+> [!WARNING]
+> During installation, the application requires a connection to localhost:8080, which is run by Docker. Run Docker (as mentioned in the How to run section below) before running the install command.
+
 ```bash
 ./mvnw clean install
 ```
@@ -62,7 +65,7 @@ Please check the community support section in [WebSight Starter](https://github.
 Kyanite components is `open-source` project with `Apache License 2.0` license.
 
 ## Light and dark mode
-Kyanite does not support light and dark system mode, it forces one of each with class from space template on `html` tag: `theme-dark` and `theme-light`. It can be used as a base color system for any new theme. 
+Kyanite does not support light and dark system mode, it forces one of each with class from space template on `html` tag: `theme-dark` and `theme-light`. It can be used as a base color system for any new theme.
 
 ## Creating a New Theme for Kyanite
 
@@ -143,7 +146,7 @@ Other global variables (for others, check `:root`):
 ```
 
 If you wish to customize components, use css variables inside top level component's name class:
-``` 
+```
   .card {
     --kyanite-card-background-color: #ffffff;
     --kyanite-card-footer-border-top: #ededed;
@@ -153,7 +156,7 @@ If you wish to customize components, use css variables inside top level componen
 ### 3. Add the Style File to the Bundle
 
 Ensure that the style file is included in the bundle by adding the following lines to your configuration:
-``` 
+```
 Sling-Bundle-Resources: /apps/my-project/webroot
 WebSight-Apps-WebRoot: /apps/my-project/webroot
 ```

applications/common/frontend/README.md

@@ -27,10 +27,14 @@ Front-End files are deployed as a part of `core` package.
 CSS Variables are generated automatically in 'global-variables.scss'. These variables can be `used` or `redefined` in your project.
 
 Places where the data necessary to generate css variables are located:
-1. `/atomic-design-system/00-token/` - Contain folders named and arranged according to the purpose of css attributes. 
+1. `/atomic-design-system/00-token/` - Contain folders named and arranged according to the purpose of css attributes.
 2. `/bulma-overwrite/_variables.scss` - Contain defined spacing names and values.
 
 Important files:
 1. `global-variables.scss` - File responsible for generating css variables base on sass maps imported from '/atomic-design-system/00-token/*' and '/bulma-overwrite/_variables.scss'.
 
 IMPORTANT: The names of maps defined in the '/atomic-design-system/00-token/' and '/bulma-overwrite/_variables.scss' can't be changed because the rest of 'atomic-design-system' uses css variables from 'global-variables.scss'.
+
+## Bulma css size
+
+We use at least one component from every Bulma module, which forces us to import the entire framework. As a result, the final CSS bundle is around 900 KB. Bulma doesn’t offer granular tree‑shaking or modular builds that would allow us to reduce the output size based on actual usage.

applications/common/frontend/src/components/Image/Image.scss

@@ -40,7 +40,7 @@ $color-shadow-end: rgba(#605e78, 0.07);
   }
 }
 
-.viewer-backdrop {
+.viewer-container.viewer-backdrop {
   background-color: rgba(0, 0, 0, .9);
 }
 

applications/common/frontend/src/components/index.ts

@@ -14,8 +14,6 @@
  * limitations under the License.
  */
 
-import "@algolia/autocomplete-theme-classic";
-
 import './CodeSnippet/codesnippet';
 import './ContactForm/contactForm';
 import './Dropdown/dropdown';
@@ -33,6 +31,7 @@ import './Table/table';
 import './BlogTableOfContent/blogtableofcontent';
 import './Accordion/accordion';
 import './Video/video.js';
+import { upgradeMdiIcons } from '../helpers/icons';
 
 document.querySelectorAll('.navbar-item.has-dropdown').forEach((navbarItem) => {
   navbarItem.addEventListener('keydown', (event: KeyboardEvent) => {
@@ -41,3 +40,5 @@ document.querySelectorAll('.navbar-item.has-dropdown').forEach((navbarItem) => {
     }
   });
 });
+
+upgradeMdiIcons();

applications/common/frontend/src/global.scss

@@ -16,6 +16,46 @@
 
 @use 'src/atomic-design-system/00-token/t.border' as border;
 
+/* Be Vietnam Pro */
+@font-face {
+  font-display: swap;
+  font-family: 'Be Vietnam Pro';
+  font-style: normal;
+  font-weight: 400;
+  src: url('./fonts/be-vietnam-pro-v12-latin-regular.woff2') format('woff2');
+}
+
+@font-face {
+  font-display: swap;
+  font-family: 'Be Vietnam Pro';
+  font-style: normal;
+  font-weight: 500;
+  src: url('./fonts/be-vietnam-pro-v12-latin-500.woff2') format('woff2');
+}
+
+@font-face {
+  font-display: swap;
+  font-family: 'Be Vietnam Pro';
+  font-style: normal;
+  font-weight: 600;
+  src: url('./fonts/be-vietnam-pro-v12-latin-600.woff2') format('woff2');
+}
+
+@font-face {
+  font-display: swap;
+  font-family: 'Be Vietnam Pro';
+  font-style: normal;
+  font-weight: 700;
+  src: url('./fonts/be-vietnam-pro-v12-latin-700.woff2') format('woff2');
+}
+
+@font-face {
+  font-display: swap;
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  src: url('./fonts/roboto-v51-latin-regular.woff2') format('woff2');
+}
 
 .navbar-link:not(.is-arrowless)::after,
 .select:not(.is-multiple, .is-loading)::after {
@@ -52,8 +92,8 @@ a:not(.button, .link) {
 }
 
 input:-webkit-autofill,
-input:-webkit-autofill:hover, 
-input:-webkit-autofill:focus, 
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus,
 input:-webkit-autofill:active {
     -webkit-box-shadow: 0 0 0 30px var(--kyanite-body-background-color) inset;
     -webkit-text-fill-color: var(--kyanite-body-color);
@@ -75,3 +115,13 @@ input[type=checkbox] {
 strong {
   color: inherit;
 }
+
+/* icons */
+
+.mdi-svg {
+  width: 1em;
+  height: 1em;
+  fill: currentcolor;
+  display: inline-block;
+  vertical-align: middle;
+}

applications/common/frontend/src/helpers/icons.ts

@@ -0,0 +1,89 @@
+/*
+ * Copyright (C) 2026 Dynamic Solutions
+ *
+ * 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.
+ */
+
+const iconCache = new Map()
+
+async function loadIcon(name: String) {
+  if (iconCache.has(name)) {
+    return iconCache.get(name).cloneNode(true);
+  }
+
+  const response = await fetch(
+    `https://cdn.jsdelivr.net/npm/@mdi/svg/svg/${name}.svg`
+  )
+
+  if (!response.ok) {
+    throw new Error(`Cannot load icon: ${name}`);
+  }
+
+  const svgText = await response.text();
+  const wrapper = document.createElement('div');
+  wrapper.innerHTML = svgText.trim();
+
+  const svg = wrapper.firstElementChild;
+
+  if (!svg) {
+    return;
+  }
+
+  svg.classList.add('mdi-svg');
+  iconCache.set(name, svg);
+
+  return svg.cloneNode(true);
+}
+
+export async function upgradeMdiIcons(root = document) {
+  const elements = root.querySelectorAll('.mdi') as NodeListOf<HTMLElement>;
+
+  for (const el of elements) {
+    const mdiClass = [...el.classList].find(cls => {
+        // looking for the icon name, ignoring the size classes (e.g. mdi-36px)
+        const match = cls.match(/mdi-(?!\d+px)([a-zA-Z0-9-]+)$/);
+
+        return match?.[1] || false;
+      }
+    )
+
+    if (!mdiClass) continue;
+
+    const iconName = mdiClass.replace('mdi-', '');
+
+    try {
+      const svg = await loadIcon(iconName);
+
+      for (const cls of el.classList) {
+        if (cls !== 'mdi' && !cls.startsWith('mdi-')) {
+          svg.classList.add(cls);
+        }
+      }
+
+      svg.style.cssText = el.style.cssText;
+
+      for (const attr of el.attributes) {
+        if (
+          attr.name !== 'class' &&
+          attr.name !== 'style'
+        ) {
+          svg.setAttribute(attr.name, attr.value);
+        }
+      }
+
+      el.replaceWith(svg);
+    } catch (err) {
+      console.error(err);
+    }
+  }
+}

applications/common/frontend/tsconfig.json

@@ -1,6 +1,6 @@
 {
     "compilerOptions": {
-        "target": "es5",
+        "target": "es6",
         "module": "es6",
         "baseUrl": "../frontend",
         "removeComments": true,

distribution/src/main/docker/websight-cms/Dockerfile

@@ -12,7 +12,7 @@
 # See the License for the specific language governing permissions and
 # limitations under the License.
 
-FROM docker.io/openjdk:17-slim
+FROM eclipse-temurin:17-jre
 
 EXPOSE 8080
 

pom.xml

@@ -160,6 +160,7 @@
                 <exclude>**/*.svg</exclude>
                 <exclude>**/.content.xml</exclude>
                 <exclude>**/sitemap.xml/**/*</exclude>
+                <exclude>**/.java-version</exclude>
               </excludes>
             </configuration>
           </execution>