Link JavaScript file

[Gurushesh-Metapercept]

I want to link/add my custom JavaScript file in the every html file (html files with nested hierarchy). how can I do this without using CDN or without hosting js file somewhere. can't add js code in bootstrap.hdf.xml because code is pretty big also required some dynamic changes after DOMContentLoaded

I have added files using some path logic but it's not working in Heretto environment (is not creating directory path - code is not working)

I want JavaScript path something like(because my output folder has many nested folder and html files) but is not working in Heretto

here is the logic which I have used for generating ../../ path for the js file

 <xsl:variable name="relpath">
        <xsl:choose>
          <xsl:when test="$FILEDIR='.'">
            <xsl:text>.</xsl:text>
          </xsl:when>
          <xsl:otherwise>
            <!-- <xsl:value-of select=" replace($FILEDIR,'[^/]+','..')"/> -->
            <xsl:variable name="numSegments" select="string-length($FILEDIR) - string-length(translate($FILEDIR, '\\', ''))"/>
            <xsl:variable name="editedPath">
              <xsl:for-each select="0 to $numSegments">
              <xsl:value-of select="'../'"/>
              </xsl:for-each>
            </xsl:variable>

            <xsl:value-of select="$editedPath"/>
          </xsl:otherwise>
        </xsl:choose>
      </xsl:variable>

//Use 
 <script language="javascript" src="{$relpath}js/commonJS.js"/> 
 <script language="javascript" src="{$relpath}js/script.js"/> 

[jason-fox]

The infotexture/dita-bootstrap.lunr plugin already does something like this.

So you can create a custom plugin which overrides <xsl:template match="/ | @* | node()" mode="processHDF"> and ends with a call to <xsl:next-match/> like this example.

$OFFLINE_MODE decides whether to use a CDN or to include a local file.

Thereafter the plugin.xml <feature extension="depend.preprocess.copy-html.pre" /> calls a function to copy over the relevant files

[Gurushesh-Metapercept]

can i do this directly in bootstrap plugin .. i don't want to create another separate plugin

[jason-fox]

No. Each plugin has a separate job. dita-bootstrap just renders Bootstrap and offers an extension point for other plugins to add additional functionality. It would not be recommended to edit the code within this plugin if you can avoid it, as then you won't be able to easily update to newer versions. dita-bootstrap.lunr, dita-bootstrap.sass etc. already show how to demonstrate an extension of basic DITA bootstrap. The functionality could have been all bundled together in a single monolith, but that would make it very bloated and unnecessarily large for most users.

[jason-fox]

@Gurushesh-Metapercept - this plugin https://github.com/jason-fox/dita-bootstrap.css-toggle can be used as a template to achieve what you want to do.

Remote scripts on a CDN can be added directly here

For local <script> tags remember to use {$relpath} and include the files in the output by amending the include on the <fileset> here