wip: Allow to define the version of the theme as well as the version …

…of the KDK theme #11
kalisio · Jun 12, 2024 · 96b498a · 96b498a
1 parent fc4d947
commit 96b498a
Show file tree

Hide file tree

Showing 6 changed files with 35 additions and 48 deletions.
diff --git a/README.md b/README.md
@@ -49,27 +49,12 @@ my-theme
  └─login
      |_ theme.properties
      └─ resources
-        ├─ theme.json
         ├─ js
         |   └─ config.js
         └─ img
             └─ logo.png
 
 ```
-#### theme.json
-
-The `theme.json` file allows you to provide extra informations that can be used by the various fragments.
-
-By default the `theme.json` provides version informations for the theme as well as for the parent KDK theme:
-
-```json
-{
-  "version": {
-    "theme": "latest",
-    "kdkTheme": "latest"
-  }
-}
-```
 
 > [!NOTE]
 > These informations are used by the default `footer.ftl` fragment which displays the different version in a tooltip.
@@ -87,6 +72,13 @@ locales=fr,en
 meta=viewport==width=device-width,initial-scale=1
 ```
 
+In addition, this theme provides 2 additional variables: 
+* `version`: which allows you to define the version of your theme.
+* `kdkVersion`: which allows you to define the version of the KDK theme.
+
+> [!TIP]
+> These variables can be useful to customize your CI process.
+
 #### config.js
 
 The `config.js` file allows you to configure **Quasar** by defining a [Quasar Config Object](https://quasar.dev/start/umd/#quasar-config-object). 

diff --git a/themes/kdk/login/fragments/footer.ftl b/themes/kdk/login/fragments/footer.ftl
@@ -2,8 +2,8 @@
   <div class="row justify-center items-center q-gutter-x-sm">
     <q-icon id="theme-info" name="las la-info-circle" size="xs">
       <q-tooltip class="bg-primary text-white text-caption">
-        <div>${msg('themeVersion')}: <b>{{ getVersion()?.theme }}</b></div>
-        <div>${msg('kdkThemeVersion')}: <b>{{ getVersion()?.kdkTheme }}</b></div>
+        <div>${msg('themeVersion')}: <b>{{ version().theme }}</b></div>
+        <div>${msg('kdkThemeVersion')}: <b>{{ version().kdk }}</b></div>
       </q-tooltip>
     </q-icon>
     <div>|</div>

diff --git a/themes/kdk/login/resources/js/quasar.js b/themes/kdk/login/resources/js/quasar.js
@@ -10,14 +10,11 @@ const app = Vue.createApp({
     const environment = JSON.parse(String(document.querySelector('#environment').textContent))
     let informations = null
     // functions
-    function getInformations () {
-      if (!informations) {
-        informations = JSON.parse(String(document.querySelector('#informations').textContent))
+    function version () {
+      return {
+        theme: themeVersion,
+        kdk: kdkVersion
       }
-      return informations
-    }
-    function getVersion () {
-      return getInformations().version
     }
     async function popup (title, file) {
       // compute the localized file
@@ -56,8 +53,7 @@ const app = Vue.createApp({
       showPasswordNew: Vue.ref(false),
       showPasswordConfirm: Vue.ref(false),
       submitAction: Vue.ref(''),
-      getInformations,
-      getVersion,
+      version,
       popup
     }
   }

diff --git a/themes/kdk/login/resources/theme.json b/themes/kdk/login/resources/theme.json
diff --git a/themes/kdk/login/template.ftl b/themes/kdk/login/template.ftl
@@ -31,7 +31,25 @@
     <#list properties.scripts?split(' ') as script>
       <script src="${url.resourcesPath}/js/${script}" type="text/javascript"></script>
     </#list>
-  </#if> 
+  </#if>
+  <#if properties.version?has_content>
+    <script>
+      const themeVersion = '${properties.version}'
+    </script>
+  <#else>
+    <script>
+      const themeVersion = undefined
+    </script>
+  </#if>
+  <#if properties.kdkVersion?has_content>
+    <script>
+      const kdkVersion = '${properties.kdkVersion}'
+    </script>
+  <#else>
+    <script>
+      const kdkVersion = undefined
+    </script>      
+  </#if>
 </head>
 
 <body>
@@ -93,21 +111,6 @@
       }
     }
   </script>
-  <!--
-    Retrieve theme informations
-  -->  
-  <script id="informations" type="application/json">
-    { }
-  </script>
-  <script>
-    (async function () {
-      const response = await fetch('${url.resourcesPath}/theme.json')
-      if (response.ok) {
-        const informations = document.querySelector('#informations')
-        informations.text = await response.text()
-      }
-    })()
-  </script>
   <!-- 
     Use Vue and Quasar with UMD version
     For more information, refer to https://quasar.dev/start/umd#installation

diff --git a/themes/kdk/login/theme.properties b/themes/kdk/login/theme.properties
@@ -1,4 +1,6 @@
 parent=base
 import=common/keycloak
 locales=fr,en
+version=latest
+kdkVersion=latest
 meta=viewport==width=device-width,initial-scale=1