How to insert HTML content in WebHelp Responsive output

You can add custom HTML content in the WebHelp Responsive output by inserting it in a well-formed XML file that will be referenced in the transformation (either from a Oxygen Publishing Template or using one of the HTML fragment parameters). This content may include references to additional JavaScript, CSS, and other types of resources, or such resources can be inserted inline within the HTML content that is inserted in the XML file.

The XML File

There are several things to consider in regards to this XML file:

Well-Formedness - If the file is not a Well-formed XML document (or fragments are not well-formed), the transformation will fail.
A common use case is if you want to include several script or link elements. In this case, the XML fragment has multiple root elements and to make it well-formed, you can wrap it in an html element. This element tag will be filtered out and only its children will be copied to the output documents. Similarly, you can wrap your content in head, body, html/head, or html/body elements.
Referencing Resources in the XML File - You can include references to local resources (such as JavaScript or CSS files) by using the built-in ${oxygen-webhelp-output-dir} macro to specify their paths relative to the output directory:
```
<html>
 <script type="text/javascript" src="${oxygen-webhelp-output-dir}/js/test.js"/>
 <link rel="stylesheet" type="text/css" 
       href="${oxygen-webhelp-output-dir}/css/test.css" />
</html>
```
If you want that the path of your resource to be relative to the templates directory, you can use the ${oxygen-webhelp-template-dir} macro.
To copy the referenced resources to the output directory, follow the procedure in How to copy additional resources to output directory.

Inline JavaScript or CSS Content - If you want to include inline JavaScript or CSS content in the XML file, it is important to place this content inside an XML comment, as in the following examples:

JavaScript:

<script type="text/javascript">
  <!--
    /* Include JavaScript code here. */
							
    function myFunction() {
      return true;
    }
  -->
</script>

CSS:

<style>
 <!-- 
  /* Include CSS style rules here. */
								
  *{
    color:red
  } 
 -->
</style>

Using WebHelp Macros Inside an HTML Fragment File

The XML file can use WebHelp macros, which are variables that will be expanded when the content of the HTML fragment file will be copied in the final output.

The following macros are supported:

i18n

For localizing a string.

${i18n(string.id)}

param

Returns the value of a transformation parameter.

${param(webhelp.show.main.page.tiles)}

env

Returns the value of an environment variable.

${env(JAVA_HOME)}

system-property

Returns the value of a system property.

${system-property(os.name)}

timestamp

Can be used to format the current date and time. Accepts a string (as a parameter) that determines how the date and time will be formatted (format string or picture string as it is known in the XSLT specification). The format string must comply with the rules of the XSLT format-dateTime function specification.

${timestamp([h1]:[m01] [P] [M01]/[D01]/[Y0001])}

path

Returns the path associated with the specified path ID. The following paths IDs are supported:

oxygen-webhelp-output-dir - The path to the output directory. The path is relative to the current HTML file.
oxygen-webhelp-assets-dir - The path to the oxygen-webhelp subdirectory from the output directory. The path is relative to the current HTML file.
oxygen-webhelp-template-dir - The path to the template directory. The path is relative to the current HTML file.
```
${path(oxygen-webhelp-template-dir)} 
```

Note: New paths IDs can be added by overriding the wh-macro-custom-path template from com.oxygenxml.webhelp.responsive\xsl\template\macroExpander.xsl:

<!-- Extension template for expanding a custom path macro. -->
<xsl:template name="wh-macro-custom-path">
    <xsl:param name="pathId"/>
    <xsl:value-of select="$pathId"/>
</xsl:template>

map-xpath

Can be used to execute an XPath expression over the DITA map file from the temporary directory.

Tip: Available in all template layout HTML pages.

${map-xpath(/map/title)}

map-xpath

Can be used to execute an XPath expression over the current topic.

Tip: Available only in the topic HTML page template (wt_topic.html).

${topic-xpath(string-join(//shortdesc//text(), ' '))}

oxygen-webhelp-build-number

Returns the current WebHelp distribution ID (build number).

${oxygen-webhelp-build-number}