Cosmetics in Java properties table

.vitepress/theme/components/ConfigInspect.vue

@@ -4,7 +4,7 @@
   >
   <!-- :hideTriggers="[]" :shown="true" -->
 
-    <a class="cfg vp-doc"><span class="cfg">{{ label }}</span></a>
+    <a class="cfg vp-doc"><span class="cfg" v-html="label"></span></a>
 
     <template #popper>
       <div class="vp-code-group vp-doc" v-if="java">
@@ -120,7 +120,7 @@
 
     pkgStr.value = JSON.stringify(pkg, null, 2)
     rcJsonStr.value = JSON.stringify(pkg.cds??{}, null, 2)
-    rcJsStr.value = 'exports.' + Object.keys(pkg.cds??{})[0] + ' = ' + JSON.stringify(Object.values(pkg.cds??{})[0], null, 2).replaceAll('"', '')
+    rcJsStr.value = 'exports.' + Object.keys(pkg.cds??{})[0] + ' = ' + (JSON.stringify(Object.values(pkg.cds??{})[0], null, 2)??'').replaceAll('"', '')
     rcYmlStr.value = yaml.stringify(pkg.cds)
 
     let envKey = fqn.replaceAll('_', '__').replaceAll(keyDel, '_')

java/developing-applications/properties.data.ts

@@ -1,5 +1,6 @@
 import { defineLoader } from 'vitepress'
 
+//@ts-expect-error
 const { themeConfig: { capire }} = global.VITEPRESS_CONFIG.site
 const version = capire.versions.java_services
 
@@ -13,15 +14,19 @@ export default defineLoader({
 
 function massageProperties(properties: JavaSdkProperties[]): OurProperties[] {
   return properties.map(({ name, header, type, default:defaultValue, doc }) => {
-    if (defaultValue && type?.startsWith('List')) { // split list default values into multiple lines for better readability
-      defaultValue = defaultValue.replace(/, ?/g, ',<br>')
-    }
+    const isListValue = type?.startsWith('List')
+    let defaultValueHTML = defaultValue ? `<code class="no-bg">${defaultValue}</code>` : ''
+    defaultValueHTML = isListValue ? defaultValueHTML.replace(/, ?/g, ',<br>') : defaultValueHTML
     return {
-      name: name.replaceAll(/<(index|key)>/g, '<i>&lt;$1&gt;</i>'),  // decorate special <key> and <index> names
+      name,
+      nameHTML: name
+        .replaceAll(/<(index|key)>/g, '<i>&lt;$1&gt;</i>') // decorate special <key> and <index> names
+        .replaceAll('.', '.<wbr>'),  // wrap long property names on dots
       type: type?.replaceAll(/<(.*)>/g, ''), // remove generics for display
       typeFull: type,
       description: md2Html(doc),
-      defaultValue: defaultValue ? `<code class="no-bg">${defaultValue}</code>` : '',
+      defaultValue: isListValue ? (defaultValue??'').split(',').map(item => item.trim()) : defaultValue,
+      defaultValueHTML,
       header,
       anchor: name.replaceAll('.', '-').replaceAll(/[<>]/g, '').toLowerCase()
     }
@@ -45,10 +50,12 @@ type JavaSdkProperties = {
 
 type OurProperties = {
   name: string,
+  nameHTML: string,
   header: string,
   type: string,
   description: string,
-  defaultValue: string,
+  defaultValue: string | string[],
+  defaultValueHTML: string,
   typeFull: string,
   anchor: string
 }

java/developing-applications/properties.md

@@ -32,9 +32,11 @@ In property files `<index>` should be replaced with a number and `<key>` with an
   </thead>
   <tr v-for="p in properties" :key="p.name" :id="p.anchor">
     <td class="anchor"><a :href="'#'+p.anchor" class="header-anchor"></a></td>
-    <td class="prop"      v-html="p.name" :class="{ group: p.header }"></td>
+    <td class="prop"      :class="{ group: p.header }">
+      <Config :label="p.nameHTML" java>{{p.name}}={{ Array.isArray(p.defaultValue) ? `${JSON.stringify(p.defaultValue)}` : p.defaultValue }}</Config>
+    </td>
     <td class="java-type" v-html="p.type" :title="p.typeFull"></td>
-    <td class="default" v-html="p.defaultValue"></td>
+    <td class="default" v-html="p.defaultValueHTML"></td>
     <td class="descr"   v-html="p.description"></td>
   </tr>
 </table>
@@ -50,16 +52,61 @@ In property files `<index>` should be replaced with a number and `<key>` with an
   td.anchor .header-anchor {
     top: 50% !important;
     left: 50% !important;
+    margin-left: 0;
     transform: translate(-50%, -50%);
   }
 
   td.group { font-weight:600; }
-  th.anchor, td.anchor { border-right:none; }
+  th.anchor, td.anchor {
+    width: 0;
+    border-right:none;
+  }
   th.prop,   td.prop { border-left:none; padding-left:0px;}
+  thead {
+    position: sticky;
+    top: calc(var(--vp-nav-height, 44px) + var(--vp-layout-top-height, 0px));
+    z-index: 4;
+  }
+  thead th {
+    position: sticky;
+    top: calc(var(--vp-nav-height, 44px) + var(--vp-layout-top-height, 0px));
+    z-index: 5;
+    background: var(--vp-c-bg);
+  }
+  table {
+    display: table;
+    width: max-content;
+    min-width: 100%;
+    overflow-x: visible;
+  }
+  th.java-type, td.java-type { white-space: nowrap; }
+  th.default, td.default {
+    white-space: normal;
+    overflow-wrap: anywhere;
+    word-break: break-word;
+    min-width: 12ch;
+  }
+  td.default :deep(code) {
+    display: inline-block;
+    white-space: normal;
+    overflow-wrap: anywhere;
+    word-break: break-word;
+    min-width: 12ch;
+    max-width: 100%;
+  }
 
   /* expand this extra wide table on big screens */
   @media screen and (min-width: 1600px) {
-    table { min-width: fit-content; }
+    th.prop, td.prop {
+      width: 36ch;
+      max-width: 36ch;
+    }
+    th.default, td.default {
+      min-width: 24ch;
+      width: 34ch;
+      max-width: 34ch;
+    }
+    th.descr, td.descr { min-width: 64ch; }
     tr { position: initial; } /* for anchor to appear */
   }
 </style>