Add back apidocs.css and linking fixes

Author: werwolf2303

internal/documentation/.vitepress/theme/index.ts

@@ -5,6 +5,7 @@ import { onMounted, watch, nextTick } from "vue";
 
 // custom css
 import "./custom.css";
+import "./apidocs.css";
 
 // global components
 import Badgen from "@theme/components/Badgen.vue";
@@ -25,7 +26,7 @@ export default {
   },
 
   setup() {
-    // this function will be executed inside VitePressApp's setup hook. 
+    // this function will be executed inside VitePressApp's setup hook.
     // all composition APIs are available here.
     const route = useRoute();
     let initZoom: () => void;

internal/documentation/jsdoc/docdash/publish.js

@@ -625,6 +625,11 @@ function linkTo(longname, linkText, cssClass, fragmentId) {
         if (fileUrl && githubSourceBaseUrl && (fileUrl.endsWith('.js.md') || longname.endsWith('.js'))) {
             fileUrl = convertSourceLinkToGitHub(fileUrl, longname);
         }
+        // Remove .md extension from internal links for VitePress compatibility
+        // Handle both cases: with and without fragment identifiers
+        else if (fileUrl) {
+            fileUrl = fileUrl.replace(/\.md(#|$)/, '$1');
+        }
     }
 
     text = text || longname;
@@ -679,8 +684,10 @@ function linkComplexType(longname, linkText, cssClass) {
     if (/^.+\|.+$/.test(longname) && !/<.+>/.test(longname)) {
         const types = longname.split('|').map(t => t.trim());
         return types.map(type => {
-            const url = helper.longnameToUrl[type];
+            let url = helper.longnameToUrl[type];
             if (url) {
+                // Remove .md extension for VitePress compatibility
+                url = url.replace(/\.md$/, '');
                 return util.format('<a href="%s"%s>%s</a>', encodeURI(url), classString, htmlsafe(type));
             }
             return htmlsafe(type);
@@ -714,8 +721,10 @@ function linkGenericType(type, classString) {
 
     // Link the base type if it has a URL
     let result = '';
-    const baseUrl = helper.longnameToUrl[baseType];
+    let baseUrl = helper.longnameToUrl[baseType];
     if (baseUrl) {
+        // Remove .md extension for VitePress compatibility
+        baseUrl = baseUrl.replace(/\.md$/, '');
         result = util.format('<a href="%s"%s>%s</a>', encodeURI(baseUrl), classString, htmlsafe(baseType));
     } else {
         result = htmlsafe(baseType);
@@ -727,8 +736,10 @@ function linkGenericType(type, classString) {
     if (isComplexTypeExpression(innerType)) {
         result += linkComplexType(innerType, null, classString.replace(' class="', '').replace('"', ''));
     } else {
-        const innerUrl = helper.longnameToUrl[innerType];
+        let innerUrl = helper.longnameToUrl[innerType];
         if (innerUrl) {
+            // Remove .md extension for VitePress compatibility
+            innerUrl = innerUrl.replace(/\.md$/, '');
             result += util.format('<a href="%s"%s>%s</a>', encodeURI(innerUrl), classString, htmlsafe(innerType));
         } else {
             result += htmlsafe(innerType);

internal/documentation/jsdoc/docdash/tmpl/params.tmpl

@@ -63,5 +63,5 @@
     var self = this;
     params.forEach(function(param) {
         if (!param) { return; }
-?>| <?js if (params.hasName) {?>`<?js= param.name ?>` | <?js } ?><?js if (param.type && param.type.names) {?><?js= self.partial('type.tmpl', param.type.names) ?><?js } ?> | <?js if (params.hasAttributes) {?><?js if (param.optional) { ?>optional<?js } ?><?js if (param.nullable) { ?><?js if (param.optional) { ?>, <?js } ?>nullable<?js } ?><?js if (param.variable) { ?><?js if (param.optional || param.nullable) { ?>, <?js } ?>repeatable<?js } ?> | <?js } ?><?js if (params.hasDefault) {?><?js if (typeof param.defaultvalue !== 'undefined') { ?>`<?js= self.htmlsafe(param.defaultvalue) ?>`<?js } ?> | <?js } ?><?js if(param.description !== undefined) { ?><?js= param.description.replaceAll('\n', '<br>') ?><?js } ?><?js if (param.subparams) { ?><br>*Properties:*<?js= self.partial('properties.tmpl', param.subparams).replace("\n", "") ?><?js } ?>
+?>| <?js if (params.hasName) {?>`<?js= param.name ?>` | <?js } ?><?js if (param.type && param.type.names) {?><?js= self.partial('type.tmpl', param.type.names) ?><?js } ?> | <?js if (params.hasAttributes) {?><?js if (param.optional) { ?>optional<?js } ?><?js if (param.nullable) { ?><?js if (param.optional) { ?>, <?js } ?>nullable<?js } ?><?js if (param.variable) { ?><?js if (param.optional || param.nullable) { ?>, <?js } ?>repeatable<?js } ?> | <?js } ?><?js if (params.hasDefault) {?><?js if (typeof param.defaultvalue !== 'undefined') { ?>`<?js= self.htmlsafe(param.defaultvalue) ?>`<?js} ?> | <?js } ?><?js if(param.description !== undefined) { ?><?js= param.description.replaceAll('\n', '<br>') ?><?js } ?><?js if (param.subparams) { ?><br>*Properties:*<?js= self.partial('properties.tmpl', param.subparams).replace("\n", "").replaceAll("|", "&#124;") ?><?js } ?>
 <?js }); ?>

internal/documentation/jsdoc/docdash/tmpl/properties.tmpl

@@ -36,4 +36,4 @@
             props.hasDefault = true;
         }
     });
-?><table class="props"><thead><tr><?js if (props.hasName) {?><th>Name</th><?js } ?><th>Type</th><?js if (props.hasAttributes) {?><th>Attributes</th><?js } ?><?js if (props.hasDefault) {?><th>Default</th><?js } ?><th class="last">Description</th></tr></thead><tbody><?js var self = this; props.forEach(function(prop) { if (!prop) { return; } ?><tr><?js if (props.hasName) {?><td class="name"><code><?js= prop.name ?></code></td><?js } ?><td class="type"><?js if (prop.type && prop.type.names) {?><?js= self.partial('type.tmpl', prop.type.names) ?><?js } ?></td><?js if (props.hasAttributes) {?><td class="attributes"><?js if (prop.optional) { ?>optional<?js } ?><?js if (prop.nullable) { ?>nullable<?js } ?></td><?js } ?><?js if (props.hasDefault) {?><td class="default"><?js if (typeof prop.defaultvalue !== 'undefined') { ?><code><?js= self.htmlsafe(prop.defaultvalue) ?></code><?js } ?></td><?js } ?><td class="description last"><?js= prop.description?.replaceAll("\n", "<br>") ?><?js if (prop.subprops) { ?><h6>Properties</h6><?js= self.partial('properties.tmpl', prop).replace("\n", "") ?><?js } ?></td></tr><?js }); ?></tbody></table>
+?><table class="props"><thead><tr><?js if (props.hasName) {?><th>Name</th><?js } ?><th>Type</th><?js if (props.hasAttributes) {?><th>Attributes</th><?js } ?><?js if (props.hasDefault) {?><th>Default</th><?js } ?><th class="last">Description</th></tr></thead><tbody><?js var self = this; props.forEach(function(prop) { if (!prop) { return; } ?><tr><?js if (props.hasName) {?><td class="name"><code><?js= prop.name ?></code></td><?js } ?><td class="type"><?js if (prop.type && prop.type.names) {?><?js= self.partial('type.tmpl', prop.type.names) ?><?js } ?></td><?js if (props.hasAttributes) {?><td class="attributes"><?js if (prop.optional) { ?>optional<?js } ?><?js if (prop.nullable) { ?>nullable<?js } ?></td><?js } ?><?js if (props.hasDefault) {?><td class="default"><?js if (typeof prop.defaultvalue !== 'undefined') { ?><code><?js= self.htmlsafe(prop.defaultvalue) ?></code><?js } ?></td><?js } ?><td class="description last"><?js= prop.description?.replaceAll("\n", "<br>") ?><?js if (prop.subprops) { ?><h6>Properties</h6><?js= self.partial('properties.tmpl', prop).replace("\n", "").replaceAll("|", "&#124;") ?><?js } ?></td></tr><?js }); ?></tbody></table>

internal/documentation/jsdoc/jsdoc-workspace.json

@@ -27,10 +27,7 @@
 		"cleverLinks": false,
 		"monospaceLinks": false,
 		"default": {
-			"useLongnameInNav": true,
-			"staticFiles": {
-				"include": ["jsdoc/templates/custom.css"]
-			}
+			"useLongnameInNav": true
 		}
 	},
 	"openGraph": {

internal/documentation/jsdoc/jsdoc.json

@@ -26,10 +26,7 @@
 		"cleverLinks": false,
 		"monospaceLinks": false,
 		"default": {
-			"useLongnameInNav": true,
-			"staticFiles": {
-				"include": ["jsdoc/templates/custom.css"]
-			}
+			"useLongnameInNav": true
 		}
 	},
 	"openGraph": {
@@ -64,6 +61,7 @@
 				"class": "menu-item",
 				"id": "github_link"
 			}
-		}
+		},
+		"githubSourceBaseUrl": "https://github.com/UI5/cli/blob/main"
 	}
 }